/*=======================================================
Stand: April 2008
datei: bildschirm.css
datum: 3.4.2008
Autor: T.Trölsch
Aufbau: 1.Kalibrierung und allg. Styles
		2.Styles für Layoutbereiche
		3.sonstige Styles
========================================*/

/*=================================
	1.Kalibrierung und allg. Styles
====================================*/
/*Allgemeine Selektoren*/

body
{ /* Gestaltet das HTML-Element mit dem namen body */
	Background-color:black; /*Hintergrundfarbe*/
	font-family: Arial,Helvetica, sans-serif;}
	
	
/*==== kopf===*/
	
/*====  wrapper===*/
	
#wrapper{
	position:relative;
	width:1300px; 
	height:1200px;
	background-image:url(img/hg_jong.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper1{
	position:relative;
	width:1100px; 
	height:1300px;
	background-image:url(img/start.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper2{
	position:relative;
	width:1300px; 
	height:1200px;
	background-image:url(img/HG-magie.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper3{
	position:relative;
	width:1300px; 
	height:1200px;
	background-image:url(img/HG-kontakt.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper4{
	position:relative;
	width:1300px; 
	height:1200px;
	background-image:url(img/HG-walk.jpg);
	margin-right: auto;/*walkacts*/}
	
#wrapper5{
	position:relative;
	width:1100px; 
	height:1700px;
	background-image:url(img/HG-vita.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper6{
	position:relative;
	width:1300px; 
	height:1200px;
	background-image:url(img/HG-presse.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper7{
	position:relative;
	width:1100px; 
	height:800px;
	background-image:url(img/HG-faq.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
#wrapper8{
	position:relative;
	width:1100px; 
	height:800px;
	background-image:url(img/HG-galerie.jpg);
	margin-right: auto;/*Abstand rechts*/}

#wrapper9{
	position:relative;
	width:1300px; 
	height:1200px;
	background-image:url(img/HG-impressum.jpg);
	margin-right: auto;/*Abstand rechts*/}

#wrapper10{
	position:relative;
	width:1100px; 
	height:750px;
	background-image:url(img/HG-video.jpg);
	margin-right: auto;/*Abstand rechts*/}

#wrapper11{
	position:relative;
	width:1100px; 
	height:800px;
	background-image:url(img/HG-gal.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
	#wrapper12{
	position:relative;
	width:1100px; 
	height:800px;
	background-image:url(img/HG-links.jpg);
	margin-right: auto;/*Abstand rechts*/}
	
	#wrapper13{
	position:relative;
	width:1100px; 
	height:800px;
	background-image:url(img/HG-jong1.jpg);
	margin-right: auto;/*Abstand rechts*/}

#wrapper14{
	position:relative;
	width:1300px; 
	margin-right: auto;/*Abstand rechts*/}

#wrapper15{
    position:relative;
	width:1100px; 
	height:6900px;
  background-image:url(img/HGlexikon.jpg); 
  background-repeat:no-repeat; 
   background-attachment:fixed;}


/*==== Ende wrapper===*/


/*==== Boxen===*/
#box1{
    position:absolute;
    top: 0;
    left: 125px;
    width:300px;
    height:350px;
    background-color:black;
    border: 0px dotted black;
    padding: 10px;
    margin: 10px;
    margin-top:180px;
    -moz-border-radius:10px;
   -khtml-border-radius:10px;
    *html div.box1{height:1%;}/*hasLayout für IE6*/}    
    
#box2{
     position:absolute;
      top: 0;
     width:300px;
     height:350px;
     background-color:black;
     padding: 10px;
     border: 0px solid black;
     margin: 10px;
     margin-left: 550px;
         margin-top:180px;

         -moz-border-radius:10px;
   -khtml-border-radius:10px;
    *html div.box1{height:1%;}/*hasLayout für IE6*/}
    
    #box3{
     position:absolute;
     top: 180px;
     width:500px;
     height:390px;
     background-color:black;
     padding: 10px;
     padding-bottom: 5px;
     border: 0px solid black;
     margin: 0px;
     margin-left: 140px;
     -moz-border-radius:10px;
   -khtml-border-radius:10px;
    *html div.box1{height:1%;}/*hasLayout für IE6*/}
    
     #box4{
     position:absolute;
     left: 80px;
     width:500px;
     height:500px;
     padding-bottom: 150px;
     }
   
     /*====ende  Boxen===*/
   
/*====Textbereich===*/
    
  #textbereich{
   position:absolute;
   left: 250px;
   width:350px;
   height:100px;
   padding-top:140px;}  
   
   #textbereich1{
   position:relative;;
   left: 140px;
   width:360px;
   height:400px;
   padding-top:110px;} 
   
    #textbereich1a{
   position:absolute;
   left: 140px;
   width:700px;
   height:400px;
   padding-top:90px;} 

  #textbereich1b{
   position:absolute;
   left: 115px;
   width:700px;
   height:400px;
   padding-top:65px;} 
   
   #textbereich2{
   position:absolute;
   left: 540px;
   width:350px;
   height:100px;
   padding-top:140px;} 
   
     
   #textbereich3{
   position:absolute;
   left: 600px;
   width:300px;
   height:100px;
   padding-top:150px;} 
   
   
   
   #textbereich4{
   position:absolute;
   left: 310px;
   width:300px;
   height:100px;
   padding-top:490px;}
   
  
   #textbereich5{
   position:absolute;
   left: 145px;
   width:410px;
   height:400px;
   padding-top:130px;} 
   
   #textbereich6{
   position:absolute;
   left: 145px;
   width:650px;
   height:400px;
   padding-top:110px;}
   
   #textbereich7{
   position:absolute;
   left: 540px;
   width:200px;
   height:100px;
   padding-top:145px;} 

    #textbereich8{
   position:absolute;
   left: 605px;
   padding-top:105px;} 
   
    #textbereich9{
  position:absolute;
   left: 118px;
   width:780px;
   height:300px;
   top:830px;} 


  #textbereich10{
  position:absolute;
  left: 150px;
  width:700px;
  height:200px;
  top:860px;} 
  
  
   #textbereich11{
  position:absolute;
   left: 115px;
   width:700px;
   height:300px;
   top:800px;} 
   
    #textbereich12{
  position:absolute;
   left: 115px;
   width:770px;
   height:300px;
   top:30px;} 

 /*==== Ende Textbereich===*/  
  
   #navibereich2{
   position:absolute;
   left: 58px;
   width:140px;
   height:600px;
   margin-top: 160px;}
   
   
   #navibereich3{
   position:absolute;
   left: 0px;
   width:140px;
   height:10px;
   margin-top: 720px;}



