/*---------------------------------------------------------------------
 MEDIA PLAYER STYLING
---------------------------------------------------------------------*/
  

/* REGULAR SIZE (under 580px)
---------------------------------------------------------------------*/
/* PLAYER CONTAINER */
.player-container {background-color: #fff; margin: 0; padding: 0; font: 10px Helvetica, Arial, sans-serif; color: #000; margin:0 0 10px 0; min-width: 270px;}
.player-container div, .player-container span, .player-container object {margin: 0; padding: 0; font-size: 1em;}
.player-container .video {background: #000;}

/* CONTROL BAR */
.player-container .control-bar {height: 1%; background: #ff8c1a url(bg-small.gif) left top repeat-x; padding-top: 6px; position: relative; border: 1px solid #d65c10; border-top: none;}
.player-container .ui-state-default {background: none; border: none; color: #000;}
.player-container .ui-state-default:focus, .player-container .ui-state-default:active{outline: 1px dotted #000; -moz-outline-style: none;}
.player-container .control-bar .logo {display: none;}
.player-container .functional-controls {margin: 0; width: auto; position: absolute; left: 5px;}
.player-container .volume-controls {float: right; height: 1%; margin-right: 0; margin-right: 9px;}
.player-container .ui-corner-bottom {-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomleft: 5px; -webkit-border-right-radius: 5px;}

/* BUTTONS */
.player-container .control-bar button {font-family: Helvetica, Arial, sans-serif; cursor: pointer; color: #000; font-size: 1em; height: 16px; width: 20px; margin: 0 2px 5px; background-repeat: no-repeat; background-position: 50% 0; text-indent:-999em; padding: 0;}
.player-container .stop {background-image: url(button-restart.gif);}
.player-container .rewind {background-image: url(button-rewind.gif);}
.player-container .play {background-image: url(button-play-small.gif);}
.player-container .pause {background-image: url(button-pause.gif);}
.player-container .forward {background-image: url(button-forward.gif);}
.player-container .control-bar .mute {background-image: url(button-volon.gif); margin-top: 1px;}
.player-container .control-bar .vol-down {background-image: url(button-voldown.gif);}
.player-container .control-bar .vol-up {background-image: url(button-volup.gif);}
.player-container .control-bar .ui-state-hover, .player-container .control-bar .ui-state-focus {background-position: 50% -114px;}
.player-container .control-bar .ui-state-active {background-position: 50% -228px; color: #777;}
.player-container .control-bar .volume-controls .ui-state-active {color: #333; background-position: 50% 0; background-image: url(button-volmute.gif);}
.player-container .control-bar .volume-controls .ui-state-hover, .player-container .control-bar .volume-controls .ui-state-focus {background-position: 50% -114px;}
.player-container .control-bar .volume-controls span {vertical-align: 0.3em;}

/* TIMER BAR */
.player-container .timer-bar {clear: both; padding: 6px 10px 5px; position: relative; background: #ff9e00 url(timer-bar-bg.gif) right top no-repeat;}
.player-container .timer-bar .current-time, .player-container .timer-bar .duration-time {position: absolute; top: 5px;}
.player-container .timer-bar .current-time {left: 10px;}
.player-container .timer-bar .duration-time {right: 10px;}
.player-container .timer-bar .ui-slider {margin: 0 5em; border: 1px solid #d65c10; background: #e57a0c url(timeline-bg.gif) repeat-x top left;}

/* SLIDER BAR */
.player-container .control-bar .ui-slider .ui-slider-handle {border: none; background: #FF8C00 url(timeline-point.gif) no-repeat 50% 0; height: 0.8em; top: 0; width: 0.8em; z-index: 3; margin: 0 0 0 -0.2em; font-size: 1em; position: absolute; cursor: pointer;}
.player-container .control-bar .ui-slider .ui-state-hover, .player-container .control-bar .ui-slider .ui-state-focus, .player-container .control-bar .ui-slider .ui-state-active {background: #fff url(timeline-point.gif) no-repeat 50% -114px;}
.player-container .timer-bar .progress-bar, .player-container .timer-bar .loaded-bar {position:absolute; top: 0; border: none; background: none;}
.player-container .timer-bar .progress-bar {background: #fff; z-index: 2;}
.player-container .timer-bar .loaded-bar {background: #ccc; z-index: 0;}

/* enhancements for good browsers */
.player-container .control-bar button, .player-container .control-bar .volume-controls span, .player-container.player-wide .timer-bar .current-time, .player-container.player-wide .timer-bar .current-time, .player-container.player-wide .timer-bar .duration-time {text-shadow: 0 1px 0 #ffbb3b;}


/* WIDE LAYOUT (over 580px)
---------------------------------------------------------------------*/
/* PLAYER CONTAINER */
.player-container.player-wide {min-width: 580px;}

/* CONTROL BAR */
.player-container.player-wide .control-bar {padding-top: 8px; background: #ffb600 url(bg.gif) left bottom repeat-x;}
.player-container.player-wide .functional-controls {left: 5.5em;}
.player-container.player-wide .volume-controls {height: 27px; margin-top: 10px;}

/* BUTTONS */
.player-container.player-wide .control-bar button {background-position: 50% 0; padding: 18px 6px 0; height: auto; width: auto; text-indent:0; margin: 0;}
.player-container.player-wide .control-bar .ui-state-hover, .player-container.player-wide .control-bar .ui-state-focus {background-position: 50% -114px;}
.player-container.player-wide .control-bar .ui-state-active {background-position: 50% -228px;}

.player-container.player-wide .control-bar .volume-controls button {cursor: pointer; color: #333; height: 16px; width: 20px; margin: 0 2px 5px; background-repeat: no-repeat; background-position: 50% 0; text-indent:-999em; padding: 0;}
.player-container.player-wide .control-bar .volume-controls .ui-state-active {color: #333; background-position: 50% 0; background-image: url(button-volmute.gif);}
.player-container.player-wide .control-bar .volume-controls .ui-state-hover, .player-container.player-wide .control-bar .volume-controls .ui-state-focus {background-position: 50% -114px;}

.player-container.player-wide .control-bar .play {background-image: url(button-play-big.gif); left: -4.7em; position: absolute; padding: 41px 10px 0 10px; z-index: 100;}
.player-container.player-wide .control-bar button {background-position: 50% 0; padding: 18px 6px 0; height: auto; width: auto; text-indent:0; margin: 0;}
.player-container.player-wide .control-bar .ui-state-hover, .player-container.player-wide .control-bar .ui-state-focus {background-position: 50% -114px;}

/* TIMER BAR */
.player-container.player-wide .timer-bar {clear: both; padding: 7px 10px 6px 20px; position: relative; background-color: #FF9100; background-position: left bottom; margin-left: 4.5em;}
.player-container.player-wide .timer-bar .current-time, .player-container.player-wide .timer-bar .duration-time {top: 5px;}
.player-container.player-wide .timer-bar .current-time {left: 20px;}

/* SLIDER BAR */
.player-container.player-wide .control-bar .ui-slider .ui-state-hover, .ui-slider .player-container.player-wide .control-bar .ui-state-focus, .player-container .control-bar .ui-slider .ui-state-active {background: #fff url(timeline-point.gif) no-repeat 50% -107px;}