@charset "UTF-8";
/* CSS Document */




/* GENERAL */


* {
    margin:0;
    padding:0;
	}


html, body {
	height:100%;
	background:#FFFFFF;
	}

		


/* SECRET HIDDEN PRELOAD CONSPIRACY */


#preload {
	display:none;
	}
	
#preload img {
	height:0;
	width:0;
	border:none;
	position:absolute;
	top:0;
	left:0;
	z-index:-30;
	}




/* MAIN CONTAINERS */


#wrapper {                  /*contains ALL ELEMENTS of the page except MENU and FOOTER */
    float:left;
	block:inline;
	min-height:100%;
	height:auto;
	height:100%;
	margin-right:-2000em;
	padding-left:20px;
	position:relative;
	}


#menu_head {
	width:75%;
	height:auto;
	position:fixed;
	left:50%;
	margin:20px 0 0 -37.5%;
	}
	
*html>body #menu_head {
	position:fixed;
	}


#menu_foot {
	width:75%;
	height:auto;
	position:fixed;
	left:50%;
	margin:20px 0 0 -37.5%;
	}
	
*html>body #menu_foot {
	position:fixed;
	}

	
#bumper {                   /* it's a bumper, baby - sits atop the floating content boxes */
	clear:both;
	width:auto;
	height:69px;
	}


	

/* MENU ELEMENTS */


.blankdiv {                 /* holds main nav bar */
	clear:both;
	width:auto;
	height:auto;
	}


.blankdivsub {              /* holds sub nav bar */
	clear:both;
	width:auto;
	height:auto;
	}


.butts {                    /* holds one main nav icon */
	float:left;
	height:20;
	width:auto;
	margin: 0 3px 3px 0;
	}	


.subbutts {                 /* holds one sub nav icon */
	float:left;
	height:14;
	width:auto;
	margin: 0 2px 2px 0;
	}


.ic_menu {                 /* resizes main menu icons */
	height:20px;
	width:auto;
	}


.ic_submenu {              /* resizes sub menu icons */
	height:14px;
	width:auto;
	}




/* FOOTER ELEMENTS */


.footer {                 /* holds the footersub div */
	clear:both;
	width:auto;
	position:absolute;
	top:0px;
	}


.footersub {              /* contains the actual footer content/text/links */
	float:left;
	width:auto;
	margin:618px 0 0 8px;
	}




/* IMAGES and ICONS */


img {                     /* images can't be dragged */
	-webkit-user-drag:none;
	-moz-user-drag:none;
	border:0px none;
	}


.gal {                    /* gallery display of images */
	height:540px;
	width:auto;
	border:0px none;
	}


.arrow_icon {             /* arrows */
	width:15px;
	height:auto;
	}	

.inter {            /* slim box for title */
	float:left;
	display:block;
	top:0;
	width:178px;
	background:#FFFFFF;
	color:#FFFFFF;
	margin-top:455px;
	margin-left:15px;
	padding-right:20px;
	}



/* FLOATING CONTENT BOXES */



/*   arrows   */

.arrow_left {             /* box for arrow_prev in galleries */
	float:left;
	display:block;
	top:0;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin-top:455px;
	margin-right:20px;
	}


.arrow_right {            /* box for arrow_next in galleries */
	float:left;
	display:block;
	top:0;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin-top:455px;
	margin-left:40px;
	padding-right:20px;
	}



/*   intro / outro   */

.intro {                  /* stand-alone TEXT box wrapper preceding gallery */
	float:left;
	display:block;
	position:relative;
	height:440px;         /* top/bottom margins and height make up (540px plus 20px at bottom) = 560px maximum height */
	width:300px;          /* left/right margins and width make up (380px box plus 15px margin right) = 395px */
	background:#FFFFFF;
	color:#FFFFFF;
	margin:80px 55px 20px 40px;
	}


.outro {                  /* stand-alone TEXT box wrapper following gallery */
	float:left;
	display:block;
	position:relative;
	height:440px;         /* top/bottom margins and height make up (540px plus 20px at bottom) = 560px maximum height */
	width:300px;          /* left/right margins and width make up (380px box plus 15px margin right) = 395px */
	background:#FFFFFF;
	color:#FFFFFF;
	margin:80px 55px 20px 40px;
	}


.iotxt {                  /* TEXT container to go inside img_intro and img_outro */
	position:absolute;
	bottom:0;
	}



/*   image containers   */

.img_box {                /* template image box for galleries */
	float:left;
	display:block;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 15px 20px 0;
	}
	
.pre_box {                /* template image box for preview pages */
	float:left;
	display:block;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 45px 20px 0;
	}
	
.rec_box {                /* template image box for preview pages */
	float:left;
	display:block;
	position:relative;
	width:auto;
	height:540px;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 45px 20px 0;
	}
	
.rec_boxfixwidth {                /* template image box for preview pages */
	float:left;
	display:block;
	position:relative;
	width:500px;
	height:540px;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 45px 20px 0;
	}

.tourdates_box {                /* template image box for preview pages */
	float:left;
	display:block;
	position:relative;
	width:700px;
	height:540px;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 45px 20px 0;
	}

