.head{	position:absolute;top:50%; left: 50%;
		width:800px;
		height:680px;
		background-image: url(hintergrund.bmp);
		 background-repeat: repeat-y;
		margin-left: -400px;
		margin-top: -340px;
		border:1px solid black;
		}
h2{color:white;
font:bold 38px arial, verdana, sans-serif;
position:absolute;top:0px;left:10px;
margin-top:5px;}

/*Hintergrundbild rechts und links der eigentlichen Seite "hellbraun"*/
body{
background-image: url(bilder/body.jpg);
background-repeat: repeat;

}
/*Rahmen der Startseite*/	
.start{
display:block;
width:750px;
height:524px;
position:absolute;top:140px;left:14px;
border:1px solid black;
padding:0px 10px 0px 10px;
font:normal 14px arial, verdana, sans-serif;
background-image: url(bilder/start.bmp);
z-index:1;}

/*Text auf Startseite*/
.start p{
font:bold 11px arial, verdana, sans-serif;
position:absolute;top:480px;left:536px;
}

.titel p{
font:bold 18px arial, verdana, sans-serif;
position:absolute;top:290px;left:50px;
z-index:2;
}

.link {
font:bold 14px arial, verdana, sans-serif;
position:absolute;top:540px;left:180px;
z-index:2;}
a:link {color: #000; text-decoration: None}
a:visited {color: #000; text-decoration: None}
a:active {color: #000; text-decoration: None}
a:hover {color: #000; text-decoration: Underline}


p{ line-height: 1.5;}
 #einleitung,#mgos,#umsetzung,#kontakt{
float: left;
text-align: justify;
margin-left:0px;
}

a{color:black;}
.htw {
position:absolute;top:10px;left:470px;
text-align:right;
color:white}

.autor{
position:absolute;top:45px;left:65px;
text-align:right;
color:white}

.info_fenster{display:none;} 	

.info {
padding:10px 10px 10px 15px;
}

/*******Abmessungen der Reiter **********************************************************************************/ 
#einleitung{
width:80px;
height:80px;
position:absolute;top:100px;left:20px;
background-image: url(bilder/einleitung.png);
font:bold 14px arial, verdana, sans-serif;
color:black;
}

#mgos{
width:170px;
height:80px;
position:absolute;top:100px;left:115px;
background-image: url(bilder/mgos.png);
font:bold 14px arial, verdana, sans-serif;
color:black;
}

#umsetzung{
width:85px;
height:80px;
position:absolute;top:100px;left:300px;
background-image: url(bilder/umsetzung.png);
font:bold 14px arial, verdana, sans-serif;
color:black;
}

#abbildungen{
width:90px;
height:80px;
position:absolute;top:100px;left:400px;
background-image: url(bilder/abbildungen.png);
font:bold 14px arial, verdana, sans-serif;
color:black;
}

#kontakt{
width:125px;
height:80px;
position:absolute;top:100px;left:505px;
background-image: url(bilder/kontakt.png);
font:bold 14px arial, verdana, sans-serif;
color:black;
}

/*Verhalten der Reiter bei "hover"*/
#einleitung.info:hover{position:absolute;top:90px;left:20px;background-image: url(bilder/einleitung_hover.png);}
#mgos.info:hover{position:absolute;top:90px;left:115px;background-image: url(bilder/mgos_hover.png);}
#umsetzung.info:hover{position:absolute;top:90px;left:300px;background-image: url(bilder/umsetzung_hover.png);}
#abbildungen.info:hover{position:absolute;top:90px;left:400px; background-image: url(bilder/abbildungen_hover.png);}
#kontakt.info:hover{position:absolute;top:90px;left:505px; background-image: url(bilder/kontakt_hover.png);}

.ueberschrift{font:bold 16px arial, verdana, sans-serif; color:black;}

/*Überschriften innerhalb der einzelnen Seiten Bsp.:"Kontakt" */
.hinweis{font:bold  14px arial, verdana, sans-serif;text-decoration: underline;}

/*******Container der einzelnen Reiter **********************************************************************************/
#einleitung.info:hover div{
display:block;
width:720px;
height:514px;
position:absolute;top:50px;left:-6px;
border:1px solid black;
padding:10px 20px 0px 30px;
font:normal 14px arial, verdana, sans-serif;
background-image: url(bilder/reiter.bmp);
background-color:transparent;
z-index:9;}

#mgos.info:hover div{
display:block;
width:720px;
height:514px;
position:absolute;top:50px;left:-101px;
border:1px solid black;
padding:10px 20px 0px 30px;
font:normal 14px arial, verdana, sans-serif;
background-image: url(bilder/reiter.bmp);
background-color:transparent;
z-index:9;}

#umsetzung.info:hover div{
display:block;
width:720px;
height:514px;
position:absolute;top:50px;left:-286px;
border:1px solid black;
padding:10px 20px 0px 30px;
font:normal 14px arial, verdana, sans-serif;
background-image: url(bilder/reiter.bmp);
background-color:transparent;
z-index:9;}

