videojs_rails 0.0.1 → 4.1.0

data/vendor/assets/stylesheets/video-js.css.erb

@@ -0,0 +1,726 @@
+/*!
+Video.js Default Styles (http://videojs.com)
+Version 4.1.0
+*/
+
+/*
+REQUIRED STYLES (be careful overriding)
+================================================================================ */
+/* When loading the player, the video tag is replaced with a DIV,
+   that will hold the video tag or object tag for other playback methods.
+   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
+
+   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
+   Otherwise you risk messing up control positioning and full window mode. **
+*/
+.video-js {
+  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.*/
+
+  /* Turn off user selection (text highlighting) by default.
+     The majority of player components will not be text blocks.
+     Text areas will need to turn user selection back on. */
+  -webkit-user-select: none;  /* Chrome all / Safari all */
+  -moz-user-select: none;     /* Firefox all */
+  -ms-user-select: none;      /* IE 10+ */
+  -o-user-select: none;
+  user-select: none;
+}
+
+/* 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 */
+}
+.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: absolute; /* IE6 Full-window (underscore hack) */
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important; height: 100% !important;
+}
+
+/* Poster Styles */
+.vjs-poster {
+  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; /* Leave padding on left and right */
+  right: 1em;
+  font-family: Arial, sans-serif;
+}
+/* Individual tracks */
+.video-js .vjs-text-track {
+  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; } /* 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 {
+  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 {
+  display: block !important;
+  visibility: hidden;
+  opacity: 0;
+
+  -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)
+================================================================================
+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. */
+
+/* Base UI Component Classes
+-------------------------------------------------------------------------------- */
+@font-face{
+  font-family: 'VideoJS';
+  src: url('<%= asset_path('vjs.eot') %>');
+  src: url('<%= asset_path('vjs.eot?#iefix') %>') format('embedded-opentype'),
+  url('<%= asset_path('vjs.woff') %>') format('woff'),
+  url('<%= asset_path('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;
+  /* 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 {
+  outline: none;
+  position: relative;
+  float: left;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 3.0em;
+  width: 4em;
+}
+
+/* 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;
+}
+.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 div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
+*/
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.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-bar {
+  width: 5em;
+  height: 0.6em;
+  margin: 1.1em auto 0;
+}
+
+.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.5em;
+
+  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;
+}
+
+.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-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 .vjs-progress-control {
+  position: absolute;
+  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;
+
+}
+
+/* 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 {
+  /* Placement within the progress control item */
+  height: 100%;
+}
+
+/* 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 {
+  /*
+    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 {
+  background: rgb(100, 100, 100); /* IE8- Fallback */
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.vjs-default-skin .vjs-seek-handle {
+  width: 1.5em;
+  height: 100%;
+}
+
+.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;
+  top: 2em;
+  left: 2em;
+  width: 12.0em;
+  height: 8.0em;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+
+  /* 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);
+
+  border: 0.3em solid rgb(50, 50, 50);
+  border-color: rgba(255, 255, 255, 0.25);
+
+  -webkit-border-radius: 25px;
+     -moz-border-radius: 25px;
+          border-radius: 25px;
+
+  -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);
+
+  -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-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-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 */
+
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Loading Spinner
+---------------------------------------------------------*/
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  font-size: 5em;
+  line-height: 1;
+
+  width: 1em;
+  height: 1em;
+
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+
+  opacity: 0.75;
+
+  -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 .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;
+}
+
+/* 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;
+}
+
+@-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;
+  cursor: pointer;
+}
+
+.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;
+
+  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 Pop-up Menu */
+.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0; margin: 0;
+  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,*/ /* 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: 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;
+}
+
+/* Subtitles Button */
+.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }
+
+/* There's unfortunately no CC button in FontAwesome, so we need
+    to use another font. Please +1 the fontawesome request.
+    https://github.com/FortAwesome/Font-Awesome/issues/968 */
+.vjs-default-skin .vjs-captions-button:before {
+  content: "\e008";
+}
+
+
+/* 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);
+}