

body {
		
		background-image:	url(images/bk-4.jpg);			/* globaler Hintergrund */
		background-color: 	#d9d9d9;
		color:				#000;					/* Textfarbe (war #5b5751) */
		font:				16px "trebuchet ms";			/* Standard Schiftart */
		margin:				0px;
	
		/* Scrollbar - geht nicht bei Firefox */ 
		scrollbar-face-color: 		#f9f9f9;
		scrollbar-shadow-color: 	#666666;
		scrollbar-highlight-color: 	#ffffff;
		scrollbar-3dlight-color: 	#aaaaaa;
		scrollbar-darkshadow-color: #999999;
		scrollbar-track-color: 		#e9e9e9;
		scrollbar-arrow-color: 		#5b5751;

	
	}

	/* Container für den Filmstreifen rechts */
.filmstreifen-rechts {									/* der fürende Punkt weil innerhalb eines anderen Containers */
		float:				right;						/* Textumbruch um den Container einstellen */
		width:				170px;						/* Breite der Thumbnails */
		
		margin-top:			80px;						/* absolute Position von oben */
		background-color:	none;
		
}
	/* Container für den Filmstreifen oben, hochkante Bilder */
.filmstreifen-oben {									/* der fürende Punkt weil innerhalb eines anderen Containers */
		float:				left;						/*	 Textumbruch um den Container einstellen */
		margin-left:		-3px;
														/* Höhe der Thumbnails hier nicht angegeben, ergibt sich durch Umbruch */
		letter-spacing:		-0.3em;						/* bewirkt dass die Horizonal angeordneten Bilder keine Lücke dazwischen haben */
		margin-top:			5px;						/* absolute Position von oben */
		background-color:	none;
		background-image:	url(images/film-hochkant-leer.jpg); /* um den Filmstreifen über die ganze Länge zu bekommen ist er gleichzeitig Hintergrund*/
		width:				880px;						/* damit sich der Filmstreifen Container mit Hintergrund über die ganze Länge erstreckt */
		
}
.filmstreifen-unten {									/* der fürende Punkt weil innerhalb eines anderen Containers */
		float:				left;						/*	 Textumbruch um den Container einstellen */
		margin-left:		-3px;
														/* Höhe der Thumbnails hier nicht angegeben, ergibt sich durch Umbruch */
		letter-spacing:		-0.3em;						/* bewirkt dass die Horizonal angeordneten Bilder keine Lücke dazwischen haben */
		margin-top:			5px;						/* absolute Position von oben */
		background-color:	none;
		background-image:	url(images/film-horizontal-leer.jpg); /* um den Filmstreifen über die ganze Länge zu bekommen ist er gleichzeitig Hintergrund*/
		width:				880px;						/* damit sich der Filmstreifen Container mit Hintergrund über die ganze Länge erstreckt */
		
}
#main {													/* Container der als Zenrierungsanker wirkt */
		border: 			0 solid #000000;			/* hierin werden alle weiteren Container geschachtelt */
		padding: 			0px;
		background-color: 	#ffffff;
		margin-left: 		50%;						/* zentriert das Ganze */
		margin-right: 		50%;						/*         --"--       */
		
}

img {

		border:				none;						/* Bilder generell ohne Rand */
		border-width:		0px;

}

td	{
		vertical-align:		top;						/* Tabellenzellen-Text ausrichten */
}

a:link {
		color: #808080;
		text-decoration: none;
  
}
a:visited {
		color: #808080;
		text-decoration: none;
  
}
a:hover {
		color: #003300;
		text-decoration: underline;
  
}
a:active {
		color: #808080;
		text-decoration: none;
  
}

/* Font Styles */

p {
		padding-left: 	50px;
}
h1 {
		font-family: 	tahoma, verdana, geneva, sans-serif;
		font-size: 		14px;
		text-transform:	uppercase;
		color:			#000;
		padding:		5px 15px;
		margin:			0px }


