/* html * { border: 1px solid yellow; } */

html {
	overflow-y: hidden;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.showborder { border: 1px solid orange; }

.hide { visibility: hidden; } 

.noborder { border: 0; }

body {
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
	line-height: 1.35em;
	font-weight: normal;
	text-align: center;
	margin: 0;
	padding: 0;
	background: #3f4551 url(../images/hg_main4.jpg) repeat 0 0;
	color: #f9eeb9;
	background-attachment:fixed;
	background-position:center; 
}

h1, h2, h3, p {
	z-index: 0;
	font-weight: normal;
}

h1 {
	font-size: 1.6em;
	padding: 0 0 0.8em;
	color: white;
}

h2,
h3 {
	font-size: 1.2em;
	color: white;
	padding: 1.4em 0 0.25em;
}

h3 {
	font-size: 1em;
}

.linkseite {

}

#video h3,
#mp3 h3,
#infosheet h3 {
	padding: 0 0 0.15em;
}

.linkseite h2 {
	padding: 0 0 0.5em;
}

.linkseite h2 a {
	color: white !important;
}

.linkseite div {
	margin-bottom: 20px;
}

ul {
	list-style: square;
	padding-left: 20px;
	line-height: 1.4em;
}

/* div zur horizontalen Seitenzentrierung */

.clearall {
	clear: both;
}

div.sempty, div.empty {
	width: 100%;
	height: 5px;
	margin: 1px auto;
	font-size: 0.1em;
	clear: both;
	display: block;
}

div.empty {
	height: 10px;
}

a, a:visited, a:active {
	color: #f9eeb9;
	text-decoration: none;
}

a:hover, a:active {
	color: white;
}

#kopf {
	position: absolute;
	top: 0;
	margin: 0 auto;
	padding: 0;
	left: 50%;
	margin-left: -494px;
	width: 984px;
	z-index: 80;
	height: 125px;
	background: transparent url(../images/hg_text.png) repeat top left; 
}

#kopf #img_left {
	position: relative;
	top: 19px;
	width: 344px;
	height: 79px;
	left: 26px;
	float: left;
}

#kopf #img_right {
	margin-top: 0;
	margin-left: 84px;
	width: 405px;
	height: 126px;
	float: left;
}

#kopf #menu_right {
	position: relative;
	top: 20px;
	right: 16px;
	float: right;
	text-align: right;
}

#nav {
	position: absolute;
	top: 125px;
	margin: 0 auto;
	padding: 0;
	left: 50%;
	margin-left: -494px;
	width: 984px;
	clear: both;
	padding: 0 ;
	height: 32px;
	z-index: 120;
	vertical-align: middle;
	background: transparent url(../images/hg_nav.png) repeat-x top left;
	overflow: hidden;
}

#nav,
#inhalt,
#fuss,
#kopf,
.kuenstlerblock .kuenstler img,
#makeMeScrollable,
.kuenstlerfoto,
.linkimg,
.showshadow  {
	-moz-box-shadow: 0 0 8px 2px #444;
	-webkit-box-shadow: 0 0 8px;
	box-shadow: 0 0 8px 2px #444;
}

.noshadow {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

#nav li {
	padding: 0;
	margin: 0;
	float: left;
	position: relative;
	font-size: 1em;
	line-height: 32px;
	list-style: none;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

#nav a {
	text-decoration: none;
}

#nav li a,
#nav li li a {
	display: block;
	width: 123px;
}

#nav li a:hover,
#nav li li a:hover {
	background: transparent url(../images/nav_hilite.png) no-repeat top left;
}

#nav li a.selected,
#nav li div.selected  {
	background: transparent url(../images/nav_selected.png) no-repeat top left;
	margin-top: 1px;
}

#inhalt {
	position: absolute;
	top: 217px;
	bottom: 32px;
	text-align: left;
	left: 50%;
	margin-left: -494px;
	width: 924px;
	padding: 30px;
	background: transparent url(../images/hg_text.png) repeat top left; 
	overflow: auto; 
}

#inhalt.start {
	padding: 0;
	bottom: 32px;
	margin-left: -494px;
	width: 984px;
	overflow: hidden;
}

