2 VideoJS Default Styles (http://videojs.com)
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.
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. **
17 background-color: #000; position: relative; padding: 0;
19 /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
22 /* Allow poster to be vertially aligned. */
23 vertical-align: middle;
24 /* display: table-cell; */ /*This works in Safari but not Firefox.*/
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%; }
30 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
31 .video-js:-moz-full-screen { position: absolute; }
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 */
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) */
42 .video-js:-webkit-full-screen {
43 width: 100% !important; height: 100% !important;
48 margin: 0 auto; padding: 0; cursor: pointer;
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%;
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);
63 .video-js .vjs-subtitles { color: #fff; }
64 .video-js .vjs-captions { color: #fc6; }
65 .vjs-tt-cue { display: block; }
67 /* Fading sytles, used to fade control bar. */
69 visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
70 opacity: 1 !important;
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;
79 visibility: hidden !important;
80 opacity: 0 !important;
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;
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. */
94 /* The default control bar. Created by bar.js */
95 .vjs-default-skin .vjs-controls {
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;
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 */
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. */
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;
128 .vjs-default-skin .vjs-control:focus {
130 /* background-color: #555;*/
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; }
138 -------------------------------------------------------------------------------- */
139 .vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
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; }
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; }
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; }
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;
162 -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
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);
172 .vjs-default-skin .vjs-volume-level {
173 position: absolute; top: 0; left: 0; height: 0.6em;
175 -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
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);
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;
192 -------------------------------------------------------------------------------- */
193 .vjs-default-skin div.vjs-progress-control {
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;
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);
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);*/
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 */
220 -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
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);
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;
240 .vjs-default-skin .vjs-play-progress {
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%);
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%);
259 .vjs-default-skin .vjs-load-progress {
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);
272 .vjs-default-skin div.vjs-seek-handle {
274 width: 16px; height: 16px; /* Match img pixles */
276 left: 0; top: 0; /*Needed for IE6*/
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;
282 -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
285 -------------------------------------------------------------------------------- */
286 .vjs-default-skin .vjs-time-controls {
289 height: 1.0em; width: 4.8em;
291 border-bottom: 1px solid #1F1F1F;
292 border-top: 1px solid #222;
293 background-color: #333;
295 font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
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);
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);*/
309 .vjs-default-skin .vjs-current-time { left: 0; }
311 .vjs-default-skin .vjs-duration { right: 0; display: none; }
312 .vjs-default-skin .vjs-remaining-time { right: 0; }
314 .vjs-time-divider { display:none; }
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 */ }
320 -------------------------------------------------------------------------------- */
321 .vjs-secondary-controls { float: right; }
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; }
326 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
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;
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%);
347 -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
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;
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;
362 ---------------------------------------------------------*/
363 /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
364 .vjs-loading-spinner {
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;
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);}
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);}
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; }
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; }
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; }
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; }
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; }
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; }
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; }
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; }
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;
445 border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
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%);
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; }
458 /* Button Pop-up Menu */
459 .vjs-default-skin .vjs-menu-button ul {
460 display: none; /* Start hidden. Hover will show. */
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;
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;
483 color: #fff; font-weight: bold;
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%);
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 */ }