h2 {
		font-family: 	verdana, geneva, sans-serif;
		font-size:		11px;
		line-height: 	1.5;
		font-weight: 	normal;
		margin: 		0px 15px;
}

h3 {
		font-size: 			10px;
		color: 				#ffffff;
		background-color: 	#800000;
		border-top:			0px solid #ffffff;
		border-bottom:		0px solid #ffffff;
		padding:			10px 20px;
		margin:				0px
		}

h4 {
		color:				#000000;
		font-weight: 		bold;
		margin: 			0px 0px 0px 0px;	/* top|right|bottom|left */
		}
		
h5 {
		font-family: 	tahoma, verdana, geneva, sans-serif;
		font-size: 		30px;					/* richtig groß */
		letter-spacing:	0.5em;					/* x eM-Breiten gesperrt */
		text-transform:	uppercase;
		color:			#000;
		padding:		5px 15px;
		margin:			0px; 
		/* text-align:		center; */
		}

		
/* Inhalts-Container */
		
#kopf {
		
		background-image:	url();
		background-color: 	#ffffff;				
		width:				900px;
		color:				#5b5751;
		vertical-align:		middle;
		padding:			0px 0px 0px 0px;	/* top|right|bottom|left */
		margin:				0px 0px 0px -450px;
		text-align:			right;
		

}

#fuss {
		/* Kein Hintergrund...
		background-image:	url();
		background-color: 	#f4ebe2;				
		
		width:				900px;
		color:				#5b5751;
		vertical-align:		middle;
		padding:			0px 0px 0px 0px;	/* top|right|bottom|left 
		margin:				0px 0px 0px -450px;
		text-align:			right;
		margin-top:			625px;					/* absolute Position von oben */
		

}

#menu {												/* Menüleiste */

		/* kein Hintergrund...
		background-image:	url(); 
		background-repeat:	no-repeat;
		background-color: 	#f4ebe2;					*/
		
		height:				1px;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		width:				895px;					/* padding und Rand muss abgezogen werden */
		text-align:			center;
		font-family: 		tahoma, verdana, geneva, sans-serif;
		font-size: 			11px;
		text-transform:		uppercase;
		color:				#808080;				/* Pantone cool gray 10 */
		border-color:		#e9e9e9;
		margin-left:		-450px;					/* ist ja i.d.R. im Zentriercontainer geschatelt, */
													/* würde sonst in der Mitte anfangen. Wert ergibt sich aus der Breite. */
		padding:			5px 0px 0px 5px;		/* top|right|bottom|left Abstand des Textes vom Containerrand*/
		font-weight: 		bold;					/* das Menü in fetten Buchstaben */
		
		

}

#inhalt {

		width: 				980px;					/* war 895px;*/
		height:				700px;
		margin-left: 		-485px;
		padding:			0px 0px 0px 0px;		/* top|right|bottom|left Abstand des Textes vom Containerrand*/
		color:				#000;				    /* Pantone black */
		background-image:	url(images/bk-start-4.jpg);
		background-color: 	none;
		position:			absolute;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		border-color:		#e9e9e9;
		text-align:			left;
		font:				trebuchet ms;
		overflow:			auto;					/* scrollbar bei Überlänge */
		
}

#person {

		width: 				895px;
		height:				600px;
		margin-left: 		-450px;
		padding:			0px 0px 0px 5px;		/* top|right|bottom|left Abstand des Textes vom Containerrand*/
		color:				#5b5751;				/* Pantone black */
		background-image:	url(images/bk-person.jpg);
		background-repeat: 	no-repeat;
		background-color: 	white;					
		position:			absolute;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		border-color:		#e9e9e9;
		text-align:			left;
		font:				trebuchet ms;
		overflow:			auto;					/* scrollbar bei Überlänge */
		}
		
#fernsehen {

		width: 				895px;
		height:				600px;
		margin-left: 		-450px;
		padding:			0px 0px 0px 5px;		/* top|right|bottom|left Abstand des Textes vom Containerrand*/
		color:				#5b5751;				/* Pantone black */
		background-image:	url();
		background-repeat: 	no-repeat;
		background-color: 	white;					
		position:			absolute;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		border-color:		#e9e9e9;
		text-align:			left;
		font:				trebuchet ms;
		overflow:			auto;					/* scrollbar bei Überlänge */
		
		}

