sufia 3.6.1 → 3.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b53a899aa9c270ada0aab595ca8da81fc10d7325
-  data.tar.gz: 2acd0577db3a932cc963588569d7bde1e96a8bb5
+  metadata.gz: cd1c1d869e175044e6997471f0e6c3dcf2e89cbc
+  data.tar.gz: 8020119fe464f600fc9d645d543ded8f053da959
 SHA512:
-  metadata.gz: a85c16093df9b3a1baded8276f9bdd8f38f93c45c448c36658cba440fc4d5527c0b7fa031a0a8f78d01c89cd73deb2930df1be6eaa36721b949233f3c8339be0
-  data.tar.gz: 81ef3a1faa2ceba2551cf4039ae9fffc8a87e78b853fc8eeb250ffac73579f15d75edf6f62b829b08a936ee9bc3403d4f63108c72edd16d9c4f058330e490c90
+  metadata.gz: 051e1e361d4cf1403c1ad55619403efab4dae5a5c72d1d427034c1124a3f07ebebd9c2473c12c8f341b0464c8f1f603e87accb2bc8bfacac3dfd344c650a873c
+  data.tar.gz: df859a53507cff81e851d5f318990f7cc69f5db67fa70de01cbca865138c665b31f7ff5124915d9d6cd26d4da7679ecfd18f07791199fd41183476f7c74a4998

data/.travis.yml

@@ -1,10 +1,7 @@
 language: ruby
-before_install:
-  - sudo apt-get install libclamav-dev clamav-data clamav-daemon
-  - sudo freshclam -v
 rvm:
+  - "2.1.0"
   - "2.0.0"
-  - "2.1.0-preview2"
 env:
   global:
   - NOKOGIRI_USE_SYSTEM_LIBRARIES=true

data/Gemfile

@@ -8,9 +8,6 @@ gem 'kaminari', github: 'harai/kaminari', branch: 'route_prefix_prototype'
 gem 'sufia-models', path: './sufia-models'
 
 group :development, :test do
-  gem 'devise'
-#  gem 'byebug'
-  gem 'clamav'
   gem 'sqlite3'
   gem 'rspec-rails'
   gem 'launchy' unless ENV['TRAVIS']

data/History.md

@@ -1,4 +1,33 @@
 # History of Sufia releases
+## 3.7.0
+
+* The UsersController needs to set @trophies to a list of GenericFiles [Justin Coyne]
+* Removed patches for rails 3	 [Justin Coyne]
+* Short-circuit freshclam for a faster build	 [Michael J. Giarlo]
+* Use blacklight 4.5 methods for accessing the search_session. Fixes #296	  [Justin Coyne]
+* Test with ruby 2.1.0 final release	  [Justin Coyne]
+* Simplify tests for GenericFile#related_files	  [Justin Coyne]
+* Remove duplicate includes. Fixes #289	  [Justin Coyne]
+* Remove non-functioning rake tasks …	  [Justin Coyne]
+* Better documentation for GenericFile#related_files [ci skip]	[Justin Coyne]
+* Linked in handle seems to have been missed in the permitted attibiute… …	[Carolyn Cole]
+* Updated: - Don't need to exlicity add 'jettywrapper' to Gemfile b/c added by hydra:head generator (called by sufia generator)
+           - Don't need to remove public/index.html (Rails 4 presumably)
+           - Run `rake jetty:clean` instead of hydra:jetty generator -- does the same thing
+           - Added note that fits can be installed with homebrew (and may require adding a symlink)
+           	 [David Chandek-Stark]
+* Upgrade blacklight to 4.6	  [Justin Coyne]
+* Allowing the link to either be sufia based or blacklight based	 [Carolyn Cole]
+* Removing extra_head_content, and paginate deprication warnings	 [Carolyn Cole]
+* Remove deprecated method paginate_rsolr_response. Fixes #312	 [Justin Coyne]
+* Moving single use link java script into asset pipeline.	 [Carolyn Cole]
+* Update to blacklight 4.7	 [Justin Coyne]
+* Modifying how zclip works when a flash player is not present, since t… …	 [Carolyn Cole]
+* Upgrading video.js to the latest version so it will work in firefox, … …	 [Carolyn Cole]
+* Removing hard coded asset paths, which do not work in production. Whi… …	 [Carolyn Cole]
+* Fixing audiojs to only display if audio is not supported by the brows… …	 [Carolyn Cole]
+
+## 3.6.0
 
 ## 3.4.0
 * Handle facets with 3 or more words [Jeremy Friesen]

