.slideshow-window { background-color: #222; border: 20px solid #222; border-radius: 10px; height: 0; margin-bottom: 20px; overflow: hidden; padding-top: 30px !important; padding-bottom: 56.25% !important; position: relative; z-index: 1; } .slideshow-window.slideshow-white { background-color: #fff; border-color: #fff; } .slideshow-window, .slideshow-window * { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .slideshow-loading { height: 100%; text-align: center; margin: auto; } body div.slideshow-window * img { /* Override any styles that might be present in the page stylesheet */ background-color: transparent !important; background-image: none !important; border-width: 0 !important; display: block; margin: 0 auto; max-width: 100%; max-height: 100%; padding: 0 !important; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .slideshow-loading img { vertical-align: middle; } .slideshow-slide { display: none; height: 100% !important; left: 0; margin: auto; position: absolute; text-align: center; top: 0; width: 100% !important; } .slideshow-slide img { vertical-align: middle; } .slideshow-line-height-hack { overflow: hidden; width: 0px; font-size: 0px; } .slideshow-slide-caption { font-size: 13px; font-family: "Helvetica Neue", sans-serif; color: #f7f7f7; text-shadow: #222 1px 1px 2px; line-height: 25px; height: 25px; position: absolute; bottom: 5px; left: 0; z-index: 100; width: 100%; text-align: center; } /* @noflip */ .slideshow-controls { z-index: 1000; position: absolute; bottom: 30px; margin: auto; text-align: center; width: 100%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; direction:ltr; -webkit-transition: 300ms opacity ease-out; -moz-transition: 300ms opacity ease-out; transition: 300ms opacity ease-out; } .slideshow-window:hover .slideshow-controls { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } body div div.slideshow-controls a, body div div.slideshow-controls a:hover { border:2px solid rgba(255,255,255,0.1) !important; background-color: #000 !important; background-color: rgba(0,0,0,0.6) !important; background-image: url('../img/slideshow-controls.png') !important; background-repeat: no-repeat; background-size: 142px 16px !important; background-position: -34px 8px !important; color: #222 !important; margin: 0 5px !important; padding: 0 !important; display: inline-block !important; *display: inline; zoom: 1; height: 32px !important; width: 32px !important; line-height: 32px !important; text-align: center !important; -khtml-border-radius: 10em !important; -webkit-border-radius: 10em !important; -moz-border-radius: 10em !important; border-radius: 10em !important; -webkit-transition: 300ms border-color ease-out; -moz-transition: 300ms border-color ease-out; -o-transition: 300ms border-color ease-out; transition: 300ms border-color ease-out; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { body div div.slideshow-controls a, body div div.slideshow-controls a:hover { background-image: url('../img/slideshow-controls-2x.png') !important; } } body div div.slideshow-controls a:hover { border-color: rgba(255,255,255,1) !important; } body div div.slideshow-controls a:first-child { background-position: -76px 8px !important;} body div div.slideshow-controls a:last-child { background-position: -117px 8px !important;} body div div.slideshow-controls a:nth-child(2) { background-position: -34px 8px !important;} body div div.slideshow-controls a.running { background-position: -34px 8px !important;} body div div.slideshow-controls a.paused { background-position: 9px 8px !important;} .slideshow-controls a img { border: 50px dotted fuchsia; }