html {background: #eeeeee;}
h4 {margin: 1px;}
h5 {margin: 1px;}
p {margin: 0px;}
td { vertical-align: top;
     }
th.liste { font-size: 1.0em;
border-bottom: thin solid;
border-right: thin solid;
border-color: #000000;
}
table.liste {
font-size: 0.9em;
border-color: #000000;
margin: 0px;
padding-left: 2px;
border-style: dotted;
border-width: 0px 1px 1px 0px;
}


#map { margin-top:0px;
 margin-left: 10px;;
position: absolute;
width:800px;
height:500px;
}

#map_hp { margin-top:40px;
margin-left: 820px;
padding-left: 0px;
padding-right: 0px;
     height: 400px;
     width:400px;
position: absolute;
}

 #map1         { width:45%;height:500px;margin-top:10px;display:inline-block;vertical-align:top }
 #map2         { width:45%;height:500px;margin-top:10px;display:inline-block;vertical-align:top }

 #map1_umkarte { width:45%;height:500px;display:inline-block; }
 #map2_umkarte { width:45%;height:500px;display:inline-block; }
 	  
 #map1_hp { height:45%;margin-top:30px }
 #map2_hp { height:45%;margin-top:30px }
	  
      #map1_vpt { height:30%;margin-top:20px }
	  #map2_vpt { height:30%;margin-top:20px }



#map_img {
display: none;
}

p.titel{
text-align: center;
 font-size: 22px;
 }

div.karte {/* Div für Tourdatencontainer*/
     border-radius: 10px 10px 10px 10px;
     width: 1250px;
     height: 500px;
     padding: 5px 5px 30px 5px;
     border: thin solid;
     border-color: #008080;
     /*Abstand zum nächsten Element
     margin-bottom: 20px;*/
     margin-left: -250px;
     margin-top: 10pt;
     margin-bottom: 20px;
     background-color: #eeeeee;
     box-shadow: 5px 3px 8px grey;
     z-index: 4;
}

.vonlinks{ margin-left: 30px; } /*für Startseite Bilder links*/

th { font-size: 1.5em;
border-bottom: thin solid;
border-color: #008080;
}
tr.zeilenfarbe1{
background-color: #b0e0e0;
color: #000000;
}
tr.zeilenfarbe2{
background-color: #b0d0d0;
color: #000000;
}

.drehen {transform: rotate(30deg); }

div {/* Div für die Bilder mit unterschrift
     border: none;
     background: none; */
}
div.relativ{ /*als Container für ein überlappendes und absolut positioniertes DIV*/
position: relative;
}

div.tourdaten {/* Div für Tourdatencontainer*/
     border-radius: 10px 10px 10px 10px;
     width: 95%;
     padding: 5px 5px 30px 5px;
     border: thin solid;
     border-color: #008080;
     /*Abstand zum nächsten Element
     margin-bottom: 20px;*/
     margin: 10px 5px 10px 10px;

     /*background: #FFFF00; */
     box-shadow: 5px 3px 8px grey;
}


nav { /* So bleibt navigation beim scrollen stehen*/
  position: fixed;
  padding-top: 10em;
}


img { /* Alle Bilder werden an die Fensterbreite angepasst*/
    max-width: 100%;
    height: auto;
    /*leichter Abstand zu anderen Elementen*/
    padding: 1px 2px 1px 1px;
    margin: 0 0 5px;
}
.abstand{
padding: 20px;
}


img.oval { /*alle Images werden oval dargestellt*/
    border-radius: 50%;
}

.oval1{
       border: thin solid ;
       border-color: #008080;
       border-radius: 50%;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       /* sorgt dafür dass nicht die mitte der ganzen seite genommen wird*/
     max-width: 800px;
     /* ohne display Block reiht es sich daneben ein wenn platz ist
     display: block; */

}




.typ0{     /* mittig */
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       /* sorgt dafür dass nicht die mitte der ganzen seite genommen wird*/
     max-width: 800px;
     display: block;
    margin-left: auto;
    margin-right: auto;
}

.typ1{   /* links */
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
}
img.typ2{
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       margin-left: 30px;
}
img.typ3{  /* 40 hoch*/
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       margin-left: 100px;
       margin-top: -40px;
}
img.typ4{  /*100 hoch 280rechts */
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       margin-left: 280px;
       margin-top: -100px;
}
img.typ5{  /*100hoch*/
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       margin-left: 0px;
       margin-top: -100px;
}
img.typ6{
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       margin-left: 400px;
       margin-top: -140px;
}
img.typ7{
       border: thin solid ;
       border-color: #008080;
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
       margin-left: 500px;
       margin-top: -100px; }

       img.t10r{
margin-left: 10px;}
img.t30r{
margin-left: 30px;}
img.t50r{
margin-left: 50px;}
img.t100r{
margin-left: 100px;}
img.t100l{
margin-left: -100px;}
img.t150r{
margin-left: 150px;}
img.t250r{
margin-left: 250px;}
img.t300r{
margin-left: 300px;}
img.t350r{
margin-left: 350px;}
img.t400r{
margin-left: 400px;}
img.t500r{
margin-left: 500px;}

