depuración de código

1 files changed, 653 insertions, 465 deletions

diff --git a/librevideojs/css/mix-material/mix-teal.css b/librevideojs/css/mix-material/mix-teal.css
index 49afd7b..a3c797f 100644
--- a/librevideojs/css/mix-material/mix-teal.css
+++ b/librevideojs/css/mix-material/mix-teal.css
@@ -3,6 +3,8 @@ LibreVideoJS Estilos personalizados = Teal
 Version 1.2
 Escrito por Jesús Eduardo
 */
+
+
 /* SKIN
 ================================================================================
 The main class name for all skin-specific styles. To make your own skin,
@@ -10,537 +12,671 @@ replace all occurances of 'librevjs-default-skin' with a new name. Then add your
 skin name to your video tag instead of the default skin.
 e.g. <video class="librevideo-js my-skin-name">
 */
+
+
 /* Custom Icon Font
 --------------------------------------------------------------------------------
 The control icons are from a custom font. Each icon corresponds to a character
 (e.g. "\e002"). Font icons allow for easy scaling and coloring of icons.
 */
+
 .librevjs-libre-mixteal-skin {
-color:#ccc !important;
-background-color: inherit;
+    color: #ccc !important;
+    background-color: inherit;
 }
+
 @font-face {
-font-family:"LibreVideoJS";
-src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
-src: local('?'),
-     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
-     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
-     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+    font-family:"LibreVideoJS";
+    src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+    src: local('?'),
+         url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+         url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+         url("../../fonts/libre-material/libre-icons.svg") format("svg");
 }
+
+
 /* Base UI Component Classes
 --------------------------------------------------------------------------------
 /* Slider - used for Volume bar and Seek bar */
+
 .librevjs-libre-mixteal-skin .librevjs-slider {
-/* Replace browser focus highlight with handle highlight */
-outline: 0;
-position: relative;
-cursor: pointer;
-padding: 0;
-/* background-color-with-alpha */
-background-color: #000000;
-background-color: rgba(0, 0, 0, 0.5);
+    /* Replace browser focus highlight with handle highlight */
+    outline: 0;
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    /* background-color-with-alpha */
+    background-color: #000000;
+    background-color: rgba(0, 0, 0, 0.5);
 }
+
 .librevjs-libre-mixteal-skin .librevjs-slider:focus {
--webkit-box-shadow:0 0 2em #fff;
--moz-box-shadow:0 0 2em #fff;
-box-shadow:0 0 2em #fff;
+    -webkit-box-shadow: 0 0 2em #fff;
+    -moz-box-shadow: 0 0 2em #fff;
+    box-shadow: 0 0 2em #fff;
 }
 
+
 /*Eliminación de botón de barra de progreso*/
+
 .librevjs-libre-mixteal-skin .librevjs-slider-handle {
-width: 0;
-height: 0;
+    width: 0;
+    height: 0;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-slider-handle:before {
-text-shadow: 0em 0em 1em #fff;
-position: absolute;
-top: 0;
-left: 0;
+    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-mixteal-skin .librevjs-control-bar {
-/* Start hidden */
-display: none;
-position: absolute;
-/* Place control bar at the bottom of the player box/video.
+    /* 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 */
-background-color: #232323;
-background-color: rgba(35, 35, 35, 0.8);
+    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: #232323;
+    background-color: rgba(35, 35, 35, 0.8);
 }
+
+
 /* Show the control bar only once the video has started playing */
+
 .librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-control-bar {
-display:block;
-visibility:visible;
-opacity:1;
--webkit-transition:visibility .1s,opacity .1s;
--moz-transition:visibility .1s,opacity .1s;
--o-transition:visibility .1s,opacity .1s;
-transition:visibility .1s,opacity .1s
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition: visibility .1s, opacity .1s;
+    -moz-transition: visibility .1s, opacity .1s;
+    -o-transition: visibility .1s, opacity .1s;
+    transition: visibility .1s, opacity .1s
 }
+
+
 /* Hide the control bar when the video is playing and the user is inactive */
+
 .librevjs-libre-mixteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
-display:block;
-visibility:hidden;
-opacity:0;
--webkit-transition:visibility 1s,opacity 1s;
--moz-transition:visibility 1s,opacity 1s;
--o-transition:visibility 1s,opacity 1s;
-transition:visibility 1s,opacity 1s
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 1s, opacity 1s;
+    -moz-transition: visibility 1s, opacity 1s;
+    -o-transition: visibility 1s, opacity 1s;
+    transition: visibility 1s, opacity 1s
 }
+
 .librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar {
-display:none
+    display: none
 }
+
 .librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar {
-display:none
+    display: none
 }
+
 @media \0screen {
- .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
- content:""
- }
+    .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+        content: ""
+    }
 }
