@import url('/webfonts/webfonts.css');

html {height:101%;}

body {
	margin: 0;	
	color: #000;
	background: #fbb900;
	background: #999;
	
	font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; 	
	font-size: 15px;
	line-height: 140%;
	min-height:102%;
	background-repeat: repeat-y;
}

.XXwrapper {opacity:0.4;}

.wrapper {max-width: 1400px; width:100%; margin: 0 auto 0 auto; min-height:102%; position:relative; background:#ece6e6; padding-bottom: 50px;}

.bdigjazz .wrapper {max-width: 1200px;}

.contentbox {width: 92%; margin: 0 auto 0 auto; }

.contentbox .programm {width:63.0%; float:left; position: relative;}
.club .contentbox .programm {     width: 100%; float:none; }
.club .contentbox .sidebar {     width: 100%; }


h2.kaltag {
	background-color: #575656;
	color:#fff;
	font-size:20px;
	XXfont-style:italic;
	text-transform: uppercase;
	padding: 8px 0 6px 0;
	margin: 0 0 10px 0;
	clear:both;
	text-indent: 10px;
	line-height:110%;
}
h2.kaltag a {	color:#fff ! important; }




.topics_calender {  width:99%; }

.topics_calender .day { display:block; float:left;  width:14.28%; height:32px; padding:3px 0; line-height: 120%; text-align: center;}

.topics_calender .day span { display:block;  font-weight:bold; }
.topics_calender .day.headline {  background: rgba(100,100,100,0.0);    height:20px; font-weight:bold; padding-top:10px; font-size:18px;}

.topics_calender .day a {display:block; height:25px; padding:7px 0 0 0; margin:3px; font-weight:bold; background: #dadada;}
.topics_calender .day.current a { XXfont-style:italic; background: #e73d18;}
.topics_calender .day.future a{ font-weight:bold; background: #b3b2b2;}
.topics_calender .after a, .topics_calender .before a{ opacity:0.1; }

.topics_calender .day.has_event {background: rgba(100,100,100,0.2);  opacity:1; cursor:pointer;}
.XXtopics_calender .day:hover {background: rgba(100,100,100,0.4); }

.topics_calender .day .events-hint { display:none; width:20px; margin:0 auto; height:10px; background: #0ff; position:relative; z-index:3000;}
.topics_calender .day:hover .events-hint { display:block; }
.topics_calender .day .events-hint .events-box {position:absolute; top:0; left:-60px; width:130px; padding: 5px; background: #fff; box-shadow: 0 5px 7px 2px rgba(0, 0, 0, 0.4); border-radius:5px; font-size:0.9em; line-height:120%;}
.topics_calender .day .events-hint .events-box a {display:block; padding:4px 0;}

.topics_calender .pagination { height:30px; text-align: center;  font-weight: bold; }
.topics_calender .pagination h3 { margin: 0 10%; padding:8px 0 0 0; line-height:100%; font-size:18px; }
.topics_calender .pagination a.monthswitch  { display:block;  width:9%;  height:30px; background: rgba(100,100,100,0.2); text-decoration:none; line-height:100%; font-size:24px; cursor:pointer;}


.topics_calender .pagination {XXbackground-color: #575656;  text-transform: uppercase; 	line-height:110%; height: 36px ! important;}
.topics_calender .pagination a, body .topics_calender .pagination h3 {color:#000 ! important;  font-size:20px;}
.topics_calender .day a {color:#000; font-size:18px;}

.topics_calender .day.headline  {background: transparent;}

/*
.topics_calender {border:none;}


.topics_calender .day {background: #dadada; }
.topics_calender .day.future {background: #b3b2b2;}
.topics_calender .day.current {background: #e73d18;}
.topics_calender .day.current a {color:#fff;}


*/	

.programmblock   {padding-bottom: 10px; position: relative;}
.programmblock  .bildblock {clear: left; float:left; width: 40%;}
.programmblock  .bildblock img {width: 100%;}

.programmblock  .textblock  {width: 58%; float:right; }
.XXprogrammblock.haspic  .textblock  {width: 58%;  }

.programmblock  .readmore {float: right; }

.programmblock .logo {max-width: 30%; position: absolute; top: 0; left: 0;}
.programmblock .logo img {max-width: 100%;}

.programmblock.haspic .logo {max-width: 10%; position: absolute; top: 10px; left: 10px; }
.programmblock.haspic .logo img {background: #fff; box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.75); border: 2px solid #fff;}

.programmblock .daten2 em {font-style: normal; font-weight: bold;}


a.togglethis {position:absolute; right:0; bottom:20px; width:24px; height:24px; background: #e73d18; color:#fff; font-size:22px; line-height:0.5; text-align:center; font-weight:bold; z-index:10000; cursor: pointer; border-radius:5px;}
a.togglethis:hover {background: #e8684c; color:#fff;}

.tagtrenner {clear:both; height: 10px; background: #dadada; margin:10px 0;}

.startseite .programmblock {max-height: 190px; overflow:hidden; }
.startseite .programmblock .textblock {padding-bottom:30px;}
.startseite .tagtrennervorher {background: transparent url(img/fade.png) repeat-x; height:60px ! important; margin-top:-55px; margin-left:-5px; position:relative; z-index:2000; pointer-events: none; }

.startseite .programmblock.SeeFullEvent {max-height:10000px ! important; }
.startseite .programmblock.SeeFullEvent .togglethis {display:none; }

.clubheader {}
	.clubheader .logo {float:left; width:30%; background:none;}
	.clubheader .logo img {width:auto  ! important; max-width:98%}
	.clubheader .adressbox {width:40%;}
	.clubheader .adressbox a {display:none;}
	
	
	.mobilemenu {width: 30%; float: right;}
	.mobilemenu a {display:block; width: 20%; padding-top: 20%; float:right; background-color: #ede8f4; margin: 0 0 0 5%; background-size: 100% auto, auto;}
	.mobilemenu a.telefon {background: transparent url(/files/design/icons/icon-tel.png)  no-repeat; background-size: 100% auto, auto;}
	.mobilemenu a.homepage {background: transparent url(/files/design/icons/icon-homepage.png)  no-repeat; background-size: 100% auto, auto;}
	.mobilemenu a#googlemap {background: transparent url(/files/design/icons/icon-pos.png)  no-repeat; background-size: 100% auto, auto;}


.this_club_header { }
.this_club_header .clublogo {max-width:40%; float:left; margin-bottom:20px;}

.this_club_data {display:block; width: 59%; max-width:300px; float:right;}
.this_club_data a {display:block; max-width:60px; width: 25%; padding-top: 40%; float:right; background-color: #ede8f4; margin: 0 0 0 5%; background-size: 100% auto, auto;}
.this_club_data a.telefon {background: transparent url(/files/design/icons/icon-tel.png)  no-repeat; background-size: 100% auto, auto;}
.this_club_data a.homepage {background: transparent url(/files/design/icons/icon-homepage.png)  no-repeat; background-size: 100% auto, auto;}
.this_club_data a#googlemap {background: transparent url(/files/design/icons/icon-pos.png)  no-repeat; background-size: 100% auto, auto;}

/*	
	.mobilefooter {display:block;}
	.mobilefooter a {clear: left; float:left ! important;}
*/


.contentbox .sidebar {width:33.3%; float:right;}

.contentbox .sidebar h3 {font-size:14px; line-height:110%;}

.contentbox .sidebar .quickblock {padding:10px; margin: 10px 0; border-bottom: 1px solid #555; clear: both; }
.contentbox .sidebar .quick.logo {width:30%; margin:0 10px; float:right;}
.body .sidebar .quick.logo img {max-width:100%; max-height:60px;}

.contentbox .sidebar .sidebarhead {background-color: #ca0d1b; color:#fff ! important; text-align:center; border-bottom:10px solid #fff;}
.contentbox .sidebar .sidebarhead h1 {margin:0 10px; color:#fff ! important; text-align:center; }


.sidebar .clubdescription {
	font-size:0.85em;
	padding: 3px 1% 20px 1%;
	background: #f6f1f1;
}

.clubdescription p {
	padding-bottom:10px;
	line-height:140%;

}



.header-icons {display:block; position:absolute; top:120px; left:4%; }
.header-icons a {display:block; }
.header-icons a img {width:64px; }







/*==========================================================================================*/
.navspacer {height: 40px; clear:both;}
#nav {
	XXposition:absolute;
	XXtop:0; left:25%;
	width:100%;	
	height: 37px;	
	border: 0;	
	margin:20px 0;
	background-color: #575656;
	clear:both;
		
}

#nav ul,  #nav2 ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	width: auto;
	position: relative;
	z-index: 4000;
	

}
#nav ul li,  #nav2 ul li {
	list-style-type: none;
	list-style-image: none;
	list-style: none;
	margin: 0;
	padding: 0;
}


/* Root Level Link Formatting */
#nav ul li {float: left; color: #fff; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none; width: 16.66%}
#nav ul li a {display: block; text-align:center; text-shadow: 1px 2px 8px #000; font-size: 16px; border-right:1px #fff solid; color: #fff; text-decoration: none; font-weight: bold; background-repeat: no-repeat;}
#nav ul li a span {display:block; padding: 10px 10px 6px 6px; }
/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent {color: #fff; background: #217cd7 ; }


/*Current page Customisations*/
#nav li a.menu-current,  #nav li  a.menu-parent {}




/* 2nd Child menu */
#nav  li ul {position: absolute; width: 200px; margin: -3px 0 0 -10000px; opacity:0.0; text-transform: none; border-bottom: 1px solid #fff;  XXbackground: url(img/glitzi.png) no-repeat right 0px; box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.4);}
#nav  li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; width: 200px; }
#nav  li ul li a {text-align:left;  width: 200px;  height:auto; margin:0; padding: 0; border-top: 1px solid #fff; line-height: 1.2em; font-size: 0.94em; background: none;  text-shadow: 0px 1px 3px rgba(0,0,0,0.6);}
#nav  li ul li a span {display:block; padding:8px; }


/* 2nd Child link hover */
#nav  li ul a:hover,  #nav  li ul a.menu-current {  text-shadow: 1px 2px 4px rgba(0,0,0,1);}
#nav  li ul a.menu-expand {background: transparent url(img/arr-right.png) no-repeat right 7px ; }
#nav  li ul a.menu-parent {background:  url(img/arr-right.png) no-repeat right 5px; }

/* Show and hide */
#nav  li:hover ul, #nav  li a:focus ul{ margin: -3px 0 0 0; opacity:1; transition:0.5s opacity;}
#nav  li ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav  li:hover ul ul, #nav  li.subMenu ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav  li:hover>ul, #nav  li li:hover>ul, #nav li.tabselected ul  { opacity:1; margin-left: 0;  transition:0.5s opacity; z-index: 1000;}
#nav  ul li ul li:hover>ul {margin-left: -30%;  opacity:0.9;}

/* 3rd Child Menu Appreances */
#nav  li ul li ul	{ width: 180px; margin: 10px 0 0 -40%; z-index: 2000; }
#nav  li ul li ul li	{width: 100%;}
#nav  li ul li ul li a 	{ width: 100%;}



/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}



/* Better: */
#nav li:hover {
	z-index: 1000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}



#nav a.menu-current, #nav li ul {background-color: #575656; }
#nav a:hover { background-color: #333 ! important;}
#nav li a.menu-current, #nav li a.menu-parent, #nav li a.focus  {background-color: #e8684c ! important; } 

#nav2 {background-color: #575656;; }
#nav2 a:hover, #nav2 li.is_opened a { background-color: #333 ! important;}
#nav2 li a.menu-current, #nav2 li a.menu-parent, #nav2 li a.focus  {background-color:#e8684c ! important; } 




/* end nav */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



.tsrs_block .tsrs_block_inner {
    XXfont-size: 0.94em;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p { 
	padding:0 0 10px 0;
	margin: 0px 0px;
	line-height:130%;
}

h1, h2, h3, h4, a { color: #e8684c; }

hr { border-top: none; border-bottom: 1px #666 solid; } 
a {  text-decoration: none;} 
a:hover { color: #ff0013; } 
a:active { color: #ff0013; } 

a img {border:none;}


a.editevent {position: absolute; top:5px; right: 0; display:block; width:40px; height:13px; background:  url(img/edit.gif) no-repeat; XXfloat:right; padding-left:15px; font-size:10px; index-z:9000;}
a.editevent.editeventnew {top: -40px; }

#showlogin  {
clear:both;
   position: relative;
    XXtop: 20px;
   left: 20px;
    XXwidth: 165px;
}
/* Login Box */

#XXshowlogin {display:block; float:left; position:relative;  width:30px; text-align:left; margin:0 0 0 0; }
#login-box {position:absolute; width:200px; left:30px; top:-10px; padding:5px; font-size:11px; z-index:2000; background: #999; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);}
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}


.datumnavi {padding: 20px 0;}
.datumnavi img {padding: 10px;}


/*Extra cookie_permission */
#cookie_permission {position:fixed; top:0; right:0; z-index:9950; width: 200px; padding:10px; background: #555; text-align:center; font-size: 1em; line-height:140%; border-radius: 0 0 0 25px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2); }
#cookie_permission p , #cookie_permission a {color:#fff;}
#cookie_permission a.cookieaccepted {color:#000; background: #eeb300; display:block; padding:5px; border-radius: 15px; border: 1px solid #fff; font-weight:bold;}



body.info #nlfrmblock {display:none;}
#tnl_register {margin:0 10px;  padding: 10px 5%;  width: 85%; border: 1px solid #ca0d1b;}
#tnl_register .tnl_hinweis {padding: 10px 0;color: #ca0d1b;}


.XXprogrammblock .textblock {position:relative;}
.live_stream_url {
	display:block; position:absolute; width: 50px; height:50px; right:-10px; top: -10px; border-radius:50%; z-index:5000; background: #e8684c url(img/button-live-stream.png) no-repeat; transition:0.5s all;
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
.live_stream_url:hover {width: 100px; height:100px; right:-30px; top: -10px; } 


/*modify iframe*/
#editarea {
	position:fixed; top:0; left:-800px; width: 500px; max-width:90%; height:100%; 
	background: #555; z-index: 5000; transition:1s all;
	box-shadow: -24px 0 20px 0px rgba(0,0,0,0.3);
}
#editarea.isopen {
	left:0;
	box-shadow: 24px 0 74px 0px rgba(0,0,0,0.7);
}
a.closeeditarea {position:absolute; width:30px; height:30px; right:20px; top:5px; cursor:pointer;}


/*EXTRAS ig-jazz============================================================================*/
body.bdigjazz {
    margin: 0;
    color: #000;
    background: #fbb900;
    XXfont-family: Arial, Helvetica, sans-serif;
    XXfont-size: 12px;
    XXmin-height: 102%;
    line-height: 130%;
   XXbackground-repeat: repeat-y;
}
body.bdigjazz .wrapper {   background: #f5f1e7;}

body.bdigjazz .tagtrennervorher {   background: transparent url(img/fade-ig.png) repeat-x;}

.startseiteraster .b5 {    width: 20%; }
.startseiteraster .start { border-bottom: 2px solid #fff; height: 200px;     float: left; background-image: url(img/trenner.gif); background-repeat-x: no-repeat; position: relative;}
.startseiteraster .b5 img { max-width: 100%; }


body.bdigjazz .toggleMenu {top: 80px;}



/*CORONA ================================================================================*/
/*
.coronaextra {position:fixed; pointer-events: none;}
*/

.programmblock.lockdown {opacity:0.5; filter: blur(2px); transition: 1s all; max-height:110px; overflow:hidden;}
.eventblock1:hover {opacity:0.9; filter: blur(0); }

.programmblock.haslivestream, .programmblock.active2 {opacity:1; filter: blur(0); max-height:2000px; overflow:visible;}



/*Video/Streams ================================================================================*/

#video_streams {width:101%;}
#video_streams a.youtubethumb {display:block; position:relative; width:33%; float:left; margin-right:0.3%; margin-bottom:2px;}
#video_streams .youtubethumbimg {width:100%;}
#video_streams .youtubeinfo {display:block; position:absolute; padding:5px 2%; width: 96%; 	bottom:0; font-size: 0.9em; color:#ffc97d ! important; background: #000; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);}

.responsiveVideo, .flex-video {
   position: relative; padding-bottom: 56.25%; padding-top: 30px;  height: 0; overflow: hidden;
}

.responsiveVideo iframe, .flex-video iframe, .responsiveVideo object, .flex-video object, .responsiveVideo embed, .flex-video embed  {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}


.newsletterabo {display:block; float:right; text-align: center; padding: 5px; background: #e73d18; color:#fff; font-size: 16px; font-weight:bold; border-radius: 10px 10px 0 0; border: 1px #000 solid; transition: 0.3s all;}
.newsletterabo:hover {padding: 10px; color:#fff; } 

.up_id {position:absolute; top: -90px;}


@media(max-width:768px) {

	.hideonmobiles {display:none}

	body { font-size: 14px; }
	
	.wrapper {  width: 100%;}
	
	.contentbox .programm, 	.contentbox .sidebar{width:100%; float:none; }
	h2.kaltag { font-size:14px;}
	
	
	#nav {display:none;}
	a.toggleMenu { position: absolute; left:0; top:10px; width:30px; height:60px; background: url(img/menuswitch.png) no-repeat top right; }
	
	#nav2 {width:250px; height: auto; position:absolute; left:0; top:100px; z-index:2000; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.4);}
	#nav2>ul {}
	
	#nav2 li {width:250px;  padding: 0 0 0 0; }
	#nav2 li a {display:block; padding: 12px 0 12px 20px; font-size:18px; color:#fff;  text-decoration:none; border-bottom: 1px solid #fff; }
	#nav2 li li a {padding: 10px 0 10px 30px; font-size:16px;  }
	#nav2 li li li a {padding: 8px 0 8px 40px; font-size:14px; }
	#nav2 li li li li a {padding: 6px 0 6px 50px; font-size:13px; ;}
	
	#nav2 li ul {display:none; border-bottom: 3px solid #fff; }
	#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {display:block;}
	#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {display:block;}
	
	#nav2 li a.menu-expand {background: transparent url(img/arr-down.png) no-repeat left center ;}
	#nav2 li a.menu-current { color:#fff; text-shadow: 1px 2px 4px #000; font-weight:bold;}
	
	#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {font-weight:bold;  color:#fff; background: url(img/arr-right.png) no-repeat 2px center ; }
	#nav2close {display:none;  position:absolute; top:0; width:100%;  height: 900px; background-image:none;}
	
	#nav2 form {margin: 10px 20px 0 20px;}
	#nav2 .searchstring {width:80%; float:left; margin-right:10px;}
	
	.header-icons {top:80px; }
	.header-icons a img {width:48px; }
	

	
}

@media(max-width:440px) {
	.programmblock  .bildblock {clear: left; float:none; width: 100%; max-height: 100px; overflow:hidden;}
	.programm .programmblock.club  .bildblock {max-height: 400px; }
	
	.programmblock  .textblock  {width: 100%; float:none; }
	.programmblock .logo {max-width: 50%;  position:static;}
	.programmblock.haspic .logo {max-width: 20%; position:absolute; }
	
	#video_streams a.youtubethumb {width:49%;}
	
	.startseite .programmblock {max-height: 300px; }
	
	a.togglethis {right:20px; bottom:20px; width:32px; height:32px; font-size:30px;}
	
	.header-icons {top:70px; }
	.header-icons a img {width:40px; }
	
	
	.startseiteraster .start { height: 150px; }

}