html {font-family: Arial, sans-serif;}

#player {
        border: 2px solid #FFFF00;
        border-radius: 5px;
        max-width: 50px#FFFFFF;
        background-color: #1F1F1F;
         margin:auto;
         height:50px; width: 400px;
}


#player audio {width: 99%;   margin: 50px 0 0 0; border:1px solid transparent;} /* 25px fuer Android */
#player audio:focus, #player audio:hover {background:#6F6F6F;} /* die Rahmenfarbe */

#player ul {margin:0;padding:0;color: #FFFFFF;}
#player li {
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        list-style-type:none;
        /*padding:6px;*/
        border-top: 30px solid #FFFF00;
         width: 200px;
}

#player li a {padding:50px; }
#player li a:focus, #player li a:hover {background:#000000;color:#FFFFFF;outline:0}
#player li, #player li a {color:#FFFF00;text-decoration:none; font-size: .9rem;display:block;}
.star {font-size: 6rem; line-height: .1rem; /*vertical-align: -.5rem;*/}
.bem {
        font-size: .8rem;
        -webkit-text-size-adjust: none; /* was es alles gibt! */
}

h1, p, #gemafrei {text-align:center;}



/* Smartphones and iPad (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
        #gemafrei:before {content:'iOS und Android mögen leider kein Autostart.'; display:block;}
        #player li{border-top: 1px solid #888;}
}