body {
  background-color:#D6D6D6
}

#box1 {
  background-color: #C0C0C0;
  margin-left: 80px;
  width: 800px;
  top: 10px; left: 10px;
  border-style: solid;
  border-width: 7px;
  border-color: #4F4F4F
}

#navsite {
  position: absolute;
  left: 60px;
  top: 175;
}

/* Code für Hoverbox1 */

a.foto1{
    position: absolute;
    left: 80px;
    top: 220px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto1:hover{z-index:2; background-color:#FFF}

a.foto1 span{display: none;
background-image: url (foto);
}

a.foto1:hover span{
    display:block;
    position:absolute;
    top:0em; left:-2em; width:360px;height:240px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


    /* Code für Hoverbox1 Hochformat */

a.foto1hoch{
    position: absolute;
    left: 80px;
    top: 220px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto1hoch:hover{z-index:2; background-color:#FFF}

a.foto1hoch span{display: none;
background-image: url (foto);
}

a.foto1hoch:hover span{
    display:block;
    position:absolute;
    top:0em; left:-2em; width:240px;height:360px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Code für Hoverbox2 */

a.foto2{
    position: absolute;
    left: 230px;
    top: 370px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto2:hover{z-index:2; background-color:#FFF}

a.foto2 span{display: none;
background-image: url (foto);
}

a.foto2:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-2em; width:360px;height:240px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Code für Hoverbox2 Hochformat*/

a.foto2hoch{
    position: absolute;
    left: 230px;
    top: 370px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto2hoch:hover{z-index:2; background-color:#FFF}

a.foto2hoch span{display: none;
background-image: url (foto);
}

a.foto2hoch:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-2em; width:240px;height:360px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Code für Hoverbox3 */

a.foto3{
    position: absolute;
    left: 80px;
    top: 520px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto3:hover{z-index:2; background-color:#FFF}

a.foto3 span{display: none;
background-image: url (foto);
}

a.foto3:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-2em; width:360px;height:240px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Code für Hoverbox3 Hochformat */

a.foto3hoch{
    position: absolute;
    left: 80px;
    top: 520px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto3hoch:hover{z-index:2; background-color:#FFF}

a.foto3hoch span{display: none;
background-image: url (foto);
}

a.foto3hoch:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-2em; width:240px;height:360px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Code für Hoverbox4 */

a.foto4{
    position: absolute;
    left: 230px;
    top: 670px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto4:hover{z-index:2; background-color:#FFF}

a.foto4 span{display: none;
background-image: url (foto);
}

a.foto4:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-2em; width:360px;height:240px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Code für Hoverbox4 Hochformat */

a.foto4hoch{
    position: absolute;
    left: 230px;
    top: 670px;
    z-index:1; background-color:#FFFFFF;
    color:#000;
    text-decoration:none;
    width: 150px;
    height: 150px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.foto4hoch:hover{z-index:2; background-color:#FFF}

a.foto4hoch span{display: none;
background-image: url (foto);
}

a.foto4hoch:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-2em; width:240px;height:360px;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}



#box2d {
  position: absolute;
  left: 230px;
  top: 220px;
  background-color: #FFFFFF;
  width: 150px;
  height: 150px;
  margin: 1px;
  padding: 1px;
}

#box3d {
  position: absolute;
  left: 80px;
  top: 370px;
  background-color: #FFFFFF;
  width: 150px;
  height: 150px;
  margin: 1px;
  padding: 1px;
}

#box4d {
  position: absolute;
  left: 230px;
  top: 520px;
  background-color: #FFFFFF;
  width: 150px;
  height: 150px;
  margin: 1px;
  padding: 1px;
}

#box5d {
  position: absolute;
  left: 80px;
  top: 670px;
  background-color: #F2F2F2;
  width: 150px;
  height: 150px;
  margin: 1px;
  padding: 1px;
}

#box6 {
  font-family: Times, Verdana, sans-serif;
  width: 35%;
  height: 40px;
  position: absolute;
  right: 20%;
  top: 250px;
  background-color: #D6D6D6;
  margin: 0px;
  padding: 0px;
}

#box7 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: justify;
  width: 35%;
  height: 50%;
  position: absolute;
  right: 20%;
  top: 320px;
  background-color: #D6D6D6;
  margin: 1px;
  padding: 10px;
}

#box8 {
  position: relative;
  top: 500px;
  text-align: center;
}


#box9 {
  position: relative;
  top: 600px;
  text-align: center;
}


/* Code für Hoverbox Karte1 */

a.map1{
    position: absolute;
    left: 230px;
    top: 250px;
    z-index:1; background-color:#0040FF;
    color:#000;
    text-decoration:none;
    width: 255px;
    height: 255px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.map1:hover{z-index:2; background-color:#FFF}

a.map1 span{display: none;
background-image: url (foto);
}

a.map1:hover span{
    display:block;
    position:absolute;
    top:-2em; left:-11em;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#0040FF;
    text-align: center}


/* Code für Hoverbox Karte2 */

a.map2{
    position: absolute;
    left: 485px;
    top: 505px;
    z-index:1; background-color:#0040FF;
    color:#000;
    text-decoration:none;
    width: 255px;
    height: 255px;
    margin: 1px;
    border: single;
    padding: 1px;}

a.map2:hover{z-index:2; background-color:#FFF}

a.map2 span{display: none;
background-image: url (foto);
}

a.map2:hover span{
    display:block;
    position:absolute;
    top:-7em; left:0em;
    margin: 2px;
    padding: 3px;
    border:1px solid #000000;
    background-color:#C0C0C0; color:#FFFFFF;
    text-align: center}


/* Textbox zu Karte1 */

#map1-text {
  position: absolute;
  left: 485px;
  top: 250px;
  background-color: #C0C0C0;
  width: 255px;
  height: 255px;
  padding-left: 10%;
  padding-top: 30%;
  border-style: solid;
  border-width: 2px;
  border-color: #FFFFFF;
}

/* Textbox zu Karte2 */
#map2-text {
  position: absolute;
  left: 230px;
  top: 505px;
  background-color: #C0C0C0;
  width: 255px;
  height: 255px;
  padding: 10%;
  border-style: solid;
  border-width: 2px;
  border-color: #FFFFFF;
}

a.map3{
    position: absolute;
    left: 485px;
    top: 250px;
    z-index:1; background-color:#0040FF;
    color:#000;
    text-decoration:none;
    width: 255px;
    height: 255px;
    margin: 1px;
    border: single;
    padding: 1px;}


a.map4{
    position: absolute;
    left: 230px;
    top: 505px;
    z-index:1; background-color:#0040FF;
    color:#000;
    text-decoration:none;
    width: 255px;
    height: 255px;
    margin: 1px;
    border: single;
    padding: 1px;}