#abbildungen.info:hover div{
display:block;
width:720px;
height:514px;
position:absolute;top:50px;left:-386px;
border:1px solid black;
padding:10px 20px 0px 30px;
font:normal 14px arial, verdana, sans-serif;
background-image: url(bilder/reiter.bmp);
background-color:transparent;
z-index:9;}

#kontakt.info:hover div{
display:block;
width:530px;
height:394px;
position:absolute;top:50px;left:-491px;
border:1px solid black;
padding:130px 20px 0px 220px;
font:normal 14px arial, verdana, sans-serif;
background-image: url(bilder/reiter.bmp);
background-color:transparent;
z-index:9;}

/*******Bilder der einzelnen Reiter **********************************************************************************/
 
/******Bild der Umsetzung + Verhalten bei "hover" + Text ******/
.pics_umsetzung{	
  							
 width:270px;
 position:relative; top:18px;
 height:230px;
 float:right;
 margin-left:8px;
 border:none;
}
.abb_umsetzung{position:absolute; top:205px; left:495px;}
/******Bild der Layerauswahl + Verhalten bei "hover" + Text ******/
.pics_layer{								
 width:130px;
 position:absolute;top:190px;left:600px;
 height:300px;
 float:right;
 margin-left:8px;
 border:1px solid #000;
}

/******Bild der Bildergalerie + Verhalten bei "hover" + Text ******/
.pics_galerie{								
 width:223px;
 position:absolute;top:130px;left:80px;
 height:140px;
 float:right;
 margin-left:8px;
 border:1px solid #000;
 z-index:10;
}
.pics_galerie:hover{z-index:100;width:669px;height:420px;  position:absolute;top:70px;left:50px;}
.abb_bildergalerie{position:absolute; top:95px; left:90px;}
 
/******Bild der Hilfe + Verhalten bei "hover" + Text ******/
.pics_hilfe{								
 width:200px;
 position:absolute;top:200px;left:150px;
 height:200px;
 float:right;
 margin-left:8px;
 border:1px solid #000;
 z-index:10;
}
.pics_hilfe:hover{z-index:100;width:530px;height:500px;  position:absolute;top:10px;left:50px;}
.abb_hilfe{position:absolute; top:390px; left:160px;}
 
/******Bild des Puffers + Verhalten bei "hover" + Text ******/
.pics_puffer{								
 width:237px;
 position:absolute;top:110px;left:290px;
 height:170px;
 float:right;
 margin-left:8px;
 border:1px solid #000;
 z-index:10;
}
.pics_puffer:hover{z-index:100;width:572px;height:410px;  position:absolute;top:40px;left:80px;}
.abb_puffer{position:absolute; top:75px; left:300px;}
 
/******Bild der Objektauswahl + Verhalten bei "hover" + Text ******/ 
.pics_objekt{								
 width:200px;
 position:absolute;top:230px;left:390px;
 height:130px;
 float:right;
 margin-left:8px;
 border:1px solid #000;
 z-index:10;
}
.pics_objekt:hover{z-index:100;width:530px;height:300px;  position:absolute;top:70px;left:100px;}
.abb_objekt{position:absolute; top:350px; left:400px;}
 
/******Bild der Messung + Verhalten bei "hover" + Text ******/
.pics_messen{								
 width:160px;
 position:absolute;top:130px;left:540px;
 height:170px;
 float:right;
 margin-left:8px;
 border:1px solid #000;
 z-index:10;
}
.pics_messen:hover{z-index:100;width:361px;height:390px;  position:absolute;top:70px;left:330px;}
.abb_messen{position:absolute; top:95px; left:550px;}

  
/*******Bilder der Startseite (3 Polariodaufnahmen)****************************************************************/
/*Affe*/
.pics_a{								
 width:230px;
 position:absolute;top:330px;left:490px;
 height:300px;
 float:right;
 margin-left:8px;
 z-index:6;
}
/*Spinne*/
.pics_b{								
 width:230px;
 position:absolute;top:270px;left:550px;
 height:300px;
 float:right;
 margin-left:8px;
 z-index:5;
}
/*Kolibri*/  
.pics_c{								
 width:230px;
 position:absolute;top:210px;left:430px;
 height:300px;
 float:right;
 margin-left:8px;
 z-index:4;
}
/*Verhalten der Polaroidaufnahmen bei "hover" - Bilder werden vergrößert und z-index erhöht um jeweils in der obersten Ebene dargestellt zu werden*/ 
.pics_a:hover{z-index:7;width:250px;height:320px;  position:absolute;top:320px;left:480px;}
.pics_b:hover{z-index:7;width:250px;height:320px;position:absolute;top:260px;left:540px;}
.pics_c:hover{z-index:7;width:250px;height:320px; position:absolute;top:200px;left:420px;}