/* bluesharp school 2022 - style.css 

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

general */
* {
 margin:0;
 padding:0;
}
body, input, textarea {
 font-family:"Calibri light",Arial,sans-serif;
 color:#000;
}
input, textarea {
 font-size:1em;
}
a {
 color:#000;
}
a:hover {
 text-decoration:none;
}
a img {
 border:none ! important;
}
div#self-service-lite img.sslimageleft {
 margin: 0 20px 10px 0;
}
body {
 background:url(body-bgrnd.jpg) no-repeat center top fixed;
}
h2 {
 font-size:2em;
 padding-bottom:25px;
}
.home-teaser h2 {
 font-size:1.3em;
 padding-bottom:3px;
}
h3 {
 font-size:1.6em;
 padding:35px 0 15px 0;
}
body.home h3 {
 padding:25px 0 0 0;
}

ul.lipb7 li {
 padding-bottom:7px;
}

ul.sslmenue li.ssl_invisible_menue a {
 font-style:italic;
 text-decoration:none ! important;
 color:#3ff ! important;
}

/* cookie bar */
#cookie-bar {
 background:#324150; 
 height:auto; 
 color:#eeeeee; 
 text-align:left;
}
#cookie-bar.fixed {
 position:fixed; 
 top:0; 
 left:0; 
 width:100%;
}
#cookie-bar.fixed.bottom {}
#cookie-bar p {
 padding:4px 60px 6px 8px;
}
#cookie-bar a {
 color:#eeeeee; 
}
#cookie-bar .cb-enable {
 margin-right:8px;
}
#cookie-bar .cb-enable:hover {}
#cookie-bar .cb-disable {}
#cookie-bar .cb-disable:hover {}
#cookie-bar .cb-policy {}
#cookie-bar .cb-policy:hover {}




/* main */
div#main {
 max-width:1200px;
 margin:0 auto;
}

/* header */
div#header {
 height:350px;
 background:url(head-pic.jpg) no-repeat;
}
div#header h1 {
 text-indent:-5000px;
 height:309px;
}

/* haupt menue */
div#header ul.sslmenue {
 background-image:url(black70.png);
 padding-left:8px;
}
div#header ul.sslmenue:after {content:" "; display:block; height:0; clear:both; visibility:hidden;}
div#header ul.sslmenue li {
 list-style-type:none;
 float:left;
 margin-right:1px;
}
div#header ul.sslmenue li a {
 display:block;
 font-size:1.1em;
 padding:10px 14px;
 color:#fff;
 text-decoration:none;
}
div#header ul.sslmenue li a.sslmenueactive,
div#header ul.sslmenue li a:hover {
 background-image:url(white20.png);
}


/* sub menue */
div#submenue {
 clear:both;
 margin-top:1px;
}
div#submenue ul.sslmenue {
 background-image:url(black90.png);
 padding-left:8px;
}
div#submenue ul.sslmenue:after {content:" "; display:block; height:0; clear:both; visibility:hidden;}
div#submenue ul.sslmenue li {
 list-style-type:none;
 float:left;
 margin-right:1px;
}
div#submenue ul.sslmenue li a {
 display:block;
 font-size:1.1em;
 padding:10px 12px;
 color:#fff;
 text-decoration:none;
}
div#submenue ul.sslmenue li a.sslmenueactive,
div#submenue ul.sslmenue li a:hover {
 background-image:url(white20.png);
}


/* content */
div#content {
 max-width:1120px;
 padding:55px 40px 100px 40px; 
}

a.songbooksinfo {
 background: #4c4c4c;
 color: #fff;
 padding: 8px 25px;
 display: inline-block;
 font-size: 1.3em;
 border: 1px solid #000;
 text-decoration: none;
 font-weight: bold;
}
a.songbooksinfo:hover {
 background:#683d02;
}

/* video oben ##########################################################*/
/* Stellt den Container des Videos responsiv ein */
div.resvid {
 position: relative; 
 padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
 height: 0;
}
/* Stellt das iframe des Videos so ein, dass es den Container voll ausfüllt */
div.resvid iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
div.resvid img:hover {
 cursor:pointer;
}














/* home */
div.home-portfolio {
 margin-bottom:15px;
}
div.home-portfolio h2 {
 font-size:1.3em;
 padding-bottom:10px;
}

