@charset "utf-8";
 /*a:link                 { color:#000000;text-decoration:none; }
 a:visited         { color:#000000;text-decoration:none; }
 a:hover         { color:#FFFFFF;text-decoration:none; background-color:#000000; }
 a:active         { color:#000000;text-decoration:none; }*/
@media only screen and (max-width:900px)
                 {
                 #blf {display:none;}
                 }
@media only screen and (max-width:760px)
                 {
                 #ueb{display:none;}
                 }
@media only screen and (max-width:500px)
                 {
                 #deu{display:none;}
                 }
@media only screen and (max-width:380px)
                 {
                 #meck{display:50%;}
                 }
@media only screen and (max-width:850px)
                 {
                 #table{display:none;}
                 }
@media only screen and (max-width:380px)
                 {
                 #z3{display:none;}
                 }
@media only screen and (max-width:380px)
                 {
                 #z4{display:none;}
                 }
body             {
                 background-image: url("../grafik/hg.jpg");
                 background-repeat:y;
                 background-position:center top;
                 background-attachment:fixed;
                 margin: 0;
                 text-align: center;
                 padding-bottom:60px;
                 /*background-color: #0D5A8B;  Hintergrundfarbe für die Seite, vom User wählbar */
                 /*background-size:cover;*/
                 }

#wrapper         {
                 background-image: url("../grafik/gras.jpg");background-repeat:repeat;
                 margin: -20px auto 5px auto;
                 max-width: 1050px;
                 width: 100%;
                 border: 4px solid #FFFFFF;/*Rand des wrapper*/
                 -moz-border-radius: 8px;
                 -webkit-border-radius: 8px;
                 -ms-border-radius: 8px;
                 border-radius: 8px;
                 box-shadow: 0 0 10px 0px;
                 rgba (12, 3, 25, 0.8);
                 padding: 4px;
                 height: auto;
                 text-align:center;
                 }
#iwrapper        {
                 background-image: url("../grafik/gras.jpg");
                 background-repeat:repeat;
                 text-align:center;
                 margin: -15px auto 0 auto;
                 max-width: 880px;
                 width: 100%;
                 height: auto;
                 border-radius: 8px;
                 border: 4px solid #FFFFFF;
                 -moz-border-radius: 8px;
                 -webkit-border-radius: 8px;
                 -ms-border-radius: 8px;
                 box-shadow: 0 0 10px 0px;
                 rgba (12, 3, 25, 0.8);
                 padding: 4px;
                 }

header           {
                 padding: 10px;
                 margin: 0 auto;
                 text-align:center;
                 width: 80%;
                 }

.foto1           {
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#000000;
                 border-bottom-color:#000000;
                 -moz-border-radius: 3px;
                 -webkit-border-radius:3px;
                 -ms-border-radius: 3px;
                 border-radius: 3px;
                 box-shadow: 0 0 12px 0px;
                 rgba (12, 3, 25, 0.8);
                 }
.foto2           {
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#000000;
                 border-bottom-color:#000000;
                 border-radius: 5px;
                 -moz-border-radius: 5px;
                 -webkit-border-radius:5px;
                 -ms-border-radius: 5px;
                 box-shadow: 0 0 10px 0px;
                 rgba (12, 3, 25, 0.8);
                 /*background-color: #FF0000;*/
                 }
.box1            {
                 display: inline-block;
                 margin: 5px 5px 0 0;
                 max-width:89px;
                 width: 100%;
                 height:auto;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#000000;
                 border-bottom-color:#000000;
                 border-radius: 3px;
                 -moz-border-radius: 3px;
                 -webkit-border-radius:3px;
                 -ms-border-radius: 3px;
                 box-shadow: 0 0 12px 0px;
                 rgba (12, 3, 25, 0.8);
                 }
.box1a            {
                 display: inline-block;
                 max-width:45px;
                 width: 100%;
                 height:auto;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#000000;
                 border-bottom-color:#000000;
                 border-radius: 3px;
                 -moz-border-radius: 3px;
                 -webkit-border-radius:3px;
                 -ms-border-radius: 3px;
                 box-shadow: 0 0 12px 0px;
                 rgba (12, 3, 25, 0.8);
                 }
.box2            {
                 display: inline-block;
                 margin: 5px 5px 0 0;
                 max-width:82px;
                 width: 100%;
                 height:auto;
                 border:2px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#000000;
                 border-bottom-color:#000000;
                 border-radius: 5px;
                 -moz-border-radius: 5px;
                 -webkit-border-radius:5px;
                 -ms-border-radius: 5px;
                 box-shadow: 0 0 5px 0px;
                 rgba (12, 3, 25, 0.8);
                 }
#zaehler         {
                 background-image:url("../grafik/zaehler.png");
                 text-align:center;
                 margin:7px auto;
                 max-width:89px;
                 width: 100%;
                 height:20px;
                 font-family: Arial,Bahnschrift,Tahoma;
                 font-weight: bold;
                 font-size: 10pt;
                 font-style: bold;
                 color: #FFFF00;
                 padding-top:5px;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#000000;
                 border-bottom-color:#000000;
                 border-radius:5px;
                 -moz-border-radius:5px;
                 -webkit-border-radius:5px;
                 -ms-border-radius:5px;
                 box-shadow: 0 0 3px 0px;
                 rgba (12, 3, 25, 0.1);
                 }
nav     {margin:0 auto 2% auto;
        text-align:center;
       /* background-color: yellow;*/
        }

 img      {max-width:100%; height:auto; }

.msp1    {font-family:Arial, Verdana, Geneva, sans-serif;
         color:#FFFF00;
         font-size:12px;
         font-style:normal;
         font-weight:bold;}



#bigimage        {
                  margin:0px auto 10px auto;
                  max-width:99%;
                  /*border:3px solid #98bfd8; #98bfd8*/
                  }

#images          {
                  max-width: 1000px; /* 8 spalten mit je 130px */
                  margin: 0 auto;
                  padding: 2px;
                  line-height: 0;
                  }

#images li       {
                  list-style: none;
                  display: inline-block;
                  width: 106px; /* Breite der Bilderrahmen */
                  margin: 2px; /* Aussenabstand der Bilderrahmen */
                  background-color:#98bfd8; /* Hintergrundfarbe für die Bilderrahmen, vom User wählbar #98bfd8;*/
                  transition: all ease 0.5s;
                  border-radius:5px;
                  padding:2px;
                  }

#images li:hover {
                  background-color:#FFFF00; /* Hintergrundfarbe für die Bilderrahmen beim Mouseover */
                  cursor:pointer;
                  }

#images li div   {
                  display: table;
                  margin: 0;
                  height: 0px;        /* Hoehe der Bilderrahmen (ohne Bild-Text) */
                  width: 100%;
                  }

#images li div a {
                  display: table-cell;
                  vertical-align: middle;
                  }