@charset "utf-8";
 
/*
* CSS-Design
* Relaunch Webseite Remo Crivelli - Responsive Design
* Online-Schule für Gestaltung: Webdesign-Kurs, Monatsaufgabe Franziska Wyss
*/
 
 



/* Reset * * * * * * * * *  * * * * * * * * * * * * * * * * * * * */
*{
		margin: 0;
		padding: 0;	
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: none; /* Player */
    	outline: none; /* Player */
}

html{	
		font-size: 100%; /* Browserstandard: 16px */
		position: relative; 
		min-height: 100%;
}


img, .cssSlider1{
		max-width: 100%;
		height: auto;
}





 
/* Layout * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
	
body{
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		font-size: 100%;
		line-height: 1.5;
		margin-bottom: 35px; /* für Sticky Footer */
		color:#fff; /*Player*/
}

.wrapper{
		max-width: 1200px;
		margin: 0 auto;
		overflow: visible;
		padding: 0;
}

header{
		background: #fff; /* Grün: für Kontrolle Farb-Platzhalter lassen, da sehr praktisch! Dto weitere Farben HG in Media Quieries*/
		padding: 10px 0 0 0;
}


#main{
   	 	width: 73%;
   	 	float: left;
		padding: 0 200px 0 38px;
		margin-bottom: 20px;
}
 
#main article{
        margin-bottom: 25px;
}
 
.sidebar {
        width: 25%;        
        float: right;
		padding-top: 20px;
}


.clear{
		clear: both;
}


footer{ /* Sticky Footer */
		margin: 10px 0;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 10px;
		width: 100%;
}

.ebene_navi{ /* brauchts bei der Unter-Seite Solo, da sonst Diashow Navi stört */
		position:relative;
		z-index:1;
}



/* Flexibles Raster * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.column {
		float: left;
		margin: 0 0 0 2%;
		padding: 0;
}


.row{
		width: 100%;
		float: left;
}

.column:first-child {
		margin-left: 0;
}


.full { width: 100%; margin-bottom: 5px;  padding: 0 0 0 38px; }
.half { width: 49%; padding: 0 0 0 38px; position: relative; } /* Beschriftung Video */
.half_right{ width: 49%; padding: 0 0 0 38px; text-align: right; float: right; position: relative;}
.half_half { width: 49%;} /* Hörproben */
.third { width: 32%; padding: 0 0 0 38px;}
.third_left { width: 32%; padding: 0 0 0 38px; text-align:left;} /* flexible Fussleiste */
.third_center { width: 32%; padding: 0 0 0 38px; text-align:center;} /* flexible Fussleiste */
.third_right { width: 32%; padding: 0 0 0 38px; text-align:right;} /* flexible Fussleiste */
.two-thirds { width: 66%; }
.fourth { width: 23.5%; }
.three-fourth {width:74.5%;}





/* Bilder und Linien * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.alignleft{ /* Logo */
		float: left; 
		margin-left: 30px;
}

.alignright{ /* Teaserbilder */
		float: right; 
}

.picturebutton { /* heller werdende Bilder bei MouseOver */
		background: #333333;
}

.picturebutton img { 
		transition:  opacity .3s linear;
}
 
.picturebutton img:hover {
		opacity: 0.5;
}
	
.mainpic{ /* grosse Hauptbilder */
		margin: -200px 0 0 0;
		float: left;
		padding-bottom: 40px !important;
}


.mobpic{ /*kleine Hauptbilder für Devices mit kleinen Auflösungen; eher quadratisch */
		display: none;
}
	

hr {/* Linien */
		background-color: #333333;
		border: 0;
		height: 1px;
		width: 100%;
		float: right;
}


.runde_ecken_video { /* Style für eingebundene Videos*/
	border-radius: 10px;
	max-width: 100%;
	margin-bottom: 40px;
	background-color:#333333;
}

.runde_ecken { /* Style für Mob-Slide-Bilder*/
	border-radius: 10px;
	max-width: 100%;
	margin-bottom: -10px;
}

.runde_ecken_abstand { /* Style für Mob-Slide-Bilder*/
	border-radius: 10px;
	max-width: 100%;
	margin-bottom: 20px;
}


