#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) { }