data/README.md

@@ -42,7 +42,6 @@ Sufia has the following features:
 ```
 gem 'sufia'
 gem 'kaminari', github: 'harai/kaminari', branch: 'route_prefix_prototype'  # required to handle pagination properly in dashboard. See https://github.com/amatsuda/kaminari/pull/322
-gem 'jettywrapper'
 gem 'font-awesome-sass-rails'
 ```
 Then `bundle install`
@@ -52,7 +51,6 @@ Note the line with kaminari listed as a dependency.  This is a temporary fix to
 ### Run the sufia generator
 ```
 rails g sufia -f
-rm public/index.html
 ```
 
 ### Run the migrations
@@ -63,7 +61,7 @@ rake db:migrate
 
 ### Get a copy of hydra-jetty
 ```
-rails g hydra:jetty
+rake jetty:clean
 rake jetty:config
 rake jetty:start
 ```
@@ -95,7 +93,7 @@ Add this line:
 Turbolinks does not mix well with Blacklight.
 
 ### Install Fits.sh
-1. Go to http://code.google.com/p/fits/downloads/list and download a copy of fits & unpack it somewhere on your Machine.
+1. Go to http://code.google.com/p/fits/downloads/list and download a copy of fits & unpack it somewhere on your machine.  You can also install fits on OSX with homebrew `brew install fits` (you may also have to create a symlink from `fits.sh -> fits` in the next step).
 1. Give your system access to fits
     1. By adding the path to fits.sh to your excutable PATH. (ex. in your .bashrc)
         * OR

data/SUFIA_VERSION

@@ -1 +1 @@
-3.6.1
+3.7.0

data/app/assets/javascripts/sufia.js

@@ -44,6 +44,8 @@ limitations under the License.
 //= require sufia/batch_select_all
 //= require sufia/multiForm
 //= require sufia/edit_metadata
+//= require sufia/single_use_link
+//= require sufia/audio
 //= require hydra/batch_select
 //= require hydra_collections
 
@@ -174,23 +176,3 @@ function preg_quote( str ) {
 
     return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
 }
-
-
-function initialize_audio() {
-
-  if (navigator.userAgent.match("Chrome")){
-      $('audio').each(function() {
-         this.controls = true;
-      });
-  }else {
-      $('audio').each(function() {
-         $(this).attr("preload","auto");
-      });
-    audiojs.events.ready(function() {
-          var as = audiojs.createAll({
-                 imageLocation: '/assets/player-graphics.gif',
-                 swfLocation: '/assets/audiojs.swf'
-          });
-    });
-  };
-}

data/app/assets/javascripts/sufia/audio.js

@@ -0,0 +1,28 @@
+function initialize_audio() {
+
+    var test_audio= document.createElement("audio") //try and create sample audio element
+    var audiosupport= (test_audio.play)? true : false
+
+    if (audiosupport){
+        $('audio').each(function() {
+            this.controls = true;
+        });
+    }else {
+        $('audio').each(function() {
+            $(this).attr("preload","auto");
+        });
+        audiojs.events.ready(function() {
+          var as = audiojs.createAll({
+                 imageLocation: '/assets/player-graphics.gif',
+                 swfLocation: '/assets/audiojs.swf'
+                 });
+
+          // remove html 5 player from veiw on firefox and safari
+          $('.audiojs').addClass('no-audio-background')
+          $('.audiojs .play-pause').addClass('hide')
+          $('.audiojs .scrubber').addClass('hide')
+          $('.audiojs .time').addClass('hide')
+
+        });
+    };
+}

data/app/assets/javascripts/sufia/single_use_link.js

