/* Style sheet for MCFA. */

/*
 * Der Hintergrund einer normalen Seite ist belegt mit den drei Farben
 * unseres Logos. Es wird sichergestellt, dass die schwarzen Buchstaben
 * nicht auf dem schwarzen Teil des Hintergrundes zu liegen kommen.
 */
body.mcfa { 
  background:  white url(/bg.gif) repeat-y;
  color:       black;
  margin-left: 22px;
}

/*
 * Das Layout einer schlichten Seite ist genau dies: schlicht...
 */
body.schlicht { 
  background:  white;
  color:       black;
}

/*
 * Die Ueberschriften sind in drei verschiedenen Klassen definiert,
 * deren Namen auf die Groesse des benutzen MCFA-Logos hindeuten.
 * In allen Faellen erscheint der Text mittig rechts neben dem Logo.
 */
h1.mcfa144 {
  background: url(/logos/mcfa144-red.gif) no-repeat top left;
  height:     89px; /*  144 ("echte hoehe") - 55 (padding-top) */
  padding:    55px 0 0 150px;
  margin:     0 0 0 -2px;
}
h2.mcfa110 {
  background: url(/logos/mcfa110-red.gif) no-repeat 15px 0px;
  height:     68px; /*  110 ("echte hoehe") - 42 (padding-top) */
  padding:    42px 0px 0px 150px;
  margin-top: 0px;
}
h2.mcfa80 {
  background: url(/logos/mcfa80-red.gif) no-repeat 27px 0px;
  height:     52px; /*  80 ("echte hoehe") - 28 (padding-top) */
  padding:    28px 0px 0px 150px;
  margin-top: 0px;
}

/*
 * Adressen sehen besser aus, wenn sie ein wenig eingerueckt sind...
 */
address {
  margin-left: 40px;
  font-style:  italic;
}

/*
 * Bitte keinen Rahmen um interaktive Bilder anzeigen...
 */
img {
  border: none;
}

/*
 * Zitate sehen besser aus, wenn sie kursiv gedruckt werden...
 */
q {
  font-style: italic;
}

/*
 * Die Inschriften von Gedenksteinen, wie sie besonders auf
 * den Seiten der Stattfahrt gern dargestellt werden.
 */
p.inschrift {
  border:       2px ridge white;
  background:   gray url(/stattfahrt/paper.gif);
  color:        black;
  margin-left:  12%;
  margin-right: 12%;
  font-weight:  bold;
  text-align:   center;
  padding:      10px;
}

/*
 * Gruppenregeln sehen huebscher aus, wenn zwischen
 * den einzelnen "Geboten" etwas Luft ist.
 */
ol.regeln li {
  margin-top: 10px;
}

/*
 * die letzte Aenderung wird auffaellig in rot auf gelb dargestellt.
 */
p.lastEdit {
  text-align:   right;
  margin-right: 20px;
  font-family:  Helvetica, sans-serif;
  font-size:    100%;
}
p.lastEdit span {
  color:      yellow;
  background: red;
}
p.lastEdit span a {
  color:       white;
  background:  red;
  font-weight: bold;
}

/*
 * Das Kleingedruckte soll auch so aussehen...
 */
p.kleingedruckt {
  font-size: smaller;
}

/*
 * Bilder mit einem Rahmen darstellen.
 */
.gerahmt {
  padding:             4px;
  border:              1px solid;
  border-top-color:    #d9e0e6;
  border-left-color:   #d9e0e6;
  border-right-color:  #c8cdd2;
  border-bottom-color: #c8cdd2;
  background:          #f8f8f8;
  color:               black;
}

/*
 * Den Hinweis auf die nicht vorhandenen Google-Karte
 * etwas dezent untermalen.
 */
.noGoogleMap {
  background: yellow;
  color:      blue;
}

/*
 * Ein fliessendes Objekt (z.B. ein Bild) kann entweder
 * rechts, links oder mittig im Text stehen.
 */
.rechts {
  float:       right;
  clear:       right;
  margin-left: 10px;
}
.links {
  float:        left;
  clear:        left;
  margin-right: 10px;
}
.zentriert {
  text-align: center;
}

div.bild_text {
  font-size:  smaller;
  text-align: center;
}

/*
 * Die Liste der "Auszeichnungen": XHTML, Bobby, ...
 */
ul.logos {
  padding-left: 0;
}
ul.logos li {
  float:       left;
  list-style:  none;
  margin-left: 4px;
}

