@charset "UTF-8";
/* ------------------------------------------------------
Stylesheet: Fetzer and the Turbochargers
Datum: Dezember 2012
Datei: bildschirm.css (Ausgabemedium = screen) 

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

/*--------------------------------------------------------
  1. Kalibrierung und allgemeine Styles
---------------------------------------------------------*/

/* Kalibrierug der wichtigsten Abstände */
* { padding: 0; margin: 0; } /* Browser CSS kalibrieren */
h2, h3, p, ul, ol { margin-bottom: 1em; } /* Abstand nach unten */
ul ul { margin-bottom: 0; } /* verschachtelte Listen ohne Abstand */
li { margin-left: 1em; } /*Abstand von links */

/* Allgemeine Selektoren */
html{ height: 101%; } /* erzwingt Scrollbar im Firefox */
body { 
	color: white; /* Schriftfarbe */
	background-color: #101010; /* Hintergrundfarbe */
	background-image: url('pix/index/hg03_1200x1077b.jpg');
	background-repeat: no-repeat;
  	background-position: top center;
	background-attachment: fixed;
	background-size: cover;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: smaller;
}

h1 { font-size: 150%; color: #999999; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }

address {
	text-align: center;
	font-size: 80%; /* etwas kleiner */
	font-style: normal; /* normal und nicht kursiv */
	letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
	line-height: 1.5em; /* Zeilenabstand */
}

/* Hyperlinks allgemein */
a { text-decoration: none; outline: none;} /* Unterstreichung bei Hyperlinks und Umrandung entfernen */
a:link { color: #aaa; }
a:visited { color: #aaa; } /* a:visited funktioniert noch nicht */
/* a:hover, a:focus { 	border-bottom: 1px solid #d90000; } */
a:active { color: white; }

/* Allgemeine Klassen und IDs */
.skiplink { /* Der Skiplink wird "ausgeblendet" */
	position: absolute;
	top: -2000px;
	left: -3000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
	}
	
.bildlinks {
	float: left;
	padding: 3px;
	margin-right: 30px;
	margin-bottom: 5em;
	}

.bildrechts {
	float: right;
	padding: 3px;
	border: 5px solid #ccc;
	margin-bottom: 10px;
	margin-left: 10px;
	}
	
/* .clearing { clear: both; } */

.fb-like-box {  /* facebook plugin auf der newsseite */
	background-color: #000000;
	filter:alpha(opacity=95); /* IE */
	 opacity:0.95; /* allgemein */
	 -moz-opacity:0.95; /* Mozilla */
	 -khtml-opacity:0.95; /* KTHML */
	 -opera-opacity:0.95; /* Opera */
	 }
	 
.fb-comments {  /* facebook plugin auf der newsseite */
	background-color: #000000;
	filter:alpha(opacity=95); /* IE */
	 opacity:0.95; /* allgemein */
	 -moz-opacity:0.95; /* Mozilla */
	 -khtml-opacity:0.95; /* KTHML */
	 -opera-opacity:0.95; /* Opera */
	 }	 

#logo { /* HTML-Element id="logo" */
	color: black;
}

div.galerie {
	overflow: hidden; /* zum Umfließen der Floats */
	padding: 25px 10px 10px 0;
	margin: 0 3px 3px 0;
}

* html div.galerie { height: 1%; } /* Darstellungspatches für IE 6 - Holly-Hack und Sternchen-Hack */

div.galerie img {
	float: left;
	padding: 4px;
	border: 1px solid #ddd;
	border-right-color: #aaa;
	border-bottom-color: #aaa;
	margin-right: 15px;
	margin-bottom: 15px;
}

div.content {
	overflow: hidden; /* zum Umfließen der Floats */
	padding: 0px 10px 10px 0;
	/*margin: 0 3px 3px 0; */
}

* html div.content { height: 1%; } /* Darstellungspatches für IE 6 - Holly-Hack und Sternchen-Hack */

#kopfbereich table {
	float: right;
	Width: 30%;
	margin-top: 63px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 40px;
}

div.content table {
	float: right;
	Width: 30%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#galerieseite div.content table {
	Width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#kontaktseite div.textinhalt table {
	Width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#bandseite div.content img,
#konzertseite div.content table img {
    background: url('pix/fancybox/source/galeriepic_hg.jpg') repeat scroll 0% 0% black;
    color: rgb(68, 68, 68);
    text-shadow: none;
    border-radius: 4px 4px 4px 4px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 10px;
}

/*--------------------------------------------------------
  2. Styles für die Layoutbereiche
---------------------------------------------------------*/
#wrapper {
	color: white;
	width: 100%; /* Breite des Inhaltsbereiches */
	min-width: 720px;
	max-width: 1200px;
	margin: auto; /* Abstand rechts und links automatisch */
	margin-top: 1%;
}

