#lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #closeButton{ top: 5px; right: 5px; } #lightbox img{ border: none; clear: both;} #overlay img{ border: none; } /*#overlay{ background-image: url(overlay.png); }*/ * html #overlay{ background-color: #333; back\ground-color: transparent; background-image: url(blank.gif); /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");*/ } #lightbox{ position: fixed!important; width: 100%!important; height: 100%!important; top: 50%!important; left: 50%!important; -webkit-transform:translate(-50%,-50%)!important; -moz-transform:translate(-50%,-50%)!important; -ms-transform:translate(-50%,-50%)!important; -o-transform:translate(-50%,-50%)!important; transform:translate(-50%,-50%)!important; z-index: 1000!important; } #lightbox a{ } #lightbox img{ width: 100%; } #lightboxDetails #lightboxCaption{ display: none!important; } #keyboardMsg{ position: absolute; width: 30px; height: 30px; right: 10%; top: 10%; display: block; text-indent: -9999px; overflow: hidden; background: url(cha.png) no-repeat center; background-size: 100%; } #keyboardMsg a{ text-indent: 0; font-size: 0; display: block; text-indent: -999px; width: 100%; height: 100%; } #lightbox a{ display: block; position: absolute; left: 50%; top: 50%; -webkit-transform:translate(-50%,-50%)!important; -moz-transform:translate(-50%,-50%)!important; -ms-transform:translate(-50%,-50%)!important; -o-transform:translate(-50%,-50%)!important; transform:translate(-50%,-50%)!important; z-index: 1000!important; max-width: 65%; max-height: 65%; width: 100%; } @media (max-width: 1023px){ #lightbox a{ max-width: 90%; max-height: 90%; } }