/* ~~~ Fuer die ganze Seite ~~~ */

* {
padding: 0;
margin: 0;
}

body {  
color: #000000;
background-color: #ffffff;
background: url(images/hintergrund.gif);
font-family: Georgia, Times, Tahoma, Verdana, serif;
font-size: 11px;
text-decoration: none;
}

a:link, a:visited {
text-decoration: none;
border-bottom: 1px solid #999999;
color: #555555;
}

a:hover {
text-decoration: none;
border-bottom: 1px solid #555555;
color: #333333;
}

a:active {
text-decoration: none;
border-bottom: 1px solid #555555;
color: #333333;
}

/* ~~~ Eigenschaften Text ~~~ */

cite {font-size: 9px; font-style: normal}

p {
font-family: Georgia, Times, Times New Roman, serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
line-height: 18px;
padding-top: 10px;
}

h1, h2, h3 {
font-size: 11px;
font-weight: bold;
line-height: 18px;
}

h4 {
font-size: 11px;
font-weight: normal;
line-height: 20px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 70px;
}

h5 {
font-family: Georgia, Times, Times New Roman, serif;
font-size: 13px;
font-weight: normal;
color: 333333;
padding: 10px;
}

h6 {
font-family: Tahoma, Verdana, sans-serif;
font-size: 11px;
font-weight: normal;
color: 333333;
padding: 10px;
}



.left {
padding-left: 17px;
}


/* ~~~ Navigation Register oben ~~~ */

#nav {
position: absolute;
top: 24px;
left: 500px;
list-style-type: none;
}

#nav li {
float: left;
z-index: 0;
}

#nav a {
display: block;
width: 60px;
height: 80px;
border: 0px;
text-indent: -100em;
z-index: 0;
}

#nav a:hover {background-position: 0px -10px}

#register1 {
background: url(images/schliessen.gif) 0px -12px no-repeat;
}

#register2 {
background: url(images/reiter_bio_normal.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register2a {
background: url(images/reiter_bio_aktiv.gif) 0px -16px no-repeat;
margin-left: 5px;
}


#register3 {
background: url(images/reiter_buehne_normal.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register3a {
background: url(images/reiter_buehne_aktiv.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register4 {
background: url(images/reiter_buecher_normal.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register4a {
background: url(images/reiter_buecher_aktiv.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register5 {
background: url(images/reiter_presse_normal.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register5a {
background: url(images/reiter_presse_aktiv.gif) 0px -16px no-repeat;
margin-left: 5px;
}

#register6 {
background: url(images/reiter_kontakt_normal.gif) 0px -16px no-repeat;
margin-left: 5px;
}


/* ~~~ Navigation Buehne mit Komponisten ~~~ */

#nav_komponisten {
position: absolute;
top: 0px;
left: 0px;
list-style-type: none;
}

#nav_komponisten li {
float: left;
z-index: 0;
}

#nav_komponisten a {
display: block;
border: 0px;
text-indent: -100em;
z-index: 0;
}

#magie {
position: absolute;
top: 291px;
left: 151px;
background: url(images/magie_normal.jpg) no-repeat;
width: 100px;
height: 90px;
}

a#magie:hover {
background: url(images/magie_rollover.jpg) no-repeat;
width: 180px;
height: 90px;
}

#haydn {
position: absolute;
top: 135px;
left: 244px;
background: url(images/haydn_normal.jpg) no-repeat;
width: 100px;
height: 180px;
}

a#haydn:hover {
background: url(images/haydn_rollover.jpg) no-repeat;
}

#mozart {
position: absolute;
top: 145px;
left: 0px;
background: url(images/mozart_normal.jpg) no-repeat;
width: 120px;
height: 125px;
}

a#mozart:hover {
background: url(images/mozart_rollover.jpg) no-repeat;
}

#schubert {
position: absolute;
top: 130px;
left: 103px;
background: url(images/schubert_normal.jpg) no-repeat;
width: 135px;
height: 125px;
}

a#schubert:hover {
background: url(images/schubert_rollover.jpg) no-repeat;
}

#bach {
position: absolute;
top: 72px;
left: 187px;
background: url(images/bach_normal.jpg) no-repeat;
width: 170px;
height: 125px;
}

