/* -- Allgemeines -- */
body {
  background: url(../img/bg.gif) #e7f3f7; /* Hier sollte man, auch wenn man ein Bild als Hintergrund hat, nicht vergessen die Hintergrundfarbe zu setzen. 
  Es koennte naemlich sein dass man aus versehen fuer den Text die gleiche Farbe hat wie fuer den Hintergrund wobei die Leute mit ausgeschalteten Bildern 
  nichts erkennen koennen. */
  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, aelteren Operas und IE */
  font-family: verdana, arial, sans-serif ;
}
a { color: #99cc99; 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: #666666; text-decoration: underline } /* 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Ÿ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: -999px;
  width: 990px;
}
h1 { /* Die Überschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
  color: #33cc99;
  font-family: Arial, Helvetica, sans serif;
  font-size: 2.2em;
  font-weight: normal;
  line-height: 1.0em;
  padding: 0.6em 0 0.2em 2%;
  margin: 0;
  }
h2 { /* Die †berschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
  border-top: 1px solid #E6E6FA;
  color: #33cc99;
  font-family: Arial, Helvetica, sans serif;
  font-size: 1.8em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0.6em 0 0.2em 3%;
  margin: 0;
  }
h3 {
  color: #33cc99;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.1em;
  padding: 0.6em 0 1.1em 3%;
  margin: 0.4em 0em 0.4em 0em;
  }
  h4 {
  color: #6699CC;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.1em;
  font-weight: lighter;
  line-height: 1.0em;
  padding: 0.6em 0 0.2em 10%;
  margin: 0;
}
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: #333333;
  font-size: 1.1em;
  font-family: Arial, Helvetica, sans serif;
  padding: 0.0em 0 0.0em 10%;
}



  text0 {
  color: #1E1E1E;
  background-color: #DCDCDC;
  font-family: Arial, Helvetica, sans serif;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.0em;
  padding: 10px;
  margin: 1em 1em 1em 10%;
  border: 1px solid #646464;
}

  text2 {
  color: #1E1E1E;
  background-color: #DCDCDC;
  font-family: Arial, Helvetica, sans serif;
  font-size: 1.2em;
  padding: 5px;
  margin: 5px;
}

  text3 {
  color: #1E1E1E;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.0em;
  font-weight: normal;
}

  monat {
  color: #1E1E1E;
  background-color: #DCDCDC;
  font-family: Arial, Helvetica, sans serif;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 2.6em;
  padding: 10px 50% 10px 2%;
  margin: 5px 0 5px 2%;
  border: 1px solid #646464;
  }

  datum {
  color: #33cc99;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 2.6em;
  padding: 5px 1% 5px 4%;
  margin: 0;
  border: 0px solid #646464;
  }
  
  event {
  color: #6699CC;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 2.6em;
  padding: 0.2em 0 0.2em 7%;
  margin: 0;
}

h5 {
  color: #333333;
  font-size: 1.2em;
  font-family: Arial, Helvetica, sans serif;
  padding: 0.0em 0 0.0em 7%;
  border: 0px solid #646464;
  margin: 0;
  text-align: left;
}
  
/*
Zwei Angaben bedeuten: erste Angabe Abstand oben und unten, die zweite den Abstand fŸr rechts und links.
Drei Angaben bedeuten: erste Angabe Abstand fŸr oben, die zweite Abstand rechts und links und die dritte den Abstand fŸr unten.
Vier Angaben bedeuten: erste Angabe Abstand fŸr oben, die zweite Abstand fŸr rechts, die dritte den Abstand fŸr unten und die vierte den Abstand fŸr links.*/


img { 
  /* border: solid 1px #aaa; */
  padding: 1px;
  max-width: 95%; /* Gute Browser machen ein zu gro§es Bild, welches das Design sprengen wŸrde, entsprechend kleiner. Funktioniert beim IE leider nicht. */
}
.fleft { /* Sachen, an denen der Text vorbeiflie§en soll, wierden 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 dafuer gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer 
Rand entstehen kann, der nicht ganz au§en am Fenster ist. */
  font-size: 0.8em; /* 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: 70em; /* Eine Begrenzung der Breite auf hšhstens 70em. Das machen wir um nicht zu lange 
  Textbreiten zu erhalten, welche dann schlecht zu lesen sind. FŸr den IE gibt es in ielte6.css einen Woraround. */
  margin: auto; /* Hiermit zentrieren wir unsere Seite. */
  border: 1px solid #aaa; /* Eine kleine optische AbgrŠnzung. */
  border-top: 0; /* Ganz oben allerdings wŸrde es mit dem grauen komisch aussehen, deshalb weg damit. */
  background: white;
}
#footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie #subnav, falls #subnav lŠnger sein sollte. */
  padding: 0 20px;
}

