@charset "utf-8";

#preloaderContainer {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000; /* change if the mask should have another color then white */
	z-index:99; /* makes sure it stays on top */
}

#preloaderStatus {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(images/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/* CSS Document */
@font-face {
  font-family: "OptimusPrinceps dl";
  src: url('OptimusPrinceps.eot#') format('eot'), 
       url('OptimusPrinceps.woff') format('woff'), 
       url('OptimusPrinceps.ttf')  format('truetype')/*,
       url('design/OptimusPrinceps.svg#OptimusPrinceps') format('svg')*/;
}


.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
 
.clear {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */

body, html{
	width:100%;
	height:100%;
	min-width:1145px;
	min-height:560px;
	max-width:1920px;
	max-height:1080px;
	background-image:url(images/bg.jpg);
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center center;
	font-family: "OptimusPrinceps dl";
	position:relative;
	margin:auto;
	
}
body div, body table, body td, body th, body span, h1, h2, h3, h4{
	font-family: "OptimusPrinceps dl" !important;
	font-size:17px;	
}
@keyframes cf3FadeInOut {
	0% {
	  opacity:0;
	}
	30% {
	opacity:0.1;
	}
	45% {
	opacity:0.325;
	}
	65% {
	opacity:0.55;
	}
	90% {
	opacity:0.775;
	}
	100% {
	opacity:1;
	}
}
#backgroundTransition{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-image:url(images/eder.png);
	background-repeat:no-repeat;
	background-position:center center;
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 8s;
	animation-direction: alternate;

}
.pointer{
	cursor:pointer;	
}

#foregroundContainer{
	min-width:1145px;
	min-height:560px;	
	max-width:1920px;
	max-height:1080px;
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
}
#foregroundLeft, #foregroundRight{
	position:absolute;
	top:0;
	left:50%;
	height:100%;
}
#foregroundLeft{
	background-image:url(images/fg_left.gif#),url(images/fg_left_shadow.png);
	background-repeat:no-repeat, no-repeat;
	background-position:left center;
	background-position:left center , right center;
	width:1111px;
	margin-left:-960px;
	z-index:70;
}

#foregroundRight{
	background-image:url(images/fg_right.gif);
	background-repeat:no-repeat;
	background-position:left center;
	width:1105px;
	margin-left:-145px;
	z-index:70;
}

/*
 * naviagtion
*/
#navigationContainer, #navigationContainerStripe{
	height:100%;
	position: absolute;
	top:0;
	left:50%;	
	margin-left:70px;
	z-index:69;
}
#navigationContainerStripe{
	width:154px;
}
#navigationContainer{
	width:0px;
	margin-left:0;
	margin-top:-37px;
}

#navigationContainerStripe div{
	position:relative;
	float:right;
	width:313px;
	height:100%;
	margin-left:-291px;
	z-index:99;
	background-repeat:no-repeat;
	background-position:center center;
}
	
.navstripe1{
	background-image:url(images/navi_stripe_1.png);
}

.navstripe2{
	background-image:url(images/navi_stripe_2.png);
}

#navigationContainer {
    /*margin-left: -110px;*/
}
#navigationContainer > div {
	height:0px;
	width:62px;
	position:absolute;
	top:50%;
	margin-left:-39px;
	float:right;
	background-repeat:no-repeat;
	background-pos,ition:center center;
}

#homeNav {
	left:-1px;
	margin-top:-240px;
}

#bandNav {
	left:-1px;
	margin-top:-160px;
}

#musicNav {
	/*left:103px;*/
	margin-top:-80px;
}

#picturesNav {
	/*left:108px;*/
	margin-top:0px;
}

#videosNav {
	left:1px;
	margin-top:80px;
}

#concertNav {
	left:2px;
	margin-top:160px;
}

#contactNav {
	left:2px;
	margin-top:240px;
}

#home {
    background-image: url(images/button_1.png);
}

#band {
	background-image:url(images/button_2.png);
}

#music {
	background-image:url(images/button_3.png);
}

#pictures {
	background-image:url(images/button_4.png);
}

#videos {
	background-image:url(images/button_5.png);
}

#concert {
	background-image:url(images/button_6.png);
}

#contact {
	background-image:url(images/button_7.png);
}


.content{
	height:100%;
	width:1000px;
	margin:0 auto;
	text-align:center;
	vertical-align:middle;
	padding-top:200px;
}

