/* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} /*#colorbox, #cboxOverlay{position:fixed; top:0; left:0; z-index:9999; overflow:hidden;} #cboxWrapper{}*/ #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* Old code for Exit popup used here, may be needed if reintergrated in the future. #cboxOverlay{background:#000;} #colorbox{} #cboxContent{margin-top:20px;} #cboxLoadedContent{background:#000; padding:5px;} #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;} #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(/images/colorbox/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;} #cboxPrevious.hover{background-position:bottom left;} #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(/images/colorbox/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;} #cboxNext.hover{background-position:bottom right;} #cboxLoadingOverlay{background:#000;} #cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) center center no-repeat;} #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(/images/colorbox/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;} #cboxClose.hover{background-position:bottom center;} */ /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:url(/images/colorbox/overlay.png) repeat 0 0;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -100px 0;} #cboxTopRight{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -129px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -100px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -129px -29px;} #cboxMiddleLeft{width:21px; background:url(/images/colorbox/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(/images/colorbox/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(/images/colorbox/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(/images/colorbox/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; overflow:hidden;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(/images/colorbox/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) no-repeat center center;} #cboxClose{position:absolute; top:0; right:0; background:url(/images/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} /* The following fixes a problem where IE7+ replaces a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /* The following provides PNG transparency support for IE6 */ .cboxIE6 #cboxTopLeft{background:url(/images/colorbox/ie6/borderTopLeft.png);} .cboxIE6 #cboxTopCenter{background:url(/images/colorbox/ie6/borderTopCenter.png);} .cboxIE6 #cboxTopRight{background:url(/images/colorbox/ie6/borderTopRight.png);} .cboxIE6 #cboxBottomLeft{background:url(/images/colorbox/ie6/borderBottomLeft.png);} .cboxIE6 #cboxBottomCenter{background:url(/images/colorbox/ie6/borderBottomCenter.png);} .cboxIE6 #cboxBottomRight{background:url(/images/colorbox/ie6/borderBottomRight.png);} .cboxIE6 #cboxMiddleLeft{background:url(/images/colorbox/ie6/borderMiddleLeft.png);} .cboxIE6 #cboxMiddleRight{background:url(/images/colorbox/ie6/borderMiddleRight.png);} .cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight { _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"); } /* ColorBox Unpadded Core Style: The following CSS should not have been modified in our core style at the top of the page, but it was! So this is the core style again, but with the unpadded class name as part of #colorbox */ #colorbox.unpadded, #colorbox.unpadded #cboxOverlay, #colorbox.unpadded #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #colorbox.unpadded #cboxWrapper {max-width:none;} #colorbox.unpadded #cboxOverlay{position:fixed; width:100%; height:100%;} #colorbox.unpadded #cboxMiddleLeft, #colorbox.unpadded #cboxBottomLeft{clear:left;} #colorbox.unpadded #cboxContent{position:relative;} #colorbox.unpadded #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #colorbox.unpadded #cboxTitle{margin:0;} #colorbox.unpadded #cboxLoadingOverlay, #colorbox.unpadded #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #colorbox.unpadded #cboxPrevious, #colorbox.unpadded #cboxNext, #colorbox.unpadded #cboxClose, #colorbox.unpadded #cboxSlideshow{cursor:pointer;} #colorbox.unpadded .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} #colorbox.unpadded .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox.unpadded, #colorbox.unpadded #cboxContent, #colorbox.unpadded #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* Unpadded Style: This is an unpadded colorbox with no garish massive black borders This means we can now design lightboxes which extend to the borders rather than the gopping padding we have now (Overwrites unused sections from the main style with the use of "initial") To use this style, when writing the js for colorbox, add the option in of className: "unpadded" Ian Naish */ #colorbox.unpadded{outline:0;} #colorbox.unpadded #cboxTopLeft{width:auto; width:initial; height:auto; height:initial; background:auto; background:initial;} #colorbox.unpadded #cboxTopRight{width:auto; width:initial; height:auto; height:initial; background:auto; background:initial;} #colorbox.unpadded #cboxBottomLeft{width:auto; width:initial; height:auto; height:initial; background:auto; background:initial;} #colorbox.unpadded #cboxBottomRight{width:auto; width:initial; height:auto; height:initial; background:auto; background:initial;} #colorbox.unpadded #cboxMiddleLeft{width:auto; width:initial; background:auto; background:initial;} #colorbox.unpadded #cboxMiddleRight{width:auto; width:initial; background:auto; background:initial;} #colorbox.unpadded #cboxTopCenter{height:auto; height:initial; background:auto; background:initial;} #colorbox.unpadded #cboxBottomCenter{height:auto; background:auto; height:initial; bbackground:auto; ackground:initial;} #colorbox.unpadded #cboxContent{overflow:visible;background:auto; background:initial;} #colorbox.unpadded .cboxIframe{background:#fff;} #colorbox.unpadded #cboxError{padding:50px; border:1px solid #ccc;} #colorbox.unpadded #cboxLoadedContent{background:#FFF;padding: 0 20px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:auto !important; height:initial !important; width:auto !important; width:initial !important;} #colorbox.unpadded #cboxLoadingOverlay{background:url(/images/colorbox/loading_background.png) no-repeat center center;} #colorbox.unpadded #cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) no-repeat center center;} #colorbox.unpadded #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #colorbox.unpadded #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #colorbox.unpadded #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #colorbox.unpadded #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #colorbox.unpadded #cboxPrevious.hover{background-position:-75px -25px;} #colorbox.unpadded #cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #colorbox.unpadded #cboxNext.hover{background-position:-50px -25px;} #colorbox.unpadded #cboxLoadingOverlay{background:url(/images/colorbox/loading_background.png) no-repeat center center;} #colorbox.unpadded #cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) no-repeat center center;} #colorbox.unpadded #cboxClose{position:absolute; top:3px; right:4px; background:url(/images/colorbox/controls.png) no-repeat -20px 0; width:25px; height:25px; text-indent:-9999px;} #colorbox.unpadded #cboxClose.hover{background-position:-25px -25px;}