/*
    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:url(images/overlay.png) repeat 0 0; opacity: 0.7; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
/* ssdMod: commented out
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
*/	
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}

/* ssdMod: commented out
        #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;}
		
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
*/		
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* 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; bottom:4px; right:30px; color:#0092ef;}

/* ssdMod: commented out
 
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/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/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        		
		#cboxClose{position:absolute; bottom:0; right:0; background:url(images/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 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.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);
}



/******* SSDMODS: ssdSkin for ColorBox ***********/


/* resets */
/* ssdMod: REMOVE BORDERS. This override hides border images which solves border offset problem created by making the title div longer vertically for description insert. (comment these out to see isse) when desc content is inserted at into cboxtitle. */
#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight,
#cboxMiddleLeft,
#cboxMiddleRight {  
	display:none; 
	}


#cboxLoadingOverlay{background:rgba(0,0,0,.9);} /* no image, just solid slight trans cover to indicate to user they are on a modal */


/* Controls Shared Attribs */
/* shared attribs, multistate controls spacing 34px, note text-indent:9999 is a cbox hack to hide <button> tag text which is the default if  a button image is NOT supplied, which in this SSD skin, it is, so btn text is shifted off screen via text-indent, greatly dislike this and it should be in the TITLE attrib so a hover would reveal it but I dont have control of the coding of the btn txt it's inserted by the cbox JS. */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { position:absolute; top:0px; width:34px; height:34px; background:url(../../widgetImageCache/widgetControlsGroup3StateRev2.1-Blue.png) no-repeat 0px 0px; outline:none; text-indent:-9999px} 


/* Controls Specifics/Fine Tuning */

/* Position each button on screen (via top/left/right) and position background image from multistate BG image */
/* Note on controls positioning: I tried to override abs positioning and make these inline blocks and float left/right but cbox rewrites the tags with local styles and overrides it.  Cbox is dependendent on abs positioning throughout. Fighting it was a losing battle.  Going with abs positioning */

/* My skin MOVES CONTROLS TO TOP (changed abs pos to top:0px from bottom: 0px ) OF IMAGE and open space for content to be displayed at top and stack them inline left rather than the pixel dims and abs positioned orig layout. */

#colorbox #cboxPrevious{ left:10px; background-position: 0px -1px;  }
#colorbox #cboxPrevious:hover{background-position: -68px -1px;}

#colorbox #cboxNext{ left: 50px; background-position: 0px -34px;}
#colorbox #cboxNext:hover{background-position: -68px -34px;}

#colorbox #cboxClose{right: 10px; background-position: 0px -204px; } /* right: 30px; offset for info button content scroll bar UNTIL moved with better tagging of desc within cboxTitle */
#colorbox #cboxClose:hover{ background-position: -68px -204px; }

#colorbox #cboxSlideshow { top: 0px; right: 50px; } /* set base style for cboxSlideshow */
/* to set play/pause state, cbox sets class on id="colorbox" of .cboxSlideshow_on/off */
.cboxSlideshow_on #cboxSlideshow{ background-position:-34px -170px;}  /* ON/playing - show PAUSE button MID color */
.cboxSlideshow_on #cboxSlideshow:hover{background-position: -68px -170px;} /* ON:hover - show PAUSE button HOT */
.cboxSlideshow_off #cboxSlideshow{background-position:-34px -136px;} /* OFF/paused - show PLAY button grey */
.cboxSlideshow_off #cboxSlideshow:hover{background-position: -68px -136px;} /* OFF:hover - show PLAY button Hot */

#colorbox #cboxCurrent{ position:absolute; top:8px; left: 170px; } /* this is the count, right of ssdImageDescriptionBtn, ssdImageDownloadBtn button */	

/* NON Cbox Buttons */
/* These are buttons that my code inserts into the UI, mainly description panels when it builds them */
.ssdImageDescriptionBtnSlideshow {
 position:absolute;
 top:0px;
 left: 90px; /* right of NEXT button */	
 width:34px; height:34px; 
 outline:none; 
 border:none;
 background:url(../../widgetImageCache/widgetControlsGroup3StateRev2.1-Blue.png) no-repeat 0px -238px; /* 8th row, so y=7x34px */
}
.ssdImageDescriptionBtnSlideshow:hover {
 background-position: -68px -238px; 
} 

