/* -- Allgemeines -- */
body {
 background: white; /* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es k�nnte n�mlich sein dass man aus versehen f�r den Text die gleiche Farbe hat wie f�r den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen k�nnen. */
 color: black;
 margin: 0;
 padding: 1%; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
 min-width: 640px; /* 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, sans-serif ;
}
a { /* Alle unbesuchten Links bekommen eine leicht bl�uliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
 color: black; /*#0B4D8C;*/
 text-decoration: underline;
}
a:visited { /* Besuchte Links werden schwarz, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */
 color: black;
}
.skip { /* Da ein wichtiger Screenreader das display: none; auch f�lschlicherweise f�r sich versteht und nichts vorliest 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: -10000px;
}
h1 { /* Die �berschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
 font-size: 2em;
 line-height: 0.8em;
 padding: 20px 0 5px 0;
 margin: 0;
 border-bottom: 1px solid #aaa;
}
h1, h2, h3, h4, h5, h6 { /* Alle �berschriften bekommen eine besondere Farbe und da sie sehr gro� sind k�nnen wir es uns erlauben hier eine Schrift mit Serifen zu w�hlen. Wir spielen hier ein wenig mit Typographie, und entgegen dem Einheitsbrei auf vielen Seiten. */
 white-space: nowrap;
 color: #84b819; /* #6699CC;*/
/* font-family: Georgia, "Times New Roman", Times, serif; */
}
img { /* alle Bilder bekommen einen sch�nen Rahmen */
 border: solid 1px #aaa;
 padding: 1px;
 max-width: 95%; /* gute Browser machen ein zu gro�es Bild, welches das Design sprengen w�rde, funktioniert beim IE leider nicht */
}
.fleft { /* Sachen an denen der Text vorbeiflie�en soll werden 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;
}
p {
}
table {
 width: 100%;
 border-spacing: 0;
 border-collapse: collapse;
}
table#list {
 border-style: solid;
 border-color: #aaa;
 border-width: 0px;
}
tr {
}
tr#high {
 background: #F9F9F9;
}
th {
 color: #84b819; /*#6699CC; */
 background: #F0F0F0;
/* font-family: Georgia, "Times New Roman", Times, serif;*/
 font-size: 1em; /* 1.2em */
 padding-left: 2px;
 padding-right: 20px;
 text-align: left;
 vertical-align:top;
}
td {
 padding-left: 2px;
 padding-right: 20px;
 vertical-align:top;
}

/* -- Layoutspezifisches -- */
#container { /* Ist daf�r gedacht dass die vielen Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz au�en am Fenster ist. */
 padding: 0;
 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 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. F�r den IE gibt es in ielte.css einen Woraround. */
 margin: auto; /* Hiermit zentrieren wir unsere Seite */
}
/* - Der Hauptinhaltsteil - */
#main {
 padding: 0 32% 10px 0px; /* 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. */
 background: 100% 0 white;
 line-height: 1.5em; /* Zur besseren Lesbarkeit erh�hen wir die Linienh�he. */
 min-height: 420px;
}


.msg {
 color: #0000FF;
 background-color: #EEEEFF;
 padding: 4px;
 border-style: solid;
 border-color: #6666FF;
 border-width: thin;
}
.error {
 color: #FF0000;
 background-color: #FFEEEE;
 padding: 4px;
 border-style: solid;
 border-color: #FF6666;
 border-width: thin;
}

/* - Logo bzw. Kopf - */
#logo {
 background: url("../img/header.png") top center no-repeat white;
 height: 89px; /* Die H�he f�r unseren Kopf. */
 padding: 0 0;
 text-align: right;
 vertical-align: top;
 line-height: 160px;
 color: #aaa;
 font-size: 9px;
 overflow: hidden; /* Einzig der Mozilla k�nnte den Text unverh�ltnissm��ig zum Hintergrund ver�ndern. Damit dann wenigstens das Men� benutzbar bleibt schneiden wir alles was herausragt ab. */
 margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
}
#logo a {
 color: white; /* Die vorher eingestellte Farbe passt nicht um auch als Logofarbe zu dienen, deshalb w�hlen wir hier Wei�. */
 text-decoration: none;
}
#logo a span { /* Der letzte Buchstabe soll invertiert dargestellt werden. */
 color: black;
 background: silver;
 padding-right: 0.1em; /* damit das wei�e rechts und links genau so breit ist. */
 font-weight: bold;
}

/* - Men� - */
#menu {
 background: url("../img/menubar.png") repeat-x center #020202;
 padding: 5px 1%; /* 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. */
 color: #FFAA00;
}
#menu li {
 font-size: 1.2em;
 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; /* Hier ist das mit der Linkfarbe genau so, sie soll wei� sein. */
 text-decoration: none;
}
menu li a:before {
 /*content:"\00BB";*/
}

#menu li a.logout {
 color: red;/*#BBDDBB; /* Hier ist das mit der Linkfarbe genau so. */
 text-decoration: none;
 font-weight: bold;
}

/* - 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: 0px 0%;
 margin: 1% 0 1% 2%;
 background: white;
 /*border-left: 0px dotted #aaa; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
 border-bottom: 1px solid #aaa;
 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 */
 background: url("../img/menubar_gruen.png") repeat-x center #84b819;
 font-size: 1.2em;
/* font-family: Georgia, "Times New Roman", Times, serif;*/
 font-weight: bold;
 color: #FFFFFF;
 padding: 2px; /* 0.5em; */
 margin-top: 1em;
 border-top: 0px solid #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
}
#subnav dd { /* Die Unterpunkte der Subnavigation. */
 padding: 0.2em;
 margin: 0 0;
 border-left: 1px solid #aaa;
 border-right: 1px solid #aaa;
 border-bottom: 0px solid #aaa;
}
#subnav dd#end {
 border-bottom: 1px solid #aaa;
}
#subnav dd#sub {
 padding-left: 2em;
}
#subnav a {
 text-decoration: none;
}
subnav a:before {
 content:"\00BB";
}


#footer {
 width: 80%;
 margin: auto;
 padding-top: 2px;
 color: #555;
 text-align: center;
 border-top: 1px solid #aaa;
}
#footer a {
 color: #555;
}
.highlight {
 color: #FFB000;
 text-decoration: bold;
}


input[type=submit] {
	margin-top:8px;
	margin-bottom:8px;
    padding:5px 15px; 
    background:#84b819; 
    color: whitesmoke;
    font-weight: bold;
    border:0 none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); 
}


input[type=reset] {
	margin-top:8px;
	margin-bottom:8px;
    padding:5px 15px; 
    background:lightgrey; 
    color: black;
    font-weight: bold;
    border:0 none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6); 
}

button {
	margin-top:8px;
	margin-bottom:8px;
    padding:5px 15px; 
    background:lightgrey; 
    color: black;
    font-weight: bold;
    border:0 none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); 
}