* {
    word-wrap: break-word;
    word-break: break-all
}

html, body, div, span, table, tbody, tr, th, td, em, img, strong, h1, h2, h3, h4, h5, h6, p, a, dl, dd, dt, ol, ul, li, form, label, input, textarea, button, b, i, u {
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none
}

h1, h2, h3, h4, h5, h6, b {
    /*font-weight: 400;*/
    font-size: 100%;
    font-weight: normal
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit
}


a, fieldset, img {
    text-decoration: none;
    border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal
}


body {
    font-family: sans-serif,Arial, "Microsoft YaHei";
    background: #f0e1cc;
    /*color: #333;
   */
    /*font-size: 14px;*/
    /*min-width: 900px*/
}

a {
    color: #333;
    font-size: 14px
}

    a:link {
        text-decoration: none
    }

    a:visited {
        text-decoration: none;
        color: #333
    }

    a:hover {
        text-decoration: none;
        color: #333
    }

    a:active {
        text-decoration: none;
        color: #333
    }

.btn {
    font-size: 14px;
    color: #2d86ff;
    width: 120px;
    height: 30px;
    line-height: 30px;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #2d86ff
}

    .btn:hover {
        background: #2d86ff
    }

.sidebar {
    background: #f7ecdd;
    position: fixed;
    left: 0;
    top: 0;
    width: 160px;
    border-right: 1px solid #d0c4b2;
    -webkit-box-shadow: 2px 0 3px #d0c4b2;
    box-shadow: 2px 0 3px #d0c4b2;
    z-index: 20;
    bottom: 0;
    padding: 0 30px;
    -webkit-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
    overflow-y: auto
}

    .sidebar .quit {
        padding: 20px 0
    }

        .sidebar .quit a {
            font-size: 16px;
            color: #a68864;
            padding-left: 28px;
            background: url(/static/images/read/arrow-quit.png) no-repeat left -6px
        }

    .sidebar .active-read h3 {
        color: #a68864;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400
    }

    .sidebar .active-read .img {
        width: 160px;
        font-size: 16px;
        text-align: center
    }

        .sidebar .active-read .img .title {
            position: relative;
            left: -5%;
            width: 110%;
            text-align: center
        }

        .sidebar .active-read .img img {
            width: 100%;
            display: block;
            margin-bottom: 15px
        }

    .sidebar .active-read .price {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px
    }

        .sidebar .active-read .price .red {
            color: #ee2f2f
        }

    .sidebar .qr-code {
        margin: 20px 0;
        background: #f0e1cc;
        text-align: center
    }

        .sidebar .qr-code h3 {
            font-size: 16px;
            font-weight: 700;
            padding-top: 10px;
            height: 40px;
            line-height: 40px;
            margin: 0
        }

        .sidebar .qr-code img {
            display: block;
            width: 120px;
            margin: 0 auto
        }

        .sidebar .qr-code p {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #666
        }

    .sidebar .share {
        height: 20px;
        margin-bottom: 20px
    }

        .sidebar .share label {
            float: left
        }

        .sidebar .share a {
            display: block;
            height: 15px;
            width: 4px;
            margin: 3px 5px;
            background: url(/static/images/read/share.png) no-repeat left top;
            float: left
        }

            .sidebar .share a:hover {
                background-position: left -16px
            }

            .sidebar .share a.sina {
                background-position: -28px top
            }

                .sidebar .share a.sina:hover {
                    background-position: -28px -16px
                }

            .sidebar .share a.qzone {
                background-position: -57px top
            }

                .sidebar .share a.qzone:hover {
                    background-position: -57px -16px
                }

    .sidebar.close {
        left: -220px
    }

    .sidebar::-webkit-scrollbar {
        width: 4px;
        height: 4px
    }

    .sidebar::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2)
    }

    .sidebar::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1)
    }

.sidebar-control {
    width: 35px;
    height: 106px;
    background: url(/static/images/read/arrow-2.png) no-repeat right top;
    display: block;
    position: fixed;
    left: 220px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 999;
    -webkit-transition: left .3s;
    transition: left .3s
}

    .sidebar-control.close {
        left: 0;
        background-position: left top
    }


.icon {

}

