span {display:inline-block;}
/* root element should be positioned relatively so that
    child elements can be positioned absolutely */
.hulu {
    position:relative;
    height:30px;

    /* black background with a gradient */
    background:url('img/hulu/hulu.png') repeat-x 0 -4px;
    /*background:#EAE6EB;*/
    width:500px;
}

/* play/pause button */
.hulu .play, .hulu .pause {
    position:absolute;
    width: 46px;
    height: 29px;
    display:block;
    text-indent:-9999em;
    background:url('img/hulu/hulu.png') no-repeat 10px -61px;
    cursor:pointer;
    border-right:0px solid #fff;
}

.hulu .play:hover {
    background-position:10px -105px;
}

/* pause state */
.hulu .pause {
    background-position:11px -148px;
}

.hulu .pause:hover {
    background-position:11px -192px;
}

/* the timeline (or "scrubber")  */
.hulu .track {
    left:47px;
    position:absolute;
    cursor:pointer;
    width:285px;
    border-left:1px solid #fff;
    height:29px;
}

/* the draggable playhead */
.hulu .playhead {
    position:absolute;
    cursor:pointer;
    background-color:#C6D828;
    opacity:0.5;
    filter: alpha(opacity=50);
    width:2px;
    height:29px;
    border-right:1px solid #fff;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
.hulu .progress, .hulu .buffer {
    position:absolute;
    background-color:#C6D828;
    /*filter: alpha(opacity=10);*/
    opacity:0.4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	
    width:0px;
    height:29px;
}

.hulu .buffer {
    background-color:#fff;
    opacity:0.1;
    filter: alpha(opacity=10);
}

/* time display */
.hulu .time {
    position:absolute;
    width:129px;
    left:330px;
    padding:4px 0;
    text-align:center;
   /* border:1px solid #86940f;*/
    border-width:0 1px;
    font-size:12px;
    color:#000;
}

/* total duration in time display */
.hulu .time strong {
    font-weight:normal;
    color:#fff;
}

/* mute / unmute buttons */
.hulu .mute, .hulu .unmute {
    position:absolute;
    left:460px;
    width:40px;
    height:30px;
    text-align:center;
    padding:8px 0;
    cursor:pointer;
    text-indent:-9999em;
    background:url('img/hulu/hulu.png') no-repeat 5px -323px;
}

.hulu .mute:hover {
    background-position:5px -367px;
}

/* unmute state */
.hulu .unmute {
    background-position:5px -235px;
}

.hulu .unmute:hover {
    background-position:5px -279px;
}
