@font-face { font-family: 'Guifx v2 Transports'; font-style: normal; font-weight: 400; src: url('Guifx_v2_Transports.woff') format('woff'); } .mejs-ted .mejs-controls { background: #eee; height: 65px } .mejs-ted .mejs-button, .mejs-ted .mejs-time { position: absolute; background: #ddd } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded, .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total { background: url(controls-ted.png) 0 -52px repeat-x; height: 6px } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering { height: 6px } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded { width: 0 } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 6px; background: url(controls-ted.png) 0 -59px repeat-x } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle { display: block; margin: 0; width: 14px; height: 21px; top: -7px; border: 0; background: url(controls-ted.png) no-repeat; background:#cb0003; border:2px solid #b3b3b3; border-radius:3px; outline: solid 2px white; outline-offset: -3px; box-sizing:border-box; overflow:hidden; } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle::before { content: ' '; display:block; width:6px; height:10px; margin-left: 3px; margin-top: 4px; background-repeat:repeat; background-image: radial-gradient(circle at 0.2px 0.2px, white 1px, transparent 0); background-size: 3px 3px; } .mejs-ted .mejs-controls .mejs-captions-button, .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float, .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-handle { display: none } .mejs-ted .mejs-controls .mejs-playpause-button { top: 29px; left: 9px; width: 49px; height: 28px; border: 2px solid #ccc; border-radius:5px; background: linear-gradient(#f7f7f7, #e5e5e5); box-shadow: 0 5px 6px -5px #666666; } .mejs-ted .mejs-controls .mejs-playpause-button:active{ box-shadow:none; background: linear-gradient(#f7f7f7, #c0c0c0); border-bottom-color:#c0c0c0; } .mejs-ted .mejs-controls .mejs-playpause-button button { width: 49px; height: 28px; background:transparent; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-playpause-button::before{ display: inline-block; font-family: "Guifx v2 Transports"; width: 49px; height: 28px; text-align: center; line-height: 28px; color: #666666; font-size: 16px; position: absolute; top:-2px; left:-2px; text-shadow: 1px 1px 0px rgba(255,255,255,.3); font-weight:normal !important; } .mejs-ted .mejs-controls .mejs-playpause-button::before{ content: "1"; } .mejs-ted .mejs-controls .mejs-playpause-button.mejs-pause::before { content: "2"; } .mejs-ted .mejs-controls .mejs-fullscreen-button { top: 34px; right: 9px; width: 17px; height: 15px; background: 0 0 } .mejs-ted .mejs-controls .mejs-fullscreen-button button { width: 19px; height: 17px; background: url(controls-ted.png) 0 -66px no-repeat; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-unfullscreen button { background: url(controls-ted.png) -21px -66px no-repeat; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-volume-button { top: 30px; right: 35px; width: 24px; height: 22px; border: 1px solid #ccc; border-radius:5px; background: linear-gradient(#f7f7f7, #e5e5e5); box-shadow: 0 5px 6px -5px #666666 } .mejs-ted .mejs-controls .mejs-volume-button:active { box-shadow:none; background: linear-gradient(#f7f7f7, #c0c0c0); border-bottom-color:#c0c0c0; } .mejs-ted .mejs-controls .mejs-volume-button button::before{ content: "$"; font-family: 'Guifx v2 Transports'; color: #666666; width:24px; height:22px; line-height:22px; text-align:center; display:block; font-size:14px; text-shadow: 1px 1px 0px rgba(255,255,255,.3); font-weight:normal !important; } .mejs-ted .mejs-controls .mejs-volume-button.mejs-unmute button::before{ content: "!"; } .mejs-ted .mejs-controls .mejs-volume-button button{ background:transparent !important; } .mejs-ted .mejs-controls .mejs-mute button { width: 24px; height: 22px; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-unmute button { width: 24px; height: 22px; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-slider { background: #fff; border: 1px solid #aaa; border-width: 1px 1px 0; width: 22px; height: 65px; top: -65px } .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total { background: url(controls-ted.png) -41px -66px repeat-y; left: 8px; width: 6px; height: 50px } .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current { left: 8px; width: 6px; background: url(controls-ted.png) -48px -66px repeat-y; height: 50px } .mejs-ted .mejs-controls .mejs-time span { color: #333 } .mejs-ted .mejs-controls .mejs-currenttime-container { position: absolute; top: 32px; right: 100px; border: 1px solid #999; background: #fff; padding-top: 2px; border-radius: 3px; color: #333 } .mejs-ted .mejs-controls .mejs-duration-container { position: absolute; top: 32px; right: 65px; border: 1px solid #999; background: #fff; padding-top: 2px; border-radius: 3px; color: #333 } .mejs-ted .mejs-controls .mejs-time button { color: #333 } .mejs-wmp .mejs-controls { background: transparent; height: 65px } .mejs-wmp .mejs-controls::before{ height: 30px; content:" "; width: 200px; display:inline-block; position:absolute; background:#1111119e; left:50%; top:24px; transform:translateX(-50%); border-radius:50px } .mejs-wmp .mejs-button, .mejs-wmp .mejs-time { position: absolute; background: 0 0 } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total { background-color: transparent; border: 1px solid #ccc; height: 3px } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-buffering { height: 3px } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-loaded { background-color: rgba(255,255,255, .3); width: 0; height: 3px } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 1px; background-color: #014CB6; border: 1px solid #7FC9FA; border-width: 1px 0; border-color: #7FC9FA #fff #619FF2 } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-handle { display: block; margin: 0; width: 16px; height: 9px; top: -4px; background: rgb(128,181,234); background: linear-gradient(180deg, rgba(128,181,234,1) 0%, rgba(2,111,226,1) 42%, rgba(98,213,252,1) 100%); border-radius:3px; border:1px solid; box-sizing:border-box; } .mejs-wmp .mejs-controls .mejs-captions-button, .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-float { display: none } .mejs-wmp .mejs-controls .mejs-playpause-button { top: 10px; left: 50%; margin: 10px 0 0 -20px; width: 40px; height: 40px } .mejs-wmp .mejs-controls .mejs-playpause-button button { width: 36px; height: 36px; margin: 0; padding: 0; left:2px; top:2px; background: rgb(128,181,234); background: linear-gradient(180deg, rgba(128,181,234,1) 0%, rgba(5,56,110,1) 45%, rgba(98,213,252,1) 100%); border-radius: 50px; border:2px solid #545856; outline:2px solid #8987879e; -webkit-box-shadow: inset 0px 2px 5px 0px rgba(99,214,252,1); -moz-box-shadow: inset 0px 2px 5px 0px rgba(99,214,252,1); box-shadow: inset 0px 2px 5px 0px rgba(99,214,252,1); outline-offset:0 !important; box-sizing:border-box; position:relative; } .mejs-wmp .mejs-controls .mejs-pause button { } .mejs-wmp .mejs-controls .mejs-playpause-button button::before { display: inline-block; content: "1"; font-family: "Guifx v2 Transports"; width: 36px; height: 36px; text-align: center; line-height: 36px; color: white; font-size: 22px; position: absolute; left: -2px; top: -2px; text-shadow: 1px 1px 2px rgb(5 56 110); opacity:0.9; font-weight:normal !important; } .mejs-wmp .mejs-controls .mejs-pause button::before { content: "2"; } .mejs-wmp .mejs-controls .mejs-currenttime-container { position: absolute; top: 25px; left: 50%; margin-left: -93px } .mejs-wmp .mejs-controls .mejs-duration-container { position: absolute; top: 25px; left: 50%; margin-left: -58px } .mejs-wmp .mejs-controls .mejs-volume-button { top: 32px; right: 50%; margin-right: -55px; width: 20px; height: 15px } .mejs-wmp .mejs-controls .mejs-volume-button button { margin: 0; padding: 0; width: 20px; height: 15px; background: transparent !important; } .mejs-wmp .mejs-controls .mejs-volume-button button::before{ content: "$"; font-family: 'Guifx v2 Transports'; font-size: 14px; position: absolute; left: 0; top: 0; line-height: 15px; color: white; text-shadow: 1px 1px 1px #333333; font-weight:normal !important; } .mejs-wmp .mejs-controls .mejs-volume-button.mejs-unmute button::before{ content: "!"; } .mejs-wmp .mejs-controls .mejs-unmute button { margin: 0; padding: 0; background: url(controls-wmp.png) -42px 0 no-repeat; width: 20px; height: 15px } .mejs-wmp .mejs-controls .mejs-volume-button .mejs-volume-slider { background: rgba(102,102,102, .6) } .mejs-wmp .mejs-controls .mejs-fullscreen-button { top: 32px; right: 50%; margin-right: -82px; width: 15px; height: 14px } .mejs-wmp .mejs-controls .mejs-fullscreen-button button { margin: 0; padding: 0; background: url(controls-wmp.png) -63px 0 no-repeat; width: 15px; height: 14px }