@charset "utf-8";
/* CSS Document */

div#menu ul	{	float:	left;				/*aus dem Dokumentenfluss heraus gehoben*/
				width: 150px;				/*Breitenangabe jedes Buttons*/
				list-style-type: none;		/*überall in allen ul und den darin enthaltenen li werden Aufzählungszeichen entfernt*/
				line-height: 1.25em;
				font-size: 1em;  /*damit verbunden die Größe der Kästchen!*/
				
				position: relative; /*in höhere Ebene gesetzt, sonst verschinden die Buttons unterm Header*/
				z-index: 10;
				margin-right: 0.5em;
			}	
								
div#menu h3	{	text-align:center;			/*Text zentriert*/
				color: #000; 				/*Textfarbe schwarz*/
				border: 1px solid #000;	
				padding: 0.75em 0 0.75em 0;
				background-color: #FFF;
				border-radius: 1.25em;
			}	

div#menu .direkt /*wenn in der ersten ul was angeklickt ist*/
			{	text-align:center;			/*Text zentriert*/
				border: 1px solid #000;
				color: #000;  				/*Textfarbe schwarz*/
				display:block;				/*sollte man machen, damit man auch neben den text klicken kann, 
											  sonst wäre es ein inline-element und nur dort anklickbar wo der text steht*/
				padding: 0.75em 0 0.75em 0;
				background-color: #FFF; 
				border-radius: 1.25em;
			}
			
div#menu ul li .direkt,						
div#menu a	{	text-decoration:none;		/*Unterstriche entfernt*/
				text-align:center;			/*Text zentriert*/
				/* border: 1px solid #000;	*/
				color: #000;  				/*Textfarbe schwarz*/
				display:block;				/*sollte man machen, damit man auch neben den text klicken kann, 
											  sonst wäre es ein inline-element und nur dort anklickbar wo der text steht*/
				padding: 0.75em 0 0.75em 0;
			}	

div#menu ul li .direkt:hover,									
div#menu a:hover	{color: #fff; 			/*textfarbe weiß*/
                     background-color:#50479d;
					 border-radius: 1.25em;
					 padding: 0.75em 0 0.75em 0;
					}		
										
div#menu li	{	position: relative;	/*h3 wird als referenzpunkt gemacht*/
				/* border-left: 1px solid #FFF; */
			}		
								
div#menu ul ul	{	position:absolute;/*aus dem Dokumentenfluss heraus gehoben, sonst vergrößert sich das div nach unten (sieht man an der farbe) 
																	jedes mal runter beim öffnen des drop down*/
					display:none;		/*wird nicht angezeigt*/
					z-index: 20;		/*wird in Ebene 20 höher gesetzt*/
					top: 2.25em;		/*Abstand von oben in der z-index 20 */
					left: 0em;		/* bei 110% setzt sich der 3. ul nach rechts, dann hat es aber nicht mehr die verbindung zum hover-effekt*/
				}		
									
div#menu ul li:hover ul	{  display:block;	/*beim hover über die ul (h3) wird die darin enthaltene ul angezeigt 
											 (automatisch immer das darin enthaltene Element wird geöffnet) */
						   border-radius: 1.25em;
						   padding: 0.75em 0 0.75em 0;
						}	
												
div#menu a.direkt:link	{	font-size:1em;
							text-align:center;
							color: #000;	/*schwarz*/
							/* border: 1px solid #000; */
						}	
											
div#menu a.direkt:hover	{	color: #50479d;	
							/* border: 1px solid #000;  */
							border-radius: 1.25em;
							padding: 0.75em 0 0.75em 0;
						}
						
div#menu h3:hover {background-color:#50479d;
                   color: #FFF;	/*textfarbe weiß*/
				   border-radius: 1.25em;
				   padding: 0.75em 0 0.75em 0;
				  }						

               
div#menu ul li.direkt { background-color:#FFF;
						border-radius: 1.25em;
						color: #000;	/*textfarbe weiß*/
						padding: 0.75em 0 0.75em 0;
					   }
					   
div#menu ul li ul li a{ border: 1px solid #000; }
					   
div#menu ul li ul li a {background-color:#FFF; }
					   
div#menu ul li ul li a,
div#menu ul li ul li a:hover { border-radius: 1.25em;
							   padding: 0.75em 0 0.75em 0;
					          }