/*---------------------------
Grundsätzliches:
Es gibt verschiedene Wege, eine CSS-Vorlage zu strukturieren.
Bewährt hat es sich, wenn man Gruppen bildet, welche Bereiche der Website umfassen.
Im folgenden Beispiel sind die allgemeingültigen Vorlagen zuerst definiert.
Die Bereiche wie etwa die Navigation, die Fusszeile, der Hauptinhalt sind gruppiert worden.
Auch hier lohnt sich eine hierarchische Struktur:
Die Formatvorlagen, die übergeordnete Elemente formatieren, stehen zuoberst. Sie können ihre Eigenschaften auf
die untergeordneten vererben.
So kann man verhindern, dass man überflüssige Anweisungen geschrieben werden.  

Es ist übrigens gang und gäbe, dass man beim Entwicklen ein CSS mehrfach umschreibt und optimiert.
------------------------------
*/

/*
Der Body formatiert grundsätzlich die gesamte Seite, vererbt also seine
Formatierung an alle Elemente, da sie ihm alle untergeordnet sind.
Natürlich kann jede dieser Eigenschaften in den untergeordneten Elementen überschrieben werden.
*/
body{
	font-family: arial, verdana, sans-serif;
	font-size: 12px;
	background-color: #BFDFFF;
}

/*
Die Tabelle, welche alle Inhalte ummantelt.
Wenn man die Breite der Tabelle im CCS-Stylesheet festlegt, darf keine Breite mehr direkt in der verknüpften Website mehr stehen.
D.h. Bei <table style="width:100%" id="tabelle1"> muss das Style-Attribut gelöscht werden.
*/
#tabelle_aussen {
	border: 2px solid darkgray;
	width: 960px;
	border-collapse: collapse; /*verhindert einen Abstand von Rahmen zu Inhalt*/
	margin-left:auto;
	margin-right:auto;
}

/*Gilt für alle Tabellenzellen*/
td {
	vertical-align: top;/*Richtet alle Inhalte vertikal nach oben bündig aus*/ 
	border:0px gray solid;
	padding:0px; /*setzt alle Zellabstände auf Null*/
}

/*----------------------------------------------------------*/
/*FORMATIERUNGEN FÜR DIE HAUPTNAVIGATION LINKS*/

/*Zelle, welche die Navigation links aufnimmt*/
td.navigationsspalte
{
width: 140px;
background-color: #FFFFFF;
}

/*Die Hauptnavigation links*/
a.hauptnavi {
	display: block;/*Macht aus Inline-Elementen Block-Elemente*/
	background-color: #3399FF;
	color:  #FFFFFF;
	text-decoration: none;/*Unterstreichung fällt weg*/
	margin-bottom: 2px;/*Aussenabstand unten*/
	padding: 2px;/*Innenabstand*/
	height: 17px;
}

/*Die Hauptnavigation ändert sich, wenn man mit der Maus über die Links fährt.*/
a.hauptnavi:hover {
	background-color: #CCCCCC;
	color: #3399FF;
}

/*----------------------------------------------------------*/
/*FORMATIERUNGEN FÜR DEN BANNER OBEN*/

/*Zelle, welche das Bannerbild aufnimmt*/
td.banner{
height: 100px;
border-bottom:1px navy solid;
}

/*----------------------------------------------------------*/
/*FORMATIERUNGEN FÜR DIE FUSSZEILE*/

/*Zelle mit Fusszeile*/
td.fusszeile {
	font-style: italic;
	font-size: 11px;
	padding:2px;
	border-top:1px gray solid;
	background-color: #FFFFFF;
}



/*----------------------------------------------------------*/
/*FORMATIERUNGEN FÜR DIE INHALTE, ALSO ZELLEN UND TABELLEN MIT DEM HAUPTCONTENT UND DER SUBNAVI*/

/*
Die Zelle der Mantel-Tabelle, welche die Subnavitabelle und die Inhaltstabelle aufnimmt.
*/
td.inhaltstabelle{
width:720px;
height:100%;
padding:0px 5px 0px 5px; /*Kurzschreibweise: oben Null,Rechts 5,Unten 5, Links 5 */
background-color: #FFFFFF;
}

/*Die Tabelle mit der Subnavi*/
#tabelle_subnavi {
	width: 100%;
	height:15px;
	border-collapse:collapse;
	margin-top:2px;/* Abstand gegen oben*/
	margin-bottom:2px;/* Abstand gegen unten*/
	border:1px navy solid;
}

