/* ==========================================================================
   MSN Explorer 9 - Zeitschnitt 2004
   ==========================================================================

   Setzt gemeinsam.css voraus - dort steht das Geruest, hier die
   Anmutung.

       #1F5FA9   Blau der Kopfzeile und der Verweise
       #D6E5F5   Blau der Kastenkoepfe
       #EEF4FB   Hintergrund
       #A8C4E4   Rahmen
       #E87511   Orange des Schmetterlings, der einzige Akzent
       #333333   Fließtext

   Das Orange kommt genau einmal vor: am Knopf auf der Startseite.
   Alles andere bleibt ruhig - das war schon 2004 der Unterschied
   zwischen MSN und AOL.
   ========================================================================== */

/* --- Grundlage ---------------------------------------------------------- */

body {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #333333;
    background-color: #EEF4FB;
    margin: 0;
    padding: 0;
    text-align: center;          /* IE5/6 zentriert nur so */
}

#rahmen {
    width: 760px;
    margin: 0 auto;
    text-align: left;            /* die Zentrierung wieder aufheben */
    background-color: #FFFFFF;
    border-left: 1px solid #A8C4E4;
    border-right: 1px solid #A8C4E4;
}

.frei {
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

a {
    color: #1F5FA9;
    text-decoration: underline;
}

a:hover {
    color: #E87511;
}

p {
    margin: 0 0 10px 0;
    line-height: 1.55;
}

h1, h2, h3 {
    font-weight: bold;
    margin: 0;
}


/* --- Kopfbalken ---------------------------------------------------------
   Der Verlauf kommt aus einem 1 Pixel breiten Bild, das sich waagerecht
   wiederholt. Ein CSS-Verlauf waere im IE6 nichts.
   ----------------------------------------------------------------------- */

#kopf {
    background-color: #1F5FA9;
    background-image: url(../Images/kopfverlauf.png);
    background-repeat: repeat-x;
    background-position: left top;
    height: 64px;
    padding: 0 16px;
}

#marke {
    float: left;
    display: block;
    width: 84px;
    height: 64px;
    text-decoration: none;
}

#markename {
    display: block;
    padding-top: 22px;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: -1px;
}

#titel {
    float: left;
    padding-top: 14px;
    padding-left: 10px;
}

#titel h1 {
    font-size: 19px;
    color: #FFFFFF;
    font-weight: normal;
}

#titel p {
    font-size: 11px;
    color: #C8DCF2;
    margin: 2px 0 0 0;
}


/* --- Waagerechte Navigation --------------------------------------------- */

#balken {
    background-color: #D6E5F5;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #A8C4E4;
    padding: 0 16px;
}

ul#hauptnavi {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#hauptnavi li {
    float: left;
    margin: 0;
    padding: 0;
}

ul#hauptnavi li a {
    display: block;
    padding: 6px 14px;
    color: #1F5FA9;
    text-decoration: none;
    border-right: 1px solid #BCD4EE;
}

ul#hauptnavi li a:hover {
    background-color: #C2DAF2;
    color: #14406F;
}

ul#hauptnavi li.hier a {
    background-color: #FFFFFF;
    font-weight: bold;
    color: #14406F;
}


/* --- Mittelteil --------------------------------------------------------- */

#mitte {
    padding: 16px;
}

#spalte {
    float: left;
    width: 172px;
}

#inhalt {
    float: left;
    width: 540px;
    padding-left: 16px;
}

#inhalt h2 {
    font-size: 16px;
    color: #1F5FA9;
    margin-bottom: 10px;
}

#inhalt h3 {
    font-size: 12px;
    color: #14406F;
    margin: 16px 0 6px 0;
}

p.unterzeile {
    color: #777777;
    margin-top: -6px;
    margin-bottom: 14px;
}


/* --- Kaesten in der linken Spalte --------------------------------------- */

.kasten {
    border: 1px solid #A8C4E4;
    margin-bottom: 12px;
}

