/*  @charset "UTF-8"; */
  
/* viewport width > 768px XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* General settings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*=====================================================================================================================*/
/* Device-independant settings
/*=====================================================================================================================*/

body, 
p, 
ul, li, a, img,
h1, h2, h3, h4 {   /* Standardwerte ausschliessen */
  margin:                 0;
  padding:                0;
  border-width:           0;
  font-family:            "Times New Roman", Times, serif;
  font-style:             normal;
  background-color:       transparent;
  color:                  #4C6D9A;}

body {
  background-color:       white;
}  
#textwindow {
  background-image:       url("../images/story/story-footer-background-1806.png");
  background-repeat:      no-repeat;
  background-position:    bottom;   
  background-attachment:  scroll;
} 
  
h1, h2, h3, h4 {  
  margin-top:             10px; 
  margin-bottom:          10px; 
  text-align:             center;} 
.slim {
  margin-bottom:          0px; 
}
p.content,
p.content-top {           
  margin-top:             5px; 
  padding:                5px;}

.english {
  color: lightgrey;
}

#ImgGoUp_medium {
  padding:                10px; /* go to top of center */
  margin:                 10px;
  border-width:           1px;
  border-color:           lightblue;
  border-style:           ridge;
  opacity:                0.2;
  position:               fixed;
} 
  
img {text-align:          center; /* wenn Texte zusammen mit Bilder gemittelt weren sollen*/
  vertical-align:         middle;}
  
.ctrImg,  /* The image is put into a block of itself, and the block shall have equal horizontal margins */
.ctrImgDynRnd,
.ctrImgRnd,
.ctrMapRnd {     
  display:                block;
  margin-bottom:          15px;}
.ctrImgRnd,
.rightImageRnd,
.leftImageRnd {       
  border-radius:          10%; }
.rightImageRnd{float:     right;
  margin-top:             15px;
  margin-bottom:          10px;
  margin-left:            20px;}
.leftImage,  
.leftImageRnd{float:      left;
  margin-top:             15px;
  margin-bottom:          10px;
  margin-right:           20px;}

ul {list-style-type:      none;
    margin-top:           10px;}
    
.clear {  clear:          both; }   /* um das Floaten zu beenden */

.dimmed {
  color: lightgrey;
}
table, td, th {
  border: 0;
}
.t-left {
  text-align: left;
}
.t-right {
  text-align: right;
}
.t-center {
  text-align: center;
}
.t-center-rowspan a
 {
  vertical-align: middle;
}  

.t-center-rowspan {
  text-align: center;
  /*border-left: 1px solid black;*/
  /*border-top: 1px solid black;*/
  border-bottom: 1px solid black;
  border-bottom: 1px dotted #4C6D9A;
}
table td a,
table tr a {
  text-decoration:        none; 
}

