/**
 * Sandstone skin for VideoJS
 *
 * This is based on default skin from VideoJS 3.2.0, which is licensed under
 * the LGPLv3.
 *
 * This skin is updated to work with VideoJS 4.x.
 */

/* The default control bar. Created by bar.js */
.vjs-sandstone-skin .vjs-control-bar {
  position: absolute;
  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  left: 0;
  right: 0; /* 100% width of div */
  margin: 0;
  padding: 0; /* Controls are absolutely position, so no padding necessary */
  height: 3em;
  background: #323232;
  background: rgba(30,30,30,0.5);
  color: #999;
  display: none;
}

/* Images */
.vjs-sandstone-skin .vjs-loading-spinner,
.vjs-sandstone-skin.vjs-paused .vjs-play-control div,
.vjs-sandstone-skin.vjs-playing .vjs-play-control div,
.vjs-sandstone-skin .vjs-rewind-control div,
.vjs-sandstone-skin .vjs-mute-control div,
.vjs-sandstone-skin .vjs-mute-control div,
.vjs-sandstone-skin .vjs-mute-control.vjs-vol-0 div,
.vjs-sandstone-skin .vjs-mute-control.vjs-vol-1 div,
.vjs-sandstone-skin .vjs-mute-control.vjs-vol-2 div,
.vjs-sandstone-skin .vjs-fullscreen-control div,
.vjs-sandstone-skin.vjs-fullscreen .vjs-fullscreen-control div,
.vjs-sandstone-skin div.vjs-big-play-button span,
.vjs-sandstone-skin .vjs-menu-button div,
.vjs-sandstone-skin .vjs-menu-button ul li.vjs-selected {
    background-image: url("/static/js/libs/video-js/video-js-sandstone.ecdcf9e67ed8.png?2013-08-15");
}

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

.vjs-sandstone-skin .vjs-control:focus {
  outline: 1px dotted #999;
}

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

/* Icons */
.vjs-sandstone-skin .vjs-play-control div,
.vjs-sandstone-skin .vjs-rewind-control div,
.vjs-sandstone-skin .vjs-mute-control div,
.vjs-sandstone-skin .vjs-fullscreen-control div {
  margin: 0.7em auto 0;
}

/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-sandstone-skin .vjs-play-control {
  width: 3em;
  cursor: pointer !important;
}

/* Play Icon */
.vjs-sandstone-skin.vjs-paused .vjs-play-control div {
  width: 15px;
  height: 17px;
}
.vjs-sandstone-skin.vjs-playing .vjs-play-control div {
  width: 15px;
  height: 17px;
  background-position: -25px 0;
}

/* Rewind
-------------------------------------------------------------------------------- */
.vjs-sandstone-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-sandstone-skin .vjs-rewind-control div { width: 19px; height: 16px; }

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-sandstone-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-sandstone-skin .vjs-mute-control div {
  width: 22px;
  height: 16px;
  background-position: -75px -25px;
}
.vjs-sandstone-skin .vjs-mute-control.vjs-vol-0 div { background-position: 0 -25px; }
.vjs-sandstone-skin .vjs-mute-control.vjs-vol-1 div { background-position: -25px -25px; }
.vjs-sandstone-skin .vjs-mute-control.vjs-vol-2 div { background-position: -50px -25px; }


.vjs-sandstone-skin .vjs-volume-control { width: 5em; float: right; }
.vjs-sandstone-skin .vjs-volume-bar {
  position: relative;
  width: 5em;
  height: 0.6em;
  margin: 1em auto 0;
  cursor: pointer !important;
  background: #646464;
  background: rgba(255,255,255,0.6);
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
.vjs-sandstone-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.6em;

  background: #fff;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
.vjs-sandstone-skin .vjs-volume-handle {
  position: absolute;
  top: -0.2em;
  left: 0;
  width: 1.0em;
  height: 1.0em;
  background: #888;
  -webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5);
          box-shadow: 0 1px rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 0.6em;
     -moz-border-radius: 0.6em;
          border-radius: 0.6em;
}

