/*
Ein Stylesheet (Sammlung von Formatvorlagen) sollte ausreichend
kommentiert sein, damit man später noch weiss, weshalb man was,
wie und wofür formatiert hat.
Um die Vorlage optisch ansprechend und gut lesbar darzustellen, darf
man ohne weiteres Leerzeichen einfügen, bzw. mit Tabulatoren arbeiten. 
*/


body {
	font-family : verdana, tahoma, sans-serif;
	font-size : 12px;
	background-color: #0099FF;
}


/************************************************************/
/*
Mit dem #-Zeichen werden Elemente mit einer ID angesprochen, also
z.B. <table id="tabelle_aussen.">
Diese Tabelle umfasst alle Inhalte. Die Zellen in dieser Tabelle dürfen
zusammen nicht breiter als 900px sein. Achtung: Innenabstände (padding), Rahmen (border)
und Aussenabstände (margin) zählen auch dazu!

Beispiel: Tabelle gesamt 200px, erste Spalte 50px, padding 5px = 10px dazurechnen,
weil zwei Innenabstände dazukommen. Sie haben also bereits 60px von 200px verbraucht.

Damit die Tabellenzellen beim Anpassen von Rahmenbreite, padding oder margin nicht immer
neu berechnet werden müssen, kann man die Zellenbreite auch in Prozenten angeben.
*/

/*--------------------------------
UMGEBENDE TABELLE FORMATIEREN
----------------------------------*/

#tabelle_aussen {
	/*Die folgende Anweisung verhindert, dass zwischen
Tabellenrand und Zellenrand ein Abstand angezeigt wird.*/
	border-collapse : collapse;
	width : 900px; /*Der Rand (border) hat verschiedene Eigenschaften, die man auch in einer Kurzform notieren darf:
	Dicke Stil Farbe. Die Angaben werden einfach durch ein Leerzeichen getrennt.*/;
	border : 0px solid black;
/*Die Hintergrundfarbe der Tabelle.*/	background-color : #FFFFFF; /*Die beiden folgenden Werte bewirken, dass die Tabelle zentriert wird.
	Margin ist der Abstand des Objektes zum umgebenden Objekt, also der Aussenabstand.*/;
	margin-left : auto;
	margin-right : auto;
}

/*--------------------------------
BILDER
----------------------------------*/

img.rechts {
	float				: right; /*Das Bild fliesst rechts um den Text.*/
	/*Auch bei margin gibt es eine Kurzform: Statt margin-left, margin-right, margin-top, margin-bottom
	einfach margin und die Werte angeben. Reihenfolge:  oben, rechts, unten, links*/
	margin				: 5px 0px 5px 5px;
}

img.links {
	float				: left; /*Das Bild fliesst links um den Text.*/
	margin				: 5px 5px 5px 0px;
}


/*--------------------------------
TABELLENZELLEN FORMATIEREN
----------------------------------*/


td {
/*
Die Angabe für ein HTML-Element formatiert alle gleichnamigen HTML-Elemente.
Alle Tabellenzellen richten also ihre Texte nun vertikal nach oben aus.*/
	vertical-align		: top;
	/*Der Innenabstand beträgt 0 Pixel, betrifft z.B. Text oder Bilder 
	in der Tabellenzelle.*/
	padding				: 0px;
}



td.banner {
	/*
Diese Zelle enthält den Banner.
Dies ist eine gebundene Klasse. Sie gilt nur für Tabellenzellen. 
Im Gegensatz zu freien Klassen ist vor dem Punkt das HTML-Element angegeben.*/
	background-position: 100% center;
	height: 100px;
	width : 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: Verdana;
	font-size: xx-large;
	font-weight: bold;
	text-transform: none;
	background-color: #FFFFFF;
	border-bottom-style: groove;
	border-bottom-color: #0099FF;
	border-bottom-width: 3px;
}

td.navigation{
/*Diese Zelle steht links vom Inhalt. In sie wird eine Tabelle für die Navigation eingefügt.*/
	width				: 17%;
	border-right		: 1px solid #0099FF;
}

/*Diese Zelle steht in der Mitte. Sie enthält die Texte und Bilder des hauptsächlichen Inhalts der Website.*/

td.inhalt {
	padding				: 5px;
	width				: 62%;
}

/*Diese Zelle steht in der Mitte. Sie enthält die Texte und Bilder des hauptsächlichen Inhalts der Website.*/

td.newsbereich
{
	width : 21%;
	font-style: normal;
	padding : 5px;
	border-left : 1px solid #0099FF;
	font-size: 11px;
	font-weight: bold;
	font-family: Arial, Helvetica, Sans-Serif;
	background-color: #CCFFFF;
}

td.fusszeile
{
	border-top			: 1px solid #0099FF;
	padding				: 2px;
	font-style			: italic;
}


/*--------------------------------
TEXTE FORMATIEREN
----------------------------------*/

.bereichstitel
{
border-bottom			: 1px solid gray;
border-top				: 1px solid gray;
color					: gray;
font-size				: 20px;
font-weight				: bold;
display					: block;
margin-bottom			: 10px;
padding					: 2px 0px 2px 0px;
line-height             : 1.3em;
}

.headlines{
	font-weight			: bold;
	font-size           : 14px;
	/*Die Line-height bewirkt einen Abstand zum folgenden Fliesstext, auch wenn nur ein <br> verwendet wird.*/
	line-height			: 150%;
}

.headlinenews{
	font-weight : bold;
	color: #000000;
	line-height : 150%;
	font-size: small;
}

/*--------------------------------
NAVIGATION
----------------------------------*/

/*Formatiert die Listenelemente des Navigationsmenüs: Wir setzen die einzelnen Navigationshyperlinks
zuerst als Aufzählungen, um sie zu strukturieren.
Wir benutzen die Liste nur für die Strukturierung: Aufzählungszeichen sind unerwünscht und werden eliminiert.
*/
ul.navi {
list-style-type			: none; /*Keine Äufzählungszeichen*/
margin-left				: 0px; /*Kein Abstand links beim Internet Explorer*/
padding-left			: 0px; /*Kein Abstand links beim Firefox*/
margin-top				: 0px;/*Kein Abstand oben im Firefox*/
}


/*Formatiert die Links des Navigationsmenüs*/				
a.lead	{
	text-decoration : none; /*Link ist nicht unterstrichen*/;
	color : #000000; /*Schriftfarbe*/;
	display : block; /*Der Link und seine Hintergrundfarbe füllen die ganze Zelle, da sie als Blockelement dargestellt werden*/;
	padding : 3px;
/*Innenabstand zur Tabellenzelle*/	background-color: #CCFFFF;
	border-bottom : 1px maroon solid;
	font-weight: bold;
	font-size: small;
}


/*Formatiert die Links des Hauptmenüs beim Überfahren*/		
a.lead:hover 	{
	color				: #FFFFFF;
	background-color	: #505050;

}