/* Metanavigation * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



#mobile-menu-btn{ 
display: none; 
}

ul#metanavigation{ 
		float: right; 
		
}

ul#metanavigation li{ 
		display: inline; 
		margin: 0 0 0 20px; 
		list-style: none;
		position: relative;	
}

ul#metanavigation li a{
}

a.news, a.kontakt, a.presse, a.links, a.english {
		text-decoration: none; 
		text-transform: uppercase;
		font-size: 12px; 
		font-size: 0.750rem; 
}

a.news:hover, a.news.active{
		color: #dc153d;
}
a.kontakt:hover, a.kontakt.active{
		color: #d6d6c2;
}
a.presse:hover, a.presse.active{
		color: #75a0af;
}
a.links:hover, a.links.active{
		color: #928371;
}

a.english:hover, a.english.active{
		color: #ae5d59;
}



/* Navigation * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

ul#navigation{ 
		float: right; 
		margin: 130px 0 0 0;
}

ul#navigation li{ 
		display: inline; 
		margin: 0 0 0 20px; 
		list-style: none;
		position: relative;	
}

ul#navigation li a{
}

a.home, a.biografie, a.bands, a.musik, a.agenda:link {
		text-decoration: none; 
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem;
		padding: 15px 0 15px 15px;
}
	
a.home:hover, a.home.active{
		color: #dc153d;
}

a.biografie:hover, a.biografie.active{
		color: #d6d6c2;
}

a.bands:hover, a.bands.active{
		color: #75a0af;
}

a.musik:hover, a.musik.active{
		color: #928371;
}

a.agenda:hover, a.agenda.active{
		color: #ae5d59;
}



/* Drop-Down-Menü * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

ul#navigation ul{
		display:none; 
}

ul#navigation ul.active{
		display:block; 
}

#navigation li:hover ul{ 
		display:block;
}

ul#navigation ul{
		position: absolute; 
		top: 25px;
		left: 0;
		background: #fff;
		border-radius: 0 0 10px 10px;
		border-bottom: 1px solid #333333;
}

ul#navigation ul li{
		margin: 0;
}


ul#navigation ul li a{ 
		display: block;
		text-transform: uppercase; 
		font-size: 12px;
		font-size: 0.750rem; 
		padding: 0 55px 5px 15px;
}

ul#navigation ul li a.bands_dropdown:hover, a.bands_dropdown.active{ 
		color: #75a0af;		
}

ul#navigation ul li a.musik_dropdown:hover, a.musik_dropdown.active{ 
		color: #928371;		
}







/* Sidelines * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

ul#sidelinks{ /* Interne Links als Liste */
		float: left; 
		margin: 10px 0 10px 20px;
		list-style: none;		
}

.link_music, .link_agenda, .link_presse, .link_biografie{
		color: #333333;
		text-decoration: none; 
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem;
		line-height: 36px;
		font-weight: 600;
}

.link_music:hover {
		color: #928371; 
}

.link_agenda:hover{
		color: #8b1812; 
}

.link_biografie:hover{
		color: #d6d6c2; 
}

.link_presse:hover{
		color: #75a0af;
}

.bildwechsel_hoerproben, .bildwechsel_videos, .bildwechsel_agenda, .bildwechsel_presse, .bildwechsel_biografie, .bildwechsel_diskografie { /* Icons mit wechselnden Farben bei MouseOver */
		width:30px; 
		height:20px; 
		float: left;
		margin-top: 7px;
}
	
.bildwechsel_hoerproben a, .bildwechsel_videos a, .bildwechsel_agenda a, .bildwechsel_presse a, .bildwechsel_biografie a, .bildwechsel_diskografie a {
		width:100%; 
		height:100%; 
		display:block;
}
		
.bildwechsel_hoerproben {
		background:url(../images/icon_hoerprobe1.gif);	
}
	
.bildwechsel_hoerproben:hover {
		background:url(../images/icon_hoerprobe2.gif);
}
		
.bildwechsel_videos {
		background:url(../images/icon_videos1.gif);	
}
	
.bildwechsel_videos:hover {
		background:url(../images/icon_videos2.gif);
}
		
.bildwechsel_agenda {
		background:url(../images/icon_agenda1.gif);	
}
	
.bildwechsel_agenda:hover {
		background:url(../images/icon_agenda2.gif);
}
		
.bildwechsel_presse {
		background:url(../images/icon_presse1.gif);	
}
	
.bildwechsel_presse:hover {
		background:url(../images/icon_presse2.gif);
}
		
.bildwechsel_biografie {
		background:url(../images/icon_bio1.gif);	
}
	
.bildwechsel_biografie:hover {
		background:url(../images/icon_bio2.gif);
}
	
.bildwechsel_diskografie {
		background:url(../images/icon_disc1.gif);	
}
	
.bildwechsel_diskografie:hover {
		background:url(../images/icon_disc2.gif);
}





