@media only screen and (max-width:1080px)
                 {
                 #bfd {display:none;}
                 }
@media only screen and (max-width:1080px)
                 {
                 #uebers{display:none;}
                 }
/*@media only screen and (max-width:500px)
                 {
                 #fl2{display:none;}
                 }
@media only screen and (max-width:380px)
                 {
                 #z1{display:50%;}
                 }
@media only screen and (max-width:380px)
                 {
                 #z2{display:none;}
                 }
@media only screen and (max-width:380px)
                 {
                 #z3{display:none;}
                 }
@media only screen and (max-width:380px)
                 {
                 #z4{display:none;}
                 }*/
body             {
                  margin: 0;
                  text-align: center;
                  background-image:url('../grafik/hg_gf.jpg');
                  /*background-color: #0D5A8B;  Hintergrundfarbe fÃ¼r die Seite, vom User wÃ¤hlbar */
                  background-size:cover;
                  background-position:center top;
                  background-attachment:fixed;
                  color: #FFFF00; /* Schriftfarbe, vom User wÃ¤hlbar */
                  padding-bottom:60px;
                  }
#wrapper         {
                  background-image:url("../grafik/hg_holz_2.jpg");
                 margin: 0 auto;
                 text-align:center;
                 max-width: 96%;
                 width: 1000px;
                 height: auto;
                 border: 3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:10px;
                 -moz-border-radius:10px;
                 -webkit-border-radius:10px;
                 -ms-border-radius:10px;
                 box-shadow:0 0 10px 0px;
                 rgba (12, 3, 25, 0.8);
                 padding: 4px;
                 }
#iwrapper         {
                 background:DarkGoldenrod;/*transparent;*/
                 margin:0 auto;
                 text-align:center;
                 max-width:840px;
                 width:100%;
                 height:auto;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:10px;
                 -moz-border-radius:10px;
                 -webkit-border-radius:10px;
                 -ms-border-radius:10px;
                 box-shadow:0 0 10px 0px;
                 rgba (12, 3, 25, 0.8);
                 }
#kl              {
                 margin:0 auto;
                 max-width:808px;
                 width:100%;
                 /*background-color:grey;*/
                 }
.text            {
                 display:inline-block;
                 margin:10px 0 0 20px;
                 font-family:Arial,Tahoma,Calibri;
                 font-weight:bold;
                 font-size:12pt;
                 font-style:bold;
                 color:#FFFFFF;
                 line-height:30px;/*des Rätsels Lösung*/
                 }
.foto            {
                 margin:0 auto 0 auto;
                 max-width:98%;
                 height:auto;
                 width:auto;
                 display:inline-block;
                 width:auto;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:10px;
                 -moz-border-radius:10px;
                 -webkit-border-radius:10px;
                 -ms-border-radius:10px;
                 }
#uebers          {
                 margin:2% 0px;
                 }
.ueber           {
                 margin:1% auto 1% auto;
                 max-width:98%;
                 height: auto;
                 width: auto;
                 display:block;
                 height: auto;
                 width: auto;
                 border:3px solid #F0F0F0;
                 border-radius:10px;
                 -moz-border-radius:10px;
                 -webkit-border-radius:10px;
                 -ms-border-radius:10px;
                 }
.box1            {
                 display: inline;
                 text-align:center;
                 max-width:101px;
                 width: 100%;
                 height: auto;
                 border:2px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:4px;
                 -moz-border-radius:4px;
                 -webkit-border-radius:4px;
                 -ms-border-radius:4px;
                 margin:0 1%;
                 }
.box2            {
                 display: inline;
                 text-align:center;
                 max-width:42px;
                 width: 100%;
                 height: auto;
                 border:2px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:4px;
                 -moz-border-radius:4px;
                 -webkit-border-radius:4px;
                 -ms-border-radius:4px;
                 margin:0 1%;
                 }
.box3            {
                 display: inline;
                 text-align:center;
                 max-width:79px;
                 width: 100%;
                 height: auto;
                 border:1px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:5px;
                 -moz-border-radius:5px;
                 -webkit-border-radius:5px;
                 -ms-border-radius:5px;
                 margin:0 1%;
                 }
#zaehler         {
                 background-image: url("../grafik/zaehler.png");
                 text-align:center;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 max-width:101px;
                 width: 100%;
                 height: 20px;
                 font-family: Arial,Tahoma,Calibri;
                 font-weight: bold;
                 font-size: 11pt;
                 font-style: bold;
                 color: #FFDF00;
                 margin:1% auto -3% auto;
                 padding-top:4px;
                 border:2px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 border-radius:4px;
                 -moz-border-radius:4px;
                 -webkit-border-radius:4px;
                 -ms-border-radius:4px;
                 }
.nav             {
                 margin-top:-15px;
                 /*background-color:grey; */
                 }