audio {
  /*margin: 0 auto; */
  margin-left: 20%; 
  width: 60%; 
}
.isvisible{
  display: normal;
}
.isntvisible{
  display: none;
}
.picturesubtitle {
  display: block;
  text-align: center;
  font-style: italic;
}
.iframes-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.weatherforecast {
  color: darkblue;
}
.youtubeLink {
  /*margin-left: 15%;
  margin-right: 15%;*/
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.originLinkColor {
  color: #4C6D9A;
}
.originLink {
  width: 100%;
  color: #4C6D9A;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 10px;
}

/*#FromName,
#FromAddress,
#Subject,
#Message {
  width:300px;
}*/

/* ??????????????????????????????????????????????????????????????*/
#mainNav { margin-left:   10px;}
#LangNav { margin-right:  10px;}

.togglebutton {
  margin-top: 10px;
  border-radius: 10%;
  border-color: white;
  background-color: white;
  box-shadow:             6px 6px 6px -6px rgba(120,143,120,1);
}
.togglebutton,
#mainNav a,
#ReportsNav a,        
footer a {                /* navAnkerInactive */    
  padding-left:           10px;
  padding-right:          10px;
  padding-top:            5px;
  padding-bottom:         5px;
  font-size:              18px; /*1.3em; */
  color:                  #4C6D9A;}

#ReportsNav #SelectedReport {
  background-color:       #4C6D9A;
  color:                  #DAE9F0;}

#ReportsNav #SelectedReporthover {
  color:                  #4C6D9A;}


.togglebutton:hover,
#ImgHome_medium:hover,
#mainNav a:hover,
#ReportsNav li:hover,
#ReportsNav a:hover,
footer a:hover {          /* navAnkerHovering */
  background-color:       #4C6D9A;
  color:                  #DAE9F0;}

.togglebutton:hover,
#mainNav a,
#ReportsNav a,    
footer a,                
#mainNav a:hover,
#ReportsNav li:hover,
#ReportsNav a:hover,
footer a:hover {          /* navAnkerBox */
  box-shadow:             6px 6px 6px -6px rgba(120,143,120,1);
  border-radius:          5%;
  text-decoration:        none;  }
  
.translatorsLink {
  text-decoration:        none; 
  font-style:             italic;
}  

/*=====================================================================================================================*/
@media only screen and (min-height: 768px)  { /* desktops */
  #ImgGoUp_medium {
    display:              none;
  }  
}  
/*=====================================================================================================================*/  
/*=====================================================================================================================*/
@media only screen and (max-height: 768px)  { 
  #ImgGoUp_medium {
    display:              normal;
  }  
}  
/*=====================================================================================================================*/  

  
  
/*=====================================================================================================================*/
@media only screen and (min-width: 1025px)  { /* desktops */
/*=====================================================================================================================*/  

  h1 {  font-size:        24px;}
  h2 {  font-size:        22px;}
  h3 {  font-size:        20px; }
  h4 {  font-size:        18px; }
  p.content,
  p.content-top {           
    font-size:            18px;}
  #headline {font-size:     28px; 
    margin-top:             5px;
    margin-bottom:          10px;}
  #headsubline1 {
    margin-top:             10px;
    margin-bottom:          10px;}
  #headsubline2 {
    margin-top:             10px;
    margin-bottom:          20px;}
      
  #ReportsAttachedToMainNav {
    display:              none;
  }
  #ReportsOnLeftSide {
    display:              normal;
  }
  #menuSymbol {display:   none;}
  #mainNav    {display:   normal;}
  #mainNav {float:        left;  /* ... to have the LangNav in the same row */
    text-align:           center;    /* Jeglicher Text soll gemittelt werden */
    overflow:             hidden;}    /* Content darf nicht sichtbar die Grenzen des Containers ueberschreiten */
  #mainNav li {float:     left;
    margin-bottom:        10px;}
  #mainNav a {margin-right:10px;} /* wegen horizontaler Anordnung der Buttons */
  main {
    float:                left;
    left:                 21%;
    width:                58%; 
    padding-left:         10px;
    padding-right:        10px;}
  aside { 
    float:                left; /* Donations and Sponsoring */
    left:                 80%;
    width:                19%;
    text-align:           center;
    vertical-align:       middle;} 
  #ImgGoUp_medium {
    bottom:               10%; 
    right:                15%;}
  .ctrImgRnd,
  .ctrMapRnd,
  .ctrImg {
    max-width:            100%;
    height:               auto;}
  #tourtrack,
  #trackplanning,
  #statistics {
    font-size:            medium;
  }  
}
  

