/* Allgemeines CSS Dokument */

/* allgemeine Deklarationen */

html {
  font-size:100%; /*setzt die normale Größe auf 16px. Dadurch können prozentuale Größenangaben verwendet und das Dokument kann auf jedem Browser skaliert werden*/
  overflow:scroll;
}

* {
  margin:0;
  padding:0; 
}

body {
  background-color:#ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size:62.5%; /*legt die normale Größe so fest, dass 1em 10px sind */ 
}

p {
  font-size:1.3em;
  padding-bottom:1em;
}

h1 /* = Überschrift der Seite in Großbuchstaben */{ 
  font-size:1.7em;
  color:#aaa;
  font-weight:normal;
  padding-bottom:1em;
  text-transform:uppercase;
}

h2 /* = fette Überschrift, Abstand unten */{ 
  font-size:1.3em;
  font-weight:bold;
  padding-bottom:1em;
}

h3 /* = fette Überschrift, Abstand oben */{
  font-size:1.3em;
  font-weight:bold;
  padding-top:1em;
}

h4 /* = Überschrift mit Linie, am besten zusammen mit div-class "kapitel" verwenden */{
  width:35em;
  font-size:1.5em;
  padding-bottom:1em;
  background-image:url('Bilder/linie.gif');
}

a {
  color:#444;
}

hr {
  margin-bottom:2em;
  margin-top:2em;
}


/* HEADER */

#headwrapper {
  width: auto;
  height:25.6em;
  background-image:url('Bilder/header_hintergrund.jpg');
  background-repeat:repeat-x;
}

#headwrapper #header {
  width:100.4em;
  height:25.6em;
  margin:0 auto;
  background-image:url('Bilder/header.jpg');
}

#headwrapper #header #homelink /* Link zur Startseite */{
  display: block;
  width:29em;
  height:8em;
  float:left;
  margin-top:2em;
  margin-left:2em;
}

#headwrapper #header #nav /* Navigation erster Ebene */{
  height:2em;
  width:99em;
  padding-top:7em;
  text-align:right;
  margin-right:3em;
}

#headwrapper #header #nav ol {
  list-style-type:none;
  font-size:1.2em;
}

#headwrapper #header #nav li {
  display:inline;
  margin-left:2em;
}

#headwrapper #header #nav ol a {
  color:#939393;
  text-decoration:none;
}

#headwrapper #header #nav ol a:hover {
  color:#eeeeee;
  text-decoration:none;
}

#headwrapper #header #nav ol .active /* zeigt, welcher Unterpunkt aktuell angewählt wurde */{
  color:#eeeeee;
  text-decoration:none;
}


/* CONTENT */
/* Allgemein */

#wrapper {
  width:100.4em;
  height:auto;
  margin:0 auto;
}

#wrapper a:hover {
  color:#fff;
  background-color:#444;
  text-decoration:none;
}

#wrapper a img {
  border:none;
  color:#fff;
}

#wrapper a:hover img {
  color:#fff;
  background-color:#fff;
  text-decoration:none;
}

#wrapper .external /* für Links, die auf ein Ziel außerhalb der HP verweisen */{
  background-image:url('Bilder/link-external.gif');
  background-repeat:no-repeat;
  padding-left:1.5em;
}

#wrapper .kapitel /* am Besten zusammen mit h4 verwenden */ {
  padding-bottom:6em;
  width:50em;
  height:auto;
}


/* Linke Spalte Bild */

#wrapper #links {
  width:24em;
  height:auto;
  padding-left:3em;
  padding-top:2em;
  float:left;
}

#wrapper #links img {
  margin-bottom:1em;
}

#wrapper #links p {
  color:#777;
  font-size:1.1em;
  padding:0em;
}


/* Linke Spalte Navigation */

#wrapper #content #navlinks {
  width:20em;
  height:auto;
  padding-left:3em;
  padding-top:2em;
  text-align:right;
  float:left;
}

#wrapper #content #navlinks ol {
  list-style-type:none;
  font-size:1.3em;
  line-height:1.5em;
  padding-bottom:3em;
}

#wrapper #content #navlinks ol p {
  font-size:1em;
  color:#777;
  line-height:1.5em;
}


/* Dreispalter: Mittlere und rechte Spalten */
/* Mittlere Spalte (bei 3 Spalten) */

#wrapper #mitte {
  width:25em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:10em;
  color:#444;
  line-height:1.8em;
}

#wrapper #mitte ul {
  font-size:1.3em;
  padding-left:1em;
  line-height:1.5em;
}

