.modalLayer.noTapHighlight { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; user-select: none; } .singleThumbnailWrapper { text-align: inherit; margin: 10px; } #pictureContainer { background-color: black; border-radius: 5px; box-shadow: 0 0 25px 5px black; display: inline-block; height: 80%; left: 50%; margin: auto; max-height: calc(100% - 120px); max-width: calc(100% - 50px); position: absolute; top: calc(50% - 50px); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 1023px) { #pictureContainer { max-height: calc(100% - 10px); max-width: calc(100% - 10px); margin-top: 50px; } } #pictureContainer img.currentPic { max-height: 100%; max-width: 100%; cursor: default; } #pictureContainer div.imgLabel { margin-top: -15px; position: absolute; left: 50%; overflow: visible; } #pictureContainer div.imgLabel > * { background-color: #333; border: 1px solid #151515; border-radius: 3px; color: white; cursor: default; display: inline-block; font-weight: bold; padding: 10px; } #pictureContainer .title { background: rgba(0, 0, 0, 0.66) none repeat scroll 0 0; bottom: 0; color: rgba(255, 255, 255, 0.9); padding: 10px; position: absolute; text-align: center; text-shadow: 0 0 5px black; width: 100%; } #pictureContainer .close { height: 25px; position: absolute; right: -10px; top: -10px; z-index: 15; } #pictureContainer div.galleryNavLeft { position: absolute; left: 0; width: 10%; min-width: 50px; background: url('../graphX/icons/left.png') no-repeat left, linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); background-size: 25px, auto; background-origin: content-box, padding-box; padding-left: 15px; height: 100%; z-index: 10; } #pictureContainer div.galleryNavLeft:hover { background: url('../graphX/icons/leftGlow.png') no-repeat left, linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); background-size: 25px, auto; padding-left: 15px; background-origin: content-box, padding-box; } #pictureContainer div.galleryNavRight { position: absolute; right: 0; width: 90%; min-width: 50px; background: url('../graphX/icons/right.png') no-repeat right, linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); background-size: 25px, auto; background-origin: content-box, padding-box; padding-right: 15px; height: 100%; z-index: 10; } #pictureContainer div.galleryNavRight:hover { background: url('../graphX/icons/rightGlow.png') no-repeat right, linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); background-size: 25px, auto; padding-right: 15px; background-origin: content-box, padding-box; } #galleryNavigation { background: linear-gradient(rgba(43, 43, 43, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%) rgba(0, 0, 0, 0.85); border-top: 1px solid black; bottom: 0; height: 100px; left: 0; position: absolute; width: 100%; cursor: default; text-align: center; overflow: hidden; } @media (max-width: 1023px) { #galleryNavigation { display: none; } } #galleryNavigation img { height: 80%; margin: 10px 5px; border: 1px solid black; cursor: pointer; transition: all 0.5s; } #galleryNavigation img.current { box-shadow: 0 0 5px white; border: 1px solid #cfcfcf; } #galleryNavigation div.imageContainer { transition: margin 0.5s; display: inline-block; height: 100%; width: 9999px; text-align: left; } .gallery .highRes { display: none; } .gallery .thumbNails img { cursor: pointer;vertical-align: middle; }