/* CSS Document */

body {
	margin: 0;
	padding: 0;
	color: #161616;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #320A1E;
}

#wrapper {
	width: 770px;
	height: 494px;
	margin-top: -247px; /* Halber Wert aus Höhe "height" ... mit negativem Vorzeichen */
	margin-left: -385px; /* Halber Wert aus Breite "width"  ... mit negativem Vorzeichen */
	padding: 0;
	top: 50%;
	left: 50%;
	position: absolute;
	background-image: url(media/hg_kachelung01.jpg);
	background-color: #D89932; /* #dddddd; */
	border: 1px solid #DC9C30;
}

#linksoben {
	width: 456px;
	height: 292px;
	background-color: #D89932;
	background-image: url(media/bg4_petra_60.jpg); /* Hintergrundbild von Petra */
	background-repeat: no-repeat;
/*	border: 1px solid black;*/
	position: absolute;
	top: 0;
	left: 0;
}

#linksoben img.ueberschrift {
	position: absolute;
	top: 38px; /* 56px; bei urspruenglicher Ueberschriftengroeße */
/*	border: 1px solid black;*/
}

/* Neu: Seit 07.06.2006 */
#bg_petra_un {
	width: 240px;
	height: 92px;
	background-color: #D89932;
	background-image:url(media/bg_petra_un60.jpg); /* unterer Teil von Hintergrundbild von Petra */
	background-repeat: no-repeat;
/*	border: 1px solid black;*/
	position: absolute;
	top: 295px;
	left: 0px;
}




#logo {
	width: 202px;
	height: 79px;
	background-color: #D89932;
	background-image: url(media/logo_60.jpg);
	background-repeat: no-repeat;
/*	border: 1px solid black;*/
	position: absolute;
	top: 0;
	right: 40px;
}

#content {
	position: absolute;
	width: 695px; /*675px;*/ /*670px;*/
	height: 170px; /*165px;*/
	margin-left: 48px;
	margin-right: 20px;/*44px;*/ /*48px;*/
	top: 105px; /*115px;*/
	/*	background-color: #FFCC99;
	border: 1px solid black; */
	z-index: 10; /* Text soll vor großem Bild rechts stehen */
}

#content_video { /* NEU ab 18.03.2009 ... ganze Seite Platz für YouTube-Video */
	position: absolute;
	width: 475px; /*450px;*//*675px; *//*670px;*/
	height: 150px; /*170px;*/ /*165px;*/
	margin-left: 48px;
	margin-right: 44px; /*48px;*/
	top: 50px; /*105px;*/ /*115px;*/
	/*	background-color: #FFCC99;
	border: 1px solid black; */
	z-index: 11; /* Text soll vor großem Bild rechts stehen */
}


#kasten_li span.txtfett, #kasten_re span.txtfett { /* Texte werden fett dargestellt */
	font-size: 12px;
	color: #3F2016;
	font-weight: bold;
}

#kasten_li, #kasten_re {
	width: 318px;
	height: 168px; /* eigentlich 170px wie #content ... aber vorsorglich mal 2px weniger wir Kästen genommen */
/*	background-color: #FF33CC;*/
/*	border: 1px solid black;*/
	float: left;
}

#kasten_li {
	margin-right: 30px;
}

/* NEU/Test ab 05.07.2006. Damit das Foto vom Pianisten weiter nach rechts gerückt werden kann. */
/* Breite-Angabe width zu #kasten_re steht zwar bereits weiter oben, wird nun jedoch testweise "überschrieben" */
#kasten_re {
	width: 347px;/*322px;*/ /* 21.04.2011: Mehr Platzbedarf für Text und Bild nach rechts */
}

#unten {
	width: 678px; /* eigentlich richtig: 670px; Aber Großbild etwas mehr nach rechts ... u.a. wegen Schlagschatten */
	height: 140px;
	margin-left: 48px;
/*	background-color: #DCC8BF;*/
	background-image: url(media/ttofus_60.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
/*	border: 1px solid black;*/
	position: absolute;
	top: 306px;
}

/*#unten.kleinpic {*/ /* falscher Befehl */
.kleinpic {
/*	top: 0;*/
	width: 100px;
	margin-right: 61px; /* Abstand nach rechts bei kleinen Bildern */
/*	background-color:#FF0000;
	border: 3px solid black;*/
	float: left;
}

.grossbild {
	width: 129px;
	position: absolute;
	right: 0;
/*	background-color: #33FF00;
	border: 1px solid black;*/
}

.grossbild2 {
	width: 246px;
	position: absolute;
	top: 162px;
	right: 0;
	z-index: 10; /* Großbild soll in der Reihenfolge vor den Navigationselementen (z.B. vor "Hörproben" unten stehen */
}

.grossbild3_hg {
	width: 246px;
	height: 293px;
	background-image: url(media/pic27_50.jpg);
	position: absolute;
	top: 162px;
	right: 0;
	z-index: 10; /* Großbild soll in der Reihenfolge vor den Navigationselementen (z.B. vor "Hörproben" unten stehen */
}

