gyorgy@0: .mejs-container { gyorgy@0: position: relative; gyorgy@0: background: #000; gyorgy@0: font-family: Helvetica, Arial; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-container-fullscreen { gyorgy@0: position: fixed; gyorgy@0: left: 0; gyorgy@0: top: 0; gyorgy@0: right: 0; gyorgy@0: bottom: 0; gyorgy@0: overflow: hidden; gyorgy@0: } gyorgy@0: .mejs-container-fullscreen .mejs-mediaelement, gyorgy@0: .mejs-container-fullscreen video { gyorgy@0: width: 100%; gyorgy@0: height: 100%; gyorgy@0: } gyorgy@0: gyorgy@0: /* Start: LAYERS */ gyorgy@0: .mejs-background { gyorgy@0: position: absolute; gyorgy@0: top: 0; gyorgy@0: left: 0; gyorgy@0: } gyorgy@0: .mejs-mediaelement { gyorgy@0: position: absolute; gyorgy@0: top: 0; gyorgy@0: left: 0; gyorgy@0: width: 100%; gyorgy@0: height: 100%; gyorgy@0: } gyorgy@0: .mejs-poster { gyorgy@0: position: absolute; gyorgy@0: top: 0; gyorgy@0: left: 0; gyorgy@0: } gyorgy@0: .mejs-overlay { gyorgy@0: position: absolute; gyorgy@0: top: 0; gyorgy@0: left: 0; gyorgy@0: } gyorgy@0: .mejs-overlay-play { gyorgy@0: cursor: pointer; gyorgy@0: } gyorgy@0: .mejs-overlay-button { gyorgy@0: position: absolute; gyorgy@0: top: 50%; gyorgy@0: left: 50%; gyorgy@0: width: 100px; gyorgy@0: height: 100px; gyorgy@0: margin: -50px 0 0 -50px; gyorgy@0: background: url(bigplay.png) top left no-repeat; gyorgy@0: } gyorgy@0: .mejs-overlay:hover .mejs-overlay-button{ gyorgy@0: background-position: 0 -100px ; gyorgy@0: } gyorgy@0: .mejs-overlay-loading { gyorgy@0: position: absolute; gyorgy@0: top: 50%; gyorgy@0: left: 50%; gyorgy@0: width: 80px; gyorgy@0: height: 80px; gyorgy@0: margin: -40px 0 0 -40px; gyorgy@0: background: #333; gyorgy@0: background: url(background.png); gyorgy@0: background: rgba(0, 0, 0, 0.9); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9))); gyorgy@0: background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); gyorgy@0: background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9)); gyorgy@0: } gyorgy@0: .mejs-overlay-loading span { gyorgy@0: display:block; gyorgy@0: width: 80px; gyorgy@0: height: 80px; gyorgy@0: background: transparent url(loading.gif) center center no-repeat; gyorgy@0: } gyorgy@0: gyorgy@0: /* End: LAYERS */ gyorgy@0: gyorgy@0: /* Start: CONTROL BAR */ gyorgy@0: .mejs-container .mejs-controls { gyorgy@0: position: absolute; gyorgy@0: background: none; gyorgy@0: list-style-type: none; gyorgy@0: margin: 0; gyorgy@0: padding: 0; gyorgy@0: bottom: 0; gyorgy@0: left: 0; gyorgy@0: background: url(background.png); gyorgy@0: background: rgba(0, 0, 0, 0.7); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); gyorgy@0: background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); gyorgy@0: background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); gyorgy@0: height: 30px; gyorgy@0: width: 100%; gyorgy@0: } gyorgy@0: .mejs-container .mejs-controls div { gyorgy@0: list-style-type: none; gyorgy@0: background-image: none; gyorgy@0: display: block; gyorgy@0: float: left; gyorgy@0: margin: 0; gyorgy@0: padding: 0; gyorgy@0: width: 26px; gyorgy@0: height: 26px; gyorgy@0: font-size: 11px; gyorgy@0: line-height: 11px; gyorgy@0: background: 0; gyorgy@0: font-family: Helvetica, Arial; gyorgy@0: border: 0; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-button button { gyorgy@0: cursor: pointer; gyorgy@0: display: block; gyorgy@0: font-size: 0px; gyorgy@0: line-height: 0; gyorgy@0: text-decoration: none; gyorgy@0: margin: 7px 5px; gyorgy@0: padding: 0; gyorgy@0: position: absolute; gyorgy@0: height: 16px; gyorgy@0: width: 16px; gyorgy@0: border: 0; gyorgy@0: background: transparent url(controls.png) 0 0 no-repeat; gyorgy@0: } gyorgy@0: /* End: CONTROL BAR */ gyorgy@0: gyorgy@0: /* Start: Time (current / duration) */ gyorgy@0: .mejs-container .mejs-controls .mejs-time { gyorgy@0: color: #fff; gyorgy@0: display: block; gyorgy@0: height: 17px; gyorgy@0: width: auto; gyorgy@0: padding: 8px 3px 0 3px ; gyorgy@0: overflow: hidden; gyorgy@0: text-align: center; gyorgy@0: padding: auto 4px; gyorgy@0: } gyorgy@0: .mejs-container .mejs-controls .mejs-time span { gyorgy@0: font-size: 11px; gyorgy@0: color: #fff; gyorgy@0: line-height: 12px; gyorgy@0: display: block; gyorgy@0: float: left; gyorgy@0: margin: 1px 2px 0 0; gyorgy@0: width: auto; gyorgy@0: } gyorgy@0: /* End: Time (current / duration) */ gyorgy@0: gyorgy@0: gyorgy@0: /* Start: Play/pause */ gyorgy@0: .mejs-controls .mejs-play button { gyorgy@0: background-position:0 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-pause button { gyorgy@0: background-position:0 -16px; gyorgy@0: } gyorgy@0: /* End: Play/pause */ gyorgy@0: gyorgy@0: gyorgy@0: /* Stop */ gyorgy@0: .mejs-controls .mejs-stop button { gyorgy@0: background-position: -112px 0; gyorgy@0: } gyorgy@0: /* End: Play/pause */ gyorgy@0: gyorgy@0: /* Start: Progress bar */ gyorgy@0: .mejs-controls div.mejs-time-rail { gyorgy@0: width: 200px; gyorgy@0: padding-top: 5px; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail span { gyorgy@0: display: block; gyorgy@0: position: absolute; gyorgy@0: width: 180px; gyorgy@0: height: 10px; gyorgy@0: -webkit-border-radius: 2px; gyorgy@0: -moz-border-radius: 2px; gyorgy@0: border-radius: 2px; gyorgy@0: cursor: pointer; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-total { gyorgy@0: margin: 5px; gyorgy@0: background: #333; gyorgy@0: background: rgba(50,50,50,0.8); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); gyorgy@0: background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); gyorgy@0: background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); gyorgy@0: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#1E1E1E,endColorstr=#3C3C3C); gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-loaded { gyorgy@0: background: #3caac8; gyorgy@0: background: rgba(60,170,200,0.8); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); gyorgy@0: background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); gyorgy@0: background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8)); gyorgy@0: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#2C7C91,endColorstr=#4EB7D4); gyorgy@0: width: 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-current { gyorgy@0: width: 0; gyorgy@0: background: #fff; gyorgy@0: background: rgba(255,255,255,0.8); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); gyorgy@0: background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); gyorgy@0: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#FFFFFF,endColorstr=#C8C8C8); gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-handle { gyorgy@0: display: none; gyorgy@0: position: absolute; gyorgy@0: margin: 0; gyorgy@0: width: 10px; gyorgy@0: background: #fff; gyorgy@0: -webkit-border-radius: 5px; gyorgy@0: -moz-border-radius: 5px; gyorgy@0: border-radius: 5px; gyorgy@0: cursor: pointer; gyorgy@0: border: solid 2px #333; gyorgy@0: top: -2px; gyorgy@0: text-align: center; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-float { gyorgy@0: visibility: hidden; gyorgy@0: position: absolute; gyorgy@0: display: block; gyorgy@0: background: #eee; gyorgy@0: width: 36px; gyorgy@0: height: 17px; gyorgy@0: border: solid 1px #333; gyorgy@0: top: -26px; gyorgy@0: margin-left: -18px; gyorgy@0: text-align: center; gyorgy@0: color: #111; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail:hover .mejs-time-float { gyorgy@0: visibility: visible; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-float-current { gyorgy@0: margin: 2px; gyorgy@0: width: 30px; gyorgy@0: display: block; gyorgy@0: text-align: center; gyorgy@0: left: 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-time-rail .mejs-time-float-corner { gyorgy@0: position: absolute; gyorgy@0: display: block; gyorgy@0: width: 0; gyorgy@0: height: 0; gyorgy@0: line-height: 0; gyorgy@0: border: solid 5px #eee; gyorgy@0: border-color: #eee transparent transparent transparent; gyorgy@0: -webkit-border-radius: 0; gyorgy@0: -moz-border-radius: 0; gyorgy@0: border-radius: 0; gyorgy@0: top: 15px; gyorgy@0: left: 13px; gyorgy@0: gyorgy@0: } gyorgy@0: gyorgy@0: gyorgy@0: gyorgy@0: gyorgy@0: /* gyorgy@0: .mejs-controls .mejs-time-rail:hover .mejs-time-handle { gyorgy@0: visibility:visible; gyorgy@0: } gyorgy@0: */ gyorgy@0: /* End: Progress bar */ gyorgy@0: gyorgy@0: /* Start: Fullscreen */ gyorgy@0: .mejs-controls .mejs-fullscreen-button button { gyorgy@0: background-position:-32px 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-unfullscreen button { gyorgy@0: background-position:-32px -16px; gyorgy@0: } gyorgy@0: /* End: Fullscreen */ gyorgy@0: gyorgy@0: gyorgy@0: /* Start: Mute/Volume */ gyorgy@0: .mejs-controls .mejs-volume-button { gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-mute button { gyorgy@0: background-position:-16px -16px; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-unmute button { gyorgy@0: background-position:-16px 0; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-volume-button { gyorgy@0: position: relative; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-volume-button .mejs-volume-slider { gyorgy@0: display: none; gyorgy@0: height: 115px; gyorgy@0: width: 25px; gyorgy@0: background: url(background.png); gyorgy@0: background: rgba(50, 50, 50, 0.7); gyorgy@0: -webkit-border-radius: 0; gyorgy@0: -moz-border-radius: 0; gyorgy@0: border-radius: 0; gyorgy@0: top: -115px; gyorgy@0: left: 0; gyorgy@0: z-index: 1; gyorgy@0: position: absolute; gyorgy@0: margin: 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-volume-button:hover { gyorgy@0: -webkit-border-radius: 0 0 4px 4px ; gyorgy@0: -moz-border-radius: 0 0 4px 4px ; gyorgy@0: border-radius: 0 0 4px 4px ; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-volume-button:hover .mejs-volume-slider { gyorgy@0: display: block; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { gyorgy@0: position: absolute; gyorgy@0: left: 11px; gyorgy@0: top: 8px; gyorgy@0: width: 2px; gyorgy@0: height: 100px; gyorgy@0: background: #ddd; gyorgy@0: background: rgba(255, 255, 255, 0.5); gyorgy@0: margin: 0; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { gyorgy@0: position: absolute; gyorgy@0: left: 11px; gyorgy@0: top: 8px; gyorgy@0: width: 2px; gyorgy@0: height: 100px; gyorgy@0: background: #ddd; gyorgy@0: background: rgba(255, 255, 255, 0.9); gyorgy@0: margin: 0; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { gyorgy@0: position: absolute; gyorgy@0: left: 4px; gyorgy@0: top: -3px; gyorgy@0: width: 16px; gyorgy@0: height: 6px; gyorgy@0: background: #ddd; gyorgy@0: background: rgba(255, 255, 255, 0.9); gyorgy@0: cursor: N-resize; gyorgy@0: -webkit-border-radius: 1px; gyorgy@0: -moz-border-radius: 1px; gyorgy@0: border-radius: 1px; gyorgy@0: margin: 0; gyorgy@0: } gyorgy@0: gyorgy@0: /* End: Mute/Volume */ gyorgy@0: gyorgy@0: gyorgy@0: gyorgy@0: gyorgy@0: /* Start: TRACK (Captions and Chapters) */ gyorgy@0: .mejs-controls .mejs-captions-button { gyorgy@0: position: relative; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-captions-button button { gyorgy@0: background-position:-48px 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-captions-button .mejs-captions-selector { gyorgy@0: visibility: hidden; gyorgy@0: position: absolute; gyorgy@0: bottom: 26px; gyorgy@0: right: -10px; gyorgy@0: width: 130px; gyorgy@0: height: 100px; gyorgy@0: background: url(background.png); gyorgy@0: background: rgba(50,50,50,0.7); gyorgy@0: border: solid 1px transparent; gyorgy@0: padding: 10px; gyorgy@0: overflow: hidden; gyorgy@0: -webkit-border-radius: 0; gyorgy@0: -moz-border-radius: 0; gyorgy@0: border-radius: 0; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-captions-button:hover .mejs-captions-selector { gyorgy@0: visibility: visible; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-captions-button .mejs-captions-selector ul { gyorgy@0: margin: 0; gyorgy@0: padding: 0; gyorgy@0: display: block; gyorgy@0: list-style-type: none !important; gyorgy@0: overflow: hidden; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-captions-button .mejs-captions-selector ul li{ gyorgy@0: margin: 0 0 6px 0; gyorgy@0: padding: 0; gyorgy@0: list-style-type: none !important; gyorgy@0: display:block; gyorgy@0: color: #fff; gyorgy@0: overflow: hidden; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{ gyorgy@0: clear: both; gyorgy@0: float: left; gyorgy@0: margin: 3px 3px 0px 5px; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{ gyorgy@0: width: 100px; gyorgy@0: float: left; gyorgy@0: padding: 4px 0 0 0; gyorgy@0: line-height: 15px; gyorgy@0: font-family: helvetica, arial; gyorgy@0: font-size: 10px; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-controls .mejs-captions-button .mejs-captions-translations { gyorgy@0: font-size: 10px; gyorgy@0: margin: 0 0 5px 0; gyorgy@0: } gyorgy@0: gyorgy@0: gyorgy@0: .mejs-chapters { gyorgy@0: position: absolute; gyorgy@0: top: 0; gyorgy@0: left: 0; gyorgy@0: -xborder-right: solid 1px #fff; gyorgy@0: width: 10000px; gyorgy@0: } gyorgy@0: .mejs-chapters .mejs-chapter { gyorgy@0: position: absolute; gyorgy@0: float: left; gyorgy@0: background: #222; gyorgy@0: background: rgba(0, 0, 0, 0.7); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); gyorgy@0: background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); gyorgy@0: background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); gyorgy@0: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000); gyorgy@0: overflow: hidden; gyorgy@0: border: 0; gyorgy@0: } gyorgy@0: .mejs-chapters .mejs-chapter .mejs-chapter-block { gyorgy@0: font-size: 11px; gyorgy@0: color: #fff; gyorgy@0: padding: 5px; gyorgy@0: display: block; gyorgy@0: border-right: solid 1px #333; gyorgy@0: border-bottom: solid 1px #333; gyorgy@0: cursor: pointer; gyorgy@0: } gyorgy@0: .mejs-chapters .mejs-chapter .mejs-chapter-block-last { gyorgy@0: border-right: none; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-chapters .mejs-chapter .mejs-chapter-block:hover { gyorgy@0: /*background: #333;*/ gyorgy@0: background: #666; gyorgy@0: background: rgba(102,102,102, 0.7); gyorgy@0: background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6))); gyorgy@0: background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); gyorgy@0: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232); gyorgy@0: } gyorgy@0: .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{ gyorgy@0: font-size: 12px; gyorgy@0: font-weight: bold; gyorgy@0: display: block; gyorgy@0: white-space:nowrap; gyorgy@0: text-overflow: ellipsis; gyorgy@0: margin: 0 0 3px 0; gyorgy@0: line-height: 12px; gyorgy@0: } gyorgy@0: .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{ gyorgy@0: font-size: 12px; gyorgy@0: line-height: 12px; gyorgy@0: margin: 3px 0 4px 0; gyorgy@0: display: block; gyorgy@0: white-space:nowrap; gyorgy@0: text-overflow: ellipsis; gyorgy@0: } gyorgy@0: gyorgy@0: gyorgy@0: .mejs-captions-layer { gyorgy@0: position: absolute; gyorgy@0: bottom: 0; gyorgy@0: left: 0; gyorgy@0: text-align:center; gyorgy@0: /*font-weight: bold;*/ gyorgy@0: line-height: 22px; gyorgy@0: font-size: 12px; gyorgy@0: color: #fff; gyorgy@0: } gyorgy@0: .mejs-captions-layer a { gyorgy@0: color: #fff; gyorgy@0: text-decoration: underline; gyorgy@0: } gyorgy@0: .mejs-captions-layer[lang=ar] { gyorgy@0: font-size: 20px; gyorgy@0: font-weight: normal; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-captions-position { gyorgy@0: position: absolute; gyorgy@0: width: 100%; gyorgy@0: bottom: 15px; gyorgy@0: left: 0; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-captions-position-hover { gyorgy@0: bottom: 45px; gyorgy@0: } gyorgy@0: gyorgy@0: .mejs-captions-text { gyorgy@0: padding: 3px 5px; gyorgy@0: background: url(background.png); gyorgy@0: background: rgba(20, 20, 20, 0.8); gyorgy@0: gyorgy@0: } gyorgy@0: /* End: TRACK (Captions and Chapters) */ gyorgy@0: gyorgy@0: gyorgy@0: gyorgy@0: .mejs-clear { gyorgy@0: clear: both; gyorgy@0: } gyorgy@0: gyorgy@0: /* Start: ERROR */ gyorgy@0: .me-cannotplay { gyorgy@0: } gyorgy@0: .me-cannotplay a { gyorgy@0: color: #fff; gyorgy@0: font-weight: bold; gyorgy@0: } gyorgy@0: .me-cannotplay span { gyorgy@0: padding: 15px; gyorgy@0: display: block; gyorgy@0: } gyorgy@0: /* End: ERROR */ gyorgy@0: gyorgy@0: gyorgy@0: /* Start: Loop */ gyorgy@0: .mejs-controls .mejs-loop-off button{ gyorgy@0: background-position: -64px -16px; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-loop-on button { gyorgy@0: background-position: -64px 0; gyorgy@0: } gyorgy@0: /* End: Loop */ gyorgy@0: gyorgy@0: /* Start: backlight */ gyorgy@0: .mejs-controls .mejs-backlight-off button{ gyorgy@0: background-position: -80px -16px; gyorgy@0: } gyorgy@0: .mejs-controls .mejs-backlight-on button { gyorgy@0: background-position: -80px 0; gyorgy@0: } gyorgy@0: /* End: backlight */ gyorgy@0: gyorgy@0: gyorgy@0: /* Start: picture controls */ gyorgy@0: .mejs-controls .mejs-picturecontrols-button{ gyorgy@0: background-position: -96px 0; gyorgy@0: } gyorgy@0: /* End: picture controls */