/* Typografie  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1, h2, h3, h4, h5, h6 {  
		font-family:'Open Sans', Helvetica, Arial, sans-serif; 
		font-weight: 600;
		color: #333333;
}

h1{
		font-size: 24px; 
		font-size: 1.5rem; 
		line-height: 32px; 
		line-height: 2rem; 
		margin: 10px 0 20px 0; 
}

h1.news{
		margin-top: 15px;
		}
h2{
		font-size: 22px;    
		font-size: 1.375rem;    
		line-height: 34px;
		line-height: 2.125rem;
}

h3{    
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem;
		line-height: 36px;
		line-height: 2.25rem;
}
 
h4{    
		font-size: 20px;    
		font-size: 1.250rem;    
		line-height: 32px;
		line-height: 2rem;
}
 
h5{
		font-size: 18px;    
		font-size: 1.125rem;    
		line-height: 30px;
		line-height: 1.875rem;
} 
 
h6{
		font-size: 16px;
		font-size: 1rem;
		line-height: 28px;
		line-height: 1.750rem;
		color: #FFFFFF;
		text-transform: uppercase;
		margin-left: 5px;				
}

	
p, .main{
		color: #333333;
		font-size: 14px; 
		font-size: 0.875rem; 
		line-height: 26px; 
		line-height: 1.625rem; 
		margin-bottom: 20px;
}

a 		{			
		color: #333333; 
		text-decoration: none; 
}

a.mail {			
		color: #999966; 
		text-decoration: none; 
		font-weight: 600; 
}

a.mail:hover{
		color: #d6d6c2; 
}

blockquote {
		font-family:'Open Sans', Helvetica, Arial, sans-serif; 
		font-weight: 600;
		font-size: 24px; 
		font-size: 1.5rem; 
		line-height: 36px; 
		line-height: 2.25rem; 
		margin: 15px 20px 10px 20px;
		float: left;
}

.quote_bio {
		color: #d6d6c2;
}

.quote_solo {
		color: #bad0d7;
}

.quote_musik {
		color: #928371;
}

.quote_agenda {
		color: #ae5d59;
}

.quote_news {
		color:#999999;
}

.quote_autor {
		font-weight: 600;
		font-size: 12px; 
		font-size: 0.750rem; 
		line-height: 22px; 
		line-height: 1.375rem; 
		color: #333333;
		text-transform: uppercase;
		margin: 0 20px 40px 20px;
		float: left;
}

a.solo_fett{
		font-weight: 600;
		color: #75a0af;
}

a.solo_fett:hover{
		color: #bad0d7;
}

a.news_fett{
		font-weight: 600;
		color: #dc153d;
}


#footer p{
		font-size: 12px; 
		font-size: 0.750rem; 
}
	
a.impressum:link{
		font-size: 12px; 
		font-size: 0.750rem; 
		text-decoration: none; 
}

a.impressum:hover{
		color: #c6ccd3;
}

a.impressum:active{
		color: #c6ccd3;
}

a.veranstalter{
		color: #8B1913;
		font-weight: 600;
		margin-bottom: 20px;
}

a.veranstalter:hover{
		color: #ae5d59;
}

a.top:link{
		text-decoration: none; 
		font-size: 12px; 
		font-size: 0.750rem;
}

a.top:hover{
		color: #dc153d;
}

a.copyright {
		font-size: 12px; 
		font-size: 0.750rem; 
		text-align: left;
}

.title_video {
		font-size: 16px;
		font-size: 1rem;
		line-height: 28px;
		line-height: 1.750rem;
		color: #ffffff;
		position:absolute; 
		top: 10px;
		left: 40px;
		text-align:left;
}

	


/* Buttons  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.button1{
		background: #dc153d;
}

.button2 {
		background: #75a0af; 
}

.button3{ 	
		background: #c8c1b7; 
}

.button1, .button2, .button3{ 
		padding: 4px 10px; 
		color: #fff; 
		text-decoration: none;  
		text-transform: uppercase;  
		font-size: 16px; 
		font-size: 1rem;
		border-radius: 10px;
		box-shadow: 1px 1px 1px 1px #333333;
}

.button1:hover{    
		color: #dc153d; 
}

.button2:hover{    
		color: #75a0af; 
}

.button3:hover{    
		color: #928371; 
}
		
.button1:hover, .button2:hover, .button3:hover{
		background: #fff;   
		box-shadow: none;
		transition: background 0.3s linear;
}



/* Formular * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

label { 
		display: block;
		cursor: pointer;
		font-weight: 600;
		margin-bottom: 5px;
}
 
input[type='text'],input[type='checkbox'], textarea, select {
		margin: 0 10px 20px 0;
}
 
input[type='text'], textarea, select {
		width: 400px;
		border: 1px solid #999966;
		padding: 5px;
		font: 400 14px/24px 'Open Sans', Helvetica, Arial, sans-serif;
}
 
textarea {
		height: 120px;
}
 
input:hover, textarea:hover {
		border: 1px solid #d6d6c2;
}
 
input:focus, textarea:focus {
		border: 1px solid #d6d6c2;
		background: #d6d6c2;
}
 
input[type='submit'], input[type='reset']{
		border: 0;
		cursor: pointer;
		margin: 10px 20px 30px 0;
		background: #999966;
		padding: 4px 10px;
		color: #fff;
		font-size: 16px;
		font-size: 1rem;
		border-radius: 10px;
		box-shadow: 1px 1px 1px 1px #333333;
}
 
input[type='reset']{
		background: #fff;
		color: #d6d6c2;
		font-size: 16px;
}
 
input[type='submit']:hover, input[type='reset']:hover{
		background: #fff;
		color: #999966;
		box-shadow: 1px 1px 1px 1px #999966;
}


/* Hoerproben und Diskografie * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1.cd{
	margin-bottom: 20px;
}
	
ul.hoerproben, ul.diskografie{ 
		float: left; 
		list-style: none;
		font-size: 14px; 
		font-size: 0.875rem; 
		line-height: 45px;
		line-height: 2.813rem;
		font-weight:400; 
        width: 100%;
}

ul.hoerproben li{
		padding-top: 10px;
		border-bottom: solid 1px;
}


ul.diskografie li, ul.diskografie li.no_end_line{
		padding: 10px 0 30px 0;
		border-bottom: solid 1px #333333;
}

ul.hoerproben li.no_line, ul.hoerproben li.end_line, ul.diskografie li.no_line, ul.diskografie li.end_line{
		border-bottom: 0;
}

ul.hoerproben li a{
		text-decoration: none; 
		font-weight: 400;  
		color: #333333;
}

ul.hoerproben li a:hover, a.active, a.cd{
		color: #928371;
}

ul.cd{ 
		float: left; 
		list-style: none;
		font-size: 14px; 
		font-size: 0.875rem; 
}

a.cd:hover{
		color: #C8C1B7;
}

.white{
	border-bottom: 0;
}

audio{
	width: 150px;
	height: 30px;
	background:#c8c1b7;
	border-radius:7px 7px 7px 7px ;
	float: right;
	padding-top: 5px;
}

audio:hover, audio:focus, audio:active{
	box-shadow: 10px 10px 10px rgba(0,0, 0, 0.2);
	transform: scale(1.05);
	background:#c8c1b7;
}

.cdcover{
	float: left;
	padding: 5px 20px 0 0;
}

.cdcover_big{
	float: left;
	padding: 0 20px 20px 0;
}

/* Slider unten: basierend auf Tutorial von ebene11.com  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.sliderElements,
.sliderElements figure,
.sliderControls {
	margin: 0;
}
 
.sliderElements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.cssSlider {
    overflow-x: hidden;
}
 
.sliderElements {
    position: relative;
    left: 0;
    width: 400%;
    margin-bottom: .8em;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}
 
.sliderElements > li {
    float: left;
    width: 25%;
    position: relative;
}
 
#slide02:checked ~ .sliderElements {
    left: -100%;
}
 
#slide03:checked ~ .sliderElements {
    left: -200%;
}
 
#slide04:checked ~ .sliderElements {
    left: -300%;
}
 
 
/* inputs aus dem Blickfeld schieben */
.cssSlider input {
    position: absolute;
    left: -99999px;
}
 
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
    text-align: center;
}
 
