@import url(buttons.css);
@font-face       {  font-family: 'Letter Gothic'; src:url('buttons/LETTERGO.TTF'); format('truetype')}

/* handlee-regular - latin Nur für die NEWS Seite genutzt*/
@font-face {
  font-family: 'Handlee';
  font-style: normal;
  font-weight: 400;
       src: url('buttons/handlee-v6-latin-regular.eot');                                /* IE9 Compat Modes */
       src: local('Handlee Regular'), local('Handlee-Regular'),
       url('buttons/handlee-v6-latin-regular.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
       url('buttons/handlee-v6-latin-regular.woff2') format('woff2'),                   /* Super Modern Browsers */
       url('buttons/handlee-v6-latin-regular.woff') format('woff'),                     /* Modern Browsers */
       url('buttons/handlee-v6-latin-regular.ttf') format('truetype'),                  /* Safari, Android, iOS */
       url('buttons/handlee-v6-latin-regular.svg#Handlee') format('svg');               /* Legacy iOS */
}
/* hide from ie on mac \*/
html     {
        /**background-image:linear-gradient(#f77, #333); **/
         background-color:#5c5c5c;
         /*border:2px solid black; */
         height:100%;
         z-index:0;
         }
#flashcontent {
         height: 85%;
         }
/* end hide */
* {
  box-sizing: border-box;                /*stellt sicher, dass die box-masse jeweils marginund padding beinhalten*/
}
/* Laufschriftdefinition über "@keyframes" wird nicht von allen alten Browsern unterstützt. Achtung auch IE11 will speziellen Code*/
@keyframes marquee       {
                         from   {text-indent: 100%}                          /*Es darf nicht 0% statt from verwendet werden*/
                         to     {text-indent: 0%}                            /*dito für 100% für to. IE11 wertet dann animation falsch aus. Rest funktioniert trotzdem*/
                         }
@-webkit-keyframes marquee{
                         from   {text-indent: 100%}
                         to     {text-indent: 0%}
                         }
.marquee                 {
                         width: 100%;
                         margin: auto;
                         padding: 2px;
                         overflow: hidden;
                         white-space: nowrap;
                         border: none 1px #CCCCCC;
                         -webkit-animation: marquee 10s linear infinite;
                         animation:marquee 10s linear infinite;2;
                         }
.marquee:hover           {animation-play-state: paused; -webkit-animation-play-state: paused; }
/* bugfix für ältere Webkit-Browser */
@-webkit-keyframes bugfix {from { padding: 0;}to {padding: 0;}}
/* Ende Laufschriftdefinition */


@-o-viewport       { width: device-width; }            /** seit 2012 in Opera implementiert  **/
@-webkit-viewport  { width: device-width; }
@-moz-viewport     { width: device-width; }
@-ms-viewport      { width: device-width; }            /** unklar ob wirksam  **/
@viewport          { width: device-width; }            /** unklar ob wirksam  **/
body     {
         height:850px;
         margin: auto;
         padding: 0;
         z-index:0;
         overflow:auto;
         max-width:1400px;
         background-color:#5c5c5c;   bottom:0px;  /**border:2px dashed white; **/
         }
body,p,table,tbody,h1,h2,div
         {
         color: #ffe;
         font-family: Arial, Tahoma, Verdana, sans-serif;
         }
body,p,table,tbody,div
         {
         fo nt-size:1.0rem;
         }
article  {
         width:80%;display:block; position:relative;border:0px red solid;text-align:justify;   margin:auto;
         font-size:2.0vw;
         }

h1       {
         font-size:1.4rem;
         }
h2       {
         font-size:1.1rem;
         }
img,table{
         border:none;
         }
a:link   {
         text-decoration:none;
         color:#ffffe8;
         }
a:visited{
         color:#00ffff;
         }
a:focus  {
         color:#00AA00;
         background-color:#00FFFF;
         }
a:hover  {
         text-decoration:none;
         color:#0f0f0f;
         background-color:#0CE2F0;
         }
a:active {
         text-decoration:none;
         color:#ff0000;
         }
#main    { display:block;
         position: absolute;
         top:0px;
         width:100%;           max-width:1400px;
         margin: auto;
        /* min-height:100%; bottom:20px;   */
         background-color:#5c5c5c;
         z-index:0;
         overflow:au to;
         height:100%;
         }
#f1      {   position:fixed;    top:0px;     margin:auto;    width:1400px;   height:250px;   background-color:transparent;   z-index:1;                      }                                                               /*Position des Banners auf der titelseite */
#f2      {   position:absolute; top:250px;   left:0px;       right:0px;      bottom:20px;    background-color:transparent;   z-index:1;      overflow-y:auto;    margin-top:0px;   margin-left:0px;      padding:0px;     }
#f2a     {   position:absolute; top:300px;   left:0px;       width:200px;    height:800px;   background-color:transparent;   z-index:2;      overflow-y:hidden;  margin-top:0px;   margin-left:0px;      padding:0px;     }  /*Format der Navigation auf urlaubsreisen.html*/
#f2b     {   position:relative; top:470px;   left:0px;       width:300px;    height:500px;   background-color:transparent;   z-index:2;      overflow-y:hidden;  margin-top:0px;   margin-left:0px;      padding:0px;     }  /*Format der Navigation auf urlaubsreisen.html*/
#f3a     {   position:fixed;    top:250px;                   width:1300px;                   background-color:transparent;   z-index:1;      overflow:hidden;}                                                               /*Position der Weltkarte auf urlaubsreisen.html*/
#f6      {   position:relative; top:0px;     left:10%;       width:80%;       }
#f8      {   position:fixed;    top:10%;     left:0%;        width:100%;     height:95%;                                                     overflow-y:auto;}
#f10     {   position:relative; top:0px;     left:20px;      width:90%;      height:150px;   background-color:#5c5c5c;       z-index:2;                      }
#f11     {   position:fixed;    top:20%;     left:0%;        width:100%;     height:80%;                                     z-index:3;      overflow-y:au  to;} /* u.a. sundowner/index.html NICHT MEHR */                               /*passt zu #f1 (Header mit 250Höhe)*/
#f12     {   position:relative; top:200px;   left:50px;      width:1250px;                                                                                   }                                                                /*Übersicht in Bilder/Reisen*/
#f12a    {   position:fixed;    top:10%;     left:10%;       width:90%;      height:90%;                                                     overflow-y:auto;}
#f13     {   position:fixed;    top:10%;     left:20%;       right:0px;      height:85%;                                                     overflow-y:auto;}
#f18     {   position:fixed;    top:180px;   left:10px;      width:20%;      }
#f19     {   position:fixed;                 left:1px;       right:1px;      bottom:5%;      background-color:transparent;   z-index:+5;      }                                                                               /*für Laufschrift unten*/
#f20     {   position:fixed;                 left:20px;                      bottom:5px;     background-color:transparent;   z-index:5;}

