body{
	margin:0;
	padding:0;
}
img{ border:0;}

#container
{
width: 1000px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;

}

#top
{

background-color: #5E6167;
border-bottom: 1px solid gray;
text-align:right; 
}

#top h1
{
color:#fff;
font-size:15px;
padding: 0;
font-weight:bold;
margin: 5px 13px 5px 5px;
}
#logo {
  background: url('../img/BackgroundSmall.png') right top no-repeat;
  height: 121px;  /* Das Bild der Spirale ist 122px hoch also wählen wir das auch als höhe für unseren Kopf. */
  padding: 0;/*5px 5px 5px 5px; /* 0 20px; */
  background-color: #fff;
  text-align:left;
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
}
#logo img{
	margin:5px;
}
#leftnav
{
float: left;
width: 200px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 220px;
/*border-left: 1px solid gray;*/
padding: 1em;

}

#footer
{
clear: both;
margin: 0;
padding: 4px  5px 3px 5px;
color: white;


}

#footer a { 
  color: white; /* Wegen des grauen Hintergrunds müssen in der Fusszeile auch die Links weiß dargestellt werden. */
} 
#footer a:visited { color: white; } /* Auch besuchte Links bleiben wegen des grauen Hintergrunds weiß. */

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
/* - Navigation - */
#navigation {
	padding-top:24px; /* Die Menüpunkte sollten etwas Abstand zum Kopfteil haben. */
	padding-bottom:24px; /* Die Menüpunkte sollten etwas Abstand zur Fusszeile haben. */
	line-height: 1.3em; /* Zeilenabstand wird vergrössert für bessere Trennung der "Menüpunkte". */
}

#navigation ul {
	clear: both;
	list-style: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
	padding: 0 4px 0 4px;
	margin: 0;
}

#navigation ul.menu-e1 {
	font-weight: bold; /* Text in der ersten Navigationsebene wird fett dargestellt */
}

#navigation ul.menu-e2 {
	font-weight: normal; /* Text in der zweiten Navigationsebene wird fett dargestellt */
	position: relative; /* 2. Navigationsebene wieder etwas nach oben schieben */
	top: -4px;
}

#navigation li a {
	display: block; 
	padding: 1px 0 1px 6px;
	margin-bottom: 4px;
	color: black; /* Auch Links werden im Navigationsmenü zunächst einmal schwarz... */
	text-decoration:none; /* ... und ohne Unterstreichung dargestellt. */
}
/* IE */
* html #navigation li a {
	margin-bottom: 2px;
}

/* Ab der 2. Navigationsebene kleinere Abstände */
#navigation li li a {
	padding-top:2px;
	padding-bottom: 2px;
	margin-bottom: 1px;
}
/* IE */
* html #navigation li li a {
	margin-bottom: 0px;
}

/* Einzüge links in der erster und zweiter Menüebene. */
#navigation li li a {
	padding-left: 15px;
}
#navigation li li li a {
	padding-left: 30px;
}

#navigation ul a:visited { color: #5E6167; } /* Besuchte Links werden grau. */
#navigation ul a:focus { text-decoration:underline; color:#71A1C5; } /* Beim "Durchsteppen" mit der Tabulator-Taste wird Link blau und unterstrichen. */
#navigation ul a:hover { text-decoration:underline; color:#71A1C5; } /* Beim "Maus-Über" wird Link blau und unterstrichen. */
#navigation ul a:active { text-decoration:underline; color:#71A1C5; } /* Beim Anlicken wird Link blau und unterstrichen. */

#navigation ul.menu-e1 a.selected {
   background-color: #71A1C5; /* Der selektierte Navigationspunkt wird blau hinterlegt. */
   color: white; /* Aufgrund des blauen Hintergrunds ist weißer Text leichter zu erkennen. */
}


/* - 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: 1em 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;
}