/*
	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; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
	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:#222; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{background:#fff;box-shadow: 0 0 35px rgba(0,0,0,0.9);border: 1px solid #ccc;border-radius:5px;outline:0;}
#cboxContent{}
.cboxIframe{background:#fff;}
#cboxError{padding:50px;}
#cboxLoadedContent{padding:7px;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{background:url('/static/img/ajax-loader-big.gif') no-repeat 50% 50%;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious, #cboxNext, #cboxClose {display:block; position:absolute;}

#cboxPrevious, #cboxNext{background:#fff; opacity:.55;}
#cboxPrevious:before, #cboxNext:before{content:'\0020'; width:0;	height:0;	padding:5px; display:inline-block; vertical-align:middle; border-style:solid; border-color: #555; border-width: 0 3px 3px 0; transform: rotate(135deg);}
#cboxNext:before{transform: rotate(-45deg);}
#cboxPrevious{padding: 10px 12px 11px 16px; top:50%; left:3px;}
#cboxPrevious:hover, #cboxNext:hover{opacity: 1;}
#cboxNext{padding: 10px 16px 11px 10px; top:50%; right:3px;}
#cboxClose{width:26px; height:26px; line-height:0; padding: 1px 5px 3px 5px; top:3px; right:3px; font-size:17px; font-weight:bold; color:#555; border:1px solid #ddd; border-radius: 5px;}
#cboxClose:hover{color:#ff0000;}