.icon, .nav-login a, .tool-help-btn a, .mode-horizon .icon-tool-prev, .mode-horizon .icon-tool-next {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

/*.icon-close-active-night, .theme-night .icon-close-active, .theme-night a:hover .icon-close, a:hover .theme-night .icon-close, .theme-night a:active .icon-close, a:active .theme-night .icon-close {
    width: 13px;
    height: 13px;
    line-height: 13px;
    background-position: -173px -135px
}

.icon-close-active-white, .theme-white .bookshelf-book .icon-close-active, .theme-white .bookshelf-book a:hover .icon-close, a:hover .theme-white .bookshelf-book .icon-close, .theme-white .bookshelf-book a:active .icon-close, a:active .theme-white .bookshelf-book .icon-close {
    width: 13px;
    height: 13px;
    line-height: 13px;
    background-position: -188px -65px
}

.icon-close-active, a:hover .icon-close, a:active .icon-close {
    width: 13px;
    height: 13px;
    line-height: 13px;
    background-position: -188px -26px
}

.icon-close-night, .theme-night .icon-close {
    width: 13px;
    height: 13px;
    line-height: 13px;
    background-position: -188px -39px
}

.icon-close-white, .theme-white .bookshelf-book .icon-close {
    width: 13px;
    height: 13px;
    line-height: 13px;
    background-position: -188px -78px
}*/

.icon-close {
    width: 16px;
    height: 16px;
    line-height: 16px;
    background: url(/static/images/read/close.png) no-repeat;
   
    /*background-position: -188px -91px*/
}




.wp {
    width: 900px;
    margin: 0 auto
}


.container {
    /*padding-top: 68px;*/
    /*overflow: hidden;*/
    
    position: relative;
    margin: 0 auto;
    box-shadow: 0 2px 3px #d0c4b2;


    /*width: 900px;*/
    border: 1px solid #d0c4b2;
    background: #f0e1cc;
    -webkit-box-shadow: 0 2px 3px #d0c4b2;
}



    .container .box {
     
    }

    .container .head {
        padding: 0 35px;
        border-bottom: 1px solid #999;
        height: 70px;
        line-height: 70px;
        font-size: 14px;
        color: #333;
        position: relative
    }

        .container .head .progress {
            width: 100px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            right: 35px;
            background: #a68864;
            color: #fff;
            text-align: center;
            top: 25px
        }

        /*xiangzi*/
#book {
    position: relative
}

.book-view {
    z-index: 2;
    position: relative;
    overflow: hidden
}


.book-horizon .book-list {
    position: absolute;
    top: 0;
    left: 100%
}

.book {
    padding-bottom: 2em
}

    .book:nth-child(n+2) {
        margin-top: 1em
    }


    .book .book-wrap {
        padding-top: 2em
    }


.book-wrap {
    width: 780px;
 
}

.book-list {
    padding: 20px 35px 0;
    /*background: #FDF9F3;*/
    width: 100%;
    font-size: 18px;
}

.book {
    padding-bottom: 2em
}

    .book:nth-child(n+2) {
        margin-top: 1em
    }

    .book .book-wrap {
        /*padding-top: 2em*/
    }

.book-title {
    font-size: 1.7em;
    font-weight: normal;
    color: #A34544
}

.book-content {
    /*padding-top: 2em;*/
    color: #222;
    line-height: 2em
}

    .book-content p {
        text-indent: 2em;
        padding-bottom: 1em
    }



/*xiangzi*/

.container .content {
    /*padding: 20px 35px 0;
        font-size: 20px*/
    /*font-size: 20px;*/
}

        .container .content h1 {
            font-size: 30px;
            color: #a68864;
            font-weight: 700;
            margin-bottom: 25px
        }

    .container .content .book-content {
        line-height: 2em;
        /*line-height: 38px*/
    }

.container .control {
  
  
   
    /*margin-left: 1000px*/
}

    .container .control .controltool ul {
        z-index: 52;
        _position: absolute;
        position: fixed;
        top: 180px;
        margin-left: 900px;/*950*/
        border: 1px solid #d0c4b2;
    }

    .container .control .controltool ul li {
        display: block;
        position: relative;
        width: 60px;
        height: 60px;
        border-top: 1px solid #d0c4b2;
        text-align: center;
    }

        .container .control .controltool ul li:first-child {
            border: 0
        }

        .container .control .controltool ul li a {
            display: block;
            padding-top: 35px;
            background: url(/static/images/read/icon-1.png) no-repeat left top
        }

            .container .control .controltool ul li a.icon-2 {
                background-position: left -60px
            }

            .container .control .controltool ul li a.icon-3 {
                background-position: left -120px
            }

            .container .control .controltool ul li a.icon-4 {
                background-position: left -180px
            }

            .container .control .controltool ul li a.icon-5 {
                background-position: left -240px
            }

