/*
    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:#fff; opacity: 0.9;}
#colorbox{outline:0;}
    #cboxContent{padding-top:86px; padding-bottom: 40px; margin:0px; overflow:visible; background:transparent; overflow:visible;}
        /*.cboxIframe{background:#fff;}*/
        #cboxError{padding:60px; border:1px solid #ccc;}
        #cboxLoadedContent{margin:0 0 0 0;}
        #cboxLoadingOverlay{/*background:url(images/loading_background.png) no-repeat center center;*/}
        #cboxLoadingGraphic{/*background:url(images/loading.gif) no-repeat center center;*/}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

        /* 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;  position:absolute; bottom:-29px; /*background:url(images/controls.png) no-repeat 0px 0px*/; width:23px; height:23px; text-indent:-9999px;}
       
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        /*#cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious:hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext:hover{background-position:-75px 0px;}*/
        #cboxClose {
            position: absolute;
            top: 0; right: 0;
            width: 86px; height: 86px;
            background: transparent;
        }
            #cboxClose:before {
                display: block;
                position: absolute;
                width: 86px; height: 24px;
                top: 32px; left: 0;
                content: "";
                background: url(../../img/credit_closeTxt.png) no-repeat 0 0;
                z-index: 2;
            }

            #cboxClose:after {
                display: block;
                position: absolute;
                width: 86px; height: 86px;
                top: 0; left: 0;
                content: "";
                background: url(../../img/credit_closeBg.png) no-repeat 0 0;
                z-index: 1;
                -webkit-transition: all .25s ease-out;
                   -moz-transition: all .25s ease-out;
                    -ms-transition: all .25s ease-out;
                     -o-transition: all .25s ease-out;
                        transition: all .25s ease-out;
            }
            #cboxClose:hover:after {
                -webkit-transform: rotate( 180deg );
                   -moz-transform: rotate( 180deg );
                    -ms-transform: rotate( 180deg );
                     -o-transform: rotate( 180deg );
                        transform: rotate( 180deg );
            }

        /* GALLERY */
        /*.galleryPhoto #cboxLoadedContent{margin:0 86px 0 0;}*/
        .galleryPhoto #cboxPrevious {
            position: absolute;
            width: 46px; height: 80px;
            top: 50%;
            left: 16%;
            margin: -40px 0 0;
            background: transparent;
        }
            .galleryPhoto #cboxPrevious:after {
                display: block;
                position: absolute;
                width: 46px; height: 80px;
                top: 0; left: 0;
                background: url(../img/pc_nav/prev.png);
                content: "";
                -webkit-transition: all .15s ease-out;
                   -moz-transition: all .15s ease-out;
                    -ms-transition: all .15s ease-out;
                     -o-transition: all .15s ease-out;
                        transition: all .15s ease-out;
            }
            .galleryPhoto #cboxPrevious:hover:after {
                -webkit-transform: translate(-15%, 0);
                   -moz-transform: translate(-15%, 0);
                    -ms-transform: translate(-15%, 0);
                     -o-transform: translate(-15%, 0);
                        transform: translate(-15%, 0);
            }
        .galleryPhoto #cboxNext {
            position: absolute;
            width: 46px; height: 80px;
            top: 50%;
            right: 16%;
            margin: -40px 0 0;
            background: transparent;
        }
            .galleryPhoto #cboxNext:after {
                display: block;
                position: absolute;
                width: 46px; height: 80px;
                top: 0; left: 0;
                background: url(../img/pc_nav/next.png);
                content: "";
                -webkit-transition: all .15s ease-out;
                   -moz-transition: all .15s ease-out;
                    -ms-transition: all .15s ease-out;
                     -o-transition: all .15s ease-out;
                        transition: all .15s ease-out;
            }
            .galleryPhoto #cboxNext:hover:after {
                -webkit-transform: translate(10%, 0);
                   -moz-transform: translate(10%, 0);
                    -ms-transform: translate(10%, 0);
                     -o-transform: translate(10%, 0);
                        transform: translate(10%, 0);
            }

/*Full Screen*/
.cboxFullScreen #cboxContent{padding-top:0; padding-bottom: 0;}
.cboxFullScreen #cboxClose { top: 24px; right: 24px; }