/* Januar 2005 */
/* Umstellung meines Projekts auf externe CSS-Datei */
/* Weihnachten 2006 Optimierung meiner CSS-Datei nach Vorschlag des
   Chip-Heftes Sonderausgabe 10/06 */
/* Am 30.12.2006 nochmals an der Datei rumgefummelt.
   Auf Anraten der Zeitschrift Chip habe ich die Schriftgroesse der
   Ueberschriften und der Zwischenueberschriften in % angegeben. */
/* Januar 2009 ausmisten dieser Datei */
/* Im Laufe der Zeit ist die Datei recht unübersichtlich geworden */


/* Die Grundeinstellungen */
body {
     background-color:#33CCFF;  /* Meine blaue Hintergrundfarbe = #33CCFF */
     color:#000000;   /* Das ist die Grund-Schriftfarbe schwarz */
     font-size: 100.01%; /* Bugfix fuer IE, weil er manchmal Schrften unlesbar klein darstellt */
     }

/* Die Überschriften */
h1,h2,h3 {
         font-weight: 900;
         font-family: 'Times New Roman',Times,serif,Verdana;
         color: #FFFF00;
         letter-spacing: 3pt;
         text-align: center;
         font-style:italic;
         margin:0;
         padding:0;
         }

h1.einzeilig {  /* Einzeilige Ueberschrift */
             font-size: 350%;
             }

h1.zweizeilig {  /* zweizeilige Ueberschrift */
              font-size: 300%;
              }

h1.dreizeilig { /* Dreizeilige Ueberschrift */
              font-size: 280%;
              }
h2 {
   font-size: 245%;
   }

h3 {
   font-size: 230%;
   }


/* Die Grundschriften  */
/* Folgt auf einen Absatzbeginn ein img, dann wird der nachfolgende Absatz nicht korrekt
dargestellt. Man muss ein Leerzeichen &nbrsp; einfuegen. */
p  {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 104%;
   margin-left: 12%;
   margin-right: 15%;
   line-height: 150%;
   text-align: left;
   }

/* Die Absätze der Orte innerhalb der Etappen mit negativem Einzug*/
p.einzug {
         text-indent: -3.5%;
         }

/* Kommentare als eigenständiger Absatz */
p.kom {
    font-family: 'Times New Roman', Times, serif;
    font-size: 150%;
    line-height: 125%;
    margin-left: 8%;
    margin-right: 10%;
    }
    
/* verborgene Schrift mit Schlagwörtern am unteren Rand der Seiten,
damit unsere HP bei Google besser plaziert wird.*/
p.verborgen {
    font-size: 1%;
    margin : 0;
    color: #33CCFF;
    }

/* Kommentar innerhalb eines Absatzes */
.Kommentar {
           font-family: 'Times New Roman',Times,serif;
           font-size: 140%;
           line-height: 130%;
           }

/* Formatierung der Position eines Bildes */
.Bild {
       margin-left:12%;
       text-align:center;
       margin-top: 5pt;
       margin-bottom: 0pt;
       }

.bilderrahmen {
             border-width:15px;
             border-color:#ffff00;
             border-style:groove;
             margin-bottom: 5px;
             }


.Bildunterschrift {
                   margin-left: 5%;
                   margin-right: 5%;
                   margin-top: 3pt;
                   font-family: 'Times New Roman',Times,serif;
                   text-align: center;
                   font-size: 140%;
                   line-height: 130%;
                   }

/* Info-Rahmen (ein duenner doppelter Rahmen um einen Info-Text herum */
p.Info-Rahmen {
            border-width:medium;
            border-color:red;
            border-style:double;
            padding:10px;
            font-size: 80%;
            margin-top:0px;
            margin-left:12%;
            margin-right:15%;
            margin-bottom:5px;
            }
/* Info-Rahmen (ein dicker Rahmen um einen Info-Text herum */
p.Info-Rahmen.zwei {
                   border-width:thick;
                   font-size: 105%;
                   }

/* Die Anzeige des Aktualisierungsdatums */
p.datum {
        text-align:right;
        }

/* Die Absatzformatierung innerhalb der Zellen,
damit die Abstände des Textes vom Rahmen nicht so gross sind
Die Textabstaende werden bei der Rahmenzelle definiert. */
p.Zelle {
        margin:0pt;
        }

/* Rote Texte */
.text_rot  {
           font-family: 'Times New Roman',Times,serif;
           color: #FF0000;
           letter-spacing: 1pt;
           font-size: 120%;
           }

.text_rot.gross  {
                 font-size: 150%;
                 }

.text_rot.ganzgross {
                    font-size: 200%;
                    }

.fett {
      font-weight:bold;
      }
.durchgestrichen {
                 text-decoration:line-through;
                 }

.kursiv {
        font-style:italic;
        }

/* Die Tebellenrahmen */