/* - Logo bzw. Kopf - */
#logo {
  background: url(../img/menue.jpg) 0 0 no-repeat #99cccc; /* Das Bild mit der Blume hat einen †bergang zum Schwarzen das nutzen wir aus. 
  Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch dass die Hintergrundfarbe auch schwarz ist, entsteht der 
  Eindruck als ob das Bild unendlich lang wŠre. */
  height: 112px; /* Das Blumenbild ist 64px hoch also wŠhlen wir das auch als hšhe fŸr unseren Kopf. */
  padding: 0 20px;
  text-align: right;
  line-height: 56px;
  font-size: 36px; /* Das Logo soll auch in unseren Kopf passen deswegen ist es ein wenig kleiner. Durch die Angabe der Textgrš§e in px 
  verhindern wir im IE die Vergrš§erung und zerstšrung des Layouts durch den Benutzer. Der Opera vergrš§ert das Bild proportional mit 
  also kann da auch nichts passieren. */
  overflow: hidden; /* Einzig der Mozilla kšnnte den Text unverhŠltnissmŠ§ig zum Hintergrund verŠndern. Damit dann wenigstens das MenŸ b
  enutzbar bleibt schneiden wir alles was herausragt ab. */
  letter-spacing: -3px; /* Wieder ein wenig Typografie damit das Logo besser aussieht. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
}
#logo a {
  color: white; /* Die vorher eingestellte Farbe passt nicht um auch als Logofarbe zu dienen, deshalb wŠhlen wir hier wei§. */
  text-decoration: none;
}
#logo a span { /* Der letzte Buchstabe soll invertiert dargestellt werden. */
  color: black;
  background: white;
  padding-right: 0.1em; /* Ein Hack, damit das wei§e rechts und links genau so breit ist. */
  font-weight: bold;
}

/* - MenŸ - */
#menu {
  background: url(../img/wechselschatten.jpg) #287635;
  padding: 5px 5%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des MenŸs rechts und links sein. */
  margin: 0;
  text-align: right;
  color: yellow; /* Hier definieren wir die Farbe des MenŸpunktes, der 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; /* Hier ist das mit der Linkfarbe genau so, sie soll wei§ sein. */
  text-decoration: none;
}

/* - Subnavigation, Rechte Spalte - */
#subnav {
  width: 26%; /* 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: 10em; /* 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: 70px 1% 1em 1%;
  margin: 1em 1% 0 1%;
  border-left: 1px 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. */
}
#subnav dt { /* Die einzelnen †berschriften in der Subnavigation */
  font-size: 1.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
}
#subnav dd { /* Die Unterpunkte der Subnavigation. */
  padding: 0;
  margin: 0.2em 0;
}

/* - Der Hauptinhaltsteil - */
#main {
  background: url(../img/wappen.gif) no-repeat 100% 0 white; /* Die kleine, blaue, halbdurchsichtige 
  Blume wird als Hintergrundbild, welches rechts oben in der Ecke steht, definiert. */
  padding: 0 31% 0 20px; /* 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-Spalten Eindruck entsteht. */
  line-height: 1.5em; /* Zur besseren Lesbarkeit erhšhen wir die Zeilenhšhe. */
}

#main dt { /* Die einzelnen †berschriften in der Subnavigation */
  font-size: 1.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  color:#FF0080;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 3px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
}
#main dd { /* Die Unterpunkte der Subnavigation. */
  font-size: 0.8em;
  font-family: Georgia, "Times New Roman", Times, serif;
  color:#00FF00;
  padding: 0;
  margin: 0.2em 0;
}