#inhalt {
	margin: auto;
	}

#kopfbereich {
	position: relative;
	right: 0%;
	color: white;
	height: 200px;
	width: 100%;
	background-color: transparent;
	background-image: url('pix/index/Logo_transparent.png');
	background-repeat: no-repeat;
  	background-position: left center;
	padding: 0;
}
	#kopfbereich p {
	text-align: right;
	font-weight: normal;
	font-size: 60%;
	padding: 5px 10px 5px 0;
	margin-bottom: 0;
	}
	
	/*#kopfbereich p span { color: #d90000; }*/	
		
#navibereich {
	position:absolute;
	bottom: 0;
	font-size: 1.2em;
	font-style: bold;
	text-align: left;
	padding: 5px 10px 6px 25px;
	margin-left: 30px;
	}
	#navibereich ul { margin-bottom: 0; }
	#navibereich li {
		display: inline;
		list-style-type: none; /* ohne Aufzählungspunkte */
		margin: 0;
	}
	#navibereich a {
		text-decoration: none;
		padding: 4px;
	}
	#navibereich a:hover, 
	#navibereich a:focus {
		color: white;
		background: url('pix/index/linkhover01g.gif') repeat-x center left;
	}
	
	#navibereich span{
	color: #333333;
	text-align: right;
	font-weight: normal;
	font-size: 50%;
	padding: 5px 10px 5px 0;
	margin-left: 5em;
	}
	
	#startseite #navi01 a,
	#bandseite #navi02 a,
	#newsseite #navi03 a,
	#konzertseite #navi04 a,
	#releaseseite #navi05 a,
	#galerieseite #navi06 a,
	#presseseite #navi07 a,
	#kontaktseite #navi08 a {
		color: white;
		border-bottom: 2px solid #666666;
		}
	#navibereich a:active { color: black; }

#textbereich {
	width: 60%;
	min-height: 450px;
	border-radius: 20px;
	background-color: black;
	filter:alpha(opacity=95); /* IE */
	 opacity:0.95; /* allgemein */
	 -moz-opacity:0.95; /* Mozilla */
	 -khtml-opacity:0.95; /* KTHML */
	 -opera-opacity:0.95; /* Opera */
	 margin-left: 50px;
	 }

#konzertseite #textbereich {
	width: 60%;
	min-height: 200px;
	border-radius: 20px;
	background-color: black;
	filter:alpha(opacity=95); /* IE */
	 opacity:0.95; /* allgemein */
	 -moz-opacity:0.95; /* Mozilla */
	 -khtml-opacity:0.95; /* KTHML */
	 -opera-opacity:0.95; /* Opera */
	 margin-left: 50px;
	 }

#konzertseite #textbereich2 {
	width: 60%;
	min-height: 450px;
	border-radius: 20px;
	background-color: black;
	filter:alpha(opacity=95); /* IE */
	 opacity:0.95; /* allgemein */
	 -moz-opacity:0.95; /* Mozilla */
	 -khtml-opacity:0.95; /* KTHML */
	 -opera-opacity:0.95; /* Opera */
	 margin-left: 50px;
	 margin-top: 50px;
	 }