div#self-service-lite div p.datum {
 font-weight:bold;
 display:block;
 font-size:1.25em;
 background:url(calendar.png) no-repeat 10px 4px #fff;
 min-height:26px;
 padding:6px 5px 8px 50px;
 margin-bottom:25px;
 margin-top:30px ! important;
 text-transform: uppercase;
}

/* termine ein-ausklappen */
span.ssl-inout-wrapper {
 display:inline-block;
 background:#eee;
 padding:5px 20px;
}
span.ssl-inout-wrapper a {
 font-weight:bold;
 text-decoration:none;
}




/* members bereich */
.soundlink { /* aus format */
 display:inline-block;
 background:url(sound.png) no-repeat;
 padding-left:28px;
 min-height:22px;
}
.instrumentname { /* aus format */
 font-weight:bold;
 font-size:1.1em;
}
.pdflink { /* aus format */
 display:inline-block;
 background:url(pdf.png) no-repeat;
 padding-left:30px;
 min-height:26px;
}
.infolink { /* aus format */
 display:inline-block;
 background:url(info.png) no-repeat;
 padding-left:30px;
 min-height:26px;
}
.videolink { /* aus format */
 display:inline-block;
 background:url(video.png) no-repeat;
 padding-left:28px;
 min-height:22px;
}
/* members */
/* members menue */
div#self-service-lite ul#sslloggeduser {
 background:#fff;
 margin-bottom:35px;
}
div#self-service-lite ul#sslloggeduser li {
 padding:0 20px 0 0;
}


/* #### members 2022 SBi #### */
a#gotonewmembers {
 font-size: 1.6em;
 text-decoration: none;
 display: block;
 padding: 40px 25px;
 text-align: center;
 background: #FFD1B2;
 border: 1px solid #ccc;
 margin-top: 45px;
 font-weight: bold;
}
a#gotonewmembers:hover {
 background-image: url(black80.png);
 color:#fff;
}





/* login form */
form.ssl_user_login h2 {
 padding:1px 10px 2px 5px;
 margin:0 0 15px 0;
}
form.ssl_user_login table {
 margin-left:5px;
}
form.ssl_user_login table td input {
 padding:4px;
 width:160px;
}

form.ssl_user_login table td input.ssluserloginbutton {
 padding:7px 14px;
}


/* newsletter */
div.nlanmeldung {
}
div.nlanmeldung label {
 display:none;
}

div.nlanmeldung input {
 width:300px ! important;
 border-color:#000 ! important;
 border-radius:0 ! important;
}

div.nlanmeldung h2 { /* meldung */
 font-size:18px ! important;
 padding:20px 0 ! important;
 background:#efefef ! important;
 border:1px solid #000 ! important;
 margin: 25px 0 ! important;
}






/* members videos */
div#self-service-lite ul#sslloggeduser {
 background:none ! important;
 margin-bottom: 35px;
}
body.sub_members_login h1 {
 font-size:1.5em; 
 padding-bottom:0;
}
body.sub_members_login h2 {
 font-size:1.2em;
 padding:20px 0;
}

a.songdetaillinkheadline {
 font-weight:bold;
 font-size:1.1em;
}
a.songdetaillinkheadline p {
 background:url(video.png) no-repeat 0 2px;
 padding-left:28px;
 display:inline;
}

/* video detailsansicht */
.ssldetailview a.songdetaillinkheadline,
.ssldetailview a.songdetaillinkheadline:hover {
 display:block;
 text-decoration:none;
 cursor:default;
 font-size:1.4em;
 margin-bottom:25px; 
 
}
.bhsvimeovid iframe {
 margin:0 6px 15px 0;
}
p.zurueckzurliste {
 padding-top:25px;
}
p.zurueckzurliste a {
 display:inline-block;
 padding:5px 20px;
 background:#29415A;
 border:1px solid #29415A; 
 color:#fff;
 font-weight:bold;
 text-decoration:none;
 font-size:1.1em;
}
p.zurueckzurliste a:hover {
 background:#fff;
 color:#29415A;
}




































