extlib/video-js/video-js.css

   1 /*
   2 VideoJS Default Styles (http://videojs.com)
   3 Version 3.1.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 /* Subtiles Styles */
  55 .video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
  56
  57 /* Fading sytles, used to fade control bar. */
  58 .vjs-fade-in {
  59   visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
  60   opacity: 1 !important;
  61
  62   -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
  63   -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
  64   -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
  65   -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
  66   transition: visibility 0s linear 0s, opacity 0.3s linear;
  67 }
  68 .vjs-fade-out {
  69   visibility: hidden !important;
  70   opacity: 0 !important;
  71
  72   -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  73   -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  74   -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  75   -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  76   transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  77 }
  78
  79 /* DEFAULT SKIN (override in another file to create new skins)
  80 ================================================================================
  81 Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
  82 so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
  83
  84 /* The default control bar. Created by bar.js */
  85 .vjs-default-skin .vjs-controls {
  86   position: absolute;
  87   bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  88   left: 0; right: 0; /* 100% width of div */
  89   margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
  90   height: 2.6em; /* Including any margin you want above or below control items */
  91   color: #fff; border-top: 1px solid #404040;
  92
  93   /* CSS Gradient */
  94   /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
  95   background: #242424; /* Old browsers */
  96   background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
  97   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
  98   background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
  99   background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
 100   background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
 101   /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
 102   /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
 103   background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
 104
 105   /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
 106   /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
 107   visibility: hidden;
 108   opacity: 0;
 109 }
 110
 111 /* General styles for individual controls. */
 112 .vjs-default-skin .vjs-control {
 113   position: relative; float: left;
 114   text-align: center; margin: 0; padding: 0;
 115   height: 2.6em; width: 2.6em;
 116 }
 117
 118 .vjs-default-skin .vjs-control:focus {
 119   outline: 0;
 120 }
 121
 122 /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
 123 .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; }
 124
 125
 126 /* Play/Pause
 127 -------------------------------------------------------------------------------- */
 128 .vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
 129 /* Play Icon */
 130 .vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
 131 .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; }
 132
 133 /* Rewind
 134 -------------------------------------------------------------------------------- */
 135 .vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
 136 .vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
 137
 138 /* Volume/Mute
 139 -------------------------------------------------------------------------------- */
 140 .vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
 141 .vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
 142 .vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
 143 .vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
 144 .vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
 145
 146
 147 .vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
 148 .vjs-default-skin .vjs-volume-bar {
 149   position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
 150
 151   -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
 152
 153   background: #666;
 154   background: -moz-linear-gradient(top, #333, #666);
 155   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
 156   background: -webkit-linear-gradient(top, #333, #666);
 157   background: -o-linear-gradient(top, #333, #666);
 158   background: -ms-linear-gradient(top, #333, #666);
 159   background: linear-gradient(top, #333, #666);
 160 }
 161 .vjs-default-skin .vjs-volume-level {
 162   position: absolute; top: 0; left: 0; height: 0.6em;
 163
 164   -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
 165
 166   background: #fff;
 167   background: -moz-linear-gradient(top, #fff, #ccc);
 168   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
 169   background: -webkit-linear-gradient(top, #fff, #ccc);
 170   background: -o-linear-gradient(top, #fff, #ccc);
 171   background: -ms-linear-gradient(top, #fff, #ccc);
 172   background: linear-gradient(top, #fff, #ccc);
 173 }
 174 .vjs-default-skin .vjs-volume-handle {
 175   position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
 176   border: 1px solid #fff;
 177   -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 178 }
 179
 180 /* Progress
 181 -------------------------------------------------------------------------------- */
 182 .vjs-default-skin div.vjs-progress-control {
 183   position: absolute;
 184   left: 4.8em; right: 4.8em; /* Leave room for time displays. */
 185   height: 1.0em; width: auto;
 186   top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
 187   border-bottom: 1px solid #1F1F1F;
 188   border-top: 1px solid #222;
 189
 190   /* CSS Gradient */
 191   background: #333;
 192   background: -moz-linear-gradient(top, #222, #333);
 193   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
 194   background: -webkit-linear-gradient(top, #222, #333);
 195   background: -o-linear-gradient(top, #333, #222);
 196   background: -ms-linear-gradient(top, #333, #222);
 197   background: linear-gradient(top, #333, #222);
 198
 199
 200   /* 1px top shadow */
 201 /*  -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);*/
 202 }
 203
 204 /* Box containing play and load progresses. Also acts as seek scrubber. */
 205 .vjs-default-skin .vjs-progress-holder {
 206   position: relative; cursor: pointer !important; /*overflow: hidden;*/
 207   padding: 0; margin: 0; /* Placement within the progress control item */
 208   height: 1.0em;
 209   -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 210
 211   /* CSS Gradient */
 212   background: #111;
 213   background: -moz-linear-gradient(top, #111, #262626);
 214   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
 215   background: -webkit-linear-gradient(top, #111, #262626);
 216   background: -o-linear-gradient(top, #111, #262626);
 217   background: -ms-linear-gradient(top, #111, #262626);
 218   background: linear-gradient(top, #111, #262626);
 219 }
 220 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 221 .vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
 222   position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
 223   left: 0; top: 0; /*Needed for IE6*/
 224   -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 225
 226   /*width: 0;*/
 227 }
 228
 229 .vjs-default-skin .vjs-play-progress {
 230   /* CSS Gradient. */
 231   background: #fff; /* Old browsers */
 232   background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
 233   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
 234   background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 235   background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 236   background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 237   background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
 238
 239   background: #efefef;
 240   background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
 241   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
 242   background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 243   background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 244   background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 245   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
 246   background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
 247 }
 248 .vjs-default-skin .vjs-load-progress {
 249   opacity: 0.8;
 250
 251   /* CSS Gradient */
 252   background: #666;
 253   background: -moz-linear-gradient(top, #666, #333);
 254   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
 255   background: -webkit-linear-gradient(top, #666, #333);
 256   background: -o-linear-gradient(top, #666, #333);
 257   background: -ms-linear-gradient(top, #666, #333);
 258   background: linear-gradient(top, #666, #333);
 259 }
 260
 261 .vjs-default-skin div.vjs-seek-handle {
 262   position: absolute;
 263   width: 16px; height: 16px; /* Match img pixles */
 264   margin-top: -0.3em;
 265   left: 0; top: 0; /*Needed for IE6*/
 266
 267   background: url('video-js.png') 0 -50px;
 268   /* CSS Curved Corners. Needed to make shadows curved. */
 269   -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
 270   /* CSS Shadows */
 271   -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
 272 }
 273 /* Time Display
 274 -------------------------------------------------------------------------------- */
 275 .vjs-default-skin .vjs-time-controls {
 276   position: absolute;
 277   right: 0;
 278   height: 1.0em; width: 4.8em;
 279   top: -1.3em;
 280   border-bottom: 1px solid #1F1F1F;
 281   border-top: 1px solid #222;
 282   background-color: #333;
 283
 284   font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
 285
 286   background: #333;
 287   background: -moz-linear-gradient(top, #222, #333);
 288   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
 289   background: -webkit-linear-gradient(top, #222, #333);
 290   background: -o-linear-gradient(top, #333, #222);
 291   background: -ms-linear-gradient(top, #333, #222);
 292   background: linear-gradient(top, #333, #222);
 293
 294   /* 1px top shadow */
 295 /*  -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);*/
 296 }
 297
 298 .vjs-default-skin .vjs-current-time { left: 0; }
 299
 300 .vjs-default-skin .vjs-duration { right: 0; display: none; }
 301 .vjs-default-skin .vjs-remaining-time { right: 0; }
 302
 303 .vjs-time-divider { display:none; }
 304
 305 .vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
 306 .vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
 307
 308 /* Fullscreen
 309 -------------------------------------------------------------------------------- */
 310 .vjs-secondary-controls { float: right; }
 311
 312 .vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
 313 .vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
 314
 315 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
 316
 317
 318 /* Big Play Button (at start)
 319 ---------------------------------------------------------*/
 320 .vjs-default-skin .vjs-big-play-button {
 321   display: block; /* Start hidden */ z-index: 2;
 322   position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
 323   border: 0.3em solid #fff; opacity: 0.95;
 324   -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
 325
 326   background: #454545;
 327   background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
 328   background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
 329   background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 330   background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 331   background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 332   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
 333   background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
 334
 335   /* CSS Shadows */
 336   -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
 337 }
 338
 339 .vjs-default-skin div.vjs-big-play-button:hover {
 340   -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
 341 }
 342
 343 .vjs-default-skin div.vjs-big-play-button span {
 344   position: absolute; top: 50%; left: 50%;
 345   display: block; width: 35px; height: 42px;
 346   margin: -20px 0 0 -15px; /* Using negative margin to center image. */
 347   background: url('video-js.png') -100px 0;
 348 }
 349
 350 /* Loading Spinner
 351 ---------------------------------------------------------*/
 352 /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
 353 .vjs-loading-spinner {
 354   display: none;
 355   position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
 356   margin: -28px 0 0 -28px;
 357   -webkit-animation-name: rotatethis;
 358   -webkit-animation-duration:1s;
 359   -webkit-animation-iteration-count:infinite;
 360   -webkit-animation-timing-function:linear;
 361   -moz-animation-name: rotatethis;
 362   -moz-animation-duration:1s;
 363   -moz-animation-iteration-count:infinite;
 364   -moz-animation-timing-function:linear;
 365 }
 366
 367 @-webkit-keyframes rotatethis {
 368   0% {-webkit-transform:scale(0.6) rotate(0deg); }
 369   12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
 370   12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
 371   25% {-webkit-transform:scale(0.6) rotate(45deg); }
 372   25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
 373   37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
 374   37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
 375   50% {-webkit-transform:scale(0.6) rotate(135deg);}
 376   50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
 377   62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
 378   62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
 379   75% {-webkit-transform:scale(0.6) rotate(225deg);}
 380   75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
 381   87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
 382   87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
 383   100% {-webkit-transform:scale(0.6) rotate(315deg);}
 384 }
 385
 386 @-moz-keyframes rotatethis {
 387   0% {-moz-transform:scale(0.6) rotate(0deg);}
 388   12.5% {-moz-transform:scale(0.6) rotate(0deg);}
 389   12.51% {-moz-transform:scale(0.6) rotate(45deg);}
 390   25% {-moz-transform:scale(0.6) rotate(45deg);}
 391   25.01% {-moz-transform:scale(0.6) rotate(90deg);}
 392   37.5% {-moz-transform:scale(0.6) rotate(90deg);}
 393   37.51% {-moz-transform:scale(0.6) rotate(135deg);}
 394   50% {-moz-transform:scale(0.6) rotate(135deg);}
 395   50.01% {-moz-transform:scale(0.6) rotate(180deg);}
 396   62.5% {-moz-transform:scale(0.6) rotate(180deg);}
 397   62.51% {-moz-transform:scale(0.6) rotate(225deg);}
 398   75% {-moz-transform:scale(0.6) rotate(225deg);}
 399   75.01% {-moz-transform:scale(0.6) rotate(270deg);}
 400   87.5% {-moz-transform:scale(0.6) rotate(270deg);}
 401   87.51% {-moz-transform:scale(0.6) rotate(315deg);}
 402   100% {-moz-transform:scale(0.6) rotate(315deg);}
 403 }
 404 /* Each circle */
 405 div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
 406   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 407
 408 div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
 409   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 410
 411 div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
 412   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 413
 414 div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
 415   border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
 416
 417 div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
 418   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 419
 420 div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
 421   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 422
 423 div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
 424   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 425
 426 div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
 427   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }