X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=library%2Fvideo-js%2Fvideo-js.css;h=4d3a1d27544011b1829473593d8abae837ed8780;hb=49ba2f9d6db545d3c5759675ce82f86edd1aa568;hp=7956aeee2829944da7c2fd2383e1271eb60fc06a;hpb=fec4581f34f9711f79e808ea410ace8c81a5b9bf;p=friendica.git

diff --git a/library/video-js/video-js.css b/library/video-js/video-js.css
index 7956aeee28..4d3a1d2754 100644
--- a/library/video-js/video-js.css
+++ b/library/video-js/video-js.css
@@ -1,6 +1,6 @@
 /*
 VideoJS Default Styles (http://videojs.com)
-Version 3.2.0
+Version GENERATED_AT_BUILD
 */
 
 /*
@@ -14,29 +14,46 @@ REQUIRED STYLES (be careful overriding)
    Otherwise you risk messing up control positioning and full window mode. **
 */
 .video-js {
-  background-color: #000; position: relative; padding: 0;
-
+  background-color: #000;
+  position: relative;
+  padding: 0;
   /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
   font-size: 10px;
-
   /* Allow poster to be vertially aligned. */
   vertical-align: middle;
   /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
 }
 
-/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
-.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+/* Playback technology elements expand to the width/height of the containing div.
+    <video> or <object> */
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 
 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
 .video-js:-moz-full-screen { position: absolute; }
 
 /* Fullscreen Styles */
 body.vjs-full-window {
-  padding: 0; margin: 0;
-  height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
 }
 .video-js.vjs-fullscreen {
-  position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100% !important;
+  height: 100% !important;
   _position: absolute; /* IE6 Full-window (underscore hack) */
 }
 .video-js:-webkit-full-screen {
@@ -45,45 +62,84 @@ body.vjs-full-window {
 
 /* Poster Styles */
 .vjs-poster {
-  margin: 0 auto; padding: 0; cursor: pointer;
-
-  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
-  position: relative; width: 100%; max-height: 100%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  cursor: pointer;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.vjs-poster img {
+  display: block;
+  margin: 0 auto;
+  max-height: 100%;
+  padding: 0;
+  width: 100%;
 }
 
 /* Text Track Styles */
 /* Overall track holder for both captions and subtitles */
-.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+.video-js .vjs-text-track-display {
+  text-align: center;
+  position: absolute;
+  bottom: 4em;
+  left: 1em; /* Leave padding on left and right */
+  right: 1em;
+  font-family: Arial, sans-serif;
+}
 /* Individual tracks */
 .video-js .vjs-text-track {
-  display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
-  /* Transparent black background, or fallback to all black (IE6) */
+  display: none;
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (oldIE) */
   background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
 }
-.video-js .vjs-subtitles { color: #fff; }
-.video-js .vjs-captions { color: #fc6; }
+.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
+.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
 .vjs-tt-cue { display: block; }
 
 /* Fading sytles, used to fade control bar. */
 .vjs-fade-in {
-  visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
-  opacity: 1 !important;
-
-  -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
-  -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
-  -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
-  -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
-  transition: visibility 0s linear 0s, opacity 0.3s linear;
+  display: block !important;
+  visibility: visible; /* Needed to make sure things hide in older browsers too. */
+  opacity: 1;
+
+  -webkit-transition: visibility 0.1s, opacity 0.1s;
+     -moz-transition: visibility 0.1s, opacity 0.1s;
+      -ms-transition: visibility 0.1s, opacity 0.1s;
+       -o-transition: visibility 0.1s, opacity 0.1s;
+          transition: visibility 0.1s, opacity 0.1s;
 }
 .vjs-fade-out {
-  visibility: hidden !important;
-  opacity: 0 !important;
+  display: block !important;
+  visibility: hidden;
+  opacity: 0;
 
-  -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-  -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-  -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-  -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-  transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -webkit-transition: visibility 1.5s, opacity 1.5s;
+     -moz-transition: visibility 1.5s, opacity 1.5s;
+      -ms-transition: visibility 1.5s, opacity 1.5s;
+       -o-transition: visibility 1.5s, opacity 1.5s;
+          transition: visibility 1.5s, opacity 1.5s;
+
+  /* Wait a moment before fading out the control bar */
+  -webkit-transition-delay: 2s;
+     -moz-transition-delay: 2s;
+      -ms-transition-delay: 2s;
+       -o-transition-delay: 2s;
+          transition-delay: 2s;
+}
+/* Hide disabled or unsupported controls */
+.vjs-default-skin .vjs-hidden { display: none; }
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible;
 }
 
 /* DEFAULT SKIN (override in another file to create new skins)
@@ -91,409 +147,584 @@ body.vjs-full-window {
 Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
 so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
 
-/* The default control bar. Created by bar.js */
-.vjs-default-skin .vjs-controls {
+/* Base UI Component Classes
+-------------------------------------------------------------------------------- */
+@font-face{
+  font-family: 'VideoJS';
+  src: url('font/vjs.eot');
+  src: url('font/vjs.eot') format('embedded-opentype'),
+  url('font/vjs.woff') format('woff'),
+  url('font/vjs.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.vjs-default-skin {
+  color: #ccc;
+}
+
+/* Slider - used for Volume bar and Seek bar */
+.vjs-default-skin .vjs-slider {
+  outline: 0; /* Replace browser focus hightlight with handle highlight */
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+
+  background: rgb(50, 50, 50); /* IE8- Fallback */
+  background: rgba(100, 100, 100, 0.5);
+}
+
+.vjs-default-skin .vjs-slider:focus {
+  background: rgb(70, 70, 70); /* IE8- Fallback */
+  background: rgba(100, 100, 100, 0.70);
+
+  -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
+     -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
+          box-shadow: 0 0 2em rgba(255, 255, 255, 1);
+}
+
+.vjs-default-skin .vjs-slider-handle {
   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: 2.6em; /* Including any margin you want above or below control items */
-  color: #fff; border-top: 1px solid #404040;
-
-  /* CSS Gradient */
-  /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
-  background: #242424; /* Old browsers */
-  background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
-  /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
-  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
-  background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
-
-  /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
-  /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
-  visibility: hidden;
-  opacity: 0;
+  /* Needed for IE6 */
+  left: 0;
+  top: 0;
+}
+
+.vjs-default-skin .vjs-slider-handle:before {
+  /*content: "\f111";*/ /* Circle icon = f111 */
+  content: "\e009"; /* Square icon */
+  font-family: VideoJS;
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+  text-shadow: 0em 0em 1em #fff;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  /* Rotate the square icon to make a diamond */
+  -webkit-transform: rotate(-45deg);
+     -moz-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+       -o-transform: rotate(-45deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+
+/* Control Bar
+-------------------------------------------------------------------------------- */
+/* The default control bar. Created by controls.js */
+.vjs-default-skin .vjs-control-bar {
+  display: none; /* Start hidden */
+  position: absolute;
+  /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+  bottom: 0;
+  /* 100% width of player div */
+  left: 0;
+  right: 0;
+  /* Controls are absolutely position, so no padding necessary */
+  padding: 0;
+  margin: 0;
+  /* Height includes any margin you want above or below control items */
+  height: 3.0em;
+  background-color: rgb(0, 0, 0);
+  /* Slight blue so it can be seen more easily on black. */
+  background-color: rgba(7, 40, 50, 0.7);
+  /* Default font settings */
+  font-style: normal;
+  font-weight: normal;
+  font-family: Arial, sans-serif;
 }
 
 /* General styles for individual controls. */
 .vjs-default-skin .vjs-control {
-  position: relative; float: left;
-  text-align: center; margin: 0; padding: 0;
-  height: 2.6em; width: 2.6em;
+  outline: none;
+  position: relative;
+  float: left;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 3.0em;
+  width: 4em;
 }
 
-.vjs-default-skin .vjs-control:focus {
-  outline: 0;
-/*  background-color: #555;*/
+/* FontAwsome button icons */
+.vjs-default-skin .vjs-control:before {
+  font-family: VideoJS;
+  font-size: 1.5em;
+  line-height: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
 }
 
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-control:focus:before,
+.vjs-default-skin .vjs-control:hover:before {
+  text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
+}
+
+.vjs-default-skin .vjs-control:focus { /*  outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }
+
 /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
 .vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
 
-
 /* Play/Pause
 -------------------------------------------------------------------------------- */
-.vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
-/* Play Icon */
-.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
-.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; }
+.vjs-default-skin .vjs-play-control {
+  width: 5em;
+  cursor: pointer;
+}
+.vjs-default-skin .vjs-play-control:before {
+  content: "\e001"; /* Play Icon */
+}
+.vjs-default-skin.vjs-playing .vjs-play-control:before {
+  content: "\e002"; /* Pause Icon */
+}
 
 /* Rewind
 -------------------------------------------------------------------------------- */
-.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
+/*.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
 .vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
+*/
 
 /* Volume/Mute
 -------------------------------------------------------------------------------- */
-.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
-.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
-.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
-.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
-.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
-
+.vjs-default-skin .vjs-mute-control,
+.vjs-default-skin .vjs-volume-menu-button {
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-mute-control:before,
+.vjs-default-skin .vjs-volume-menu-button:before {
+  content: "\e006"; /* Full volume */
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
+  content: "\e003"; /* No volume */
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
+  content: "\e004"; /* Half volume */
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
+  content: "\e005"; /* Full volume */
+}
 
-.vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
+.vjs-default-skin .vjs-volume-control {
+  width: 5em;
+  float: right;
+}
 .vjs-default-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;
+  width: 5em;
+  height: 0.6em;
+  margin: 1.1em auto 0;
+}
 
-  background: #666;
-  background: -moz-linear-gradient(top, #333, #666);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
-  background: -webkit-linear-gradient(top, #333, #666);
-  background: -o-linear-gradient(top, #333, #666);
-  background: -ms-linear-gradient(top, #333, #666);
-  background: linear-gradient(top, #333, #666);
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
+  height: 2.9em;
 }
+
 .vjs-default-skin .vjs-volume-level {
-  position: absolute; top: 0; left: 0; height: 0.6em;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0.5em;
 
-  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+  background: #66A8CC
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
+    -50% 0 repeat;
+}
+.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
+  width: 0.5em;
+  height: 0.5em;
+}
 
-  background: #fff;
-  background: -moz-linear-gradient(top, #fff, #ccc);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
-  background: -webkit-linear-gradient(top, #fff, #ccc);
-  background: -o-linear-gradient(top, #fff, #ccc);
-  background: -ms-linear-gradient(top, #fff, #ccc);
-  background: linear-gradient(top, #fff, #ccc);
+.vjs-default-skin .vjs-volume-handle:before {
+  font-size: 0.9em;
+  top: -0.2em;
+  left: -0.2em;
+
+  width: 1em;
+  height: 1em;
 }
-.vjs-default-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;
+
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+  width: 6em;
+  left: -4em;
 }
 
+/*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
+  height: 1.5em;
+}*/
+
 /* Progress
 -------------------------------------------------------------------------------- */
-.vjs-default-skin div.vjs-progress-control {
+.vjs-default-skin .vjs-progress-control {
   position: absolute;
-  left: 4.8em; right: 4.8em; /* Leave room for time displays. */
-  height: 1.0em; width: auto;
-  top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
-  border-bottom: 1px solid #1F1F1F;
-  border-top: 1px solid #222;
-
-  /* CSS Gradient */
-  background: #333;
-  background: -moz-linear-gradient(top, #222, #333);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
-  background: -webkit-linear-gradient(top, #222, #333);
-  background: -o-linear-gradient(top, #333, #222);
-  background: -ms-linear-gradient(top, #333, #222);
-  background: linear-gradient(top, #333, #222);
+  left: 0;
+  right: 0;
+  width: auto;
+  font-size: 0.3em;
+  height: 1em;
+  /* Set above the rest of the controls. */
+  top: -1em;
+
+  /* Shrink the bar slower than it grows. */
+  -webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
+     -moz-transition: top 0.4s, height 0.4s, font-size 0.4s,    -moz-transform 0.4s;
+       -o-transition: top 0.4s, height 0.4s, font-size 0.4s,      -o-transform 0.4s;
+          transition: top 0.4s, height 0.4s, font-size 0.4s,         transform 0.4s;
 
+}
 
-  /* 1px top shadow */
-/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
+/* On hover, make the progress bar grow to something that's more clickable.
+    This simply changes the overall font for the progress bar, and this
+    updates both the em-based widths and heights, as wells as the icon font */
+.vjs-default-skin:hover .vjs-progress-control {
+  font-size: .9em;
+
+  /* Even though we're not changing the top/height, we need to include them in
+      the transition so they're handled correctly. */
+  -webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
+     -moz-transition: top 0.2s, height 0.2s, font-size 0.2s,    -moz-transform 0.2s;
+       -o-transition: top 0.2s, height 0.2s, font-size 0.2s,      -o-transform 0.2s;
+          transition: top 0.2s, height 0.2s, font-size 0.2s,         transform 0.2s;
 }
 
 /* Box containing play and load progresses. Also acts as seek scrubber. */
 .vjs-default-skin .vjs-progress-holder {
-  position: relative; cursor: pointer !important; /*overflow: hidden;*/
-  padding: 0; margin: 0; /* Placement within the progress control item */
-  height: 1.0em;
-  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
-
-  /* CSS Gradient */
-  background: #111;
-  background: -moz-linear-gradient(top, #111, #262626);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
-  background: -webkit-linear-gradient(top, #111, #262626);
-  background: -o-linear-gradient(top, #111, #262626);
-  background: -ms-linear-gradient(top, #111, #262626);
-  background: linear-gradient(top, #111, #262626);
+  /* Placement within the progress control item */
+  height: 100%;
 }
-.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
-.vjs-default-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;*/
+/* Progress Bars */
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  /* Needed for IE6 */
+  left: 0;
+  top: 0;
 }
 
 .vjs-default-skin .vjs-play-progress {
-  /* CSS Gradient. */
-  background: #fff; /* Old browsers */
-  background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
-  background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
-  background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
-  background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
-  background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
-
-  background: #efefef;
-  background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
-  background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
-  background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
-  background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
-  background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  /*
+    Using a data URI to create the white diagonal lines with a transparent
+      background. Surprising works in IE8.
+      Created using http://www.patternify.com
+    Changing the first color value will change the bar color.
+    Also using a paralax effect to make the lines move backwards.
+      The -50% left position makes that happen.
+  */
+  background: #66A8CC
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
+    -50% 0 repeat;
 }
 .vjs-default-skin .vjs-load-progress {
-  opacity: 0.8;
-
-  /* CSS Gradient */
-  background: #666;
-  background: -moz-linear-gradient(top, #666, #333);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
-  background: -webkit-linear-gradient(top, #666, #333);
-  background: -o-linear-gradient(top, #666, #333);
-  background: -ms-linear-gradient(top, #666, #333);
-  background: linear-gradient(top, #666, #333);
+  background: rgb(100, 100, 100); /* IE8- Fallback */
+  background: rgba(255, 255, 255, 0.4);
 }
 
-.vjs-default-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*/
+.vjs-default-skin .vjs-seek-handle {
+  width: 1.5em;
+  height: 100%;
+}
 
-  background: url('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;
+.vjs-default-skin .vjs-seek-handle:before {
+  padding-top: 0.1em; /* Minor adjustment */
 }
+
 /* Time Display
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-time-controls {
+  font-size: 1em;
+  /* Align vertically by making the line height the same as the control bar */
+  line-height: 3em;
+}
+.vjs-default-skin .vjs-current-time { float: left; }
+.vjs-default-skin .vjs-duration { float: left; }
+/* Remaining time is in the HTML, but not included in default design */
+.vjs-default-skin .vjs-remaining-time { display: none; float: left; }
+.vjs-time-divider { float: left; line-height: 3em; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-fullscreen-control {
+  width: 3.8em;
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-fullscreen-control:before {
+  content: "\e000"; /* Enter full screen */
+}
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
+  content: "\e00b"; /* Exit full screen */
+}
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.vjs-default-skin .vjs-big-play-button {
+  display: block;
+  z-index: 2;
   position: absolute;
-  right: 0;
-  height: 1.0em; width: 4.8em;
-  top: -1.3em;
-  border-bottom: 1px solid #1F1F1F;
-  border-top: 1px solid #222;
-  background-color: #333;
+  top: 2em;
+  left: 2em;
+  width: 12.0em;
+  height: 8.0em;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
 
-  font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  background-color: rgb(40, 40, 40);
+  background-color: rgba(7, 40, 50, 0.7);
 
-  background: #333;
-  background: -moz-linear-gradient(top, #222, #333);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
-  background: -webkit-linear-gradient(top, #222, #333);
-  background: -o-linear-gradient(top, #333, #222);
-  background: -ms-linear-gradient(top, #333, #222);
-  background: linear-gradient(top, #333, #222);
+  border: 0.3em solid rgb(50, 50, 50);
+  border-color: rgba(255, 255, 255, 0.25);
 
-  /* 1px top shadow */
-/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
-}
+  -webkit-border-radius: 25px;
+     -moz-border-radius: 25px;
+          border-radius: 25px;
 
-.vjs-default-skin .vjs-current-time { left: 0; }
+  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+     -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+          box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
 
-.vjs-default-skin .vjs-duration { right: 0; display: none; }
-.vjs-default-skin .vjs-remaining-time { right: 0; }
+  -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
+     -moz-transition: border 0.4s,    -moz-box-shadow 0.4s,    -moz-transform 0.4s;
+       -o-transition: border 0.4s,      -o-box-shadow 0.4s,      -o-transform 0.4s;
+          transition: border 0.4s,         box-shadow 0.4s,         transform 0.4s;
+}
 
-.vjs-time-divider { display:none; }
+.vjs-default-skin:hover .vjs-big-play-button,
+.vjs-default-skin .vjs-big-play-button:focus {
+  outline: 0;
+  border-color: rgb(255, 255, 255);
+  border-color: rgba(255, 255, 255, 1);
+  /* IE8 needs a non-glow hover state */
+  background-color: rgb(80, 80, 80);
+  background-color: rgba(50, 50, 50, 0.75);
+
+  -webkit-box-shadow: 0 0 3em #fff;
+     -moz-box-shadow: 0 0 3em #fff;
+          box-shadow: 0 0 3em #fff;
+
+  -webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s;
+     -moz-transition: border 0s,    -moz-box-shadow 0s,    -moz-transform 0s;
+       -o-transition: border 0s,      -o-box-shadow 0s,      -o-transform 0s;
+          transition: border 0s,         box-shadow 0s,         transform 0s;
+}
 
-.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
-.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+.vjs-default-skin .vjs-big-play-button:before {
+  content: "\e001"; /* Play icon */
+  font-family: VideoJS;
+  font-size: 3em;
+  line-height: 2.66;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center; /* Needed for IE8 */
 
-/* Fullscreen
--------------------------------------------------------------------------------- */
-.vjs-secondary-controls { float: right; }
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 
-.vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
-.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
+/* Loading Spinner
+---------------------------------------------------------*/
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
 
-.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
+  font-size: 5em;
+  line-height: 1;
 
+  width: 1em;
+  height: 1em;
 
-/* Big Play Button (at start)
----------------------------------------------------------*/
-.vjs-default-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;
-  border: 0.2em solid #fff; opacity: 0.95;
-  -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
 
-  background: #454545;
-  background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
-  background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
-  background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
-  background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
-  background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  opacity: 0.75;
 
-  /* CSS Shadows */
-  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
+  -webkit-animation: spin 1.5s infinite linear;
+     -moz-animation: spin 1.5s infinite linear;
+       -o-animation: spin 1.5s infinite linear;
+          animation: spin 1.5s infinite linear;
 }
 
-.vjs-default-skin div.vjs-big-play-button:hover {
-  -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
+.vjs-default-skin .vjs-loading-spinner:before {
+  content: "\e00a"; /* Loading spinner icon */
+  font-family: VideoJS;
+
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  text-shadow: 0em 0em 0.1em #000;
 }
 
-.vjs-default-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: url('video-js.png') -100px 0;
+/* Add a gradient to the spinner by overlaying another copy.
+   Text gradient plus a text shadow doesn't work
+   and `background-clip: text` only works in Webkit. */
+.vjs-default-skin .vjs-loading-spinner:after {
+  content: "\e00a"; /* Loading spinner icon */
+  font-family: VideoJS;
+
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
-/* Loading Spinner
----------------------------------------------------------*/
-/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
-.vjs-loading-spinner {
-  display: none;
-  position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
-  margin: -28px 0 0 -28px;
-  -webkit-animation-name: rotatethis;
-  -webkit-animation-duration:1s;
-  -webkit-animation-iteration-count:infinite;
-  -webkit-animation-timing-function:linear;
-  -moz-animation-name: rotatethis;
-  -moz-animation-duration:1s;
-  -moz-animation-iteration-count:infinite;
-  -moz-animation-timing-function:linear;
-}
-
-@-webkit-keyframes rotatethis {
-  0% {-webkit-transform:scale(0.6) rotate(0deg); }
-  12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
-  12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
-  25% {-webkit-transform:scale(0.6) rotate(45deg); }
-  25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
-  37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
-  37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
-  50% {-webkit-transform:scale(0.6) rotate(135deg);}
-  50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
-  62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
-  62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
-  75% {-webkit-transform:scale(0.6) rotate(225deg);}
-  75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
-  87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
-  87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
-  100% {-webkit-transform:scale(0.6) rotate(315deg);}
-}
-
-@-moz-keyframes rotatethis {
-  0% {-moz-transform:scale(0.6) rotate(0deg);}
-  12.5% {-moz-transform:scale(0.6) rotate(0deg);}
-  12.51% {-moz-transform:scale(0.6) rotate(45deg);}
-  25% {-moz-transform:scale(0.6) rotate(45deg);}
-  25.01% {-moz-transform:scale(0.6) rotate(90deg);}
-  37.5% {-moz-transform:scale(0.6) rotate(90deg);}
-  37.51% {-moz-transform:scale(0.6) rotate(135deg);}
-  50% {-moz-transform:scale(0.6) rotate(135deg);}
-  50.01% {-moz-transform:scale(0.6) rotate(180deg);}
-  62.5% {-moz-transform:scale(0.6) rotate(180deg);}
-  62.51% {-moz-transform:scale(0.6) rotate(225deg);}
-  75% {-moz-transform:scale(0.6) rotate(225deg);}
-  75.01% {-moz-transform:scale(0.6) rotate(270deg);}
-  87.5% {-moz-transform:scale(0.6) rotate(270deg);}
-  87.51% {-moz-transform:scale(0.6) rotate(315deg);}
-  100% {-moz-transform:scale(0.6) rotate(315deg);}
-}
-/* Each circle */
-div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
-  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
-
-div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
 
 /* Menu Buttons (Captions/Subtitles/etc.)
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-menu-button {
-  float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
+  float: right;
+  cursor: pointer;
+}
 
-  border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+.vjs-default-skin .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0em; /* (Width of vjs-menu - width of button) / 2 */
+  width: 0em;
+  height: 0em;
+  margin-bottom: 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%);
+  border-left: 2em solid transparent;
+  border-right: 2em solid transparent;
+
+  border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
+  border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
 }
-/* Button Icon */
-.vjs-default-skin .vjs-menu-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
 
 /* Button Pop-up Menu */
-.vjs-default-skin .vjs-menu-button ul {
-  display: none; /* Start hidden. Hover will show. */
-  opacity: 0.8;
+.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
+  display: block;
   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;
+  position: absolute;
+  width: 10em;
+  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
+  max-height: 15em;
   overflow: auto;
+
+  left: -5em; /* Width of menu - width of button / 2 */
+
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(7, 40, 50, 0.7);
+
+  -webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
+     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
+          box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
 }
 
-.vjs-default-skin .vjs-menu-button:focus ul,
-.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
-.vjs-default-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-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
+/*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
+.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
+  display: block;
+}
+.vjs-default-skin .vjs-menu-button ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0.3em 0 0.3em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  font-weight: normal;
+  text-align: center;
+  text-transform: lowercase;
+}
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
+  background-color: #000;
+}
 .vjs-default-skin .vjs-menu-button ul li:focus,
 .vjs-default-skin .vjs-menu-button ul li:hover,
 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
-.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
-.vjs-default-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;
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
+  background-color: rgb(255, 255, 255);
+  background-color: rgba(255, 255, 255, 0.75);
+  color: #111;
+  outline: 0;
 
+  -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+          box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+}
+.vjs-default-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;
+  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-default-skin .vjs-captions-button div { background-position: -25px -75px; }
-.vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
-.vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }
+.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }
+
+/* There's unfortunately no CC button in FontAwesome, so we need
+    to manually create one. Please +1 the fontawesome request.
+    https://github.com/FortAwesome/Font-Awesome/issues/968 */
+.vjs-default-skin .vjs-captions-button {
+  font-size: 1em; /* Font icons are 1.5em */
+}
+.vjs-default-skin .vjs-captions-button:before {
+  content: "\e008";
+  font-family: VideoJS;
+  font-size: 1.5em;
+  line-height: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  text-shadow: none;
+}
+
+
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
+.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
+  -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+          box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+}