/* Der Rahmen um die Tabelle in der rechten unteren Zelle*/
.Tabellenrahmen {
                     border-width:6px;
                     border-color:#FFFF00;
                     border-style:groove;
                     }

/* Der Zellenrahmen in der Untertabelle */
td.Untertabelle {
                padding-left:3.5%;
                padding-right:3.5%;
                }

/* Die Rahmen der einzelnen Zellen innerhalb der Tabelle */
.Zellenrahmen {
                border-width:3px;
                border-style:ridge;
                border-color:#FFFF00;
                padding:20px;
                }
/* Horizontale Linie mit kleinem Abstand nach oben und unten */
.linie {
       margin-bottom:2px;
       margin-top:2px
       }

/* Die stinknormalen Links */
/* Bei der Definierung der Links ist die Reihenfolge sehr wichtig!! */
a:link {
       text-decoration: underline;
       }
a:visited {
          color: #000080;
          }
a:hover {
        color: #E00000;
        }
a:active {
         color: #E00000;
         }
a:focus {
        color: #E00000;
        }

/* am 10.03.2007 habe ich 'sprechende' Klick-Buttons eingeführt */
/* Die Buttons mit von der Textlaenge abhaengiger Laenge */

a.knopfhome, /* Knopf 'Home' */
a.knopfnavi, /* Knopf in der linken Navigationsspalte */
a.knopftext,  /* Knopf innerhalb der Texte */
a.knopfbreit,   /* Die ueber die ganze Tabellenbreite gehenden Knoepfe */
a.knopfzurueck /* Die Knoepfe, die zuruck zu den Pilgertips fuehren */
          {
          color: #FFFFFF;
          background-color: #3333CC;  /* alte Hintergrundfarben 0080C0, #004080 */
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 105%;
          text-decoration: none;
          padding-right: 4;
          padding-left: 5px;
          margin-bottom: 1; /*Der Abstand nach unten zum naechsten Knopf */
          /* Die Rahmen um die Buttons */
          border-left: 4px solid #efefff;
          border-top:  4px solid #efefff;
          border-right: 4px solid #000055;
          border-bottom: 4px solid #000055;
          }

  /* Korrekturen fuer IE 5.x und IE 6  */
* html a.knopfhome, * html a.knopfnavi
                     {
                      width: 165;
                      display:block;
                     }
* html a.knopfbreit
                     {
                      width: 100%;
                      display:block;
                     }
* html a.knopfzurueck
              {
              font-size: 110%;
              display:block;
              }
/* Die Schaltflaechen */
a.knopfhome
            {
            font-size: 140%;
            display:block;
            }

/* Die Schaltflaechen auf manchen Seiten, die zurueck zu den Pilgertips führen*/
a.knopfzurueck
              {
              font-size: 110%;
              display:block;
              text-align:center;
              }

/* Die Schaltflaechen zum Navigieren */
a.knopfnavi
           {
           width: 165;
           display:block;	
           }
 /* Wenn der Knopf innerhalb eines Absatzes ist, hat er die Schriftgroeesse des Absatzes */

/* Die breiten Schaltflaechen */
a.knopfbreit
            {
            display:block;
            }

/* Das Verhalten der Buttons (Verändern der Farben beim Überstreichen mit der Maus) */
/* Es ist wichtig, dass die Reihenfolge eingehalten wird */
a.knopfhome:link,
a.knopfnavi:link,
a.knopftext:link,
a.knopfbreit:link,
a.knopfzurueck:link
                 {
                 color: #FFFFFF;
                 }

/* Ich finde es besser, wenn der Knopf so aussieht wie vor dem Besuch. */
/* Wenn die Maus vom Knopf weggeht, wird die Schrift wieder weiss */
a.knopfhome:visited,
a.knopfnavi:visited,
a.knopftext:visited,
a.knopfbreit:visited,
a.knopfzurueck:visited
                    {
                    color: #FFFFFF;
                    }

/* Die Schrift wird rot wenn man mit der Maus über dem Knopf steht und die
Flaeche wird dunkler.*/
a.knopfhome:hover,
a.knopfnavi:hover,
a.knopftext:hover,
a.knopfbreit:hover,
a.knopfzurueck:hover
                 {
                 color: #FF0000;
                 background-color: #660099;
                 }

/* Infobox */
/* Die Definition der Info-Boxen */
/* Das sind die Infos, die beim Rueberstreichen mit dem Mauszeiger
eine Infobox erscheinen lassen, in der auf gelben Hintergund eine Info gezeigt wird. */

#infobox a {
           color: blue;
           text-decoration: none;}

/* Display none ist ungedingt erforderlich!
Ansonsten erscheint der Text der Infobox zusammen mit dem Text! */
#infobox a span {
                display: none
                }

#infobox a:hover span {
                      display: block;
                      color: black;
                      background: yellow;
                      padding:15px;
                      text-decoration: none;
                      }                                                                                          padding: 7;
.tabRandabstand {
                margin-left:150px;
                }