/* -- Allgemeines -- */
body {
 background: url(../img/background2.jpg); background-attachment:fixed;/* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es kšnnte nŠmlich sein dass man aus versehen fŸr den Text die gleiche Farbe hat wie fŸr den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen kšnnen. */
 color: black;
 margin: 0;
 padding: 1%; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
 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: Arial, Helvetica, sans-serif;
 scrolling: yes;
}
a { color: #0B4D8C; text-decoration: underline; } /* Alle unbesuchten Links bekommen eine leicht blŠuliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
a:visited { color: black; } /* Besuchte Links werden schwarz, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */
.skip { /* Da ein wichtiger Screenreader das display: none; auch fälschlicherweise für sich versteht und nichts vorließt obwohl das hier sich vor allem an Blinde richtet, muss man es so lösen dass man diesen Link außerhalb des Sichtfeldes bringt. Somit wird er trotzdem vorgelesen. */
 position: absolute;
 margin-left: -10000px;
}
h1 { /* Die †berschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
 font-size: 1.5em;
 margin-left: 0px;
 margin-bottom: 0.2em;
 color: #000000;
}
h1, h2, h3, h4, h5, h6 { /* Alle †berschriften bekommen eine besondere Farbe und da sie sehr groß sind kšnnen wir es uns erlauben hier eine Schrift mit Serifen zu wählen. Wir spielen hier ein wenig mit Typographie, und entgegen dem Einheitsbrei auf vielen Seiten. */
 color: #000000;
 font-family: Arial, Helvetica;
}
img { /* alle Bilder bekommen einen schšnen Rahmen */
/* border: solid 1px #aaa;*/
 padding: 3px;
 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;
}
.mittig  { vertical-align:middle}
 

/* -- Layoutspezifisches -- */
#container { /* Ist dafŸr gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz au§en am Fenster ist. */
 background: transparent;
 /* font-size: 1em; Ein Kompromiss Ÿber den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgrš§e fŸr zu gro§, wissen aber nicht wie man das Šndert. */
 max-width: 840px; /* Eine Begrenzung der Breite auf hšchstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. FŸr den IE gibt es in ielte.css einen Workaround. */
 margin: auto; /* Hiermit zentrieren wir unsere Seite */
 border: 0px solid black; /* transparent  Eine kleine optische Abgrenzung */
 border-top: 0px solid black; /* Ganz oben allerdings wŸrde es mit dem grauen komisch aussehen, deshalb weg damit. */
}

/* - Logo bzw. Kopf - */
#logo {
 background: url(../img/background.jpg) 0 0 no-repeat #EFFFE6; /* tbd */
 padding: 5px 0;
 text-indent: 180px;
 height: 68px; /* tbd */
 font-family: Arial, Helvetica, sans-serif;
 font-size: 48px; /* tbd */
 overflow: hidden; /* Einzig der Mozilla kšnnte den Text unverhŠltnissmŠ§ig zum Hintergrund verŠndern. Damit dann wenigstens das Menu benutzbar bleibt schneiden wir alles was herausragt ab. */
 letter-spacing: -1px; /* Wieder ein wenig Typografie damit das Logo besser aussieht. */
 margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
}

/* - MenŸ - */
#menu { 
 background: url(../img/linie_alpha.gif) 0 0 no-repeat; /* FS dunkelgrŸn */
 height: 2ex;
 margin-top: 0ex;
 font-size: 1.5ex;
 padding-top: 0.4ex;
 font-family: Arial, Helvetica, sans-serif;
 margin-left: 12.8ex;
 text-align: left;
 color: #A6334A; /* FS rot */
 border: 0px solid red; 
}
#menu li {
 font-size: 1.8ex;
 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 #009900; /* Ein optischer Trennungsstrich */
 padding: 0 0;
 font-weight: bold;
}
#menu a {
 color: #A6334A; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
 text-decoration: none;
}
#menu a:hover {
 color: #EFFFE6;
 text-decoration: none;
}

/* - MenŸ bottom- */
#menu2 { 
 padding: 0ex 0ex 0ex 3px;  
 margin-top: 0.3ex;
 text-align: left;
 color: black;
 font-weight: bold;
 background: #61BD51;
 border: 0px solid black;
}
#menu2 li {
 font-size: 0.8em;
 display: inline; /* Damit die MenŸpunkte nebeneinander und nicht untereinander erscheinen. */
 list-style-type: none; /* Die Bullets vor den MenŸpunkten schalten wir ab. */
}
#menu2 li a {
 color: #A6334A; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
 text-decoration: none;
}
#menu2 li a:hover {
 color: #EFFFE6;
 text-decoration: none;
}
#menu3 { 
 padding: 0ex 0ex 0ex 45ex;  
 margin-top: 0.3ex;
 text-align: left;
 color: A6334A;
 font-weight: bold;
 background: #61BD51;
 border: 0px solid black;
 list-style-type: none; /* Die Bullets vor den MenŸpunkten schalten wir ab. */
}
#menu3 li {
 font-size: 0.8em;
 display: inline; /* Damit die MenŸpunkte nebeneinander und nicht untereinander erscheinen. */
 list-style-type: none; /* Die Bullets vor den MenŸpunkten schalten wir ab. */
}
#menu3 li a {
 color: #A6334A; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
 text-decoration: none;
}
#menu3 li a:hover {
 color: #EFFFE6;
 text-decoration: none;
}

