/*
***
 ***
 */

body {
    margin: 0; padding: 0;
    font: 100% georgia, serif;
    background: #dce3b3;
    text-align: center;
}

a {
    color: #837; text-decoration: none;
}

code {
    font: 14px consolas, 'courier new', monospace;
    color: #900;
}

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

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

/*Allgemeingültige 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 #c6cca1;
    border-top: none;
    margin: 0 auto;
    text-align: left;
}


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

#kopfbereich {
    padding: 3em;
    background: #fff url(images/kopfbereich.gif) repeat-x;
    color: #333;
}
#kopfbereich h1 {
    margin: 0; padding: 0;
}
#kopfbereich h2 {
    margin: 0; padding: 0;
    font-size: 1em; font-weight: normal;
    color: #555;
}


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

#navigation {
    padding: 0 3em;
    background: #837 url(images/navigation.gif) repeat-x;
    color: #fff;
    line-height: 2.5em;
}

#navigation ul {
    list-style: none; margin: 0; padding: 0;
    height: 2.5em;
}
#navigation li {
  display: inline;
}
#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: #fff;
    color: #444;
    clear: left;
}

#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 #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 #c6cca1;
    padding: .4em;
    width: 10em;
}

#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 #c6cca1;
}

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


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

 #footer {
     clear: both;
     padding: 1.5em 3em; margin-top: .375em;
     background: #fff url(images/kopfbereich.gif) repeat-x;
     font-size: .9375em;
}

#footer p {
    margin: 1px 0;
}

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