/* CSS Document */

/* Farben
#000000 (SCHWARZ)  = Fließtext / Links / Hintergrund
#999999 (GRAU)     = Linien
#993300 (ROTBRAUN) = Rollover 
#EAD7BD (HELLBRAUN) = Hintergrund Tabelle
#
*/

/* ------------------------------------------------------ */
/* ---------- Allgemeines ------------------------------- */
.unsichtbar {
		position: absolute;
  		top: -7000px;
		left: -7000px;
		height: 1px;
		width: 1px;
		background-color:
}

h1 {
		font-size:120%;
		font-weight:bold;
		margin:0 30px 20px 0;
		line-height:140%;
}

h2 {
		font-size:100%;
		font-weight:bold;
}		

em {
		font-weight:bold;
		font-style:normal;
}

a:link, a:visited{
		color:#000000;
		}

body {
		width:100%;/* Trick (?) damit Zentrierung auch bei IE funktioniert*/ 
		background-color:#000000;
		font: 100.01% Verdana, Arial, Helvetica, sans-serif;
		color:#000000;
		padding:0px;
		margin:0px;
}

/* ------------------------------------------------------ */
/* ----------Container zentriert das Layout-------------- */
#seitelinks {
		width: 1150px;
		padding:10px 0px 0px 0px;
		margin:0 0 0 2px;
        position:relative; /*von erkrath initial: wichtig für absolute Positionierung der Spalten*/
}

/* ----------------------------------------------------- */
/* ----------Banner ganz oben Casio -------------------- */
#topbanner {
	margin-bottom: 0.5em;
}

/* ----------------------------------------------------- */
/* ----------Banner oben für Logo und Foto-------------- */
#banneroben { /*muss eigentlich nicht angegeben werden*/
		height:123px;
		width:975px;
} 
		
/* ---------- Container für Spalten und Hintergründe ----------------- */

.innen{ 
		background-image:url(Bilder/hintergrund_unten.gif); /*der untere Rand des Notenhintergrundes*/
		background-position:bottom left;
		background-repeat:no-repeat;
		min-height:600px; /*wird nur von Opera und Gecko-basierenden Browsern interpretiert*/
		height:600px; /*IE-Hack:Fehlinterpretation des IE, so dass Mindesthöhe von 600 Pixeln gegeben ist -> dehnt sich aus, wenn Inhalt größer*/

} 

div[class="innen"] {
		height: auto; /*Attribut-Selektoren werden nicht vom IE interpretiert, so dass dieser Wert die fixen 600 Pixeln bei Mozialla, Opera etc. wieder überschreibt*/
}

#aussen {
		width: 827px; /* 825px BG-Bild, 10px Abstand rechts*/
		margin:10px 0 0 0;
		background:url(Bilder/hintergrund.gif) no-repeat;
		height:auto;
		float: left;
}

/* ---------------------------------------------------------------- */
/* ----------------- Spalte Links (Hauptmenü) --------------------- */ 
.aktiv {
		background:url(Bilder/taste_f2.gif) no-repeat top right;
}

#hauptnavigation{
	width:165px; 
	float:left; 
	position:relative; 
	margin:0px 0 0 0;
	padding: 125px 0 2em 0;
		 
}

#hauptnavigation ul{
		list-style-type:none;
		margin:0px;
		padding:0px;
		font-size:70%;
}

#hauptnavigation li{
		margin:7px 0 7px 0; /*hier eventuell ein Hack einbauen, damit in IE kein Abstand zwischen den LI-Elementen erscheint!*/
		padding:0px;
		height:24px;
}

#hauptnavigation ul a{
		color:#FFFFFF;
		text-decoration:none;
		display:block;
		padding:5px 0 0 5px;
		width:9.2em;
		height:19px;
		background:url(Bilder/taste.gif) no-repeat right;
		margin:0px;
		font-weight:bold;
		}
#hauptnavigation ul a.aktiv{
		background:url(Bilder/taste_f2.gif) no-repeat right;
		}

#hauptnavigation ul a:hover{
		background:url(Bilder/taste_f2.gif) no-repeat top right;
}

#scorchhilfe {
		margin: 50px 0 0 10px;
		height:auto;
		width:113px;
		background-color:#FFFFFF;
		border:1px solid #666666;
		padding:5px;
		line-height:130%;
}
#scorchhilfe a:link{
		color:#993300;
		text-decoration:none;
color:
}
#scorchhilfe a:hover {
		text-decoration:underline;
}

/* ------------------------------------------------------------------ */
/* ----------------- Spalte Mitte (Hauptinhalt) --------------------- */ 

#spaltemitte{ 
		position: relative;
		width:630px;
		margin-left: 180px;
}

/* ---------------- Servicemenü ------------ */

#servicemenue {
		margin:0px 0px 20px 240px;
		height:15px;
		font-size:70%;
		padding-top:10px; /*mit margin-top funktioniert es bei IE irgendwie nicht*/
}

#servicemenue ul{ /*Auszeichnung für ul, damit Liste keine Abstände ringsherum hat*/
		margin:0px;
		padding:0px;
}

