@charset "iso-8859-1";
/* CSS Document */

/* Zu Beginn werden erstmal alle Angaben für den body gemacht also z.B. Hintergrundfarbe, Schriftgröße bzw. Schriftart sowie Seitenhöhe usw. gemacht. */


html,body {
	height:100%;
	margin:0;
	padding:0;
	font-size:100.01%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	background:#999;
}


/* Zusätzliche Angaben für den Internet Explorer 5,5/6: */


* html #layout {
	height: 100%; 
}


		/* Mit CSS ist es möglich jedem HTML-Element eine Formatierung zu geben also auch h1-h6, p ,div, span usw.
		die Angabe height:100%; gibt an das unser body- bzw. html- Bereich eine Höhe von 100% annehmen soll.
		margin:0; und padding:0; geben den Ausen bzw. Innen Abstand zum Rand des Browserfensters an also 0, alle elemente werden genau am Rand angeordnet. 
		 
		
		Mögliche Angaben:
		margin bzw. padding: top (oben) right(rechts) bottom(unten) left(links); 
		margin bzw. padding: 0 10px 0 10px (von oben 0 rechts 10px unten 0 links 10px)
		Für jede Richtung eine Abstandsangabe.
		
		padding = Innenabstand,  margin = Außenabstand.
		 
		
		font-size:100.01% bezieht sich auf die Schriftgröße, 100.01% dient dazu fehler in früheren Versionen von Opera bzw. des IE beim vergrößern bzw. verkleinern von Schriftgrößen auszugleichen.
		font-family: Verdana, Arial, Helvetica, sans-serif; gibt die Schriftarten an die zur anzeige der Seite verwendet werden sollen.
		text-align:center; mit dieser Angabe wird das Layout für den IE 5.5 zentriert.
		Über text-align:left/center/right lässt sich die Ausrichtung der Schrift definieren.
		Über background: kann man z.B. die Hingergrundfarbe, das Hintergrundbild sowie dessen Wiederhohlung auf der x- bzw. y-Achse,  die Position der Hintergundgrafik sowie das verhalten beim Scrollen beeinflussen.
		list-style-type:none; gibt an das keine Aufzählungs- bzw. Listensymbole angezeigt werden sollen.
		
		
		
		Danach folgt die Formatierung für den Layout Bereich: */


#layout_blue {
	margin:0 auto;
	width:780px;
	text-align:left;
	min-height:50%;
	height:auto;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#9cf url(../bilder/inhalt_bg.png) repeat-y;
}

#layout_gray {
	margin:0 auto;
	width:780px;
	text-align:left;
	min-height:50%;
	height:auto;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#666 url(../bilder/inhalt_bg.png) repeat-y;
}

		/*Über margin:0 auto; erreicht man das der Layout-Bereich immer in der Mitte des Browsers ist also zentriert die 0 ist der Abstand vom oberen bzw. unteren Browserrand. Das auto, gibt ab das der Abstand zum linken bzw. rechten Rand automatisch bestimmt werden soll. Deshalb ist die Seite dann zentriert.
		
		widht: 780px; gibt an das der Layout Bereich in der Breite 780px breite haben soll.
		text-align:left; dadurch wird der Text im Layout div linksbündig da im body auf center zur Zentrierung im IE 5.5.
		min-height:100%; Mindesthöhe der Seite, also 100%.
		border-left:1px solid #000; border-right:1px solid #000;
		Rand links und rechts, 1px Breit und als durchgezogene Linie (solid) mit der Farbe schwarz (#000) darzustellen.
		
		Auch Angaben für border-bottom oder border-top sind möglich.
		
		
		Dem Header h1, wird mit einer so genannten „Image Replacement Methode“ ein Hintergrundbild zugewiesen. dabei wird der Text der in der Überschrift steht durch eine Grafik ausgetauscht, der Text ist aber auch bei deaktivierter Bild anzeige immernoch zu lesen.
		
		Übersicht der Image Replacement Mothoden:
		http://www.mezzoblue.com/tests/revised-image-replacement/ */

 

h1 {
	width: 100%;
	/* height: 167px; */
	height: 51px;
	position: relative;
	padding:0;
	margin:0;
	background:#fff;
}

 

h1 span {
	background: #666 url(../bilder/header.png) no-repeat;
	position: absolute;
	width: 100%;
	height: 51px;
}

 

/* Überschrift im Inhalt: */

h2 {
	font-size:120%;
	font-weight:normal;
	border-bottom:1px solid #999;
	margin:0 2em 0 0;
}
 

/* Formatierung der Navigation: */



#navigation{
    display:block;
    height:25px; 
    font-size:0.9em;
    background:#000 url(../bilder/navi_bg.png) repeat-x;
    border-bottom:2px solid #fff;
}


#navigation ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:37em;
}


#navigation ul li{
    display:block;
    float:left;
    margin:0;
}

#navigation ul li a{
    display:block;
    float:left;
    color:#fff;
    text-decoration:none;
    padding:0 3.5em 0 1em;
    line-height:25px;
}


#navigation ul li a:hover {
    color:#fff;
	background: url(../bilder/navi_grau.png) repeat-x;
}


.blau {
    background: url(../bilder/navi_blau.png) repeat-x;
    border-left:1px solid #fff;
}

.grau {
    background: url(../bilder/navi_bg.png) repeat-x;
    border-left:1px solid #fff;
}

.gruen {
    background: url(../bilder/navi_gruen.png) repeat-x;
    
    border-left:1px solid #fff;
}

.orange {
    background: url(../bilder/navi_orange.png) repeat-x;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
}


/*
#navi2 {
	position:fixed;
	width:80px;
	height:auto;
	padding:3px 3px 3px 3px;
	font-size:0.85em;
	color:#666;
	line-height:1.4em;
	background-color:white;
}
*/
#inhalt_head {
	background: url(../bilder/inhalt_head.png) no-repeat;
	position: absolute;
	width: 780px;
	height: 51px;
}
/* Formatieren des Inhalts: */


#inhalt {
	width:auto;
	height:auto;
	padding:4em 170px 8em 190px;
	font-size:0.85em;
	color:#fff;
	line-height:1.4em;
}


/* Formatieren des Footers: */


#footer {
	background:url(../bilder/footer.png) repeat-x left bottom;
	width:780px;
	/* height:196px; */
	height:22px;
	margin:-22px auto;
	text-align:center;
	font-size:0.7em;
	color:#FFF;
}

 

 

#footer p {
	padding:0;
	margin:0;
	height:196px;
	/* background:url(../bilder/footer.png) no-repeat right bottom; */
}

 

#footer span {
	position:relative;
	top:10px;
}

#flashcontent {
	border:thin;
}

.center {
	text-align:center;
}

.fett {
	font-weight:bold;
}

#footer a{
	font-size:0.8em;
	color:#FFF;

}


#footer a:hover {
	font-size:0.8em;
	color:#FFF;
}