3 The following CSS is consistent between example themes and should not be altered.
\r
5 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
\r
6 #cboxOverlay{position:fixed; width:100%; height:100%;}
\r
7 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
\r
8 #cboxContent{position:relative;}
\r
9 #cboxLoadedContent{overflow:auto;}
\r
10 #cboxTitle{margin:0;}
\r
11 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
\r
12 #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
\r
13 .cboxPhoto{float:left; margin:auto; border:0; display:block;}
\r
14 .cboxIframe{width:100%; height:100%; display:block; border:0;}
\r
18 Change the following styles to modify the appearance of ColorBox. They are
\r
19 ordered & tabbed in a way that represents the nesting of the generated HTML.
\r
21 #cboxOverlay{background:url(../images/colorbox/overlay.png) repeat 0 0;}
\r
24 #cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -100px 0;}
\r
25 #cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -129px 0;}
\r
26 #cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -100px -29px;}
\r
27 #cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -129px -29px;}
\r
28 #cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls.png) left top repeat-y;}
\r
29 #cboxMiddleRight{width:21px; background:url(../images/colorbox/controls.png) right top repeat-y;}
\r
30 #cboxTopCenter{height:21px; background:url(../images/colorbox/border.png) 0 0 repeat-x;}
\r
31 #cboxBottomCenter{height:21px; background:url(../images/colorbox/border.png) 0 -29px repeat-x;}
\r
33 #cboxTopLeft{width:21px; height:21px;}
\r
34 #cboxTopRight{width:21px; height:21px;}
\r
35 #cboxBottomLeft{width:21px; height:21px;}
\r
36 #cboxBottomRight{width:21px; height:21px;}
37 #cboxMiddleLeft{width:21px;}
\r
38 #cboxMiddleRight{width:21px;}
\r
39 #cboxTopCenter{height:21px;}
\r
40 #cboxBottomCenter{height:21px;}
41 #cboxContent{background:#ffffff; overflow:hidden; color: #555555; padding: 10px 10px 0px 10px; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px;}
\r
42 #cboxError{padding:50px; border:1px solid #ccc;}
\r
43 #cboxLoadedContent{margin-bottom:28px;}
\r
44 #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
\r
45 #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
\r
46 #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
\r
47 #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
\r
48 #cboxPrevious.hover{background-position:-75px -25px;}
\r
49 #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
\r
50 #cboxNext.hover{background-position:-50px -25px;}
\r
51 #cboxLoadingOverlay{}
\r
52 #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}
\r
53 #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
\r
54 #cboxClose.hover{background-position:-25px -25px;}
\r
57 The following fixes a problem where IE7+ replaces a PNG's alpha transparency with a black fill
\r
58 when an alpha filter (opacity change) is set on the element or ancestor element.
\r
60 .cboxIE #cboxTopLeft,
\r
61 .cboxIE #cboxTopCenter,
\r
62 .cboxIE #cboxTopRight,
\r
63 .cboxIE #cboxBottomLeft,
\r
64 .cboxIE #cboxBottomCenter,
\r
65 .cboxIE #cboxBottomRight,
\r
66 .cboxIE #cboxMiddleLeft,
\r
67 .cboxIE #cboxMiddleRight {
\r
68 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
\r
72 The following provides PNG transparency support for IE6
\r
74 .cboxIE6 #cboxTopLeft{background:url(../images/colorbox/ie6/borderTopLeft.png);}
\r
75 .cboxIE6 #cboxTopCenter{background:url(../images/colorbox/ie6/borderTopCenter.png);}
\r
76 .cboxIE6 #cboxTopRight{background:url(../images/colorbox/ie6/borderTopRight.png);}
\r
77 .cboxIE6 #cboxBottomLeft{background:url(../images/colorbox/ie6/borderBottomLeft.png);}
\r
78 .cboxIE6 #cboxBottomCenter{background:url(../images/colorbox/ie6/borderBottomCenter.png);}
\r
79 .cboxIE6 #cboxBottomRight{background:url(../images/colorbox/ie6/borderBottomRight.png);}
\r
80 .cboxIE6 #cboxMiddleLeft{background:url(../images/colorbox/ie6/borderMiddleLeft.png);}
\r
81 .cboxIE6 #cboxMiddleRight{background:url(../images/colorbox/ie6/borderMiddleRight.png);}
\r
83 .cboxIE6 #cboxTopLeft,
\r
84 .cboxIE6 #cboxTopCenter,
\r
85 .cboxIE6 #cboxTopRight,
\r
86 .cboxIE6 #cboxBottomLeft,
\r
87 .cboxIE6 #cboxBottomCenter,
\r
88 .cboxIE6 #cboxBottomRight,
\r
89 .cboxIE6 #cboxMiddleLeft,
\r
90 .cboxIE6 #cboxMiddleRight {
\r
91 _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')");
\r