/* -- Allgemeines -- */
body {
 background: url() #9BD1E9; 
 color: #024888; /* Textfarbe */
 margin: 0;
 padding: 1%; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
 min-width: 800px; /* Bei weniger als ...px 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: #024888;
}

h1 { /* seitenüberschrift ganz groß */
 font-size: 1.84em;
 line-height: 2em;
 padding: 2px 0 5px 1%;
 font-weight: bold;
 margin: 0;
 color: #024888;
}

h2 { /* seitenüberschrift groß */
 font-size: 1.5em; 
 line-height: 2.0em;
 padding: 2px 0 5px 1%;
 font-weight: bold;
 margin: 0;
 color: #024888;
}

h3 { /* frei */
}

h4 { /* Copyright */
 font-size: 0.8em;
 line-height: 1.2em;
 margin: 0;
 color: #024888;
 font-weight:normal;
}

h5 { /* frei */
}

h6 { /* frei */
}


/* -- Layoutspezifisches -- */
#container { /* Ist dafür gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz außen am Fenster ist. */
 background: url() #FFF9EC;
 font-size: 0.87em; /* 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: 800px; /* Eine Begrenzung der Breite auf  ...px. */
 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. */
}

/* - Der Hauptinhaltsteil - */
#main {
 background: url()  1% 0;
 padding: 0 10px 10px 10px;  
 line-height: 1.5em; /* Zur besseren Lesbarkeit erhöhen wir die Linienhöhe. */
}


/* - Menü - */
#menu {
 /* width: 15%; */ /* 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: 15em; */ /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
 float: left; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifließt und nicht erst unten drunter anfängt. */
 padding: 0 0 20px 0; 
 margin: 0;
 font-size: 11px; 
 color: #024888;
}

#menu li {
 font-size: 1.2em;
 line-height: 1.3em;
 list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
 padding: 0 3px 0 2px;
 font-weight: bold;
}

#menu li a {
 text-decoration: none; 
 color: #024888;
}

#menu a:hover { 
 text-decoration: none;
 font-weight: bold;
 background-color: white; 
}

#menuzelle {
 width: 140px;
 border-right: 1px dotted #aaa;
}