/*Die Breite der Tabellenzellen für die Links muss anhand der Anzahl Links in Prozenten festgesetzt werden*/
/*Für drei Links*/
td.subnavi_3links{
width:33%;
border-left:1px navy solid;
background-color: #FFFFFF;
}

/*Für vier Links*/
td.subnavi_4links{
width:25%;
border-left:1px navy solid;
}


/*Für fünf Links*/
td.subnavi_5links{
width:20%;
border-left:1px navy solid;
background-color: #FFFFFF;
}

a.subnavi{
display:block;
background-color:#3399FF;
color:white;
text-decoration:none;
padding:2px 2px 2px 5px; /*Links etwas mehr Abstand zum Tabellenrahmen*/
}

a.subnavi:hover{
display:block;
background-color:lightyellow;
color:#3399FF;
}

/*Die Tabelle mit den Inhalten: Texte und Bilder*/
#tabelle_inhalt {
	width: 100%;
	border-collapse:collapse;
}

/*Text in der Inhaltstabelle*/
td.fliesstext {
	padding: 10px;
	line-height: 14px; /*Bestimmt den Zeilenabstand*/;
	width: 50%;
	border:1px gray solid;
	border-bottom:0px; /*Damit fällt der unter Rahmen, der sich mit dem Rahmen der Fusszeile beisst, weg. Achtung: Falls Newsspalte überlang, fehlt dann der untere Rahmen!*/
	background-color: #FFFFFF;
	font-size: 14px;
}

td.index {
	padding: 10px;
	line-height: 14px; /*Bestimmt den Zeilenabstand*/;
	width: 50%;
	border:1px gray solid;
	border-bottom:0px; /*Damit fällt der unter Rahmen, der sich mit dem Rahmen der Fusszeile beisst, weg. Achtung: Falls Newsspalte überlang, fehlt dann der untere Rahmen!*/
	background-color: #FFFFFF;
	font-size: 16px;
}


/*Thementitel über den Fliesstexten, in eigene Tabellenzelle gebettet*/
td.thementitel{
background-color:#BFDFFF;
font-size:18px;
font-weight:bold;	
color:navy;
padding:2px 6px 2px 6px;
border:1px navy solid;
}

td.thementitel_index{
background-color:#BFDFFF;
font-size:22px;
font-weight:bold;	
color:navy;
padding:2px 6px 2px 6px;
border:1px navy solid;
}




/*Freie Klasse, welche Titel innerhalb des Fliesstextes formatiert*/
.untertitel_fliesstext{
font-size:14px;
font-weight:bold;
}

.untertitel_fliesstext_fett{
font-weight:bold;
}


/*Bilder rechtsbündig mit Abstand nach unten und links*/
img.rechtsbuendig{
margin: 0px 0px 5px 10px;
float: right; 
}

/*Bilder rechtsbündig mit Abstand nach unten und links*/
img.linksbuendig
{
margin: 5px 10px 0px 0px;
float: left; 
}

img.zentriert
{
margin: 5px 10px 0px 0px;
float: inherit;
}


/*----------------------------------------------------------*/
/*FORMATIERUNGEN FÜR DIE NEWSSPALTE RECHTS*/

/*Zelle, welche die Newsspalte rechts formatiert*/
td.newsspalte{
width: 120px;
font-style:italic;
font-size:11px;
color:gray;
padding:4px;
background-color: #FFFFFF;
}

.thementitel_news{
display:block;
font-style:normal;	
font-size:14px;
font-weight:bold;
color:navy;
}

.untertitel_newstext{
font-size:12px;
font-weight:bold;
}
.links_newstext
{
font-size:11px;
}

#aktiver_link
	{
	background-color: #CCCCCC;
	color: #3399FF;
	}


#tabelle_Produkt
{
	width: 600px;
	border-collapse:collapse;
	font-size: 14px;
	height: 30px;
	border:1px black groove;
	}

td.produkt_fett{
font-size:14px;
font-weight:bold;
width: 150px;
height: 30px;
border:1px black groove;
padding: 5px;
}

td.produkt_normal_1{
font-size:14px;
width: 350px;
height: 30px;
border:1px black groove;
padding: 5px;
}

td.produkt_normal_2{
font-size:14px;
width: 100px;
height: 30px;
border:1px black groove;
padding: 5px;
}

.Fett {
font-weight: bold;
}