/* 
   (C) by Creative Spirits, Jens-Uwe Korff
   ---------------------------------------
   Last update: 27 Januar 2010
   
   Colour scheme:
   --------------
  	dark earth red: #cc3300
	light red:		#ffebc2
	sand yellow:	#ffd98c
	dark yellow:	#ffb319
	background:		#f2f2f2
	visited links:  #8B8985
	grey:			#969696
*/

/* =Body and wrapper divs
   -------------------------------------------------------------------------------------- */
html {height:100%}
html, body {height:100%;padding:0;margin:0 auto;width:990px;background:#f2f2f2 url("img/bg_gradient.gif") repeat-y 0 0;color:#000;font:normal 83% Verdana, Arial, Helvetica, sans-serif}
.wrap {margin:0 auto;min-height:101%/*for short pages, force scrollbar*/;width:930px;padding:0 10px;position:relative;background-color:#fff}


/* =Layout
   -------------------------------------------------------------------------------------- */
#columnLeft {position:absolute;left:10px;top:193px;width:100px}
		

/* Change JIM: text-align:justify für columnCenter */
#columnCenter {text-align:justify; margin:0 110px 0 110px;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;padding:0 10px;overflow:hidden}
	* html #columnCenter {margin-bottom:10px/*IE does not observe margin of footer*/;height:1%}
	*+ html #columnCenter {margin-bottom:10px;height:1%/* Required to prevent IE from messing up margins of floats inside it */}

.wide #columnCenter {margin-right:0;border-right:0;padding-right:0}
	.wide #columnCenter iframe {margin:0;padding:0}
	* html .wide #columnCenter {width:80%;margin:0;padding-right:0;margin-left:160px}
	*+ html .wide #columnCenter {margin-bottom:10px}

#columnRight {position:absolute;right:10px;width:100px;top:193px}

* html br {display:inline}


/* =Masthead
   -------------------------------------------------------------------------------------- */
#masthead {width:100%;height:150px;position:relative;background:#fff url('/images/logo.jpg') no-repeat 0 0;margin-bottom:10px;border-bottom:1px solid #ccc;border-top:1px solid #ccc}
	#masthead a {display:block;height:150px;text-indent:-9000px}

#masthead_musikgarten {width:100%;height:150px;position:relative;background:#fff url('/images/musikgarten_kopf.jpg') no-repeat 0 0;margin-bottom:10px;border-bottom:1px solid #ccc;border-top:1px solid #ccc}
	#masthead_musikgarten a {display:block;width:1024px;height:150px;text-indent:-9000px}


/* =Breadcrumb
   -------------------------------------------------------------------------------------- */
#breadcrumb {height:23px;padding-top:10px;background-color:#fff;font-size:.8em;color:#a0a0a0;position:relative}
	#breadcrumb .breadcrumbTrail {float:left;text-align:left;color:#6f6774}
	#breadcrumb .search {position:absolute;right:0;top:5px;text-align:right}
	* html #breadcrumb .search {width:35em}
	#breadcrumb .search input#textbox {width:25em;border:1px solid #a0a0a0;padding:2px;font-size:1em;height:1.6em}
	#breadcrumb .search input#button {font-size:1em;width:3em}
	#breadcrumb .search form {/* Fix up Opera */display:block;float:left}
	#breadcrumb .search a {display:block;float:left;padding-right:1em;margin-top:2px}
	#breadcrumb .search label {display:none}

/* =Tools
   -------------------------------------------------------------------------------------- */
/* Clearfix (credit: http://www.positioniseverything.net/easyclearing.html) */
.cfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.cfix {height:1%}
/* Clearing */
.cLeft {clear:left}
.cRight {clear:right}
.cBoth {clear:both}
/* Hidden text */
.invisible {display:none}
.hideElement {width:0;height:0;overflow:hidden}
* html .hideElement {font-size:0}
*+ html .hideElement {font-size:0}


/* =Headings
   -------------------------------------------------------------------------------------- */
h1,h2,h3,h4 {font:bold 2.5em "Trebuchet MS",Arial,Helvetica,sans-serif;padding:0;color:#c30;position:relative;text-align:left}
h1 {margin:0 0 6px}
h2 {font-size:1.8em;margin:1.6em 0 6px;border-bottom:1px solid #e0e0e0}
h3 {font-size:1.45em;margin:1.8em 0 6px;color:#000}
h4 {font-size:1.2em;margin:1em 0 6px}
h2 img {vertical-align:baseline}
h2 a {text-decoration:none}
h2 a:hover {text-decoration:underline}
.bbsn {border-bottom-style:none}
#columnRight h3,#columnLeft h3 {margin:24px 0 6px;width:100%;font-size:1.45em;line-height:1em;border-bottom:1px solid #FFD98C}
#columnRight h3:first-child {margin:2.7em 0 6px 0;/* First h3 element has no top margin to make it flush with text to left */}
.inlineRight {position:absolute;right:0;bottom:0;font:normal 55% Verdana, Arial, Helvetica, sans-serif;color:#ccc}


/* =Text
   -------------------------------------------------------------------------------------- */
p {margin:0 0 1.1em;padding:0;line-height:1.3em}
abbr, acronym {border-bottom:1px dotted black}
.tip {position:relative;margin-left:55px}
	.tip span {font:bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;color:#c30;position:absolute;top:0;left:-55px;width:2.5em;height:24px;padding:0 0 0 21px;background:transparent url('img/li-sprite.gif') no-repeat 0 -560px}
.emphasis {font-weight:bold}
.indent {padding-left:4em}
.footnote {clear:both;margin-top:1em;padding-top:1em;font:normal .9em Arial, Helvetica, sans-serif;color:#B2B2B2;border-top:1px solid #e0e0e0}
.abstract {font:bold 1.2em Arial, Helvetica, sans-serif}
pre {font:normal 1.1em "Courier New", Courier, mono;background-color:#e9e9e9;padding:5px;margin-bottom:10px;overflow:scroll}
pre.poem {font-family:Georgia, "Times New Roman", Times, serif;background-color:inherit;padding:0;overflow:visible}
	* html pre.poem {background-color:#f7f7f7}
	*+ html pre.poem {background-color:#f7f7f7}
/* Open/close text area: */
a.closedToggler,a.openToggler {padding-left:14px;background:transparent url('img/li-sprite.gif') no-repeat 0 -98px}
	a.openToggler {background-position:0 -118px}
/* Textbox */
/* Change JIM: width:95% hinzugefügt;  */
.textbox {border:1px solid #FFD98C;background-color:#FFEBC2;padding:.5em .5em 0;margin:.5em 0;display:table;width:98%;text-align:left}
	.textbox h3 {margin-top:0}
	* html .textbox {overflow:hidden}
	*+ html .textbox {overflow:hidden;position:relative}
/* Comment textbox */
.comment {background-color:transparent;border-width:1px 0 0;border-top-color:#eee;padding:0;margin:0 0 2em}
/* Number crunch */
.numberCrunch {color:#888}
.numberCrunch span {width:50px;line-height:100%;font:bold 24px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#969696;letter-spacing:-..5;padding-right:.2em}
/* To preserve line-height and selector appearance: */
sup {vertical-align:text-top;font-family:Arial, Helvetica, sans-serif;color:#999}
sub {vertical-align:text-bottom}
sup a {text-decoration:none}
.byline {font-size:.94em;margin:0 0 .5em;color:#888}
	.byline em {font-weight:bold;font-style:normal}
/* Pagination */
.pagination {clear:both;overflow:hidden;line-height:1.9em}
.pagination span {float:right}
.pagination strong,.pagination a {background-color:#ffd98c;border:1px solid #cc3300;color:#000;padding:2px 6px 2px;margin-left:3px}
.pagination a {background-color:#fff;text-decoration:none}
.pagination a:hover {background-color:#ffd98c}
* html .pagination {height:1%}

/* =Tables
   -------------------------------------------------------------------------------------- */
caption {font:bold 1.45em "Trebuchet MS", Arial, Helvetica, sans-serif;padding:1em 0 6px}
tr {vertical-align:top}
/*Change JIM: displaytable angepasst, erstmal ohne background*/
.displaytable {border-collapse:collapse;width:100%;margin-bottom:1em}
	.displaytable th {border-bottom:1px solid #FFD98C;padding-left:0em;padding-top:0.2em;padding-bottom:0.3em;padding-right:0.2em;text-align:left}
	.displaytable td {border-bottom:1px solid #FFD98C;padding-left:0em;padding-top:0.2em;padding-bottom:0.3em;padding-right:0.2em;text-align:left}
/*JUK: .displaytable {width:100%;background-color:#FFEBC2;border-collapse:collapse;border-spacing:0;margin-bottom:1em}
	.displaytable td,.displaytable th {border-bottom:1px solid #FFD98C;padding:.2em;text-align:left}
	.displaytable table td {border:0;padding:0;margin:0}*/
/* Table for movies */
.movietable th {vertical-align:top;text-align:right;padding-right:.8em}
/* Table for music */
.musictable {vertical-align:top;border-collapse:collapse;border-spacing:0}
	.musictable th {text-align:right;border-right:1px solid #FFD98C;padding:.5em;vertical-align:top}
	.musictable td {padding:.5em}
	.musictable ol {margin:0;padding:0 0 0 2.4em}
.sortable th {cursor:pointer}


/* =Lists
   -------------------------------------------------------------------------------------- */
ul {margin:0 0 1.1em;padding:0}
li,.timelineList li li {margin:0 0 .75em 0;padding-left:1.2em}
ul li,.timelineList li li {list-style-type:none;overflow:hidden/*Avoid bullet slide under float*/;background:transparent url('img/li-sprite.gif') no-repeat -44px 4px}
.list-bus,.list-car {background-position:0 -250px;padding-left:3.5em}
.list-car {background-position:0 -150px}
table li {margin-left:0}
/* Left column list settings */
#columnLeft ul li,#columnRight ul li {background-image:none;padding-left:0;margin-left:0}


/* =Links
   -------------------------------------------------------------------------------------- */
a,a:link {color:#cc3300}
a:active {color:#a79aae}
a:visited {color:#8B8985}
a:hover {color:#FF9933}
.externalLink {background:transparent url('img/li-sprite.gif') no-repeat 100% -350px;padding-right:12px}

.actionButton {float:left;display:block;width:75px;height:29px;padding-top:6px;text-decoration:none;background:transparent url('img/actionButton.png') no-repeat 0 0;text-align:center;overflow:hidden}
* html .actionButton {background-image:url('img/actionButton.gif')}
.actionButton:hover {text-decoration:underline;color:#cc3300}
.xingProfile {display:block;margin-top:47px}
.newSection {border-top:1px solid #ffd98c;margin-top:1.5em;padding-top:.5em}
.storeLink {border:0;background:transparent;padding:0;margin:0;cursor:pointer;display:inline}
* html .storeLink {width:1%;overflow:visible}


/* =Navigation
   -------------------------------------------------------------------------------------- */
/* Main */
.nav {width:100%;border-bottom:1px solid #E0E0E0}
	.nav li {color:#6f6774;text-align:right;padding:0;margin:2px 0}
	.nav li#active a {border-right:4px solid #c30;color:#542}
	.nav a,
	.nav a:visited {text-decoration:none;display:block;padding:2px 2px 2px 0;border-right:4px solid #fff;color:#AA9D81}
	* html .nav a {height:1em;/* Force IE to keep line height when "display: block" */}
	.nav a:hover {background-color:#FFEBC2;border-right:4px solid #c30;color:#452}
	.nav ul {border:0;font-size:smaller;padding-bottom:.5em;margin:0}
	/* Second level */
	.nav ul li {margin:0}
	.nav ul a,
	.nav ul a:visited,
	.nav ul li#active {padding:2px 14px 2px 0}
	/* Active element in second level */
	.nav ul li#activeSec {border-right:4px solid #c30}
	.nav ul li#activeSec a {border:0}
	.nav ul li#activeSec a:hover {border:0}
/* breadcrumb */
.breadcrumbTrail a {text-decoration:none}
.breadcrumbTrail a:visited {color:#c30}
/* Fixed top of page link */
#topOfThePage {position:fixed;/* IE7 needs parent element of anchor to be "fixed" as well */}
#topOfThePage a {position:fixed;bottom:0;right:0;display:block;text-align:center;width:20px;height:18px;text-decoration:none}
/* IE6 does not support "fixed" position => degrade to absolute: */
* html #topOfThePage a {position:absolute;right:-38px;bottom:0}


/* =Footer
   -------------------------------------------------------------------------------------- */
#footer {position:relative;clear:both;margin:10px 0 0;padding:10px;font-size:.8em;color:#808080;background-color:#ccc;border-top:1px solid #aaa}
	#footer .footer-nav-main {float:left;margin:0 0 0 100px;padding:1em 0 1em 1em;border-left:1px solid #bbb}
	#footer .footer-nav-sub {float:right;width:14.2%;margin:0;padding:1em 0 1em 1em;border-left:1px solid #bbb}
	#footer .footer-copyright {border-right:1px solid #bbb;left:560px;padding:1em 1em 1em 0;position:absolute;text-align:right;width:27%}	#footer li {background:none;padding:0}
	#footer .first {margin-bottom:2.9em}
	* html #footer {clear:none;height:1%}
	* html #footer .footer-copyright {left:564px}
	*+ html #footer .footer-nav-sub {width:14.7%}
	* html #footer .footer-nav-main {display:inline}


/* =Forms
   -------------------------------------------------------------------------------------- */
fieldset {border:0;padding:0;margin:0}
input {margin:0}
.orderButton button {clear:right;float:right;margin-right:38px;border:0;width:75px;height:29px;cursor:pointer;background:transparent url('img/actionButton.png') no-repeat 0 0;text-align:center}
.reviewimage .orderButton button {float:none;margin:0}
#comment_form label {display:block;width:60px;float:left}
	#comment_form .submit {clear:both;margin-left:60px/*same as label width*/}
	#comment_form img {float:left;margin-right:10px}


/* =Images
   -------------------------------------------------------------------------------------- */
img {border:0;margin:0;padding:0;vertical-align:bottom}
.imageRight {float:right;margin:6px 0 1em 12px;background-color:#f7f7f7;position:relative;z-index:1/*img always over heading*/}
.imageLeft {float:left;margin:6px 12px 1em 0;background-color:#f7f7f7;position:relative;z-index:1/*img always over heading*/}
.textbox .imageRight,
.textbox .imageLeft {background-color:transparent}

/* =Gallery
   -------------------------------------------------------------------------------------- */
.galleryEntry {float:left;width:219px;height:250px;margin-right:10px;text-align:left;overflow:hidden}
.galleryEntry h2 {font-size:1.5em;border:0;margin:.6em 0 0}
.galleryEntry p span {color:#999}
.galleryEntry img {margin-right:.5em;border:2px solid #cc3300;width:215px}
/*.neuesteBilder {float:left;width:150px;margin-right:22px}*/
.neuesteBilder {float:left;width:154px/*=150 + 2 * 2px border*/;margin-right:18px}
.neuesteBilder img {margin-bottom:.5em;border:2px solid #cc3300}
/*.galleryCategory {float:left;width:150px;margin-right:22px}*/
.galleryCategory {float:left;width:154px;height:150px;margin-right:18px}
.galleryCategory img {margin-bottom:.5em;border:2px solid #cc3300}
.galleryCategory p {max-height:2.6em/*double p line-height*/;overflow:hidden} /* does not work in IE6 */
* html .neuesteBilder {display:inline/*Fix IE6 double-margin bug*/}
* html .galleryCategory {display:inline/*Fix IE6 double-margin bug*/}

/* =Lightbox
   -------------------------------------------------------------------------------------- */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.chor-auftakt.net/images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.chor-auftakt.net/images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* =Repertoire
   -------------------------------------------------------------------------------------- */
.repertoire {
	/*float:left;
	width:33%;*/
	margin-left:-20px;
	overflow:hidden;
}
* html .repertoire {height:1%;width:708px} /* IE6 */
.repertoire ul {
	padding: 0;
	text-align: left;
}
.repertoire li {
	list-style-type:none;
	text-align:left;
	position:relative;
	padding:0 25px 0 0;
	margin:0 0 .5em 0;
	width:190px;
	height:27px;
	line-height:1.1;
	margin-left:20px;
	float:left;
}
* html .repertoire li {display:inline} /* IE6 */
.repertoire span {
	position:absolute;
	top:0;
	right:0;
	width: 21px;
	text-align:right;
}
.repertoire em {font-style:normal;}

/* =Drucker Stile (immer am Ende belassen da sie o.g. Stile ueberschreiben muessen)
   -------------------------------------------------------------------------------------- */
@media print {
	html,body,.wrap {width:auto;background:transparent none}
	#breadcrumb,#columnLeft,#columnRight,.footer-nav-main,#topOfThePage,#masthead {display:none}
	/* #masthead {background:transparent none;border:0;height:auto;width:auto}
	#masthead a {text-indent:0;display:inline;font-size:3em;text-decoration:none;margin-bottom:.5em} */
	#columnCenter {width:auto;margin:0;border:0;text-align:left;overflow:visible}
	#footer {background:transparent none}
	#footer .footer-copyright {border:0;position:static;width:auto;text-align:left;padding:0}
	#footer .footer-copyright li {margin:0 0 1em 0;display:none}
	#footer .footer-copyright .first {display:block}
	.lied {font-size:120%}
	/* NOTE: The following rule requires that #columnCenter has "overflow:visible":*/
	.lied .ablauf {page-break-before:always}
	.repertoire {overflow:visible;width:100%}
	.repertoire li {width:40%;padding-top:2px;border-top:1px dotted #ccc}
}