/* - Subnavigation, Rechte Spalte - */
#subnav {
 width: 128px; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Subnavigation werden, damit immer genügend Platz für den richtigen Inhalt bleibt. */
 min-width: 128px; /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
 float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
 padding: 3em 0em 3em 0ex;
 line-height: 1.3em; /* Zur besseren Lesbarkeit erhšhen wir die Linienhšhe. */
 margin: 0ex;
 margin-top: 0ex;
 margin-left: 5em;
 border-left: 1px dotted #61bd51; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
 font-size: 0.8em; /* Die Schriftgrš§e setzen wir hier ein wenig herunter damit erkennbar wird dass das Informationen zweiter Rangordnung sind. */
}

#subnav dl { /* Die Unterpunkte der Subnavigation. */
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #61BD51;
 text-decoration: underline; 
 margin-left: 0.5em;
}

#subnav dt { /* Die Unterpunkte der Subnavigation. */
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #61BD51;
 text-decoration: underline; 
 margin-left: 0.5em;
}

#subnav dd { /* Die Unterpunkte der Subnavigation. */
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #A6334A;
 text-decoration: none; 
 margin-left: 0.5em;
}

#subnav dd a {
 color: #A6334A; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
 text-decoration: none;
}

#subnav dd a:hover {
 color: #61BD51;
 text-decoration: none;
}

/* - Subnavigation, Rechte Spalte - */
#subnav2 {
 background: tansparent; /* FS dunkelgrŸn */
 float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
 height: 1.9ex;
 width: 16.7ex; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Subnavigation werden, damit immer genügend Platz für den richtigen Inhalt bleibt. */
 min-width: 16.7ex; /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
 padding: 0ex 0ex 0ex 0ex;
 font-weight: bold;
 margin: 0px;
 margin-top: 0ex;
 margin-left: 0ex;
 text-align: left;
 text-indent: -0.3ex;
 border: 1px solid #aaa; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
 font-size: 1.5ex; /* Die Schriftgrš§e setzen wir hier ein wenig herunter damit erkennbar wird dass das Informationen zweiter Rangordnung sind. */
}
#subnav2 a {
 color: #A6334A; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
 text-decoration: none;
}
#subnav2 a:hover {
 color: #EFFFE6;
 text-decoration: none;
}

/* - Her Hauptinhaltsteil - */
#main {
 border: 0px solid black;
 font-size: 0.8em;
 min-height: 20em;
 margin-top: 0px;
 background: transparent; /* tbd */
 font-family: Arial, Helvetica;
 padding: 5px 0% 20px 0px; /* Der rechte Abstand 31% Stellt sicher dass auch nach dem Umfließen der Subnavigation der Text genau so breit wird wie oben und ein zwei Columnen Eindruck entsteht. */
 line-height: 1.3em; /* Zur besseren Lesbarkeit erhšhen wir die Linienhšhe. */
}
#main a {
 color: #A6334A;
 font-weight: bold;
 text-decoration: none;
}

#main a:hover {
 color: #61BD51;
 text-decoration: none;
}

#main li {
 text-indent: 5cm;
 color: blue; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
 text-decoration: none;
}

#main p a {
 color: #A6334A;
 font-weight: bold;
 text-decoration: none;
}

#main p a:hover {
 color: #61BD51;
 text-decoration: none;
}
#main2 {
 border: 0px solid black;
 font-size: 1em;
 min-height: 1em;
 margin-top: 0px;
 background: transparent; /* tbd */
 font-family: Arial, Helvetica;
 padding: 5px 0% 20px 0px; /* Der rechte Abstand 31% Stellt sicher dass auch nach dem Umfließen der Subnavigation der Text genau so breit wird wie oben und ein zwei Columnen Eindruck entsteht. */
 line-height: 1.3em; /* Zur besseren Lesbarkeit erhšhen wir die Linienhšhe. */
}

#main2 a {
 color: #A6334A;
 font-weight: bold;
 text-decoration: none;
}

#main2 a:hover {
 color: #61BD51;
 text-decoration: none;
}