/* ==========================================================================
   Der Auswahlschirm - Puppenspieler-Gestaltung
   ==========================================================================

   Diese Seite gehoert keiner Epoche an - sie fuehrt zu ihnen. Deshalb
   traegt sie als einzige die eigene Marke: Marionettenkreuz ueber der
   Weltkugel, darunter der Schriftzug.

   Die Farben kommen aus dem Logo, nicht umgekehrt:

       #0E1A36   Tiefblau, der Grund
       #1A3466   Blau, Kaesten und Trennendes
       #4E8ED6   Hellblau, die Leitfarbe
       #F5F8FC   Weiss, Ueberschriften
       #96AAC4   Graublau, Fließtext

   Die Epochenfarben bleiben bei den Kacheln: Orange fuer MSN, Gelb fuer
   AOL. Sie sagen, wohin es geht - die Marke sagt, wo man ist.

   IE-VORBEHALT

   Erreichbar ist diese Seite auch aus MSN Explorer (IE6) und AOL 8
   (noch aelter). Also kein Flexbox, kein Grid, kein border-radius,
   kein rgba(), kein Schatten. Floats und Tabellen. Die Marke ist ein
   PNG mit eingebackenem Grund - Alpha zeichnet der IE6 als grauen
   Kasten.
   ========================================================================== */

body {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    color: #96AAC4;
    background-color: #0E1A36;
}

#rahmen { width: 700px; }

a { text-decoration: none; }


/* --- Kopf: Marke, Schriftzug, Zeile --------------------------------------
   Die Trennlinie unter dem Kopf ist dieselbe wie unten am Banner des
   Installers. Sie haelt beides zusammen.
   ------------------------------------------------------------------------ */

#start {
    padding: 48px 0 30px 0;
    text-align: center;
}

#start img.marke {
    display: block;
    margin: 0 auto 14px auto;
    width: 112px;
    height: 112px;
}

#start h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: bold;
    color: #F5F8FC;
    letter-spacing: 0;
    margin: 0 0 12px 0;
}

#start p.zeile {
    color: #7F93AE;
    font-size: 13px;
    margin: 0;
}

#strich {
    height: 3px;
    font-size: 0;
    line-height: 0;
    background-color: #4E8ED6;
    margin-bottom: 34px;
}


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

table#wahl {
    width: 700px;
    border-collapse: separate;
    border-spacing: 0;
}

table#wahl td.feld  { width: 336px; vertical-align: top; }
table#wahl td.spalt { width: 28px; }

a.welt {
    display: block;
    padding: 26px 26px 22px 26px;
    border: 1px solid #26396B;
    background-color: #16244A;
    color: #96AAC4;
    height: 178px;
}

a.welt .jahr {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

a.welt .name {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: bold;
    color: #F5F8FC;
    margin-bottom: 8px;
}

a.welt .was {
    display: block;
    color: #8599B4;
    line-height: 1.6;
    margin-bottom: 16px;
}

a.welt .los {
    display: block;
    font-weight: bold;
}

a.welt:hover { background-color: #1B2C57; }


/* --- MSN: Himmelblau und Orange ------------------------------------------ */

a#msn            { border-color: #1F5FA9; }
a#msn .jahr      { color: #6B9BD8; }
a#msn .los       { color: #E87511; }
a#msn:hover      { border-color: #60AAEC; }


/* --- AOL: Dunkelblau und Gelb -------------------------------------------- */

a#aol            { border-color: #1B3F8B; }
a#aol .jahr      { color: #8EA2CC; }
a#aol .los       { color: #FFCC00; }
a#aol:hover      { border-color: #D6A460; }


/* --- Fuss ---------------------------------------------------------------- */

#fuss {
    padding: 38px 0 32px 0;
    text-align: center;
    color: #5E718D;
    font-size: 11px;
    border-top: 1px solid #1A3466;
    margin-top: 40px;
}

#fuss a       { color: #8599B4; text-decoration: underline; }
#fuss a:hover { color: #F5F8FC; }
#fuss p       { margin: 0 0 6px 0; }