+
+
 /* General styles for individual controls. */
+
 .librevjs-libre-mixteal-skin .librevjs-control {
-outline:0;
-position:relative;
-float:left;
-text-align:center;
-margin:0;
-padding:0;
-height:3em;
-width:4em
+    outline: 0;
+    position: relative;
+    float: left;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    height: 3em;
+    width: 4em
 }
+
+
 /* FreeArt button icons: http://artlibre.org/licence/lal */
+
 .librevjs-libre-mixteal-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,.5)
+    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, .5)
 }
+
+
 /* Replacement for focus outline */
-.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before {
-color: #1de9b6;
+
+.librevjs-libre-mixteal-skin .librevjs-control:focus:before, .librevjs-libre-mixteal-skin .librevjs-control:hover:before {
+    color: #1de9b6;
 }
+
 .librevjs-libre-mixteal-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 */
+    /*  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-mixteal-skin .librevjs-control-text {
-border:0;
-clip:rect(0 0 0 0);
-height:1px;
-margin:-1px;
-overflow:hidden;
-padding:0;
-position:absolute;
-width:1px
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px
 }
+
+
 /* Play/Pause
 --------------------------------------------------------------------------------
 */
+
 .librevjs-libre-mixteal-skin .librevjs-play-control {
-width:5em;
-cursor:pointer;
-color:rgb(29, 233, 182);
+    width: 5em;
+    cursor: pointer;
+    color: rgb(29, 233, 182);
 }
+
 .librevjs-libre-mixteal-skin .librevjs-play-control:before {
-content:"\e001"
+    content: "\e001"
 }
+
 .librevjs-libre-mixteal-skin .librevjs-play-control:hover:before {
-color:#007c5d; /*color de play control al pasar el cursor*/
+    color: #007c5d;
+    /*color de play control al pasar el cursor*/
 }
+
 .librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before {
-content:"\e002"
+    content: "\e002"
 }
+
+
 /* Volume/Mute
 -------------------------------------------------------------------------------- */
-.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button {
-cursor:pointer;
-float:right
+
+.librevjs-libre-mixteal-skin .librevjs-mute-control, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button {
+    cursor: pointer;
+    float: right
 }
-.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before {
-content:"\e006"
+
+.librevjs-libre-mixteal-skin .librevjs-mute-control:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before {
+    content: "\e006"
 }
-.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
-content:"\e003"
+
+.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+    content: "\e003"
 }
-.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
-content:"\e004"
+
+.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+    content: "\e004"
 }
-.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
-content:"\e005"
+
+.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+    content: "\e005"
 }
+
 .librevjs-libre-mixteal-skin .librevjs-volume-control {
-width:5em;
-float:right
+    width: 5em;
+    float: right
 }
+
 .librevjs-libre-mixteal-skin .librevjs-volume-bar {
-width:5em;
-height:.6em;
-margin:1.1em auto 0
+    width: 5em;
+    height: .6em;
+    margin: 1.1em auto 0
 }
+
 .librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content {
-height:2.9em
+    height: 2.9em
 }
 
+
 /*Personalización del nivel de volumen*/