/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #666666;
    color: #666666;
	margin-bottom: 30px;
}
 
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"] {
    background: #CCCCCC;
    color: #CCCCCC;
}





/* Slider oben: basierend auf Tutorial ebene11  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.slider1Elements,
.slider1Elements figure,
.slider1Controls {
    margin: 0;
}
 
.slider1Elements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.cssSlider1 {
    overflow-x: hidden;
	width: 1200px;
	margin: -200px 0 0 0;
	font-size: 0;	
		float: left;
}
 
.slider1Elements {
    position: relative;
    left: 0;
    width: 400%;
    margin-bottom: .8em;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}
 
.slider1Elements > li {
    float: left;
    width: 25%;
    position: relative;
}
 
#slide002:checked ~ .slider1Elements {
    left: -100%;
}
 
#slide003:checked ~ .slider1Elements {
    left: -200%;
}
 
#slide004:checked ~ .slider1Elements {
    left: -300%;
}
 
 
/* inputs aus dem Blickfeld schieben */
.cssSlider1 input {
    position: absolute;
    left: -99999px;
}
 
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.slider1Controls {
    text-align: center;
}
 
/* Controls nebeneinander bringen */
.slider1Controls li {
    display: inline-block;
	margin: 10px 0 20px 5px;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.slider1Controls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #666666;
    color: #666666;
}
 
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.slider1Controls label:hover,
#slide001:checked ~ .slider1Controls label[for="slide001"],
#slide002:checked ~ .slider1Controls label[for="slide002"],
#slide003:checked ~ .slider1Controls label[for="slide003"],
#slide004:checked ~ .slider1Controls label[for="slide004"] {
    background: #cccccc;
    color: #cccccc;
}


