playful.css 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. @font-face {
  2. font-family: 'fpicons';
  3. src:url('fonts/fpicons.eot?yg5dv7');
  4. src:url('fonts/fpicons.eot?#iefixyg5dv7') format('embedded-opentype'),
  5. url('fonts/fpicons.woff?yg5dv7') format('woff'),
  6. url('fonts/fpicons.ttf?yg5dv7') format('truetype'),
  7. url('fonts/fpicons.svg?yg5dv7#fpicons') format('svg');
  8. font-weight: normal;
  9. font-style: normal;
  10. }
  11. [class^="fp-i-"], [class*=" fp-i-"] {
  12. font-family: 'fpicons';
  13. speak: none;
  14. font-style: normal;
  15. font-weight: normal;
  16. font-variant: normal;
  17. text-transform: none;
  18. line-height: 1;
  19. /* Better Font Rendering =========== */
  20. -webkit-font-smoothing: antialiased;
  21. -moz-osx-font-smoothing: grayscale;
  22. }
  23. .flowplayer{position:relative;width:100%;counter-increment:flowplayer;background-size:contain;background-repeat:no-repeat;background-position:center center;display:inline-block;}
  24. .flowplayer *{font-weight:inherit;font-family:inherit;font-style:inherit;text-decoration:inherit;font-size:100%;padding:0;border:0;margin:0;list-style-type:none}
  25. .flowplayer a:focus{outline:0}
  26. .flowplayer video{width:100%}
  27. .flowplayer.is-ipad video{-webkit-transform:translateX(-2048px);}
  28. .is-ready.flowplayer.is-ipad video{-webkit-transform:translateX(0)}
  29. .flowplayer .fp-player{position:absolute;top:0;left:0;width:100%;height:100%}
  30. .flowplayer .fp-engine,.flowplayer .fp-ui,.flowplayer .fp-message{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:1}
  31. .flowplayer .fp-ui{z-index:11}
  32. .flowplayer .fp-message{display:none;text-align:center;padding-top:5%;cursor:default;}
  33. .flowplayer .fp-message h2{font-size:120%;margin-bottom:1em}
  34. .flowplayer .fp-message p{color:#666;font-size:95%}
  35. .flowplayer .fp-title{line-height:35px;font-weight:normal;font-family:'myriad pro',Helvetica,Arial,sans-serif;font-size:11px;cursor:default;color:#fff;width:auto;max-width:50%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;float:left;padding:0 24px;}
  36. .is-rtl.flowplayer .fp-title{float:right}
  37. .aside-time.flowplayer .fp-title{display:none !important}
  38. .flowplayer .fp-controls{position:absolute;bottom:0;width:100%;}
  39. .no-background.flowplayer .fp-controls{background-color:transparent !important;background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)) !important;background-image:-webkit-linear-gradient(top,transparent,transparent) !important;background-image:-moz-linear-gradient(top,transparent,transparent) !important;background-image:-o-linear-gradient(top,transparent,transparent) !important;background-image:linear-gradient(to bottom,transparent,transparent) !important}
  40. .is-fullscreen.flowplayer .fp-controls{bottom:3px}
  41. .is-mouseover.flowplayer .fp-controls{bottom:0}
  42. .flowplayer .fp-controls,.flowplayer .fp-title,.flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-close,.flowplayer .fp-embed,.flowplayer.aside-time .fp-time{background-color:#000;background-color:rgba(0,0,0,0.65);}
  43. .no-background.flowplayer .fp-controls,.no-background.flowplayer .fp-title,.no-background.flowplayer .fp-fullscreen,.no-background.flowplayer .fp-unload,.no-background.flowplayer .fp-close,.no-background.flowplayer .fp-embed,.no-background.flowplayer.aside-time .fp-time{background-color:transparent !important;background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)) !important;background-image:-webkit-linear-gradient(top,transparent,transparent) !important;background-image:-moz-linear-gradient(top,transparent,transparent) !important;background-image:-o-linear-gradient(top,transparent,transparent) !important;background-image:linear-gradient(to bottom,transparent,transparent) !important;text-shadow:0 0 1px #000}
  44. .no-background.flowplayer .fp-play,.no-background.flowplayer .fp-brand{background-color:transparent !important;background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)) !important;background-image:-webkit-linear-gradient(top,transparent,transparent) !important;background-image:-moz-linear-gradient(top,transparent,transparent) !important;background-image:-o-linear-gradient(top,transparent,transparent) !important;background-image:linear-gradient(to bottom,transparent,transparent) !important;text-shadow:0 0 1px #000}
  45. .flowplayer.fixed-controls .fp-controls{background-color:#000}
  46. .flowplayer .fp-timeline{background-color:#a5a5a5}
  47. .flowplayer .fp-buffer{background-color:#eee}
  48. .flowplayer .fp-progress{background-color:#00a7c8}
  49. .flowplayer .fp-volumeslider{background-color:#a5a5a5}
  50. .flowplayer .fp-volumelevel{background-color:#00a7c8}
  51. .flowplayer .fp-waiting{display:none;margin:19% auto;text-align:center;}
  52. .flowplayer .fp-waiting *{-webkit-box-shadow:0 0 5px #333;-moz-box-shadow:0 0 5px #333;box-shadow:0 0 5px #333}
  53. .flowplayer .fp-waiting em{width:1em;height:1em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;background-color:rgba(255,255,255,0.8);display:inline-block;-webkit-animation:pulse .6s infinite;-moz-animation:pulse .6s infinite;animation:pulse .6s infinite;margin:.3em;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
  54. .flowplayer .fp-waiting em:nth-child(1){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}
  55. .flowplayer .fp-waiting em:nth-child(2){-webkit-animation-delay:.45s;-moz-animation-delay:.45s;animation-delay:.45s}
  56. .flowplayer .fp-waiting em:nth-child(3){-webkit-animation-delay:.6s;-moz-animation-delay:.6s;animation-delay:.6s}
  57. .flowplayer .fp-waiting p{color:#ccc;font-weight:bold}
  58. .flowplayer .fp-speed{font-size:30px;background-color:#333;background-color:rgba(51,51,51,0.8);color:#eee;margin:0 auto;text-align:center;width:120px;padding:.1em 0 0;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;transition:opacity .5s;}
  59. .flowplayer .fp-speed.fp-hilite{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  60. .flowplayer .fp-help{position:absolute;top:0;left:-9999em;z-index:100;background-color:#333;background-color:rgba(51,51,51,0.9);width:100%;height:100%;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s;text-align:center;}
  61. .is-help.flowplayer .fp-help{left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  62. .flowplayer .fp-help .fp-help-section{margin:3%;direction:ltr}
  63. .flowplayer .fp-help .fp-help-basics{margin-top:6%}
  64. .flowplayer .fp-help p{color:#eee;margin:.5em 0;font-size:14px;line-height:1.5;display:inline-block;margin:1% 2%}
  65. .flowplayer .fp-help em{background:#eee;-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em;margin-right:.4em;padding:.3em .6em;color:#333}
  66. .flowplayer .fp-help small{font-size:90%;color:#aaa}
  67. .flowplayer .fp-help .fp-close{display:block}
  68. @media (max-width: 600px){.flowplayer .fp-help p{font-size:9px}
  69. }.flowplayer .fp-dropdown{position:absolute;top:5px;width:100px;background-color:#000 !important;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;box-sizing:border-box;-moz-box-sizing:border-box;margin:0 !important;list-style-type:none !important;}
  70. .flowplayer .fp-dropdown:before{content:'';display:block;position:absolute;top:-5px;left:calc(50% - 5px);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid rgba(51,51,51,0.9)}
  71. .flowplayer .fp-dropdown li{padding:12px !important;margin:0 !important;color:#fff !important;font-size:11px !important;list-style-type:none !important;}
  72. .flowplayer .fp-dropdown li.active{background-color:#00a7c8 !important;cursor:default !important}
  73. .flowplayer .fp-dropdown.fp-dropup{bottom:20px;top:auto;}
  74. .flowplayer .fp-dropdown.fp-dropup:before{top:auto;bottom:-5px;border-bottom:none;border-top:5px solid rgba(51,51,51,0.9)}
  75. .flowplayer .fp-tooltip{background-color:#000;color:#fff;display:none;position:absolute;padding:5px;}
  76. .flowplayer .fp-tooltip:before{content:'';display:block;position:absolute;bottom:-5px;width:0;height:0;left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000}
  77. .flowplayer .fp-timeline-tooltip{bottom:41px}
  78. .flowplayer .fp-timeline:hover+.fp-timeline-tooltip{display:block;}
  79. .is-touch.flowplayer .fp-timeline:hover+.fp-timeline-tooltip{display:none}
  80. .flowplayer .fp-subtitle{position:absolute;bottom:40px;left:-99999em;z-index:10;text-align:center;width:100%;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .3s;-moz-transition:opacity .3s;transition:opacity .3s;}
  81. .flowplayer .fp-subtitle p{display:inline;background-color:#333;background-color:rgba(51,51,51,0.9);color:#eee;padding:.1em .4em;font-size:16px;line-height:1.6;}
  82. .flowplayer .fp-subtitle p:after{content:'';clear:both}
  83. .flowplayer .fp-subtitle p b{font-weight:bold}
  84. .flowplayer .fp-subtitle p i{font-style:italic}
  85. .flowplayer .fp-subtitle p u{text-decoration:underline}
  86. .flowplayer .fp-subtitle.fp-active{left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  87. .flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-mute,.flowplayer .fp-embed,.flowplayer .fp-close,.flowplayer .fp-play,.flowplayer .fp-menu{font-family:'fpicons' !important;color:#fff !important;font-size:15px !important;text-align:center !important;line-height:30px !important;text-decoration:none !important;}
  88. .is-rtl.flowplayer .fp-fullscreen,.is-rtl.flowplayer .fp-unload,.is-rtl.flowplayer .fp-mute,.is-rtl.flowplayer .fp-embed,.is-rtl.flowplayer .fp-close,.is-rtl.flowplayer .fp-play,.is-rtl.flowplayer .fp-menu{-webkit-transform:scale(-1,1);-moz-transform:scale(-1,1);transform:scale(-1,1)}
  89. .is-rtl.flowplayer .fp-menu{-webkit-transform:none;-moz-transform:none;transform:none}
  90. .flowplayer .fp-fullscreen:before{content:"\e602"}
  91. .flowplayer .fp-unload:before,.flowplayer .fp-close:before{content:"\e600"}
  92. .flowplayer .fp-mute:before{content:"\e606"}
  93. .flowplayer .fp-embed:before{content:"\e603"}
  94. .flowplayer .fp-play:before{content:"\e608"}
  95. .flowplayer .fp-menu:before{content:"\e604"}
  96. .flowplayer .fp-flash-disabled{background:#333;width:390px;margin:0 auto;position:absolute;bottom:0;color:#fff}
  97. .is-splash.flowplayer .fp-ui,.is-paused.flowplayer .fp-ui{background:url(img/play_white.png) center no-repeat;background-size:11%;}
  98. .is-rtl.is-splash.flowplayer .fp-ui,.is-rtl.is-paused.flowplayer .fp-ui{background:url(img/play_white_rtl.png) center no-repeat;background-size:11%}
  99. @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){.is-splash.flowplayer .fp-ui,.is-paused.flowplayer .fp-ui{background:url(img/play_white@x2.png) center no-repeat;background-size:11%}
  100. .is-rtl.is-splash.flowplayer .fp-ui,.is-rtl.is-paused.flowplayer .fp-ui{background:url(img/play_white_rtl@x2.png) center no-repeat;background-size:11%}
  101. }.is-fullscreen.flowplayer .fp-ui{background-size:auto}
  102. .is-seeking.flowplayer .fp-ui,.is-loading.flowplayer .fp-ui{background-image:none}
  103. .flowplayer .fp-brand{color:#fff !important;position:absolute;right:124px;font-weight:normal !important;font-family:'myriad pro',Helvetica,Arial,sans-serif !important;text-decoration:none !important;line-height:15px !important;font-size:11px !important;height:15px;width:55px;bottom:11px;box-sizing:border-box;text-align:center;padding:1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
  104. .has-menu.flowplayer .fp-brand{right:161px}
  105. .is-rtl.flowplayer .fp-brand{right:auto;left:134px}
  106. .has-menu.is-rtl.flowplayer .fp-brand{left:161px}
  107. .no-brand.flowplayer .fp-brand{display:none}
  108. .no-volume.no-mute.flowplayer .fp-brand{right:12px;}
  109. .has-menu.no-volume.no-mute.flowplayer .fp-brand{right:51px}
  110. .no-volume.flowplayer .fp-brand{right:62px}
  111. .no-mute.flowplayer .fp-brand{right:99px}
  112. .flowplayer .fp-logo{position:absolute;top:auto;left:15px;bottom:45px;cursor:pointer;display:none;z-index:100;}
  113. .flowplayer .fp-logo img{width:100%}
  114. .is-embedded.flowplayer .fp-logo{display:block}
  115. .fixed-controls.flowplayer .fp-logo{bottom:15px}
  116. .flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-close{position:absolute;top:12px;left:auto;right:12px;display:block;width:30px;height:23px;text-align:center;cursor:pointer;height:35px;width:35px;}
  117. .is-rtl.flowplayer .fp-fullscreen,.is-rtl.flowplayer .fp-unload,.is-rtl.flowplayer .fp-close{right:auto;left:12px}
  118. .flowplayer .fp-unload,.flowplayer .fp-close{display:none}
  119. .flowplayer .fp-play{display:none;height:35px !important;position:absolute;bottom:0;left:0;text-align:center;}
  120. .is-rtl.flowplayer .fp-play{left:auto;right:0}
  121. .is-playing.flowplayer .fp-play:before{content:"\e607"}
  122. .flowplayer .fp-menu{display:none;position:absolute;bottom:0;z-index:11;right:12px;}
  123. .is-rtl.flowplayer .fp-menu{right:auto;left:12px}
  124. .has-menu.flowplayer .fp-menu{display:block}
  125. .flowplayer .fp-menu .fp-dropdown{z-index:12;display:none;left:-42.5px;line-height:auto;width:153px;-webkit-transform:none;-moz-transform:none;transform:none;}
  126. .is-rtl.flowplayer .fp-menu .fp-dropdown{left:-12px}
  127. .flowplayer .fp-menu.dropdown-open .fp-dropdown{display:block}
  128. .flowplayer.is-ready.is-closeable .fp-unload{display:block}
  129. .flowplayer.is-ready.is-closeable .fp-embed{right:106px}
  130. .flowplayer.is-ready.is-closeable .fp-fullscreen{right:59px}
  131. .flowplayer.is-ready.is-closeable.is-rtl .fp-embed{right:auto;left:106px}
  132. .flowplayer.is-ready.is-closeable.is-rtl .fp-fullscreen{right:auto;left:59px}
  133. .flowplayer.is-fullscreen .fp-fullscreen{display:block !important;}
  134. .flowplayer.is-fullscreen .fp-fullscreen:before{content:"\e601"}
  135. .flowplayer .fp-timeline{height:3px;position:relative;overflow:hidden;top:12px;height:11px;margin:0 238px 0 59px;}
  136. .no-brand.flowplayer .fp-timeline{margin-right:171px;}
  137. .has-menu.no-brand.flowplayer .fp-timeline{margin-right:198px}
  138. .no-volume.no-brand.flowplayer .fp-timeline{margin-right:109px}
  139. .no-mute.no-brand.flowplayer .fp-timeline{margin-right:133px}
  140. .no-mute.no-volume.no-brand.flowplayer .fp-timeline{margin-right:59px}
  141. .has-menu.flowplayer .fp-timeline{margin-right:265px}
  142. .no-volume.flowplayer .fp-timeline{margin-right:176px}
  143. .no-mute.flowplayer .fp-timeline{margin-right:200px}
  144. .no-mute.no-volume.flowplayer .fp-timeline{margin-right:126px;}
  145. .has-menu.no-mute.no-volume.flowplayer .fp-timeline{margin-right:165px}
  146. .is-rtl.flowplayer .fp-timeline{margin:0 59px 0 238px;}
  147. .no-brand.is-rtl.flowplayer .fp-timeline{margin-left:171px;}
  148. .has-menu.no-brand.is-rtl.flowplayer .fp-timeline{margin-left:210px}
  149. .has-menu.is-rtl.flowplayer .fp-timeline{margin-left:277px}
  150. .no-volume.is-rtl.flowplayer .fp-timeline{margin-left:109px}
  151. .no-mute.is-rtl.flowplayer .fp-timeline{margin-left:133px}
  152. .no-mute.no-volume.is-rtl.flowplayer .fp-timeline{margin-left:59px}
  153. .is-long.flowplayer .fp-timeline{margin:0 268px 0 89px;}
  154. .no-volume.is-long.flowplayer .fp-timeline{margin-right:194px}
  155. .no-mute.is-long.flowplayer .fp-timeline{margin-right:144px}
  156. .has-menu.is-long.flowplayer .fp-timeline{margin-right:307px}
  157. .no-brand.is-long.flowplayer .fp-timeline{margin-right:201px;}
  158. .no-volume.no-brand.is-long.flowplayer .fp-timeline{margin-right:139px}
  159. .no-mute.no-brand.is-long.flowplayer .fp-timeline{margin-right:89px}
  160. .has-menu.no-brand.is-long.flowplayer .fp-timeline{margin-right:240px}
  161. .is-rtl.is-long.flowplayer .fp-timeline{margin:89px 0 201px 0;}
  162. .no-volume.is-rtl.is-long.flowplayer .fp-timeline{margin-left:139px}
  163. .no-mute.is-rtl.is-long.flowplayer .fp-timeline{margin-left:89px}
  164. .aside-time.flowplayer .fp-timeline,.no-time.flowplayer .fp-timeline{margin:0 203px 0 12px;}
  165. .has-menu.aside-time.flowplayer .fp-timeline,.has-menu.no-time.flowplayer .fp-timeline{margin-right:242px}
  166. .aside-time.no-brand.flowplayer .fp-timeline{margin-right:124px}
  167. .aside-time.no-volume.flowplayer .fp-timeline,.no-time.no-volume.flowplayer .fp-timeline{margin-right:129px}
  168. .aside-time.no-mute.flowplayer .fp-timeline,.no-time.no-mute.flowplayer .fp-timeline{margin-right:79px}
  169. .is-rtl.aside-time.flowplayer .fp-timeline,.is-rtl.no-time.flowplayer .fp-timeline{margin:0 12px 0 124px}
  170. .is-rtl.aside-time.no-volume.flowplayer .fp-timeline,.is-rtl.no-time.no-volume.flowplayer .fp-timeline{margin-left:62px}
  171. .is-rtl.aside-time.no-mute.flowplayer .fp-timeline,.is-rtl.no-time.no-mute.flowplayer .fp-timeline{margin-left:12px}
  172. .flowplayer .fp-buffer,.flowplayer .fp-progress{position:absolute;top:0;left:auto;height:100%;cursor:col-resize}
  173. .flowplayer .fp-buffer{-webkit-transition:width .25s linear;-moz-transition:width .25s linear;transition:width .25s linear}
  174. .flowplayer .fp-timeline.no-animation .fp-buffer{-webkit-transition:none;-moz-transition:none;transition:none}
  175. .flowplayer .fp-progress.animated{transition-timing-function:linear;transition-property:width,height}
  176. .flowplayer.is-touch .fp-timeline{overflow:visible}
  177. .flowplayer.is-touch .fp-progress{-webkit-transition:width .2s linear;-moz-transition:width .2s linear;transition:width .2s linear;box-sizing:border-box}
  178. .flowplayer.is-touch .fp-timeline.is-dragging .fp-progress{-webkit-transition:right .1s linear,border .1s linear,top .1s linear,left .1s linear;-moz-transition:right .1s linear,border .1s linear,top .1s linear,left .1s linear;transition:right .1s linear,border .1s linear,top .1s linear,left .1s linear}
  179. .flowplayer.is-touch.is-mouseover .fp-progress:after,.flowplayer.is-touch.is-mouseover .fp-progress:before{content:'';box-sizing:border-box;display:block;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;position:absolute;right:-5px}
  180. .flowplayer.is-touch.is-rtl.is-mouseover .fp-progress:after,.flowplayer.is-touch.is-rtl.is-mouseover .fp-progress:before{right:auto;left:-5px}
  181. .flowplayer.is-touch.is-rtl.is-mouseover .fp-progress:after{left:-10px;-webkit-box-shadow:-1px 0 4px rgba(0,0,0,0.5);-moz-box-shadow:-1px 0 4px rgba(0,0,0,0.5);box-shadow:-1px 0 4px rgba(0,0,0,0.5)}
  182. .flowplayer.is-touch.is-mouseover .fp-progress:before{width:10px;height:10px}
  183. .flowplayer.is-touch.is-mouseover .fp-progress:after{height:18px;width:18px;top:-4px;right:-10px;border:5px solid rgba(255,255,255,0.65);-webkit-box-shadow:1px 0 4px rgba(0,0,0,0.5);-moz-box-shadow:1px 0 4px rgba(0,0,0,0.5);box-shadow:1px 0 4px rgba(0,0,0,0.5)}
  184. .flowplayer.is-touch.is-mouseover .fp-timeline.is-dragging .fp-progress:after{border:10px solid #fff;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-transition:inherit;-moz-transition:inherit;transition:inherit;top:-5px;right:-10px}
  185. .flowplayer.is-touch.is-rtl.is-mouseover .fp-timeline.is-dragging .fp-progress:after{left:-15px;right:auto;border:10px solid #fff}
  186. .flowplayer .fp-volume{position:absolute;height:11px;bottom:12px;right:12px;}
  187. .has-menu.flowplayer .fp-volume{right:39px}
  188. .is-rtl.flowplayer .fp-volume{right:auto;left:12px}
  189. .is-rtl.has-menu.flowplayer .fp-volume{left:39px}
  190. .flowplayer .fp-mute{position:relative;width:38px;height:20px;float:left;top:-4.5px;cursor:pointer;}
  191. .is-rtl.flowplayer .fp-mute{float:right}
  192. .no-mute.flowplayer .fp-mute{display:none}
  193. .flowplayer .fp-volumeslider{width:75px;height:11px;cursor:col-resize;float:left;}
  194. .is-rtl.flowplayer .fp-volumeslider{float:right}
  195. .no-volume.flowplayer .fp-volumeslider{display:none}
  196. .flowplayer .fp-volumelevel{height:100%}
  197. .flowplayer .fp-time{text-shadow:0 0 1px #000;font-size:11px;font-weight:normal;font-family:'myriad pro',Helvetica,Arial,sans-serif !important;color:#fff;width:100%;}
  198. .flowplayer .fp-time.is-inverted .fp-duration{display:none}
  199. .flowplayer .fp-time.is-inverted .fp-remaining{display:inline}
  200. .flowplayer .fp-time em{width:35px;height:11px;line-height:11px;text-align:center;position:absolute;bottom:11px}
  201. .no-time.flowplayer .fp-time{display:none}
  202. .is-long.flowplayer .fp-time em{width:65px}
  203. .flowplayer .fp-elapsed{left:12px;}
  204. .is-rtl.flowplayer .fp-elapsed{left:auto;right:12px}
  205. .flowplayer .fp-remaining,.flowplayer .fp-duration{right:191px;color:#eee;}
  206. .no-brand.flowplayer .fp-remaining,.no-brand.flowplayer .fp-duration{right:136px;}
  207. .has-menu.no-brand.flowplayer .fp-remaining,.has-menu.no-brand.flowplayer .fp-duration{right:163px}
  208. .no-volume.no-brand.flowplayer .fp-remaining,.no-volume.no-brand.flowplayer .fp-duration{right:62px}
  209. .no-mute.no-brand.flowplayer .fp-remaining,.no-mute.no-brand.flowplayer .fp-duration{right:99px}
  210. .no-mute.no-volume.no-brand.flowplayer .fp-remaining,.no-mute.no-volume.no-brand.flowplayer .fp-duration{right:12px}
  211. .has-menu.flowplayer .fp-remaining,.has-menu.flowplayer .fp-duration{right:230px}
  212. .no-volume.flowplayer .fp-remaining,.no-volume.flowplayer .fp-duration{right:129px}
  213. .no-mute.flowplayer .fp-remaining,.no-mute.flowplayer .fp-duration{right:166px}
  214. .no-mute.no-volume.flowplayer .fp-remaining,.no-mute.no-volume.flowplayer .fp-duration{right:79px;}
  215. .has-menu.no-mute.no-volume.flowplayer .fp-remaining,.has-menu.no-mute.no-volume.flowplayer .fp-duration{right:118px}
  216. .is-rtl.flowplayer .fp-remaining,.is-rtl.flowplayer .fp-duration{right:auto;left:191px;}
  217. .no-brand.is-rtl.flowplayer .fp-remaining,.no-brand.is-rtl.flowplayer .fp-duration{left:124px;}
  218. .has-menu.no-brand.is-rtl.flowplayer .fp-remaining,.has-menu.no-brand.is-rtl.flowplayer .fp-duration{left:151px}
  219. .has-menu.is-rtl.flowplayer .fp-remaining,.has-menu.is-rtl.flowplayer .fp-duration{left:242px}
  220. .no-volume.is-rtl.flowplayer .fp-remaining,.no-volume.is-rtl.flowplayer .fp-duration{left:62px}
  221. .no-mute.is-rtl.flowplayer .fp-remaining,.no-mute.is-rtl.flowplayer .fp-duration{left:99px}
  222. .no-mute.no-volume.is-rtl.flowplayer .fp-remaining,.no-mute.no-volume.is-rtl.flowplayer .fp-duration{left:12px}
  223. .flowplayer .fp-remaining{display:none}
  224. .flowplayer.aside-time .fp-time{position:absolute;top:12px;left:12px;bottom:auto !important;width:auto;background-color:#000;background-color:rgba(0,0,0,0.65);height:35px;padding:0 5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:35px;text-align:center;font-size:15px;}
  225. .no-background.flowplayer.aside-time .fp-time{background-color:transparent !important}
  226. .flowplayer.aside-time .fp-time strong,.flowplayer.aside-time .fp-time em{position:static}
  227. .flowplayer.aside-time .fp-time .fp-elapsed::after{content:' / '}
  228. .flowplayer.is-splash,.flowplayer.is-poster{cursor:pointer;}
  229. .flowplayer.is-splash .fp-controls,.flowplayer.is-poster .fp-controls,.flowplayer.is-splash .fp-fullscreen,.flowplayer.is-poster .fp-fullscreen,.flowplayer.is-splash .fp-unload,.flowplayer.is-poster .fp-unload,.flowplayer.is-splash .fp-time,.flowplayer.is-poster .fp-time,.flowplayer.is-splash .fp-embed,.flowplayer.is-poster .fp-embed,.flowplayer.is-splash .fp-title,.flowplayer.is-poster .fp-title,.flowplayer.is-splash .fp-brand,.flowplayer.is-poster .fp-brand{display:none !important}
  230. .flowplayer.is-poster .fp-engine{top:-9999em}
  231. .flowplayer.is-loading .fp-waiting{display:block}
  232. .flowplayer.is-loading .fp-controls,.flowplayer.is-loading .fp-time{display:none}
  233. .flowplayer.is-loading .fp-ui{background-position:-9999em}
  234. .flowplayer.is-loading video.fp-engine{position:absolute;top:-9999em}
  235. .flowplayer.is-seeking .fp-waiting{display:block}
  236. .flowplayer.is-playing{background-image:none !important;background-color:#333;}
  237. .flowplayer.is-playing.hls-fix.is-finished .fp-engine{position:absolute;top:-9999em}
  238. .flowplayer.is-fullscreen{top:0 !important;left:0 !important;border:0 !important;margin:0 !important;width:100% !important;height:100% !important;max-width:100% !important;z-index:99999 !important;-webkit-box-shadow:0 !important;-moz-box-shadow:0 !important;box-shadow:0 !important;background-image:none !important;background-color:#333;}
  239. .is-rtl.flowplayer.is-fullscreen{left:auto !important;right:0 !important}
  240. .flowplayer.is-fullscreen .fp-player{background-color:#333}
  241. .flowplayer.is-error{border:1px solid #909090;background:#fdfdfd !important;}
  242. .flowplayer.is-error h2{font-weight:bold;font-size:large;margin-top:10%}
  243. .flowplayer.is-error .fp-message{display:block}
  244. .flowplayer.is-error object,.flowplayer.is-error video,.flowplayer.is-error .fp-controls,.flowplayer.is-error .fp-time,.flowplayer.is-error .fp-subtitle{display:none}
  245. .flowplayer.is-ready.is-muted .fp-mute{opacity:.7;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70)}
  246. .flowplayer.is-ready.is-muted .fp-mute:before{content:"\e605"}
  247. .flowplayer.is-mouseout .fp-controls{height:0;-webkit-transition:height .15s .3s;-moz-transition:height .15s .3s;transition:height .15s .3s}
  248. .is-fullscreen.flowplayer.is-mouseout .fp-controls{height:3px;bottom:0}
  249. .flowplayer.is-mouseout .fp-title{overflow:hidden}
  250. .flowplayer.is-mouseout .fp-timeline{margin:0 !important}
  251. .flowplayer.is-mouseout .fp-timeline{-webkit-transition:height .15s .3s,top .15s .3s,margin .15s .3s;-moz-transition:height .15s .3s,top .15s .3s,margin .15s .3s;transition:height .15s .3s,top .15s .3s,margin .15s .3s;height:4px;top:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
  252. .flowplayer.is-mouseout .fp-fullscreen,.flowplayer.is-mouseout .fp-unload,.flowplayer.is-mouseout .fp-elapsed,.flowplayer.is-mouseout .fp-remaining,.flowplayer.is-mouseout .fp-duration,.flowplayer.is-mouseout .fp-embed,.flowplayer.is-mouseout .fp-title,.flowplayer.is-mouseout .fp-volume,.flowplayer.is-mouseout .fp-play,.flowplayer.is-mouseout .fp-menu,.flowplayer.is-mouseout .fp-brand,.flowplayer.is-mouseout .fp-timeline-tooltip,.flowplayer.is-mouseout.aside-time .fp-time{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .15s .3s;-moz-transition:opacity .15s .3s;transition:opacity .15s .3s}
  253. .flowplayer.is-mouseover .fp-controls,.flowplayer.fixed-controls .fp-controls{height:35px}
  254. .flowplayer.is-mouseover .fp-title,.flowplayer.fixed-controls .fp-title{height:35px}
  255. .flowplayer.is-mouseover .fp-fullscreen,.flowplayer.fixed-controls .fp-fullscreen,.flowplayer.is-mouseover .fp-unload,.flowplayer.fixed-controls .fp-unload,.flowplayer.is-mouseover .fp-elapsed,.flowplayer.fixed-controls .fp-elapsed,.flowplayer.is-mouseover .fp-remaining,.flowplayer.fixed-controls .fp-remaining,.flowplayer.is-mouseover .fp-duration,.flowplayer.fixed-controls .fp-duration,.flowplayer.is-mouseover .fp-embed,.flowplayer.fixed-controls .fp-embed,.flowplayer.is-mouseover .fp-logo,.flowplayer.fixed-controls .fp-logo,.flowplayer.is-mouseover .fp-volume,.flowplayer.fixed-controls .fp-volume,.flowplayer.is-mouseover .fp-play,.flowplayer.fixed-controls .fp-play,.flowplayer.is-mouseover .fp-menu,.flowplayer.fixed-controls .fp-menu{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  256. .flowplayer.fixed-controls .fp-volume{display:block}
  257. .flowplayer.fixed-controls .fp-controls{bottom:-35px;}
  258. .is-fullscreen.flowplayer.fixed-controls .fp-controls{bottom:0}
  259. .flowplayer.fixed-controls .fp-time em{bottom:-23px;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
  260. .is-fullscreen.flowplayer.fixed-controls .fp-time em{bottom:12px}
  261. .flowplayer.is-disabled .fp-progress{background-color:#999}
  262. .flowplayer.is-flash-disabled{background-color:#333;}
  263. .flowplayer.is-flash-disabled object.fp-engine{z-index:100}
  264. .flowplayer.is-flash-disabled .fp-flash-disabled{display:block;z-index:101}
  265. .flowplayer .fp-embed{position:absolute;top:12px;left:auto;right:59px;display:block;width:35px;height:35px;text-align:center;}
  266. .is-rtl.flowplayer .fp-embed{right:auto;left:59px}
  267. .flowplayer .fp-embed-code{position:absolute;display:none;top:10px;right:77px;background-color:#333;padding:3px 5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 3px #ccc;-moz-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc;font-size:12px;}
  268. .is-closeable.flowplayer .fp-embed-code{right:114px}
  269. .flowplayer .fp-embed-code:before{content:'';width:0;height:0;position:absolute;top:2px;right:-10px;border:5px solid transparent;border-left-color:#333}
  270. .is-rtl.flowplayer .fp-embed-code{right:auto;left:77px;}
  271. .is-rtl.flowplayer .fp-embed-code:before{right:auto;left:-10px;border-left-color:transparent;border-right-color:#333}
  272. .flowplayer .fp-embed-code textarea{width:400px;height:16px;font-family:monaco,"courier new",verdana;color:#777;white-space:nowrap;resize:none;overflow:hidden;border:0;outline:0;background-color:transparent;color:#ccc}
  273. .flowplayer .fp-embed-code label{display:block;color:#999}
  274. .flowplayer.is-embedding .fp-embed,.flowplayer.is-embedding .fp-embed-code{display:block;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  275. .flowplayer.no-time .fp-embed{left:12px !important;}
  276. .is-rtl.flowplayer.no-time .fp-embed{left:auto;right:12px !important}
  277. .flowplayer.is-live .fp-timeline,.flowplayer.is-live .fp-duration,.flowplayer.is-live .fp-remaining{display:none}
  278. .flowplayer .fp-context-menu{position:absolute;display:none;z-index:1001;background-color:#fff;padding:10px;border:1px solid #aaa;-webkit-box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;box-shadow:0 0 4px #888;width:170px;}
  279. .flowplayer .fp-context-menu li{text-align:center !important;padding:10px;color:#444 !important;font-size:11px !important;margin:0 -10px 0 -10px;}
  280. .flowplayer .fp-context-menu li a{color:#00a7c8 !important;font-size:12.100000000000001px !important}
  281. .flowplayer .fp-context-menu li:hover:not(.copyright){background-color:#eee}
  282. .flowplayer .fp-context-menu li.copyright{margin:0;padding-left:110px;background-image:url("img/flowplayer.png");background-repeat:no-repeat;background-size:100px 20px;background-position:5px 5px;border-bottom:1px solid #bbb;}
  283. @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){.flowplayer .fp-context-menu li.copyright{background-image:url("img/flowplayer@2x.png")}
  284. }@-moz-keyframes pulse{0%{opacity:0}
  285. 100%{opacity:1}
  286. }@-webkit-keyframes pulse{0%{opacity:0}
  287. 100%{opacity:1}
  288. }@-o-keyframes pulse{0%{opacity:0}
  289. 100%{opacity:1}
  290. }@-ms-keyframes pulse{0%{opacity:0}
  291. 100%{opacity:1}
  292. }@keyframes pulse{0%{opacity:0}
  293. 100%{opacity:1}
  294. }.flowplayer.is-touch.is-mouseover .fp-progress:before{background-color:#00a7c8}
  295. .flowplayer .fp-title{position:absolute;top:12px;left:12px;}
  296. .is-rtl.flowplayer .fp-title{left:auto;right:12px}
  297. .flowplayer .fp-title,.flowplayer .fp-unload,.flowplayer .fp-fullscreen,.flowplayer .fp-embed{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
  298. .flowplayer .fp-embed-code{right:99px;}
  299. .is-closeable.flowplayer .fp-embed-code{right:146px}
  300. .is-rtl.flowplayer .fp-embed-code{right:auto;left:99px}
  301. .flowplayer.is-mouseout .fp-menu{display:none}
  302. .flowplayer.is-mouseout .fp-controls{-webkit-transition:none;-moz-transition:none;transition:none;-webkit-animation:functional-controls-hide 1s 1;-moz-animation:functional-controls-hide 1s 1;animation:functional-controls-hide 1s 1}
  303. .flowplayer.is-mouseout .fp-timeline{-webkit-transition:none;-moz-transition:none;transition:none}
  304. .flowplayer.is-mouseout .fp-volume,.flowplayer.is-mouseout .fp-brand,.flowplayer.is-mouseout .fp-play,.flowplayer.is-mouseout .fp-time{-webkit-transition:none;-moz-transition:none;transition:none;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
  305. .flowplayer.fixed-controls .fp-elapsed,.flowplayer.fixed-controls.is-mouseover .fp-elapsed{left:59px}
  306. .flowplayer.fixed-controls .fp-controls,.flowplayer.fixed-controls.is-mouseover .fp-controls{bottom:-35px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;left:0;right:0;}
  307. .is-fullscreen.flowplayer.fixed-controls .fp-controls,.is-fullscreen.flowplayer.fixed-controls.is-mouseover .fp-controls{bottom:0}
  308. .flowplayer.fixed-controls .fp-controls .fp-play,.flowplayer.fixed-controls.is-mouseover .fp-controls .fp-play{left:12px}
  309. .flowplayer.fixed-controls .fp-controls .fp-timeline,.flowplayer.fixed-controls.is-mouseover .fp-controls .fp-timeline{margin-left:106px;}
  310. .is-long.flowplayer.fixed-controls .fp-controls .fp-timeline,.is-long.flowplayer.fixed-controls.is-mouseover .fp-controls .fp-timeline{margin-left:136px}
  311. .flowplayer.is-mouseover .fp-controls{bottom:12px;left:59px;right:12px;width:auto;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
  312. .is-rtl.flowplayer.is-mouseover .fp-controls{left:12px;right:59px}
  313. .flowplayer.is-mouseover .fp-controls .fp-play{left:-47px;display:block;background-color:#000;background-color:rgba(0,0,0,0.65);width:35px;height:35px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
  314. .is-rtl.flowplayer.is-mouseover .fp-controls .fp-play{left:auto;right:-47px}
  315. .flowplayer.is-mouseover .fp-controls .fp-timeline{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
  316. .flowplayer.is-mouseover .fp-controls .fp-timeline .fp-progress,.flowplayer.is-mouseover .fp-controls .fp-timeline .fp-buffer{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
  317. .flowplayer.is-mouseover .fp-controls .fp-menu .fp-dropdown{bottom:41px;left:auto;right:-12px;}
  318. .is-rtl.flowplayer.is-mouseover .fp-controls .fp-menu .fp-dropdown{right:auto;left:-12px}
  319. .flowplayer.is-mouseover .fp-controls .fp-menu .fp-dropdown:before{display:none}
  320. .flowplayer.is-mouseover .fp-controls li{border-color:#000;}
  321. .flowplayer.is-mouseover .fp-controls li.active{border-color:#00a7c8}
  322. .flowplayer.is-mouseover .fp-controls li:last-child:before{content:'';display:block;position:absolute;bottom:-5px;width:0;height:0;right:12px;border-bottom:none;border-top-width:5px;border-top-style:solid;border-top-color:inherit;border-left:5px solid transparent;border-right:5px solid transparent;}
  323. .is-rtl.flowplayer.is-mouseover .fp-controls li:last-child:before{right:auto;left:12px}
  324. .flowplayer .fp-elapsed,.flowplayer.play-button .fp-elapsed{left:71px;}
  325. .is-rtl.flowplayer .fp-elapsed,.is-rtl.flowplayer.play-button .fp-elapsed{right:71px;left:auto}
  326. .flowplayer .fp-time em{bottom:23px}
  327. @-moz-keyframes functional-controls-hide{0%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
  328. 100%{bottom:0;right:0;left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  329. }@-webkit-keyframes functional-controls-hide{0%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
  330. 100%{bottom:0;right:0;left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  331. }@-o-keyframes functional-controls-hide{0%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
  332. 100%{bottom:0;right:0;left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  333. }@-ms-keyframes functional-controls-hide{0%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
  334. 100%{bottom:0;right:0;left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  335. }@keyframes functional-controls-hide{0%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
  336. 100%{bottom:0;right:0;left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
  337. }.flowplayer .fp-controls,.flowplayer .fp-title,.flowplayer .fp-embed,.flowplayer .fp-play,.flowplayer .fp-fullscreen,.flowplayer .fp-close,.flowplayer.aside-time .fp-time,.flowplayer .fp-unload{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(136,136,136,0.85)),to(rgba(0,0,0,0.85)));background-image:-webkit-linear-gradient(top,rgba(136,136,136,0.85),rgba(0,0,0,0.85));background-image:-moz-linear-gradient(top,rgba(136,136,136,0.85),rgba(0,0,0,0.85));background-image:-o-linear-gradient(top,rgba(136,136,136,0.85),rgba(0,0,0,0.85));background-image:linear-gradient(to bottom,rgba(136,136,136,0.85),rgba(0,0,0,0.85));color:#eee !important;}
  338. .flowplayer .fp-controls:before,.flowplayer .fp-title:before,.flowplayer .fp-embed:before,.flowplayer .fp-play:before,.flowplayer .fp-fullscreen:before,.flowplayer .fp-close:before,.flowplayer.aside-time .fp-time:before,.flowplayer .fp-unload:before{color:#eee}
  339. .flowplayer .fp-dropdown{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
  340. .flowplayer .fp-dropdown li:last-child{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
  341. .flowplayer .fp-fullscreen:before,.flowplayer .fp-unload:before,.flowplayer .fp-mute:before,.flowplayer .fp-embed:before,.flowplayer .fp-close:before,.flowplayer .fp-play:before,.flowplayer .fp-menu:before{vertical-align:-2px}
  342. .flowplayer .fp-controls .fp-menu{bottom:3px;}
  343. .is-mouseover.flowplayer .fp-controls .fp-menu .fp-dropdown{bottom:36px}
  344. .flowplayer .fp-volumeslider{height:8px;margin-top:1px;margin-left:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
  345. .flowplayer .fp-volumeslider .fp-volumelevel{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
  346. .flowplayer .fp-mute{top:-9.5px;}
  347. .flowplayer .fp-mute:before{content:"\e60c";vertical-align:0;}
  348. .is-muted.is-ready.flowplayer .fp-mute:before{content:"\e60c";color:#ccc}
  349. .flowplayer .fp-mute:after{content:'';background-color:#9ebb11;width:6px;height:6px;display:block;position:absolute;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;right:2px;top:11px;}
  350. .is-muted.flowplayer .fp-mute:after{background-color:#f00}