.layer {
    background: #f0e1cc;
    display: none;
    z-index: 10
}

    .layer .close {
        width: 16px;
        height: 16px;
        background: url(/static/images/read/close.png) no-repeat;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 99999
    }

        .layer .close:hover {
            opacity: .6
        }

    .layer.show {
        display: block
    }

.read-layer {
    border: 1px solid #d0c4b2;
    -webkit-box-shadow: 2px 2px 2px #d0c4b2;
    box-shadow: 2px 2px 2px #d0c4b2;
    position: fixed;
    z-index: 10;
    width: 460px;
    height: 294px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

    .read-layer h3 {
        font-size: 24px;
        height: 135px;
        line-height: 135px
    }

    .read-layer p {
        font-size: 16px;
        color: #666
    }

    .read-layer .price {
        font-size: 30px;
        color: #f60;
        height: 70px;
        line-height: 70px
    }

        .read-layer .price span {
            font-size: 16px
        }



        /*Ŀ¼*/

#main {
    /*position: relative;*/
    margin: 0 auto;
    /*box-shadow: 0 4px 8px 0 rgba(207, 201, 192, 0.8)*/
}


#tool {
    /*visibility: hidden;*/
    overflow: hidden;
    z-index: 5;
    position: fixed;
    top: 0;
    height: 100%;
    _display: block;
    _top: 0;
    _position: absolute;
    _height: expression(documentElement.offsetHeight);
    
}

.tool-dir {
    display: none;
    background: #FFF;
    box-shadow: 0px 2px 8px 0px rgba(188, 188, 188, 0.6)
}

.tool-dir-title {
    margin-bottom: 46px;
    color: #333;
    font-size: 26px;
    text-align: center
}



/*Ŀ¼*/

.catalog {
    /*width: 100%;*/
    position: absolute;
    /*left: 100%;*/
    top: 0;
    bottom: 0;
    z-index: 20;
 
    /*-webkit-transition: all .5s;
    transition: all .5s;*/
    /*display: block;*/
    /*opacity: 0*/
}

    .catalog h2 {
        /*text-align: center;
        font-size: 36px;
        font-weight: 700;
        height: 130px;
        line-height: 130px*/
    }



    .catalog .list {
        /*padding: 0 30px;
        overflow: hidden;
        overflow-y: auto*/
    }




        /*.catalog .list::-webkit-scrollbar {
            width: 4px;
            height: 4px
        }

        .catalog .list::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #a68864
        }

        .catalog .list::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: #999
        }*/


.tool-dir-list {
    position: relative;
    overflow: hidden;
    width: 734px;
    margin-left: 83px;
}

.tool-dir-bar {
    float: right;
    position: relative;
    width: 66px;
    height: 100%;
    background: #FFF
}

    .tool-dir-bar a {
        overflow: hidden;
        position: absolute;
        right: 0;
        width: 42px
    }

.tool-dir-drag {
    float: right;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    margin-right: 10px;
    background: #ededed
}


    .catalog .tool-dir-list  ul {
   
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
     
    }

.catalog .tool-dir-list li {
    height: 43px;
    line-height: 43px;
    border-bottom: 1px solid #e4dbcf;
    color: #2b2b2b
}

            .catalog .tool-dir-list  li a {
                overflow: hidden;
                display: block;
                height: 100%;
                vertical-align: middle
            }

            .catalog .tool-dir-list  li span {
                width: 40px;
                height: 20px;
                line-height: 20px;
                color: #fff;
                background: #48c268;
                border-radius: 3px;
                display: inline-block;
                vertical-align: middle;
                margin-left: 10px;
                text-align: center
            }

            .catalog .tool-dir-list ul li.gray a {
                color: #999
            }

    .catalog.show {
        left: 0;
        opacity: 1
    }