#servicemenue li{
		display: inline;
		list-style-type:none;
}

#servicemenue a{
		border-left:1px solid #999;
		color:#000;
		float:left;/*;anscheinend der TRICK, damit es auch in IE 5.0 und IE 5.5 funktioniert :-)*/
		padding:0px 10px 0px 5px; /*wichtig für IE6, dass diese Angaben hier und nicht unter a:link stehen; wird sonst nicht angewendet*/
		text-decoration:none;
}
#servicemenue a:hover{
		color:#993300;
		text-decoration:underline;
}

/*------------------ Breadcrumb-Navigation -----------------*/
#breadcrumb {
		margin:0 0 10px 0;
		padding:0px;
		font-size:70%;
}

#breadcrumb a{
		color:#000;
}

#breadcrumb span{
		font-weight:bold;
}

#breadcrumb a:visited, a:link {
		text-decoration:none;
}

#breadcrumb a:hover {
		color:#993300;
		text-decoration:underline;
}

#breadcrumb em {
		color:#993300;
		font-style:normal;
}

/*------------------ Vor-und-Zurück-Navigation -----------------*/

#vorzurueckmenue {
		margin:20px 0px 10px 0px;
		font-size:95%;
		height:20px;
}

#vorzurueckmenue ul{ /*Auszeichnung für ul, damit Liste keine Abstände ringsherum hat*/
		margin:0px;
		padding:0px;
}

#vorzurueckmenue li{
		display: inline;
		list-style-type:none;
		float:left;
		line-height:12px;
}

#vorzurueckmenue li span{
		font-family:Arial, Helvetica, sans-serif;		
}

#vorzurueckmenue li.zurueck {
		border-left:1px solid #999;
		/*padding-left:8px;*/
}

#vorzurueckmenue li.vor {
		border-left:1px solid #999;
}

#vorzurueckmenue li.uebersicht a{
		padding:0 8px 0 0;
}

#vorzurueckmenue a{
		color:#000;
		/*float:left;;anscheinend der TRICK, damit es auch in IE 5.0 und IE 5.5 funktioniert :-)*/
		padding:0px 8px 0px 8px; /*wichtig für IE6, dass diese Angaben hier und nicht unter a:link stehen; wird sonst nicht angewendet*/
		text-decoration:underline;
}

.ohnestrich{
		text-decoration:none;
}


#vorzurueckmenue a:hover{
		color:#993300;
		text-decoration:underline;
}


/*------------------ Inhalt -----------------*/
#inhalt {
		margin:0px 0px 0px 0px;
		font-size:75%;
		line-height:140%;
		padding:5px 0 20px 0;
}

#inhalt p {
		margin:10px 60px 15px 0px;
}

#inhalt form {
		margin-bottom:10px;
}


/*-------------------Home-----------------*/
#home {
		margin-right:40px;
}

#home ul{
		margin:10px 0 0 0px;
		padding:0px 0 0 15px;
}
#home ul li{
		margin-bottom:15px;
}
#home ul li span{
		font-size:75%;
		color:#993300;		
}
#home ul li a{
		text-decoration:underline;
		color:#993300;		
}
#home ul li a:hover{
		color:#000000;		
}
/*Notenanzeige mit Scorch*/	
#scorch {
		border:1px solid #999999;
		width:613px;
		height:808px;
		margin:10px 0 10px 0;
}

.screenshot {
		float:right;
		width:130px;
		margin:5px 50px 5px 10px;
}

.screenshot span{
		padding:3px 0 0 2px;
		display:block;
		font-size:90%;
		margin:0px;
		}
/*Lektionenübersicht*/	
#lektionenuebersicht{
		font-size:100%;
		line-height:120%;
		margin:25px 0 0 0;
}
.kapitel{
		float:left;
		width:110px;
}
.kapitel a{
		text-decoration:underline;
		cursor:pointer;
		font-weight:bold;
}
.kapitel a:hover{
		color:#993300;
}
.kapiteltext{
		float:left;
		width:470px;
		margin:0 0 10px 0;
}
.abstandunten {
		margin:0 0 30px 0;
		width:630px;
		height:1px;
		float:left;
}

/*Suchergebnis*/	
#suchergebnis{
		font-size:100%;
		margin:20px 0 0 0;
		padding:0px;
		line-height:130%;
}
.container{
		float:left;
		width:600px;
		margin:0 20px 2px 0;
		background-color:#ebd6cc;
		padding:5px;
}
.containerabstandunten{
		float:left;
		width:600px;
		margin:0 20px 2px 0;
		padding:5px;
		height:30px;
}
.musikstuecktitel{
		float:left;
		width:350px;
		margin:0 20px 0px 0;
		font-weight:bold;
		font-variant:small-caps;
		font-size:130%;
}
.musikstueck{
		float:left;
		width:345px;
		margin:0 20px 0px 0;
		font-weight:bold;
		padding-left:5px;
}
.tonarttitel{
		float:left;
		width:220px;
		font-variant:small-caps;
		font-weight:bold;
		font-size:130%;}