#galerieseite #textbereich {
	width: 60%; /* ganze Breite 92% */
	min-height: 450px;
	border-radius: 20px;
	background-color: black;
	filter:alpha(opacity=95); /* IE */
	 opacity:0.95; /* allgemein */
	 -moz-opacity:0.95; /* Mozilla */
	 -khtml-opacity:0.95; /* KTHML */
	 -opera-opacity:0.95; /* Opera */
	 margin-left: 50px;
	 }

#galerieseite #textbereich a { 
			border-bottom: 0px; 
			padding: 0 0px;
			}

#galerieseite #textbereich a:hover,
#galerieseite #textbereich a:focus {
		color: white;
		background: none;
	}

#galerieseite .galeriefeld {
	float: left;
	width: 33%;
	height: 180px;
	}

#galerieseite .galeriefeld p {
	text-align: center;
	font-size: 80%; /* etwas kleiner */
	font-style: normal; /* normal und nicht kursiv */
	letter-spacing: 1px; /* Abstand zwischen den Buchstaben */
	line-height: 1.5em; /* Zeilenabstand */
	}

#pressedownloads .galeriefeld {
	float: left;
	width: 33%;
	height: 200px;
	}
	
#bestellinformationen .galeriefeld {
	float: left;
	width: 33%;
	height: 160px;
	}

#pressedownloads #textbereich a,
#bestellinformationen .galeriefeld a { 
			border-bottom: 0px; 
			padding: 0 0px;
			}

#pressedownloads #textbereich a:hover,
#pressedownloads #textbereich a:focus {
		color: white;
		background: none;
	}
		
#bestellinformationen #textbereich a,	
#bestellinformationen #textbereich a:hover,
#bestellinformationen #textbereich a:focus {
		color: #aaa;
		background: none;
		border-bottom: 0px;
	}	

#logbuch #textbereich span {
		color: #990000;
		}


#startseite #textbereich {
		width: 100%;
		min-height: 450px;
		background-color: transparent;
		background-image: none;
		}

#startseite #textbereich span{
	color: #FFFFFF;
	font-style: bold;
	font-size: 65%;
		}

#kontaktseite #textbereich {
		width: 60%;
		min-height: 450px;
		background-color: black;
		background-image: none;
		} 
	
		.textinhalt {
		padding: 20px 20px 20px 10px;
		filter:alpha(opacity=95); /* IE */
		opacity:0.95; /* allgemein */
		-moz-opacity:0.95; /* Mozilla */
		-khtml-opacity:0.95; /* KTHML */
		-opera-opacity:0.95; /* Opera */
		}
		.textinhalt em {
		font-size: smaller;
		font-style: normal;
			}
				
#textbereich a,
#textbereich2 a { 
			border-bottom: 1px dotted #666666; 
			padding: 0 3px;
			}
#textbereich a:hover, 
#textbereich a:focus { 
			color: white;
			background: url('pix/index/linkhover01g.gif') repeat-x center left;
			padding: 0 3px;
			} 
		
	#responseseite #textbereich em {
		color: #000000;
		display: block; /* aus INline-Element em wird Blockelement */
		background-color: #d9d9d9;
		border: 1px solid #8c8c8c;
		padding: 10px;
		margin-bottom: 1em;
		}

#fussbereich {
	clear: both;
	color: white;
	height: 100%;
	background-color: #ebebeb;
	background-image: url('pix/index/kopfhg1200x300b.jpg');
	background-repeat: no-repeat;
  	background-position: bottom center;
	padding: 10px 20px 50px 20px;
}	
	
/*--------------------------------------------------------
  3. Sonstige Styles 
---------------------------------------------------------*/	

/* Das Kontaktformular */
form {
	background-color: transparent;
	width: 95%; /* Breite des Formulars */
	padding: 0px;
}
label { /* Beschriftung auf eigener Zeile */
	diplay: block;
	cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender, textarea {
	width: 100%;
	border: 1px solid #8c8c8c;
	margin-bottom:: 1em;
}
textarea { height: 10em; }
input#absender:focus, textarea:focus { background-color: #d9d9d9; }