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

div#menu ul	{	float:	right;				/*aus dem Dokumentenfluss heraus gehoben*/
				list-style-type: none;		/*überall in allen ul und den darin enthaltenen li werden Aufzählungszeichen entfernt*/
				line-height: 1.25em;
				font-size: 0.9em;  /*damit verbunden die Größe der Kästchen!*/
				
				position: relative; /*in höhere Ebene gesetzt, sonst verschwinden die Buttons unterm Header*/
				z-index: 10;
			}	
								
div#menu h3	{	text-align:center;			/*Text zentriert*/
				color: #000; 				/*Textfarbe schwarz*/
				/* border: 1px solid #000; */ 	
				padding: 2em;
				text-transform:uppercase;
				font-family: Roboto,Segoe UI;
				font-weight:400;
			}	

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: 2em;
				text-transform:uppercase;
				font-family: Roboto,Segoe UI;
				font-weight:400;
			}

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: 2em;
			}	

div#menu ul li .direkt:hover,									
div#menu a:hover	{color: #fff; 			/*textfarbe weiß*/
                     background-color:#000;
					 padding: 2em;
					}		
										
div#menu li	{	position: relative;	/*h3 wird als referenzpunkt gemacht*/
				/* border-left: 1px solid #FFF; */
                background:url(../images/menu-spacer.gif) left 20px no-repeat
			}		
								
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: -2em;		/* bei 110% setzt sich der 3. ul nach rechts, dann hat es aber nicht mehr die verbindung zum hover-effekt*/
					
					text-transform:uppercase;
				font-family: "Roboto","Segoe UI";
				font-weight:400;
				}		
									
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) */
						  padding: 2em;
						}	
												
div#menu a.direkt:link	{	font-size:1em;
							text-align:center;
							color: #000;	/*schwarz*/
							/* border: 1px solid #000; */
						}	
											
div#menu a.direkt:hover	{	color: #000;	/*schwarz*/
							/* border: 1px solid #000;  */
							padding: 2em;
						}
						
div#menu h3:hover {background-color:#000;
                   color: #FFF;	/*textfarbe weiß*/
				   padding: 2em;
				  }						

               
div#menu ul li.direkt { background-color:#000;
						color: #FFF;	/*textfarbe weiß*/
						padding: 2em;
					   }
					   
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 { 
							   padding: 2em 0em 2em 0em;
					          }