/* CSS Document */
/* Aufbau eines vertikalen Hauptmenu-Streifens mit mehreren Hauptmenus und zugehörigen Seitenmenus rein auf CSS2-Basis */   
/* Ist von der Struktur her aber auch für RMs Javascript-Lösung geeignet - daher keine überflüsig scheinenden Layer entfernen */  

/* Dies ist der Container für das Hauptmenü - er wird relativ positioniert */ 
/* Die Breite und Höhe des Hauptmenücontaimers sollte die benötigte Umfang des Hauptmenüs widerspiegeln */ 
/* -> das Seitenmenü kann ja trotzdem außerhalb positioniert werden - Seitenmenülayer werden später relativ zu den Menupunkten positioniert */ 	
	
	div.cont_1 				{position:relative; width:20.0em; height:27.2em; margin-top:0.0em; z-index:20;}
	div.cont_1 span			{font-size:11px;}
	div.cont_1 div.farbe 	{background-color:#F0003D;}
	div.cont_1 div.weiss 	{background-color:#FFFFFF;}

	/* Hier kommt der Container des Menus 1 - falls mehrere vertikale Menus das sind */ 
	div.menu_1 {position:absolute; top:0.0em; left:0.0em; width:20.0em; height:27.2em; background-color: transparent; visibility:visible; }
	
	/* Stylevorgaben für die Menu-Liste des Hauptmenus */  
	/* Beachte den für MS IE enorm wichtigen Parameter font-size - steuert Abstand der Listenelemente mit - height allein reicht nicht */
	ul.sm_ul { margin-left: 0.0em; margin-top:0.0em; padding-left:0.0em; padding-top:0.0em; list-style-type:none; }
	/* line-height sorgt für eine vertikal zentrierte Positionierung der Elemente im eigentlichen Listenelement */ 
	/* Für die Höhe muß die bottom-margin mitgerechnet werden */ 
	/* Probleme vermeidet evtl. man durch Inline LI-Elemente - dann hängt die Höhe aber rein vom Inhalt ab und height wird ignoriert */ 
	ul.sm_ul li { height:2.5em; line-height:2.5em; margin-bottom:0.1em; margin-top:0.0em;  }  
		/* Jedes Listenelement besteht nun aus RMs Magic-DIVs -> Höhe und Breite dem Haupt-Menüpunkt anpassen */ 
		/* Magic beinhaltet zwei Elemente - den Hauptmenupunkt (aus der bereits definierten Liste, <li><a></a></li>) und ein zugehöriges Seitenmenu */
		/* Das Seitenmenu wird mit "absolut" relativ zum Magic-Contaier positioniert.  */
		/* Das Seitenmenu besteht aus mehreren unabhängigen DIV Layern, die genau übereinander positioniert werden müssen; s.u.  */
		/* Magic steuert über Hover den Farbumschlag des Hauptmenupunktes und die Sichtbarkeit der DIVs des Seitenmenus */
		/* bündige Positionierung im Listenelement - Höhe und Breite des Listenelementes */  
		div.magic { position:relative; height:2.5em; width:20.0em; margin-top:0.0em; padding-top:0.0em; } 
		/* div.magic { position:relative; height:25px; width:200px; margin-top:0px; padding-top:0px; background-color:transparent;} */

			/* Hauptmenüpunkt  -> Block A-tag - immer sichtbar - vertikal zentrierte Texte (line-height) - Muss LI exakt ausfüllen - ggf. margin hinzu */
			div.magic a.menho { 
				display:block; width:18.0em; height:2.5em; line-height:2.5em; padding-left:2.0em; text-align:left; border:none; 
				background-color:transparent; color:#333333; 
				cursor:pointer; text-decoration:none; 
			}
			/* Per Hover von MAGIC nun den Farbumschlag des Menüpunktes steuern */  
			div.magic:hover a.menho 		{ background-color:#EEEEEE; color:#9C0000; }
			a.menho:hover			 		{ background-color:#EEEEEE; color:#9C0000; }

			/* Nun das Seitenmenü , in dem sich alles abspielt - es besteht aus 2 unabhängigen Layern übereinander */
			/* die Sichtbarkeit dieser layer wird vom Rollover über MAGIC gesteuert */ 
			/* Die Positionierung der Layer wird übder die Eigenschaft "absolut" vorgenommen - relativ zu div_magic */ 
				
				/* Layer 1 Seitenmenü: Der erste Layer bg_border richtet einen (ggf. halb-transparenten) Schatten-Rahmen her */
				/* Über diesem Layer kommen die eigentlichen Menüelemente - in sep. layer, um sie separat steuern zu können */ 
				/* Layer 1 ist in der Mitte durchsichtig, um die Transparenz der drüberliegenden Elemente nicht zu stören ! */ 
				/* Layer 1 hat aber einen breiten Rahmen -> Schlagschatten */ 
				/* Zusätzlich werden innerhalb des Layers 1 über eine Liste mit durchsichtigen, aber berandeten  DIVS ggf. auch */ 
				/* farbige Trennlinien zwischen den Menüpunkten erzeugt */
				/* Layer 1: Um Problemen mit evtl. Hoehendefinitionen der LI-Elemente aus dem Weg zu gehen kann man die LIs auch als Inline-Elemente behandeln */ 
				/* Layer 1: dann muss aber auf die exakte Höhe der (berandeten) DIVS (Listenelemente) großer Wert gelegt werden */ 
				/* - und die Inhalte (die eigentl. Menüpunkte) des nächsten Layer müssen exakt darüber positioniert werden */
				/* transparenter Rahmen für Submenu -> z-index von bg > z-index des Bereichs, der vom Submenu überdeckt wird */
				div.magic div.bg_border { 
					visibility:hidden; z-index:21; 
					position:absolute; top:-0.8em; left:20.0em; width:19.2em; height:10.4em; 
					background-color:transparent; border:#CCCCCC 0.8em solid;  
					filter: alpha(opacity=66); -moz-opacity: .66; opacity: 0.66;
				}
				/* Steuerung Sichtbarkeit durch Hover von MAGIC */
				div.magic:hover div.bg_border { visibility:visible; }
				
					/* Liste mit beränderten, aber leeren und durchsichtigen Menupunkten */  
					/*div.magic div.bg_border ul { list-style-type:none; margin:0.0px; padding:0.0px; font-size:2px; }*/
					div.magic div.bg_border ul { list-style-type:none; margin:0.0em; padding:0.0em; }
					/* Höhe 26 px, da divs mit border 1px oder margins eingepasst werden - ggf. inline-Element */ 
					div.magic div.bg_border li { margin-top:0.0em; margin-bottom:0.0em; padding-top:0.0em; padding-bottom:0.0em; border:none; display:inline; }
					
					
						/* Listenelemente - Durchsichtige Divs mit farbiger Border für einzelne Trennstriche zwischen den Menupunkten */ 
						div.magic div.bg_border li div.kant { 
							width:19.2em; height:2.5em; margin-top:0.0em; margin-left:0.0em; 
							background-color:transparent; 
							border-bottom: 0.1em transparent solid; border-top:none; border-left:none; border-right:none; 
						}
						/* Variante für Durchsichtigkeit - Beachte das zusätzliche Pixel in der Größendefinition !!! */ 
						/* Wegen eines FF Fehlers sollte man nicht mit transparenten Borders arbeiten */  
						/* div.magic div.bg_border li div.kant { 
							width:192px; height:26px; margin-top:0px; margin-left:0px; 
							background-color:transparent; 
							border-bottom:none; border-top:none; border-left:none; border-right:none; 
						} */ 

				/* Layer 2 Seitenmenü: liegt exakt über dem ersten Layer und beinhaltet exakt über den transparenten Bereichen des Layer 1 */ 
				/* die eigentlichen Menupunkte - ausgedehnte DIVs (Container) mit speziellem doppelschichtigem Aufbau (s.u.)*/
				/* Grund 1) für Layer 2:  Dadurch wird erstens die Transparenz der Menupunkte von jener der darunterliegenden Ebene entkoppelt -> */
				/* Man kann die Opazität der Menupunkte auf 100% schalten ohne die Transparenz der untere Punkte zu beeinflussen */  
				/* Grund 2) für Layer 2: Man sieht durch die Menüpunkte direkt auf auf den Hintergrund und nicht durch eine weitere Schicht ! */  
				/* Der Aufbau der DIV-Container für die Menupunkte führt dann noch eine weitere zusätzliche Ebene ein -> */
				/* dies entkoppelt zusätzlich die Eigenschaften der Schrift (i.d.R. intransparent) von der Transparenz des farbigen Feldes des Menupunktes */       
				/* -> z-index von bg_steifen > z-index von bg_border */
				/* border transparent funktioniert auch im FF , wenn background-color selbst transparent - ident. Maße und Positon wie div.bg_border*/ 
				 div.magic div.bg_streifen { 
					visibility:hidden; z-index:22; 
					position:absolute; top:-0.8em; left:20.0em; width:19.2em; height:10.4em; 
					background-color:transparent; border:transparent 0.8em solid;  
				}
				/* Steuern Sichtbarkeit über Hover von MAGIC */ 
				div.magic:hover div.bg_streifen { visibility:visible; }
				
					/* Liste mit den Menüpunkten des Submenus */ 
					/*div.magic div.bg_streifen ul { list-style:none; margin:0px; padding:0px; font-size:2px; }*/
					div.magic div.bg_streifen ul { list-style:none; margin:0.0em; padding:0.0em;}
					/* Höhe 26 px, da divs mit border 1px oder margins eingepasst werden - ggf. inline-Element -> height wird ignoriert  */ 
					div.magic div.bg_streifen li { margin-top:0.0em; margin-bottom:0.0em; padding-top:0.0em; padding-bottom:0.0em; border:none; display:inline; }

						/* Container DIV "punkt" für 2-lagige Menupunkt-Struktur - 2 Lagen, um Schrift-Transparenz von Block-transparenz zu enkoppeln */
						/* Positionierung relativ - Größe exakt wie Löcher in bg_border - Menüpunkt ist immer sichtbar ! */
						/* Hover über "punkt" steuern die Farb- und Transparenz-Effekte der Elemente des Menupunkts */  
						div.magic div.bg_streifen li div.punkt { 
							position:relative; 
							width:19.2em; height:2.5em; line-height:2.5em; margin-top:0.0em; margin-left:0.0em; padding-top:0.0em; 
							background-color:transparent; 
							border-bottom:0.1em transparent solid; border-top:none; border-left:none; border-right:none; 
						}

							/* Unterer Layer "stripe" des Menupunkts - Feld mit Farbe des Menüpunktes */
							/* Positionierung mit "absolut" relativ zum "punkt"-Container  */ 
							/* z-index > z-index bg_streifen kann, muß aber nicht gesetzt werden */ 
							/* Transparenz des Farbbereichs unabhängig vom Schattenbereich bg_border und (!) der Link-Schrift ! */ 
							/* Beachte margin_bottom 1px -> für Durchsicht auf Streifen von bg_border !  height deswegen nur 25px */
							/* Man kann wg. fehler FF leider nicht mit border-bottom arbeiten */ 
							div.magic div.bg_streifen li div.punkt div.stripe { 
								z-index:30; 
								position:absolute; top:0.0em; left:0.0em; width:19.2em; height:2.5em; margin:0.0em; 
								background-color:#FFFFFF; 
								filter: alpha(opacity=66); -moz-opacity: .66; opacity: 0.66;} 
							/* Steuern des Farbumschlags und der Transparenz durch Hover von "punkt" */	
							div.magic div.bg_streifen li div.punkt:hover div.stripe { 
								background-color:#FFFFFF; filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; 
							}
							/* wg. Opera ! */
							div.magic div.bg_streifen li div.punkt a.stripea { 
								z-index:30; display:block;  
								position:absolute; top:0.0em; left:0.0em; width:19.2em; height:2.5em; margin-top:0.0em; margin-left:0.0em; margin-bottom:0.0em;   
								background-color:#EEEEEE; 
								filter: alpha(opacity=74); -moz-opacity: .74; opacity: 0.74;} 
							div.magic div.bg_streifen li div.punkt:hover a.stripea { 
								background-color:#FFFFFF; filter: alpha(opacity=100); -moz-opacity: 1.0; opacity:1.0;
							}
							div.magic div.bg_streifen li div.punkt a.opera { 
								z-index:30; display:block;  
								position:absolute; top:2.5em; left:0.0em; width:19.2em; height:0.1em; margin-top:0.0em; margin-left:0.0em; margin-bottom:0.0em; line-height:0.1em;   
								background-color:#CCCCCC; 
								filter: alpha(opacity=1); -moz-opacity: .01; opacity: 0.01;} 
							
							/* Variante mit Umschlag auf intransparenten Trennstreifen */ 
							/* div.magic div.bg_streifen li div.punkt:hover div.stripe { 
								margin-bottom:0px; border-bottom:#FF0000 1px solid;   
								background-color:#FFFFFF; 
								filter: alpha(opacity=100); -moz-opacity: 1.0; 
							} */

							/* Oberer Layer des Menüpunktes - Block A-Tag mit z-index > z-index von "stripe" */
							/* Positionierung exakt wie "stripe" - aber durchsichtig - nur Schrift instransparent */
							/* padding-left steuert Einrückung des Textes - line-height besorgt die vertikale Zentrierung*/  	
							div.magic div.bg_streifen li div.punkt a.likk { 
								z-index:40; display:block;  
								position:absolute; top:0.0em; left:0.0em; width:17.2em; height:2.5em; line-height:2.5em;
								margin-top:0.0em; margin-left:0.0em; padding-left:2.0em; text-align:left; 
								background-color:transparent; color:#333333; 
								border-bottom:transparent 0.0em solid; border-top:none; border-left:none; border-right:none; 
								text-decoration:none; cursor:pointer;
							}
							/* Steuern des Farbumschlags des Textes über Hover von "punkt" */ 
							div.magic div.bg_streifen li div.punkt:hover a.likk { color:#9C0000; }
							
							
							div.magic div.bg_streifen li div.punkt_end { 
							position:relative; 
							width:19.2em; height:2.5em; line-height:2.5em; margin-top:0.0em; margin-left:0.0em; padding-top:0.0em; 
							background-color:transparent; 
							border-bottom:none; border-top:none; border-left:none; border-right:none; 
							}
							div.magic div.bg_streifen li div.punkt_end a.likk { 
								z-index:40; display:block;  
								position:absolute; top:0.0em; left:0.0em; width:17.2em; height:2.5em; line-height:2.5em;
								margin-top:0.0em; margin-left:0.0em; padding-left:2.0em; text-align:left; 
								background-color:transparent; color:#333333; 
								border-bottom:none; border-top:none; border-left:none; border-right:none; 
								text-decoration:none; cursor:pointer;
							}
							div.magic div.bg_streifen li div.punkt_end:hover a.likk { color:#9C0000; }
							
							div.magic div.bg_streifen li div.punkt_end a.stripea { 
								z-index:30; display:block;  
								position:absolute; top:0.0em; left:0.0em; width:19.2em; height:2.5em; margin-top:0.0em; margin-left:0.0em; margin-bottom:0.0em;   
								background-color:#EEEEEE; 
								filter: alpha(opacity=74); -moz-opacity: .74; opacity: 0.74;
							} 
							div.magic div.bg_streifen li div.punkt_end:hover a.stripea { 
								background-color:#FFFFFF; filter: alpha(opacity=100); -moz-opacity: 1.0; opacity:1.0;
							}
							div.magic div.bg_streifen li div.punkt_end a.opera { 
								z-index:30; display:block;  
								position:absolute; top:2.5em; left:0.0em; width:19.2em; height:0.1em; margin-top:0.0em; margin-left:0.0em; margin-bottom:0.0em; line-height:0.1em;  
								background-color:#FFFFFF; 
								filter: alpha(opacity=1); -moz-opacity: .01; opacity: 0.01;
								}

/* 2te nicht dynamisches Menue */

								
ul#menu_u 			{margin-left:0.0em; margin-top: 0.0em; padding-left:0.0em; list-style-type:none;}
#menu_u li			{margin-left:0.0em; margin-top:0.2em;}
#menu_u li#first	{margin-top:2.0em;}
#menu_u li a:link	{font-size:0.8pt; display:block; width:18.0em; height:2.0em; padding-left:2.0em; line-height:2.0em; color:#333333; text-decoration:none;} 
#menu_u li a:visited{font-size:0.8pt; display:block; width:18.0em; height:2.0em; padding-left:2.0em; line-height:2.0em; color:#000000; text-decoration:none; } 
#menu_u li a:hover	{font-size:0.8pt; display:block; width:18.0em; height:2.0em; padding-left:2.0em; line-height:2.0em; color:#CC0000; text-decoration:none; background-color:#CCCCCC;} 

ul#menu_forum 		{margin-left:0.0em; margin-top: 0.0em; padding-left:0.0em; list-style-type:none;}
/*#menu_forum li	{ margin-left:0em; margin-top:0em;}*/

li a.first				{display:block; width:18.0em; height:2.5em; padding-left:2.0em; line-height:2.5em; color:#333333; text-decoration:none;} 
li a.first:visited		{color:#333333; }
li a.first:hover		{color:#CC0000; background-color:#EEEEEE;}

li a.firstactiv			{display:block; width:18.0em; height:2.5em; padding-left:2.0em; line-height:2.5em; color:#CC0000; text-decoration:none;} 
li a.firstactiv:visited	{color:#CC0000;} 
li a.firstactiv:hover	{color:#CC0000; background-color:transparent;}

li a.second				{display:block; width:17.0em; height:2.5em; padding-left:3.0em; line-height:2.5em; color:#333333; text-decoration:none;} 
li a.second:visited		{color:#333333;}
li a.second:hover		{color:#CC0000; background-color:#EEEEEE;}
 

li a.secondactiv		{display:block; width:17.0em; height:2.5em; padding-left:3.0em; line-height:2.5em; color:#CC0000; text-decoration:none;} 
li a.secondactiv:visited{color:#333333;} 
li a.secondactiv:hover	{color:#CC0000; background-color:transparent;}
								 
							
						
							
							


/* ----------------------------------------------------------------------------------------------------- */