/* Background bar */
.video-skin {
    background: #000000;
}

.video-skin .vjs-poster {
    position: absolute;
    width: 100%;
    max-height: none;
    bottom: 0;
}

.video-skin .vjs-controls {
    bottom: -7em;
    left: 0;
    width: 46em;
    margin: 0;
    padding: 15px;
    height: 25px;
    color: #fff;
    position: absolute;
    background: url('../img/main/transparent_black_25.png');
    opacity: 1 !important;
    visibility: visible !important;
    display:block !important;
}

.video-skin.fullscreen .vjs-controls {
    bottom: 2em;
    left: 50%;
    margin: 0 auto 0 -23em;
}

/* General styles for individual controls. */
.video-skin .vjs-control {
    position: relative;
    float: left;
    text-align: center;
    margin: 0 0 0 5px;
    padding: 0;
    height: 2.6em;
    width: 2.6em;
}

.video-skin .vjs-control:focus {
    outline: 0;
    /*  background-color: #555;*/
}

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.video-skin .vjs-control-text {
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Play/Pause
 -------------------------------------------------------------------------------- */
.video-skin .vjs-play-control {
    width: 5em;
    cursor: pointer !important;
}
/* Play Icon */
.video-skin.vjs-paused .vjs-play-control div {
    width: 40px;
    height: 35px;
    background: url('../img/ui/play_icon.png');
    margin-top: -5px;
}
.video-skin.vjs-playing .vjs-play-control div {
    width: 40px;
    height: 35px;
    background: url('../img/ui/play_icon.png') -40px 0;
    margin-top: -5px;
}

/* Volume/Mute
 -------------------------------------------------------------------------------- */
.video-skin .vjs-mute-control {
    width: 3.8em;
    cursor: pointer !important;
    float: right;
}
.video-skin .vjs-mute-control div {
    width: 22px;
    height: 16px;
    background: url('../img/ui/video-js.png') -75px -25px;
    margin: 0.5em auto 0;
}
.video-skin .vjs-mute-control.vjs-vol-0 div {
    background: url('../img/ui/video-js.png') 0 -25px;
}
.video-skin .vjs-mute-control.vjs-vol-1 div {
    background: url('../img/ui/video-js.png') -25px -25px;
}
.video-skin .vjs-mute-control.vjs-vol-2 div {
    background: url('../img/ui/video-js.png') -50px -25px;
}

.video-skin .vjs-volume-control {
    width: 5em;
    float: right;
}
.video-skin .vjs-volume-bar {
    position: relative;
    width: 5em;
    height: 0.6em;
    margin: 1em auto 0;
    cursor: pointer !important;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    background: #666;
}
.video-skin .vjs-volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.6em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    background: #fff;
}
.video-skin .vjs-volume-handle {
    position: absolute;
    top: -0.2em;
    width: 0.8em;
    height: 0.8em;
    background: #ccc;
    left: 0;
    border: 1px solid #fff;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
    border-radius: 0.6em;
}

/* Progress
 -------------------------------------------------------------------------------- */
.video-skin div.vjs-progress-control {
    top: 22px;
    position: absolute;
    left: 70px;
    right: 210px; /* Leave room for time displays. */
    height: 1.0em;
    width: auto;
    border: 1px solid #222;
    /* CSS Gradient */
    background: url('../img/main/transparent_black_25.png');
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.video-skin .vjs-progress-holder {
    position: relative;
    cursor: pointer !important; /*overflow: hidden;*/
    padding: 0;
    margin: 0; /* Placement within the progress control item */
    height: 1.0em;
    background: #111;
}
.video-skin .vjs-progress-holder .vjs-play-progress, .video-skin .vjs-progress-holder .vjs-load-progress {/* Progress Bars */
    position: absolute;
    display: block;
    height: 1.0em;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0; /*Needed for IE6*/
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
    border-radius: 0.6em;
    /*width: 0;*/
}

.video-skin .vjs-play-progress {
    /* CSS Gradient. */
    background: #fff; /* Old browsers */
    background: #efefef;
}
.video-skin .vjs-load-progress {
    opacity: 0.8;
    /* CSS Gradient */
    background: #666;
}

.video-skin div.vjs-seek-handle {
    position: absolute;
    width: 16px;
    height: 16px; /* Match img pixles */
    margin-top: -0.3em;
    left: 0;
    top: 0; /*Needed for IE6*/
    background: url('../img/ui/video-js.png') 0 -50px;
    /* CSS Curved Corners. Needed to make shadows curved. */
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    border-radius: 0.8em;
    /* CSS Shadows */
    -webkit-box-shadow: 0 2px 4px 0 #000;
    -moz-box-shadow: 0 2px 4px 0 #000;
    box-shadow: 0 2px 4px 0 #000;
}

/* Time Display
 -------------------------------------------------------------------------------- */
.video-skin .vjs-time-controls {
    position: absolute;
    height: 1.0em;
    width: 4.8em;
    top: 15px;
    right: 12em;
    font-size: 12px;
    font-weight: normal;
    background: transparent;
}

.video-skin .vjs-duration {
    display: none;
}

.video-skin .vjs-remaining-time {
    display: none;
}

.video-skin .vjs-current-time {
    display: block;
}

.vjs-time-divider {
    display: none;
}

.video-skin .vjs-time-control {
    font-size: 1em;
    line-height: 1;
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
}
.video-skin .vjs-time-control span {
    line-height: 25px; /* Centering vertically */
}

/* Fullscreen
 -------------------------------------------------------------------------------- */
.vjs-secondary-controls {
    float: right;
}

.video-skin .vjs-fullscreen-control {
    width: 3.8em;
    cursor: pointer !important;
    float: right;
}
.video-skin .vjs-fullscreen-control div {
    width: 16px;
    height: 16px;
    background: url('../img/ui/video-js.png') -50px 0;
    margin: 0.5em auto 0;
}

.video-skin.vjs-fullscreen .vjs-fullscreen-control div {
    background: url('../img/ui/video-js.png') -75px 0;
}

/* Big Play Button (at start)
 ---------------------------------------------------------*/
.video-skin div.vjs-big-play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px; /* Using negative margin to center image. */
    background: url('../img/ui/play.png') top;
    z-index:1000;
    cursor:pointer;
}

.video-skin div.vjs-big-play-button:hover {
    background: url('../img/ui/play.png') bottom;
}

/* Loading spinner */
.vjs-loading-spinner {
    display: none;
    visibility: hidden;
    opacity: 0;
}