#inhalt.kuenstler {
	top: 157px;
	bottom: 12px;
}

#mp3 img {
	margin-right: 10px;
	margin-bottom: 0;
}

#start {
	background: black url(../images/hg_codis3.jpg) no-repeat top center;
	width: 100%;
	height: 100%;
	float: none;
	padding: 0;
}

.kuenstlerblock {

}

.kuenstlerblock .kuenstler img {
	border: 1px solid #f9eeb9;
	height: 250px;
	width: 175px;
}

.kuenstler {
	float: left;
	width: 25%;
	margin: 0 0 20px;
	text-align: left;
}

.kuenstlerfoto,
.kuenstlervideo,
.showvid {
	float: left;
	padding: 0;
	width: 350px;
}

.kuenstlerfoto,
.showvid img.video {
	border: 1px solid #f9eeb9;
}

.kuenstlertexte {
	margin-left: 390px;
}

.kuenstlerblockrechts > img,
.kuenstlerblock > img {
	float: left;
}

.downloadlink {
	vertical-align: middle;
	margin: 0;
	height: 16px;
	padding-right: 5px;
}

img.titel {
	margin-left: -3px;
	margin-bottom: 5px;
}

.linkimg {
	float: left;
	clear: none;
	height: 80px;
	width: 113px;
	margin-right: 20px;
	margin-bottom: 20px;
}

#mp3,
#video,
#infosheet {
	float: left;
	width: 452px;
	clear: none;
	padding: 0;
	margin: 0;
}

#video .videolink,
#mp3 .mp3link {
	float: left;
	width: 460px;
	clear: none;
	padding-bottom: 20px;
}

#video div.videolink img.video,
#mp3 div.mp3link img.mp3,
#infosheet div.infolink img.info {
	float: left;
	margin-right: 20px;
	clear: none;
	border: 1px solid #f9eeb9;
}

#fuss {
	color: #3f3f3f;
	position: absolute;
	bottom: 0;
	left: 50%;
	font-size: 0.7em;
	color: white;
	margin-left: -494px;
	width: 984px;
	z-index: 100;
	height: 28px;
	padding: 3px 0 1px;
	text-align: left;
	background: transparent url(../images/hg_nav.png) repeat-x bottom left;
}

#fuss div {
	padding: 1px 20px 0;
	float: left;
	line-height: 25px;
	vertical-align: middle;
}

#fuss .addthis_button_facebook_like {
	width: 120px !important;
	overflow: hidden;
}

#kontakt {
	display: none;
	width: 500px;
	background-color: white;
}

/* root element for the scrollable. when scrolling occurs this element stays still. */ 
#makeMeScrollable { 
	position: absolute;
	top: 157px;
	margin: 0 auto;
	padding: 0;
	left: 50%;
	margin-left: -494px;
	width: 984px;
	z-index: 120;
    overflow: hidden; 
	height : 60px;
	background-color: black;
} 
 
/* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and not for this element. */ 
#makeMeScrollable div.scrollableArea { 
    /* this cannot be too large */ 
    width: auto; 
    position:absolute;
} 
 
/*  a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ 
#makeMeScrollable div.scrollableArea a { 
   float: left; 
	padding: 0 !important;
	margin: 0 !important;
} 

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

#makeMeScrollable div.scrollableArea *
{
	position: relative;
	display: block;
	float: left;
	padding: 0 2px;
	margin: 0;
}


div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

/* set width for the <fb:like> tag */


/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#2f292a;}

#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxLoadedContent{background:#000; padding:5px;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/colorbox/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}
		
		/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: absolute;
	top: 0;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
	background: white;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: white;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #2f292a;
	position: relative;
}

.jspDrag
{
	background: #f9eeb9;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}

	div.overlay {
		background-image:url(../images/flowplayer/transparent.png);
		padding:40px;    
		width:400px;
		height: 20px;
		display:none;
		z-index: 99999;
	}

	div.overlay div.close {
		background:url(../images/flowplayer/close.png) no-repeat;
		position:absolute;
		top:2px;
		right:5px; 
		width:35px;
		height:35px;
		cursor:pointer;
	}

	a.player {         
		display:block;
		height:450px;            
	}