/*==== Ende navi===*/ 
 
/*==== Scroll Referenz===*/ 


div#referenz {
background-color:black;
position:absolute;
left:600px;
top: 250px;
height: 372px;
overflow: auto;
padding: 5px 10px 10px 20px;
width: 250px;
}

 /*==== Ende Scroll Referenz===*/ 


 

  
p {color:#F0ffff;font-family:arial, sans-serif; font-size:15px;line-height: 1.2;}
h1 {font-family:lucida Grande, sans-serif; color:#99CCCC;font-size:24px;letter-spacing:0.2em; }
h2 { font-family:lucida Grande, sans-serif; color:#99CCCC;font-size:22px;letter-spacing:0.2em; }
h3 { color:#99CCCC; font-size:13px; font-family:arial,sans-serif;line-height: 1.0;}
<!--a{text-decoration:none; font-size:16px; font-family:arial,sans-serif;}
<!--a.extra{text-decoration:none; font-size:14px; font-family:arial,sans-serif;}
a.extra:link { color:#99cccc;}
a.extra:visited { color:#99cccc; }
a.extra: { color #99cccc; }
a.extra:hover {color:#CC9900;}
a:link { color:#99cccc;}
a:visited { color:#99cccc; }
a:active { color:red; }
a:hover {color: white;}




/*==== Navigation===*/


/*==== Navigation===*/

ul#nav-1 {
list-style: none;
}

ul#nav-1, ul#nav-1 li {
height: 33px;
}

ul#nav-1 {
margin: 20px 0 0 30px;

}

ul#nav-1 li {
float: left;
}
/*====magie===*/
ul#nav-1 #magie, ul#nav-1 #magie-an{
background-image:url(img/navi1.jpg);
width:101px;
}

ul#nav-1 #magie :focus, ul#nav-1 #magie:hover, ul#nav-1 #magie:active {
background-image: url(img/navi1a.jpg);
}

ul#nav-1 #magie-an {
background-image: url(img/navi1b.jpg);
}
/*====jonglage===*/
ul#nav-1 #jonglage, ul#nav-1 #jonglage-an {
background-image:url(img/navi2.jpg);
width:124px;
}

ul#nav-1 #jonglage :focus, ul#nav-1 #jonglage :hover, ul#nav-1 #jonglage :active{
background-image: url(img/navi2a.jpg);
}

ul#nav-1 #jonglage-an {
background-image: url(img/navi2b.jpg);
}