#wrapper #mitte .abstandListeUnten {
  padding-bottom:1em;
}

#wrapper #mitte2 { /* verwendet, wenn links Navigation: navlinks steht */
  width:25em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:14em;
  color:#444;
  line-height:1.8em;
}


/* Rechte Spalte (bei 3 Spalten) */

#wrapper #rechts {
  width:25em;
  height:auto;
  float:left;
  padding:2em;
  color:#444;
  padding-left:9em;
  line-height:1.8em;
}


/* Zweispalter: Rechte Spalten */
/* Zweispalter: Tabelle */

#wrapper #tabelle /* wird verwendet für reine Text-Tabellen */{
  width:60em;
  height:auto;
  padding-left:10em;
  float:left;
}

#wrapper #tabelle table {
  width:50em;
  height:auto;
  line-height:1.8em;
  color:#444;
  border:none;
  padding-bottom:3em;
  padding-top:2em;
}

#wrapper #tabelle table .ueberschrift1 {
  width:8em;
  height:auto;
  padding-right:4em;
  vertical-align:top;

}

#wrapper #tabelle table .unterpunkte1 {
  width:40em;
  height:auto;
  vertical-align:top;
  padding-left:2em;
  font-size:1.1em;
}

#wrapper #tabelle table .ueberschrift {
  width:8em;
  height:auto;
  padding-right:4em;
  vertical-align:top;
  padding-top:1.5em;
}

#wrapper #tabelle table .unterpunkte {
  width:40em;
  height:auto;
  vertical-align:top;
  padding-left:2em;
  font-size:1.1em;
  padding-top:1.5em;
}

#wrapper #tabelle2 /* wird verwendet, wenn links Bilder stehen (z.B. Bücher) und es eine Überschrift gibt */{ 
  width:60em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:14em;
  color:#444;
  padding-bottom:3em;
}

#wrapper #tabelle2 .titel {
  font-size:1.3em;
  font-weight:bold;
  line-height:2em;
}

#wrapper #tabelle2 table {
  width:60em;
  height:auto;
  line-height:1.8em;
  color:#444;
  border:none;
  padding-bottom:3em;
  padding-top:2em;
}

#wrapper #tabelle2 table td {
  padding-bottom:3em;
}

#wrapper #tabelle2 table .ueberschrift1 {
  width:8em;
  height:auto;
  padding-right:4em;
  vertical-align:top;

}

#wrapper #tabelle2 table .unterpunkte1 {
  width:50em;
  height:auto;
  vertical-align:top;
  padding-left:2em;
  font-size:1.1em;
}

#wrapper #tabelle2 table .ueberschrift {
  width:8em;
  height:auto;
  padding-right:4em;
  vertical-align:top;
  padding-top:1.5em;
}

#wrapper #tabelle2 table .unterpunkte {
  width:50em;
  height:auto;
  vertical-align:top;
  padding-left:2em;
  font-size:1.1em;
  padding-top:1.5em;
}


/* Zweispalter: Fliesstext */

#wrapper #content #fliesstext /* wird verwendet, wenn links div:navlinks steht */{
  width:50em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:14em;
  color:#444;
  line-height:1.8em;
  padding-bottom:4em;
}

#wrapper #content #fliesstext p {
  color:#444;
}

#wrapper #content #fliesstext table /* Tabelle innerhalb des Fliesstextes */{
  width:50em;
  height:auto;
  font-size:1em;
  margin:0em;
  padding:0em;
  padding-bottom:4em;
}

#wrapper #content #fliesstext table tbody tr {
  width:50em;
  height:2em;
  padding:0.5em;
}

#wrapper #content #fliesstext table tbody tr th {
  width:25em;
  height:2em;
  text-align:left;
  background-color:#444;
  color:#fff;
  border: solid 0.1em #444;
  padding:0.5em;
}

#wrapper #content #fliesstext table tbody tr td {
  width:25em;
  height:2em;
  text-align:left;
  border: solid 0.1em #444;
  padding:0.5em;
  line-height:1.3em;
}

#wrapper #content #fliesstext ol /* Aufzählung mit Aufzählungszeichen */ {
  list-style-type:decimal;
  font-size:1.3em;
  padding-left:1.5em;
}

#wrapper #content #fliesstext #liste ol /* Aufzählung ohne Aufzählungszeichen */ {
  list-style-type:none;
  padding-bottom:3em;
}

#wrapper #content #fliesstext ul /* ungeordnete Aufzählung mit Aufzählungszeichen */ {
  list-style-type:disc;
  font-size:1.3em;
  padding-left:1em;
  padding-bottom:1em;
}