.setting-layer {
    display: block;
    position: absolute;
    top: 180px;
    right: 0;
    width: 340px;
    /*height: 328px;*/
    height: 208px;
    padding: 0 30px;
    -webkit-transition: all .5s;
    transition: all .5s;
    border: 1px solid #d0c4b2;
    -webkit-box-shadow: 0 0 4px #d0c4b2;
    box-shadow: 0 0 4px #d0c4b2;
    opacity: 0;
}

    .setting-layer h3 {
        font-size: 16px;
        font-weight: 700;
        height: 70px;
        line-height: 70px
    }

    .setting-layer .item {
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        margin-bottom: 25px
    }

        .setting-layer .item:after {
            display: block;
            content: '.';
            clear: both;
            height: 0;
            line-height: 0;
            visibility: hidden
        }

        .setting-layer .item label {
            float: left;
            width: 80px
        }

        .setting-layer .item .box {
            float: left;
            padding: 0
        }

            .setting-layer .item .box:after {
                display: block;
                content: '.';
                clear: both;
                height: 0;
                line-height: 0;
                visibility: hidden
            }

            .setting-layer .item .box a {
                display: block;
                float: left;
                margin-right: 10px
            }

        .setting-layer .item .color a {
            width: 30px;
            height: 30px;
            background: url(/static/images/read/icon-3.png) no-repeat left center
        }

        .setting-layer .item .color .color-1 {
            background-position: -36px center
        }

        .setting-layer .item .color .color-2 {
            background-position: -75px center
        }

        .setting-layer .item .color .color-3 {
            background-position: -112px center
        }

        .setting-layer .item .color .color-4 {
            background-position: -150px center
        }

        .setting-layer .item .color .color-5 {
            background-position: -187px center
        }

        .setting-layer .item .color .active {
            background-position: left center
        }

        .setting-layer .item .font a {
            width: 60px;
            height: 28px;
            line-height: 28px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 3px;
            text-align: center
        }

        .setting-layer .item .font .active {
            background: #e7f1ff;
            border-color: #2d86ff;
            color: #2d86ff
        }

        .setting-layer .item .size {
            background: #fff;
            border: 1px solid #ddd;
            text-align: center;
            width: 204px
        }

            .setting-layer .item .size a {
                width: 68px;
                font-size: 18px;
                margin: 0
            }

            .setting-layer .item .size input {
                width: 66px;
                border: 0;
                border-right: 1px solid #ddd;
                border-left: 1px solid #ddd;
                text-align: center;
                font-size: 14px;
                color: #999;
                float: left;
                height: 20px;
                line-height: 20px;
                position: relative;
                top: 5px
            }

        .setting-layer .item .type a {
            width: 72px;
            border: 1px solid #ddd;
            border-radius: 3px;
            text-align: left;
            height: 28px;
            line-height: 28px;
            padding-left: 38px;
            background: #fff url(/static/images/read/icon-2.png) no-repeat
        }

            .setting-layer .item .type a.type-left {
                background-position: 9px -29px
            }

                .setting-layer .item .type a.type-left.active {
                    background-position: 9px top
                }

            .setting-layer .item .type a.type-top {
                background-position: 9px -89px
            }

                .setting-layer .item .type a.type-top.active {
                    background-position: 9px -60px
                }

        .setting-layer .item .type .active {
            background-color: #e7f1ff;
            border-color: #2d86ff;
            color: #2d86ff
        }

    .setting-layer.show {
        /*right: 60px;*/
        /*right: 60px;*/
        opacity: 1
    }

