/* Stylesheet für die Übungsseiten aus dem Buch "Little Boxes" */


/* ====================================
Kalibrierung und Restauration
===================================== */

* { padding: 0; margin: 0; }

html { /* erzwingt Scrollbar im Firefox */
	height: 101%;
}

/* Abstand nach unten */
h2, p, ul, ol { margin-bottom: 1em; }

/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Abstand von links */
li { margin-left: 1em}



/* ========================================
Allgemeine Styles
======================================= */

/* Gestalte das HTML- element mit dem Namen body*/
body {
	background-color: #1A1A1C; /* Hintergrundfarbe */
	color: white; /* Schriftfarbe */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; /*Schriftgröße */
}

h1 { 
	font-size: 150%;
	font-weight: normal;	
}

h2 { 
		font-size: 130%;
		font-weight: normal;
}

ul {
	text-decoration: none;
}

img#logo {
	padding: 10px 230px 10px 10px;
}

img#banner {
	padding: 10px 10px 10px 0px;
}

a { text-decoration: none; /* Unterstreichung entfernen */
	outline: none; /* gepunktete Umrisslinie entfernen */
	color: grey;
} 

a:link { color: grey; }
a:visited { color: grey; }
a:hover,
a:focus {
	border-bottom: 0px solid #e0851f;
	color: white
}
a:active {
	color: grey;
	background-color: #38393C;
}

.skiplink {
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
} /* Skiplink unsichtbar machen */

.bildlinks {
	float:left;
	padding: 3px;
	border: 0px solid grey;
	margin-right: 10px;
	margin-bottom: 10px;
}

.bildrechts {
	float:right;
	padding: 3px;
	border: 0px solid grey;
	margin-right: 10px;
	margin-bottom: 10px;
}

.fussadresse {
	float:left;
	padding: 3px;
	border: 0px solid #ccc;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: black;
}

.fusselemente {
	float:right;
	padding: 3px;
	border: 0px solid #ccc;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: black;
}

.clearing { clear:both; }

.kursiv {
	font-style: italic;
}

/* ===================================
Styles für die Layoutbereiche
=================================== */

/* Gestalte das div mit id="wrapper" */

div#wrapper {
	background-color: black;
	color: black;
	width: 960px; /* Breite des Inhaltsbereichs */
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

div#kopfbereich {
	
	background-color: black; /* schwarz */
	color: grey;
	
	padding: 10px 20px 0px 20px;
}

#kopfbereich p {
	padding: 5px 0 5px 0;
	margin-bottom: 0; /* war 1 em */
}

div#kopfbereich p span {
	color: #d90000; /* Schriftfarbe span*/
}
div#navibereich {
	text-align: right; /* rechtsbündig */
	background-color: black;
	padding: 5px 20px 0px 20px;
	border-bottom: 1px solid #38393C; /* Linie unten */
}
	#navibereich li {
		display: inline; /* li nebeneinander */
		list-style-type: none; /* ohne Aufzählungszeichen */
		margin: 0 10px 0 0; /* recht 10px, sonst 0 */
}
	#navibereich ul {margin-bottom: 0;}
	#navibereich a { color: #38393C; }
	#navibereich a:hover,
	#navibereich a:focus {
		color: grey;
		background-color: black;
		border-bottom: 1px solid grey; /* Linie unten */
}	
	#navibereich a:active {
		color: black;
		background-color: grey;
		border-bottom-color: white;
}
	#startseite #navi01 a,
	#vita #navi02 a,
	#gitarre #navi03 a,
	#zeitlos #navi04 a,
	#publikationen #navi04 a,
	#ueberuns #navi05 a,
	#fotos #navi06 a,
	#auftritte #navi07 a,
	#links #navi08 a,
	#impressum #navi09 a,
	#kontakt #navi10 a,
	#preise #navi11 a, 
	#datenschutz #navi12 a {
		color: grey;
}

div#textbereich {
	padding: 20px 10px 20px 20px;
	background-color: black;
	color: grey;
	border-bottom: 1px solid #38393C; /* linie unten */
}

div#fussbereich {
	padding: 10px 20px 20px 20px; /* unterhalb Rahmenlinie */
	border-top: 0px solid #8c8c8c; /* Linie oben */
	margin-top: 0px; /* oberhalb Linie */
	background-color: black;
	color: grey;
}

address {
	text-align: center; /* Text zentrieren */
	font-size: 80%; /*etwas kleiner als der Rest */
	font-style: normal; /* normale Schrift, nicht kursiv */
	letter-spacing: 1px; /* Abstand zwischen den Buchstaben */
	line-height: 1.5; /* Zeilenabstand ohne Einheit */
	color: grey;
}

div#fussbereich a { color: grey; }

#fusslinks {
	text-align: right; /* rechts */
	background-color: black;
	padding: 10px 20px 20px 0px;
	border-bottom: 1px solid black; /* Linie unten */
}
	#fusslinks li {
		display: inline; /* li nebeneinander */
		list-style-type: none; /* ohne Aufzählungszeichen */
		padding: 0 10px 0 20px;
		margin: 0 0px 0 0px; /* recht 10px, sonst 0 */
}
	#fusslinks ul {margin-bottom: 0;}
	#fusslinks a { color: #38393C; }
	#fusslinks a:hover,
	#fusslinks a:focus {
		color: grey;
		background-color: black;
		border-bottom: 1px solid black; /* Linie unten */
}	
	#fussslinks a:active {
		color: black;
		background-color: grey;
		border-bottom-color: black;
}
	

/* ==================================
Sonstige Styles
================================ */

/* Das Kontaktformular */

form {
	background-color: #1A1A1C;
	width: 310px; /* Breite des Formulars */
	padding: 20px;
	border: 1px solid #8c8c8c;
	margin: auto auto auto auto;
}
label { /* Beschriftung auf eigener Zeile */
	color: grey;
	display: block;
	cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
#adresse,
#telefon,
#email,
#name,
textarea {
	width: 300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
textarea {
	height: 7em;
}
input:focus,
textarea:focus {
	background-color: #d9d9d9;
}