/*#spieler {min-height:1.3em;max-height:3em;}*/

#player {
	font-family: Verdana, Arial, sans-serif;
	border: 6px solid #555;
	border-radius: .5em;
	/*max-width: 26em;*/
	background: #222;
	/*margin:0 auto;*/
	margin:1em;
	-webkit-text-size-adjust: none; /* was es alles gibt! */
}

#player li a img {float:left;margin-right:.5em;max-height:80px !important;max-width:80px !important;}
#player li a:after, div.wdwjs_player:after {
content : ".";
display : block;
height : 0;
clear : left;
visibility : hidden;
}
#player li a span {font-size: 85%;}

#player audio {width: 99%;   margin: 25px 0 0 0; border:1px solid transparent;} /* 25px fuer Android */
#player ul {margin:0;padding:0}
#player li {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	list-style-type:none;
	border-top: 1px solid #666;
}
#player li.aktuell {background:#555;}
#player li a {padding:6px}
#player li, #player li a {margin:0;color:white !important;text-decoration:none; display:block;}
#player li a:focus, #player li a:hover, #player li a:active {background:#555;color:#fff !important;outline:0;}

.wdwjs_player h1, .wdwjs_player h2, .wdwjs_player p {text-align:center;color:#000;margin:.2em 0;}
.wdwjs_player input {color:#fff;}

.dot{position: absolute !important;clip: rect(1px, 1px, 1px, 1px);color:#000;background:#fff;}

.wdwjs_player input#play {display:inline;}
.wdwjs_player input#pause {display:none;}

.wdwjs_player {font-family:monospace, Courier New;font-size:1em;color: #bbb; letter-spacing:-1px;padding: 10px 0 12px 8px;}
.wdwjs_player input[type=image] {margin: 0 0 -4px 0 !important; border-radius:0;outline-color: #888;}
.wdwjs_player input#unmute {display:none;}
.wdwjs_player input[type=range] {cursor: pointer;} 
.wdwjs_player #vol {font-family:monospace;display:inline-block;width:2.3em;text-align:center;height:18px;} 
.wdwjs_player #vol img{margin-bottom:-3px;height:18px;} 
.wdwjs_player #volume_controls {visibility:hidden;}
.wdwjs_player #play,.wdwjs_player #pause,.wdwjs_player #mute,.wdwjs_player #unmute,.wdwjs_player #voldown,.wdwjs_player #volup {width: 19px;height:19px;padding:0 !important;margin: 0 0 -4px 0 !important;}

.wdwjs_player #play:focus,.wdwjs_player #pause:focus,.wdwjs_player #mute:focus,.wdwjs_player #unmute:focus,.wdwjs_player #voldown:focus,.wdwjs_player #volup:focus {outline:3px solid #888;}

.wdwjs_player #curr, .wdwjs_player #duration {width:2.2em;font-family:monospace, Courier New;font-size:.9em}
#volume_controls {animation: fadein 1s;float:right;margin-right:.5em;}

pre {	max-height:9em;overflow:auto;}

@media only screen and (max-device-width: 480px) {
	#player {background: #e1e1e1;border: 2px solid #aaa;max-width:98%;}
	#player li, #player li a {color:#333 !important;}
	.wdwjs_player li {border-top: 1px solid #aaa}
	#player li.aktuell {background:#ddeedf;}
	.wdwjs_player audio {margin: 10px 0 5px 0}
	.wdwjs_player {color: #333;}
	pre {font-size:.8em;font-family: "Courier New",Courier,serif;letter-spacing:.6px;}
}





/*https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/*/
.wdwjs_player input[type=range] {
  -webkit-appearance: none;
  width: calc(100% - 240px);
  max-width:50%;
  margin-bottom:-3px; /* neue Firefox */
  padding:0;
}
.wdwjs_player input[type=range]:focus {
  /*outline: none;*/
  /*outline-color: #bbb;*/
  
}
.wdwjs_player input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #aaa;
  /*border-radius: 1.3px;*/
  border: 0.2px solid #010101;
  
}
.wdwjs_player input[type=range]::-webkit-slider-thumb {
  border: 1px solid #000000;
  height: 24px;
  width: 12px;
  max-width: 70%;
 
  border-radius: 3px;
  background: #ccc;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}

.wdwjs_player input[type=range]:focus::-webkit-slider-thumb {
  outline: 2px solid #888;
}
.wdwjs_player input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #aaa;
  /*border-radius: 1.3px;*/
  border: 0.2px solid #010101;
  margin-bottom: -15px !important;
}
.wdwjs_player input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 24px;
  width: 12px;
  max-width: 50%;
  
  border-radius: 3px;
  background: #ccc;
  cursor: pointer;
}
.wdwjs_player input[type=range]:focus::-moz-range-thumb {
  outline: 2px solid #888;
}
.wdwjs_player input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  padding:0;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
  margin: -15px 0 -15px 0; /*IE 11 + edgen = murks*/
  
  
}
.wdwjs_player input[type=range]::-ms-fill-lower {
  background: #aaa;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
}
.wdwjs_player input[type=range]::-ms-fill-upper {
  background: #aaa;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
}
.wdwjs_player input[type=range]::-ms-thumb {
  border: 1px solid #000000;
  height: 20px;
  width: 12px;
  border-radius: 3px;
  background: #ccc;
  cursor: pointer;
  margin-bottom: -8px !important;
}
.wdwjs_player input[type=range].focus::-ms-thumb {
  outline: 2px solid #888;
}