.grossbild2micro {
	width: 183px;
	position: absolute;
	top: 115px;
/*	right: 0; // Positionierung ganz rechts außen (im Hauptrahmen wrapper)*/
	margin-left: 535px; /* Neu! Test 23.06.06  */
	z-index: 10; /* Großbild soll in der Reihenfolge vor den Navigationselementen (z.B. vor "Hörproben" unten stehen */
}

/* NEU ab 05.07.2006. Kleinfoto von Pianisten auf "The two of us"-Seite */
.kleinbild1 {
/*	width: 246px;*/
/*	position: absolute;*/
	float: right;
	margin-left: 4px; 
/*	border: 1px solid grey;*/
/*	top: 0;*/ /*175px;*/
/*	right: 0;*/
	z-index: 10; /* Großbild soll in der Reihenfolge vor den Navigationselementen (z.B. vor "Hörproben" unten stehen */
}

#footer {
	position: absolute;
	width: 758px; /*770px;*/ /*width: 314px;*/
	height: 30px; /*height: 30px;*/
	background-image:url(media/footer_770x39_01.jpg); /* NEU 06.12.2008 */
	background-repeat: no-repeat;
/*	border: 1px solid black;*/
	bottom: 9px; /* Korrekter Wert für sonstige Browser: 9px; */
	right: 11px;
}

* html #footer {
	bottom: 7px; /* Wert für IE 5.x */
	b\ottom: 9px; /* Berichtigter Wert für andere Browser */
}


#presse { /* NEU seit 05.12.2008 ... derzeit aber noch nicht im Einsatz. Wird ggf. nicht benötigt!? */
	position: absolute;
	width: 180px;
	height: 25px;
	bottom: 4px;
	right: 200px;
	z-index: 12; /* Link-Kästchen soll vor YouTube-Content-Video-DIV liegen */
/*	border: 1px solid black;*/

}


#navigation {
	position: absolute;
	width: 500px;
	height: 20px;
/*	border: 1px solid black;*/ /* zeigt im aktiven Zustand die Größe (Breite/Höhe) des Block-Elementes an */
	top: 416px;
	left: 47px;
}

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 0;	
}

#navigation li {
	display: inline;
}

#navigation a:link, #navigation a:visited {
	padding: 0 19px 2px 0;
	color: #3F2016;
	font-weight: bold;
	text-decoration: none;
	}
	
#navigation a:hover {
	color: #D79631;
	text-decoration: overline underline;
}


#navigation span { /* für Hauptpunkte ohne Hyperlink ... also im aktiven Zustand */
	padding: 0 19px 2px 0; /* gleiche Werte wie bei "#navigation a:link, #navigation a:visited ..." verwenden! */
	font-weight: bold;
	color: #3F2016;
	text-decoration: underline;
}

#presse_link {
	position: absolute;
	width: 70px;
	height: 25px;
	bottom: 4px;
	right: 660px;
/*	z-index: 5;	*/ /* brauche ich hier nicht unbedingt */
/*	background-color: #00FFFF;*/
/*	border: 1px solid black;*/

/* in Website das <img> mit border="0" versehen. Dann keine Hyperlinkrahmen um Link-Bild (hier trans. GIF) */
}


#home {
	position: absolute;
	width: 55px;
	height: 25px;
	bottom: 4px;
	right: 250px; /*261px;*/
/*	z-index: 5;	*/ /* brauche ich hier nicht unbedingt */
/*	background-color: #00FFFF;*/
/*	border: 1px solid black;*/

/* in Website das <img> mit border="0" versehen. Dann keine Hyperlinkrahmen um Link-Bild (hier trans. GIF) */
}

#kontakt {
	position: absolute;
	width: 180px;
	height: 25px;
	bottom: 4px;
	right: 36px; /*47px;*/
/*	border: 1px solid black;*/

}

a {
	color: #161616;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/*ul.noten {
	list-style: inside;
	list-style-image: url(media/note_e.gif);
	vertical-align: middle;
	margin: 0;
	padding: 0;
	padding-top: 0;	
}*/

p.tabelle_li, p.tabelle_re {
	width: 22px;
	height: 46px;
/*	background-color: #ffffff;
	border: 1px solid black;*/
	line-height: 20px;
	float: left;
}
p.tabelle_li {
	background-image: url(media/note_g.gif);
	background-repeat: repeat-y;
}

p.tabelle_re {
	width: 280px;
	line-height: 23px;
}

/*#kasten_re p.tabelle {
	width: 100px;
}*/

/* BEGINN -- 18.03.2009: CSS für "05_hoerproben.html" anpassen */
p.tabelle_li_hoerprobe, p.tabelle_re_hoerprobe {
	margin-top: -8px; /* Abstand nach oben verringern, damit Überschrift und Hörproben-Links näher beieinander sind */
	width: 22px;
	height: 46px;
/*	background-color: #ffffff;
	border: 1px solid black;*/
	line-height: 20px;
	float: left;
}
p.tabelle_li_hoerprobe {
	margin-top: -8px; /* Abstand nach oben verringern, damit Überschrift und Hörproben-Links näher beieinander sind */
	background-image: url(media/note_g.gif);
	background-repeat: repeat-y;
}

p.tabelle_re_hoerprobe {
	width: 280px;
	line-height: 23px;
}
/* ENDE -- 18.03.2009: CSS für "05_hoerproben.html" anpassen */

#videolink {
	clear: both;
	
}