.ssdImageDownloadBtnSlideshow {
position:absolute;
 top:0px;
 left: 130px; /* right of NEXT button */	
 width:34px; height:34px; 
 outline:none; 
 border:none;
 background:url(../../widgetImageCache/widgetControlsGroup3StateRev2.1-Blue.png) no-repeat 0px -306px; /* 10th row, so y=9x34px */	
}
.ssdImageDownloadBtnSlideshow:hover {
 background-position: -68px -306px; 
}

/* Main Elements */

#cboxContent {  /* outer wrapper for entire output (though there's other wrappers outside this), controls, titles, image, everything other than overlay */
padding-top:0px; 
}

#cboxLoadedContent{ /* image wrapper */
margin-top:135px; /* ssdMod: room for controls, and title/desc was 28px; */
margin-bottom:15px;
}


/* NOTE: cboxTitle: contains title and I insert show/hide btn and description into title and therefore open up space for it. Orig cbox css it is a one liner. */

/* SKIN: WHITE BG title/controls... uncomment/comment others, if desired. */
/*   adds top offset opens room for buttons, height and y scroll opens room from description content. left/right padding is space for controls on same line */
/*
#colorbox #cboxTitle{ top:35px; height:100px; overflow-y:scroll; } 
*/

/* SKIN: BLACK TRANS OVER IMAGE BG title/controls... uncomment/comment others, if desired */
/* top:0px puts title div in same position as controls, at top, add padding top to open room fro controls line, then add a little extra height to open up extra room for overlap so its same size as the WHITE BG non image overlap version. optional left/right padding is space for controls on same line */


#cboxContent,
#cboxLoadedContent { /* image wrapper */
margin-top:0px; /* move to TOP:0px to allow cboxTitle to overlap. */
margin:0 0; /* no margins since black BG */
padding:0;
background:#000;
}


#cboxLoadedContent { /* image wrapper */
margin-top:36px; /* buttons outside of box */

}


/* Image INFO */
/* The image info is inserted into the #cboxTitle container, normally cbox only supports a one line title taken from the TITLE attribute of the LINK (a tag) from which the cbox target is built.  So I stuff the title and a div class="ssdImageDescription" into it.  So to style it, I seta default style on the text of #cboxTitle and then a separate style(s) for the contents of ssdImageDescription.  Note since cboxTitle is assumed to be a one liner in default cbox, I open up some space for it by adding margin to the image wrapper #cboxLoadedContent if I want it to NOT overlap the image, if it overlaps, then I do NOT add margin */

#cboxCurrent{ color:#bbb; } /*  counter,  dark bg version */

#colorbox #cboxTitle{ 
position:absolute;
top:0px; 
/* min-height:60px; */
min-width:100%;
background:rgba(0,0,0,.8); 
padding: 41px 0 5px 0; /* note: to overlay image, title must start at top:0px and padding added to open up space for controls so dark title bg overlays from top of image. Note 36px (+5px gutter top/btm) (26px is min) pad top to accomodate buttons w no overlap so in narrow image case buttons dont overlap title. */

color: #fff;
font-size:16px;
font-weight:bold;
text-align:center;
}

#colorbox #cboxTitle .ssdImageDescriptionSlideshow { 
display:none; /* hidden by default */
max-height:300px; 
overflow-y: auto; 
margin:0 auto;
padding: 10px 20px; /* note: to overlay image, title must start at top:0px and padding added to open up space for controls so dark title bg overlays from top of image */

max-width:700px;
color: #ddd;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
font-weight:normal;
text-align:left;
}

#colorbox #cboxTitle .ssdImageDownloadSlideshow { 
display:none; /* hidden by default */
overflow-y: auto; 
margin:0 auto;
padding: 10px 20px; 
max-width:700px;

color: #fff;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
font-weight:normal;
text-align:center;
}