/** audio player styles **/
.audio-player, .audio-player div, .audio-player span, .audio-player button {
  margin:             0;
  padding:            0;
  border:             none;
  outline:            none;
}

div.audio-player {
  position:           absolute;
  bottom:             0;
  left:               0;
  width:              100%;
  height:             30px;
  background:         transparent;
}

/* 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:              34px;
  height:             34px;
  top:                0;
  left:               7px;
  background:         transparent url('../img/playpause.png') 0 0;
}

.mejs-controls .mejs-pause button {
  background-position: 0 -35px;
}

/* mute/unmute control */
.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button {
  width:              18px;
  height:             19px;
  background:         transparent url('../img/audio.png') 0 0;
  position:           absolute;
  top:                4px;
  right:              50px;
}

.mejs-controls .mejs-unmute button {
  background-position: 0 -19px;
  position:           absolute;
  top:                4px;
  right:              50px;
}

/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
  cursor:             pointer;
  position:           absolute;
  top:                9px;
  right:              10px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  width:              30px;
  height:             11px;
  background:         #212227;
  border-radius:      4px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  position:           absolute;
  width:              0;
  height:             11px;
  top:                1px;
  left:               1px;
  background:         #D2D2D2;
  border-radius:      8px;
}

/* time scrubber bar */
.mejs-controls div.mejs-time-rail {
  width:              180px;
}

.mejs-controls .mejs-time-rail span {
  position:           absolute;
  display:            block;
  width:              180px;
  height:             12px;
  top:                9px;
  left:               55px;
  cursor:             pointer;
  border-radius:      0px 0px 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
  background:         #565860;
  width:              180px !important; /* fixes display bug using jQuery 1.8+ */
  border-radius:      3px;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
  top:                0;
  left:               0;
  width:              0;
  background:         #ffe59b;
  border-radius:      3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
  top:                0;
  left:               0;
  width:              0;
  border-radius:      3px;
  background:         #fff;
  background:         linear-gradient(top, #fff 0%, #fff 100%);
}

/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
  position:           absolute;
  display:            block;
  width:              20px;
  height:             22px;
  top:                -6px;
  background:         url('../img/handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
  position:           absolute;
  display:            block;
  width:              12px;
  height:             14px;
  top:                0;
  background:         url('../img/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('../img/time-box.png');
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
  width:              33px;
  display:            block;
  left:               0;
  top:                4px;
  font:               10px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:        bold;
  color:              #666;
  text-align:         center;
  z-index:            9999;
}