-.librevjs-libre-mixteal-skin .librevjs-volume-level {
-position: absolute;
-top: 0;
-left: 0;
-height: 0.5em;
-/* assuming volume starts at 1.0 */
 
-width: 100%;
-background: #1de9b6 url() -50% 0 repeat;
+.librevjs-libre-mixteal-skin .librevjs-volume-level {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0.5em;
+    /* assuming volume starts at 1.0 */
+    width: 100%;
+    background: #1de9b6 url() -50% 0 repeat;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle {
-width:.5em;
-height:.5em
+    width: .5em;
+    height: .5em
 }
+
 .librevjs-libre-mixteal-skin .librevjs-volume-handle:before {
-font-size:.9em;
-top:-.2em;
-left:-.2em;
-width:1em;
-height:1em;
+    font-size: .9em;
+    top: -.2em;
+    left: -.2em;
+    width: 1em;
+    height: 1em;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
-width:6em;
-left:-4em;
+    width: 6em;
+    left: -4em;
 }
+
+
 /* Progress
 --------------------------------------------------------------------------------
 */
+
 .librevjs-libre-mixteal-skin .librevjs-progress-control {
-position:absolute;
-left:0;
-right:0;
-width:auto;
-font-size:.3em;
-height:1em;
-top:-1em;
--webkit-transition:all .4s;
--moz-transition:all .4s;
--o-transition:all .4s;
-transition:all .4s;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: auto;
+    font-size: .3em;
+    height: 1em;
+    top: -1em;
+    -webkit-transition: all .4s;
+    -moz-transition: all .4s;
+    -o-transition: all .4s;
+    transition: all .4s;
 }
+
 .librevjs-libre-mixteal-skin:hover .librevjs-progress-control {
-font-size:.9em;
--webkit-transition:all .2s;
--moz-transition:all .2s;
--o-transition:all .2s;
-transition:all .2s;
+    font-size: .9em;
+    -webkit-transition: all .2s;
+    -moz-transition: all .2s;
+    -o-transition: all .2s;
+    transition: all .2s;
 }
+
+
 /* Box containing play and load progress. Also acts as seek scrubber. */
+
 .librevjs-libre-mixteal-skin .librevjs-progress-holder {
-height:100%;
+    height: 100%;
 }
+
+
 /* Progress Bars */
-.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress {
-position:absolute;
-display:block;
-height:100%;
-margin:0;
-padding:0;
-left:0;
-top:0
+
+.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress {
+    position: absolute;
+    display: block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    left: 0;
+    top: 0
 }
+
 .librevjs-libre-mixteal-skin .librevjs-play-progress {
-background: #1de9b6 url() -50% 0 repeat;
+    background: #1de9b6 url() -50% 0 repeat;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-load-progress {
-background:#646464;
-background:rgba(255,255,255,.4)
+    background: #646464;
+    background: rgba(255, 255, 255, .4)
 }
+
 .librevjs-libre-mixteal-skin .librevjs-seek-handle {
-width:1.5em;
-height:100%
+    width: 1.5em;
+    height: 100%
 }
+
 .librevjs-libre-mixteal-skin .librevjs-seek-handle:before {
-padding-top:.1em
+    padding-top: .1em
 }
+
+
 /* Time Display
 --------------------------------------------------------------------------------
 */
+
 .librevjs-libre-mixteal-skin .librevjs-time-controls {
-font-size:1em;
-font-weight: 700;/*mayor visibilidad*/
-line-height:3em
+    font-size: 1em;
+    font-weight: 700;
+    /*mayor visibilidad*/
+    line-height: 3em
 }
+
 .librevjs-libre-mixteal-skin .librevjs-current-time {
-float:left
+    float: left
 }
+
 .librevjs-libre-mixteal-skin .librevjs-duration {
-float:left
+    float: left
 }
+
 .librevjs-libre-mixteal-skin .librevjs-remaining-time {
-display:none;
-float:left
+    display: none;
+    float: left
 }
+
 .librevjs-time-divider {
-float:left;
-line-height:3em
+    float: left;
+    line-height: 3em
 }
+
+
 /* Fullscreen
 --------------------------------------------------------------------------------
 */
+
 .librevjs-libre-mixteal-skin .librevjs-fullscreen-control {
-width:3.8em;
-cursor:pointer;
-float:right
+    width: 3.8em;
+    cursor: pointer;
+    float: right
 }
+
 .librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before {
-content:"\e000"
+    content: "\e000"
 }
+
+
 /* Switch to the exit icon when the player is in fullscreen */
+
 .librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
-content:"\e00b"
+    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 by LibreVideoJS FreeArts.
 */
+
 .librevjs-libre-mixteal-skin .librevjs-big-play-button {
-  /* Center it horizontally */
-  left: 50%;
-  margin-left: -1.85em;
-  /* Center it vertically */
-  top: 50%;
-  margin-top: -1.3em;
-  font-size: 2em;
-  display: block;
-  z-index: 2;
-  position: absolute;
-  width: 3.8em;
-  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: #232323;
-  background-color: rgba(35, 35, 35, 0.8);
-  border: 0 solid ;
-  /* border-radius */
-  -webkit-border-radius: 0.4em;
-  -moz-border-radius: 0.4em;
-  border-radius: 0.4em;
-  /* transition */
-  -webkit-transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -o-transition: all 0.4s;
-  transition: all 0.4s;
+    /* Center it horizontally */
+    left: 50%;
+    margin-left: -1.85em;
+    /* Center it vertically */
+    top: 50%;
+    margin-top: -1.3em;
+    font-size: 2em;
+    display: block;
+    z-index: 2;
+    position: absolute;
+    width: 3.8em;
+    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: #232323;
+    background-color: rgba(35, 35, 35, 0.8);
+    border: 0 solid;
+    /* border-radius */
+    -webkit-border-radius: 0.4em;
+    -moz-border-radius: 0.4em;
+    border-radius: 0.4em;
+    /* transition */
+    -webkit-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+    -o-transition: all 0.4s;
+    transition: all 0.4s;
 }
+
+
 /* Hide if controls are disabled */
+
 .librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
-display: none;
+    display: none;
 }
+
+
 /* Hide when video starts playing */
+
 .librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-big-play-button {
-display: none;
+    display: none;
 }
+
+
 /* Hide on mobile devices. Remove when we stop using native controls
    by default on mobile  */
+
 .librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button {
-display: none;
+    display: none;
 }
-.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button,
-.librevjs-libre-mixteal-skin .librevjs-big-play-button:focus {
-outline: 0;
-cursor: pointer;
-/* IE8 needs a non-glow hover state */
-background-color: #1de9b6; /*color del boton play al hacer focus*/
-color: #FFFFFF;
+
+.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button, .librevjs-libre-mixteal-skin .librevjs-big-play-button:focus {
+    outline: 0;
+    cursor: pointer;
+    /* IE8 needs a non-glow hover state */
+    background-color: #1de9b6;
+    /*color del boton play al hacer focus*/
+    color: #FFFFFF;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-big-play-button:before {
-content: "\e001";
-font-family: LibreVideoJS;
-/* In order to center the play icon vertically we need to set the line height
+    content: "\e001";
+    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 */
-   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%;
+    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%;
 }
+
 .librevjs-error .librevjs-big-play-button {
-display: none;
+    display: none;
 }
+
+
 /* Loading Spinner
 --------------------------------------------------------------------------------
 */
+
 .librevjs-loading-spinner {
-display:none;
-position:absolute;
-top:50%;
-left:50%;
-font-size:4em;
-line-height:1;
-width:1em;
-height:1em;
-margin-left:-.5em;
-margin-top:-.5em;
-opacity:.75;
--webkit-animation:spin 1.5s infinite linear;
--moz-animation:spin 1.5s infinite linear;
--o-animation:spin 1.5s infinite linear;
-animation:spin 1.5s infinite linear
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 4em;
+    line-height: 1;
+    width: 1em;
+    height: 1em;
+    margin-left: -.5em;
+    margin-top: -.5em;
+    opacity: .75;
+    -webkit-animation: spin 1.5s infinite linear;
+    -moz-animation: spin 1.5s infinite linear;
+    -o-animation: spin 1.5s infinite linear;
+    animation: spin 1.5s infinite linear
 }
+
 .librevjs-libre-mixteal-skin .librevjs-loading-spinner:before {
-content:"\e01e";
-font-family:LibreVideoJS;
-position:absolute;
-top:0;
-left:0;
-width:1em;
-height:1em;
-text-align:center;
-text-shadow:0 0 .1em #000
+    content: "\e01e";
+    font-family: LibreVideoJS;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1em;
+    height: 1em;
+    text-align: center;
+    text-shadow: 0 0 .1em #000
 }
+
 @-moz-keyframes spin {
-0% {
-   -moz-transform:rotate(0deg)
-   }
-100% {
-   -moz-transform:rotate(359deg)
-   }
+    0% {
+        -moz-transform: rotate(0deg)
+    }
+    100% {
+        -moz-transform: rotate(359deg)
+    }
 }
+
 @-webkit-keyframes spin {
-0% {
-   -webkit-transform:rotate(0deg)
-   }
-100% {
-   -webkit-transform:rotate(359deg)
-   }
+    0% {
+        -webkit-transform: rotate(0deg)
+    }
+    100% {
+        -webkit-transform: rotate(359deg)
+    }
 }
+
 @-o-keyframes spin {
-0% {
-   -o-transform:rotate(0deg)
-   }
-100% {
-   -o-transform:rotate(359deg)
-   }
+    0% {
+        -o-transform: rotate(0deg)
+    }
+    100% {
+        -o-transform: rotate(359deg)
+    }
 }
+
 @keyframes spin {
-0% {
-   transform:rotate(0deg)
-   }
-100% {
-   transform:rotate(359deg)
-   }
+    0% {
+        transform: rotate(0deg)
+    }
+    100% {
+        transform: rotate(359deg)
+    }
 }
+
+
 /* Menu Buttons (Captions/Subtitles/etc.)
 --------------------------------------------------------------------------------
 */
+
 .librevjs-libre-mixteal-skin .librevjs-menu-button {
-float:right;
-cursor:pointer;
+    float: right;
+    cursor: pointer;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-menu {
-display:none;
-position:absolute;
-bottom:0;
-left:0;
-width:0;
-height:0;
-margin-bottom:3em;
-border-left:2em solid transparent;
-border-right:2em solid transparent;
-border-top:1.55em solid #000;
-border-top-color:rgba(7,40,50,.5);
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    margin-bottom: 3em;
+    border-left: 2em solid transparent;
+    border-right: 2em solid transparent;
+    border-top: 1.55em solid #000;
+    border-top-color: rgba(7, 40, 50, .5);
 }
+
+
 /* Button Pop-up Menu */
+
 .librevjs-libre-mixteal-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 librevjs-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,.7);
--webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
--moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+    display: block;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    width: 10em;
+    bottom: 1.5em;
+    /* Same bottom as librevjs-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, .7);
+    -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+    -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+    box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
 }
+
 .librevjs-libre-mixteal-skin .librevjs-menu-button:hover .librevjs-menu {
-display:block;
+    display: block;
 }
+
 .librevjs-libre-mixteal-skin .librevjs-menu-button ul li {
-list-style:none;
-margin:0;
-padding:.3em 0;
-line-height:1.4em;
-font-size:1.2em;
-text-align:center;
-text-transform:lowercase;
-color: #ccc;
+    list-style: none;
+    margin: 0;
+    padding: .3em 0;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    text-align: center;
+    text-transform: lowercase;
+    color: #ccc;
 }
 
+
 /* Select color menu subtitles/captions */
+
 .librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected {
-color: rgb(1, 56, 47);
-background-color: rgb(29, 233, 182);
+    color: rgb(1, 56, 47);
+    background-color: rgb(29, 233, 182);
 }
-.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover {
-outline: 0;
-color: #004d40;
-background-color: #1de9b6;
+
+.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+    outline: 0;
+    color: #004d40;
+    background-color: #1de9b6;
 }
+
+
 /*End Select color menu subtitles/caption */
+
 .librevjs-libre-mixteal-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 .3em;
-font-weight:700;
-cursor:default;
+    text-align: center;
+    text-transform: uppercase;
+    font-size: 1em;
+    line-height: 2em;
+    padding: 0;
+    margin: 0 0 .3em;
+    font-weight: 700;
+    cursor: default;
 }
+
+
 /* Subtitles Button */
+
 .librevjs-libre-mixteal-skin .librevjs-subtitles-button:before {
-content:"\e00c"
+    content: "\e00c"
 }
+
+
 /* Captions Button */
+
 .librevjs-libre-mixteal-skin .librevjs-captions-button:before {
-content:"\e008"
+    content: "\e008"
 }
+
+
 /* Replacement for focus outline */
-.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-skin .librevjs-captions-button:hover .librevjs-control-content:before {
--webkit-box-shadow:0 0 1em #fff;
--moz-box-shadow:0 0 1em #fff;
-box-shadow:0 0 1em #fff;
+
+.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixteal-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+    -webkit-box-shadow: 0 0 1em #fff;
+    -moz-box-shadow: 0 0 1em #fff;
+    box-shadow: 0 0 1em #fff;
 }
+
+
 /*
 REQUIRED STYLES (be careful overriding)
 ================================================================================
@@ -552,196 +688,248 @@ and sets the width and height of the video.
 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;
-font-size:10px;
-vertical-align:middle;
-font-weight:500;
-font-style:normal;
-font-family:Arial,sans-serif;
--webkit-user-select:none;
--moz-user-select:none;
--ms-user-select:none;
-user-select:none
+    background-color: #000;
+    position: relative;
+    padding: 0;
+    font-size: 10px;
+    vertical-align: middle;
+    font-weight: 500;
+    font-style: normal;
+    font-family: Arial, sans-serif;
+    -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> */
+
 .cliplibre-js .librevjs-tech {
-position:absolute;
-top:0;
-left:0;
-width:100%;
-height:100%
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%
 }
+
 .cliplibre-js:-moz-full-screen {
-position:absolute
+    position: absolute
 }
+
+
 /* Fullscreen Styles */
+
 body.librevjs-full-window {
-padding:0;
-margin:0;
-height:100%;
-overflow-y:auto;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    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;
-position:absolute;
+    position: fixed;
+    overflow: hidden;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%!important;
+    height: 100%!important;
+    position: absolute;
 }
+
 .cliplibre-js:-webkit-full-screen {
-width:100%!important;
-height:100%!important
+    width: 100%!important;
+    height: 100%!important
 }
+
 .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
-cursor:none
+    cursor: none
 }