/*a#bach:hover {
background: url(images/bach_rollover.jpg) no-repeat;
}*/

/* ~~~ Navigation Buecher ~~~ */

#nav_buecher {
position: absolute;
top: 0px;
left: 0px;
list-style-type: none;
}

#nav_buecher li {
float: left;
z-index: 0;
}

#nav_buecher a {
display: block;
border: 0px;
text-indent: -100em;
z-index: 0;
}

#buch_mozart {
position: absolute;
top: 280px;
left: 100px;
background: url(images/mozart_klein.jpg) no-repeat;
width: 150px;
height: 240px;
}

a#buch_mozart:hover {
background: url(images/mozart_gross.jpg) no-repeat;
width: 150px;
height: 240px;
}

#buch_mahler {
position: absolute;
top: 80px;
left: 80px;
background: url(images/mahler_klein.jpg) no-repeat;
width: 150px;
height: 240px;
}

a#buch_mahler:hover {
background: url(images/mahler_gross.jpg) no-repeat;
width: 150px;
height: 240px;
}


#buch_haydn {
position: absolute;
top: 80px;
left: 264px;
background: url(images/haydn_klein.jpg) no-repeat;
width: 150px;
height: 240px;
}

a#buch_haydn:hover {
background: url(images/haydn_gross.jpg) no-repeat;
width: 150px;
height: 240px;
}


#buch_lebensstil {
position: absolute;
top: 280px;
left: 264px;
background: url(images/lebensstil_klein.jpg) no-repeat;
width: 150px;
height: 240px;
}

a#buch_lebensstil:hover {
background: url(images/lebensstil_gross.jpg) no-repeat;
}



/* ~~~ Navigation Presse ~~~ */

#nav_presse {
position: absolute;
top: 0px;
left: 0px;
list-style-type: none;
}

#nav_presse li {
float: left;
z-index: 0;
}

#nav_presse a {
display: block;
border: 0px;
text-indent: -100em;
z-index: 0;
}

#presse_fotos {
position: absolute;
top: 130px;
left: 160px;
background: url(images/fotos_bild.jpg) no-repeat;
width: 180px;
height: 70px;
}

a#presse_fotos:hover {
background: url(images/fotos_bild_over.jpg) no-repeat;
}

#presse_biografie {
position: absolute;
top: 250px;
left: 160px;
background: url(images/biografie_bild.jpg) no-repeat;
width: 180px;
height: 70px;
}

a#presse_biografie:hover {
background: url(images/biografie_bild_over.jpg) no-repeat;
}

#presse_zitate {
position: absolute;
top: 370px;
left: 160px;
background: url(images/zitate_bild.jpg) no-repeat;
width: 180px;
height: 70px;
}

a#presse_zitate:hover {
background: url(images/zitate_bild_over.jpg) no-repeat;
}




/* ~~~ Navigation Reiter rechts ~~~ */


#nav_stuecke {
position: absolute;
top: 24px;
left: 325px;
list-style-type: none;
}

#nav_stuecke li {
float: left;
z-index: 0;
}

#nav_stuecke a {
display: block;
width: 70px;
height: 140px;
border: 0px;
text-indent: -200em;
z-index: 0;
margin-top: 2px;
}

#nav_stuecke a:hover {background-position: 10px 0px}

#zum_stueck {
background: url(images/reiter_stueck.gif) no-repeat;
}

#zum_stuecka {
background: url(images/reiter_stueck_aktiv.gif) no-repeat;
}

#zum_ansehen {
background: url(images/reiter_ansehen.gif) no-repeat;
}

#zum_ansehena {
background: url(images/reiter_ansehen_aktiv.gif) no-repeat;
}
#zum_lesen {
background: url(images/reiter_lesen.gif) no-repeat;
}

#zum_lesena {
background: url(images/reiter_lesen_aktiv.gif) no-repeat;
}




/* Bereiche */


#container {
display: block;
width: 920px;
height: auto;
position: relative;
margin-left: auto;
margin-right: auto;
}

#buch_start {
background: url(images/buch_geschlossen.jpg) no-repeat;
position: relative;
top: 60px;
left: 400px;
width: 500px;
height: 576px;
text-indent: -100em;
}

