/*
 * todo:
 *   - ich bin auch nicht über die Festbreite von 1000px (wg. Grafikelementen
 *     in Kopf und Fuß) glücklich
 */


/* Standardeinstellungen für die Seite: */
body {
    font-family:       Times;
    color:             black;
    background-image:  url(background.jpg);
    min-width:         40em;
}

/* gemeinsamer Kopf aller Seiten: */
div.head {
    width:                1000px;
    height:               200px;
    margin:               auto;
    background-color:     white;
    background-image:     url(Kopf.jpeg);
    background-repeat:    no-repeat;
    background-position:  top;
}

/* gemeinsamer Fuß aller Seiten: */
div.footer {
    width:                1000px;
    min-height:           50px;
    margin:               auto;
    margin-top:           0;
    background-color:     white;
    background-image:     url(BodenWelle.gif);
    background-repeat:    no-repeat;
    background-position:  bottom;
    text-indent:          1em;
}

/* übergeordnetes div für menü + eigentliche Inhalte */
div.body {
    margin:            auto;
    border:            0;
    padding:           0;
    width:             1000px;
    min-height:        70ex;    /* Mindesthöhe um zu garantieren, dass Menü und Fuß nicht überlappen */
    background-color:  white;
}



/* Stil der Menüelemente:
 *
 * div.menu ist der Container für das komplette Menü.
 * p.menu kontrolliert die einzelnen Menüelemente
 * a.menu wird benötigt um die Links im Menü stilistisch zu kontrollieren.
 ****************************************************************************/
div.menu {
    /* Menü auf die linke Seite: */
    float:             left;
    /* Breite des Menüs: vgl. margin-left von div.content */
    width:             200px;
}
p.menu {
    /* Wir wollen eine kleine Linie zur Abtrennung von Menüpunkten: */
    background-image:     url(line.gif);
    background-repeat:    no-repeat;
    background-position:  1em bottom;
    /* Text-Einrückung genauso wie die Position der Linie: */
    text-indent:          1em;
}
/* Keine Unterstriche und Farbe für Links im Menü und Untermenü: */
a.menu {
    /* Die Links im Menü sollen keine zusätzlichen Unterstriche haben: */
    text-decoration:      none;
    /* Links immer schwarz egal ob Seite schon besucht, ... */
    color:                black;
    /* Und zur Hervorhebung fetter Schriftsatz: */
    font-weight:          bold;
}


/* Der Stil für den eigentlichen Inhalt:
 *
 * Dieses div wird in header.php für alle Seiten gesetzt und in footer.php
 * wieder geschlossen. Zur Zeit wird nur der linke Rand an das Menü angepasst.
 ****************************************************************************/
div.content {
    margin-left:     200px;    /* entspricht der Menübreite! */
    margin-right:     15px;    /* ein kleiner Abstand zum rechten Seitenrand */
}

/* Der Stil für die Kopf-/Titelzeile:
 *
 * Evtl. sollte man den Stil auch auf div umbauen?
 ****************************************************************************/
p.heading {
    /* Fette Schrift zur Betonung: */
    font-weight:          bold;
    /* Der Titel soll außerdem durch eine Linie abgeschlossen werden: */
    background-image:     url(linelong.gif);
    background-repeat:    no-repeat;
    background-position:  left bottom;
    /* Den Titeltext um 15px einrücken: */
    text-indent:          15px;
}


/* Der Stil für den Inhalt ohne Kopf-/Titelzeile:
 *
 * Dieses div muss für jede Seite von Hand gesetzt werden.
 ****************************************************************************/
div.contentbody {
    /* Eine zusätzliche Einrückung um den Text im Body am Text im Seitentitel
     * auszurichten:                                                         */
    padding-left:         15px;
    padding-right:        15px;
    /* Ein kleiner Abstand nach oben und nach unten: */
    padding-top:           2px;
    padding-bottom:        2px;
    /* Text im Blocksatz ausrichten: */
    text-align:           justify;
}


/* Ein Stil um zusammengehörende Inhalte optisch einzufassen und von anderen
 * Inhalten zu trennen.
 ****************************************************************************/
div.item {
    /* Ein heller aber erkennbarer Hintergrund für den optischen Effekt */
    background-color:  WhiteSmoke;
    /* Die Box mit dem Hintergrund nicht am Titeltext, sondern an der Linie
     * im Titel ausrichten: */
    margin-left:      -15px;
    margin-right:     -15px;
    /* Für den Text müssen wir dafür wieder eine Korrektur einbauen: */
    padding-left:      15px;
    padding-right:     15px;
    /* Und auch kleine Abstände zum oberen und unteren Rand der Box einbauen: */
    padding-top:        2px;
    padding-bottom:     2px;
}





a.impressum {
    text-decoration:  none;
    color:            black;
    font-weight:      normal;
    font-size:        small;
    position:         relative;
    top:              20px;
}


/* Formatierung für Artikel unter aktuelles: */
/* Artikelkopf:  */
div.arthead {
    background-color:     LightGrey;
    padding-left:         15px;
    padding-right:        15px;
}
p.title {
    font-weight:          bold;
    font-size:            x-large;
}
div.subtitle {
    font-weight:          bold;
    font-size:            large;
}


p.emphasize {
    text-align:        center;
    font-weight:       bold;
    border:            1px;
    border-color:      gray;
    border-style:      solid;
}