.kastenkopf {
    background-color: #D6E5F5;
    border-bottom: 1px solid #A8C4E4;
    padding: 4px 8px;
    font-weight: bold;
    color: #1F5FA9;
}

ul.kastenliste {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

ul.kastenliste li {
    margin: 0;
    padding: 0;
}

ul.kastenliste li a {
    display: block;
    padding: 3px 8px;
    text-decoration: none;
}

ul.kastenliste li a:hover {
    background-color: #EEF4FB;
    text-decoration: underline;
}

ul.kastenliste li.hier a {
    font-weight: bold;
    color: #14406F;
}


/* --- Aufmacher auf der Startseite ---------------------------------------
   Die eine laute Stelle. Der Knopf traegt das Orange, sonst nichts.
   ----------------------------------------------------------------------- */

#aufmacher {
    border: 1px solid #A8C4E4;
    background-color: #F7FAFE;
    padding: 18px 20px 14px 20px;
    margin-bottom: 16px;
}

#aufmacher h2 {
    font-size: 20px;
    color: #14406F;
    margin-bottom: 8px;
}

#aufmacher p {
    width: 420px;                /* Zeilenlaenge unter 80 Zeichen halten */
}

p.tat {
    margin: 14px 0 0 0;
}

a.knopf {
    display: block;
    float: left;
    padding: 7px 20px;
    background-color: #E87511;
    border: 1px solid #C45F09;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

a.knopf:hover {
    background-color: #F58622;
    color: #FFFFFF;
}


/* --- Die drei Kacheln ---------------------------------------------------
   Als Tabelle, damit die Spalten auch im IE6 gleich hoch sind. Mit
   Floats waeren sie es nicht, und min-height hilft dort nicht.
   ----------------------------------------------------------------------- */

table#dreier {
    width: 100%;
    margin-bottom: 16px;
}

td.kachel {
    width: 32%;
    border: 1px solid #A8C4E4;
    background-color: #FFFFFF;
    padding: 12px;
    vertical-align: top;
}

td.luecke {
    width: 2%;
}

td.kachel h3 {
    margin-top: 0;
    font-size: 12px;
    color: #1F5FA9;
}

td.kachel p {
    margin-bottom: 8px;
}


/* --- Fusszeile ---------------------------------------------------------- */

#fuss {
    border-top: 1px solid #A8C4E4;
    background-color: #F7FAFE;
    padding: 12px 16px;
    color: #777777;
}

#fuss p {
    margin: 0 0 4px 0;
}


/* --- Inhaltselemente aus dem Backend ------------------------------------ */

.ce-bild {
    border: 1px solid #A8C4E4;
    padding: 3px;
    background-color: #FFFFFF;
}

table.tabelle {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 12px;
}

table.tabelle th {
    background-color: #D6E5F5;
    border: 1px solid #A8C4E4;
    padding: 4px 8px;
    text-align: left;
    color: #1F5FA9;
}

table.tabelle td {
    border: 1px solid #DCE8F6;
    padding: 4px 8px;
}


/* --- Formulare ----------------------------------------------------------
   Kontoanlage und Kennwortaenderung laufen hierueber.
   ----------------------------------------------------------------------- */

input, select, textarea {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    border: 1px solid #A8C4E4;
    padding: 3px;
}

input.abschicken {
    background-color: #D6E5F5;
    border: 1px solid #A8C4E4;
    padding: 4px 16px;
    font-weight: bold;
    color: #1F5FA9;
    cursor: pointer;
}

.hinweis {
    border: 1px solid #A8C4E4;
    background-color: #F7FAFE;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.fehler {
    border: 1px solid #E0A0A8;
    background-color: #FDF3F4;
    padding: 8px 12px;
    margin-bottom: 12px;
    color: #C8102E;
}


/* --- Druck --------------------------------------------------------------- */

@media print {
    #kopf, #balken, #spalte, #fuss { display: none; }
    #rahmen { width: auto; border: 0; }
    #inhalt { float: none; width: auto; padding: 0; }
    body { background-color: #FFFFFF; }
}