@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:#CCC url(../content/body_bg.png) repeat;
}


/* 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 {
	margin:0 auto;
	width:800px;
	text-align:left;
	min-height:100%;
	height:auto;
	border-left:0px;
	border-right:0px;
	background:#fff url(../content/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/ */

 
#header {
	margin:0 auto;
	width:800px;
	height:243px;
	text-align:left;
	border-left:0px;
	border-right:0px;
	background:#fff url(../content/header.png) no-repeat;
}


h1 {
	width: 100%;
	position: relative;
	font-size: 1.4em;
	color: #FFC;
	padding:0;
	margin:0;
	margin:20px 0px 0px 0px;
}

/* Überschrift im Inhalt: */

h2 {
	width: 100%;
	position: relative;
	font-size: 1.1em;
	color: #FFF;
	padding:0;
	margin:0;
	margin:20px 0px 0px 0px;
}

h3 {
	width: 100%;
	position: relative;
	font-size: 1em;
	color: #FFF;
	padding:0;
	margin:0;
	margin:5px 0px 0px 0px;
}

.small {
	width: 100%;
	position: relative;
	font-size: 0.7em;
	color: #FFF;
	padding:0;
	margin:0;
}

.boxlink {
	width: 100%;
	position: relative;
	font-size: 0.7em;
	color: #00F;
	padding:0;
	margin: 10px 10px 10px 10px;
}
 
.fotostoerer {
	height: 122px;
	width: 615;
	background: url(../content/hfotoband02.png) no-repeat;
}


/* Formatierung der Navigation: */



#navigation{
	width: 95%;
    display:block;
    height:25px; 
    font-size:0.9em;
    border-bottom:2px solid #fff;
	font-family: "Comic Sans MS", cursive;
}


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


#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:#000;
}







.box_content ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
	height:auto;
}


.box_content ul li{
    display:block;
    float:left;
    margin:0;
}

.box_content ul li a{
    display:block;
    float:left;
    color:#000;
	font-size:0.7em;
    text-decoration:none;
    padding:0px 0px 0px 0px;
	line-height:inherit;
}


.box_content ul li a:hover {
	text-decoration:underline;
    color:#000;
}





/* Formatieren des Inhalts: */


#inhalt {
	height:auto;
	width: 620px;
	margin:20px 2px 2px 20px;
	font-size:0.85em;
	/* color:#666; */
	line-height:1.4em;
}


/* Formatieren des Footers: */


#footer {
	background:url(../bilder/footer_bg.png) repeat-x left bottom;
	width:780px;
	height:196px;
	margin:-196px 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:160px;
}

#inhalt a {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}


#inhalt a:hover {
	text-decoration: underline;
	background: url(images/navi_hover.png) no-repeat;
}


.box {
	width:144px;
	float: right;
	vertical-align:top;
	margin: 0px 10px 0px 0px;
}

.box_head {
	width: 142px;
	height: 25px;
	border:0px;
	padding: 0px;
	margin: 0px;
	background:url(../content/box_header.png) no-repeat top;
	float: right;
	vertical-align:top;
}

.box_head p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFC;
	font-size:0.7em;
	font-weight:bold;
	margin: 5px 0px 0px 10px;
}

.box_content {
	width: 142px;
	height: auto;
	border:0px;
	padding: 0px;
	margin: 0px;
	background:url(../content/box_bg.png) repeat-y;
	float: right;
	vertical-align:top;
}

.box_content p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	margin: 0px 5px 0px 10px;
}

.box_content img {
	margin: 10px 0px 10px 10px;
}

.linkimg {
	background:url(../content/link.gif) no-repeat center;
	margin:0px 4px 0px 10px;
	padding:0px;
	float:left;
	width:10px;
}
	

.box_footer {
	width: 142px;
	height: 9px;
	border:0px;
	padding: 0px 0px 18px;
	margin: 0px;
	background:url(../content/box_footer.png) no-repeat top;
	float: right;
	vertical-align:top;
}

/* NEWS */

#news {
	height:auto;
	width: 610px;
	margin:2px 2px 2px 2px;
	font-size:0.85em;
	/* color:#666; */
	line-height:1.4em;
}

.newseintrag {
	width: 596px;
	margin:2px;
	border-bottom:dotted;
	border-color:#FF9;
}

.news h1 {
	font-size: 1.1em;
	color: #FFC;
	padding:0;
	margin:5px 0px 0px 0px;
}

.news h2 {
	font-size: 0.8em;
	color: #FFC;
	padding:0;
	margin:0;
	margin:5px 0px 0px 0px;
}

#flashcontent {
	margin:0px 0px 0px 50px;
	border:2px solid #999;
	width: 480px;
	height: 680px;
}