
* {
  box-sizing: inherit;
}

html {   height: 100%; }

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
  margin: 0 auto;

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url(../images/BUV.PNG);
background-repeat:no-repeat;
background-attachment:fixed; 
background-size: cover;
text-align: center;
height: 100%;
}


#wrapper {
    text-align: left;
    width: 960px;
    margin: 0 auto;
    padding-bottom: 2vh;
}

#fussbereich {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#BBB;
  height: 2vh; 
  z-index: 6;
 }

.left {
  margin: auto;
  width: 100%;
}
.center {
  margin: auto;
  width: 50%;
}

.sticky {
  position: sticky;
  top: 0;
}

.inv_txt{
 color:#c8c8c8;background-color: #444;
}

.box_txt{
  background-color: rgba(200,200,200, 0.2);
  width: auto;
  border: 1px solid rgb(150,150,150);
  border-radius: 2px;
  padding: 10px;
  margin: 10px;
}


.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}


/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
 
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
}


a:link 
{ color: black; font-size: 12px; 
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; 
text-decoration: none;
 }

.b:link { font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; }

a:visited { color: #000; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; }

a:hover { background-color: orange; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; 
font-weight: bold; text-decoration: none; }

a:active { font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; }


img { border: 0; }

td, th {padding: 0px;}

h1  { font-weight: 600; font-size: 13px;}
h2 { font-weight: 600; font-size: 13px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
h3   { font-weight: normal; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
h4  { font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-position: 0 72pt   }
h5 {  font-weight: 900;font-size: 8px;}
h6   { font-weight: 600; font-size: 13px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }

#navcontainer
{
width: 7.5em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 2em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
text-align:left;
background-color: rgba(100,100,100, 0.2);
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0px;
padding: 3px;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #909090;
margin: 0px;
}

#navcontainer li a
{
display: block;
font-weight:600;
font-size: 0.8em;
padding: 25px 5px 5px 0.5em;
border-right: 6px solid #555555;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
width: 100%;
border-radius: 3px;
transition: all 0.6s ease 0s;
text-align:center;
}
#navcontainer li a { width: auto; }

#navcontainer li a:hover
{
padding: 25px 0px 0px 0px;
border-right: 10px solid #EDEDED;
background-color: rgba(250, 250, 250, 0.6);
width: 100%;
color: #000;
box-shadow: 5px 5px 5px 5px #999999;
margin: 10px;
}

p { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; list-style-type: square; }
td { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.adresse { font-size: 11px; font-weight: 600; }
.list { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-image: url(images/buv_button.jpg); list-style-position: inside; display: list-item; white-space: nowrap; }
.usup { display: none; }

#adresse { height: 220px; width: 148px; left: 870px; top: 620px; z-index: 2; position: absolute; visibility: visible; }
#bilderzeile { height: 100px; width: 1000px; left: 18px; top: 145px; z-index: 2; position: absolute; visibility: visible; }
#foerderturm { height: 192px; width: 170px; left: 3px; top: 948px; z-index: 4; position: absolute; visibility: visible; float: right; margin-bottom: 0; margin-left: 20px; }

#kopf { 
background-color:#F2F2F2; 
opacity: 0.8;
filter:Alpha(Opacity=100);

height: 190px; width: 1030px; left: 16px; top: 10px; position: absolute; z-index: 2; visibility: visible; 
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 5px 5px 5px #999999;
-moz-box-shadow: 5px 5px 3px #999999;
box-shadow: 5px 5px 5px #999999;
}

#kopf2 { height: 60px; left: 18px; top: 0px; z-index: 2; position: absolute; visibility: visible; }

#sue1 { height: 50px; width: 80px; left: 50px; top: 23px; z-index: 3; position: absolute; visibility: visible; }
#sue2 { height: 50px; width: 80px; left: 930px; top: 23px; z-index: 3; position: absolute; visibility: visible; }
#cat    { left: 195px; top: 210px; z-index: 3; position: absolute; visibility: visible; }

#text { height: 890px; width: 800px; left: 192px; top: 220px; z-index: 2; position: absolute; visibility: visible; }

#rund
{
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 2px 2px 2px #999999;
-moz-box-shadow: 2px 2px 2px #999999;
box-shadow: 2px 2px 2px #999999;
filter: blur(10px);
}
#weiss 
{ 
background: rgba(251,251,251,0.7);

height: 868px; width: 850px; top: 180px; z-index: 1; 
position: absolute; left: 159px; visibility: visible; 

-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 2px 2px 2px #999999;
-moz-box-shadow: 2px 2px 3px #999999;
box-shadow: 2px 2px 2px #999999;
}

#navi 
{ height: 350px; width: 120px; left: 30px; top: 205px; z-index: 2; position: absolute; visibility: visible;border-radius: 2px; 
}
#copyright { text-decoration: none; height: 15px; width: 550px; left: 380px; top: 220px; z-index: 4; position: absolute; visibility: visible; }
#w3c { text-decoration: none; height: 3vh; width: 60vh; left: 2px; top: 1132px; z-index: 4; position: absolute; visibility: visible;}
#adresse2 { height: 170px; width: 145px; left: 870px; top: 250px; position: absolute; z-index: 2; visibility: visible; }



@media screen and (orientation: portrait)
 {
#cat    { left: 125px; }
#navi 
{ left: 1px; }
#navcontainer
{ width: 6em; }

#navcontainer li a
{ padding: 25px 1px 2px 0.5em; }

#weiss 
{ 
height: 968px; width: 750px; top: 180px; z-index: 1; 
position: absolute; left: 95px; visibility: visible; 
}
#text { left: 100px; width: 80%; }
#foerderturm { height: 192px; width: 170px; left: 0px; top: 948px; z-index: 1; position: absolute; visibility: visible; float: right; margin-bottom: 0; margin-left: 0px; }
#kopf { left: 1px; top: 1px; }
}

