/*** style ***/
#page { width: 910px; height: 374px; margin: 0 auto; padding: 8px 7px; background: url(../skin/player-back.gif) no-repeat; overflow: hidden; }

/*** control ***/
#playerCont { width: 572px; float: left; height: 358px; overflow: hidden; }
a#player{ display:block;width:572px;height:317px;overflow:hidden;}

div.control { width: 572px; height: 41px; margin: 0; padding: 0; background:#000 url(../skin/bar.gif) repeat-x 0 8px; overflow: hidden; position: relative; }
div.control a.play, div.control a.pause { position: absolute; top: 12px; left: 10px; width: 22px; height: 22px; display: block; cursor: pointer; }
div.control a.play { background:url(../skin/play.gif) no-repeat; }
div.control a.play:hover { background:url(../skin/play-over.gif) no-repeat; }
div.control a.pause { background:url(../skin/pause.gif) no-repeat; }
div.control a.pause:hover { background:url(../skin/pause-over.gif) no-repeat; }
div.control a.mute, div.control a.unmute { position: absolute; top: 18px; right: 0px; width: 35px; height: 35px; cursor: pointer; background: url(../skin/mute.gif) no-repeat; }
div.control a.mute:hover { background:url(../skin/mute.gif) no-repeat; }
div.control a.unmute { background:url(../skin/unmute.gif) no-repeat; }
div.control a.unmute:hover { /*background:url(../skin/mute.gif) no-repeat 10px 9px;*/ }

/* the timeline (or "scrubber")  */
div.control div.track { position: absolute; top: 0; left: 0; width: 572px; height: 8px; margin: 0; padding: 0; cursor:pointer; background:url(../skin/timeline.gif) repeat-x; }

/* the draggable playhead */
div.control div.playhead { position: absolute; top: 0; left: 0; width: 12px; height: 8px; cursor:pointer; background:url(../skin/playhead.gif) no-repeat; }

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.control div.progress, div.control div.buffer { position: absolute; top: 0; left: 0; width: 0; height: 8px; background-color: #4ff; filter:alpha(opacity=10);-moz-opacity:0.1;opacity:0.1; }
div.control div.buffer { width: 572px; background-color: #fff; filter:alpha(opacity=10);-moz-opacity:0.1;opacity:0.1; }
div.control div.progress { width: 572px; }

/* time display */
div.control div.time { position: absolute; top: 15px; left: 40px; width: 78px; height: 18px; padding: 1px 0; font: 12px futura,'Lucida Grande','bitstream vera sans','trebuchet ms',verdana,arial; text-align:center; color: #fff; background:url(../skin/timer-bg.gif) repeat-x; }

/* total duration in time display */
div.control div.time strong { font-weight: normal; color: #666; }

/* other two buttons */
div.control a.fullscreen { position:absolute; left:460px; width:35px; height:35px; text-align:center; padding:8px 0; cursor:pointer; text-indent:-9999em; background:url(../skin/fullscreen.gif) no-repeat 0 12px; }
div.control a.fullscreen:hover { background:url(../skin/mute.gif) no-repeat 0 17px; }

/* unmute state */
div.control a.unfullscreen { background:url(../skin/mute.gif) no-repeat 0 17px; }
div.control a.unfullscreen:hover { background:url(../skin/mute.gif) no-repeat 0 17px; }

/*** playlist  ***/
/* general playlist settings */
div.playlist { position:relative; overflow:hidden; height:359px !important; }
div.playlist div.clips { position:absolute; }
div.playlist, div.clips { height:115px; width:327px; float:left; }
div.clips a { background:url(../skin/clip-bg.png) no-repeat; display:block; margin:0 0 7px 6px; height:115px; width:318px; text-decoration:none; color:#000; font: 11px/16px arial,tahoma,verdana,helvetica,sans-serif; }
div.clips a.first { border-top-width:1px; }
div.clips a.playing, div.clips a.paused, div.clips a.progress { /*add to change for playing etc*/ }
div.clips a.progress { opacity:0.6; }
div.clips a.paused { background-position:0 0; }
div.clips a span { display:block; font-size:11px; color:#666; }
div.clips a em { font-style:normal; color:#f00; }
div.clips .clipImg { float:left; width:176px; margin:10px; }
div.clips .clipImg img { border:none; }
div.clips .thumbContent { float:left; width:100px; margin:10px 0; }
div.clips a:hover { background:url(../skin/clip-bg-over.png) no-repeat; }
div.clips a.playing:hover, div.clips a.paused:hover, div.clips a.progress:hover { background-color:transparent !important; }

/* petrol colored */
div.clips.petrol a { background-color:#193947; color:#fff; border:1px outset #193947; }
div.clips.petrol a.playing, div.clips.petrol a.paused, div.clips.petrol a.progress { background:url(/img/playlist/dark.png) no-repeat 0px -69px; border:0; }
div.clips.petrol a.paused { background-position:0 0; }
div.clips.petrol a span { color:#aaa; }
div.clips.petrol a em { color:#FCA29A; font-weight:bold; }
div.clips.petrol a:hover { background-color:#274D58; }
div.clips.petrol a.playing:hover, div.clips.petrol a.paused:hover, div.clips.petrol a.progress:hover { background-color:transparent !important; }

/* low version */
div.clips.low a { height:31px; }
div.clips.low a.playing, div.clips.low a.paused, div.clips.low a.progress { background-image:url(/img/playlist/light_small.png); background-position:0 -55px; }
div.clips.low a.paused { background-position:0 0; }

/* go buttons */
a.go { position:absolute; display:block; width:18px; height:18px; background:url(../skin/up.png) no-repeat; /*margin:5px 0 5px 875px;*/ cursor:pointer; right: 1px; }
a.go:hover, a.go.down:hover { background-position: 0px -18px; }
a.go.down { background-image:url(../skin/down.png); bottom: 0; }

div.petrol a.go { background-image:url(/img/playlist/arrow/up_dark.png); }
div.petrol a.go.down { background-image:url(/img/playlist/arrow/down_dark.png); }
a.go.disabled { visibility:hidden; }