+
+
 /* Poster Styles */
+
 .librevjs-poster {
-background-repeat:no-repeat;
-background-position:50% 50%;
-background-size:contain;
-cursor:pointer;
-height:100%;
-margin:0;
-padding:0;
-position:relative;
-width:100%
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+    cursor: pointer;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 100%
 }
+
 .librevjs-poster img {
-display:block;
-margin:0 auto;
-max-height:100%;
-padding:0;
-width:100%
+    display: block;
+    margin: 0 auto;
+    max-height: 100%;
+    padding: 0;
+    width: 100%
 }
+
+
 /* Hide the poster when native controls are used otherwise it covers them */
+
 .cliplibre-js.librevjs-using-native-controls .librevjs-poster {
-display:none
+    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
+    text-align: center;
+    position: absolute;
+    bottom: 4em;
+    left: 1em;
+    right: 1em
 }
+
+
 /* Individual tracks */
+
 .cliplibre-js .librevjs-text-track {
-display:none;
-font-size:1.7em;
-text-align:center;
-margin-bottom:.1em;
-/* Transparent black background, or fallback to all black (oldIE) */
-background-color:#000;
-background-color:rgba(0,0,0,.6)
+    display: none;
+    font-size: 1.7em;
+    text-align: center;
+    margin-bottom: .1em;
+    /* Transparent black background, or fallback to all black (oldIE) */
+    background-color: #000;
+    background-color: rgba(0, 0, 0, .6)
 }