/*
 * Hier kommen jetzt die Regeln fuer das zweispaltige Layout
 * mit der Navigationsleiste am linken roten Rand.
 */
.inhalt {
  margin-left: 150px;
}
.navigation h2 {
  font-size: 100%;
}
.navigation ul {
  font-size:  70%;
  list-style: none;
  padding:    0;
  margin:     0;
}
.navigation a {
  display:       block;
  width:         85px;
  height:        85px;
  position:      relative;
  border-top:    3px solid #f7f7f7;
  border-left:   3px solid #eee;
  border-bottom: 3px solid black;
  border-right:  3px solid black;
  margin:        5px 22px;
  overflow:      hidden;
}
.navigation a span {
  position:   absolute;
  width:      100%;
  height:     100%;
  top:        0;
  left:       0;
  background: no-repeat left top;
}
.navigation a span.home {
  background-image: url(/buttons/home.gif);
}
.navigation a span.prev {
  background-image: url(/buttons/prev.gif);
}
.navigation a span.next {
  background-image: url(/buttons/next.gif);
}
.navigation a span.himmelfahrt {
  background-image: url(/buttons/himmelfahrt.gif);
}
.navigation a span.stattfahrt {
  background-image: url(/buttons/stattfahrt.gif);
}
.navigation a span.berlin-umgebung {
  background-image: url(/buttons/berlin-umgebung.gif);
}
.navigation a span.deutschland {
  background-image: url(/buttons/deutschland.gif);
}

/*
 * Die fuer alle Browser vertraegliche Variante (ohne position: fixed).
 */
.navigation {
  left:       22px;
  top:        150px;
  border-top: 2px solid #ddd;
  padding:    15px 0 0 0;    
  width:      139px;
  text-align: center;
  /*
   * Ab hier wird es fuer kompatible Browser gleich ueberdefiniert.
   */
  position:      absolute;
  margin-bottom: -20px;
}
/*
 * Die folgende Definition wird durch den untergeordneten
 * Selektor > vor dem Explorer versteckt.
 */
.mcfa>.navigation {
  position:   fixed;
}

/*
 * Hier kommt ein Trick, der dafuer sorgen soll, dass
 * ein Link moeglichst wie normaler Text aussieht.
 */
a.unecht {
  text-decoration: none;
  background:      white;
  color:           black;
}

/*
 * Hier kommen jetzt die Regeln fuer das Layout
 * mit der Navigationsleiste unten.
 */
.navigation_unten {
  width:      100%;
  padding:    4px 0 0 0;
  margin:     6px 0 0 0;
  border-top: groove 2px #bbb;
}
.navigation_unten li {
  width:      85px;
  text-align: center;
  list-style: none;
  margin:     0 auto;
}
.navigation_unten li a {
  display:       block;
  width:         85px;
  height:        85px;
  position:      relative;
  border-top:    3px solid #f7f7f7;
  border-left:   3px solid #eee;
  border-bottom: 3px solid black;
  border-right:  3px solid black;
}
.navigation_unten li a span {
  position:   absolute;
  width:      100%;
  height:     100%;
  top:        0;
  left:       0;
  background: url(/buttons/home.gif) no-repeat left top;
}

/*
 * Die Defintionen fuer die Leute-Seite.
 */
body.leute {
  background:   white;
  color:        black;
  padding-left: 0;
  margin-left:  0;
}
.leute table {
  border:          none;
  border-collapse: collapse;
}
.leute td {
  margin:      0;
  padding:     10px;
  white-space: nowrap;
}
.leute .bild {
  background: #010101; /* nicht ganz schwarz; wegen Validator    */
  color:      blue;    /* ungleich bg, hier gibt's keine Schrift */
  text-align: center;
}
.leute .name {
  vertical-align: top;
  font-size:      larger;
  background:     #ff4b4b;
  color:          white;
}

/*
 * In manchen Einladungen gibt es besonders wichtige Abschnitte.
 */
pre.wichtig {
  background: yellow;
  color:      black;
}

/*
 * Die Vorgaben fuers Gaestebuch.
 */
h3.gaeste_subject {
  font-size:   x-large;
  border-top:  2px #ddd groove;
  padding-top: 6px;
  margin:      0;
}
p.gaeste_von {
  margin-top:  0;
  padding-top: 0;
  font-weight: bold;
}