@@ -0,0 +1,35 @@
+function getSingleUse(id) {
+    var rurl = window.location.protocol+"//"+window.location.host;
+    var resp = $.ajax({
+        headers: { Accept: "application/javascript" },
+        type: 'get',
+        url: rurl + "/single_use_link/generate_show/" + id.slice(10),
+        async: false
+    });
+    return rurl  + resp.responseText;
+}
+
+// short hand for $(document).ready();
+$(function() {
+    ZeroClipboard.setDefaults({ moviePath: "/assets/ZeroClipboard.swf" });
+    $.each($(".copypaste"), function(idx, item) {
+        var clip = new ZeroClipboard();
+        clip.on("dataRequested", function(client, args) {
+            clip.setText(getSingleUse(this.id));
+        })
+        clip.on("complete", function(client, args) {
+            alert("A single use link to " + args.text + " was copied to your clipboard.")
+        })
+        clip.on("noflash", function(client, args) {
+            $(item).bind('click', function(e) {
+                alert("Your single-use link (please copy): " + getSingleUse(item.id));
+            } );
+        })
+        clip.on("wrongflash", function(client, args) {
+            $(item).bind('click', function(e) {
+                alert("Your single-use link (please copy): " + getSingleUse(item.id));
+            } );
+        })
+        clip.glue($("#" + this.id))
+    })
+});

data/app/assets/stylesheets/sufia-audio-overrides.css

@@ -0,0 +1,9 @@
+
+.no-audio-background {
+    background: none;
+    box-shadow: none;
+}
+
+.span40 .audiojs audio {
+    left: 10px;
+}

data/app/assets/stylesheets/sufia.css.scss

@@ -10,7 +10,7 @@
  *= require audio-js
  *= require dashboard
  *= require jquery-ui
+ *= require sufia-audio-overrides
 */
 
 @import 'font-awesome';
-

data/app/assets/stylesheets/video-js.css

@@ -1,499 +1,766 @@
-/*
-VideoJS Default Styles (http://videojs.com)
-Version 3.2.0
+/*!
+Video.js Default Styles (http://videojs.com)
+Version 4.3.0
+Create your own skin at http://designer.videojs.com
 */
-
-/*
-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. **
+/* SKIN
+================================================================================
+The main class name for all skin-specific styles. To make your own skin,
+replace all occurances of 'vjs-default-skin' with a new name. Then add your new
+skin name to your video tag instead of the default skin.
+e.g. <video class="video-js my-skin-name">
 */
-.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.*/
-}
-
-/* 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 */
+.vjs-default-skin {
+  color: #cccccc;
 }
-.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) */
+/* Custom Icon Font
+--------------------------------------------------------------------------------
+The control icons are from a custom font. Each icon corresponds to a character
+(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
+*/
+@font-face {
+  font-family: 'VideoJS';
+  src: url('font/vjs.eot');
+  src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
 }
