/*******************************************/
/* forrás: www.tutorial.hu                 */
/* készítette: Harder                      */
/*******************************************/

/* initializalas
-------------------------------------------------------------------------*/
/* alap beallitasok, margin-ok es padding-ok nullazasa */
html, body, form, input, select, fieldset {font-size: 11px; font-family: Tahoma, Verdana, Arial; color: #000000; }
body {background-color: #cccccc; }
/* heading es egyeb formazasok, melyek mas alapertelmezett margokkal birnak az egyes bongeszokben */
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, li, dl, address {margin: 0px; padding: 0px; }
/* alapertelmezett betumeret ezeknel az elemeknel */
h1, h2, h3, h4, h5, h6, pre, code {font-size: 10px; }
ul, ol {list-style: none; }
/* a linkek kez alakot kapjanak mindenhol */
form label {cursor: pointer; }
address {font-style: normal; }
/* a linkek alapertelmezett alahuzasat szunteti meg */
:link,:visited { text-decoration: none;  }
/* linkelt kepek keretezesenek megszuntetese */
a img,:link img,:visited img {border: none; }
/* a bordert nullazzuk fieldset eseteben */
fieldset {border: none; }
/* float-olt elemek utan hasznalatos clear */
div.clear, span.clear {clear: both; font-size: 0px; }

/* menu
-------------------------------------------------------------------------*/

/* ez folgalja magába a menüt */
div#container {
	margin: 20px;
	padding: 20px;
	background-color: #ffffff;
	}

/* a menü elemei */
div#container ul li {
	display: block; /* hogy méretezhetőek legyenek */
	float: left; /* balra floatolva, hogy egymás mellé kerüljenek */
	height: 40px; /* beállítja a magasságot */
	margin: 0px 10px 0px 0px; /* az egyes menüpontok közötti távolságot határozza meg */
	background-color: #ffcc00; /* a menüelemek háttérszíne */
	}

	/* a menüelemekben lévő linkek tulajdonságai */
	div#container ul li a {
		display: block;
		float: left;
		height: 40px; /* a magasság megegyezik a LI magasságával */
		line-height: 40px; /* a sor magassága megegyezik a LI magasságával */
		vertical-align: middle; /* ez rendezi be a szöveget vertikálisan a sor közepére */
		background: url(images/bg-center.gif); /* a háttérkép */
		font-weight: bold;
		color: #000000;
		cursor: pointer; /* az egér fölévitelére váltson át kézre a mutató */
		}

	/* a LI-ken belül található elemek, melyek a linket (A-t) közrefogják. Ezek gyakorlatilag a fülek 1-1 oldalai */
	div#container ul li a span.left,
	div#container ul li a span.right {
		display: block;
		float: left;
		width: 11px; /* szélessége megegyezik a kicsit lentebb látható bg-XXX.gif háttérképek szélességével */
		height: 40px; /* magasság megegyezik a LI magasságával */
		}
		div#container ul li a span.left { background: url(images/bg-left.gif) } /* a fülek bal oldalának háttérképe */
		div#container ul li a span.right { background: url(images/bg-right.gif); } /* a fülek jobb oldalának háttérképe */
	div#container ul li a span.text {
		display: block;
		float: left;
		padding: 0px 5px; /* meghatározza a szövegek távolságát a fülek széleitől */
		height: 40px; /* magasság megegyezik a LI magasságával */
		}
	/* a hover állapotú linkek formázásai */
	div#container ul li a:hover {
		text-decoration: underline;
		color: #ffffff;
		background: url(images/bg-center-blue.gif);
		}
		div#container ul li a:hover span.left { background: url(images/bg-left-blue.gif) } /* a fül hover állapotban ezt a háttérképet fogja megjelenítenia a fül bal oldalán */
		div#container ul li a:hover span.right { background: url(images/bg-right-blue.gif); } /* a fül hover állapotban ezt a háttérképet fogja megjeleníteni a fül jobb oldalán */