/*
***

***
 */

body {
    margin: 0; padding: 0;
    font: 100% georgia, serif;
    background: #000;
    text-align: center;
}
/*  background: #222222 antrazit - Hintergrund links und rechts von Container  
    background: #fff  weiss 
    background: #000 schwarz */

a {
    color: #fff; text-decoration: none;
}
/* 
    color: #837; text-decoration: none; lila orig
    color: #222222; text-decoration: none;
	color: #222222  silver
	color: #fff	white
*/

code {
    font: 14px consolas, 'courier new', monospace;
    color: #fff;
}
/*     color: #900;  Schriftfarbe Code  */

pre {
    overflow: auto; padding: 1em;
    background: #000;
    font-size: 1em;
}
/*     
	background: #e8ebd9; 
    background: #222222;
*/

blockquote {
    padding: 1em;
    margin: 1em 1em 1em 0;
    border-left: 1em solid #222222;
    color: #fff; background: url(images/kopfbereich.gif) repeat-x;
}

/*Allgemeingueltige Klassen*/

.bild-links { /* Diese Klasse vergeben Sie einem Bild welches links ausgerichtet werden soll */
    float: left;
    margin: .1em 1em .4em 0;
}

.bild-rechts { /* Diese Klasse vergeben Sie einem Bild welches rechts ausgerichtet werden soll */
    float: right;
    margin: .1em 0 .4em 1em;
}

.bild-abstand img {
    margin: 0 .5em .5em 0; /* Bilder innerhalb dieses Elements bekommen zusaetzlichen Abstand */
}

.clearer {
    clear: both; /* hebt die vorhergehenden Floats auf */
}


/*
* Hauptbereich #container
 */
#container {
    width: 55em; min-width: 880px; max-width: 98%; /* Ermoeglicht auch bei den aelteren Browsern das Zoomen. */
    border: .375em solid #222222;
    border-top: none;
    margin: 0 auto;
    text-align: left;
}
/* border: .375em solid #c6cca1;  */

/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
 */

#kopfbereich {
    padding: 3em;
    background: #222222 url(images/kopfbereich.gif) repeat-x;
    color: #fff;
}
/*     
color: #333; Schriftfarbe grau
color: #fff; Schriftfarbe weiss
 */

#kopfbereich h1 {
    margin: 0; padding: 0;
}
#kopfbereich h2 {
    margin: 0; padding: 0;
    font-size: 1em; font-weight: normal;
    color: #999999;
}
/* 
hier gehts um den Untertitel:
    	color: #555; 
    	color: #999999;
    	color: #9ACD31; yellowgreen
*/


/*
* Hauptbereich: #container
** Unterbereich: #navigation
 */

#navigation {
    padding: 0 3em;
    background: #222222 url(images/navigation.gif) repeat-x;
    color: #fff;
    line-height: 2.5em;
}
/* 
Achtung!
hier passiert das, was ich lange gesucht habe!
Mit background: #837 (Orig) in
    background: #837 url(images/navigation.gif) repeat-x;
wird im navi diese Farbe vorgeladen!
Ich mache hier (!!!):
	background: #222222
*/

#navigation ul {
    list-style: none; margin: 0; padding: 0;
    height: 2.5em;
}
#navigation li {
  display: inline;
}
/*   color: #fff  Schrift Navigation weiss  
    color: #CE2B17; Schrift Navigation rot
*/
#navigation ul li a {
    color: #fff;
    float: left;
    margin-right: 1.2em;
}
#navigation ul li a:hover, #navigation ul li a.aktiv {
    background: url(images/pfeil.gif) no-repeat center bottom;
    /* Sowohl der Hover- bzw. der Mouseover-Effekt aus auch der aktive Link in der Navi bekommen die Pfeil-Grafik zugewiesen */
}


/*
* Hauptbereich: #container
** Unterbereich: #inhalt
 */

#inhalt {
    padding: 3em; width: 49em;
    background: #222222;
    color: #999;
    clear: left;
}
/* 	color: #444; Schriftfarbe schwarz 
	color: #999; Schriftfarbe grau 
	color: #fff; Schriftfarbe weiss
	background: #fff; Hintergrund weiss
	background: #000; Hintergrund schwarz
	background: #222222; Hintergrund antrazit
*/


#inhalt h3 {
    margin: 0 0 1em 0;
    font-size: 1.125em;
}

/*
* Hauptbereich: #container
** Unterbereich: #inhalt
*** Abschnitt: #inhalt-innen
 */

#inhalt-innen {
    font-size: .9375em;
    float: left; width: 38em;
}
#inhalt-innen h4 {
    margin: 0 0 .5em 0;
    font-size: 1.133em;
    font-variant: small-caps; /* Mit dieser deklaration werden sog. Kapitaelchen erzeugt */
    font-weight: normal;
    border-bottom: 1px dotted #222222;
}
/*     border-bottom: 1px dotted #c6cca1; */

#inhalt-innen h5 {
    margin: 0 0 .5em 0;
    font-size: 1em;  font-weight: normal; font-variant: small-caps;
}

#inhalt-innen img {
    border: .2666em solid #222222;
    padding: .4em;
    width: 10em;
}
/*     border: .2666em solid #c6cca1; */

#inhalt-innen a {
    text-decoration: underline;
}
#inhalt a:hover {
    text-decoration: none;
}

#inhalt p, #inhalt ul, #inhalt ol {
    margin-top: 0; margin-bottom: 1em;
}


/*
* Hauptbereich: #container
** Unterbereich: #sidebar
 */

#sidebar {
    font-size: .9375em;
    float: right;
    width: 11.333em;
}

#sidebar h4 {
    margin: 0 0 .5em 0;
    font-size: 1.133em;
    font-variant: small-caps; /* Mit dieser deklaration werden sog. Kapitaelchen erzeugt */
    font-weight: normal;
    border-bottom: 1px dotted #222222;
}
/*     border-bottom: 1px dotted #676464; Dunkelgrau */

#sidebar img {
    border: .2666em solid #222222;
    padding: .4em;
    width: 10em;
}
/*      

    border: .2666em solid #222222; Rahmen unsichtbar (wie Hintergrund) 
       
    border: .2666em solid #A9A9A9; Dark Gray
    border: .2666em solid #D3D3D3;  Light Gray
	border: .2666em solid #F0F0F0; Hellgrau 
    border: .2666em solid #FF0000; Rahmen Rot
    border: .2666em solid #fff; Rahmen weiss
    border: .2666em solid #00FF00; Rahmen grün
    border: .2666em solid #000; Rahmen schwarz
    border: .2666em solid #FFA500; Rahmen orange
*/


/*
* Hauptbereich: #container
** Unterbereich: #footer
 */

 #footer {
     clear: both;
     padding: 0.5em 3em; margin-top: .375em;
     background: #fff url(images/footer.gif) repeat-x;
     font-size: .9375em;
     color: #999999;
}
/* Schriftfarbe footer
     color: #F0F0F0;	grau
     color: #fff; weiss
     Höhe und oberer Abstand footer
         padding: 1.5em 3em; margin-top: .375em;
*/

#footer p {
    margin: 1px 0;
}

#footer a:hover {
    text-decoration: underline;
}