object.quicktime {behavior:url(#qt_event_source);} #controls {position: absolute !important; width: 100%; height:100%; bottom:0px; left:0px; } .mediaPanel.movie-loading-animation object.sbvdp { position: absolute !important; top:-2000px; left:-2000px; } .mediaPanel object.sbvdp { position: relative; } /* backgrounds missing: .mediaPanel.movie-loading-panel_320x180 { background: url(qt_loading320x180.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_320x200 { background: url(qt_loading320x200.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_480x272 { background: url(qt_loading480x272.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_480x300 { background: url(qt_loading480x300.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_560x316 { background: url(qt_loading560x316.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_560x352 { background: url(qt_loading560x352.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_640x360 { background: url(qt_loading640x360.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_640x400 { background: url(qt_loading640x400.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel_848x480 { background: url(qt_loading848x480.gif) center center no-repeat; z-index: 9999; } .mediaPanel.movie-loading-panel { background: url(qt_loading848x528.gif) center center no-repeat; z-index: 9999; } */ .mediaPanel .movie-loading-animation { width: 100%; height: 100%; background:url(loading.gif) center center no-repeat; z-index: 10000; } .mediaPanel { position: relative; } .mediaPanel object { z-index: 0; } .endstate { display: block; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; position: absolute; background: url(replay.svg?rasterize@.5x) center; background-size: 840px 525px; } .mediaPanel .controllerPanel { position: static !important; width: auto !important; height: auto !important; background: none !important; } /*grouped selectors needing same background image to workaround IE and Firefox bugs that re-download the same image for each rule where it appears*/ #controls .ACMediaControllerSpeedDisplay .speedDisplay, #controls .ACMediaControllerSpeedDisplay .two-times-speed-display, #controls .ACMediaControllerSpeedDisplay .four-times-speed-display, #controls .ACMediaControllerSpeedDisplay .eight-times-speed-display, #controls .mediaControllerPanel > .ACMediaController .volumeMute, #controls .mediaControllerPanel > .ACMediaController .volumeTrack, #controls .mediaControllerPanel > .ACMediaController .volumeTrackProgress, #controls .mediaControllerPanel > .ACMediaController .volumePlayHead, #controls .mediaControllerPanel > .ACMediaController .volumeFull, #controls .mediaControllerPanel > .ACMediaController .play, #controls .mediaControllerPanel > .ACMediaController .pause, #controls .mediaControllerPanel > .ACMediaController .fastBackward, #controls .mediaControllerPanel > .ACMediaController .fastForward, #controls .mediaControllerPanel > .ACMediaController .accessibilitiesMenuControl, #controls .mediaControllerPanel > .ACMediaController .sizesMenuControl, #controls .mediaControllerPanel > .ACMediaController .downloadMenuControl, #controls .mediaControllerPanel > .ACMediaController .shareMenuControl, #controls .mediaControllerPanel > .ACMediaController .track, #controls .mediaControllerPanel > .ACMediaController .loadedProgress, #controls .mediaControllerPanel > .ACMediaController .trackProgress, #controls .mediaControllerPanel > .ACMediaController .playHead, .slim #controls .ACMediaController .trackPanel .playHead { background-image: url(ac_media_regular_controls.png); background-size: 320px 210px; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2) { #controls .ACMediaControllerSpeedDisplay .speedDisplay, #controls .ACMediaControllerSpeedDisplay .two-times-speed-display, #controls .ACMediaControllerSpeedDisplay .four-times-speed-display, #controls .ACMediaControllerSpeedDisplay .eight-times-speed-display, #controls .mediaControllerPanel > .ACMediaController .volumeMute, #controls .mediaControllerPanel > .ACMediaController .volumeTrack, #controls .mediaControllerPanel > .ACMediaController .volumeTrackProgress, #controls .mediaControllerPanel > .ACMediaController .volumePlayHead, #controls .mediaControllerPanel > .ACMediaController .volumeFull, #controls .mediaControllerPanel > .ACMediaController .play, #controls .mediaControllerPanel > .ACMediaController .pause, #controls .mediaControllerPanel > .ACMediaController .fastBackward, #controls .mediaControllerPanel > .ACMediaController .fastForward, #controls .mediaControllerPanel > .ACMediaController .accessibilitiesMenuControl, #controls .mediaControllerPanel > .ACMediaController .sizesMenuControl, #controls .mediaControllerPanel > .ACMediaController .downloadMenuControl, #controls .mediaControllerPanel > .ACMediaController .shareMenuControl, #controls .mediaControllerPanel > .ACMediaController .track, #controls .mediaControllerPanel > .ACMediaController .loadedProgress, #controls .mediaControllerPanel > .ACMediaController .trackProgress, #controls .mediaControllerPanel > .ACMediaController .playHead, .slim #controls .ACMediaController .trackPanel .playHead { background-image: url(ac_media_regular_controls_2X.png); } } #controls .ACMediaController * { -webkit-user-select: none; user-select: none; -moz-user-select: none; } /* Fast Backward/Forward Display */ #controls-panel { -webkit-transition: opacity 0.7s; -moz-transition: opacity 0.7s; transition: opacity 0.7s; opacity: 1; } #controls-panel.fade { opacity: 0; } #controls .ACMediaControllerSpeedDisplay { display: none; position: absolute !important; top: 20px; left: 20px; width: 40px; height: 40px; } #controls .ACMediaControllerSpeedDisplay.fastBackward, #controls .ACMediaControllerSpeedDisplay.fastForward { display: block; } #controls .ACMediaControllerSpeedDisplay .speedDisplay { position: absolute !important; top: 0; left: 0; text-indent: -99999px; } #controls .ACMediaControllerSpeedDisplay .two-times-speed-display { width: 39px; height: 40px; background-position: -1px -170px; } #controls .ACMediaControllerSpeedDisplay .four-times-speed-display { width: 40px; height: 40px; background-position: -40px -170px; } #controls .ACMediaControllerSpeedDisplay .eight-times-speed-display { width: 40px; height: 40px; background-position: -80px -170px; } .slim #controls .ACMediaControllerSpeedDisplay.fastBackward, .slim #controls .ACMediaControllerSpeedDisplay.fastForward { display: none; } /* AC Quicktime Controller */ #controls .mediaControllerPanel { z-index: 10; position: absolute !important; bottom: 20px; left: 50%; width: 450px;height: 71px; *color: transparent; margin-left: -225px; } #controls .slim-left-cap, #controls .slim-right-cap { display: none; } #controls div.mediaControllerPanel div.ACMediaController { width: 450px; height: 71px; } /* The direct descendant selector is meant to avoid IE6 to pick up the rule */ #controls div.mediaControllerPanel div.ACMediaController { background-image: url(ac_media_regular_background.svg?rasterize@.5x); background-size: 450px 71px; background-repeat: no-repeat; color: transparent; } /* Volume */ #controls .ACMediaController .volumeMute { position: absolute !important; top: 15px; left: 15px; width: 20px; height: 20px; background-position: -195px -33px; } #controls .ACMediaController .volumeMute-enabled { background-position: -195px -3px; cursor: pointer; } #controls .ACMediaController .volumeMute-active { background-position: -195px -63px; } #controls .ACMediaController .volumePanel { position: absolute !important; top: 16px; left: 33px; width: 50px; height: 20px; overflow: visible;} #controls .ACMediaController .volumeTrack { position: absolute !important; top: 5px; left: 0; width: 50px; height: 9px; background-attachment: scroll; background-color: transparent; background-position: 0px -95px; text-align: left; } #controls .ACMediaController .volumeTrackProgress { position: absolute !important; height: 9px; background-attachment: scroll; background-color: transparent; background-position:-50px -95px; overflow: visible; } #controls .ACMediaController .volumePlayHead { position: absolute !important; margin-left:-3px; top: -3px; width: 18px; height: 18px; background-attachment: scroll; background-color: transparent; background-position: -136px -36px; } #controls .ACMediaController .volumePlayHead-enabled { background-position: -136px -7px; cursor: pointer; } #controls .ACMediaController .volumePlayHead-active { background-position: -136px -67px; } #controls .ACMediaController .volumeFull { position: absolute !important; top: 15px; left: 86px; width: 20px; height: 20px; background-position: -225px -33px; } #controls .ACMediaController .volumeFull-enabled { background-position: -225px -3px; cursor: pointer; } #controls .ACMediaController .volumeFull-active { background-position: -225px -63px; } /* Center Controls */ #controls .ACMediaController #play-control { position: absolute !important; top: 10px; left: 213px; width: 30px; height: 30px; text-indent: -9999px; overflow: hidden; } #controls .ACMediaController .play, #controls .ACMediaController .pause { position: absolute !important; top: 10px; left: 213px; width: 30px; height: 30px; text-indent: -9999px; background-attachment: scroll; background-color: transparent; background-position: 0px -30px; overflow: hidden; } #controls .ACMediaController .play-enabled { background-position: 0px 0px; cursor: pointer; } #controls .ACMediaController .play-active { background-position: 0px -60px; } #controls .ACMediaController .pause { background-position: -29px -30px; } #controls .ACMediaController .pause-enabled { background-position: -29px 0px; cursor: pointer; } #controls .ACMediaController .pause-active { background-position: -29px -60px; } #controls .ACMediaController .fastBackward { position: absolute !important; top: 10px; left: 172px; width: 35px; height: 30px; background-attachment: scroll; background-color: transparent; background-position: -60px -30px; overflow: hidden; } #controls .ACMediaController .fastBackward-enabled { background-position: -60px 0px; cursor: pointer; } #controls .ACMediaController .fastBackward-active { background-position: -60px -60px; } #controls .ACMediaController .fastForward { position: absolute !important; top: 10px; left: 250px; width: 35px; height: 30px; background-attachment: scroll; background-color: transparent; background-position: -95px -30px; overflow: hidden; } #controls .ACMediaController .fastForward-enabled { background-position: -95px 0px; cursor: pointer; } #controls .ACMediaController .fastForward-active { background-position: -95px -60px; } /* Accessibility and Share Controls */ #controls .ACMediaController .accessibilitiesMenuControl { position: absolute !important; top: 15px; left: 322px; width: 27px; height: 20px; background-attachment: scroll; background-color: transparent; background-position: -267px -35px; } #controls .ACMediaController .accessibilitiesMenuControl-enabled { background-position: -150px -5px; cursor: pointer; } #controls .ACMediaController .accessibilitiesMenuControl-active { background-position: ; } #controls .ACMediaController .sizesMenuControl { position: absolute !important; top: 15px; left: 349px; width: 27px; height: 20px; background-attachment: scroll; background-color: transparent; background-position: -294px -35px; } #controls .ACMediaController .sizesMenuControl-enabled { background-position: -175px -5px; cursor: pointer; } #controls .ACMediaController .sizesMenuControl-active { background-position: ; } #controls .ACMediaController .downloadMenuControl { position: absolute !important; top: 15px; left: 376px; width: 27px; height: 20px; background-attachment: scroll; background-colort: transparent; background-position: -321px -35px; } #controls .ACMediaController .downloadMenuControl-enabled { background-position: -200px -5px; cursor: pointer; } #controls .ACMediaController .downloadMenuControl-active { background-position: ; } #controls .ACMediaController .shareMenuControl { position: absolute !important; top: 15px; left: 403px; width: 27px; height: 20px; background-attachment: scroll; background-colort: transparent; background-position: -348px -35px; } #controls .ACMediaController .shareMenuControl-enabled { background-position: -225px -5px; cursor: pointer; } #controls .ACMediaController .shareMenuControl-active { background-position: ; } #controls .ACMediaController .accessibilitiesMenu { display: none; z-index: 105; position: absolute !important; left: 300px; bottom: 75px; background: #000; color: #CCC; } #controls .ACMediaController .accessibilitiesMenu.enabled.active { display: block; cursor: pointer; } #controls .ACMediaController .accessibilitiesMenu .closedCaptionControl.enabled { color: yellow; } #controls .ACMediaController .accessibilitiesMenu .closedCaptionControl.enabled.active { color: red; } #controls .ACMediaController .sizesMenu { display: none; z-index: 105; position: absolute !important; left: 360px; bottom: 75px; background: #000; color: #CCC; } #controls .ACMediaController .sizesMenu.enabled.active { display: block; cursor: pointer; } #controls .ACMediaController .sizesMenu .smallSizeControl.enabled, #controls .ACMediaController .sizesMenu .mediumSizeControl.enabled, #controls .ACMediaController .sizesMenu .largeSizeControl.enabled { color: yellow; } #controls .ACMediaController .sizesMenu .smallSizeControl.enabled.active, #controls .ACMediaController .sizesMenu .mediumSizeControl.enabled.active, #controls .ACMediaController .sizesMenu .largeSizeControl.enabled.active { color: red; } #controls .ACMediaController .accessibilitiesMenuControl, #controls .ACMediaController .sizesMenuControl, #controls .ACMediaController .downloadMenuControl, #controls .ACMediaController .shareMenuControl { display: none; } /* Track */ #controls .ACMediaController .trackPanel { position: absolute !important; top: 41px; left: 65px; width: 318px; height: 20px; } #controls .ACMediaController .trackPanel > .track {background-position: -1px -113px; } #controls .ACMediaController .trackPanel .track { position: absolute !important; top: 0; left: 0; width: 318px; height: 13px; background-attachment: scroll; background-color: transparent; text-align: left; } #controls .ACMediaController .loadedProgress { position: absolute !important; top: 1px; height: 13px; background-attachment: scroll; background-color: transparent; background-position: -1px -135px; overflow: hidden; } #controls .ACMediaController .trackProgress { position: absolute !important; display: block; top:1px; height: 13px; padding-left: 4px; background-color: transparent; background-position: -1px -155px; overflow: hidden; } #controls .ACMediaController .track .playHead { position: absolute !important; top: -1px; width: 18px; height: 18px; margin-left: -4px; background-attachment: scroll; background-color: transparent; background-position: -167px -35px; } #controls .ACMediaController .track .playHead-enabled { background-position: -167px -5px; cursor: pointer; } #controls .ACMediaController .track .playHead-active { background-position: -167px -65px; cursor: pointer; } #controls .ACMediaController .timeDisplay { position: absolute !important; top: 41px; left: 28px; right: auto !important; width: auto !important; font-size: 9px; color: #4F4F4F; text-shadow: #000 1px 1px 2px; font-weight: bold; } #controls .ACMediaController .timeDisplay span { padding: 0; } #controls .ACMediaController .durationDisplay { position: absolute !important; top: 41px; left: 392px; font-size: 9px; color: #4F4F4F; text-shadow: #000 1px 1px 2px; font-weight: bold; } #controls .ACMediaController .timeDisplay-enabled { position: absolute !important; top: 41px; left: 28px; right: auto !important; width: auto !important; font-size: 9px; color: #d5d5d5; text-shadow: #000 1px 1px 2px; font-weight: bold; } #controls .ACMediaController .timeDisplay-enabled span { padding: 0; } #controls .ACMediaController .durationDisplay-enabled { position: absolute !important; top: 41px; left: 392px; font-size: 9px; color: #d5d5d5; text-shadow: #000 1px 1px 2px; font-weight: bold; } /* Track Text */ #controls .ACMediaControllerTrackText { display: none; position: relative; margin: auto auto 70px; padding:10px; background: #000; color: #d5d5d5; } #controls .ACMediaControllerTrackText.enabled { display: block; } /* Captions */ .caption-text-container { position: absolute; left: 0; bottom: 25px; width: 100%; height: 29px; text-align: left; text-align: center; } .caption-text-container span { position: absolute; padding: 3px 6px 2px 7px; margin: 0px 13px; font-family: 'Helvetica', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; font-size: 15px; line-height: 18px; letter-spacing: 1px; text-align: left; text-shadow: #000 1px 1px 1px; border: 0; border-radius: 3px; background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000), color-stop(0.51, #111), color-stop(0.51, #000)); color: #fff; opacity: 0.83; } .closedCaptioning { position: absolute; right: 26px; top: 14px; width: 26px; height: 20px; background: url(snow_leopard_controller_settings_controls.png) 0px -88px no-repeat; background-size: 27px 968px; background-position: 0px -88px; cursor: pointer; } @media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2) { #apple-header .links li a { background: url(snow_leopard_controller_settings_controls_2x.png) 0px -88px no-repeat; } } .closedCaptioning.closedCaptioning-enabled { display: block; } .closedCaptioning.closedCaptioning-active { background-position: 0px -132px; } .closedCaptioning.closedCaptioning-on { background-position: 0px -154px !important; } /* Slim Controls */ .slim #controls .ACMediaControllerSpeedDisplay { display: none !important; } .slim #controls .mediaControllerPanel { z-index: 10; bottom: -31px; left: 0; margin-left: 0; width: 100%; height: 31px; } div.slim #controls div.mediaControllerPanel div.ACMediaController, .slim #controls .slim-left-cap, .slim #controls .slim-right-cap { background-image: url(ac_media_slim_background.svg?rasterize@.5x); background-size: 848px 31px } div.slim #controls div.mediaControllerPanel div.ACMediaController { z-index: 10; height: 31px; width: auto; position: relative; margin: 0 20px; background-repeat: no-repeat; background-position: -20px 0; color: transparent; } .slim #controls .slim-left-cap { z-index: 10; position: absolute; top: 0; left: 0; margin: 0; width: 20px; height: 31px; background-attachment: scroll; background-repeat: no-repeat; background-position: left top; display: block; } .slim #controls .slim-right-cap { z-index: 10; position: absolute; top: 0; right: 0; margin: 0; width: 20px; height: 31px; background-attachment: scroll; background-repeat: no-repeat; background-position: right top; display: block; } .slim #controls .ACMediaController .volumeMute, .slim-short #controls .ACMediaController .volumeTrack, .slim-short #controls .ACMediaController .volumeTrackProgress, .slim #controls .ACMediaController .volumeFull, .slim #controls .ACMediaController .play, .slim #controls .ACMediaController .pause, .slim #controls .ACMediaController .fastBackward, .slim #controls .ACMediaController .fastForward, .slim #controls .ACMediaController .trackPanel .track, .slim #controls .ACMediaController .trackPanel .loadedProgress, .slim #controls .ACMediaController .trackPanel .trackProgress, .slim #controls .ACMediaController .trackPanel .track-right-cap, .slim #controls .ACMediaController .trackPanel .track-right-cap-loaded { background-color: transparent; background-image: url(ac_media_slim_controls.png); background-size: 520px 190px; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2) { .slim #controls .ACMediaController .trackPanel .track-right-cap-loaded { background-image: url(ac_media_slim_controls_2X.png); } } .slim #controls .ACMediaController .volumeMute { top: 5px; left: -5px; background-position: -135px -33px; } .slim #controls .ACMediaController .volumeMute-enabled { background-position: -135px -3px; } .slim #controls .ACMediaController .volumeMute-active { background-position: -135px -63px; } .slim #controls .ACMediaController .volumePanel { top: 6px; left: 13px; } .slim #controls .ACMediaController .volumeFull { top: 5px; left: 65px; background-position: -165px -33px; } .slim #controls .ACMediaController .volumeFull-enabled { background-position: -165px -3px; } .slim #controls .ACMediaController .volumeFull-active { background-position: -165px -63px; } .slim #controls .ACMediaController .play, .slim #controls .ACMediaController .pause { top: 0 !important; left: 131px !important; } .slim #controls .ACMediaController .pause { background-position: -29px -32px; } .slim #controls .ACMediaController .pause-enabled { background-position: -29px -2px; } .slim #controls .ACMediaController .pause-active { background-position: -29px -59px; } .slim #controls .ACMediaController .fastBackward { top: 1px; left: 98px; background-position: -60px -29px; } .slim #controls .ACMediaController .fastBackward-enabled { background-position: -60px 0px; } .slim #controls .ACMediaController .fastBackward-active { background-position: -60px -59px; } .slim #controls .ACMediaController .two-times-fast-backward { left: 93px; background-position: -189px -3px; } .slim #controls .ACMediaController .four-times-fast-backward { left: 93px; background-position: -189px -33px; } .slim #controls .ACMediaController .eight-times-fast-backward { left: 93px; background-position: -189px -63px; } .slim #controls .ACMediaController .fastForward { top: 1px; left: 157px; background-position: -95px -30px; } .slim #controls .ACMediaController .fastForward-enabled { background-position: -95px 0px; } .slim #controls .ACMediaController .fastForward-active { background-position: -95px -60px; } .slim #controls .ACMediaController .two-times-fast-forward { left: 161px; background-position: -225px -3px; } .slim #controls .ACMediaController .four-times-fast-forward { left: 161px; background-position: -225px -33px; } .slim #controls .ACMediaController .eight-times-fast-forward { left: 161px; background-position: -225px -63px; } .slim #controls .ACMediaController .track-container { position: relative; margin: 0 0 0 205px; width: auto; height: 31px; } .slim #controls .ACMediaController .trackPanel { position: relative !important; display: inline-block; top: 7px; left: auto; width: 75%; margin-right:3px;} .slim #controls .ACMediaController .trackPanel .track { position: relative; top: 0; right: 5px; width: 100%; height: 13px; background-attachment: scroll; background-position: -3px -93px; text-align: left; } .slim #controls .ACMediaController .trackPanel .loadedProgress { position: absolute; top: 1px; height: 13px; background-attachment: scroll; background-position: -3px -114px; overflow: hidden; } .slim #controls .ACMediaController .trackPanel .trackProgress { position: absolute; top:1px; height: 13px; background-attachment: scroll; background-position: -3px -134px; overflow: hidden; } .slim #controls .ACMediaController .trackPanel .playHead { z-index: 20050; position: absolute; top: -2px; width: 18px; height: 18px; margin-left: -4px; background-attachment: scroll; background-color: transparent; background-position: -167px -35px; } .slim #controls .ACMediaController .trackPanel .playHead-enabled { background-position: -167px -5px; cursor: pointer; } .slim #controls .ACMediaController .trackPanel .playHead-active { background-position: -167px -65px; cursor: pointer; } .slim #controls .ACMediaController .trackPanel .track-right-cap { margin-right: -5px; position: absolute !important; top: 0px; right: 0; width: 5px; height: 13px; background-color: transparent; background-position: -512px -93px; } .slim #controls .ACMediaController .trackPanel .track-right-cap-loaded { margin-right: -5px; position: absolute !important; top: 1px; right: 0; width: 5px; height: 13px; background-color: transparent; background-position: -512px -154px; } .slim #controls .ACMediaController .timeDisplay { position: relative !important; margin-left: -5px; padding-left: 2px; display: inline-block; top: -2px; left: auto; text-align: right; width: 12%; text-shadow: #000 1px 1px 2px; font-weight: bold; } .slim #controls .ACMediaController .durationDisplay { position: relative !important; margin-left: -5px; padding-left: 5px; display: inline-block; top: -2px; left: auto; text-align: left; width: 12%; text-shadow: #000 1px 1px 2px; font-weight: bold; } .slim #controls .ACMediaController .closedCaptioning { top: 4px; right: 0 } /* Short Slim Controls */ .short-slim.slim #controls .ACMediaController .fastBackward, .short-slim.slim #controls .ACMediaController .fastForward, .short-slim.slim #controls .ACMediaController .timeDisplay, .short-slim.slim #controls .ACMediaController .durationDisplay { display: none; } .short-slim.slim #controls .ACMediaController .volumeMute { left: -15px; } .short-slim.slim #controls .ACMediaController .volumePanel { width: 50px; left: 3px; } .short-slim.slim #controls .ACMediaController .volumeTrack { width: 50px; background-position: 1px -96px; } .short-slim.slim #controls .ACMediaController .volumeTrackProgress { width: 50px; background-position: -50px -96px; } .short-slim.slim #controls .ACMediaController .volumeFull { left: 53px; } .short-slim.slim #controls .ACMediaController .play, .short-slim.slim #controls .ACMediaController .pause { top: 3px; left: 75px !important; } .short-slim.slim #controls .ACMediaController .track-container { margin-left: 113px; padding-right: 12px; margin-right: 23px; } .short-slim.slim #controls .ACMediaController .trackPanel { width: 100%; margin-left: -5px; } /* Download Quicktime */ .mediaPanel a.quicktime-download { position: absolute; z-index: 10010; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto auto; display: block; text-indent: -9999px; color: transparent; } .mediaPanel a.quicktime-download.size640x360 { width: 640px; height: 360px; background: transparent url(download_quicktime_640x360.jpg) center top no-repeat; } .mediaPanel a.quicktime-download.size640x400 { width: 640px; height: 400px; background: transparent url(download_quicktime_640x360.jpg) center top no-repeat; } /* Small variation of Overlay style */ .small-overlay #controls .mediaControllerPanel { width: 330px; height: 62px; margin-left: -165px; } .small-overlay #controls div.mediaControllerPanel div.ACMediaController { width: 330px; height: 62px; } .small-overlay #controls div.mediaControllerPanel div.ACMediaController { background-image: url(ac_media_garageband_background.svg?rasterize@.5x); background-size: 330px 62px; } .small-overlay #controls .ACMediaController .volumeMute { top: 10px; background-position: -269px -43px; } .small-overlay #controls .ACMediaController .volumeMute-enabled { background-position: -269px -21px; } .small-overlay #controls .ACMediaController .volumeMute-active { background-position: -269px -66px; } .small-overlay #controls .ACMediaController .volumePanel { top: 11px; } .small-overlay #controls .ACMediaController .volumeFull { top: 10px; background-position: -297px -43px; } .small-overlay #controls .ACMediaController .volumeFull-enabled { background-position: -297px -21px; } .small-overlay #controls .ACMediaController .volumeFull-active { background-position: -297px -66px; } .small-overlay #controls .ACMediaController #play-control { top: 7px; left: 156px; height: 23px; width: 24px; background-position: 0px -41px; } .small-overlay #controls .ACMediaController #play-control.play-enabled { background-position: 0px -19px; } .small-overlay #controls .ACMediaController #play-control.play-active { background-position: 0px -65px; } .small-overlay #controls .ACMediaController .pause { top: 7px; left: 156px; height: 23px; width: 24px; } .small-overlay #controls .ACMediaController .pause { background-position: -23px -42px; } .small-overlay #controls .ACMediaController .pause-enabled { background-position: -23px -19px; } .small-overlay #controls .ACMediaController .pause-active { background-position: -23px -65px; } .small-overlay #controls .ACMediaController .fastBackward { top: 9px; left: 124px; width: 29px; height: 22px; background-position: -45px -43px; } .small-overlay #controls .ACMediaController .fastBackward-enabled { background-position: -45px -21px; } .small-overlay #controls .ACMediaController .fastBackward-active { background-position: -45px -66px; } .small-overlay #controls .ACMediaController .fastForward { top: 9px; left: 183px; width: 28px; height: 22px; background-position: -71px -43px; } .small-overlay #controls .ACMediaController .fastForward-enabled { background-position: -71px -21px; } .small-overlay #controls .ACMediaController .fastForward-active { background-position: -71px -66px; } .small-overlay #controls .ACMediaController .trackPanel { top: 33px; width: 218px; left: 52px; } .small-overlay #controls .ACMediaController .trackPanel .track { width: 218px; } .small-overlay #controls .ACMediaController .timeDisplay { top: 34px; left: 18px; } .small-overlay #controls .ACMediaController .durationDisplay { top: 34px; left: 288px; } .small-overlay #controls .ACMediaController .volumeMute, .small-overlay #controls .ACMediaController .volumeTrack, .small-overlay #controls .ACMediaController .volumeTrackProgress, .small-overlay #controls .ACMediaController .volumeFull, .small-overlay #controls .ACMediaController .play, .small-overlay #controls .ACMediaController .pause, .small-overlay #controls .ACMediaController .fastBackward, .small-overlay #controls .ACMediaController .fastForward, .small-overlay #controls .ACMediaController .trackPanel .track, .small-overlay #controls .ACMediaController .trackPanel .loadedProgress, .small-overlay #controls .ACMediaController .trackPanel .trackProgress, .small-overlay #controls .ACMediaController .trackPanel .track-right-cap, .small-overlay #controls .ACMediaController .trackPanel .track-right-cap-loaded { background-image: url(ac_media_garageband_controls.png); } .small-overlay .closedCaptioning { right: 16px; top: 11px;}