.operating-layer {
    width: 340px;
    height: 328px;
    position: absolute;
    -webkit-transition: all .5s;
    transition: all .5s;
    display: block;
  
    border: 1px solid #d0c4b2;
    -webkit-box-shadow: 0 0 4px #d0c4b2;
    box-shadow: 0 0 4px #d0c4b2;
    padding: 0 30px;
    opacity: 0
}

    .operating-layer h3 {
        font-size: 16px;
        font-weight: 700;
        height: 70px;
        line-height: 70px
    }

    .operating-layer .item {
        height: 70px;
        overflow: hidden;
        margin-bottom: 2px
    }

        .operating-layer .item:after {
            display: block;
            content: '.';
            clear: both;
            height: 0;
            line-height: 0;
            visibility: hidden
        }

        .operating-layer .item label {
            float: left;
            width: 130px;
            text-align: right;
            margin-top: 10px
        }

            .operating-layer .item label.icon-left {
                background: url(/static/images/read/icon-4.png) no-repeat -35px -149px;
                text-indent: 30px
            }

            .operating-layer .item label.icon-top {
                background: url(/static/images/read/icon-4.png) no-repeat -38px -230px;
                text-indent: 30px
            }

        .operating-layer .item .box {
            float: left;
            padding: 0;
            margin-left: 25px
        }

            .operating-layer .item .box:after {
                display: block;
                content: '.';
                clear: both;
                height: 0;
                line-height: 0;
                visibility: hidden
            }

            .operating-layer .item .box i {
                background: url(/static/images/read/icon-4.png) no-repeat;
                display: block;
                width: 80px;
                height: 48px
            }

            .operating-layer .item .box .icon-1 {
                background-position: -189px -53px
            }

            .operating-layer .item .box .icon-2 {
                background-position: -190px -137px
            }

            .operating-layer .item .box .icon-3 {
                background-position: -188px -220px
            }

    .operating-layer.show {
        right: 60px;
        opacity: 1
    }

.background {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 50;
    display: none
}