-.video-js:-webkit-full-screen {
-  width: 100% !important; height: 100% !important;
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+*/
+/* Slider - used for Volume bar and Seek bar */
+.vjs-default-skin .vjs-slider {
+  /* Replace browser focus hightlight with handle highlight */
+  outline: 0;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  /* background-color-with-alpha */
+  background-color: #333333;
+  background-color: rgba(51, 51, 51, 0.9);
 }
-
-/* 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%;
+.vjs-default-skin .vjs-slider:focus {
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 2em #ffffff;
+  -moz-box-shadow: 0 0 2em #ffffff;
+  box-shadow: 0 0 2em #ffffff;
 }
-
-/* 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; }
-/* 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) */
-  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
+.vjs-default-skin .vjs-slider-handle {
+  position: absolute;
+  /* Needed for IE6 */
+  left: 0;
+  top: 0;
 }
-.video-js .vjs-subtitles { color: #fff; }
-.video-js .vjs-captions { color: #fc6; }
-.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;
-}
-.vjs-fade-out {
-  visibility: hidden !important;
-  opacity: 0 !important;
-
-  -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;
+.vjs-default-skin .vjs-slider-handle:before {
+  content: "\e009";
+  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 */
+  /* transform */
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
-
-/* 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. */
-
-/* The default control bar. Created by bar.js */
-.vjs-default-skin .vjs-controls {
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.vjs-default-skin .vjs-control-bar {
+  /* Start hidden */
+  display: none;
   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. */
+  /* Place control bar at the bottom of the player box/video.
+     If you want more margin below the control bar, add more height. */
+  bottom: 0;
+  /* Use left/right to stretch to 100% width of player div */
+  left: 0;
+  right: 0;
+  /* Height includes any margin you want above or below control items */
+  height: 3.0em;
+  /* background-color-with-alpha */
+  background-color: #07141e;
+  background-color: rgba(7, 20, 30, 0.7);
+}
+/* Show the control bar only once the video has started playing */
+.vjs-default-skin.vjs-has-started .vjs-control-bar {
+  display: block;
+  /* Visibility needed to make sure things hide in older browsers too. */
+
+  visibility: visible;
+  opacity: 1;
+  /* transition */
+  -webkit-transition: visibility 0.1s, opacity 0.1s;
+  -moz-transition: visibility 0.1s, opacity 0.1s;
+  -o-transition: visibility 0.1s, opacity 0.1s;
+  transition: visibility 0.1s, opacity 0.1s;
+}
+/* Hide the control bar when the video is playing and the user is inactive  */
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  display: block;
   visibility: hidden;
   opacity: 0;
+  /* transition */
+  -webkit-transition: visibility 1s, opacity 1s;
+  -moz-transition: visibility 1s, opacity 1s;
+  -o-transition: visibility 1s, opacity 1s;
+  transition: visibility 1s, opacity 1s;
+}
+.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
+  display: none;
+}
+.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
+  display: none;
+}
+/* IE8 is flakey with fonts, and you have to change the actual content to force
+fonts to show/hide properly.
+  - "\9" IE8 hack didn't work for this
+  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
+*/
+@media \0screen {
+  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
+    content: "";
+  }
 }
-
 /* 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 #ffffff;
+}
+.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; }
-
-
+}
+/* Hide control text visually, but have it available for screenreaders */
+.vjs-default-skin .vjs-control-text {
+  /* hide-visually */
+  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; }
-
-/* 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; }
-
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-play-control {
+  width: 5em;
+  cursor: pointer;
+}
+.vjs-default-skin .vjs-play-control:before {
+  content: "\e001";
+}
+.vjs-default-skin.vjs-playing .vjs-play-control:before {
+  content: "\e002";
+}
 /* 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-volume-control { width: 5em; float: right; }
+.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";
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
+  content: "\e003";
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
+  content: "\e004";
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
+  content: "\e005";
+}
+.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;
-
-  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);
+  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.6em;
-
-  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
-
-  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 {
-  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;
+  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;
 }
-
 /* 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);
-
-
-  /* 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);*/
+  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. */
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 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. */
+
+  /* transition */
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 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);
+  height: 100%;
 }
+/* Progress Bars */
 .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;*/
+.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. Surprisingly 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: #646464 /* 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*/
-
-  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 {
+  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 {
-  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;
-
-  font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
-
-  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);
-
-  /* 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);*/
+  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;
 }
-
-.vjs-default-skin .vjs-current-time { left: 0; }
-
-.vjs-default-skin .vjs-duration { right: 0; display: none; }
-.vjs-default-skin .vjs-remaining-time { right: 0; }
-
-.vjs-time-divider { display:none; }
-
-.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 */ }
-
 /* Fullscreen
--------------------------------------------------------------------------------- */
-.vjs-secondary-controls { float: right; }
-
-.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; }
-
-.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
-
-
-/* Big Play Button (at start)
----------------------------------------------------------*/
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-fullscreen-control {
+  width: 3.8em;
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-fullscreen-control:before {
+  content: "\e000";
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
+  content: "\e00b";
+}
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer. http://designer.videojs.com/
+*/
 .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;
-
-  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%);
-
-  /* CSS Shadows */
-  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
+  left: 0.5em;
+  top: 0.5em;
+  font-size: 3em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 4em;
+  height: 2.6em;
+  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-with-alpha */
+  background-color: #07141e;
+  background-color: rgba(7, 20, 30, 0.7);
+  border: 0.1em solid #3b4249;
+  /* border-radius */
+  -webkit-border-radius: 0.8em;
+  -moz-border-radius: 0.8em;
+  border-radius: 0.8em;
+  /* box-shadow */
+  -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);
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
 }
-
-.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;
+/* Optionally center */
+.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -2.1em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.4000000000000001em;
 }
