/*  ========================================================= 
Stylesheet für geigensolo.de
Stand: 
Datei: screen.css
Datum: 19. Juni 2007
Autor: Michael Bendit

Aufbau: 1. Kalibrierung und allgemeine Styles
		2. Styles für Layoutbereiche
		3. Sonstige Styles
============================================================= */

/*  ========================================================= 
	1. Kalibrierung und allgemeine Styles
	========================================================= */
	
	/* Kalibrierung der wichtigsten Abstände */
	* { padding: 0; margin: 0; } 
	h2, h3, p, ul, ol, label { margin-bottom: 1em; color: white;} /*color: #999;*/
	ul ul { margin-left: 1em;margin-bottom: 0; }
	li { margin-left: 1em; color: white;} /*color: #999;*/
	td {color: white;} /*#999*/
	
	/* Allgemeine Selektoren */
	html { height: 101%; } /* erzwingt Scrollbar im Firefox */
	body {
		color: #000;
		background-color: #000;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 0.8em; /*small*/
	}
	
	h1 { font-size: 150%;}
	h2 { font-size: 130%; }
	
	p {line-height: 1.6em;margin-right: 10px;text-align: justify;}
	
	address {
		text-align: center;
		font-size: 100%; /* vorher: 80% */
		font-style: normal;
		letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
		line-height: 1.5em; /* Zeilenabstand */
	}
	
	/* Hyperlinks allgemein */
	a { text-decoration: none; outline: none;} /* Unterstreichung entfernen */
	
	a:link { color: white; } /*#837CA3*/
	a:visited { color: white; } /*#837CA3*/
	
	a:hover, 
	a:focus {
		border-bottom: 1px solid #837CA3;
	}
	
	a:active {
		color: white;
		background-color: #837CA3;
	}
	
	/* Allgemeine Klassen und IDs */
	.skiplink {
		position: absolute;
		top: -2000px;
		left: -3000px;
		width: 0px;
		height: 0px;
		overflow: hidden;
		display: inline;
	}
	
	#logo {
		background-color: white;
		padding: 5px;
		border: 5px solid #d9d9d9;
	}
	
/*  ========================================================= 
	2. Styles für Layoutbereiche
	========================================================= */
	
	#wrapper {
		color: white;
		background: #000 url('img/bg_geige_unten.jpg') repeat-y center center;
		width: 720px; /* Breite des Inhaltsbereiches */
		margin: 0px auto;
	}
	#header {
		height: 230px;
		/* SOF: Positionierung des Absatzes relativ zum Stammelement html */
		position: relative;
		/* EOF: Positionierung des Absatzes relativ zum Stammelement html */
		color: white; /*black*/
		background: #000 url('img/1_nur_geig.jpg') repeat-y  top center;
		padding: 10px 20px 0 20px;
	}
		#header p { 
			font-weight: bold;
			/* SOF: Positionierung des Absatzes relativ zum Elternelement (#header) */
			position: absolute;
			top: 25px;
			left: 50%;
			/* EOF: Positionierung des Absatzes relativ zum Elternelement (#header) */
			padding: 5px 0; 
			margin-bottom: 0; /* war 1em (Kalibrierung) */
		} 
		#header p span {color: white;} /*#837CA3*/
	#navigation {
		text-align: right; /* rechtsbündig */
		color: white; /*black*/
		/*background: #ffe574 url(gradient.jpg) repeat-y top left;*/
		padding: 5px 10px 4px 10px;
		border-bottom: 1px solid #837CA3;
		/* margin-top:-3px; by M.Bendit zur Angleichen des gradients zum header */
	}
		#navigation ul {margin-bottom: 0;}
		#navigation li {
			display: inline;
			list-style-type: none;
			margin: 0; /* hatte vorher 10px Abstand von rechts */
		}
		#navigation a {
			color: white; /*#837CA3*/
			background-color: #222341;
			padding: 4px 8px;
			border: 1px solid #837CA3;
		}
		#navigation a:hover,
		#navigation a:focus, 
		#startpage #nav01 a,
		#inhalt #nav02 a,
		#trailer #nav03 a,
		#zum_film #nav04 a,
		#regie #nav05 a,
		#darsteller #nav06 a,
		#team #nav07 a,
		#sponsoren #nav08 a, 
		#kontakt #nav09 a, 
		#impressum #nav09 a {
			color: black;
			background-color: #837CA3;
			border-bottom-color: #837CA3; 
		}
		#navigation a:active {
			color: black;
			background-color: #837CA3;
		}
	#content { 
			padding: 20px 10px 20px 20px;
		}
		#content a {
			border-bottom: 1px dotted #999;
		}
		#content a:hover,
		#content a:focus {
			border-bottom: 1px solid #837CA3;
		}
		#content cite {
			display: block;
			text-align: right;
			font-size: 0.9em;
			color: #837CA3;
			margin-bottom: 20px;
		}
		#content tr {background-color: #000;}
		#content td {padding: 5px 0 5px 10px;}
		#content td.col1 {
			height: 30px;
			color: #95674A;
		}
		#content p img {margin: 0px 20px 10px 0;}
		#content p a,
		#content p a:hover, 
		#content p a:focus {
			border-bottom: 0;
		}
		#content .hint1 {color: #66f;}
		#content .hint2 {color: #f66;}
		
	#trailer #content, 
	#trailer #content p {
		text-align: center;
		margin: 0 auto;
	}
	#darsteller #content {text-align: center;}
	#darsteller #content table {margin: 0 auto;}
	#team #content {text-align: center;}
	#team #content table {margin: 0 auto;}
	#sponsoren #content h2 {text-align: center;}
	#sponsoren #content ul {text-align: center;}
	#sponsoren #content li { list-style: none; color: white;line-height: 1.5em;} /*color: #999;*/
	#kontakt #content {text-align: center;}
	#kontakt #content table {margin: 0 auto;}
	#kontakt #content p {margin: 10px;}
	
	#footer { 
		padding: 10px 20px 20px 20px; /* unterhalb Rahmenlinie*/
		border-top: 1px solid #8c8c8c; /* Rahmenlinie oben */
		margin-top: 20px; /* Aussenabstand oben, oberhalb Linie */
	}
	/*#content p img {margin: 30px;}*/
	.imgleft {
		background-color: black;
		display: inline; /* double-margin bugfix for IE6 */
		float: left;
		padding: 0px;
		border: 0px solid black;
		margin: 0 10px 10px 0;
	}
	.imgright {
		background-color: black;
		display: inline; /* double-margin bugfix for IE6 */
		float: right;
		padding: 0px;
		border: 0px solid black;
		margin: 0 10px 10px 0;
	}
	#content p .imgleft {margin: 4px 20px 10px 0;}
	#content p .imgright {margin: 4px 10px 20px 20px;}
	.clearing { clear: both; }
/*  ========================================================= 
	3. Sonstige Styles
	========================================================= */
	
	/* Das Kontaktformular */
	form {
		/*background-color: #eee;*/
		width: 370px; /* Breite des Formulars */
		padding: 20px;
		border: 1px solid ##837CA3;
	}
	label { /* Beschriftung auf eigener Zeile */
		display: block;
		cursor: pointer; /* Mauszeiger wird zur Hand */
	}
	input#sender,
	textarea {
		width: 300px;
		border: 1px solid ##837CA3;
		margin-bottom: 1em;
	}
	textarea {
		height: 7em;
	}
	input#sender:focus,
	textarea:focus {
		background-color: ##837CA3;
	}