From 49d54c0c3199fb8e380ce68f8fb08a308ddf56a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Eduardo?= <heckyel@hyperbola.info>
Date: Mon, 25 Dec 2017 16:58:41 -0500
Subject: =?UTF-8?q?migraci=C3=B3n=20mayor=20a=20smarty=20PHP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/librevideojs/css/teal.less | 1427 ----------------------------------------
 1 file changed, 1427 deletions(-)
 delete mode 100644 lib/librevideojs/css/teal.less

(limited to 'lib/librevideojs/css/teal.less')

diff --git a/lib/librevideojs/css/teal.less b/lib/librevideojs/css/teal.less
deleted file mode 100644
index 1cd98f7..0000000
--- a/lib/librevideojs/css/teal.less
+++ /dev/null
@@ -1,1427 +0,0 @@
-/*!
-LibreVideoJS
-Version 2.0
-Copyright 2017, Jesus E.
-*/
-
-// To customize the player skin, change the values of the variables or edit the
-// CSS below.
-// (This file uses LESS. Learn more at http://lesscss.org/)
-
-// The base font size controls the size of everything, not just text. All
-// dimensions use em-based sizes so that the scale along with the font size.
-// Try increasing it to 20px and see what happens.
-@base-font-size: 12px;
-@touch-device-font-size: 15px;
-
-// The main font color controls the color of the text and the icons (font icons)
-@main-font-color: #ffffff; // e.g. rgb(255, 255, 255) or #ffffff
-@primary-color: #1de9b6;
-@primary-dark-color: #007c5d;
-@clouds-color: #d6dbdf;
-
-// Menu - Subtitles/captions
-@text-dark-color: #0d1f2c;
-@caption-color: #ffffff; //other color #ffed00;
-
-// The default color of control backgrounds is mostly black but with a little
-// bit of blue so it can still be seen on all black video frames, which are
-// common.
-@control-bg-color: #232221; // e.g. rgb(255, 255, 255) or #ffffff
-@control-bg-alpha: 0.8; // 1.0 = 100% opacity, 0.0 = 0% opacity
-
-// The slider bar color is used for the progress bar and the volume bar
-@slider-bar-color: #66A8CC; // e.g. rgb(255, 255, 255) or #ffffff
-// The background of the progress bar and volume bar have a lined pattern that
-// is created from a base64 encoded image. You can generate your own pattern at
-// http://www.patternify.com/ then replace the value in the quotes with your own
-@slider-bar-pattern: ~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC';
-// The color of the slider background
-@slider-background-color: #333333;
-@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity
-
-// The "Big Play Button" is the play button that shows before the video plays.
-// To center it set the align values to center and middle. The typical location
-// of the button is the center, but there is trend towards moving it to a corner
-// where it gets out of the way of valuable content in the poster image.
-@big-play-align: left; // left, center, or right
-@big-play-vertical-align: top; // top, middle, or bottom
-// The button colors match the control colors by default but you can customize
-// them by replace the variables (@control-bg-color) with your own color values.
-@big-play-bg-color: @control-bg-color;
-@big-play-bg-alpha: @control-bg-alpha;
-// The font size is what makes the big play button, big. All width/height values
-// use ems, which are a multiple of the font size.
-// If the @base-font-size is 10px, then 3em equals 30px.
-@big-play-font-size: 2em;
-// Now that font size is set, the following em values will be a multiple of the
-// new font size. If @big-play-font-size is 3em (30px), then setting the any of
-// the following values to 2em would equal 60px. 2 * font-size
-@big-play-margin: 0.5em;
-//@big-play-width: 1em;
-@big-play-width: 3.8em;
-//@big-play-height: 1em;
-@big-play-height: 2.6em;
-@big-play-border-radius: 0.8em;
-@big-play-border-width: 0.1em;
-@big-play-border-color: #3b4249;
-
-/* SKIN
-================================================================================
-The main class name for all skin-specific styles. To make your own skin,
-replace all occurrences of 'vjs-flat-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">
-*/
-.librevjs-libre-mix-skin {
-  color: @main-font-color;
-}
-
-/* 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.
-*/
-@lvjs-font-path: '../fonts';
-@font-face{
-    font-family: 'LibreVideoJS';
-    src: url('@{lvjs-font-path}/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),
-         url('@{lvjs-font-path}/libre-material/libre-icons.woff') format('woff'),
-         url('@{lvjs-font-path}/libre-material/libre-icons.ttf') format('truetype'),
-         url('@{lvjs-font-path}/libre-material/libre-icons.svg#icomoon') format('svg');
-
-    font-weight: normal;
-    font-style: normal;
-}
-
-// Icon font character values
-@play-icon: "\e001";
-@pause-icon: "\e002";
-@volume-muted-icon: "\e003";
-@volume-low-icon: "\e004";
-@volume-mid-icon: "\e005";
-@volume-high-icon: "\e006";
-@play-big-icon: "\e007";
-@fullscreen-enter-icon: "\e000";
-@fullscreen-exit-icon: "\e00b";
-@square-icon: "\e009";
-@spinner-icon: "\e00a";
-@spinner2-icon: "\e00d";
-@spinner3-icon: "\e01e";
-@spinner4-icon: "\e01f";
-@subtitles-icon: "\e00c";
-@captions-icon: "\e008";
-@chapters-icon: "\e00c";
-@share-icon: "\e00e";
-@cog-icon: "\e600";
-
-/* Base UI Component Classes
---------------------------------------------------------------------------------
-*/
-
-/* Slider - used for Volume bar and Seek bar */
-.librevjs-libre-mix-skin .librevjs-slider {
-    /* Replace browser focus highlight with handle highlight *///
-    outline: 0;
-    position: relative;
-    cursor: pointer;
-    padding: 0;
-
-    .background-color-with-alpha(@slider-background-color, @slider-background-alpha);
-}
-
-.librevjs-libre-mix-skin .librevjs-slider:focus {
-    .box-shadow(0 0 2em #fff);
-}
-
-.librevjs-libre-mix-skin .librevjs-slider-handle {
-    position: absolute;
-    /* Needed for IE6 *///
-    left: 0;
-    top: 0;
-}
-
-.librevjs-libre-mix-skin .librevjs-slider-handle:before {
-    text-shadow: 0em 0em 1em #fff;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-/* Control Bar
---------------------------------------------------------------------------------
-The default control bar that is a container for most of the controls.
-*/
-.librevjs-libre-mix-skin .librevjs-control-bar {
-    /* Start hidden *///
-    display: none;
-    position: absolute;
-    /* 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(@control-bg-color, @control-bg-alpha);
-}
-
-/* Show the control bar only once the video has started playing */
-.librevjs-libre-mix-skin.librevjs-has-started .librevjs-control-bar {
-    display: block;
-    /* Visibility needed to make sure things hide in older browsers too. */
-    visibility: visible;
-    opacity: 1;
-
-    @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
-    .transition(@trans);
-}
-
-/* Hide the control bar when the video is playing and the user is inactive  */
-.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
-    display: block;
-    visibility: hidden;
-    opacity: 0;
-
-    @trans: visibility 1.0s, opacity 1.0s;
-    .transition(@trans);
-}
-
-.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-control-bar {
-    display: none;
-}
-
-.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar {
-    display: none;
-}
-
-/* The control bar shouldn't show after an error */
-.librevjs-libre-mix-skin.librevjs-error .librevjs-control-bar {
-    display: none;
-}
-
-/* Don't hide the control bar if it's audio */
-.librevjs-audio.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
-    opacity: 1;
-    visibility: visible;
-}
-
-/* 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 windows XP (Propietary Software) IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
-*/
-@ie8screen: ~"\0screen";
-.librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
-    @media @ie8screen { content: ""; }
-}
-
-/* General styles for individual controls. */
-.librevjs-libre-mix-skin .librevjs-control {
-    outline: none;
-    position: relative;
-    float: left;
-    text-align: center;
-    margin: 0;
-    padding: 0;
-    height: 3.0em;
-    width: 4em;
-}
-
-/* FreeArt button icons: http://artlibre.org/licence/lal */
-.librevjs-libre-mix-skin .librevjs-control:before {
-    font-family: LibreVideoJS;
-    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 */
-.librevjs-libre-mix-skin .librevjs-control:hover:before {
-    color: @primary-color;
-}
-
-.librevjs-libre-mix-skin .librevjs-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 */
-.librevjs-libre-mix-skin .librevjs-control-text {
-    .hide-visually;
-}
-
-/* Play/Pause
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-play-control {
-    width: 5em;
-    cursor: pointer;
-    color: @primary-color;
-}
-.librevjs-libre-mix-skin .librevjs-play-control:before {
-    content: @play-icon;
-}
-.librevjs-libre-mix-skin .librevjs-play-control:hover:before {
-    color: @primary-dark-color;
-}
-.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before {
-    content: @pause-icon;
-}
-
-/* Playback toggle
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-playback-rate .librevjs-playback-rate-value {
-    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);
-}
-
-.librevjs-libre-mix-skin .librevjs-playback-rate.librevjs-menu-button .librevjs-menu .librevjs-menu-content {
-    width: 4em;
-    left: -2em;
-    list-style: none;
-}
-
-/* Volume/Mute
--------------------------------------------------------------------------------- */
-.librevjs-libre-mix-skin .librevjs-mute-control,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button {
-    cursor: pointer;
-    float: right;
-}
-.librevjs-libre-mix-skin .librevjs-mute-control:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button:before {
-    content: @volume-high-icon;
-}
-.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
-    content: @volume-muted-icon;
-}
-.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
-    content: @volume-low-icon;
-}
-.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
-    content: @volume-mid-icon;
-}
-
-.librevjs-libre-mix-skin .librevjs-volume-control {
-    width: 5em;
-    float: right;
-}
-.librevjs-libre-mix-skin .librevjs-volume-bar {
-    width: 5em;
-    height: 0.6em;
-    margin: 1.1em auto 0;
-}
-
-.librevjs-libre-mix-skin .librevjs-volume-level {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 0.6em;
-    /* assuming volume starts at 1.0 */
-    width: 100%;
-
-    background: @primary-color;
-}
-.librevjs-libre-mix-skin .librevjs-volume-bar .librevjs-volume-handle {
-    width: 0.5em;
-    height: 0.5em;
-    /* Assumes volume starts at 1.0. If you change the size of the
-     handle relative to the volume bar, you'll need to update this value
-     too. */
-    left: 4.5em;
-}
-
-.librevjs-libre-mix-skin .librevjs-volume-handle:before {
-    font-size: 0.9em;
-    top: -0.2em;
-    left: -0.2em;
-
-    width: 1em;
-    height: 1em;
-}
-
-/* The volume menu button is like menu buttons (captions/subtitles) but works
-    a little differently. It needs to be possible to tab to the volume slider
-    without hitting space bar on the menu button. To do this we're not using
-    display:none to hide the slider menu by default, and instead setting the
-    width and height to zero. */
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu {
-    display: block;
-    width: 0;
-    height: 0;
-    border-top-color: transparent;
-}
-
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
-    height: 0;
-    width: 0;
-    transform: rotate(-90deg);
-}
-
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content {
-    margin-bottom: 3.2em;
-}
-
-/*.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing {
-  border-top-color: rgba(7, 40, 50, 0.5);
-}*/
-
-.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu .librevjs-menu-content,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing .librevjs-menu-content {
-    height: 2.9em;
-    width: 10em;
-}
-
-/* Progress
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-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. *///
-    .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 */
-.librevjs-libre-mix-skin:hover .librevjs-progress-control {
-    font-size: 1em;
-
-    /* Even though we're not changing the top/height, we need to include them in
-      the transition so they're handled correctly. */
-    .transition(all 0.2s);
-}
-
-/* Box containing play and load progresses. Also acts as seek scrubber. */
-.librevjs-libre-mix-skin .librevjs-progress-holder {
-    height: 100%;
-}
-
-/* Progress Bars */
-.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress,
-.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress,
-.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress div {
-    position: absolute;
-    display: block;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    /* updated by javascript during playback */
-    width: 0;
-    /* Needed for IE6 *///
-    left: 0;
-    top: 0;
-}
-
-.librevjs-libre-mix-skin .librevjs-play-progress {
-    /* Using a data URI to create the white diagonal lines with a transparent 
-       background. Surprisingly works in IE8.
-       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: @primary-color /* IE8- Fallback */;
-}
-.librevjs-libre-mix-skin .librevjs-load-progress {
-    background: rgb(red(@clouds-color), green(@clouds-color), blue(@clouds-color)) /* IE8- Fallback */;
-    background: rgba(red(@clouds-color), green(@clouds-color), blue(@clouds-color), 0.6);
-}
-
-/* there are child elements of the load progress bar that represent the
-   specific time ranges that have been buffered */
-.librevjs-libre-mix-skin .librevjs-load-progress div {
-    background: rgb(120, 120, 120) /* IE8- Fallback */;
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.librevjs-libre-mix-skin .librevjs-seek-handle {
-    width: 2em;
-    height: 2em;
-    border-radius: 1em;
-    top: -0.5em;
-    background-color: @primary-dark-color;
-    opacity: 0;
-    transition: opacity .4s ease-in-out;
-}
-
-/*.librevjs-libre-mix-skin .librevjs-seek-handle:before {
-  padding-top: 0.1em;
-}*/
-
-.librevjs-libre-mix-skin .librevjs-progress-control:hover .librevjs-slider-handle {
-    opacity: 1;
-    transition: opacity .4s ease-in-out;
-}
-
-/* Live Mode
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin.librevjs-live .librevjs-time-controls,
-.librevjs-libre-mix-skin.librevjs-live .librevjs-time-divider,
-.librevjs-libre-mix-skin.librevjs-live .librevjs-progress-control {
-    display: none;
-}
-.librevjs-libre-mix-skin.librevjs-live .librevjs-live-display {
-    display: block;
-}
-
-/* Live Display
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-live-display {
-    display: none;
-    font-size: 1em;
-    line-height: 3em;
-}
-
-/* Time Display
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-time-controls {
-    font-size: 1.083em;
-    font-weight: bold;
-    color: #d6dbdf;
-    /* Align vertically by making the line height the same as the control bar *///
-    line-height: 3em;
-    width: 2em;
-}
-.librevjs-libre-mix-skin .librevjs-current-time { float: left; }
-.librevjs-libre-mix-skin .librevjs-current-time-display { float: right; }
-.librevjs-libre-mix-skin .librevjs-duration,
-.librevjs-libre-mix-skin .librevjs-duration .librevjs-duration-display { float: left; }
-/* Remaining time is in the HTML, but not included in default design */
-.librevjs-libre-mix-skin .librevjs-remaining-time { display: none; float: left; }
-.librevjs-time-divider {
-    float: left;
-    line-height: 3em;
-    font-size: 1.083em;
-    font-weight: bold;
-    width: 1em;
-    text-align: center;
-}
-
-/* Fullscreen
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-fullscreen-control {
-    width: 3.8em;
-    cursor: pointer;
-    float: right;
-}
-.librevjs-libre-mix-skin .librevjs-fullscreen-control:before {
-    content: @fullscreen-enter-icon;
-}
-/* Switch to the exit icon when the player is in fullscreen */
-.librevjs-libre-mix-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
-    content: @fullscreen-exit-icon;
-}
-
-/* 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/
-*/
-.librevjs-libre-mix-skin .librevjs-big-play-button {
-    left: 50%;
-    top: 50%;
-    font-size: @big-play-font-size;
-    display: block;
-    z-index: 2;
-    position: absolute;
-    width: @big-play-width;
-    height: @big-play-height;
-    margin-left: -@big-play-width/2;
-    margin-top: -@big-play-width/2.5;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    opacity: 1;
-    color: @main-font-color;
-    //Sombras
-    .background-color-with-alpha(@slider-background-color, @slider-background-alpha);
-    @border: .4em;
-    .border-radius(@border);
-    @trans: all .4s; // Var needed because of comma
-    .transition(@trans);
-}
-
-/* Hide if controls are disabled */
-.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-big-play-button {
-    display: none;
-}
-/* Hide when video starts playing */
-.librevjs-libre-mix-skin.librevjs-has-started .librevjs-big-play-button {
-    display: none;
-}
-/* Hide on mobile devices. Remove when we stop using native controls
-    by default on mobile  */
-.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-big-play-button {
-    display: none;
-}
-
-.librevjs-libre-mix-skin:hover .librevjs-big-play-button,
-.librevjs-libre-mix-skin .librevjs-big-play-button:focus {
-    color: @main-font-color;
-    background-color: @primary-color;  
-}
-
-.librevjs-libre-mix-skin .librevjs-big-play-button:before {
-    content: @play-icon;
-    font-family: LibreVideoJS;
-    /* In order to center the play icon vertically we need to set the line height
-     to the same as the button height */
-    text-align: center /* Needed for IE8 */;
-
-    /*Shadow*/
-    text-shadow: 0.05em 0.05em 0.1em #000;
-    line-height: 2.6em;
-
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.librevjs-error .librevjs-big-play-button {
-    display: none;
-}
-
-/* Error Display
---------------------------------------------------------------------------------
-*/
-
-.librevjs-error-display {
-    display: none;
-}
-
-.librevjs-error .librevjs-error-display {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.librevjs-error .librevjs-error-display:before {
-    content: 'X';
-    font-family: Arial;
-    font-size: 4em;
-    color: #666666;
-    /* In order to center the play icon vertically we need to set the line height
-     to the same as the button height */
-    line-height: 1;
-    text-shadow: 0.05em 0.05em 0.1em #000;
-    text-align: center /* Needed for IE8 */;
-    vertical-align: middle;
-
-    position: absolute;
-    left: 0;
-    top: 50%;
-    margin-top: -0.5em;
-    width: 100%;
-}
-
-.librevjs-error-display div {
-    position: absolute;
-    bottom: 1em;
-    right: 0;
-    left: 0;
-
-    font-size: 1.4em;
-    text-align: center;
-    padding: 3px;
-    background: rgb(0, 0, 0); // fallback to just black
-    background: rgba(0,0,0,0.5); // Normally show black at 50% opacity
-}
-
-.librevjs-error-display a, .librevjs-error-display a:visited {
-    color: #F4A460;
-}
-
-/* Loading Spinner
---------------------------------------------------------------------------------
-*/
-
-.librevjs-loading-spinner {
-    /* Should be hidden by default *///
-    display: none;
-
-    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(spin 1.5s infinite linear);
-}
-
-/* Show the spinner when waiting for data and seeking to a new time */
-.librevjs-waiting .librevjs-loading-spinner,
-.librevjs-seeking .librevjs-loading-spinner {
-    display: block;
-
-    /* only animate when showing because it can be processor heavy *///
-    .animation(spin 1.5s infinite linear);
-}
-
-/* Errors are unrecoverable without user interaction so hide the spinner */
-.librevjs-error .librevjs-loading-spinner {
-    display: none;
-
-    /* ensure animation doesn't continue while hidden *///
-    .animation(none);
-}
-
-.librevjs-libre-mix-skin .librevjs-loading-spinner:before {
-    content: @spinner3-icon;
-    font-family: LibreVideoJS;
-
-    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); }
-}
-
-/* Menu Buttons (Captions/Subtitles/etc.)
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-menu-button {
-    float: right;
-    cursor: pointer;
-}
-
-.librevjs-libre-mix-skin .librevjs-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 width top as ul bottom */
-    border-top-color: rgba(0, 0, 0, 0.4); /* Same as ul background */
-}
-
-/* Color menu (captions/subtitles)*/
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected {
-    color: @text-dark-color;
-    background-color: @primary-color;
-}
-
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover {
-    outline: 0;
-    color: @primary-dark-color;
-    background-color: @primary-color;
-}
-
-/*Title Resolution | subtitles and Caption*/
-
-.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title {
-    color: @primary-color;
-    background-color: inherit;
-}
-
-.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
-    color: @primary-color;
-    background-color: inherit;
-}
-
-/* Button Pop-up Menu */
-.librevjs-libre-mix-skin .librevjs-menu-button .librevjs-menu .librevjs-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: @control-bg-color;
-    background-color: rgba(0, 0, 0, 0.4);
-    .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2));
-}
-
-/*
-.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu,
-.librevjs-libre-mix-skin .librevjs-control-content .librevjs-menu.librevjs-lock-showing
-*/
-
-.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-menu {
-    display: block;
-}
-/* prevent menus from opening while scrubbing (FF, IE) */
-.librevjs-libre-mix-skin.librevjs-scrubbing .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu {
-    display: none;
-}
-.librevjs-libre-mix-skin .librevjs-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;
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected {
-    background-color: @primary-color;
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover {
-    outline: 0;
-    color: @text-dark-color;
-    background-color: @primary-color;
-
-    /*.background-color-with-alpha(rgb(255, 255, 255), 0.75);*/
-    /*.box-shadow(0 0 1em rgba(255, 255, 255, 1));*/
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-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 */
-.librevjs-libre-mix-skin .librevjs-subtitles-button:before {
-    content: @subtitles-icon;
-}
-
-/* Captions Button */
-.librevjs-libre-mix-skin .librevjs-captions-button:before {
-    content: @captions-icon;
-}
-
-/* Chapters Button */
-.librevjs-libre-mix-skin .librevjs-chapters-button:before {
-    content: @chapters-icon;
-}
-
-.librevjs-libre-mix-skin .librevjs-chapters-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content {
-    width: 24em;
-    left: -12em;
-}
-
-/* Replacement for focus outline */
-.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before,
-.librevjs-libre-mix-skin .librevjs-captions-button:hover .librevjs-control-content:before {
-  .box-shadow(0 0 1em rgba(255, 255, 255, 1));
-}
-
-/*
-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. **
-*/
-.cliplibre-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: @base-font-size;
-    /* Allow poster to be vertically aligned. */
-    vertical-align: middle;
-    /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
-
-    /* Provide some basic defaults for fonts */
-    font-weight: normal;
-    font-style: normal;
-    /* Avoiding helvetica: issue #376 */
-    font-family: Arial, Helvetica, 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(none);
-}
-
-/* Playback technology elements expand to the width/height of the containing div
-    <video> or <object> */
-.cliplibre-js .librevjs-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. */
-.cliplibre-js:-moz-full-screen { position: absolute; }
-
-/* Fullscreen Styles */
-body.librevjs-full-window {
-    padding: 0;
-    margin: 0;
-    height: 100%;
-    /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html *///
-    overflow-y: auto;
-}
-.cliplibre-js.librevjs-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;
-}
-.cliplibre-js:-webkit-full-screen {
-    width: 100% !important;
-    height: 100% !important;
-}
-.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
-    cursor: none;
-}
-
-/* Poster Styles */
-.librevjs-poster {
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-size: contain;
-    background-color: #000000;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-.librevjs-poster img {
-    display: block;
-    margin: 0 auto;
-    max-height: 100%;
-    padding: 0;
-    width: 100%;
-}
-
-/* Hide the poster after the video has started playing */
-.cliplibre-js.librevjs-has-started .librevjs-poster {
-    display: none;
-}
-
-/* Don't hide the poster if we're playing audio */
-.cliplibre-js.librevjs-audio.librevjs-has-started .librevjs-poster {
-    display: block;
-}
-
-/* Hide the poster when controls are disabled because it's clickable
-    and the native poster can take over */
-.cliplibre-js.librevjs-controls-disabled .librevjs-poster {
-    display: none;
-}
-
-/* Hide the poster when native controls are used otherwise it covers them */
-.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
-    display: none;
-}
-
-/* Text Track Styles */
-/* Overall track holder for both captions and subtitles */
-.cliplibre-js .librevjs-text-track-display {
-    text-align: center;
-    position: absolute;
-    bottom: 4em;
-    left: 1em;
-    right: 1em;
-}
-
-.cliplibre-js .librevjs-subtitles {
-    color: #fff
-}
-
-.cliplibre-js .librevjs-captions {
-    color: @caption-color;
-    background-color: rgba(2, 7, 11, 0.7);
-}
-
-
-/* Captions Settings Dialog */
-.librevjs-caption-settings {
-    position: relative;
-    top: 1em;
-    background-color: #000;
-    opacity: 0.75;
-    color: #FFF;
-    margin: 0 auto;
-    padding: 0.5em;
-    height: 15em;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 12px;
-    width: 40em;
-}
-
-.librevjs-caption-settings .librevjs-tracksettings {
-    top: 0;
-    bottom: 2em;
-    left: 0;
-    right: 0;
-    position: absolute;
-    overflow: auto;
-}
-
-.librevjs-caption-settings .librevjs-tracksettings-colors,
-.librevjs-caption-settings .librevjs-tracksettings-font {
-    float: left;
-}
-.librevjs-caption-settings .librevjs-tracksettings-colors:after,
-.librevjs-caption-settings .librevjs-tracksettings-font:after,
-.librevjs-caption-settings .librevjs-tracksettings-controls:after {
-    clear: both;
-}
-
-.librevjs-caption-settings .librevjs-tracksettings-controls {
-    position: absolute;
-    bottom: 1em;
-    right: 1em;
-}
-
-.librevjs-caption-settings .librevjs-tracksetting {
-    margin: 5px;
-    padding: 3px;
-    min-height: 40px;
-}
-.librevjs-caption-settings .librevjs-tracksetting label {
-    display: block;
-    width: 100px;
-    margin-bottom: 5px;
-}
-
-.librevjs-caption-settings .librevjs-tracksetting span {
-    display: inline;
-    margin-left: 5px;
-}
-
-.librevjs-caption-settings .librevjs-tracksetting > div {
-    margin-bottom: 5px;
-    min-height: 20px;
-}
-
-.librevjs-caption-settings .librevjs-tracksetting > div:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    min-height: 0;
-}
-
-.librevjs-caption-settings label > input {
-    margin-right: 10px;
-}
-
-.librevjs-caption-settings input[type="button"] {
-    width: 40px;
-    height: 40px;
-}
-
-/* Hide disabled or unsupported controls */
-.librevjs-hidden { display: none !important; }
-
-.librevjs-lock-showing {
-    display: block !important;
-    opacity: 1;
-    visibility: visible;
-}
-
-/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
-    The .cliplibre-js classname on the video tag also isn't considered.
-    This optional paragraph inside the video tag can provide a message to users
-    about what's required to play video. */
-.librevjs-no-js {
-    padding: 2em;
-    color: #ccc;
-    background-color: #333;
-    font-size: 1.8em;
-    font-family: Arial, sans-serif;
-    text-align: center;
-    width: 30em;
-    height: 15em;
-    margin: 0 auto;
-}
-
-.librevjs-no-js a, .librevjs-no-js a:visited {
-    color: #F4A460;
-}
-
-/*Responsive web desing 
-  The dates are calculates for display
-*/
-
-.cliplibre-js-responsive-container.librevjs-hd {
-    padding-top: 56.25%;
-}
-
-.cliplibre-js-responsive-container.librevjs-sd {
-    padding-top: 75%;
-}
-
-.cliplibre-js-responsive-container {
-    width: 100%;
-    position: relative;
-}
-
-.cliplibre-js-responsive-container .cliplibre-js {
-    height: 100% !important;
-    width: 100% !important;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-@media screen and (max-width: 800px) {
-    .cliplibre-js .librevjs-text-track {
-        font-size: 1.5em;
-        margin-bottom: -0.2em;
-        line-height: 1.5;
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .cliplibre-js .librevjs-text-track {
-        font-size: 1.2em;
-    }
-    .cliplibre-js .librevjs-text-track-display {
-        bottom: 2em;
-    }
-}
-
-@media screen and (max-width: 413px) {
-    .cliplibre-js {
-        font-size: 8px;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .cliplibre-js .librevjs-text-track {
-        font-size: 1em;
-    }
-    .librevjs-libre-mix-skin .librevjs-big-play-button {
-        font-size: 2em;
-    }
-    .cliplibre-js .librevjs-text-track-display {
-        bottom: 1em;
-    }
-}
-
-@media screen and (max-width: 335px) {
-    .cliplibre-js {
-        font-size: 6px;
-    }
-}
-
-@media screen and (max-width: 150px) {
-    .librevjs-libre-mix-skin .librevjs-big-play-button {
-        font-size: 1.8em;
-    }
-}
-
-@media screen and (max-width: 90px) {
-    .librevjs-libre-mix-skin .librevjs-big-play-button {
-        font-size: 1.4em;
-    }
-}
-
-/* End Responsive*/
-
-// MIXINS
-// =============================================================================
-// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
-// when needed.
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
-.box-shadow (@string: 0 0 1em rgba(0, 0, 0, 0.25)) {
-    /* box-shadow *///
-    -webkit-box-shadow: @string;
-       -moz-box-shadow: @string;
-            box-shadow: @string;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
-.border-radius (@string: 5px) {
-    /* border-radius *///
-    -webkit-border-radius: @string;
-       -moz-border-radius: @string;
-            border-radius: @string;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/transition
-.transition (@string: all 1s linear) {
-    /* transition *///
-    -webkit-transition: @string;
-       -moz-transition: @string;
-         -o-transition: @string;
-            transition: @string;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/transition
-.transition-delay (@string: 1s) {
-    /* transition-delay *///
-    -webkit-transition-delay: @string;
-       -moz-transition-delay: @string;
-         -o-transition-delay: @string;
-            transition-delay: @string;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/animation
-.animation (@string: spin 1s infinite linear) {
-    /* animation *///
-    -webkit-animation: @string;
-       -moz-animation: @string;
-         -o-animation: @string;
-            animation: @string;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
-.transform (@string: rotate(-45deg)) {
-    /* transform *///
-    -webkit-transform: @string;
-       -moz-transform: @string;
-        -ms-transform: @string;
-         -o-transform: @string;
-            transform: @string;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
-.user-select (@string: none) {
-    /* user-select *///
-    -webkit-user-select: @string;
-       -moz-user-select: @string;
-        -ms-user-select: @string;
-            user-select: @string;
-}
-
-// Hide something visually but keep available for screen readers.
-// http://h5bp.com/v
-.hide-visually () {
-    /* hide-visually *///
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-// Align an object with absolute positioning
-// Used to align the Big Play Button in the corners or center
-.absolute-align (@align, @margin, @length) when (@align = top) {
-    top: @margin;
-}
-.absolute-align (@align, @margin, @length) when (@align = bottom) {
-    bottom: @margin;
-}
-.absolute-align (@align, @margin, @length) when (@align = left) {
-    left: @margin;
-}
-.absolute-align (@align, @margin, @length) when (@align = right) {
-    right: @margin;
-}
-.absolute-align (@align, @margin, @length) when (@align = center) {
-    /* Center it horizontally *///
-    left: 50%;
-    margin-left: (-(@length/2));
-    // margin-left: ((@length*-1)/2);
-}
-.absolute-align (@align, @margin, @length) when (@align = middle) {
-    /* Center it vertically *///
-    top: 50%;
-    margin-top: (-(@length/2));
-    // margin-top: ((@length*-1)/2);
-}
-
-// http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text
-.background-color-with-alpha (@color, @alpha) {
-    @rgba: rgba(red(@color), green(@color), blue(@color), @alpha);
-    /* background-color-with-alpha *///
-    background-color: @color;
-    background-color: @rgba;
-    // No longer using MS filters because they break border radius in IE9
-    // @argb: argb(@rgba);
-    // filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
-    // -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
-}
-
-.border-color-with-alpha (@color, @alpha) {
-    @rgba: rgba(red(@color), green(@color), blue(@color), @alpha);
-    /* border-color-with-alpha *///
-    border-color: @color;
-    border-color: @rgba;
-}
-
-// Autonomes styles for quality selector and progressTips
-
-/* Quality Selector Universal
-------------------------------------------------------------------------------*/
-/* Position the button */
-.librevjs-res-button {
-    font-weight: bold;
-    float: right;
-    line-height: 3em;
-}
-
-/* Don't show hover effects on title */
-ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
-    cursor: default;
-    background-color: transparent;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-/* Needed to keep text visible in LibreVideoJS */
-.librevjs-res-button .librevjs-control-text {
-    width: auto;
-    height: auto;
-    clip: auto;
-}
-
-/* ProgressTips Universal
-------------------------------------------------------------------------------*/
-.librevjs-progress-tip {
-    visibility: hidden;
-    display: block;
-    opacity: 0.8;
-    padding: 5px;
-    font-size: 10px;
-    position: absolute;
-    z-index: 100000;
-}
-
-.librevjs-progress-tip-arrow {
-    background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;
-    bottom: 0;
-    left: 50%;
-    margin-left: -4px;
-    background-position: bottom left;
-    position: absolute;
-    width: 9px;
-    height: 5px;
-}
-
-.librevjs-progress-tip-inner {
-    border-radius: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    padding: 5px 8px 4px 8px;
-    background-color: black;
-    color: white;
-    max-width: 200px;
-    text-align: center;
-}
-
-// NOTES ON LESS (tracking learnings so we don't forget)
-// =============================================================================
-// * We want this file to continue to be accessible by people who don't know
-//   LESS but know CSS. This means finding the balance between using the most
-//   valuable LESS features (e.g. variables) and keeping it looking like CSS.
-//   So it's best to avoid advanced LESS features like conditional statements.
-//   (we're using one for the big play button position because that's a hot
-//   topic)
-//
-// * We care about the readability of the CSS output of LESS, which means we
-//   have to be careful about what features of LESS we use. (if you're building
-//   your own skin this may not apply)
-//     1. Comments inside of rules (strangely) have an extra line added after
-//        them in the CSS output. To avoid this we can add a LESS comment after
-//        the CSS comment.
-//          /* comment *///
-//
-//     2. In a rule with nested rules, any comments outside of a rule are moved
-//        to the top of the parent rule. i.e. it might look like:
-//          /* title of rule 1 */
-//          /* title of rule 2 */
-//          .rule1 {}
-//          .rule2 {}
-//        This is why we aren't using nested rules inside of the
-//        librevjs-default-skin class.
-
-/* -----------------------------------------------------------------------------
-The original source of this file lives at
-https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
-- 
cgit v1.2.3