/* root element should be positioned relatively so that
    child elements can be positioned absolutely */
.controls {
    position:relative;
    height:8px;
    margin:12px 0 0;
    padding:5px 0 0;
}

/* when play button toggles between play/pause class
    we move its background image */
.controls .play, .controls .pause {
    position:absolute;
    width: 18px;
    height:10px;
    text-indent:-999em;
    cursor:pointer;
    overflow:hidden;
    background:url(play_pause.gif) center top no-repeat;
    margin-top: -10px;
}

.controls .pause {
    background-position:center -10px;
}

/* the track or "scrubber"  */
.controls .track {
    position:absolute;
    top:-6px;
    height:18px;
    left:20px;
    background:url(track.gif) no-repeat;
    text-align:left;
    cursor:pointer;
    width:220px;
}

/* the draggable playhead */
.controls .playhead {
    position:absolute;
    height:12px;
    background:url(playhead.png) no-repeat;
    cursor:pointer;
    top:0px;
    width:12px;
}

/* buffer and controls are automatically resized, their initial width should be 0 */
.controls .progress, .controls .buffer {
    background-color:#fff;
    height:6px;
    margin:3px 4px;
    width:0px;
    position:absolute;
    top:0;
    font-size:0px;

    /* this is the way to fine tune buffer and progress max width */
    max-width:220px;
}

.controls .buffer {
    background-color:#999;
}

/* som proprietary styling for progress bar under mozilla */
.controls .progress {
    -moz-border-radius-bottomleft:2px;
    -moz-border-radius-topleft:2px;
}

/* hide time & mute */
.controls .time, .controls .mute, .controls .unmute {
    display:none;
}