/* Slider mob: Kopert, da so einfacher wieder entfernt  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.bildli_mob{
		display: none;
}

.slider2Elements,
.slider2Elements figure,
.slider2Controls {
    margin: 5px 0 0 0;
}
 
.slider2Elements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.cssSlider2 {
    overflow-x: hidden;
	width: 100%;
	margin: 0 0 0 0;
	font-size: 0;	
	float: left;
}
 
.slider2Elements {
    position: relative;
    left: 0;
    width: 400%;
    margin-bottom: .8em;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}
 
.slider2Elements > li {
    float: left;
    width: 25%;
    position: relative;
}
 
#slide0002:checked ~ .slider2Elements {
    left: -100%;
}
 
#slide0003:checked ~ .slider2Elements {
    left: -200%;
}
 
#slide0004:checked ~ .slider2Elements {
    left: -300%;
}
 
 
/* inputs aus dem Blickfeld schieben */
.cssSlider2 input {
    position: absolute;
    left: -99999px;
}
 
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.slider2Controls {
    text-align: center;
}
 
/* Controls nebeneinander bringen */
.slider2Controls li {
    display: inline-block;
	margin: 15px 0 30px 5px;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.slider2Controls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #666666;
    color: #666666;
}
 
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.slider2Controls label:hover,
#slide0001:checked ~ .slider2Controls label[for="slide0001"],
#slide0002:checked ~ .slider2Controls label[for="slide0002"],
#slide0003:checked ~ .slider2Controls label[for="slide0003"],
#slide0004:checked ~ .slider2Controls label[for="slide0004"] {
    background: #cccccc;
    color: #cccccc;
}



/* Biografie  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#bisher {
		list-style: none;
		font-size: 14px; 
		font-size: 0.875rem; 
		line-height: 26px; 
		line-height: 1.625rem; 
		margin: 10px 0 20px 0;	
}

ul#bisher li{
	padding-bottom: 10px;
}


/* Agenda  * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
		
.bildwechsel_map {
		background:url(../images/icon_map1.gif);	
		width:30px; 
		height:18px; 
		display:inline-block;
}
	
.bildwechsel_map a{
		width:100%; 
		height:100%; 
		display:inline-block;
}
	
.bildwechsel_map:hover {
		background:url(../images/icon_map2.gif);
}




/* PLAYER usammengebaut gemäss einem Tutorial auf Youtube: Build An Audio Player Using HTML5 & jQuery - Part 1 + 2; Nach Load Fehler bei Validierung!!! Fehler ausgemerzt mit Googeln und etwas Glüc; dto. Anpassung an Design***/


.clearfix{
	clear:both;
}

#container{
	width:290px;
	min-height:400px;
	background:#333;
	overflow:auto;
	margin:20px auto;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:#666 solid 2px;
	float: center;
}

#audio-image{
	position:relative;
	overflow:hidden;
	height:0;
	margin-bottom:15px;
}

#audio-info{
	text-align:center;
	margin-bottom: 15px;
}

#audio-info .artist{
	font-weight:bold;
}

.cover{
	width:100%;
	z-index:1;
}

input#volume {
	width:95%;
	margin-left:2%;
    -webkit-appearance: none !important;
    background:#ccc;
    height:1px;
	margin-bottom:20px;
}

input#volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:url(../images/knob.png) no-repeat;
    height:12px;
    width:12px;
}

#audio-buttons{
	width:90%;
	display: block;
    margin: 15px auto;
	overflow:auto;
}


button#play{
	width:60px;
	height:60px;
	background:url(../images/play.png) no-repeat;
	float:left;
}

button#pause{
	width:60px;
	height:60px;
	background:url(../images/pause.png) no-repeat;
	float:left;
}

button#stop{
	width:60px;
	height:60px;
	background:url(../images/stop.png) no-repeat;
	float:left;
	margin-left: 5px;
}

button#prev{
	width:60px;
	height:60px;
	background:url(../images/prev.png) no-repeat;
	float:left;
	margin:15px 0 0 5px;
}

button#next{
	width:60px;
	height:60px;
	background:url(../images/next.png) no-repeat;
	float:left;
	margin:15px 0 0 5px;
}

#playlist {
    list-style-type: none;
	padding:10px;
}

#playlist li {
    cursor: pointer;
    margin:5px;
}

#tracker{
	position:relative;
	width:100%;
}

.playlist-title {
	 font-weight: bold;
	 padding:0 15px;
}


#playlist li.active {
    font-weight: bold;
	padding:3px;
	background:#666;
}

#progressbar { 
   width:95%;
   margin:9px 0 20px 15px;
   height:10px;
   background:url(../images/progress_bg.png) no-repeat;
   float:left;
}

