/* Nomensa site styles
-----------------------*/
body {
    background-color: #fff;
    margin:  0;
    padding: 0; 
    font: 80% Helvetica, Arial, sans-serif; 
    color: #000;
    }
    

/* RESET
---------------*/

.player-container {font-family:Arial, Verdana, sans-serif; margin:0 0 10px 0; min-width: 490px;}

.player-container div, .player-container span, .player-container object {margin: 0; padding: 0;}


/* PLAYER CONTAINER 
--------------------*/
.player-container {background: #fff; font-size: 90%;}
.player-container .player-container .video {background: #000;}


/* CONTROL BAR
---------------*/
.player-container .control-bar {height: 1%; background: #ccc url(../images/bg.gif) top center no-repeat; padding-top: 10px; position: relative; border-width: 1px; border-style: solid; border-color: #fafafa #cdcdcd #9f9f9f #cdcdcd;}

.player-container .ui-state-default {background: none; border: none; color: #333;}

.player-container .control-bar a {text-indent: -9999em; background: url(../images/nomensa-logo.gif) no-repeat 0 0; display: block; width: 89px; height: 26px; margin: 5px 10px; float: left;}

.player-container .control-bar a:hover, .player-container .control-bar a:focus, .player-container .control-bar a:active {background-position: -90px 0;}

.player-container .functional-controls {margin: 0; width: auto; position: absolute; left: 50%; margin-left: -150px;}
.player-container .volume-controls {width: 130px; float: right; height: 1%;}

.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: Arial, verdana, sans-serif; cursor: pointer; color: #333; font-size: 1.1em; padding-top: 15px; background-repeat: no-repeat; background-position: 50% 0;}

.player-container .stop {background-image: url(../images/button-restart.gif);}
.player-container .rewind {background-image: url(../images/button-rewind.gif);}
.player-container .play {background-image: url(../images/button-play.gif);}
.player-container .pause {background-image: url(../images/button-pause.gif);}
.player-container .forward {background-image: url(../images/button-forward.gif);}
.player-container .mute {background-image: url(../images/button-volon.gif);}
.player-container .vol-down {background-image: url(../images/button-voldown.gif);}
.player-container .vol-up {background-image: url(../images/button-volup.gif);}

.player-container .control-bar button:hover, .player-container .control-bar button:focus, .player-container .ui-state-hover {background-position: 50% -112px;}
.player-container .control-bar .ui-state-active {background-position: 50% -112px; color: #777;}

.player-container .volume-controls .vol-up, .player-container .volume-controls .vol-down {width: 30px;}

.player-container .control-bar .volume-controls .ui-state-active {color: #333; background-position: 50% 0; background-image: url(../images/button-volmute.gif);}

.player-container .control-bar .volume-controls .ui-state-active:hover, .player-container .control-bar .volume-controls .ui-state-active:focus {background-position: 50% -112px;}


/* TIMER BAR
--------------*/

.player-container .timer-bar {clear: both; padding: 10px; position: relative;}

.player-container .timer-bar .current-time, .player-container .timer-bar .duration-time {position: absolute; top: 10px;}

.player-container .timer-bar .current-time {left: 10px;}
.player-container .timer-bar .duration-time {right: 10px;}

.player-container .timer-bar .ui-slider {margin: 0 4.5em; border-width: 1px; border-style: solid; border-color: #c0c0c0 #bebebe; background: #fff url(../images/timeline-bg.gif) repeat-x top left;}


/* SLIDER BAR
--------------*/

.player-container .control-bar .ui-slider-handle {border: none; background: url(../images/timeline-point.gif) no-repeat 0 0; height: 0.77em; top: 0; width: 0.77em; z-index: 3; margin: 0 0 0 -0.6em; font-size: 1em; position: absolute;}

.player-container .control-bar .ui-slider-handle:hover, .player-container .control-bar .ui-slider-handle:focus, .player-container .control-bar .ui-slider-handle:active {background: url(../images/timeline-point.gif) no-repeat 0 0;}

.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: url(../images/timeline-played.gif) repeat-x 0 0; z-index: 2;}
.player-container .timer-bar .loaded-bar {background: url(../images/timeline-loaded.gif) repeat-x 0 0; z-index: 0;}