.tonart{
		float:left;
		width:215px;
		padding-left:5px;
}
.tonart a{
		text-decoration:underline;
		cursor:pointer;
}
.tonart a:hover{
		color:#993300;
}

.tonart ul{
		margin:0px;
		padding:0px;
		list-style-type:none;
}
#tonart ul li{
		list-style-type:none;
}

#blaettern {
		margin:0px 0 10px 0;
		font-size:90%;
}
#seitenzahl {
		padding:0 10px 0px 10px;
}
#blaettern a:link {
		text-decoration:underline;
		}

/*Suchmaske*/	
#suchmaske {
		margin:0px 50px 10px 0px;
}
	
#suchmaske legend{
		font-weight:bold;
		font-size:110%;
}

#suchmaske fieldset{
		margin: 0 0 15px 0;
		border:#999999 solid 1px;
}	

#suchmaske fieldset fieldset{
		margin:0 10px 10px 3px;
		width:11em;
		float:left;
}	

label.left{
		float:left;
		text-align:right;
		width:7em;
		margin:9px 10px 0px 0px;
}

#suchmaske select{
		margin:8px 0 5px 0;
}

/*.notenlabel{
		float:left;
		width:5em;
}

.notencheckbox{
		float:left;
		width:2em;
}

.notenlaenge{
		height:3.5em;
}*/

.senden {
		cursor:pointer;
		height:1.8em;
}

/*Aktuelle Infos*/	
#aktuell h1{
		margin:0 0 -10px 0;
}
#aktuell div h2{
		margin:30px 60px 10px 0px;
}
#aktuell div p{
		margin:0 60px 10px 0px;
}

/*Faq-Übersicht*/	
#faquebersicht p{
		margin:0 0 10px 0;
}	
#faquebersicht a:link, a:visited{
		text-decoration:underline;
}	
#faquebersicht a:hover{
		color:#993300;
}	

/*Faq*/	
#faq h1{
		margin:0 0 -10px 0;
}	
#faq div h2{
		margin:30px 60px 10px 0px;
}
#faq div p{
		margin:0 60px 10px 0px;
}	

/*Kontaktformular*/	
#kontaktformular label{
		float:left;
		width:100px;
		text-align:right;
		margin:0 10px 0px 0;
}
#kontaktformular .abschicken{
		margin:0 0 0 110px;
		cursor:pointer;
}
#kontaktformular input, textarea{
		margin:0 0 5px 0;
}

/*Impressum*/	
#impressum a:link, a:visited {
		text-decoration:underline;
}	
#impressum a:hover {
		color:#993300;
}	

/*Links*/	
#linkuebersicht{
		font-size:100%;
		line-height:120%;
		margin:25px 0 0 0;
}

.link{
		margin:0 0 5px 0;s
}

.link a{
		text-decoration:underline;
		cursor:pointer;
		font-weight:bold;
}
.link a:hover{
		color:#993300;
}
.linktext{
		margin:0 10px 10px 0;
}

/*Komponisten*/	
#komponisten a:link, a:visited {
		text-decoration:underline;
}	
#komponisten a:hover {
		color:#993300;
}	
 

/* ---------------------------------------------------------------- */
/* -------------- Linke Spalte (Werbebanner 125 x 125)------------- */

.clearfix:after {/* add .clearfix class to clear floats after an element */
	clear: both;	/* (IE version is in ie6-fixes.css) */
	content: "."; 
	display: block;
	font-size: 0;
	height: 0; 
	visibility: hidden;
}

#werbebanner {
		width:162px; 
		float:left; 
		position:relative;
		margin:10px 0 0 0;
}
#anzeige {
		width: 115px;
		height: 115px;
		background-color:#FF9933;
		margin-bottom:10px;
		padding:10px 0 0 10px;
		font-size:70%;
		color:#fff;
}

/* ------------------------------------------------------ */
/* -------------- Rechte Spalte (Google Ads)------------- */

#googleads_rechts {
		width:160px; 
		float:left; 
		position:relative;
		margin:10px 0 0 0;
}

.googlead_container {
		position:relative;
		width:160px;
		color: #000;
		background-color: #fff;
}


/* ---------------------------------------------------- */
/* -------------- Google Ads unter Menue ------------- */

#googleads_menue {
		width:120px; 
		position:relative;
		margin:40px 0 0 10px;
}

.googlead_menue_container {
		position:relative;
		width:130px;
		color: #000;
		font-size:11px ;
		background-color: #fff;
}

/* ---------------------------------------------------- */
/* -------------- Roland Ad unter Menue ------------- */

#rolandad_menue {
		width:120px; 
		position:relative;
		margin:60px 0 0 10px;
}


/* ----------------------------------------- */
/* -------------- Errormessage ------------- */

#errormessage_wrapper {
		width:630px; /* wie #spaltemitte*/
		height: 50px;
		position:relative;
		margin:0;
}

.errormessage_top_container {
		position:relative;
		width:600px;
		height: 50px;
		font-size: 75%;
}

.errormessage_top_container a, .errormessage_top_container a:link {
		text-decoration: underline;
}

.errormessage_top_container img.serviceimages {
	vertical-align: top;
}