#progress {
   background:url(../images/progress.png) no-repeat;
   height:10px;
   display:inline-block;
   position: absolute;
   top: 9px;
   left: 15px;
}	

#duration{
	position:absolute;
	top:0;
	right:15px;
	padding:4px 8px;
	background:#000;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}



/* Druckformatierung * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ 
 
@media print {

#head, footer, .cssSlider, .sidebar, .bildli, #navigation, #metanavigation, .alignleft, audio{
		display: none}
		
#main {
		padding: 0 0 0 38px;}
		
	
.mainpic, .cssSlider1{
		margin-top: -90px;}
		
		
}





/* Media Queries * * * * * * * * */

/*Layout generell für grosse Monitore; Breakpoints dann für die kleineren Auflösungen* * * * * * * * * */ 


/*Breakpoint für klassische Monitore* * * * * * * * * */ 
@media only screen and (min-width: 980px) and (max-width: 1279px) {

header{
	background: #fff;	/* Blau/Farbplatzhalter */
}

.wrapper{
	width: 960px;
}

.alignleft {
	width: 420px;
}

.mainpic, .cssSlider1{
		margin: -165px 0 0 0;
}

ul#navigation{ 
		margin: 50px 0 0 0;
}


.full {	width: 100%; padding: 0 0 0 30px;}
.half {width: 49%; padding: 0 0 0 30px;}
.third { width: 32%; padding: 0 0 0 30px;}
.third_left { width: 32%; padding: 0 0 0 30px; text-align:left;}
#main{ padding: 0 100px 0 30px;}

}




/*Breakpoint für Tablets quer & nicht ganz aufgezogene Browserfenster* * * * * * * * * */ 
@media only screen and (min-width: 760px) and (max-width: 979px) {

header{
	background: #fff;	 /* Orange/Farbplatzhalter */
}

.wrapper{
	width: 760px;
}
 
.alignleft { 
	width: 308px;
	margin-left: 22px;
}
 
 .alignright{ 
		float: right; 
		width: 50%;
}

.mainpic, .cssSlider1{ /* Anpassen Abstände  Bild, Navi, Schrift */
		margin: -130px 0 0 0;
}

ul#navigation{ 
		margin: 40px 0 0 0;
}

p { 
		margin-bottom: 10px;
		line-height: 24px; 
		line-height: 1.5rem; 
}

.button1, .button2, .button3{ /* Kleinere Buttons */
		padding: 2px 8px; 
		font-size: 14px; 
		font-size: 0.875rem; 
		border-radius: 8px;
}



/* Da Diskografie untereinander: Trennlinien ein-/ausblenden und Abstände anpassen */
ul.hoerproben li.no_line, ul.diskografie li.no_line{
		border-bottom: solid 1px #333333;
}

ul.diskografie li.no_end_line{
		border-bottom: 0;
}


.cdcover{
	padding: 0px 20px 10px 0;
}

.runde_ecken_video { /* Style anpassen Video*/
	max-height: 230px;
}


/* Anpassen Raster weil Haupbild links Weissraum für Freisteller hat */
.full {width:100%; padding: 0 0 0 25px;}
.half {width: 49%;  padding: 0 0 0 25px;}
.half_half { width: 98%; margin: 0 0 !important; padding-top: 0px;}
.third { width: 32%; padding: 0 0 0 25px;}
.third_left { width: 32%; padding: 0 0 0 25px; text-align:left;}
.third_center { width: 32%; padding: 0 0 0 25px; text-align:center;}
.third_right { width: 32%; padding: 0 0 0 25px; text-align:right;}
#main{ padding: 0 50px 0 25px;}



}



