#audio_player { width:40px; height: 40px; position: relative; padding: 2px; margin: 25px auto; background: #f1f1f1; border-radius: 22px }
#audio_player .background { width: 35px; height: 35px; border: solid 2px #e5e5e5; background: #f1f1f1; border-radius: 20px }
#audio_player .btn { cursor: pointer }
#audio_player .btn_play { display: block; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; text-indent: -900em; z-index: 10; background: url(/assets/images/addon/button_play.png) 4.75px top no-repeat; background-size: 10.5px 15.5px }
/* pause */
#audio_player .btn_play.playing { background: url(/assets/images/addon/button_pause.png) center no-repeat; background-size: 54px 59px }
#audio_player .progress { position: absolute; width: 40px; height: 40px; top: 8px; left: 8px;}
#audio_player .progress .slice { position: absolute; width: 40px; height: 40px; clip: rect(0px,40px,40px,20px); }
#audio_player .progress .slice.gt50 { clip:rect(auto, auto, auto, auto); }
#audio_player .progress .slice .pie { border: 10px solid #276f84; position: absolute; width: 35px; height:35px; clip:rect(0,20px,40px,0);
-moz-border-radius:80px; -webkit-border-radius:80px; border-radius:80px;
}
#audio_player .progress .slice .pie.fill {
-moz-transform:rotate(180deg) !important;
-webkit-transform:rotate(180deg) !important;
-o-transform:rotate(180deg) !important;
transform:rotate(180deg) !important;
}
/* ==|== media queries ====================================================== */
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
}