/* -- Allgemeines -- */
body {
background: url(../img/bg27.jpg) #F8F8F8; background-attachment:fixed; background-repeat: repeat;
 color: black;
 margin: 0;
 padding: 1%;
 min-width: 640px; 
 font-size: 100.01%; 
 font-family: verdana, arial, helvetica, sans-serif ;
}
a {color: #465980; text-decoration: none; }
a:visited { color: #6699CC; }
.skip { 
 position: absolute;
 margin-left: -10000px;
}
h1 {
    font-size: 1.7em;
    line-height: 0.8em;
    padding: 20px 0 5px 5%;
    margin: 0;
    border-bottom: 1px dashed #aaa;
}
h2 {
    font-size: 1.3em;
    line-height: 0.0em;
    padding: 30px 0 5px 0%;
    margin: 0;
    border-bottom: 0px dashed #aaa;
}
h3 {
    font-size: 1.0em;
    line-height: 0.0em;
    padding: 30px 0 5px 0%;
    margin: 0;
    border-bottom: 0px dashed #aaa;
}
h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-family: Arial,Verdana,Helvetica;
}
img { /* alle Bilder bekommen einen Rahmen */
 border: solid 1px #aaa;
 padding: 1px;
 max-width: 95%; 
}
.fleft { 
 float: left;
 margin-top: 0em; 
 margin-bottom: 0em;
 margin-left: 0em;
 margin-right: 5px;
}
.fright {
 float: right;
 margin-bottom: 0em;
 margin-left: 1em;
 margin-right: 5px;
 padding: 1px;
}


/* -- Layout -- */
#container { 
 font-size: 0.8em; 
 max-width: 900px; 
 margin: auto; 
 border: 1px solid #000;
 border-top: 1px solid #000;
 background: white; 
background-image: url(../img/gra-sh1.jpg);
background-repeat: repeat-y;
}
#footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie #subnav, falls #subnav länger sein sollte. */
  padding: 0 30px;
}

/* - Logo bzw. Kopf - */
#logo {
 background: url(../img/gem-panorama3.jpg) 0 0 no-repeat black; 
 height: 64px; /* Das Bild ist 64px hoch also wählen wir das auch als höhe für unseren Kopf. */
 padding: 0 20px;
 text-align: right;
 line-height: 54px;
 font-size: 54px; 
 overflow: hidden; 
 letter-spacing: -3px; 
 margin: 0; 
}
#logo a {
 color: white; 
 text-decoration: none;
}
#logo a span { /* Der letzte Buchstabe soll invertiert dargestellt werden. */
 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: url(../img/redstrip.png) #990000;
 padding: 5px 1%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
 margin: 0;
 text-align: left;
 color: yellow; /* Hier deffinieren wir die Farbe des Menüpunktes welcher kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
}
#menu li {
 font-size: 0.8em;
 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 5px 0 7px;
 font-weight: bold;
}
#menu li a {
 color: white; /* Hier ist das mit der Linkfarbe genau so, sie soll weiß sein. */
 text-decoration: none;
}

/* - Menü2 - */
#menu2 { 
 background: url(../img/wechselschatten2.png) #287635;
 padding: 5px 2%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
 margin: 0;
 text-align: right;
 color: yellow; /* Hier deffinieren wir die Farbe des Menüpunktes welcher kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
}
#menu2 li {
 font-size: 0.8em;
 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;
}
#menu2 li a {
 color: white; /* Hier ist das mit der Linkfarbe genau so, sie soll weiß sein. */
 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. */
 height: 100%;
 background: #efefef;
 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: 60px 1%;
 margin: 1%;
 border-left: 1px solid #000; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
 border-right: 1px solid #000;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 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.0em;
 font-family: verdana, arial, helvetica, sans-serif ;
 padding: 0.5em;
 margin-top: 1.5em;
 border-top: 1px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */

}
#subnav dd { /* Die Unterpunkte der Subnavigation. */
 font-size: 0.9em;
 font-family: verdana, arial, helvetica, sans-serif ;
 padding: 0;
 margin: 0.0em 0;
}

/* - Hier Hauptinhaltsteil - */
#main {
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif ;
padding: 0 10% 10px 10px; /* 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 Columnen Eindruck entsteht. */
 line-height: 1.5em; /* Zur besseren Lesbarkeit erhöhen wir die Linienhöhe. */
}