/*Breakpoint für Smartphones quer oder Tablets* * * * * * * * * */ 
@media only screen and (min-width: 440px) and (max-width: 759px) {

header{
	background: #fff; /* Viollet/Farbplatzhalter */
}

.wrapper{
	width: 440px;
}

/* Anpassen Raster weil Haupbild links Weissraum für Freisteller hat; Blöcke z.T. untereinander */
.two-thirds, .half, .half_right, .third, .fourth, .three-fourth, .sidebar{
	width: 98%;
	margin: 0 2% !important;
}

.full {width: 100%}
.half_half {width: 98%; margin: 0 0 !important;}
.third_left { width: 37%; padding: 0 0 0 35px; text-align:left; margin: 0;}
.third_center { width: 25%;}
.third_right { width: 32%; float: right;}
#main {width: 100%; padding: 0 0 0 38px;}



/* Anpassen der Sidebar */
.sidebar {
        width: 100%;        
        float: left;
		padding: 0 0 0 30px;
		margin-top: -20px;
}

.bildwechsel_hoerproben, .bildwechsel_videos, .bildwechsel_agenda, .bildwechsel_presse, .bildwechsel_biografie, .bildwechsel_diskografie { /* Icons mit wechselnden Farben bei MouseOver */
	margin-left: -20px;
}

blockquote { 
		margin: 15px 20px 10px 0;
}

.quote_autor {
	margin-left: 0;
}

/* Ausblenden von Elementen, da für kleine Auflösungen too much */
.mainpic, .cssSlider1, .bildli{
		display: none;
}
	
/* Einblenden Slider für kleine Auflösungen */
.bildli_mob{
		display: inline;
}
		
	
/* Anpassen Hauptbild: Original zu quer mit zu viel Hintergrund bzw. Person würde verschwindend klein; Willkommensschrift neu platziert */	
.mobpic{
		display: inline;
		float: left;
		position: relative;
		margin-bottom: 30px;
}

/* Teaserbilder hübscher linksbündig */
.alignright{ 
		float: left; 
		margin: -30px 20px 0 0;
		width: 25%;
}

/* Anpassen Teaserschrift */
.teaser h1 {
	margin: 0 0 0 120px;
}

p {
	margin: 0 10px 7.5px 0;	
}

/* Da Teaser untereinander: Trennlinie */
.linie {
		margin-bottom: 10px;
		padding-bottom: 20px;
		border-bottom: solid 1px #333333;
}

/* Da Diskografie untereinander: Trennlinien ein-/ausblenden und Abstände anpassen */
ul.hoerproben li.no_line, ul.diskografie li.no_line{
		border-bottom: solid 1px #333333;
}

ul.diskografie li.no_end_line{
		border-bottom: 0;
}

.cdcover{
	padding: 0px 20px 10px 0;
}


/* Anpassen Logo */
.alignleft {
	width: 340px;
	margin-left: 25px;
}

/* Kleinere Buttons */
.button1, .button2, .button3{ 
		padding: 2px 8px; 
		font-size: 14px; 
		font-size: 0.875rem; 
		border-radius: 8px;
}

/* Formular nun über ganze Breite*/
input[type='text'], textarea, select {
		width: 100%;}
		

/* Mobile Navi kleine Tablets: NEU ohne Menübutton oben rechts, Navi und Metanavi neu angeordnet * * * * * * * * * */ 



#metanavigation, #navigation {
	display: left;
}

a#mobile-menu-btn{
		display: none;
		float: right;
		width: 25px;
}


ul#navigation{ 
		margin: 20px 0 0 15px;
		float: left;
}

ul#metanavigation{ 
		float: right; 
		margin: 20px 0 0 15px;
		text-align: right;
}

ul#navigation li{ 
		display: block; 
		list-style: none;
		position: relative;	
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem; 
		line-height: 33px;
		line-height: 2rem;
		margin: 0; 
}


ul#metanavigation li{ 
		display: block; 
		list-style: none;
		position: relative;	
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem;
		line-height: 33px;
		line-height: 2rem;
		margin: 0; 
}


a.home, a.biografie, a.bands, a.musik, a.agenda:link {
		padding: 0 50px 5px 15px;
}

/* Drop-Down-Mobile * * * * * * * * * */

ul#navigation ul{
		display:block; 
}

ul#navigation ul.active{
		display:block; 
}

ul#navigation ul{
		position: relative; 
		top: 0;
		left: 0;
		background: #fff;
		border-radius: 0 ;
		border-bottom: none;
}

ul#navigation ul li a.bands_dropdown{
		display: none;
		margin: 5px 0 5px 15px;
		border-bottom: 1px solid #75a0af;
}

ul#navigation ul li a.musik_dropdown{
		display: none;
		margin: 5px 0 5px 15px;
		border-bottom: 1px solid #928371;
}

ul#navigation ul li a{ 
		display: block;
		text-transform: uppercase; 
		font-size: 12px;
		font-size: 0.750rem; 
		padding: 0 55px 5px 15px;
}

ul#navigation ul li a.bands_dropdown:hover, a.bands_dropdown.active{ 
		color: #75a0af;		
}

ul#navigation ul li a.musik_dropdown:hover, a.musik_dropdown.active{ 
		color: #928371;		
}

}



