@charset "utf-8";
/* Copyright 2008, comblue GbR
 * 
 */
 
/* suggested order of definitions:
 * position
 * top
 * right
 * bottom
 * left
 * z-index
 *
 * display
 * float
 * margin
 * padding
 * width
 * height
 * overflow
 * table-layout
 *
 * background
 *
 * border
 *
 * vertical-align
 * text-align
 * font
 * color
 * text-decoration
 *
 * list-style
 *
 * cursor
 */

/* #### Table of Contents ####
 *
 * Global Styles
 * Forms
 * Navigation
 * Headers
 * Text
 * Page Structure
 * Content
 */
 
 /* Global Styles */
 
 a img {
 border-width: 0px;
 }
 
 html, body { height: 100%; }
 body {
 margin: 0px;
 padding: 120px 0px 20px;
 
 background: #000000;
 
 text-align: center;
 }
 
 a#close {
 position: absolute;
 top: 18px;
 right: 24px;
 z-index: 10;
 
 padding: 0px;
 width: 8px;
 height: 11px;
 overflow: hidden;
 
 line-height: 11px;
 }
 a#close:hover { width: 40px; }
 
 	a#close div {
	float: right;
	margin: 2px 0px 0px 0px;
 	width: 8px;
 	height: 9px;
 	
 	background: url(../images/xclose.png) right top no-repeat;
	
	cursor: pointer;
 	}
 
 a.btn_prev, a.btn_next {
 display: block;
 width: 10px;
 height: 13px;
 
 background-position: left top;
 background-repeat: no-repeat;
 }
 
 	a.btn_prev {
	background-image: url(../images/btn_prev.png);
	}
	
	a.btn_next {
	background-image: url(../images/btn_next.png);
	}
 
 /* Forms */
 
 
 /* Navigation */
 
 a.link1 {					color: #FFFFFF;	text-decoration: none;		}
 a.link2, div#live ul a {			color: #fff;	text-decoration: underline; }
 a:hover.link2, div#live ul a:hover {		color: #000;	text-decoration: none;	background: #fff; }
 a.link5 { font-size: 11px;	color: #606367; text-decoration: none;		}
 div#footer a:hover.link5 {					color: #000;							background: #606367; }
 
 /* Headers */
 
 h2, h3, h4					{											color: #b5b5b5;						}
 h2 						{	font-size: 17px;	font-weight: 900;										}
 .drawer-handle.open		{					 						color: #FFFFFF;						}
 h3							{	font-size: 11px;															}
 h4							{	font-size: 12px;	font-weight: 900;	color: #FFFFFF;	line-height: 16px;	}
 ul.drawers .next			{											color: #6cab34;						}
 
 /* Text */
 
 body 					{	font: 11px Trebuchet MS, sans-serif;	color: #FFFFFF; }
 ul.drawers span 		{ 								color: #b5b5b5; }
 div#band, div#contact	{	line-height: 14px;							}
 
 /* Page Structure */
 
 div#body, div#footer {
 margin-left: auto;
 margin-right: auto;
 width: 598px;
 
 text-align: left;
 }
 
 #body {
 position: relative;
 height: 598px;
 
 background: url(../images/body_menuitems.jpg) left top no-repeat;
 }
 
	a#logo {
	position: absolute;
	left: 0px;
	top: -85px;
	
	display: block;
	width: 206px;
	height: 74px;
	
	background: url(../images/logo_alt.png) left top no-repeat;
	}
 
	a#first, a#second, a#third, a#fourth {
	position: absolute;
	z-index: 0;
	
	display: block;
	width: 295px;
	height: 295px;
	}
	a#first {	top: 0px;		left: 0px;	background-position: left top;		background-repeat: no-repeat; }
	a#second {	top: 0px;		right: 0px;	background-position: right top;		background-repeat: no-repeat; }
	a#third {	bottom: 0px;	left: 0px;	background-position: left bottom;	background-repeat: no-repeat; }
	a#fourth {	bottom: 0px;	right: 0px;	background-position: right bottom;	background-repeat: no-repeat; }
	a#first:hover, a#second:hover, a#third:hover, a#fourth:hover { background-image: url(../images/body_menuitems_hover.jpg); }
	div#body a.hover { visibility: hidden; }
	#body a.alpha { background: url(../images/alpha_black.png) left top repeat; z-index: 2; }
 
 div#footer {
 position: relative;
 margin-top: 7px;
 text-align: right;
 }
 
 /* Content */
 
 div#gig {
 position: absolute;
 left: 0px;
 bottom: 0px;
 z-index: 1;
 
 width: 100%;
 height: 38px;
 
 background: url(../images/gig.png) left top no-repeat;
 }
 
 div.ctype1 {
 position: absolute;
 top: 20px;
 left: 125px;
 z-index: 5;
 
 padding: 40px 24px 16px;
 width: 299px;
 height: 503px;
 
 background: url(../images/content.png) left top no-repeat;
 }
	
	div#contact p {
	padding-left: 10px;
	}
	
	ul.drawers, .drawers ul {
	margin: 0px;
	padding: 0px;
	
	list-style: none;
	}
	
	h2.drawer-handle {
	margin: 2px 0px;
	padding: 1px 10px;
	
	background: #2e2e2e;
	
	cursor: pointer;
	}
	
	h2.drawer-handle.open {
	}
	
	.drawers li li {
	position: relative;
	
	margin: 6px 0px 10px;
	}
	
	.drawers h3 {
	position: absolute;
	top: 0px;
	left: 10px;
	z-index: 6;
	
	margin: 0px;
	}
	
	.drawers h4 {
	margin: 0px 0px 0px 80px;
	}
	
	.drawers span {
	margin-left: 80px;
	}
	
	#slider {
	position: relative; /* damit die Buttons absolut positioniert werden können */
	
	width: 299px;
	}
	
	.scroll {
	/* durch JS wird overflow: hidden; inline eingefügt -> falls JS deaktiviert: overflow: auto; Angabe wird wirksam und Scrollbalken werden ermöglicht */
	position: relative; /* fix for IE to respect overflow */
	
	clear: left;
	width: 299px; /* nur so wird die overflow: hidden; Angabe (inline) vom IE respektiert */
	height: 503px;
	overflow: auto;
	}
	
	.scrollContainer {
	/* width wird von JS berechnet und inline eingefügt */
	}
	
	.scrollContainer div.panel {
	/* float: left; und position: relative; werden von JS inline eingefügt */
	/* falls JS deaktiviert: width von .scrollContainer kann nicht mehr berechnet werden -> width von #slider steht zur Verfügung -> Anzeige der div untereinander -> vertikaler Scrollbalken
	-> dadurch entsteht wiederum ein horizontaler Scrollbalken */
	width: 299px;
	height: 503px;
	
	font-size: 0px;
	line-height: 0px;
	}
	
	a.lightbox {
	display: block;
	float: left;
	margin: 0 1px 1px 0;
	width: 72px;
	height: 72px;
	
	border: 1px solid #606367;
	}
	
	img.thumbnail {
	width: 72px;
	height: 72px;
	}
	
	a.lightbox.last {
	margin-right: 0px;
	}
	
	a.lightbox:hover {
	border-color: #FFFFFF;
	}
	
	a.nav_photos.btn_prev, a.nav_photos.btn_next {
	position: absolute;
	bottom: 30px;
	z-index: 7;
	}
	a.nav_photos.btn_prev { left: 0px; }
	a.nav_photos.btn_next { right: 0px; }
 
 div.ctype2 {
 position: absolute;
 z-index: 5;
 
 padding: 40px 20px 0px;
 width: 255px;
 height: 255px;
 
 cursor: default;
 }
 
	 div#band {
	 left: 0px;
	 top: 0px;
	 
	 padding-top: 70px;
	 height: 225px;
	 
	 text-align: justify;
	 }
	 div#music {
	 left: 0px;
	 bottom: 0px;
	 
	 padding-top: 100px;
	 height: 195px;
	 }
	 
	 object#player {
	 width: 250px;
	 height: 100px;
	 }
 
 #footer img {
 position: absolute;
 top: 10px;
 }
 
 	#footer img#myspace {
 	left: 0px;
 	width: 121px;
 	height: 22px;
 	}
 	
 	#footer img#facebook {
 	left: 130px;
 	width: 22px;
 	height: 22px;
 	}
 	
 	#footer img#studivz {
 	left: 158px;
 	width: 22px;
 	height: 22px;
 	}