details{
	max-width: 400px;
	twidth: 310px;
  padding: 5px;
  background-color:#ffddcc; color:#662210; 
  tbackground-color: Aquamarine;
  border-radius: 15px;
  tcolor: black;
  FONT-SIZE: 16PX;
a{
		
  tbackground-color: Wheat;
	text-decoration: underline;
		color:black;
		font-size: 20px;
		font-weight: normal;
		
		}
}
 img{
		
		tborder-radius: 15px;
   }

   
  
   
   
tinput{
	width: 160px;
	height:22px;
	FONT-SIZE: 18PX;
}   

 body { background-color:#87CEFA; color:#662210;
         font:14px/24px Verdana, Geneva, sans-serif;} 

  * {margin:0; padding:0;}
  #tarolo {position:relative; display:block; min-height:90%;  height:90%;   width: 90%}
  #fejlec {position:absolute; display:block; top: 0;  left: 0;  
     height:50px; width: 90%; background-color:#662210; color:#ffddcc; 
     box-shadow: 0px 2px 5px 0px #441108, 0px 12px 15px 0px #441108 inset; 
     font:20px/34px 'Finger Paint', cursive;}
  #logo { float:left; margin: 5px 15px 5px 5px; } 

  #balmenu {position:absolute; display:block; top: 80px;  left: 0;  height:290px;  width:100px;  
     background-color:#662210; color:#ffddcc;
	 } 
  #tartalom {position:absolute; display:block; top:80px;  left:100px;   
    background-color:#ffddcc; color:#662210; padding-bottom:40px; } 
  #balmenu  p { margin:0; padding:0; text-align:justify; }  
  #balmenu ul li { padding-left: 0px;}
  #balmenu ul { padding-left: 20px;}

/* Háttérszín változik */
  #menu {position:absolute; display:block; top: 0px;  left: 0;  height:20px; width: 100%; 
     ttext-align:center; }

/* Listajel nem kell */
  #menu ul {list-style-type: none; }

/* A link elem csinosítása  */
#menusor a{
	float: left;
    background-color:#662210; 
	
     width: 150px; 
    height: 24px; border-radius: 1px  7px 7px 1px; 
    ttext-align:center;
    border-right:1px solid #ccbbaa; border-bottom:1px solid #ffaaaa; border-top:1px solid #bb8866; 
    box-shadow: 3px 3px 5px 0px #441108;
}


/* A link felírat csinosítása  */
  #menu  li a:link,  #menu  li a:visited {color:#ffddcc;
    font:  14px/24px Verdana, Geneva, sans-serif; 
    text-decoration:none; }

/* A link felírat csinosítása  */
  #menu  li a:hover {color:#ffeedd; background-color:#883218; text-decoration:none;} 
  #menu  li a:active {color:#ffeedd; background-color:#883218; border-bottom:2px; border-top:2px; padding-top:1px; font-size:13px; }



  
/* Main */
#menusor{ display:inline-block;	
        width: auto; 
	margin: 0;
	padding: 0 0 0 0;
	list-style: none;  
}

#menusor li{
	float: left;
	position: relative;
}

#menusor li:hover > ul{
	display: block;
}

/* Változások:
1. annak érdekében, hogy áttekinthető legyen az elemek kiválasztása
a felső szinten elhelyezkedő listát egyedi azonosítóval látjuk el '(*ul id="menusor"*)'.

2. A display tulajdonságát inline-block-ra állítjuk. Mivel egy szinttel feljebb a szöveget középre igazítottuk, ezért főmenüpontjaink a sor közepén egymás mellett fognak megjelenni.

3. A felső szint listaelemeinek pozíciója relatív. Ennek hatására a beágyazott listák helyzetét, abszolút pozicionálás esetén a szülő elem helyzetéből számolják a böngészők.

4. A beágyazott listánál a menüpontok magasságával megegyező függőleges eltolás kell megadni. A Z index beállításával pedig elérjük, hogy a menüpont, ha megjelenik, akkor az oldalon lévő többi HTML elem fölé kerüljön. Alapértelmezetten azonban a beágyazott lista nem látszik  (display: none;).

5. Ha az egérkurzor egy olyan főmenüpont fölé, amelyhez almenü is tartozik akkor a hozzátartozó almenü display tulajdonságát block-ra állítva jeleníthetjük meg az almenüpontokat. 

 */

#menusor ul{
    list-style: none;  
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 1000;    
}






#menusor ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    position: relative;
}



#menusor ul a{    
    padding: 1px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}


#menusor ul li a{
    background-color:#772810; 
}



/*
   Változások:

   1. A HTML kódot kiegészítjük egy újabb lista szinttel

   2. Az újonnan beágyazott listát most nem függőleges irányban tóluk el, hanem vízszintesen, a magasabb szintű menüpontok mellé.

   3. Az alsó szintű link elemeket, a jobb áttekinthetőség érdekében a többihez képest átszínezzük. 

*/

#menusor ul ul {
    left: 110px;
    top: 0px;
}

#menusor ul ul li a:link, 
#menusor ul ul li a:visited
 {
    background-color:#ffddcc; color:#662210;
}

#menusor ul ul li a:hover
 {
    background-color:#ffffff; color:#441106;
}
#menusor ul ul li a:active 
 {
    background-color:#ffddcc; color:#441106; font-size:13px;  border-bottom:2px; border-top:2px;
}