/*  Definition globaler Formate über den Universalselektor *{}  */

*{
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	background-color: #000000;
	color: #FFFFFF;
}


body{
	text-align: center;
	height: 100%;	
	padding: 0px;
	margin: 40px 70px 70px 70px;		/* oben ... rechts ... unten ... links */
}



/*div{
	border:2px solid red;		/* Anschalten, um die Form der Container sichtbar zu machen */
	}*/



/* Definition der IDs */


#banner{
	overflow: hidden;	
	clear: left;
}


#navigation ul{
	overflow: hidden;	
	margin: 20px 0px 55px 60px; 		/* oben 20px, links 60px damit der erste Menüpunkt genau unter dem Banner-Bild beginnt */
	list-style-type: none;
}


#navigation li{
	padding: 0px 10px 0px 10px; 		/* Damit die Menüpunkte einen Abstand voneinander haben, wegen Zentrierung links und rechts gleich */
	display: inline;
}


#rahmen{
	width: 950px;							/*Breite aller Seiten. So angelegt, dass in der Produkt-Darstellung 5 Bilder mit 150px nebeneinander passen.	*/
	margin: 0px auto 0px auto;			/* Zentrieren des Rahmens, der jeweils die ganze Seite enthält im Browserfenster*/
}


#boxen-auf-index ul{
	overflow: hidden;						/* Abschneiden wenn Browser-Fenster zu schmal ist */
	width: 640px;							/* Box-Breite muss definiert sein, sonst funktioniert die Zentrierung nicht */
	margin: 0px 0px 0px 120px;		   /* 120px links macht das rechte Bild bündig mit dem rechten Rand des Holzes im Banner */
	list-style-type: none;				/* kein Listensymbol anzeigen */
}


#boxen-auf-index li{
	padding: 0px 20px 0px 20px;		/* links und rechts gleiche innere Abstände, um Symmetrie der Zentrierung nicht zu stören*/
	float: left;							/* Listenelemente = Bilder von links her neben einander anzeigen*/
	text-align: left;						/* Text linksbündig unter den Bilder ausrichten */
}



/* Definition der Klassen */

.stichpunkt{
	width: 750px;
	margin: 50px 0px 0px 100px;	
	text-align: left;
} 


.erklaerung{
	width: 750px;							
	margin: 15px 0px 0px 125px;	
	text-align: left;
} 



.produkt-darstellung{
	width: 825px; 
	margin: 15px 0px 0px 100px;	   
	text-align: left;
}


.produkt-erlaeuterung{
	width: 750px;							
	margin: 15px 0px 0px 75px;		
	text-align: left;
}



/* Definition der Pseudoklassen */

	a:link {color:#777777;};			/* mittleres grau */
	a:visited {color:#770077;};		/* lila */							/* Funktioniert noch nicht. Datenschutzeinstellungen des Browsers??? */
 	a:active, a:focus {text-decoration: overline underline;};		/* Funktioniert noch nicht. Datenschutzeinstellungen des Browsers??? */
	a:hover {text-decoration: none;};										/* Funktioniert noch nicht. Datenschutzeinstellungen des Browsers??? */