body {
  background: #f4f6f8; 
  margin: 0;
  padding: 1%; /* Ein wenig Abstand, damit der Anschein eines Blattes auf der Wand immer erhalten bleibt. */
  min-width: 900px; /* 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, helvetica, sans-serif;}
  
a {
	color: #0000CD;
	text-decoration: underline;} /* Alle unbesuchten Links bekommen eine leicht bl?uliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */

.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 {
  font-size: 2em;
  font-weight: normal;
  line-height: 1em;
  padding: 0.6em 0 0.2em 2%;
  margin: 0;
  border-bottom: 1px dashed #e6e6fa;}
  
h5 {
	font-size: 110%;
	font-family: verdana, arial, helvetica, sans-serif;
	color: black;
	font-style: normal;
	font-weight: normal;}

h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4 {
	color: #57709D;
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
}
.bildohne {
	border: none;
}

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. */
}

hr { 
	border-top: 1px dotted #aaa;}
	
.nodsiplay {font-size: 83%;
	font-family: verdana, arial, helvetica, sans-serif;
	display: none;}

.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;
  border: solid 0px
}
.tabelle {
	font-size: 88%;
	font-family: verdana, arial, helvetica, sans-serif;
	table-layout: auto;
	}
.tabelle-klein {
	font-size: 85%;
	font-family: verdana, arial, helvetica, sans-serif;
	table-layout: auto;}
	
.boxads {
	
	font: 90% Verdana, Arial, helvetica, Sans-Serif;
	padding: 8px;
	border: 1px solid #999;
	color: #333;
	height: 95px;
	width: 560px;
	-moz-border-radius: 10px;
	}

/* -- Layoutspezifisches -- */
#container {
	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: 900px; /* 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;
	background: White;}
	
#footer {
	clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie #subnav, falls #subnav l?nger sein sollte. */
	padding: 0 200px;}

/* - Logo bzw. Kopf - */
#logo {
  background: url(../img/logo.jpg) 0 0 no-repeat white; /* 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: 138px; /* Das Blumenbild ist 64px hoch also w?hlen wir das auch als h?he f?r unseren Kopf. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */}

/* - Men? - */
#menu {
  background: #c0ccdc;
  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: #000; /* 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.0em;
  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: #0000CD;
  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: 25px 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 */
	text-align: left;
	color: #EC0000;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	padding: 1em;
	margin-top: 1,2em;
	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 {
  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. */
}