html {font-family: Arial, sans-serif; Font-size: 100%;}
#player, #player1, #player2 {
	Position:fixed;
	border: 16px solid #B00000;
	border-radius: .5em;
	max-width: 64em;
	height:auto;
	background-color:#e0c0b1;
  margin: auto auto auto auto;
  display:none;
}


#player audio,  #player1 audio, #player2 audio{width: 99%;  margin: 0 0 0 2px; border:1px solid transparent;} /* 25px fuer Android */

#player audio:focus, #player audio:hover {background-color:#B00000;} /* die Rahmenfarbe */
#player1 audio:focus, #player1 audio:hover {background-color:#B00000;} /* die Rahmenfarbe */
#player2 audio:focus, #player2 audio:hover {background-color:#B00000;}
@media screen and (-webkit-min-device-pixel-ratio:0) { /*chrome only*/
	audio {	filter: invert(1);}
}

#player ul, #player1 ul, #player2 ul {margin:0;padding:0;	Position:fixed;}
#player li, #player1 li,#player2 li {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	list-style-type:none;
		/*padding:6px;*/
	border-top: 2px solid #666;
	/* width: 240px; */
}
.playerframe{
	border:0;
	width:100%;
	height:20rem;
	margin-top:-.5em;
	margin-bottom:-2em;
}

.playerframe1{
	position:relative;top:.4rem;
	border:0;
	width:100%;
	height:10rem;
	margin-top:-1.1rem;
	margin-bottom:-2em;
	-webkit-margin-before:-1.2rem;


}
.playerframe2{
	border:0;
	width:100%;
	height:28rem;
	margin-top:-.8rem;
	margin-bottom:-2em;
	-webkit-margin-before:-1.2rem;	}
	
	
#player li a, #player1 li a,  #player2 li a{padding:6px;}

#player li a:focus, #player li a:hover {background-color:#B00000;color:#fff;outline:0}
#player1 li a:focus, #player1 li a:hover {background-color:#B00000;color:#fff;outline:0}
#player2 li a:focus, #player2 li a:hover {background-color:#B00000;color:#fff;outline:0}
#player li, #player li a {color:white;text-decoration:none; font-size: 0.9rem;display:block;}
#player1 li, #player1 li a {color:white;text-decoration:none; font-size: 0.9rem;display:block;}
#player2 li, #player2 li a {color:white;text-decoration:none; font-size: 0.9rem;display:block;}
.star {font-size: 0.5rem; line-height: .1rem; /*vertical-align: -.5rem;*/}
.bem {
	font-size: .3rem; 
	-webkit-text-size-adjust: none; /* was es alles gibt! */
}

/*Mobile Application-Audio Player*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1023px) {
#player li, #player li a {color:white;text-decoration:none; font-size: 2.5rem;display:block;}
#player1 li, #player1 li a {color:white;text-decoration:none; font-size: 2.5rem;display:block;}
#player2 li, #player2 li a {color:white;text-decoration:none; font-size: 2.5rem;display:block;}}
@media only screen 
and (device-width : 800px) 
and (device-height: 600px) {
#player li, #player li a {color:white;text-decoration:none; font-size: 1rem;display:block;}
#player1 li, #player1 li a {color:white;text-decoration:none; font-size: 1rem;display:block;}
#player2 li, #player2 li a {color:white;text-decoration:none; font-size: 1rem;display:block;}
}
.playerframe{
	border:0;
	width:auto;
	height:28em;
	margin-top:-.5em;
	margin-bottom:-3.9em;}

.playerframe1{
	border:0;
	width:100%;
	height:35em;
	margin-top:-1em;
margin-bottom:-2em;
-webkit-margin-before:5rem;	
overflow-y: hidden; overflow-y: scroll 
    }

         


.playerframe2{
	position:relative;
	top:3em;
	border:0;
	width:100%;
	height:28em;
margin-top:-2em;
margin-bottom:8em;}

.star {font-size: 2rem; line-height:2rem; /*vertical-align: -.5rem;*/}