library/video-js/video-js.css

   1 /*
   2 VideoJS Default Styles (http://videojs.com)
   3 Version 3.2.0
   4 */
   5
   6 /*
   7 REQUIRED STYLES (be careful overriding)
   8 ================================================================================ */
   9 /* When loading the player, the video tag is replaced with a DIV,
  10    that will hold the video tag or object tag for other playback methods.
  11    The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
  12
  13    ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
  14    Otherwise you risk messing up control positioning and full window mode. **
  15 */
  16 .video-js {
  17   background-color: #000; position: relative; padding: 0;
  18
  19   /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
  20   font-size: 10px;
  21
  22   /* Allow poster to be vertially aligned. */
  23   vertical-align: middle;
  24   /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
  25 }
  26
  27 /* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
  28 .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  29
  30 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
  31 .video-js:-moz-full-screen { position: absolute; }
  32
  33 /* Fullscreen Styles */
  34 body.vjs-full-window {
  35   padding: 0; margin: 0;
  36   height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  37 }
  38 .video-js.vjs-fullscreen {
  39   position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
  40   _position: absolute; /* IE6 Full-window (underscore hack) */
  41 }
  42 .video-js:-webkit-full-screen {
  43   width: 100% !important; height: 100% !important;
  44 }
  45
  46 /* Poster Styles */
  47 .vjs-poster {
  48   margin: 0 auto; padding: 0; cursor: pointer;
  49
  50   /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  51   position: relative; width: 100%; max-height: 100%;
  52 }
  53
  54 /* Text Track Styles */
  55 /* Overall track holder for both captions and subtitles */
  56 .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; }
  57 /* Individual tracks */
  58 .video-js .vjs-text-track {
  59   display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
  60   /* Transparent black background, or fallback to all black (IE6) */
  61   background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
  62 }
  63 .video-js .vjs-subtitles { color: #fff; }
  64 .video-js .vjs-captions { color: #fc6; }
  65 .vjs-tt-cue { display: block; }
  66
  67 /* Fading sytles, used to fade control bar. */
  68 .vjs-fade-in {
  69   visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
  70   opacity: 1 !important;
  71
  72   -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
  73   -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
  74   -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
  75   -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
  76   transition: visibility 0s linear 0s, opacity 0.3s linear;
  77 }
  78 .vjs-fade-out {
  79   visibility: hidden !important;
  80   opacity: 0 !important;
  81
  82   -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  83   -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  84   -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  85   -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  86   transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  87 }
  88
  89 /* DEFAULT SKIN (override in another file to create new skins)
  90 ================================================================================
  91 Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
  92 so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
  93
  94 /* The default control bar. Created by bar.js */
  95 .vjs-default-skin .vjs-controls {
  96   position: absolute;
  97   bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  98   left: 0; right: 0; /* 100% width of div */
  99   margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
 100   height: 2.6em; /* Including any margin you want above or below control items */
 101   color: #fff; border-top: 1px solid #404040;
 102
 103   /* CSS Gradient */
 104   /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
 105   background: #242424; /* Old browsers */
 106   background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
 107   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
 108   background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
 109   background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
 110   background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
 111   /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
 112   /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
 113   background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
 114
 115   /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
 116   /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
 117   visibility: hidden;
 118   opacity: 0;
 119 }
 120
 121 /* General styles for individual controls. */
 122 .vjs-default-skin .vjs-control {
 123   position: relative; float: left;
 124   text-align: center; margin: 0; padding: 0;
 125   height: 2.6em; width: 2.6em;
 126 }
 127
 128 .vjs-default-skin .vjs-control:focus {
 129   outline: 0;
 130 /*  background-color: #555;*/
 131 }
 132
 133 /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
 134 .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; }
 135
 136
 137 /* Play/Pause
 138 -------------------------------------------------------------------------------- */
 139 .vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
 140 /* Play Icon */
 141 .vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
 142 .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; }
 143
 144 /* Rewind
 145 -------------------------------------------------------------------------------- */
 146 .vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
 147 .vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
 148
 149 /* Volume/Mute
 150 -------------------------------------------------------------------------------- */
 151 .vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
 152 .vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
 153 .vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
 154 .vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
 155 .vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
 156
 157
 158 .vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
 159 .vjs-default-skin .vjs-volume-bar {
 160   position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
 161
 162   -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
 163
 164   background: #666;
 165   background: -moz-linear-gradient(top, #333, #666);
 166   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
 167   background: -webkit-linear-gradient(top, #333, #666);
 168   background: -o-linear-gradient(top, #333, #666);
 169   background: -ms-linear-gradient(top, #333, #666);
 170   background: linear-gradient(top, #333, #666);
 171 }
 172 .vjs-default-skin .vjs-volume-level {
 173   position: absolute; top: 0; left: 0; height: 0.6em;
 174
 175   -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
 176
 177   background: #fff;
 178   background: -moz-linear-gradient(top, #fff, #ccc);
 179   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
 180   background: -webkit-linear-gradient(top, #fff, #ccc);
 181   background: -o-linear-gradient(top, #fff, #ccc);
 182   background: -ms-linear-gradient(top, #fff, #ccc);
 183   background: linear-gradient(top, #fff, #ccc);
 184 }
 185 .vjs-default-skin .vjs-volume-handle {
 186   position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
 187   border: 1px solid #fff;
 188   -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 189 }
 190
 191 /* Progress
 192 -------------------------------------------------------------------------------- */
 193 .vjs-default-skin div.vjs-progress-control {
 194   position: absolute;
 195   left: 4.8em; right: 4.8em; /* Leave room for time displays. */
 196   height: 1.0em; width: auto;
 197   top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
 198   border-bottom: 1px solid #1F1F1F;
 199   border-top: 1px solid #222;
 200
 201   /* CSS Gradient */
 202   background: #333;
 203   background: -moz-linear-gradient(top, #222, #333);
 204   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
 205   background: -webkit-linear-gradient(top, #222, #333);
 206   background: -o-linear-gradient(top, #333, #222);
 207   background: -ms-linear-gradient(top, #333, #222);
 208   background: linear-gradient(top, #333, #222);
 209
 210
 211   /* 1px top shadow */
 212 /*  -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);*/
 213 }
 214
 215 /* Box containing play and load progresses. Also acts as seek scrubber. */
 216 .vjs-default-skin .vjs-progress-holder {
 217   position: relative; cursor: pointer !important; /*overflow: hidden;*/
 218   padding: 0; margin: 0; /* Placement within the progress control item */
 219   height: 1.0em;
 220   -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 221
 222   /* CSS Gradient */
 223   background: #111;
 224   background: -moz-linear-gradient(top, #111, #262626);
 225   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
 226   background: -webkit-linear-gradient(top, #111, #262626);
 227   background: -o-linear-gradient(top, #111, #262626);
 228   background: -ms-linear-gradient(top, #111, #262626);
 229   background: linear-gradient(top, #111, #262626);
 230 }
 231 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 232 .vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
 233   position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
 234   left: 0; top: 0; /*Needed for IE6*/
 235   -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 236
 237   /*width: 0;*/
 238 }
 239
 240 .vjs-default-skin .vjs-play-progress {
 241   /* CSS Gradient. */
 242   background: #fff; /* Old browsers */
 243   background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
 244   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
 245   background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 246   background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 247   background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 248   background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 249
 250   background: #efefef;
 251   background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
 252   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
 253   background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 254   background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 255   background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 256   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
 257   background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 258 }
 259 .vjs-default-skin .vjs-load-progress {
 260   opacity: 0.8;
 261
 262   /* CSS Gradient */
 263   background: #666;
 264   background: -moz-linear-gradient(top, #666, #333);
 265   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
 266   background: -webkit-linear-gradient(top, #666, #333);
 267   background: -o-linear-gradient(top, #666, #333);
 268   background: -ms-linear-gradient(top, #666, #333);
 269   background: linear-gradient(top, #666, #333);
 270 }
 271
 272 .vjs-default-skin div.vjs-seek-handle {
 273   position: absolute;
 274   width: 16px; height: 16px; /* Match img pixles */
 275   margin-top: -0.3em;
 276   left: 0; top: 0; /*Needed for IE6*/
 277
 278   background: url('video-js.png') 0 -50px;
 279   /* CSS Curved Corners. Needed to make shadows curved. */
 280   -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
 281   /* CSS Shadows */
 282   -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
 283 }
 284 /* Time Display
 285 -------------------------------------------------------------------------------- */
 286 .vjs-default-skin .vjs-time-controls {
 287   position: absolute;
 288   right: 0;
 289   height: 1.0em; width: 4.8em;
 290   top: -1.3em;
 291   border-bottom: 1px solid #1F1F1F;
 292   border-top: 1px solid #222;
 293   background-color: #333;
 294
 295   font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
 296
 297   background: #333;
 298   background: -moz-linear-gradient(top, #222, #333);
 299   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
 300   background: -webkit-linear-gradient(top, #222, #333);
 301   background: -o-linear-gradient(top, #333, #222);
 302   background: -ms-linear-gradient(top, #333, #222);
 303   background: linear-gradient(top, #333, #222);
 304
 305   /* 1px top shadow */
 306 /*  -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);*/
 307 }
 308
 309 .vjs-default-skin .vjs-current-time { left: 0; }
 310
 311 .vjs-default-skin .vjs-duration { right: 0; display: none; }
 312 .vjs-default-skin .vjs-remaining-time { right: 0; }
 313
 314 .vjs-time-divider { display:none; }
 315
 316 .vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
 317 .vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
 318
 319 /* Fullscreen
 320 -------------------------------------------------------------------------------- */
 321 .vjs-secondary-controls { float: right; }
 322
 323 .vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
 324 .vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
 325
 326 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
 327
 328
 329 /* Big Play Button (at start)
 330 ---------------------------------------------------------*/
 331 .vjs-default-skin .vjs-big-play-button {
 332   display: block; /* Start hidden */ z-index: 2;
 333   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;
 334   border: 0.2em solid #fff; opacity: 0.95;
 335   -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
 336
 337   background: #454545;
 338   background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
 339   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
 340   background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 341   background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 342   background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 343   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
 344   background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 345
 346   /* CSS Shadows */
 347   -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
 348 }
 349
 350 .vjs-default-skin div.vjs-big-play-button:hover {
 351   -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
 352 }
 353
 354 .vjs-default-skin div.vjs-big-play-button span {
 355   position: absolute; top: 50%; left: 50%;
 356   display: block; width: 35px; height: 42px;
 357   margin: -20px 0 0 -15px; /* Using negative margin to center image. */
 358   background: url('video-js.png') -100px 0;
 359 }
 360
 361 /* Loading Spinner
 362 ---------------------------------------------------------*/
 363 /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
 364 .vjs-loading-spinner {
 365   display: none;
 366   position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
 367   margin: -28px 0 0 -28px;
 368   -webkit-animation-name: rotatethis;
 369   -webkit-animation-duration:1s;
 370   -webkit-animation-iteration-count:infinite;
 371   -webkit-animation-timing-function:linear;
 372   -moz-animation-name: rotatethis;
 373   -moz-animation-duration:1s;
 374   -moz-animation-iteration-count:infinite;
 375   -moz-animation-timing-function:linear;
 376 }
 377
 378 @-webkit-keyframes rotatethis {
 379   0% {-webkit-transform:scale(0.6) rotate(0deg); }
 380   12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
 381   12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
 382   25% {-webkit-transform:scale(0.6) rotate(45deg); }
 383   25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
 384   37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
 385   37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
 386   50% {-webkit-transform:scale(0.6) rotate(135deg);}
 387   50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
 388   62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
 389   62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
 390   75% {-webkit-transform:scale(0.6) rotate(225deg);}
 391   75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
 392   87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
 393   87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
 394   100% {-webkit-transform:scale(0.6) rotate(315deg);}
 395 }
 396
 397 @-moz-keyframes rotatethis {
 398   0% {-moz-transform:scale(0.6) rotate(0deg);}
 399   12.5% {-moz-transform:scale(0.6) rotate(0deg);}
 400   12.51% {-moz-transform:scale(0.6) rotate(45deg);}
 401   25% {-moz-transform:scale(0.6) rotate(45deg);}
 402   25.01% {-moz-transform:scale(0.6) rotate(90deg);}
 403   37.5% {-moz-transform:scale(0.6) rotate(90deg);}
 404   37.51% {-moz-transform:scale(0.6) rotate(135deg);}
 405   50% {-moz-transform:scale(0.6) rotate(135deg);}
 406   50.01% {-moz-transform:scale(0.6) rotate(180deg);}
 407   62.5% {-moz-transform:scale(0.6) rotate(180deg);}
 408   62.51% {-moz-transform:scale(0.6) rotate(225deg);}
 409   75% {-moz-transform:scale(0.6) rotate(225deg);}
 410   75.01% {-moz-transform:scale(0.6) rotate(270deg);}
 411   87.5% {-moz-transform:scale(0.6) rotate(270deg);}
 412   87.51% {-moz-transform:scale(0.6) rotate(315deg);}
 413   100% {-moz-transform:scale(0.6) rotate(315deg);}
 414 }
 415 /* Each circle */
 416 div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
 417   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 418
 419 div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
 420   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 421
 422 div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
 423   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 424
 425 div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
 426   border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
 427
 428 div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
 429   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 430
 431 div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
 432   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 433
 434 div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
 435   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 436
 437 div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
 438   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 439
 440 /* Menu Buttons (Captions/Subtitles/etc.)
 441 -------------------------------------------------------------------------------- */
 442 .vjs-default-skin .vjs-menu-button {
 443   float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
 444
 445   border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
 446
 447   background: #4d4d4d;
 448   background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
 449   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
 450   background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 451   background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 452   background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 453   background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 454 }
 455 /* Button Icon */
 456 .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; }
 457
 458 /* Button Pop-up Menu */
 459 .vjs-default-skin .vjs-menu-button ul {
 460   display: none; /* Start hidden. Hover will show. */
 461   opacity: 0.8;
 462   padding: 0; margin: 0;
 463   position: absolute; width: 10em; bottom: 2em; max-height: 15em;
 464   left: -3.5em; /* Width of menu - width of button / 2 */
 465   background-color: #111;
 466   border: 2px solid #333;
 467   -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
 468   -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
 469   overflow: auto;
 470 }
 471
 472 .vjs-default-skin .vjs-menu-button:focus ul,
 473 .vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
 474 .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; }
 475 .vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
 476 .vjs-default-skin .vjs-menu-button ul li:focus,
 477 .vjs-default-skin .vjs-menu-button ul li:hover,
 478 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
 479 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
 480 .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
 481   text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
 482
 483   color: #fff; font-weight: bold;
 484
 485   cursor: default;
 486
 487   background: #4d4d4d;
 488   background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
 489   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
 490   background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 491   background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 492   background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 493   background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 494 }
 495
 496 /* Subtitles Button */
 497 .vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
 498 .vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
 499 .vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }