b2evolution PHP Cross Reference Blogging Systems

Source: /plugins/html5_videojs_plugin/skins/vjs-default-skin.css - 499 lines - 25243 bytes - Text - Print

   1  /*
   2  VideoJS Default Styles (http://videojs.com)
   3  Version GENERATED_AT_BUILD
   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 */ }

title

Description

title

Description

title

Description

title

title

Body