#buch_offen {
background: url(images/buch_offen.jpg) no-repeat;
position: relative;
top: 60px;
left: 0px;
width: 900px;
height: 600px;
z-index: 10;
}

#buch_link {
position: absolute;
top: 0px;
left: 50px;
display: block;
width: 442px;
height: 562px;
border: 0px;
text-indent: -100em;
}

a:hover#buch_link {
background: url(images/ecke.gif) bottom right no-repeat;
}


#zettel {
background: url(images/zettel1.jpg) no-repeat;
width: 265px;
height: 400px;
position: absolute;
top: 140px;
left: 50px;
border: 0px;
}

#zettel p {
position: relative;
width:180px;
height: 250px;
top: 45px;
left: 30px;
overflow: auto}

#zettel h5 {
position: relative;
width: 175;
height: 30px;
top: 60px;
left: 4px}


#unten {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
text-align: center;
}

#left {
position: absolute;
top: 50px;
left: 100px;
width: 260px;
height: 460px;
}

#left_buehne {
background: url(images/buehne.jpg) no-repeat;
position: absolute;
top: 70px;
left: 74px;
width: 400px;
height: 460px;
}


#right {
position: absolute;
top: 55px;
left: 540px;
width: 260px;
height: 460px;
}


img {
border: 0px;

}

#buecher {
background: url(images/buecher.gif) 115px 0px no-repeat;
display: block;
width: 330px;
height: 20px;
border: 0px;
position: relative;
top: -30px;
left: -22px;
}

#buecher_innen {
width: 330px;
position: relative;
text-align: center;
top: 40px;
left: -10px}

#buecher_innen p {
				position: relative;
				text-align: left;
				overflow: auto;
				height: 280px;
				padding-right: 10px;
				clear: both;
				width: 300px;
				left: 10px;
				}
				
				
#buecher_innen p#neu {
				position: relative;
				text-align: left;
				overflow: auto;
				height: 180px;
				padding-right: 10px;
				clear: both;
				width: 300px;
				left: 10px;
				}
				
				
#buecher_innen p#gross {
				position: relative;
				text-align: left;
				overflow: auto;
				height: 380px;
				padding-right: 10px;
				clear: both;
				width: 200px;
				left: 60px;
				}

#buecher_innen p#gross1 {
				position: relative;
				text-align: left;
				overflow: auto;
				height: 380px;
				padding-right: 10px;
				clear: both;
				width: 400px;
				left: -40px;
				}

#buecher_innen p#gross2 {
				position: relative;
				text-align: left;
				overflow: auto;
				height: 380px;
				padding-right: 10px;
				clear: both;
				width: 280px;
				left: 0px;
				}

#buecher_innen h5 {
				clear: both;
				text-align: left;
				padding-bottom: 5px;
				padding-top: 20px}
				
#buecher_innen_links{
				float:left;
				width: 200px;
				text-align: right;}
				
#buecher_innen_links h1{
				font-size: 16px}
				
#buecher_innen_rechts {
				float: right;
				width: 130px;}



#presse {
background: url(images/presse.gif) 115px 0px no-repeat;
display: block;
width: 330px;
height: 20px;
border: 0px;
position: relative;
top: -30px;
left: -22px;
}

#presse_innen {
width: 330px;
position: relative;
text-align: center;
top: 40px;
left: -0px}

#presse_innen p {
				position: relative;
				text-align: left;
				overflow: auto;
				height: 380px;
				padding-right: 5px;
				clear: both;
				width: 300px;
				left: 10px;
				}

#buehne {
background: url(images/buehne.gif) 115px 0px no-repeat;
display: block;
width: 320px;
height: 20px;
border: 0px;
position: relative;
top: -30px;
left: -22px;

}

#buehne_innen {
position: relative;
text-align: center;
top: 40px;
left: -10px}

#buehne_innen p {
				position: relative;
				top: 15px;
				text-align: left;
				overflow: auto;
				height: 400px;
				padding-right: 10px;
				}
				
#buehne_innen h1 {
				position: relative;
				left: 10px;}

#buehne_ansehen p {text-align: center;
					position: relative;
					left: 12px;}

#buehne h5 {
			position: relative;
			font-size: 11px;
			color: #333333}