body{
    font-size:14px;
    font-weight:bold;
    font-family: Verdana;
    color:#ffffff;
    margin:0px;
}

/* Margin bewirkt einen Abstand Top,right, bottom,left
   float ist die anordnung left=von links nach rechts und am rand nächste zeile
   bei 4 werten immer ihm uhrzeigersinn oben rechts unten links
   opacity: 0.6; = transparenz

*/
#main{
    width:960px;
    margin-left:auto;
    margin-right:auto;
}

#header{
    width:960px;
    background-color: gray;
    border:1px solid gray;
       border-radius: 20px;
    float:left;
}

#header-rechts{
    width: 900px;
    height: 60px;
    margin: 0 0 0 30px; 
    text-align: right;
    color: #39362D;
    float: left;
    background-color: gray;
    text-shadow: 6px 5px 6px #CDCDCD;
}

#menu{
    width:900px;
    margin: 0 0 0 30px;
    float:left;
    background-color: gray;
}

#menu li{
    margin: 0 0 10px 100px;
    width: 20px;
    float:left;
}

#menu li a{
    text-decoration:none;
    color: #DFDFDF;
    font-size:12px;
    float: left;
    width: 20px;
}

#menu li a:hover{
    text-decoration: underline;
    color:black;
    font-size:16px;
    font-weight:bold;
    position: absolute;
}

#menu li .activ{
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
}

#menu li .activ:hover{
    font-size: 16px;
    position: absolute;
}

#middle-box {
       width: 700px;
       border: 1px solid #ffffff;
       float: left;
}

#center{
    width: 960px;
    height: auto;
    float: left;
    background: gray;
    margin: 2px 0px 0px 0px;
    border: 1px solid #ffffff;
      border-radius: 10px;
}
#center li{
    margin: 1px 1px 1px 20px;
}

.center-in{
    margin: 10px 30px 10px 30px;
    width: 900px;
    height: auto;
    background: #DFDFDF;
    float: left;
    border: 1px solid #ffffff;
     border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana;
    color: #000000;
    text-shadow: 5px 4px 5px #808080;
    
}

.center-in ul li {
    float: left;
    width: 120px;
    height: 120px;
    margin: 1px 15px 0px 10px;
} 

.center-in ul li a{
   font-size: 14px;
    font-weight: bold;
    font-family: Verdana;
    color: #39362D;
   list-style: none;
   margin-right: 10px;
}
.center-in ul li a:hover{
   font-size: 20px;
    font-weight: bold;
    font-family: Verdana;
    color: #000000;
   list-style: none;
}

#footer{
    width:960px;
    height:20px;
    margin: 1px 0px 0px 0px;
    background-color: gray;
    float:left;
    border: 1px solid #ffffff;
      border-radius: 100px;
   text-align: center;   
}
li{
    list-style-type: none;
}

#container {
padding:0;
margin:0px 0px 0px 0px;
list-style: square;
position:relative;
z-index:10;
width:370px;
height: auto;

font-family:verdana, arial, sans-serif;
font-size:12px;
            }

#container table  {
border-collapse:collapse;
margin:-1px -10px;}

#container li {
float:left;
margin:5px 17px;
display:inline;
color:#000;
text-decoration:none;
width:85px;
height: auto;
cursor:default;}

#container li a.thumb {
display:block;
width:75px;
height: auto;
text-decoration:none;
cursor:default;
border:5px solid #fff;}

#container li a.thumb img {
display:block;
border: 1px solid #808080;}

#container li div {
position:absolute;
left:-9999px;
border:0;
width:580px;
height: auto;
text-align:center;
z-index:-1;
background:#fff;  }

#container li div img {
margin:10px auto;     }

#container :hover {
background:none;  }

#container li a.thumb:hover {
border-color:#ddd;          }

#container li:hover > a {
border-color:#ddd;      }

#container :hover div {
position: absolute;
top: -180px auto;
left: 320px;
z-index: -3;
max-height: 350px;
background: none;      }

#container :hover div img {
border:5px solid #888;    }