mediagoblin/static/css/vjs-mg-skin.css

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