+
 .cliplibre-js .librevjs-subtitles {
-color:#fff
+    color: #fff
 }
+
 .cliplibre-js .librevjs-captions {
-color:rgb(255, 237, 0);
-background-color: rgba(2, 7, 11, 0.7);
+    color: rgb(255, 237, 0);
+    background-color: rgba(2, 7, 11, 0.7);
 }
+
 .librevjs-tt-cue {
-display:block
+    display: block
 }
+
+
 /* Hide disabled or unsupported controls */
+
 .librevjs-libre-mixteal-skin .librevjs-hidden {
-display:none
+    display: none
 }
+
 .librevjs-lock-showing {
-display:block!important;
-opacity:1;
-visibility:visible
+    display: block!important;
+    opacity: 1;
+    visibility: visible
 }
+
+
 /* Opctional Styles No support HTML5*/
+
 .no_html5 {
-background: black none repeat scroll 0 0;
-color: white;
-height: 160px;
-padding: 130px 10px 20px;
-text-align: center;
+    background: black none repeat scroll 0 0;
+    color: white;
+    height: 160px;
+    padding: 130px 10px 20px;
+    text-align: center;
 }
 
+
 /*Title Resolution | subtitles and Caption*/
-.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
-color:rgb(26, 187, 156);
-background-color: inherit;
+
+.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title {
+    color: rgb(26, 187, 156);
+    background-color: inherit;
 }
-.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
-color: rgb(29, 233, 182);
-background-color: inherit;
+
+.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
+    color: rgb(29, 233, 182);
+    background-color: inherit;
 }
+
+
 /*Responsive*/
+
 .cliplibre-js-responsive-container.librevjs-hd {
-padding-top: 56.25%;
+    padding-top: 56.25%;
 }
+
 .cliplibre-js-responsive-container.librevjs-sd {
-padding-top: 75%;
+    padding-top: 75%;
 }
+
 .cliplibre-js-responsive-container {
-width: 100%;
-position: relative;
+    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;
-  }
-}
-@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-mixteal-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-mixteal-skin .librevjs-big-play-button{
- font-size: 1.8em;
- }
-}
-@media screen and (max-width: 90px){
- .librevjs-libre-mixteal-skin .librevjs-big-play-button{
- font-size: 1.4em;
- }
+    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;
+    }
+}
+
+@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-mixteal-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-mixteal-skin .librevjs-big-play-button {
+        font-size: 1.8em;
+    }
+}
+
+@media screen and (max-width: 90px) {
+    .librevjs-libre-mixteal-skin .librevjs-big-play-button {
+        font-size: 1.4em;
+    }
 }