/*
 *Navigation Popout
 */
 
 
.navBox{
	width:5px; 
	height:74px;
	float:right;
	padding:0 13px 0 40px;
}

.navBox>div{
	position:relative;
	height:100%;
	width:100%;	
}

.navLogo {
	position:absolute;
	top:0px;
	left:-26px;
	width:42px;
	height:74px;
	cursor:pointer;
	background-repeat:no-repeat;
}

.navBackground{
	width: 100%;
	height: 74px;
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	-o-transform: skew(-15deg);
	transform: skew(-15deg);
	background: #000;
	position:absolute;
	top:0;
	left:0;
	-moz-box-sizing:border-box;
	opacity:0;	
}

.navContent {
   /* -moz-box-sizing: border-box;*/
    height: 100%;
    left: 10px;
    overflow: hidden;
    margin: 0 -20px;
    position: absolute;
    top: 0;
    width: 100%;
}

.navcaptions{
	color:#c3c3c3;
	position:absolute;
	top:8px;
	left:30px;;
	padding:8px 0 8px 50px;
	width:250px;
	height:100%;
	-moz-box-sizing:border-box;
	display:none;
	
}

.navcaptions a{
	text-decoration:none;
	color:#c3c3c3;
}

.navcaptions a:hover{
	text-shadow: 2px 2px 2px #fff;
}

.circle{
	background-image:url(images/circle.png);
	width:70px;
	height:70px;
	position:absolute;
	left:-10px;
	top:2px;
}

/* Allgemiene Scrolbar Definitionen
 *
 */
#scrollbar {clear:both; background-color:rgba(0,0,0,0.5)}
#scrollbar .viewport { height:100%; overflow:hidden;  margin-top:10px;}
#scrollbar .overview { list-style:none; position:absolute; left:0; top:0; margin-left:-15px;}
#scrollbar .scrollbar { position:relative; float:right; width:12px;z-index:10;}
#scrollbar .track { background-color:rgba(0,0,0,0.3); height:100%; width:10px; position:relative; padding:0 1px;}
#scrollbar .thumb { height:20px; width:10px; cursor:pointer; overflow:hidden; position:absolute; top:0; background-color:#350909; 
	-moz-box-shadow:    inset 1px 1px 1px 0px #606060;
	-webkit-box-shadow: inset 1px 1px 1px 0px #606060;
   	box-shadow:         inset 1px 1px 1px 0px #606060;
  	-moz-border-radius: 	4px;  
  	-webkit-border-radius: 	4px;  
  	border-radius: 			4px;}
#scrollbar .thumb .end { overflow:hidden; height:0px; width:13px;}
#scrollbar .disable{ display:none;}
.noSelect { user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none;}

/*
 * Home Seite
 */
 
/*
 * News Auswahl
 */
#scrollbarContainer	{ position:relative; left:50%; margin-left:-500px; height:100%; width:0px;z-index:49;}
#scrollbarContainer #scrollbar { height:100%; width:305px; position:absolute;}
#scrollbarContainer #scrollbar .viewport { width:292px; position:relative;}

#scrollbarContainer .overview > div{background-image:url(images/news_box.png); font-size:14px; width:323px; height:125px; cursor:pointer; position:relative;left:-300px;}
#scrollbarContainer .overview #newsAdd{background-image:none; font-size:14px; height:22px; margin-bottom:5px; cursor:pointer; padding-left:10px;}
#scrollbarContainer .overview > div > h3 {margin: 0 15px 13px 35px; padding-top:10px;  height:14px; width:255px; overflow:hidden;}
#scrollbarContainer .overview > div > div { margin: 0 20px 0 30px; height:56px; width:255px; overflow:hidden;}
#scrollbarContainer .overview > div   a { text-decoration:underline; color:#666; cursor:pointer;}
#scrollbarContainer .overview > div > span { position:absolute; bottom:12px; color:#FFF; }
#scrollbarContainer .overview > div > span.showNews { left:20px;}
#scrollbarContainer .overview > div > span.scrollbarDate {right:45px;}
#scrollbarContainer .overview > .selected {background-image:url(images/news_box.png#), url(images/news_shadow.png);}
#scrollbarContainer .overview > div > div {font-size:14px;}

/*
 * News
 */