/*====messe===*/

ul#nav-1 #messe, ul#nav-1 #messe-an {
background: url(img/navi3.jpg);
width:91px;
}

ul#nav-1 #messe :focus, ul#nav-1 #messe :hover, ul#nav-1 #messe :active {
background: url(img/navi3a.jpg);
}

ul#nav-1 #messe-an {
background: url(img/navi3b.jpg);
}

/*====galerie===*/

ul#nav-1 #galerie, ul#nav-1 #galerie-an {
background: url(img/navi4.jpg);
width: 110px;
}


ul#nav-1 #galerie :focus, ul#nav-1 #galerie :hover, ul#nav-1 #galerie :active {
background: url(img/navi4a.jpg);
}

ul#nav-1 #galerie-an {
background: url(img/navi4b.jpg);
}

/*====referenz===*/

ul#nav-1 #referenzen, ul#nav-1 #referenzen-an {
background: url(img/navi5.jpg);
width: 131px;
}

ul#nav-1 #referenzen :focus, ul#nav-1 #referenzen :hover, ul#nav-1 #referenzen :active {
background: url(img/navi5a.jpg);
}

ul#nav-1 #referenzen-an {
background: url(img/navi5b.jpg);
}

/*====presse===*/

ul#nav-1 #presse, ul#nav-1 #presse-an {
background: url(img/navi6.jpg);
width: 104px;
}

ul#nav-1 #presse :focus, ul#nav-1 #presse :hover, ul#nav-1 #presse :active {
background: url(img/navi6a.jpg);
}

ul#nav-1 #presse-an {
background: url(img/navi6b.jpg);
}

/*====faq===*/

ul#nav-1 #faq, ul#nav-1 #faq-an {
background: url(img/navi7.jpg);
width: 77px;
}

ul#nav-1 #faq :focus, ul#nav-1 #faq :hover, ul#nav-1 #faq :active{
background: url(img/navi7a.jpg);
}

ul#nav-1 #faq-an {
background: url(img/navi7b.jpg);
}

/*====kontakt===*/

ul#nav-1 #kontakt, ul#nav-1 #kontakt-an {
background: url(img/navi8.jpg);
width: 108px;
}

ul#nav-1 #kontakt :focus, ul#nav-1 #kontakt :hover, ul#nav-1 #kontakt :active {
background: url(img/navi8a.jpg);
}

ul#nav-1 #kontakt-an {
background: url(img/navi8b.jpg);
}



ul#nav-1 a, ul#nav-2 li a, ul#nav-2 li span {
display: block;
text-decoration: none;
}

ul#nav-1 a {
height: 100%;
text-indent: -999em;
}




/*======Fussbereich======*/