.s                {color:#000000; font-size:16px;}
.r                {color:#FF0000; font-size:16px;}
.g                {color:#FFDF00; font-size:16px;}

.text            {
                 display: inline-block;
                 margin:10px 0 0 20px;
                 font-family: Arial,Tahoma,Calibri;
                 font-weight: bold;
                 font-size: 12pt;
                 font-style: bold;
                 color: #FFFFFF;
                 line-height:30px;/*des Rätsels Lösung*/
                 }

















h2               {
                  font-family: Helvetica,Arial,Verdana;
                  font-size: 40px;
                  line-height: 1.3em;
                  margin: 10px 0 20px 0;
                  font-weight:bold;
                  color:#FFFFFF;
                  background-color:#94B8B8;
                  width:40%;
                  margin:5px auto 10px auto;
                  }

h3               {
                  font-family: Helvetica,Arial,Verdana;
                  font-size: 20px;
                  margin: 0 0 30px 0;
                  color:#FFFFFF;
                  font-weight:600;
                  background-color:#0090E0;
                  width:53%;
                  margin:5px auto 5px auto;
                  padding:5px 10px 5px 10px;
                  }

#fotos          {
                  max-width: 1312px; /* 4 spalten mit je 328px */
                  margin: 0 auto;
                  padding: 0;
                  line-height: 0;
                  }

#fotos li       {
                  list-style: none;
                  display: inline-block;
                  width: 260px; /* Breite der Bilderrahmen */
                  margin: 4px; /* AuÃŸenabstand der Bilderrahmen */
                  background-color:#BFBFBF; /* Hintergrundfarbe für die Bilderrahmen, vom User wÃ¤hlbar #00C0FF*/
                  transition: all 0.3s;
                  border-radius:5px;
                  padding:5px;
                  }

#fotos li:hover {
                  background-color:#FFFF00; /* Hintergrundfarbe für die Bilderrahmen beim Mouseover */
                  cursor:pointer;
                  }

#fotos li div   {
                  display: table;
                  margin: 0;
                  height: 200px;        /* Höhe der Bilderrahmen (ohne Bild-Text) */
                  width: 100%;
                  }

#fotos li div a {
                  display: table-cell;
                  vertical-align: middle;
                  }

#fotos li div.imageinfo {
                  font-weight:300;
                  display: block;
                  height:auto;
                  padding-bottom:15px;  /*sind die Maße der Index-rahmen*/
                  padding-top:2px;
                  color:#0D5A8B;
                  font-size:20px;
                  }

#fotos li div.imageinfo p {
                  font-family: Helvetica,Arial,Verdana;  /*'Courier new'  */
                  font-weight:normal;
                  /*line-height:1.0em;*/
                  margin:0;
                  color:#4F4F00;
                  }

.nav1              {
                  font-size:20px;
                  color:#FFFFFF;
                  }

.nav2              {
                  font-size:16px;
                  color:#0000FF;
                  }

.nav3              {
                  font-size:20px;
                  color:#FF0000;
                  }



#bigfoto        {
                  margin:3px auto 3px auto;
                  max-width:90%;
                  border:5px solid #FFFFFF;
                  border-color:#FFFFFF;
                  }

#paging          {
                  margin: 50px auto 50px auto;
                  }

#paging a        {
                  display: inline-block;
                  font-size:1.7em;
                  margin:0px 5px;
                  width: 2em;
                  color: #0D5A8B;
                  text-decoration: none;
                  line-height: 2em;
                  border-radius: 50%;
                  transition: all 0.3s;
                  background-color:#98bfd8;
                  }

#paging a:hover  {
                  background-color:#ffffff;
                  }

#paging a.current {
                  background-color:#ffffff;
                  }

#navigation a {
                  position:relative;
                  display:inline-block;
                  text-decoration:none;
                  transition:all 0.1s;
                  font-weight:400;
                  font-size:1.0em;
                  margin:0px 8px;
                  color:#005F00;
                  }

#navigation table    {
                  position:relative;
                  display:table;
                  text-align:center;
                  font-family: Helvetica,Arial,Verdana;
                  font-weight:bold;
                  color:#FFFFFF;
                  font-size:1.2em;
                  background-color:#0090E0;
                  width:54%;
                  height:36px;
                  margin:5px auto 5px auto;
                  padding:5px 10px 5px 10px;
                  }


#navigation a:hover {
                  color:#ffffff;
                  }


#navigation #back {
                  font-family: Helvetica,Arial,Verdana;
                  font-weight:bold;
                  color:#000000;
                  background-color:#FF0000;
                  padding:2px 10px 2px 10px;
                  }

#navigation #index {
                  font-family: Helvetica,Arial,Verdana;
                  font-weight:bold;
                  color:#000000;
                  background-color:#FFFF00;
                  padding:2px 10px 2px 10px;
                  margin-bottom:10px;
                  }

#navigation #forward {
                  font-family: Helvetica,Arial,Verdana;
                  font-weight:bold;
                  color:#000000;
                  background-color:#009F00;
                  padding:2px 10px 2px 10px;
                  }