/*=====================================================================================================================*/
@media only screen and (min-width:  641px)
                   and (max-width: 1024px)  { /* Tablets */
/*=====================================================================================================================*/  

  h1 {  font-size:        20px;}
  h2 {  font-size:        18px;}
  h3 {  font-size:        16px; }
  h4 {  font-size:        14px; }
  p.content,
  p.content-top {           
    font-size:            14px;}
  #headline {font-size:     26px; 
    margin-top:             5px;
    margin-bottom:          10px;}
  #headsubline1 {
    margin-top:             10px;
    margin-bottom:          10px;}
  #headsubline2 {
    margin-top:             10px;
    margin-bottom:          20px;}

  #textwindow,
  header,
  #thecenter,
  footer {  max-width:    1024px;}
  h1 {margin-top:         15px; }
      
  #ReportsAttachedToMainNav {
    display:              none;
  }
  #ReportsOnLeftSide {
    display:              normal;
  }
  #menuSymbol {display:   none;}
  #mainNav    {display:   normal;}

  #mainNav {float:        left;  /* ... to have the LangNav in the same row */
    text-align:           center;    /* Jeglicher Text soll gemittelt werden */
    overflow:             hidden;}    /* Content darf nicht sichtbar die Grenzen des Containers ueberschreiten */
  #mainNav li {float:     left;
    margin-bottom:        10px;}
  #mainNav a {margin-right:10px;} /* wegen horizontaler Anordnung der Buttons */
  main {
    float:                left;
    left:                 21%;
    width:                58%; 
    padding-left:         10px;
    padding-right:        10px;}
  aside { 
    float:                left; /* Donations and Sponsoring */
    left:                 80%;
    width:                18%;
    text-align:           center;
    vertical-align:       middle;} 
  #ImgGoUp_medium {
    bottom:               10%; 
    right:                16%;}
  .ctrImgRnd,
  .ctrMapRnd,
  .ctrImg {
    max-width:            100%;
    height:               auto;}
  #tourtrack,
  #trackplanning,
  #statistics {
    font-size:            smaller;
  }  
}

/*=====================================================================================================================*/
@media only screen and (max-width: 640px)  { /* Smartphones */
/*=====================================================================================================================*/  

  h1 {margin-top:         0px; }

  h1 {  font-size:        20px;}
  h2 {  font-size:        18px;}
  h3 {  font-size:        16px; }
  h4 {  font-size:        14px; }
  p.content,
  p.content-top {           
    font-size:            14px;}
    
  #headline,
  #headsubline1,
  #headsubline2 {
    color:yellow;}
  #headline {font-size:     16px;
    font-weight:            bold;
    margin-top:             5px;
    margin-bottom:          10px;}
  #headsubline1 {font-size: 14px;
    font-weight:            bold;
    margin-top:             10px;
    margin-bottom:          10px;}
  #headsubline2 {font-size: 14px;
    font-weight:            bold;
    margin-top:             10px;
    margin-bottom:          20px;}
  
  #textwindow,
  header,
  #thecenter,
  footer,
  #banner {max-width:     640px;}
  
  header, main  {
    width:                100%; 
    padding-left:         5%;
    padding-right:        5%;}

  #menuSymbol {display:   normal;
    float:                left;  /* ... to have the LangNav in the same row */
    margin-right:         50px;    }    /* Jeglicher Text soll gemittelt werden */

  #mainNav {
    float:                left;
  }
  #ReportsAttachedToMainNav {
    display:              normal;
  }
  #ReportsOnLeftSide {
    display:              none;
  }
  #mainNav li{             
    margin-bottom:        10px;
    background-color:     #e6e6e6;
    width:                auto;
    margin-left:          auto;   /* equalizeHorizontalMargins*/
    margin-right:         auto;  }
  #ImgHome_medium,
  #ImgHome_small {
    background-color:     #e6e6e6;
  }
  #mainNav a{
    font-size:            18px;  /* kleinerer Font wegen laengerer Texte */
    background-color:     #e6e6e6;
    display:              block;
    text-align:           center;}  /* damit der Button geschlossen rechteckig wird */

  aside { 
    clear:                both; /* Der Sponsoring-Part soll unter den Center-Part gestellt werden */
    width:                100%;
    text-align:           center;
    vertical-align:       middle;} 
  #ImgGoUp_medium {
    bottom:               10%; 
    right:                2%;}
  .ctrImg,  
  .ctrMapRnd,
  .ctrImgRnd {
    max-width:            90%;
    height:               auto;  }
  .leftarrow,
  .rightarrow{
    max-width:            24px;
    height:               auto}
  #tourtrack,
  #trackplanning,
  #statistics {
    font-size:            smaller;
  }  
   
} /* Smartphone settings */