#newsBG{background-color:rgba(0,0,0, 0.4); height:100%; position:absolute; left:50%; top:0; margin-left:-190px; width:660px;}
.newsContainer{	height:560px; width:100%; overflow:hidden; position:absolute; top:100%; 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	padding:10px 60px 10px 70px;
}
.displayedNews{top:50%; margin-top:-280px;}
.newsHeader{height:24px; width:570px; padding:0 40px; margin-left:-60px; background:url("images/stripe.png") no-repeat scroll left bottom / 650px 2px transparent;}
.newsBody{height:500px; width:530px; position:relative; padding:16px 0 0 0; overflow:hidden;}
h1{ font-size:24px;}
.newsHeader > h1 { margin-right:50px; height:24px; overflow:hidden;}
.newsdate{font-size:18px; position:absolute; top:13px; right:20px; z-index:49;}
.newsAdmin{position:absolute; top:0; right:0; height:30px; width:200px; background-color:grey;}

/*
 * Login
 */
#loginContainer{ position: absolute; top:50%; left:50%; padding:10px; background-color:grey; margin-left:-107px;}
#loginContainer input{float:right;}
#loginContainer label{float:left; padding:5px 5px 0 0;}

.mce-btn button{line-height:12px !important;}

/*
 * Concert
 */
#concertContainer{
	width:1145px;
	margin:0 auto;
	height:100%;
	z-index:60;
}
#concertBannerContainer{
	height:268px;
	width:1000px;
	margin: 0 auto 20px auto;	
	overflow:hidden;
}
#concertBannerContainer .banner { position: relative; overflow: auto;  margin-left: -35px;}
#concertBannerContainer .banner li { list-style: none; width:1050px; }
#concertBannerContainer .banner ul li { float: left; margin:0; padding:0; }
#concertBannerContainer .banner ul{margin:0; padding:0;}
#concertTable th{
	text-align:left;	
	padding-bottom:5px;
}
#concertTable td{
	vertical-align:top;
	
}
#concertTable tr.first td{
	height:16px;
	padding-top:5px;
}
#concertTable tr.second td{
	padding-top:12px;
	padding-bottom:5px;
	padding-left: 22px;
}
#concertTable tr.second{
	border-bottom:solid 1px #a1a1a1;
	
}
#concertTable tr td{
	padding-left:10px ;
	
}

#concertTable tr.first td:first-child{
	padding-right:5px;
	padding-left: 20px;
}
#concertTable tr.first td:nth-child(4), #concertTable tr.first td:nth-child(3), #concertTable tr.first td:nth-child(5){
	width:210px;
}
#concertTable span{
	font-size:14px;
}
#concertTableContainer h1{
	background: url("images/stripe.png") no-repeat scroll left bottom / 950px 2px transparent;
    margin-bottom: 15px;
    margin-left: 85px;
    padding: 0 40px;
	
}
h2{ font-size:22px;}
#concertTable{
	margin-left: 30px;
	width:890px;
}
#concertTableContainer{margin-right: 20px; position:relative;}
#concertTableContainer #scrollbar { height:400px; width:920px; margin: 0 auto; position:relative;}
#concertTableContainer #scrollbar .viewport { width:100%;position:absolute;}


.controle { position:absolute; top:0; left:50%; margin-left:-190px; margin-top:-330px; height:330px; width:380px; overflow:hidden; background: url("images/controle.png"); z-index:100;}
.roundcorner_3_all{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.dropshadow_3_cent{box-shadow:0 0 3px rgba(0,0,0,0.75)}
.insetshadow_3_1px{box-shadow:inset 1px 1px 3px rgba(0,0,0,0.75)}
.controle label, .controle #uploadform2 #status{background: url("images/controle.png"); padding:2px 5px; width:80px; display:block;}
.controle input[type="submit"]{background: url("images/controle.png"); padding:2px 5px; width:107px; display:block; border:0px; margin-top:5px;}
.controle input[type="text"]{background: url("images/input_bg.png"); border:0px;}
.controleclose, .controlecommit{ margin:0 10px;}
.controleopen, .controleclose, .controlecommit, .controledelete{ cursor:pointer; background: url("images/controle.png"); color:#000; padding:4px; float:left; width:100px; text-align:center}
.controle td{padding:3px;}
.controle #controlelist { width:360px; padding:10px; z-index:10;}
.controle #uploadform1{width:190px; padding:0 0 10px 10px; float:left;}
.controle #uploadform1 img{}
.controle #uploadform2{width:165px; padding:0 10px 10px 5px; float:left;}
.controle #uploadform2 img{margin-right:3px;}
.controle #uploadform2 #status{display: inline-block; height: 76px; position: relative; width: 65px; vertical-align: top;}

#addConcert{position:absolute; top:0; right: 100px;}
#concertTableContainer #scrollbar .viewport{top:100%;}

/*
 * Kontaktseite
 */
#facebook{
	height:51px;
	width:51px;
	background-image:url(images/icon_fb.png);
}
#myspace{
	height:51px;
	width:51px;
	background-image:url(images/icon_myspace.png);
	margin:0 12px 0 24px;
}
#lastfm{
	height:51px;
	width:51px;
	background-image:url(images/icon_lastfm.png);
	margin:0 24px 0 12px;
}
#youtube{
	height:51px;
	width:51px;
	background-image:url(images/icon_yt.png);
}