#wrapper #content #fliesstext ul .ebene2 {
  list-style-type:none;
  font-size:1em;
}

#wrapper #content #fliesstext .aufzaehlung /* ungeordnete Aufzählung ohne Aufzählungszeichen */ {
  list-style-type:none;
  font-size:1.3em;
  padding-bottom:3em;
}

#wrapper #content #fliesstext .mitZeichen /* größerer Zeilenabstand als ul */ {
  list-style-type:disc;
  padding-left:1em;
  line-height:1.8em;
  padding-bottom:3em;
}

#wrapper #content #fliesstext .kleinmitZeichen /* kleiner als .mitZeichen */ {
  list-style-type:disc;
  padding-left:1em;
  line-height:1.8em;
  font-size:1.1em;
  padding-bottom:3em;
}

#wrapper #content #fliesstext .floatimg {
  float:left;
  padding-right:1em;
  margin-top:-0.3em;
}

#wrapper #content #fliesstext .bigLatinList /* Liste: Lateinische Großbuchstaben */ {
  list-style-type: upper-latin;
  padding-left:1.8em;
  font-size:1.3em;
}

#wrapper #content #fliesstext .zahlenListe /* Liste: Zahlen */ {
  padding:1em;
  list-style-type: decimal;
  padding-left:2.5em;
  font-size:1.3em;
  background-color:#cccccc;
  margin-bottom:1.5em;
}

#wrapper #content #fliesstext .zweiteEbene {
  list-style-type:circle;
  font-size:1em;
  padding-left:1em;
  padding-bottom:0em;
}

#wrapper #content #fliesstext2  /* wird für kleines p verwendet */{
  width:50em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:14em;
  color:#444;
  line-height:1.8em;
}

#wrapper #content #fliesstext2 h2 {
  font-size:1.3em;
  font-weight:bold;
  padding-bottom:2em;
  color:#444;
}

#wrapper #content #fliesstext2 a h2 {
  font-size:1.3em;
  font-weight:bold;
  padding-bottom:2em;
  color:#444;
}

#wrapper #content #fliesstext2 p {
  color:#444;
  padding-bottom:1.5em;
  padding-left:2.1em;
  font-size:1.1em;
  text-indent:-2.1em;
}

#wrapper #content #fliesstext2 .unten {
  padding-bottom:3em;
}

#wrapper #content #fliesstext3 /* wird verwendet, wenn links div:links steht */{
  width:50em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:10em;
  color:#444;
  line-height:1.8em;
}

#wrapper #content #fliesstext3 p {
  color:#444;
}

#wrapper #content #fliesstext3 .aufzaehlung2 {
  font-size:1.3em;
  padding-left:1.2em;
  padding-top:1em;
  padding-bottom:3em;
}

#wrapper #content #impressum {
  width:50em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:10em;
  color:#444;
  line-height:1.8em;
}

#wrapper #content #impressum p {
  padding-bottom:3em;
  color:#444;
}


/* Rückmeldung */

#wrapper #content #formular {
  width:50em;
  height:auto;
  float:left;
  padding:2em;
  padding-left:14em;
  color:#444;
  line-height:1.8em;
  padding-bottom:3em;
}

#wrapper #content #formular p {
  font-size:1.3em;
  padding-bottom:0em;
  padding-top:0.5em;
}

#wrapper #content #formular #oben {
  font-size:1.3em;
  padding-bottom:0em;
  padding-top:0em;
}

#wrapper #content #formular h2 {
  padding-top:3em;
  padding-bottom:1em;
}

#wrapper #content #formular table {
  padding-bottom:2em;
  padding-top:0em;
}

#wrapper #content #formular table tbody td {
  padding-right:0.5em;
  vertical-align:bottom;
  width:40em;
}

#wrapper #content #formular .radios {
  text-align:center;
  width:5em;
}

#wrapper #content #formular .radioleft {
  text-align:right;
  width:7em;
}

#wrapper #content #formular .radioright {
  text-align:left;
  width:7em;
}

#wrapper #content #formular table tbody td nobr {
  font-size:1.3em;
}


/* footer */

#wrapper #footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:3em;
  left:0;
  text-align:right;
  background-image:url('footer.jpg');
  background-repeat:no-repeat;
}

#wrapper #footer p {
  text-align:right;
  color:#999;
  font-size:1em;
  padding-top:1.3em;
  padding-right:17em;
}

#wrapper #footer a {
  color:#999;
  text-decoration:none;
}