/*
  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; }
#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: #000; opacity: 0.7; filter: alpha(opacity = 70); }
#colorbox { outline: 0; }
  #cboxContent { margin-top: 40px; background: #fff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 3px 16px rgba(0,0,0,0.3); -webkit-box-shadow: 0 3px 16px rgba(0,0,0,0.3); box-shadow: 0 3px 16px rgba(0,0,0,0.3); }
    .cboxIframe { background: #000; }
    #cboxError { padding: 50px; border: 1px solid #ccc; }
    #cboxLoadedContent { border: 5px solid #fff; background: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
    #cboxTitle { position: absolute; bottom: 100%; left: 0; width: 75%; margin-bottom: 8px; font-size: 1.2em; color: #fff; }
    #cboxCurrent { display: none !important; position: absolute; top: -20px; right: 0px; color: #ccc; }
    #cboxLoadingGraphic { background: url(../../img/colorbox/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; top: -20px; right: 90px; color: #fff; }

    #cboxPrevious { position: absolute; top: 50%; left: 10px; margin-top: -18px; width: 36px; height: 36px; background: url(../../img/colorbox/sprite.png) 0 -36px no-repeat; text-indent: -9999px; }
    #cboxPrevious:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; }

    #cboxNext { position: absolute; top: 50%; right: 10px; margin-top: -18px; width: 36px; height: 36px; background: url(../../img/colorbox/sprite.png) 0 -72px no-repeat; text-indent: -9999px; }
    #cboxNext:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; }

    #cboxClose { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; background: url(../../img/colorbox/sprite.png) 0 0 no-repeat; text-indent: -9999px; }
    #cboxClose:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; }

@media screen and (min-width: 0) and (max-width: 640px) {
    #cboxClose  { right: 10px; }
    #cboxTitle { padding-left: 10px; padding-right: 10px; }
}