#fussbereich{
   position:absolute;
   left: 115px;
   width:700px;
   height:400px;
   padding-top:850px;} 
	/*======Fussbereich======*/


ul#foto, div.foto {
position: relative;
left: 50px;
top: 90px;
width: 664px;
}

ul#foto {
list-style: none;
}

li#bild-1,li#bild-2,li#bild-3,li#bild-4,li#bild-5,li#bild-6,li#bild-7,li#bild-8,
li#bild-9,li#bild-10,li#bild-11,li#bild-12,li#bild-13,li#bild-14,li#bild-15, li#bild-16{
float: left;
margin: 16px 16px 0 0;

}

li a {
display: block;
height: 100px;
}



li#bild-1 a {
background: url(img/bild-1-kl.jpg);
width: 150px;

}
li#bild-1 a:hover {
background-image:url(img/bild-1a-kl.jpg);
} 

li#bild-2 a {
background: url(img/bild-2-kl.jpg);
width: 150px;
}
li#bild-2 a:hover {
background-image:url(img/bild-2a-kl.jpg);
}

li#bild-3 a {
background: url(img/bild-3-kl.jpg);
width: 150px;
}
li#bild-3 a:hover {
background-image:url(img/bild-3a-kl.jpg);
}

li#bild-4 a {
background: url(img/bild-4-kl.jpg);
width: 150px;
}
li#bild-4 a:hover {
background-image:url(img/bild-4a-kl.jpg);
}

li#bild-5 a {
background: url(img/bild-5-kl.jpg);
width: 150px;

}
li#bild-5 a:hover {
background-image:url(img/bild-5a-kl.jpg);
}

li#bild-6 a {
background: url(img/bild-6-kl.jpg);
width: 150px;

}
li#bild-6 a:hover {
background-image:url(img/bild-6a-kl.jpg);
}

li#bild-7 a {
background: url(img/bild-7-kl.jpg);
width: 150px;
}
li#bild-7 a:hover {
background-image:url(img/bild-7a-kl.jpg);
}


li#bild-8 a {
background: url(img/bild-8-kl.jpg);
width: 150px;
}
li#bild-8 a:hover {
background-image:url(img/bild-8a-kl.jpg);
}

li#bild-9 a {
background: url(img/bild-9-kl.jpg);
width: 150px;
}
li#bild-9 a:hover {
background-image:url(img/bild-9a-kl.jpg);
}

li#bild-10 a {
background: url(img/bild-11-kl.jpg);
width: 150px;
}
li#bild-10 a:hover {
background-image:url(img/bild-11a-kl.jpg);
}

li#bild-11 a {
background: url(img/bild-13-kl.jpg);
width: 150px;
}
li#bild-11 a:hover {
background-image:url(img/bild-13a-kl.jpg);
}

li#bild-12 a {
background: url(img/bild-10-kl.jpg);
width: 150px;
}
li#bild-12 a:hover {
background-image:url(img/bild-10a-kl.jpg);
}

li#bild-13 a {
background: url(img/bild-16-kl.jpg);
width: 150px;
}
li#bild-13 a:hover {
background-image:url(img/bild-16a-kl.jpg);
}

li#bild-14 a {
background: url(img/bild-15-kl.jpg);
width: 150px;
}
li#bild-14 a:hover {
background-image:url(img/bild-15a-kl.jpg);
}

li#bild-15 a {
background: url(img/bild-14-kl.jpg);
width: 150px;
}
li#bild-15 a:hover {
background-image:url(img/bild-14a-kl.jpg);
}
li#bild-16 a {
background: url(img/bild-12-kl.jpg);
width: 150px;
}
li#bild-16 a:hover {
background-image:url(img/bild-12a-kl.jpg);
}


#formular 
{
color:red;
}

a.link12 {
position:absolute;
top:0px;
left:0px;
width:453px;
height:55px;
border:0px solid #000000;
background-image:url(img/lexikon.png);
}

a.link12:hover {
background-image:url(img/lexikon1.png);
}
/*=================================
	ENDE
====================================*/