img.t10o{
margin-top: -10px;  }
img.t50o{
margin-top: -50px;  }
img.t100o{
margin-top: -100px;  }
img.t150o{
margin-top: -150px;  }
img.t200o{
margin-top: -200px;  }
img.t300o{
margin-top: -300px;  }
img.t400o{
margin-top: -400px;  }


#navigation {
       /*background: #FFff00;*/
       /* Diese Box soll nicht sichtbar sein und dient nur als Container für die Button*/
       width:  0px;
       float: left;
       /* Anzeige Vorder-Hintergrund festlegen */
       z-index:3;
}

#navigation a {
      /* So bleibt navigation beim scrollen stehen
      position: fixed; */
      /*Schriftfarbe im Button*/
      color:#FFFFFF;
      /*Buttonfarbe*/
      background: #066666;
      /*Höhe des Buttons*/
      height: 12px;
      /*breite des Buttons*/
      width: 145px;
      text-decoration:none;
      /*display:block;  */
      /*Rahmen des Buttons*/
      border:1px solid black;
      /*Höhe und Breite des Buttons festlegen*/
      padding: 2px 20px 9px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#navigation a:hover {
      /*Farbe der Buttonbeschriftung beim überfahren*/
      color:#FFFF00;
      /* Farbe des Buttons beim überfahren*/
      background:#066666;
      /*breite des Zusatztextes*/
      width:350px;
      /* bestimmt wieviel der Button über Zusatztext übersteht.*/
      padding: 2px 10px 9px 12px;
      z-index:3;
}

#navigation a span {
     /*blendet zusatztext aus*/
     display:none;
     /*Farbe des Zusatztextes, egal da nicht sichtbar*/
     background:#ff00ff;
}

#navigation a:hover span {
       /*Schriftfarbe Zusatztext*/
       color:black;
       /*Hintergrundfarbe Zusatzbox*/
       background:#FFFFff;
       /*Textgröße Zusatztext*/
       font:normal 12px courier, sans-serif;
       border:1px solid black;
       border-radius: 20px 5px 20px 5px;
       display:block;
       /*Textabstand von umrandung*/
       padding:2px 6px 2px 12px;
       /* rand links von zusatztext*/
       margin-left: 30px;
}

.button {
      /* Form und Farbe von Button*/
      border-radius: 35px 5px 35px 5px;
      /*Schatten des Button*/
      box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
      /*Schriftgröße von Button*/
      font-size: 14px;
      font-weight: bold;
      /*Abstand nach unten zum nächsten Element*/
      margin: 0px 0px 15px 0px;
      /*wichtig*/
      display: inline-block;
      position: relative;
 }

#kopfbereich{
       /* clear: both;*/
       /* Sorgt für Abstand zum Inhaltsbereich ist aber nicht gut deshalb jetzt mit margin*/
       /*height: 200px;*/
       margin-bottom: 50px;
       width: 100%;
       /*um den Rahmen sichtbar zu machen bei Bedarf einschalten
       border: thin solid ;
       border-color: #008080;*/
}

#hintergrund {/* z.B. für Kopfgrafik*/
        width: 100%;
        height: 100%;
        z-index:-1;
}

#fussbereich{
        /* clear: both;*/
        /* Sorgt für Abstand zum nachfolgenden Teil*/
        height: 100px;
        width: 100%;
        /* in Verbindung mit width mittige anordnung*/
        margin: auto;
}

#inhaltbereich {
       /*background-color:#FFFF00;*/
       margin-left: 262px;
       width:  70%;
       border: thin solid ;
       border-color: #008080;
       /*height: 1800px; */
       border-radius: 10px 10px 10px 10px;
       padding: 2px;
       box-shadow: 5px 3px 8px grey;
}

.titelfuss {
         position: absolute;
         /* Höhe der Fussbox*/
        height: 40px;
        /* breite der Fussbox*/
        width: 500px;
        /*Farbe Fussbox mit Schatten usw. */
        background-color: #066666;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 35px 5px 35px 5px;
        box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
        /* Textfarbe in der Fussbox*/
        color: #FFFffF;
        /*Schriftgröße und fett der Fussboxbeschriftung*/
        font-size: 14px;
        font-weight: bold;
        /* 1. Wert Abstand oben, 2. rechts, 3. unten 4. links*/
        /*durch negativen wert oben liegt es über dem umfassenden DIV*/
        margin: -20px 0px 20px 50px;
        /* 1. Wert Abstand oben, 2. rechts, 3. unten 4. links*/
        padding: 10px 0px 0px 0px;
        text-align: center;
}