-
-.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;
+/* Hide if controls are disabled */
+.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
+  display: none;
+}
+/* Hide when video starts playing */
+.vjs-default-skin.vjs-has-started .vjs-big-play-button {
+  display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
+  display: none;
+}
+.vjs-default-skin:hover .vjs-big-play-button,
+.vjs-default-skin .vjs-big-play-button:focus {
+  outline: 0;
+  border-color: #fff;
+  /* IE8 needs a non-glow hover state */
+  background-color: #505050;
+  background-color: rgba(50, 50, 50, 0.75);
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 3em #ffffff;
+  -moz-box-shadow: 0 0 3em #ffffff;
+  box-shadow: 0 0 3em #ffffff;
+  /* transition */
+  -webkit-transition: all 0s;
+  -moz-transition: all 0s;
+  -o-transition: all 0s;
+  transition: all 0s;
+}
+.vjs-default-skin .vjs-big-play-button:before {
+  content: "\e001";
+  font-family: VideoJS;
+  /* In order to center the play icon vertically we need to set the line height
+     to the same as the button height */
+
+  line-height: 2.6em;
+  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
----------------------------------------------------------*/
-/* 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;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 4em;
+  line-height: 1;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  opacity: 0.75;
+  /* animation */
+  -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;
 }
-
-@-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);}
+.vjs-default-skin .vjs-loading-spinner:before {
+  content: "\e01e";
+  font-family: VideoJS;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  text-shadow: 0em 0em 0.1em #000;
+}
+@-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);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
 }
-
-@-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; }
-
 /* 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;
+}
+.vjs-default-skin .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0em;
+  /* (Width of vjs-menu - width of button) / 2 */
 
-  border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+  width: 0em;
+  height: 0em;
+  margin-bottom: 3em;
+  border-left: 2em solid transparent;
+  border-right: 2em solid transparent;
+  border-top: 1.55em solid #000000;
+  /* Same width top as ul bottom */
 
-  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-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; }
+  border-top-color: rgba(7, 40, 50, 0.5);
+  /* Same as ul background */
 
+}
 /* Button Pop-up Menu */
-.vjs-default-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;
+.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-with-alpha */
+  background-color: #07141e;
+  background-color: rgba(7, 20, 30, 0.7);
+  /* box-shadow */
+  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+}
+.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;
+  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: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 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-selected:hover {
+  outline: 0;
+  color: #111;
+  /* background-color-with-alpha */
+  background-color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.75);
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 1em #ffffff;
+  -moz-box-shadow: 0 0 1em #ffffff;
+  box-shadow: 0 0 1em #ffffff;
+}
 .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;
+  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";
+}
+/* Captions Button */
+.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 {
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 1em #ffffff;
+  -moz-box-shadow: 0 0 1em #ffffff;
+  box-shadow: 0 0 1em #ffffff;
+}
+/*
+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. */
 
-  color: #fff; font-weight: bold;
+  font-size: 10px;
+  /* Allow poster to be vertially aligned. */
 
-  cursor: default;
+  vertical-align: middle;
+  /*  display: table-cell; */
+  /*This works in Safari but not Firefox.*/
 
-  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%);
-}
+  /* Provide some basic defaults for fonts */
 
-/* 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 */ }
+  font-weight: normal;
+  font-style: normal;
+  /* Avoiding helvetica: issue #376 */
+
+  font-family: Arial, sans-serif;
+  /* 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. */
+
+  /* user-select */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-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%;
+  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+  overflow-y: auto;
+}
+.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;
+  /* IE6 full-window (underscore hack) */
+  _position: absolute;
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important;
+}
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+/* 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%;
+}
+/* Hide the poster when native controls are used otherwise it covers them */
+.video-js.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.video-js .vjs-text-track-display {
+  text-align: center;
+  position: absolute;
+  bottom: 4em;
+  /* Leave padding on left and right */
+  left: 1em;
+  right: 1em;
+}
+/* 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-color-with-alpha */
+  background-color: #000000;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.video-js .vjs-subtitles {
+  color: #ffffff /* Subtitles are white */;
+}
+.video-js .vjs-captions {
+  color: #ffcc66 /* Captions are yellow */;
+}
+.vjs-tt-cue {
+  display: block;
+}
+/* Hide disabled or unsupported controls */
+.vjs-default-skin .vjs-hidden {
+  display: none;
+}
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible;
+}
+/* -----------------------------------------------------------------------------
+The original source of this file lives at
+https://github.com/videojs/video.js/blob/master/src/css/video-js.less */