3 The following CSS is consistent between example themes and should not be altered.
5 #colorbox, #cboxOverlay
, #cboxWrapper
{position:absolute
; top:0; left:0; z-index:9999; overflow:hidden
;}
6 #cboxWrapper {max-width:none
;}
7 #cboxOverlay{position:fixed
; width:100%; height:100%;}
8 #cboxMiddleLeft, #cboxBottomLeft
{clear:left
;}
9 #cboxContent{position:relative
;}
10 #cboxLoadedContent{overflow:auto
; -webkit-overflow-scrolling: touch
;}
12 #cboxLoadingOverlay, #cboxLoadingGraphic
{position:absolute
; top:0; left:0; width:100%; height:100%;}
13 #cboxPrevious, #cboxNext
, #cboxClose
, #cboxSlideshow
{cursor:pointer
;}
14 .cboxPhoto{float:left
; margin:auto
; border:0; display:block
; max-width:none
; -ms-interpolation-mode:bicubic
;}
15 .cboxIframe{width:100%; height:100%; display:block
; border:0; padding:0; margin:0;}
16 #colorbox, #cboxContent
, #cboxLoadedContent
{-webkit-box-sizing: content-box
;-moz-box-sizing: content-box
;box-sizing: content-box
;}
18 /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
19 #cboxPrevious, #cboxNext
, #cboxSlideshow
, #cboxClose
{border:0; padding:0; margin:0; overflow:visible
; width:auto
; background:none
; }
20 /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
21 #cboxPrevious:active
, #
cboxNext:active
, #
cboxSlideshow:active
, #
cboxClose:active
{outline:0;}
25 ColorBox example user style
26 The following rules are ordered and tabbed in a way that represents the
27 order/nesting of the generated HTML, so that the structure easier to understand.
29 #cboxOverlay{background:transparent
;}
31 #cboxTopLeft,#cboxTopRight
,#cboxBottomLeft
,#cboxBottomRight
,#cboxMiddleLeft
,#cboxMiddleRight
,#cboxTopCenter
,#cboxBottomCenter
{width:20px;height:20px;}
32 #cboxContent{background: transparent
;}
33 #cboxLoadedContent{padding:10px;}
34 .cboxPhoto{ -webkit-box-shadow: 0 0 10px 2px rgba
(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px 2px rgba
(0, 0, 0, 0.3); box-shadow: 0 0 10px 2px rgba
(0, 0, 0, 0.3);}
35 #cboxTitle{ position: absolute
; left: 10px; right: 10px; bottom: 10px; padding: 0 10px;
36 text-align: center
; color: #fff; font-weight: bold
; font-size: 0.9em; background-image: url
('images/fancy_title_over.png'); }
37 #cboxCurrent{position: absolute
; left: -3000em}
38 #cboxPrevious{position: absolute
; top: 0; left: 15px; width: 35% ; height: 100%; text-indent:-9999px;}
39 #cboxPrevious.hover
{background:url
(images
/fancy_shadow-spt1
.png
) -170px 50% no-repeat
;}
40 #cboxNext{position: absolute
; top: 0; right: 15px; width: 35% ; height: 100%; text-indent:-9999px;}
41 #cboxNext.hover
{background:url
(images/fancy_right.png) right
50% no-repeat
;}
42 #cboxSlideshow{position:absolute
; top: -12px; left:-15px; width: 30px; height: 30px;
43 background:url
(images
/fancy_shadow-spt2
.png
) -40px -35px no-repeat
; text-indent:-9999px;}
44 #cboxLoadingOverlay{background:#fff;}
45 #cboxLoadingGraphic{background:url
(images/loading.gif) center center no-repeat
;}
46 #cboxClose{position:absolute
; top: -12px; right: -15px; height: 30px; width: 30px;
47 background:url
(images
/fancy_shadow-spt2
.png
) -0px -35px no-repeat
; text-indent:-9999px;border:0}
49 .cboxSlideshow_on #cboxSlideshow{background-position:-80px -35px;}
50 .cboxSlideshow_off #cboxSlideshow{background-position:-40px -35px;}