/* Progress
-------------------------------------------------------------------------------- */
.vjs-sandstone-skin div.vjs-progress-control {
  position: absolute;
  height: 1.0em;
  width: auto;

  /* Set inline with controls. */
  top: 1em;

  /* Leave room for time displays. */
  left: 8em;
  right: 17em;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-sandstone-skin .vjs-progress-holder {
  position: relative;
  cursor: pointer !important; /*overflow: hidden;*/
  padding: 0;
  margin: 0; /* Placement within the progress control item */
  height: 0.8em;
  background: #323232;
  background: rgba(255,255,255,0.3);
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
.vjs-sandstone-skin .vjs-progress-holder .vjs-play-progress,
.vjs-sandstone-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  top: 0; /*Needed for IE6*/
  left: 0;
  height: 0.8em;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}

.vjs-sandstone-skin .vjs-play-progress {
  background: #fff;
}
.vjs-sandstone-skin .vjs-load-progress {
  opacity: 0.8;
  background: #646464;
  background: rgba(255,255,255,0.5);
}

.vjs-sandstone-skin div.vjs-seek-handle {
  position: absolute;
  margin-top: -0.3em;
  top: 0.1em;
  left: 0;
  width: 1.2em;
  height: 1.2em;
  background: #888;
  -webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5);
          box-shadow: 0 1px rgba(255,255,255,0.2) inset, 0 0 0 1px rgba(0,0,0,0.2), 0 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 0.6em;
     -moz-border-radius: 0.6em;
          border-radius: 0.6em;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-sandstone-skin .vjs-time-controls {
  position: absolute;
  width: 4.8em;
  height: 1.0em;
  top: 0;
  right: 0;
  left: 3em;

  font-size: 1em;
  line-height: 1.0em;
  font-weight: normal;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 3em;
}

.vjs-sandstone-skin .vjs-duration { right: 0; display: none; }
.vjs-sandstone-skin .vjs-remaining-time {
  right: 12em;
  left: auto;
}

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

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

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

.vjs-sandstone-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-sandstone-skin .vjs-fullscreen-control div {
  width: 16px;
  height: 16px;
  background-position: -50px 0;
}
.vjs-sandstone-skin.vjs-fullscreen .vjs-fullscreen-control div {
  background-position: -75px 0;
}


/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-sandstone-skin .vjs-big-play-button {
  display: block; /* Start hidden */
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.0em;
  height: 8.0em;
  margin: -42px 0 0 -42px;
  text-align: center;
  vertical-align: center;
  cursor: pointer !important;
  opacity: 0.95;

  -webkit-box-shadow: 4px 4px 8px #000;
     -moz-box-shadow: 4px 4px 8px #000;
          box-shadow: 4px 4px 8px #000;

  background: #323232;
  background: rgba(30,30,30,0.5);
  -webkit-border-radius: 8em;
     -moz-border-radius: 8em;
          border-radius: 8em;
  filter: none; /* Turn off opacity in IE */
}

.vjs-sandstone-skin div.vjs-big-play-button span {
  position: absolute; top: 50%; left: 50%;
  display: block; width: 35px; height: 42px;
  margin: -20px 0 0 -15px; /* Using negative margin to center image. */
  background-position: -100px 0;
}

/* Loading Spinner
---------------------------------------------------------*/
.vjs-sandstone-skin .vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 55px;
  margin: -28px 0 0 -28px;
  background-position: -137px 0;
  background-repeat: no-repeat;
  opacity: 1;
}

/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-sandstone-skin .vjs-menu-button {
  float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;

  border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #4d4d4d;
  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Button Icon */
.vjs-sandstone-skin .vjs-menu-button div {
  background-position: 0px -75px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  margin: 0.2em auto 0;
  padding: 0;
}

/* Button Pop-up Menu */
.vjs-sandstone-skin .vjs-menu-button ul {
  display: none; /* Start hidden. Hover will show. */
  opacity: 0.8;
  padding: 0; margin: 0;
  position: absolute; width: 10em; bottom: 2em; max-height: 15em;
  left: -3.5em; /* Width of menu - width of button / 2 */
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
  overflow: auto;
}

.vjs-sandstone-skin .vjs-menu-button:focus ul,
.vjs-sandstone-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-sandstone-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.vjs-sandstone-skin .vjs-menu-button ul li.vjs-selected {
  text-decoration: underline;
  background-position: -125px -50px;
  background-repeat: no-repeat;
}
.vjs-sandstone-skin .vjs-menu-button ul li:focus,
.vjs-sandstone-skin .vjs-menu-button ul li:hover,
.vjs-sandstone-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-sandstone-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.vjs-sandstone-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;

  color: #fff; font-weight: bold;

  cursor: default;

  background: #4d4d4d;
  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}

/* Subtitles Button */
.vjs-sandstone-skin .vjs-captions-button div { background-position: -25px -75px; }
.vjs-sandstone-skin .vjs-chapters-button div { background-position: -100px -75px; }
.vjs-sandstone-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }

.vjs-moz-ended .vjs-big-play-button {
    background: none;
}

.vjs-moz-ended div.vjs-big-play-button span,
.vjs-moz-ended div.vjs-loading-spinner div {
    display: none;
}

.vjs-sandstone-share {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    position: absolute;
    border: none;
    color: #999;
    right: 20px;
    top: -60px;
    font-size: 18px;
    padding: 8px 18px;
    cursor: pointer;
    background: #323232;
    background: rgba(30, 30, 30, 0.5);
}

.vjs-sandstone-share:hover {
    background: #222;
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
}

.vjs-sandstone-share:focus {
    outline: 1px dotted #fff;
}