#bkleer {

		width: 				895px;
		height:				600px;
		margin-left: 		-450px;
		margin-top: 		20px;
		padding:			0px 0px 0px 5px;
		color:				#000;				/* Pantone black */
		background-image:	url();
		background-color: 	#e9ffe0;					
		position:			absolute;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		border-color:		#e9e9e9;
		text-align:			left;
		font:				trebuchet ms;
		overflow:			auto;					/* scrollbar bei Überlänge */
		}
		
#bkcoach {

		width: 				895px;
		height:				600px;
		margin-left: 		-450px;
		padding:			0px 0px 0px 5px;
		color:				#5b5751;				/* Pantone black */
		background-image:	url(images/bk-coach-2.jpg);
		background-color: 	white;					
		position:			absolute;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		border-color:		#e9e9e9;
		text-align:			left;
		font:				trebuchet ms;
		overflow:			auto;					/* scrollbar bei Überlänge */
		}

/* Pictogramme als Bilder mit div-Container für Große Bildeinblendung */

#bild {

		width: 				995px;
		height:				80px;
		margin-left: 		-500px;
		margin-top:			0px;					/* Bilderband oben Abstand */
		padding:			0px 0px 0px 5px;
		color:				#5b5751;				/* Pantone black */
		background-image:	url();
		background-color: 	white;					
		position:			absolute;
		border:				none;
		border-width:		0px 0px 1px 0px;		/* top|right|bottom|left */
		border-color:		#e9e9e9;
		text-align:			center;
		font:				trebuchet ms;
		overflow:			auto;					/* scrollbar bei Überlänge */
		z-index:			2;
		}

#bild ul { list-style-type:none; margin:0; padding:0;} 	/* schaltet das Standardformat der Listenelemente (ul) aus */

#bild li { list-style-type:none; width:51px; float:left; } 	/* Bilder der oberen Navigationsebene werden horizontal angeordnet */

	#bild li ul { display:none;}								/* Bilder unterhalb der ersten Navigationsebene werden standardmärig ausgeblendet */									

	  #bild a: { 										/* meldet ein oberes Bild ein Hover, wird seine große Version eingeblendet */
						display:			block;
						color:				#c0c0c0;
						border:				none;
						border-color:		#ff0000;
						border-width: 		1px;						
						width: 				758px;
						margin-top:			3px;
						top: 				133px;
						z-index:			1;
					}	

#bild li  a:hover{
			
			color:				#ffff00;
			text-decoration:	none;
			padding:			0px;
			z-index:			1;
			
} 						



									

	  #bild li:hover ul { 										/* meldet ein oberer Menüpunkt ein Hover, weden seine Unterpunkte eingeblendet */
						display:			block;
						z-index:			2;
	}						
					

#ausgabe {
						
	background-color: 	#ffffff;
	color:				#000000;
	border:				none;
	border-color:		#999999;
	border-width: 		1px 1px 1px 1px;
	position:			absolute;				/* absolute verhindet die Beeinflussung der umgebenden Elemente */
	margin-left:		-500px;					/* veschiebt diesen Untermenü-Container nach links */
	margin-top:			0px;
	width:				960px;
	height:				600px;
	list-style-type:	none;
	text-align:			center;
	vertical-align:		middle;
	overflow:			hidden;
	z-index	:			1;
	/*
						margin:5 0 0 0;
						padding:0;
						margin-left:0px;
						width:570px;            /* Bildbreite */
/*						height:428px;           /* Bildhöhe */
/*						overflow:hidden;        /* Bitte nur ein Bild zeigen. Alle auf einmal wär langweilig */
/*						background-color:#fff;
						z-index:2;
*/

}

					/* Bild ausblenden solange kein Hover */