.gross1 {
         font-size: 22px;
}

.box1 {
          position: absolute;
          top: 1420px;
          left: 290px;
}

.box2 {
          position: absolute;
          top: 1450px;
          left: 490px;
}
.gpxbox {
      border-radius: 10px 10px 10px 10px;
      position: absolute;
      top: 100px;
      left: 20px;
      width: 110px;
      padding: 5px;
      border: thin solid;
      border-color: #008080;
      background: #FFFFff;
      box-shadow: 5px 3px 8px grey;
}

.textboxlinks {
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    top: 490px;
    left: 9px;
    width: 250px;
    padding: 5px;
    border: thin solid;
    border-color: #008080;
    /*background: #FFFF00; */
    box-shadow: 5px 3px 8px grey;
}


.textbox2links {
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    left: 0px;
    width: 250px;
    padding: 5px;
    margin-top: 10px;
    border: thin solid;
    border-color: #008080;
    /*background: #FFFF00; */
    box-shadow: 5px 3px 8px grey;
}
.mitte {
        /* sorgt dafür dass nicht die mitte der ganzen seite genommen wird*/
        text-align: center;
}
.rechts { text-align: right;}
.mitte1 {
     /* sorgt dafür dass nicht die mitte der ganzen seite genommen wird*/
     max-width: 150px;
     /*plaziert text und Bild in der mitte des oben zur verfügung gestellten Bereichs*/
     text-align: center;
}

.figure1 {float: right;
        max-width: 260px;
        border: 1px #000000 solid;
        margin: 0.5em;
        padding: 5px;
        text-align: center;}

.figcaption1 {font-style: italic;
            font-size: 0.8em;}

#seitentitel {
        /*top: 50%;*/
        left: 60%;
        position: absolute;
        /*damit der Seitentitel ein Stück im Bild schwebt negatives margin*/
        margin: -30px;
        /* Höhe der Überschriftenbox Padding der Schrift beeinflusst diese aber auch*/
        height: 40px;
        /*Breite der Überschriftzeile*/
        width: 400px;
        /*Farbe des Überschriftenbox-Hintergrundes*/
        background-color: #066666;
        /*Form der Überschriftenbox 1. Wert = heller Schatten unten dann farbe des streifens dann seine Helligkeit*/
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
         /*Erzeugt die asymetrische Form*/
        border-radius: 35px 5px 35px 5px;
        /* erster wert ? 2. Schatten unten Farbe Schatten dann ? dann leichter Schatten, seine Farbe und Helligkeit dann schattierung oben usw.*/
        box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
        /* Schriftfarbe in der Überschriftenbox*/
        color: #FFFFFF;
        /* Schriftgröße und fett der Überschrift*/
        font-size: 25px;
        font-weight: bold;
        /* Abstand der Schrift zur Box 1. oben 2. rechts 3. unten 4. links */
        padding: 10px 0px 1px 0px;
        /* Centriert Schrift im Button*/
        text-align: center;
}

#erstespalte { /* Wird nicht genutzt da Breite anderst festgelegt */
     /*background-color: yellow; */
     width: 199px;
     float:left;
}

#zweitespalte { /* Wird nicht genutzt da Breite anderst festgelegt */
    /* background-color: green;*/
     margin-left: 200px;
     width: 600px;
}
/* Mit unteren daten sollten die Bereiche sich verkleinern lassen*/
#erstespalte1 { /* Wird nicht genutzt da Breite anderst festgelegt */
     background-color: yellow;
     width: 14em;
     float:left;
}

#zweitespalte1 {/* Wird nicht genutzt da Breite anderst festgelegt */
     background-color: green;
     margin-left: 16em;
}

div.comic{
font-family: "Comic Sans MS", "Verdana", "ARIAL","HELVETICA";
}
table.comic{
font-family: "Comic Sans MS", "Verdana", "ARIAL","HELVETICA";
}

table.fontklein {
    font-size: 96%;
}




.table100{
width: 100%;
}
.td5 {
width: 5%;
}
.td10 {
width: 10%;
}
.td15 {
width: 15%;
}
.td25 {
width: 25%;
}
.td30 {
width: 30%;
}

.td40 {
width: 40%;
}
.tdxx {
width: 40%;
height: 30px;
}


.Tab600 {
height: 400px;
width: 600px;
background-color: #FAFAFA;
border: 1px solid #9F9F9F;
border-collapse: separate;
}

.Breite50 td {
height: 100px;
width: 80%;
font-family: Arial,sans-serif;
font-size: 12px;
color: #BF00BF;
padding: 10px;
text-align: center;
font-weight: normal;
}
.abstand1{
padding: 5px;}