/*Breakpoint für Smartphones* * * * * * * * * */ 
@media only screen and (max-width: 600px) {

header{
	background: #fff /* Lila/Farbplatzhalter */
}

.wrapper{
	width: 320px;
}

/* Anpassen Raster weil Haupbild links Weissraum für Freisteller hat; Blöcke z.T. untereinander */
.full, .two-thirds, .half, .half_right, .third, .third_left, .third_center, .third_right, .fourth, .three-fourth {
	width: 98%;
	margin: 0 2% !important;
}

.full, .half, .half_right, .third, .third_left, .third_center, .third_right{
	padding: 0 0 0 23px;}

/* Anpassen Fussleiste */	
.third_center, .third_right{
	text-align:left;
}

.half_half {width: 98%; margin: 2% 0 !important;}
 #main {width: 100%; padding: 0 0 0 30px;}



/* Anpassen der Sidebar */
.sidebar {
        width: 100%;        
        float: left;
		padding: 0 0 0 30px;
		margin-top: -20px;
}

.bildwechsel_hoerproben, .bildwechsel_videos, .bildwechsel_agenda, .bildwechsel_presse, .bildwechsel_biografie, .bildwechsel_diskografie { /* Icons mit wechselnden Farben bei MouseOver */
	margin-left: -20px;
}

blockquote { 
		margin: 15px 20px 10px 0;
}

.quote_autor {
	margin-left: 0;
}


/* Ausblenden von Elementen, da für kleine Auflösungen nicht relevant; Hauptbild ersetzen, siehe unten */
.mainpic, .cssSlider1, .bildli{
		display: none;
}

/* Einblenden Slider für kleine Auflösungen */
.bildli_mob{
		display: inline;
}


.runde_ecken_video { /* Style anpassen Video*/
	max-height: 200px;
}


.runde_ecken_abstand { /* Style anpassen für Mob-Slide-Bilder*/
	border-radius: 10px;
	max-width: 100%;
	margin-bottom: 40px;
}


/* Anpassen Hauptbild: Original zu quer mit zu viel Hintergrund bzw. Person würde verschwindend klein, Willkommensspruch neu platziert */	
.mobpic{
		display: inline;
		float: left;
		position: relative;
		margin: 0 0 30px 0;
}


.alignright{ 
		float: left; 
		width: 73px;
		margin-right: 7px;
}

/* Anpassen Logo */
.alignleft {
	width: 240px;
	margin-left: 20px;
}

/* Da Teaser untereinander: Trennlinie */
.linie {
		margin-bottom: 10px;
		padding-bottom: 15px;
		border-bottom: solid 1px #333333;
}

p {
	margin: 0 0 9px 0;	
}

/* Da Diskografie untereinander: Trennlinien ein-/ausblenden und Abstände anpassen */
ul.hoerproben li.no_line, ul.diskografie li.no_line{
		border-bottom: solid 1px #333333;
}

ul.diskografie li.no_end_line{
		border-bottom: 0;
}

.cdcover{
	padding: 0px 20px 10px 0;
}

/* Kleinere Buttons */
.button1, .button2, .button3{ 
		padding: 2px 8px; 
		font-size: 14px; 
		font-size: 0.875rem; 
		border-radius: 8px;
	
}

/* Formular nun über ganze Breite*/
input[type='text'], textarea, select {
		width: 100%;}


/* Mobile Navi kleine Tablets: NEU ohne Einblenden des Menübuttons oben rechts, Navi und Metanavi neu angeordnet * * * * * * * * * */ 


#metanavigation, #navigation {
	display: left;
}

a#mobile-menu-btn{
		display: none;
		float: right;
		width: 25px;
}


ul#navigation{ 
		margin: 20px 0 0 15px;
		float: left;
}

ul#metanavigation{ 
		float: right; 
		margin: 20px 0 0 15px;
		text-align: left;
}

ul#navigation li{ 
		display: block; 
		list-style: none;
		position: relative;	
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem; 
		line-height: 33px;
		line-height: 2rem;
		margin: 0; 
}


ul#metanavigation li{ 
		display: block; 
		list-style: none;
		position: relative;	
		text-transform: uppercase;
		font-size: 16px;
		font-size: 1rem;
		line-height: 33px;
		line-height: 2rem;
		margin: 0; 
}


a.home, a.biografie, a.bands, a.musik, a.agenda:link {
		padding: 0 50px 5px 15px;
}


/* Drop-Down-Mobile * * * * * * * * * */

ul#navigation ul{
		display:block; 
}

ul#navigation ul.active{
		display:block; 
}


ul#navigation ul{
		position: relative; 
		top: 0;
		left: 0;
		background: #fff;
		border-radius: 0 ;
		border-bottom: none;
}


ul#navigation ul li a.bands_dropdown{
		display: none;
		margin: 5px 0 5px 15px;
		border-bottom: 1px solid #75a0af;
}

ul#navigation ul li a.musik_dropdown{
		display: none;
		margin:  5px 0 5px 15px;
		border-bottom: 1px solid #928371;
}



ul#navigation ul li a{ 
		display: block;
		text-transform: uppercase; 
		font-size: 12px;
		font-size: 0.750rem; 
		padding: 0 55px 5px 15px;
}

ul#navigation ul li a.bands_dropdown:hover, a.bands_dropdown.active{ 
		color: #75a0af;		
}

ul#navigation ul li a.musik_dropdown:hover, a.musik_dropdown.active{ 
		color: #928371;		
}


}