/* -- Allgemeines -- */
body {
  background: url(../img/bg.gif) #ffffff;
  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: verdana, arial, sans-serif ;
}


a { color: #A22537; text-decoration: underline; }
a:visited { color: black; }
.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;
}
a:hover {
  color: #A22537;
  text-decoration: none;
}


h1 {
  font-size: 2.3em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0.6em 0 0.2em 2%;
  margin: 0;
  border-bottom: 1px dashed #E6E6FA;
}
h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4, h5, h6 {
  color: #A22537;
  font-family: Arial, Verdana, sans-serif;
}


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 nicht. */
}
.noborder {
  border: 0px;
  padding: 0px;
  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, werden diese Klassen zugewiesen. */
  float: left;
  margin: 0 1em 0.2em 0;
}
.fright {
  float: right;
  margin: 0 0 0.2em 1em;
  padding: 1px;
}


/* -- Layoutspezifisches -- */
#container {
  font-size: 0.8em;
  max-width: 70em;
  margin: auto;
  border: 1px solid #aaa;
  /* border-top: 0; Ganz oben allerdings würde es mit dem grauen komisch aussehen, deshalb weg damit. */
  background: white;
}
#footer {
  clear: both;
  padding: 0 20px;
}

/* - Logo bzw. Kopf - */
#logo {
  background: url(../img/header.jpg) 0 0 no-repeat white;
  height: 127px;
  padding: 0 20px;
  text-align: right;
  line-height: 54px;
  font-size: 30px;
  overflow: hidden;
  letter-spacing: -3px;
  margin: 0;
}
#logo a {
  color: #A22537;
  text-decoration: none;
}
#logo a span { /* Der letzte Buchstabe wird invertiert dargestellt. */
  color: black;
  background: white;
  padding-right: 0.1em; /* Damit das weiße rechts und links genau so breit ist. */
  font-weight: bold;
}

/* - Menü - */
#menu {
  background: #111733;
  padding: 5px 5%;
  margin: 0;
  text-align: right;
  color: #A22537; /* Farbe des Menüpunktes, der kein Link ist. */
}
#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; /* Optischer Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: bold;
}
#menu li a {
  color: white;
  text-decoration: none;
}
#menu li a:hover {
  color: #A22537;
  text-decoration: none;
}

/* - Subnavigation, Rechte Spalte - */
#subnav {
  width: 0%;
  min-width: 10em;
  float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
  padding: 10px 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;
}
#subnav dt {
  font-size: 1.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa; /* Optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
}
#subnav dt2 { /* Überschrift Subnavigation ohne Punkte */
  font-size: 1.2em;
  font-family: Verdana, Arial, sans-serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 0px;
}
#subnav dd { /* Die Unterpunkte der Subnavigation. */
  padding: 0;
  margin: 0.2em 0;
}

/* - Der Hauptinhaltsteil - */
#main {
  background: #FFFFFF; /* Die kleine, blaue, halbdurchsichtige Blume wird als Hintergrundbild, welches rechts oben in der Ecke steht, definiert. */
  padding: 0 20px 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 wird die Zeilenhöhe erhöht. */
}