/*
#bild a.galery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
    }

					
#bild a.galery, #bild a.galery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:0px solid #000; 
    margin:0px 0px 0px 0px; 
    text-align:left; 
    cursor:default;
    }
	*/
/* Thunmbnails hinzufügen, jeweils als eigener DIV Container als Hintergrundbild */
#bild a.b1 {
    background:url(images/galerie/g-thumb-01.jpg); 
    width:75px; 							/* Maße des Thumbnails = DIV Container Maße */
    
    }

					
#grossBild{													
/* dieser Container ist für große Bildanzeige mit Erklärungstext. Ist eine art Submenü */

	width: 				150px;
	background-color: 	#f0f0f0;
	color:				#000000;
	border:				solid;
	border-color:		#999999;
	border-width: 		1px 1px 1px 1px;
	position:			absolute;				/* absolute verhindet die Beeinflussung der umgebenden Elemente */
	margin-left:		0px;					/* veschiebt diesen Untermenü-Container nach links */
	margin-top:			30px;
	text-align:			left;
	vertical-align:		middle;
	
	}
#grossBild a:link{							/* Links innerhalb des Submenüs */
  color:				#000000;
  text-decoration:		none;
}
#grossBild a:visited{							/* Links innerhalb des Submenüs */
  color:				#000000;
}
#grossBild a:hover{							/* Links innerhalb des Submenüs */
  color:					#dd0000;
  background-color:			#cccccc;
}
		
		
/* Dropdown Menü Definitionen mit div-Containern als Untermenüpunkte */

#navi,  #navi ul { 
			list-style-type:	none;						/* schaltet das Standardformat der Listenelemente (ul) aus */
			margin:				0px;
			padding:			0px;
			list-style-position:inside;
			border:				none;
									
			} 	

/* Menüpunkte der oberen Navigationsebene formatieren */
#navi li {
			
			
			width:				150px;
			border:				solid;
			border-width: 		0px 0px 0px 0px;
			background-color:	none;
			text-align:			center;  				/* Menüpunkte oberster Ebene werden zentriert */
			padding:			0px;
					
} 						

/* für Links innerhalb de oberen Menüebene */
#navi li  a{
			color:				#ffff00;
			text-decoration:	none;
			padding:			0px;
			border:				none;
} 						
#navi li  a:hover{
			
			color:				#ffff00;
			text-decoration:	none;
			padding:			0px;
			
} 						



	#navi li ul { display:none;}								/* Menüpunkte unterhalb der ersten Navigationsebene werden standardmärig ausgeblendet */									

	  #navi li:hover ul { 										/* meldet ein oberer Menüpunkt ein Hover, weden seine Unterpunkte eingeblendet */
						display:			block;
	}						

				

#HoverButton {												/* dieser Container überdeckt den Meübutton beim hovern */
	
	color:				#000000;
	width: 				150px;
	background-color: 	#fff0ff;
	border:				solid;
	border-color:		#000066;				
	border-width: 		0px 0px 0px 0px;		
	position:			absolute;				/* absolute verhindet die Beeinflussung der umgebenden Elemente */
	margin-left:		0px;					/* inhalt erscheint genau über dem Button */
	margin-top:			-51px;					/* -- " --  Wert ergibt sich dann aus Buttonhöhe IE9 und Firefox veschieben unterschiedlich!!?? */
	padding:			0px;
	
	
	}

	
#SubMenuAngebot {								/* dieser Container formatiert ein Untermenü */
	
	color:				#000000;
	width: 				120px;
	background-color: 	#f0f0f0;
	border:				none;
	border-color:		#000000;
	border-width: 		0px 0px 1px 0px;
	position:			absolute;				/* absolute verhindet die Beeinflussung der umgebenden Elemente */
	margin-left:		150px;					/* veschiebt diesen Untermenü-Container nach links */
	margin-top:			0px;					/* zeigt das Untermenü beginnend in der gleichen Zeile an (2 weil Menüpunkt 2-zeilig */
	padding:			0px;
	vertical-align:		middle;
	
	}

