/* root element should be positioned relatively so that 
    child elements can be positioned absolutely */
div.vcontrols, div.track {
    width:478px;
    height:9px;
}
/*#featured-video div.vcontrols,
#featured-video div.track, 
#featured-video div.vcontrols {width:294px;}*/

div.vcontrols {
    position:relative;
    /* black background with a gradient */
    background:#000;
    cursor:pointer;
    float:left;
}

/* play/pause button */
div.vcontrols a.play, div.vcontrols a.pause, a.mute {display:none;}
/* time display */
div.vcontrols div.time {display: none;}
/* the draggable playhead */
div.vcontrols div.playhead {display:none;}

/* the timeline (or "scrubber")  */
div.vcontrols div.track {  
    left:0px;
    position:absolute;
    cursor:pointer;
}


/* buffer- and progress bars. upon runtime the width of these elements grows */
div.vcontrols div.progress, div.vcontrols div.buffer {  
    position:absolute;
    height:9px; 
    width:0px;  
    background-color:#333;
}

div.vcontrols div.buffer {
    background-color:#1a1919;
    cursor:pointer;
}
/** playhead */
.loaded-container {
    background-color:#404040;
    height:6px;
    position:relative;
    top:0; left:0;
}
.loaded-pos {
    background-color:#6a6a6a;
    height:6px;
}
.position-container {
    height:6px;
    position:relative;
    top:-6px; left:0;    
}
.position-pos {
    background-color:#ffffff;
    height:6px; 
}


/** CUSTOM VOLUME ... */
div.vol-container {
float:left;
background-color:#111;margin:0;padding:0;
}
div.volume-icon {
float:left;
background-color:#111
}
div.volume-control {
cursor:pointer;
width:49px;
height:9px;
border-left:1px solid #000;
opacity:.30;
filter: Alpha(Opacity=30);
}
div.volume-control:hover{
opacity:1;
filter: Alpha(Opacity=100);
}
div.VolumeSlide {
cursor:pointer;
/*background-color:#333;*/
height:9px;
background-image:url(../img/volumeslide.gif);
background-repeat:no-repeat;
background-position:left top;
}