.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(/wp-content/mu-plugins/shortcodes/css/../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(/wp-content/mu-plugins/shortcodes/css/../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; } /* =Tiled Gallery Default Styles -------------------------------------------------------------- */ .tiled-gallery { clear: both; margin: 0 0 20px; overflow: hidden; } .tiled-gallery img { margin: 2px !important; /* Ensure that this value isn't overridden by themes that give content images blanket margins */ } .tiled-gallery .gallery-group { float: left; position: relative; } .tiled-gallery .tiled-gallery-item { float: left; margin: 0; position: relative; width: inherit; /* prevents ie8 bug with inline width styles */ } .tiled-gallery .gallery-row { overflow: hidden; } .tiled-gallery .tiled-gallery-item a { /* Needs to reset some properties for theme compatibility */ background: transparent; border: none; color: inherit; margin: 0; padding: 0; text-decoration: none; width: auto; } .tiled-gallery .tiled-gallery-item img, .tiled-gallery .tiled-gallery-item img:hover { /* Needs to reset some properties for theme compatibility */ background: none; border: none; box-shadow: none; max-width: 100%; padding: 0; vertical-align: middle; } .tiled-gallery-caption { /* Captions */ background: #eee; background: rgba( 255,255,255,0.8 ); color: #333; font-size: 13px; font-weight: 400; overflow: hidden; padding: 10px 0; position: absolute; bottom: 0; text-indent: 10px; text-overflow: ellipsis; width: 100%; white-space: nowrap; } .tiled-gallery .tiled-gallery-item-small .tiled-gallery-caption { /* Smaller captions */ font-size: 11px; } /* Hide galleries in widgets until they've been resized to fit. Gallery widgets are almost guaranteed to need resizing, and the jump is a little more obvious than galleries in content. */ .widget-gallery .tiled-gallery-unresized { visibility: hidden; height: 0px; overflow: hidden; } /* =Greyscale -------------------------------------------------------------- */ .tiled-gallery .tiled-gallery-item img.grayscale { position: absolute; left: 0; top: 0; } .tiled-gallery .tiled-gallery-item img.grayscale:hover { opacity: 0; } /* =Circles Layout -------------------------------------------------------------- */ .tiled-gallery.type-circle .tiled-gallery-item img { border-radius: 50% !important; /* Ensure that circles are displayed in themes that add border-radius to all images as a default */ } .tiled-gallery.type-circle .tiled-gallery-caption { display: none; opacity: 0; }