/* ==========================================================================
   Puppenspieler - was in beiden Welten gilt
   ==========================================================================

   Hier steht nur, was epochenunabhaengig ist: Zuruecksetzen, Raster,
   Formulare, Tabellen. Die Farben und die Anmutung kommen aus msn.css
   oder aol.css.

   IN BEIDEN WELTEN VERBOTEN

   Beide Clients bringen eine Internet-Explorer-Maschine mit - MSN
   Explorer eine IE6-Fassung, AOL 8 eine noch aeltere. Deshalb kein
   Flexbox, kein Grid, keine Pseudoklassen, kein border-radius, kein
   rgba(), kein min-height. Floats und Tabellen.
   ========================================================================== */

body {
    margin: 0;
    padding: 0;
    text-align: center;          /* IE5/6 zentriert nur so */
}

#rahmen {
    width: 760px;
    margin: 0 auto;
    text-align: left;
}

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

h1, h2, h3 { margin: 0; font-weight: bold; }
p          { margin: 0 0 10px 0; line-height: 1.55; }
img        { border: 0; }

/* --- Mittelteil, in beiden Welten gleich aufgebaut ---------------------- */

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

/* --- Formulare ---------------------------------------------------------- */

input, select, textarea {
    font-size: 11px;
    padding: 3px;
}

/* --- Tabellen im Inhalt -------------------------------------------------- */

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

table.tabelle th,
table.tabelle td {
    padding: 4px 8px;
    text-align: left;
}

/* --- Druck: in beiden Welten nur der Inhalt ------------------------------ */

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

/* --- Betriebsstatus ------------------------------------------------------
   Die Farben tragen hier ausnahmsweise Bedeutung, nicht Anmutung, und
   gelten deshalb in beiden Welten gleich. Das Wort steht trotzdem
   daneben: Farbe allein ist keine Information.
   ------------------------------------------------------------------------ */

td.z-gut        { color: #16683A; font-weight: bold; }
td.z-gestoert   { color: #A82A2A; font-weight: bold; }
td.z-aus        { color: #666666; font-weight: bold; }
td.z-aufbau     { color: #9A6608; font-weight: bold; }
td.z-unbekannt  { color: #666666; }

/* :last-child kennt der IE6 nicht - die Breiten stehen deshalb an den
   Kopfzellen, und die Spalten bekommen Klassen statt Positionen. */
table#statusliste th.sp-dienst  { width: 44%; }
table#statusliste th.sp-zustand { width: 16%; }

/* --- Fliesstext aus Markdown ---------------------------------------------
   Listen und Code kommen aus den Inhaltsdateien und sehen in jeder Welt
   gleich aufgebaut aus. Die Farben der Rahmen stehen in msn.css und
   aol.css - das Geruest gehoert hierher.
   ------------------------------------------------------------------------ */

#inhalt ul, #inhalt ol { margin: 0 0 12px 0; padding-left: 24px; }
#inhalt li             { margin-bottom: 4px; line-height: 1.55; }

#inhalt pre {
    margin: 0 0 12px 0;
    padding: 8px 10px;
    overflow: auto;
    font-family: "Courier New", Courier, monospace;
}

#inhalt code { font-family: "Courier New", Courier, monospace; }