.pre_text {                /* template image box for preview pages' text info (look section) */
	float:left;
	display:block;
	width:250px;
	background:#FFFFFF;
	color:#FFFFFF;
	}


.img_box_jules {          /* image box for SFFB comic has wider right margin */
	float:left;
	display:block;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 20px 20px 0;
	}

.img_box_jules1 {          /* image box that has no right margin */
	float:left;
	display:block;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 0 20px 0;
	}

.mus_box {                /* template image box for galleries */
	float:left;
	display:block;
	width:auto;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 3px 20px 0;
	}

/*   text containers   */

.bkl {                   /* CONTAINER for text box left page */
	float:left;
	display:block;
	position:relative;
	height:560px;        /* top/bottom margins and height make up (540px plus 20px at bottom) = 560px maximum height */
	width:320px;          /* left/right margins and width make up (380px box plus 15px margin right) = 395px */
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 25px 20px 45px;
	}

.bkr {                   /* CONTAINER for text box right page */
	float:left;
	display:block;
	position:relative;
	height:560px;        /* top/bottom margins and height make up (540px plus 20px at bottom) = 560px maximum height */
	width:320px;          /* left/right margins and width make up (380px box plus 15px margin right) = 395px */
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 45px 20px 25px;
	}

.bkwrp {                  /* inner wrapper */
	position:absolute;
	bottom:0;
	}

.bktxt {                  /* TEXT container for book left/right */
	max-height:520px;     
	width:320px;
	margin:20px 0 0 0;
	}

.mentxt {                  /* TEXT container for Main pages (Look Listen etc) */
	height:520px;     
	width:320px;
	margin:20px 0 0 0;
	}



.bktxtest {                  /* TEXT container for book left/right */
	float:left;
	height:410px;     /* ursprünglich 520, also bis oben */
	width:320px;
	margin:20px 0 20px 0;
	}

.bktxtfull {                  /* TEXT container for book left/right */
	float:left;
	max-height:520px;     /* ursprünglich 520, also bis oben */
	width:320px;
	margin:20px 0 20px 0;
	}
	
.bktxtf_w_head {                  /* TEXT container for book left/right */
	float:left;
	height:472px;     /* ursprünglich 520, also bis oben */
	width:320px;
	margin:20px 0 20px 0;
	}

.bkhead {
	bottom:20px;
	height:80px;
	width:320px;
	}

.bkheadtop {
	width:320px;
	}

.accmain {                /* template accordion container box for expanding music divs */
	float:left;
	width:auto;
	overflow:hidden;
	background:#FFFFFF;
	color:#FFFFFF;
	margin:0 0 20px 0;
	}

.accmain section {                /* template accordion container box for section, i.e. div contained in main accordion div */
	float:left;
	overflow:hidden;
	background:#FFFFFF;
	color:#FFFFFF;
	cursor:pointer;
	}
	
.accmain section:hover {                /* bkg colour changes on hover */
	background:#FFFFFF;
	}
	
.accmain section p {                /* no text but headline is displayed before section folds out */
	display:none;
	}

.accmain section:target {
	background:#FFFFFF;
	}
	
.accmain section:target:hover {
	background:#FFFFFF;
	}
	
.accmain section:target h2 {
	width:100%;
	}
	
.accmain section:target h2 a{
	color:#FFFFFF;
	}
	
.accmain section:target p {
	display:block;
	}
	
.accmain section h2 a{
	display:block;
	font-size:0.5em;
	font-weight:strong;
	text-decoration:none;
	}

.horizontal section {
	width:1px;
	height:540px;
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
	}
	
.horizontal section h2 {
	-webkit-transform:rotate(90deg);  
    -moz-transform:rotate(90deg);  
    -o-transform: rotate(90deg);  
    transform: rotate(90deg);  
    width:320px;   
    position:relative;
	bottom:-180px;
	left:-150px;
	}
	
.horizontal :target {
	width:300px;
	height:540px;
	cursor:auto;
	margin: 0 65px 0 0;
	}
	
.horizontal :target h2 {
	top:0px;  
    left:0px;  
    -webkit-transform:rotate(0deg);  
    -moz-transform:rotate(0deg);  
    -o-transform: rotate(0deg);  
    transform: rotate(0deg);   
	}
	

/* TEXT AND HYPERLINKS */


a:link {
	text-decoration:none;
	font-weight:bold;
	color:#000000;
	}

a:visited {
	text-decoration:none;
	font-weight:bold;
	color:#000000;
	}

a:hover {             	  /* for mouse */
	text-decoration:underline;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#CCCCCC;
	}
	
a:active {
	text-decoration:none;
	font-weight:bold;
	background-color:#000000;
	}
	
a:focus {             	  /* for keyboard */
	text-decoration:underline;
	font-weight:bold;
	background-color:#000000;
	}



.capt {              	  /* for IMAGE CAPTIONS and 'PAGE NUMBERS' */
	font-family:Geneva, Verdana, Tahoma, sans-serif;
	font-size:0.5em;
	font-weight:200;
	color:#CCCCCC;
	margin:6px 0 0 0;
	text-align:center;
	}