/** image viewer ****/
#imageViewer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 200000;
    background: url("images/modal-black80.png");
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    #imageViewer .close {
        position: absolute;
        display: block;
        width: 60px;
        height: 40px;
        background: url("images/close-top-right.png") no-repeat;
        top: 0px;
        right: 0px;
        cursor: pointer;
        z-index: 1;
    }

    #imageViewer .main-content {
        border: 1px solid #444;
        background: url("images/modal-black80.png");
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    #imageViewer .viewer-main {
        margin-right: 0px;
    }
    #imageViewer .img-wrapper {
        overflow: hidden;
        position: relative;
    }
    #imageViewer .bottom-nav {
        overflow: hidden;
        position: relative;
        padding: 0 20px;
        background-color: #222;
    }
        #imageViewer .nav-left,#imageViewer .nav-right {
            height: 100%;
            line-height: 80px;
            width: 20px;
            position: absolute;
            display: block;
            left: 0px;
            top: 0px;
            background-color: #000;
            cursor: pointer;
            text-align: center;
            background-image: url("images/arrows-s.png");
            background-repeat: no-repeat;
            background-position: 2px center;
        }
        #imageViewer .nav-left:hover,#imageViewer .nav-right:hover {
            background-color: #444444;
        }
        #imageViewer .nav-right {
            left: auto;
            right: 0px;
            background-position: -43px center;
        }
        #imageViewer .thumbnails {
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        #imageViewer .bottom-nav ul {
            overflow: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            margin-top: 10px;
        }
        
        #imageViewer .bottom-nav li {
            float: left;
            text-align: center;
            height: 60px;
        }
        #imageViewer .bottom-nav li a {
            display: block;
            height: 60px;
        }
        #imageViewer .bottom-nav li.selected a {
            border: 5px solid #0097b7;
            height: 50px;
        }
        #imageViewer .bottom-nav img {
            max-height: 100%;
        }
    #imageViewer .btn-left,#imageViewer .btn-right {
        display: block;
        width: 40px;
        height: 66px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -20px;
        cursor: pointer;
        background-color: #333333;
        text-align: center;
        line-height: 40px;
        z-index: 1;
        background-image: url("images/arrows-l.png");
        background-position: 7px center;
        background-repeat: no-repeat;
    }
    #imageViewer .btn-left:hover,#imageViewer .btn-right:hover {
        background-color: #444444;
    }
    #imageViewer .btn-right {
        left: auto;
        right: 0px;
        background-position: -69px center;
    }
    #imageViewer .img-wrapper .info {
        position: absolute;
        bottom: 0px;
        color: #fff;
        padding: 10px;
        width: 100%;
        background: url("images/modal-black80.png");
        border-bottom: 1px solid #444444;
    }
    #imageViewer .image {
        text-align: center;
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: relative;
    }
        #imageViewer .image .loading {
            color: #aaa;
            line-height: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -20px;
        }
        #imageViewer .image img {
            position: absolute;
            cursor: -webkit-grab;
            max-width: inherit;
            max-height: inherit;
        }
        #imageViewer .image img.moving {
            cursor: -webkit-grabbing;
        }
    #imageViewer a.zoom {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        background: url("images/zooms.png") 3px -23px no-repeat;
        border: 1px solid #222222;
    }
    #imageViewer a.zoom.best {
        background-position: 4px 4px;
    }
    #imageViewer .control-panel a {
        display: inline-block;
        line-height: 28px;
        padding: 0 10px;
    }
    #imageViewer .control-panel a.selected, #imageViewer .control-panel .selected a{
        background-color: #008a71;
        color: #ffffff;
    }
    #imageViewer #imgCategories ul {
        overflow: hidden;
    }
    #imageViewer #imgCategories h3 {
        margin-bottom: 10px;
        color: #666666;
    }
        #imageViewer #imgCategories ul > li {
            float: left;
        }
/** end image viewer ****/