#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#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(colorbox/images/overlay.png) repeat 0 0; */ background-color:#CCC;opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; /*background:url(colorbox/images/controls.png) no-repeat -101px 0;*/}
    #cboxTopRight{width:21px; height:21px; /*background:url(colorbox/images/controls.png) no-repeat -130px 0;*/}
    #cboxBottomLeft{width:21px; height:21px; /*background:url(colorbox/images/controls.png) no-repeat -101px -29px;*/}
    #cboxBottomRight{width:21px; height:21px; /*background:url(colorbox/images/controls.png) no-repeat -130px -29px;*/}
    #cboxMiddleLeft{width:21px; /*background:url(colorbox/images/controls.png) left top repeat-y;*/}
    #cboxMiddleRight{width:21px; /*background:url(colorbox/images/controls.png) right top repeat-y;*/}
    #cboxTopCenter{height:21px; /*background:url(colorbox/images/border.png) 0 0 repeat-x;*/}
    #cboxBottomCenter{height:21px; /*background:url(colorbox/images/border.png) 0 -29px repeat-x;*/}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #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(colorbox/images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(colorbox/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;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(colorbox/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(colorbox/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(colorbox/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}



        .color-chart {
            overflow: hidden;
            position: relative;
        }
        .color-chart .colors > ul {
            list-style: none outside none;
            margin: 0;
            padding: 0;
            position: relative;
        }
        .color-chart .colors > ul li {
            border: 1px solid #8c8c8c;
            cursor: pointer;
            float: left;
            margin: 2px;
            position: relative;
            text-align: center;
        }
        .color-chart .colors > ul li strong {
            color: #444444;
            display: block;
            font-weight: normal;
            height: 20px;
            margin: 0;
            width: 100%;
        }
        .color-chart .colors {
            height: 410px;
            overflow-y: scroll;
            position: relative;
        }
        .color-chart .colors ul li.selected {
            border-color: #888;
            box-shadow: 0 0 5px #000;
        }
        .color-chart .colors > ul li:hover {
            border-color: #444;
            box-shadow: 0 0 3px #9f9f9f;
        }
        .color-chart .colors ul li span {
            background-image: url("https://d11jpnl4uum05e.cloudfront.net/images/sprite_icons.png");
            background-position: -2px -156px;
            height: 26px;
            position: absolute;
            right: 0;
            width: 26px;
        }
        .color-chart .i-help{
            width: 100%; 
            float: left; 
            font-size: 12px;
        }
        .color-chart .color-type{
           margin-bottom:5px;
        }
        .selected-colors {
            background-color: #f1f1f1;
            border: 1px solid #c8c7c7;
            display: block;
            overflow: hidden;
            padding: 5px;
            position: relative;
            width: auto;
            z-index: 9999;
        }
        .selected-colors span {
            float: left;
            font-size: 14px;
            margin: 4px 20px 0 0;
        }
        .selected-colors ul {
            list-style: none outside none;
            margin: 0 0 0 130px;
            padding: 0;
            width: 430px;
        }
        .selected-colors ul li {
            border: 1px solid #919191;
            float: left;
            margin: 2px;
            padding: 4px;
            width: 120px;
        }
        .selected-colors ul li input {
            font-size: 12px;
            padding: 2px;
            width: 75px;
        }
        .selected-colors .btn-done {
            background-color: #444444;
            color: #ffffff;
            cursor: pointer;
            float: right;
            margin-top: 6px;
            padding: 4px 12px;
        }
        .box-buttons {
            margin-top: 0;
        }