.audio-player, .audio-player div, .audio-player h2, .audio-player a, .audio-player span, .audio-player button {margin: 0; padding: 0; border: none; outline: none; }
div.audio-player {position: relative; width: 100%; height: 40px; margin: 0 auto; background: #fff; border: 1px solid #d3e6f5; border-radius: 20px; }
/* play/pause control */
.mejs-controls .mejs-button button {cursor: pointer; display: block; position: absolute; text-indent: -9999px; }
.mejs-controls .mejs-play button, 
.mejs-controls .mejs-pause button {width: 40px; height: 40px; top: 0; left: -1px; background: url(../images/front/sprite.png) no-repeat 0 -304px; }
.mejs-controls .mejs-pause button { background-position: -43px -304px;}
/* mute/unmute control */
.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button {width: 18px; height: 19px; top: 9px; right: 142px; background: transparent url('../images/front/audio.png') 0 0; }
.mejs-controls .mejs-unmute button { background-position: 0 -19px; }
/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {position: absolute; top: 13px; right: 15px; cursor: pointer; }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {width: 120px; height: 11px; background: #212227; -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25); -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25); box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {position: absolute; width: 0; height: 9px; top: 1px; left: 1px; background: #90d26a; background: -webkit-linear-gradient(top, #90d26a 0%, #83bb63 100%); background: -moz-linear-gradient(top, #90d26a 0%, #83bb63 100%); background: -o-linear-gradient(top, #90d26a 0%, #83bb63 100%); background: -ms-linear-gradient(top, #90d26a 0%, #83bb63 100%); background: linear-gradient(top, #90d26a 0%, #83bb63 100%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
/* time scrubber bar */
.mejs-controls div.mejs-time-rail {width: 300px; position: absolute; left: 0; top: -22px; }
.mejs-controls .mejs-time-rail span {position: absolute; display: block; width: 310px; height: 4px; top: 40px; left: 55px; cursor: pointer; -webkit-border-radius: 0px 0px 2px 2px; -moz-border-radius: 0px 0px 2px 2px; border-radius: 0px 0px 2px 2px; }
.mejs-controls .mejs-time-rail .mejs-time-total {background: #565860; width: 320px !important; /* fixes display bug using jQuery 1.8+ */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.mejs-controls .mejs-time-rail .mejs-time-loaded {top: 0; left: 0; width: 0; background: #d9dbde; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.mejs-controls .mejs-time-rail .mejs-time-current {top: 0; left: 0; width: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #007fe9; }
/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {position: absolute; display: block; width: 8px; height: 8px; top: -2px; background: #007fe9; border-radius: 100%; }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {position: absolute; display: block; width: 12px; height: 14px; top: -1px; background: url('../images/front/handle-sm.png') no-repeat; }
/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {position: absolute; display: none; width: 33px; height: 23px; top: -26px; margin-left: -17px; z-index: 9999; background: url('../images/front/time-box.png'); }
.mejs-controls .mejs-time-rail .mejs-time-float-current {width: 33px; display: block; left: 0; top: 2px; font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold; color: #666; text-align: center; z-index: 9999; }