/* footer menue */
div#footermenue {
 background-image:url(black80.png);

}
div#submenue {
 clear:both;
 margin-top:1px;
}
div#footermenue ul.sslmenue {
 padding-left:8px;
}
div#footermenue ul.sslmenue:after {content:" "; display:block; height:0; clear:both; visibility:hidden;}
div#footermenue ul.sslmenue li {
 list-style-type:none;
 float:left;
 margin-right:1px;
}
div#footermenue ul.sslmenue li.sub_impressum {
 padding-left:25px;
}
div#footermenue ul.sslmenue li a {
 display:block;
 font-size:1.1em;
 padding:25px 12px;
 color:#fff;
 text-decoration:none;
}
div#footermenue ul.sslmenue li a.sslmenueactive,
div#footermenue ul.sslmenue li a:hover {
 background-image:url(white20.png);
}



/* footer logos */
div#footerlogos {
 padding:20px 0 35px 0;
 background:#fff;
}
div#footerlogos a {
 margin-left:30px;
}
div#footerlogos a img {
 filter:grayscale(100%) opacity(50%);
}
div#footerlogos a:hover img {
 filter:grayscale(0%) opacity(100%);
}









/* ######################## resp ############################################ */
img {
 max-width:100% ! important;
 height:auto ! important;
}
#respmenue {
 display:none;
}

/* responsive menue */
span#kirm-opener { /* button */
 display:block;
 width:40px;
 height:40px;
 position:absolute;
 top:12px;
 right:5px;
 z-index:1000;
 background:url(kirm-sprite.png) no-repeat;
 display:none;
}
div#kirm { /* main menue container */
 padding:52px 0 0 0;
 background-image:url(content-bgrnd.png);
 }
div#kirm ul {
 margin:0;
 list-style-type:none;
}
div#kirm ul.sslmenue li {
 padding:0;
}
div#kirm ul.kirm-content { /* main menue list */
 padding-bottom:15px;
}
div#kirm * a {
 display:block;
 border-top:2px solid #fff;
 border-bottom:0;
 padding-top:7px;
 padding-bottom:7px;
 text-decoration:none;
 font-weight:bold;
}
div#kirm ul.kirm-content a { /* 1st level */
 padding-left:10px;
}
div#kirm ul.kirm-content ul a { /* 2nd level */
 padding-left:20px;
}
div#kirm ul.sslmenue * ul {
 padding:0;
}
div#kirm ul.kirm-content ul ul a { /* 3rd level */
 padding-left:30px;
}
div#kirm ul.kirm-content li a.kirm-content-sub span.kirm-has-submenue { /* arrow open */
 display:inline-block;
 width:18px;
 height:10px;
 background:url(kirm-sprite.png) no-repeat 6px -100px; 
}
div#kirm ul.kirm-content li a.kirm-content-sub span.kirm-has-submenue-open { /* arrow close */
 background:url(kirm-sprite.png) no-repeat 6px -200px; 
}
div#kirm ul li a.sslmenueactive  {
 background:#efefef;
}

div#kirm ul.kirm-content li.sub_misc a {
 font-weight:normal ! important;
 font-size:0.95em;
}


/* #### to top ####  */
 .cd-top {
		display: inline-block;
		height: 40px;
		width: 40px;
		position: fixed;
		bottom: 10px;
		right: 10px;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		background:url(totop.png) no-repeat;
		visibility: hidden;
		opacity: 0;
		display:none;
 }
 .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
		transition: opacity .3s 0s, visibility 0s 0s;
 }
 .cd-top.cd-is-visible {
		visibility: visible;
		opacity: 1;
 }
 .cd-top.cd-fade-out {
		opacity: .5;
 }
 .no-touch .cd-top:hover {
		background-color: #e86256;
		opacity: 1;
 }

 




/* ################## resp breite ################## */
@media screen and (max-width: 850px) { 
 div#header {
		background:url(head-pic.jpg) no-repeat -230px -50px; 
		height:300px; 
 }
 div#header h1 {
		height:259px;
 }
 div#self-service-lite div.dssmall {
  width:100% ! important;
 }
 address {
  width:70% ! important;
  margin-bottom:25px ! important;
 }
}

@media screen and (max-width: 1050px) { 
 .home-portfolio {
  width:100% ! important;
 } 
}

@media screen and (max-width: 670px) { /* menue */
 div#header {
		background:url(head-pic.jpg) no-repeat -450px -80px; 
		height:180px; 
 }
 div#header h1 {
		height:180px;
 }

 #header ul.sslmenue,
 #footermenue ul,
 #submenue
 {display:none; }
 
 span#kirm-opener,
 .cd-top
 { display:block;}

 #footermenue {height:50px;} 
 
}