/* -- Allgemeines -- */
body {
 background: url(../img/...) #6699CC;
 color: black;
 margin: 0;
 padding: 2%; /* Ein wenig Abstand */
 min-width: 640px; /* Bei weniger als 640px Breite soll ein Scrollbalken erscheinen */
 font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
 font-family: verdana, helvetica, arial, sans-serif; 
}
a { color: #3366CC; text-decoration: none; font-weight:normal; }
a:hover { text-decoration: underline;}
.skip { 
 position: absolute;
 margin-left: -10000px;
}
h1 {
 font-size: 1.2em;
 line-height: 1.5em;
 padding: 15px 0px 5px 0%;
 margin: 0;
 border-bottom: 1px dashed #aaa;
}
h1, h2, h3, h4, h5, h6 { 
 color: #3366CC;
 font-family: verdana, helvetica, arial, sans-serif; 
}
img {
 border: solid 0px #aaa;
 padding: 1px;
 max-width: 95%; /* gute Browser machen ein zu großes Bild, welches das Design sprengen würde, funktioniert beim IE leider nicht */
}
.fleft { /* Sachen an denen der Text vorbeifließen soll werden diese Klassen zugewiesen. */
 float: left;
 margin: 0 1em 0.2em 0; /* Man sollte einen schönen Abstand wählen sonst kleben die Sachen so am Text. */
}
.fright {
 float: right;
 margin: 0 0 0.2em 1em;
 padding: 1px;
}


/* -- Layoutspezifisches -- */
#container { /* Ist dafür gedacht dass die viele Formatierungen einfacher werden, ein gemeinsamer Rand entstehen kann, der nicht ganz außen am Fenster ist. */
 font-size: 0.75em;
 max-width: 700px; /* Eine Begrenzung der Breite auf höhstens 700px.*/
 margin: auto; /* Hiermit zentrieren wir unsere Seite */
 border: 1px solid #aaa;
 
}

/* - Logo bzw. Kopf - */
#logo {
 background: url(../gifs/headline.gif) 0 0 no-repeat #336699;
 height: 115px; /* Das Bildhöhe=Kopfhöhe */
 padding: 0 20px;
 text-align: center;
 line-height: 54px;
 font-size: 24px; 
 overflow: hidden; /* Damit wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
 letter-spacing: -1px; 
 margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle. */
 z-index:2;
}


/* - "Menü" */
#menu { 
 background: url(../img/ ) #336699;
 padding: 3px 3%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
 margin: 0;
 text-align: left;
 z-index:1;
 color: yellow; /* Hier definieren wir die Farbe des Menüpunktes welcher kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
}
#menu li {
 font-size: 1.2em;
 display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
 list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
 border-left: 1px solid white; /* Ein optischer Trennungsstrich */
 padding: 0 10px 0 15px;
 font-weight: bold;
}
#menu li a {
 color: white;
 text-decoration: none;
}

#menu li a:hover {
 color: #CFCFCF;
 }

/* - Navigation, linke Spalte - */
#nav {
 width: 15%; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Navigation werden, damit immer genügend Platz für den richtigen Inhalt bleibt. */
 min-width: 14.5em; /* Damit uns die Navigation nicht zu sehr zusammengeschoben wird. */
 float: left; /* Positionierung. */
 padding: 25px 0%;
 margin: 0%;
 border-left: 0px dotted #aaa; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
 font-size: 0.9em; /* Die Schriftgröße setzen wir hier ein wenig herunter damit erkennbar wird dass das Informationen zweiter Rangordnung sind. */
 background: #3366CC;
 z-index:1;
 height:450px;
 }




/* - Der Hauptinhaltsteil - */
#main {
 background: url(../img/ ) no-repeat 100% 0 white;
 padding: 0px 65px 10px 0px; /* Der rechte Abstand, (2. Wert) in px, da Firefox keine % kann. 3.Wert=unterer Rand, 4. Wert= Textpadding) */
 line-height: 1.5em; /* Zur besseren Lesbarkeit erhöhen wir die Linienhöhe. */
 margin-left:0px;
 z-index:3;
 min-height: 300px;
 }

/* - Der Hauptinhaltsteil - innen */
#main_in {
 background: url(../img/ ) no-repeat 100% 0 white;
 padding: 0px 0px 10px 55px; /* Der rechte Abstand, (2. Wert) in px, da Firefox keine % kann. 3.Wert=unterer Rand, 4. Wert= Textpadding) */
 line-height: 1.5em; /* Zur besseren Lesbarkeit erhöhen wir die Linienhöhe. */
 margin-left:130px;
 z-index:3;
 min-height: 550px;
 }