footer   {   position: fixed;                left: 20px;     padding: 10px;   bottom: 10px;  }


#TabsPicOfMonth, .TabsPicOfMonth {
                 position:fixed;
                 margin-left:20px;
                 top:0px;
                 height:100%;
                 width:1350px;
                 background-color:transparent;
                 border:0px solid red;
                 }
#PicOfMonth, .PicOfMonth      {
                 position:relative;
                 top:50px;  margin:auto;
                 width:80%;
                 border:0px dotted cyan;
                 text-align:justify;
                 }
#indexpage, .indexpage       {
                  position:relative;
                 top:10px;  margin:auto;
                 width:85%;
                 /*border:4px dotted yellow; */
                 text-align:justify;
                 }
/*Für die Seiten der Fotogalerien*/
#maingr          {
                 position:relative;
                 top:0px;
                 height:1550px;
                 width:1400px;
                 margin:auto;
                 background-color:#5c5c5c;
                 z-index:1;
                 overflow:auto;
                 }
#navi            {
                 position:relative;
                 top:0px;
                 left:0px;
                 height:100px;
                 background-color:transparent;
                 z-index:3;
                 }
/*#text            {  position:relative;     top:0px;        width:95%;      height:15%;   overflow-y:auto; left:30px;      text-align:justify;       }
#galerie         {  position:fixed;        top:250px;      width:1400px;   height:90%;   overflow:auto;   border:none;    background-color:transparent;   }/*Galerie mit Text im oberen Segment*/
/*#nurgalerie      {  position:fixed;        top:15%;        width:1400px;   height:90%;   overflow:auto;   border:none;    background-color:transparent;}   /*Galerie wenn kein Text im oberen Segment vorkommt*/
/*Ende Formate für Fotogalerien*/
#p2              {  position:fixed;        top:30%;        left:10px;      }
.p3              {  position:relative;     top:0px;        width:75%;      margin:auto;}      /* positioniert Text in Bildern des Monats*/
#p__3            {  position:relative;     top:0px;        width:75%;      margin:auto;}
#p4              {  position:relative;     top:20px;       left:10px;      z-index:5;      }   /*positioniert den Sprachenumschalt-Button*/
#back            {  position:relative;     top:10px;       left:10px;      z-index:5;      }   /*Position des Zurück-Pfeils*/
.spalte_l        {  position:absolute;     left:10%;       width:40%;      right:50%;      }   /* Wird auf links.html genutzt */
.spalte_r        {  position:absolute;     left:55%;       width:40%;      right:5%;       }   /* Wird auf links.html genutzt */
.navilinks       {  left:5px;              width:250px;    }
.content         {  position:absolute;     left:300px;                     right:50px;     }
.spalte_list     {  position:absolute;     left:30%;       width:40%;      right:50%;      border:none; border-color:red; font-size:2.0em; }
.mittig          {  display:block;width:80%; margin:auto;text-align:justify;}
#mittig          {  position:relative;                                                     text-align:center;}
.block           {  display: inline-block; vertical-align:middle;  text-align:center;  border:0px black dotted;}
.clips           {
                    display:inline-block ;
                    vertical-align:middle;
                    padding:5px;
                    border:0px solid #ffe;
                    margin-left:5px;
                    margin-right:5px;
                    margin-top:3px;
                    margin-bottom:2px;
                 }
.backbutton{
                 position:fixed;
                 margin-left:20px;
                 top:0px;
                 height:150px;
                 width:150px;
                 background-color:transparent;
                 border:0px solid red;      z-index:5;
                 }
.news            {display:block;
                 margin: auto;
                 width: 80%;
                 text-align: justify;}

.center          {
                    margin: auto;
                    width: 100%;
                    border: 3px solid #30CA19;
                    padding: 10px;
                 }
.neu             { display:inline-block; position:relative;left:0px;width:100%;top:50px;z-index:3;background-color:transparent; }

.links           { padding:0px;float:left;width:32%; }                    /*  */
.mitte           { padding:0px;float:left;width:32%; }                    /*  Diese drei zur Positionierung der drei Videos Meisen index.html*/
.rechts          { padding:0px;float:left;width:32%; }                    /*  */
.left            { padding:0px;float:left;width:49%; }
.right           { padding:0px;float:left;width:49%; }

@media screen and (max-width:1300px)                                                    /* Use a media query to add a break point at 800px: */
                 { .links, .mitte, .rechts {  width:100%; }                            /* The width is 100%, when the viewport is 800px or smaller */
                 {.left, .right {width:100%;}