.comment-layer {
    width: 100%;
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    z-index: 51;
    -webkit-transition: all .5s;
    transition: all .5s;
    display: block;
    opacity: 0;
    background: #fff;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

    .comment-layer.show {
        left: 0;
        opacity: 1
    }

    .comment-layer .title {
        border-bottom: 1px solid #ddd;
        padding-top: 30px;
        height: 70px;
        line-height: 70px;
        position: relative;
        margin-bottom: 30px
    }

        .comment-layer .title h2 {
            font-size: 24px;
            font-weight: 700
        }

            .comment-layer .title h2:before {
                content: '';
                display: inline-block;
                vertical-align: middle;
                height: 24px;
                background: #2d86ff;
                width: 3px;
                margin-left: 10px
            }

        .comment-layer .title .total {
            position: absolute;
            right: 20px;
            top: 30px;
            color: #666;
            display: inline-block;
            line-height: 70px
        }

            .comment-layer .title .total span {
                font-size: 22px;
                color: #f00;
                padding: 0 5px
            }

    .comment-layer .scroll {
        padding: 0 30px 0 10px;
        overflow: hidden;
        overflow-y: auto
    }

        .comment-layer .scroll::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }

        .comment-layer .scroll::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #2d86ff
        }

        .comment-layer .scroll::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: #999
        }

    .comment-layer .text-area {
        margin-bottom: 50px
    }

        .comment-layer .text-area .textarea {
            padding: 5px;
            background: #f2f2f2;
            border: 1px solid #ddd;
            line-height: 20px;
            font-size: 14px;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            height: 200px;
            display: block;
            margin-bottom: 30px
        }

        .comment-layer .text-area .btn {
            width: 200px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            background: #2d86ff;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            color: #fff
        }

    .comment-layer .comment-list {
        margin-bottom: 120px;
        border-top: 1px solid #ddd
    }

        .comment-layer .comment-list .item {
            padding: 20px 0 20px 80px;
            position: relative;
            border-bottom: 1px dotted #ddd
        }

            .comment-layer .comment-list .item .face {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                position: absolute;
                left: 0;
                top: 20px
            }

                .comment-layer .comment-list .item .face img {
                    width: 100%
                }

            .comment-layer .comment-list .item h3 {
                display: block;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: 700
            }

                .comment-layer .comment-list .item h3 span {
                    font-weight: 400;
                    padding-left: 10px
                }

            .comment-layer .comment-list .item .content {
                padding: 0;
                margin-bottom: 20px;
                color: #666;
                line-height: 22px
            }

            .comment-layer .comment-list .item .other {
                color: #999;
                font-size: 12px;
                text-align: right;
                height: 20px;
                line-height: 20px
            }

                .comment-layer .comment-list .item .other a {
                    color: #999;
                    font-size: 12px
                }

                .comment-layer .comment-list .item .other em {
                    padding: 0 12px;
                    font-style: normal
                }

                .comment-layer .comment-list .item .other .close-reply span:first-child {
                    display: none
                }

            .comment-layer .comment-list .item.show .reply-list {
                display: block
            }

            .comment-layer .comment-list .item.show .close-reply span {
                display: none
            }

                .comment-layer .comment-list .item.show .close-reply span:first-child {
                    display: inline-block;
                    background: #f5f5f5;
                    padding: 0 10px
                }

        .comment-layer .comment-list .reply-list {
            background: #f5f5f5;
            padding: 0 10px;
            display: none
        }

            .comment-layer .comment-list .reply-list .item {
                padding-top: 10px
            }

                .comment-layer .comment-list .reply-list .item:last-child {
                    border-bottom: 0
                }

                .comment-layer .comment-list .reply-list .item .face {
                    width: 40px;
                    height: 40px;
                    left: 10px;
                    top: 10px
                }

                .comment-layer .comment-list .reply-list .item h3 {
                    height: 40px;
                    line-height: 40px;
                    font-weight: 400
                }

    .comment-layer .paging {
        text-align: center
    }

        .comment-layer .paging a, .comment-layer .paging span {
            padding: 0 10px;
            display: inline-block;
            vertical-align: middle;
            margin: 0 5px;
            border: 1px solid #ddd;
            font-size: 12px;
            color: #666;
            height: 30px;
            line-height: 30px;
            border-radius: 3px;
            min-width: 30px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

        .comment-layer .paging .active {
            background: #2d86ff;
            border-color: #2d86ff;
            color: #fff
        }

.style-green {
    background: #cddfcd
}

    .style-green .sidebar {
        background: #eaf4e9;
        border-color: #b3c3b3;
        -webkit-box-shadow: 2px 0 3px #b3c3b3;
        box-shadow: 2px 0 3px #b3c3b3
    }

        .style-green .sidebar .quit a {
            color: #7ca77c;
            background-position: left -37px
        }

        .style-green .sidebar .active-read h3 {
            color: #7ca77c
        }

        .style-green .sidebar .qr-code {
            background: #cddfcd
        }

    .style-green .container {
        background: #eaf4e9;
        border-color: #b3c3b3;
        -webkit-box-shadow: 0 2px 3px #b3c3b3;
        box-shadow: 0 2px 3px #b3c3b3
    }

        .style-green .container .head .progress {
            background: #7ca77c
        }

        .style-green .container .content h1 {
            color: #7ca77c
        }

        .style-green .container .control {
            background: #eaf4e9
        }

            .style-green .container .control ul {
                background: #eaf4e9;
                border-color: #b3c3b3
            }

    .style-green .layer {
        background: #eaf4e9
    }

    .style-green .read-layer {
        border-color: #b3c3b3;
        -webkit-box-shadow: 2px 2px 2px #b3c3b3;
        box-shadow: 2px 2px 2px #b3c3b3
    }

    .style-green .catalog ul li {
        border-color: #b3c3b3
    }

    .style-green .catalog .list::-webkit-scrollbar-thumb {
        background: #7ca77c
    }

    .style-green .operating-layer {
        -webkit-box-shadow: 0 0 4px #b3c3b3;
        box-shadow: 0 0 4px #b3c3b3;
        border-color: #b3c3b3
    }

    .style-green .setting-layer {
        -webkit-box-shadow: 0 0 4px #b3c3b3;
        box-shadow: 0 0 4px #b3c3b3;
        border-color: #b3c3b3
    }

.style-red {
    background: #f2d9d9
}

    .style-red .sidebar {
        background: #f5e4e4;
        border-color: #cbb7b7;
        -webkit-box-shadow: 2px 0 3px #cbb7b7;
        box-shadow: 2px 0 3px #cbb7b7
    }

        .style-red .sidebar .quit a {
            color: #c27777;
            background-position: left -64px
        }

        .style-red .sidebar .active-read h3 {
            color: #c27777
        }

        .style-red .sidebar .qr-code {
            background: #f2d9d9
        }

    .style-red .container {
        background: #f5e4e4;
        border-color: #cbb7b7;
        -webkit-box-shadow: 0 2px 3px #cbb7b7;
        box-shadow: 0 2px 3px #cbb7b7
    }

        .style-red .container .head .progress {
            background: #c27777
        }

        .style-red .container .content h1 {
            color: #c27777
        }

        .style-red .container .control {
            background: #f5e4e4
        }

            .style-red .container .control ul {
                background: #f5e4e4;
                border-color: #cbb7b7
            }

    .style-red .layer {
        background: #f5e4e4
    }

    .style-red .read-layer {
        border-color: #cbb7b7;
        -webkit-box-shadow: 2px 2px 2px #cbb7b7;
        box-shadow: 2px 2px 2px #cbb7b7
    }

    .style-red .catalog ul li {
        border-color: #cbb7b7
    }

    .style-red .catalog .list::-webkit-scrollbar-thumb {
        background: #c27777
    }

    .style-red .operating-layer {
        -webkit-box-shadow: 0 0 4px #cbb7b7;
        box-shadow: 0 0 4px #cbb7b7;
        border-color: #cbb7b7
    }

    .style-red .setting-layer {
        -webkit-box-shadow: 0 0 4px #cbb7b7;
        box-shadow: 0 0 4px #cbb7b7;
        border-color: #cbb7b7
    }

.style-blue {
    background: #d1e0e4
}

    .style-blue .sidebar {
        background: #dfecf0;
        border-color: #b7c4c7;
        -webkit-box-shadow: 2px 0 3px #b7c4c7;
        box-shadow: 2px 0 3px #b7c4c7
    }

        .style-blue .sidebar .quit a {
            color: #5f8c99;
            background-position: left -98px
        }

        .style-blue .sidebar .active-read h3 {
            color: #5f8c99
        }

        .style-blue .sidebar .qr-code {
            background: #d1e0e4
        }

    .style-blue .container {
        background: #dfecf0;
        border-color: #b7c4c7;
        -webkit-box-shadow: 0 2px 3px #b7c4c7;
        box-shadow: 0 2px 3px #b7c4c7
    }

        .style-blue .container .head .progress {
            background: #5f8c99
        }

        .style-blue .container .content h1 {
            color: #5f8c99
        }

        .style-blue .container .control {
            background: #dfecf0
        }

            .style-blue .container .control ul {
                background: #dfecf0;
                border-color: #b7c4c7
            }

    .style-blue .layer {
        background: #dfecf0
    }

    .style-blue .read-layer {
        border-color: #b7c4c7;
        -webkit-box-shadow: 2px 2px 2px #b7c4c7;
        box-shadow: 2px 2px 2px #b7c4c7
    }

    .style-blue .catalog ul li {
        border-color: #b7c4c7
    }

    .style-blue .catalog .list::-webkit-scrollbar-thumb {
        background: #5f8c99
    }

    .style-blue .operating-layer {
        -webkit-box-shadow: 0 0 4px #b7c4c7;
        box-shadow: 0 0 4px #b7c4c7;
        border-color: #b7c4c7
    }

    .style-blue .setting-layer {
        -webkit-box-shadow: 0 0 4px #b7c4c7;
        box-shadow: 0 0 4px #b7c4c7;
        border-color: #b7c4c7
    }

.style-gray {
    background: #e5e5e5
}

    .style-gray .sidebar {
        background: #f0f0f0;
        border-color: #c8c8c8;
        -webkit-box-shadow: 2px 0 3px #c8c8c8;
        box-shadow: 2px 0 3px #c8c8c8
    }

        .style-gray .sidebar .quit a {
            color: #6f6f6f;
            background-position: left -128px
        }

        .style-gray .sidebar .active-read h3 {
            color: #6f6f6f
        }

        .style-gray .sidebar .qr-code {
            background: #e5e5e5
        }

    .style-gray .container {
        background: #f0f0f0;
        border-color: #c8c8c8;
        -webkit-box-shadow: 0 2px 3px #c8c8c8;
        box-shadow: 0 2px 3px #c8c8c8
    }

        .style-gray .container .head .progress {
            background: #6f6f6f
        }

        .style-gray .container .content h1 {
            color: #6f6f6f
        }

        .style-gray .container .control {
            background: #f0f0f0
        }

            .style-gray .container .control ul {
                background: #f0f0f0;
                border-color: #c8c8c8
            }

    .style-gray .layer {
        background: #f0f0f0
    }

    .style-gray .read-layer {
        border-color: #c8c8c8;
        -webkit-box-shadow: 2px 2px 2px #c8c8c8;
        box-shadow: 2px 2px 2px #c8c8c8
    }

    .style-gray .catalog ul li {
        border-color: #c8c8c8
    }

    .style-gray .catalog .list::-webkit-scrollbar-thumb {
        background: #6f6f6f
    }

    .style-gray .operating-layer {
        -webkit-box-shadow: 0 0 4px #c8c8c8;
        box-shadow: 0 0 4px #c8c8c8;
        border-color: #c8c8c8
    }

    .style-gray .setting-layer {
        -webkit-box-shadow: 0 0 4px #c8c8c8;
        box-shadow: 0 0 4px #c8c8c8;
        border-color: #c8c8c8
    }

.style-black {
    background: #000
}

    .style-black .sidebar {
        background: #161819;
        border-color: rgba(0,0,0,0);
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .style-black .sidebar .quit a {
            color: #666;
            background-position: left -156px
        }

        .style-black .sidebar .active-read h3 {
            color: #666
        }

        .style-black .sidebar .qr-code {
            background: #000
        }

    .style-black .container {
        background: #161819;
        border-color: rgba(0,0,0,0);
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .style-black .container .head .progress {
            background: #666
        }

        .style-black .container .content h1 {
            color: #666
        }

        .style-black .container .control {
            background: #161819
        }

            .style-black .container .control ul {
                background: #161819;
                border-color: rgba(0,0,0,0)
            }

                .style-black .container .control ul li {
                    border-color: #141617
                }

                    .style-black .container .control ul li a {
                        background-image: url(/static/images/read/icon-1-2.png)
                    }

    .style-black .layer {
        background: #161819
    }

    .style-black .read-layer {
        border-color: rgba(0,0,0,0);
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .style-black .catalog ul li {
        border-color: rgba(0,0,0,0)
    }

    .style-black .catalog .list::-webkit-scrollbar-thumb {
        background: #666
    }

    .style-black .operating-layer {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: rgba(0,0,0,0)
    }

    .style-black .setting-layer {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: rgba(0,0,0,0)
    }



    /*
        xiangzi

    */

.screen-small .container {
    width: 640px
}

.screen-small .book-wrap {
    width: 510px;
    margin: 0 65px
}

.screen-small #toolbtn {
    top: 118px;
    margin-left: 640px;
}

.screen-small #wrap {
    padding-top: 52px
}

.screen-small .tool-set {
    top: 118px;
    _margin-top: -53px
}

.screen-small .tool-dir-list {
    width: 474px
}
/*
        xiangzi

    */


.book-horizon-btn {
    clear: both;
    z-index: 2;
    display: none;
    position: absolute;
    top: 0;
    height: 100%
}

.book-horizon-prev, .book-horizon-next {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%
}

.book-horizon-prev {
    right: 100%;
    cursor: url(/Static/images/book/prev.cur), auto
}

.book-horizon-next {
    left: 100%;
    cursor: url(/Static/images/book/next.cur), auto
}


.mode-horizon {
    height: 100%
}

    .mode-horizon .book-horizon, .mode-horizon .book-horizon-btn {
        display: block
    }

    .mode-horizon .icon-tool-up, .mode-horizon .icon-tool-down {
        display: none
    }


.tool-close {
    overflow: hidden;
    width: 16px;
    height: 16px;
    padding: 20px;
    text-align: right;

}

    .tool-close a {
        *position: relative
    }

.icon, .nav-login a, .tool-help-btn a, .mode-horizon .icon-tool-prev, .mode-horizon .icon-tool-next {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

    .icon:after {
        content: '.';
        visibility: hidden;
    }



.dir-active #tool {
    visibility: visible;
}

.dir-active .tool-dir {
    display: block
}

.set-active #tool {
    visibility: visible
}

.set-active .tool-set {
    display: block
}

c {
    /*
	padding-bottom: 1em;
	line-height: 1em;
    font-size: 1.7em;
    */
    font-weight: normal;
    color: #A34544;
}


.book-header {
    z-index: 3;
    position: absolute;
    top: 0;
    background: #FDF9F3
}

.book-header-wrap {
    position: relative;
    padding: 37px 0 32px
}

    .book-header-wrap .book-wrap {
        border-bottom: 1px solid #e3e0da
    }


.book-header-title {
    height: 14px;
    padding-bottom: 14px;
    font-size: 14px;
    color: #666
}