/*=====================================================================================================================
=====================================================================================================================*/  
  
.ctrImgRnd,
.rightImageRnd,
.leftImage,
.leftImageRnd,
.ctrMapRnd {     /* imageStyling */
  box-shadow:             2px 5px 10px 0px rgba(0,0,0,0.75);
  border-radius:          5%;  
}
.leftImage {
  border-radius:          0%;  
  margin-left: 10%;
}
  
#textwindow,
p.content,
p.content-top,
.ctrImg,  
.ctrImgRnd,
.ctrMapRnd,
#ReportsNav li,
#maptable {               /* equalizeHorizontalMargins*/
  margin-left:            auto;
  margin-right:           auto;  }

.rightImageRnd,
.leftImageRnd {
  max-width:              50%;
  height:                 auto;}
.ctrImgDynRnd {
  max-width:              100%;
  height:                 auto;
}

  
                          
/* Header elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#banner img{margin-bottom:0;}
#textwindow {             } /*enthaelt alles ausser dem Banner*/

header {width:            auto;} /* Elemente passen sich an enge Breiten an; mainNav und LangNav */


#LangNav {float:         right;} /* ... to have LangNav on the right side */
#LangNav li {float:      right;}
#LangNav a {margin-right:10px; }

/* Center elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.sidesheader {margin-top: 25px;}
#ReportsNav{float:          left;
  width:                  20%;
  overflow:               hidden;}
#ReportsNav p {display:     block;
  text-align:             center;
  padding:                10px;
  margin:                 10px;}
#ReportsNav ul {margin-left:5%;}
#ReportsNav li{             
  width:                  90%;
  margin-bottom:          10px;}
#ReportsNav a{font-size:    1.0em;  /* kleinerer Font wegen laengerer Texte */
  display:                block;}  /* damit der Button geschlossen rechteckig wird */

main p {display:          block;
  text-align:             justify;}
li.external {
  margin-left: 10%;
  vertical-align: middle;
} /* Liste externer Links*/
li.external a {
  text-decoration:        none; 
} /* Liste externer Links*/

#maptable {               
  margin-top:             10px;
  table-layout:           fixed;
  width:                  100%;
  }
#maptable td{
  /*width:                  32%;   /* ... in Kombination mit table-layout: fixed */
  vertical-align:         top;}
#leftTabCol{
  text-align:             right;
  width:                  140px}
#middleTabCol{
  padding-top:            0px;
  width:                  auto}
#rightTabCol{
  padding-left:           10px;
  width:                  140px}
#maptable ul {margin-top: 0px;}
#maptable li {
  margin-right:           10px;  
  list-style-type:        none;}
#maptable a {font-size:   0.9em;
  text-decoration:        none;}
.leftarrow {float:        left;
  margin-left:            30%;}
.rightarrow{clear:        both;}


/* Footer elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer { /* border:         1px solid DarkBlue;*/
  margin-top:             30px;
  text-align:             center;
}

footer li,
footer a {  
  background-color:       transparent; /*white;*/
}
  
footer a {/*border-top:     1px solid DarkBlue;*/ /* erzeugt den Abschlussbalken */
  /*border-bottom:          1px solid DarkBlue; */ }
  
.beta {font-size:         0.8em;
  color:                  #CB0000;
  font-weight: bold;
  
  text-align:             center;
  -webkit-transform: skew(30deg, -18deg);
  -moz-transform:  skew(30deg, -18deg);
  -ms-transform:  skew(30deg, -18deg);
  -o-transform:  skew(30deg, -18deg);
  transform: skew(30deg, -18deg); }



@media only screen and (max-width: 800px) { 
  /* viewport width > 480px and <= 800px XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
}

@media only screen and (max-width: 640px) { 
  /* viewport width <= 480px XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
  
}