.contactHeader {
    background: url("images/stripe.png") no-repeat scroll left bottom / 820px 2px transparent;
    height: 24px;
    margin-left: -10px;
    padding: 0 40px;
}


#contactBG {
    background-color: rgba(0, 0, 0, 0.4);
    height: 445px;
    left: 50%;
    margin-left: -440px;
    margin-top: -250px;
    padding: 30px;
    position: absolute;
    top: 50%;
    width: 800px;
	z-index:49;
}
#contactFormBG {
     background-color: rgba(0, 0, 0, 0.4);
    height: 270px;
    left: 50%;
    margin-left: -1521px;
    margin-top: -60px;
    padding: 0 30px 30px;
    position: absolute;
    top: 50%;
    width: 840px;
    z-index: 49;
}

#iconWrapper {
    margin-top: 5px;
    position: absolute;
    right: 50px;
}

#iconWrapper div {
    float: left;
}
#contactForm{
	margin-left: 125px;
}
#contactBand{
	margin: 40px 0 60px 30px;
}
#contactForm td{
	padding:4px;
}
#contactForm textarea, #contactForm input{
	background-color: #ABABAB;
    border: 1px solid #ABABAB;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 1px 1px #000000 inset;
    resize: none;
}
#contactForm textarea {
	resize: none;
}
#contactForm input{
	height:18px;
}

/*
 * Gästebuch/Biographie
 */
.skewdouter{
	height:100%;
	padding-right:24px;
}
.skewd{
	height: 100%;
	margin: 0 auto;
	width: 850px;	
	background-color: rgba(0, 0, 0, 0.4);
}
.hidden{
	overflow: hidden;	
}

/*
 * Biographie
 */
#biographieHeader{
	margin: 20px 0 0 20px;
}
#biographie{
	z-index:51;
}
#biographie .viewport {
    margin-top: 0;
}
/*
 * Gästebuch
 */
 .guestbookName{font-size: 18px;margin-bottom: 5px;padding: 2px 30px;}
 .guestbookDate{font-size: 18px;position: absolute;right: 20px;top: 2px;}
 .guestbookText{margin: 0 40px 0 60px;}
 .guestbookNameBG{background-color: rgba(255, 255, 255, 0.1);}
 .guestbookentry{position:relative;margin: 20px 40px 20px 15px;}
 .doguestbookentry{position:relative;margin: 20px 40px 20px 45px;}

#inputEntry textarea, #inputEntry input{
	background-color: #ABABAB;
    border: 1px solid #ABABAB;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 1px 1px #000000 inset;
    resize: none;
}
#inputEntry td{
	padding:4px;
}
#inputEntry textarea {
	resize: none;
}
#inputEntry input{
	height:18px;
}
#textfooter{
	padding-right:15px; 
	background: url('images/balken_1.png') no-repeat scroll right top transparent;
}

/*
 * Biographie
 */
.bEntry{
	margin: 0 30px 5px 50px;
}

/*
 * Members
 */
#selections{
	background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    top: 50%;
    margin-top: -275px;
    height: 120px;
    box-sizing: border-box;
    padding: 10px 15px;
}
#selections h1 {
    background: url("images/stripe.png") no-repeat scroll left bottom / 470px 2px transparent;
    box-sizing: border-box;
    margin: 0 0 15px;
    padding-left: 20px;
}


.timeline_line{
	margin-left: 50px !important;
}