body {
    font: 100% "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 13.33px;

}

/* VIEWER ******************/
.viewer {
    background-image: url("../../assets/images/viewer/bg.png");
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* TOP ******************/
.top_menu {
    background-image: url("../../assets/images/viewer/bg.png");
    border-bottom: 1px solid #777777;
    color: #CCCCCC;
    width: 100%;
    position: absolute;
    z-index: 1000;

    -moz-box-shadow: 0px 2px 5px 0px #222222;
    -webkit-box-shadow: 0px 2px 5px 0px #222222;
    -o-box-shadow: 0px 2px 5px 0px #222222;
    box-shadow: 0px 2px 5px 0px #222222;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=180, Strength=5);
}

.title {
    font-size: 24px;
    padding: 14px;
    overflow: hidden;
    white-space: nowrap;
    float: left;
    font-family: "隶书";
}

.close_viewer {
    background: url("../../assets/images/viewer/viewer-close.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
}

.open_viewer {
    background: url("../../assets/images/viewer/viewer-open.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
}

.prev_record {
    background: url("../../assets/images/viewer/prev_record.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
    display: none;
}

.next_record {
    background: url("../../assets/images/viewer/next_record.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border-left: 1px solid #444444;
    cursor: pointer;
    float: right;
    height: 50px;
    width: 44px;
    margin-left: 10px;
    display: none;
}


.BtCollaborate {
    background: url("../../assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #3d94f6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #337fed;
    display: inline-block;
    color: #ffffff;
    font-weight: normal;
    padding: 6px 24px 6px 48px;
    text-decoration: none;
    float: right;
    cursor: pointer;
    margin-top: 10px;
}

.BtCollaborate:hover {
    background: url("../../assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #1e62d0;
}

.BtCollaborate:active {
    position: relative;
    top: 1px;
}

.BtCollaborate_exit {
    background: url("../../assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #aa0000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #bb0000;
    display: inline-block;
    color: #ffffff;
    font-weight: normal;
    padding: 6px 24px 6px 48px;
    text-decoration: none;
    float: right;
    cursor: pointer;
    margin-top: 10px;
}

.BtCollaborate_exit:hover {
    background: url("../../assets/images/viewer/collaborate.png") 12px -2px no-repeat;
    background-color: #cc0000;
}

.BtCollaborate_exit:active {
    position: relative;
    top: 1px;
}

/* THUMB ***************************/

.content_thumb, .content_thumbbig {
    overflow-y: scroll;
    background-image: url("../../assets/images/viewer/bg.png");
    position: absolute;
}

.thumbimg {
    border: 1px solid #777777;
    background-color: #111111;
    text-align: center;
    width: 140px;
    height: 160px;
    padding: 10px;
    margin-bottom: 10px;

    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=10);
}

.thumbimg_medium {
    border: 1px solid #777777;
    background-color: #111111;
    text-align: center;
    width: 420px;
    height: 480px;
    padding: 10px;
    margin-bottom: 10px;
    display: table-cell;
    vertical-align: middle;

    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=10);
}

.thumb {
    float: left;
    margin: 20px;
    text-align: center;
    color: #CCCCCC;
    font-size: 12px;

}

.thumb_mobile {
    margin: 5px;
}

.thumb_mobile .thumbimg {
    width: 90px;
    height: 110px;

    padding: 5px;
    margin-bottom: 5px;
}

.thumbbig {
    /*position: absolute;*/
    text-align: center;
    color: #CCCCCC;
    font-size: 12px;
    float: left;
    margin: 20px;
}

.thumbbigimg {
    border: 1px solid #777777;
    background-color: #111111;
    text-align: center;

    padding: 10px;
    margin-bottom: 10px;


    -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow: 0px 0px 10px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=10);
}

.current_thumb {
    background-color: #2B2117;
    border: 1px solid #8F7449
}

/* FLIP ***************************/
.mybook_shadow {
    -moz-box-shadow: 0px 0px 20px 0px #000;
    -webkit-box-shadow: 0px 0px 20px 0px #000;
    -o-box-shadow: 0px 0px 20px 0px #000;
    box-shadow: 0px 0px 20px 0px #000;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=20);
}

/* PICTURE  ***********************/
.picture {
    overflow: hidden;
    background-image: url("../../assets/images/viewer/bg.png");
    width: 100%;
}

.grid {
    border: 0px solid #ff0000;
    cursor: move;
    -moz-box-shadow: 0px 0px 20px 0px #000;
    -webkit-box-shadow: 0px 0px 20px 0px #000;
    -o-box-shadow: 0px 0px 20px 0px #000;
    box-shadow: 0px 0px 20px 0px #000;
    /*filter:progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=20);*/
    /*background-color: rgba(0, 0, 0, 0.5);*/
    z-index: 0;
}

.layer {
    position: absolute;
}

.page_next, .page_next_flip {
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-left: 1px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
}

.page_prev, .page_prev_flip {
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-right: 1px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
    left: 0px;
}

.page_prev img, .page_next img, .pae_prev_flip img, .page_next_flip img {
    margin-top: 26px;
    margin-bottom: 18px;
}

.page_prev:hover, .page_next:hover, .page_prev_flip:hover, .page_next_flip:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    cursor: pointer;
}

.content_picture, .content_flip {
    overflow: hidden;
    background-image: url("../../assets/images/viewer/bg.png");
    position: absolute;
    z-index: 2;
    text-align: center;
}

.navbox {
    float: left;
    z-index: 1000;
    position: absolute;
    background-color: #000;
    padding: 1px;
}

.navcontainer {
    margin-top: 3px;
}

.navcontainer img {
    border: 0px solid #000;
}

.navtoolbar {
    background-image: url("../../assets/images/viewer/bg-dark.png");
    cursor: move;
    height: 22px;
}

.navtoolbar:hover {
    background-image: url("../../assets/images/viewer/bg-title.png");
}

.navzone {
    background: none repeat scroll 0 0 #888888;
    cursor: move;
    opacity: 0.4;
    filter: alpha(opacity=40);
    position: absolute;
}

.navzone_border {
    border: 1px solid yellow;
    width: 100%;
    height: 100%;
}

.navclose, .navopen {
    color: #CCCCCC;
    font-size: 12px;
    float: right;
    text-align: right;
    cursor: pointer;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.navclose:hover, .navopen:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navaction {
    display: block;
    color: #CCCCCC;
    font-size: 13.3px;
    background-image: url("../../assets/images/viewer/bg-dark.png");
    height: 22px;
}

.zoomOut {
    width: 16px;
    float: left;
    padding: 2px 0px 0px 2px;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.zoomOut:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.prc {
    float: left;
    text-align: center;
}

.prc_mobile {
    padding: 7px 0px 0px 0px;
}

.viewer_control_page {
    padding-top: 14px;
}

.zoomIn {
    width: 16px;
    float: right;
    padding: 2px 2px 0px 0px;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.zoomIn:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}


/* BOTTOM *********************/

.bottom_menu {
    background-image: url("../../assets/images/viewer/bg.png");
    border-top: 1px solid #777777;
    color: #CCCCCC;
    width: 100%;
    position: absolute;
    z-index: 1000;

    -moz-box-shadow: 0px -2px 5px 0px #222222;
    -webkit-box-shadow: 0px -2px 5px 0px #222222;
    -o-box-shadow: 0px -2px 5px 0px #222222;
    box-shadow: 0px -2px 5px 0px #222222;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=90, Strength=5);
}

.buoy {
    position: absolute;
    margin-top: -50px;
}

.bottom_bt {
    float: left;
    padding: 12px 0px 0px 12px;
    position: relative;
}

.bottom_bt_left {
    float: left;
    padding: 12px 0px 0px 12px;
    position: relative;
    height: 38px;
}

.type_view {
    padding-right: 6px;
    background-image: url("../../assets/images/viewer/bg-middle.png");
    border-right: 1px solid #444;
}

.type_view img {
    padding-right: 5px;
}

.type_share {
    margin-left: 10px;
    border-left: 1px solid #444;
}

.type_share img {
    padding-right: 5px;
}

.BtInvert {
    margin-left: 10px;
    border-left: 1px solid #444;
}

.bottom_bt_right {
    float: right;
    padding: 12px 10px 0px 0px;
}


.button {
    cursor: pointer;
    opacity: 0.6;
    filter: alpha(opacity=60);
}


.button_type_view {
    cursor: pointer;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.selected {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.button:hover, .button_type_view:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}


.content_left_button {
    cursor: pointer;
    color: #aaa;
    background-image: url("../../assets/images/viewer/bg-title.png");
    border: 1px solid #444;
    cursor: pointer;
    padding: 5px;
    margin-bottom: -1px;
}

.content_left_button:hover {
    cursor: pointer;
    color: #fff;
    background-image: none;
    background-color: #000;
    border: 1px solid #444;
    cursor: pointer;
    padding: 5px;
}

.content_left_title_print {
    background-image: url("../../assets/images/viewer/print.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.content_left_title_image {
    background-image: url("../../assets/images/viewer/image.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.content_left_title_attach {
    background-image: url("../../assets/images/viewer/attach.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding-left: 40px;
}


.viewer_control_page {
    padding-top: 14px;
}

.page {
    background-image: url("../../assets/images/viewer/bg-dark.png");
    border: 1px solid #444;
    color: #999999;
    text-align: right;
    width: 28px;
    padding: 1px;
}

.page_control {
    float: left;
    padding: 0px 5px;
}

.page_control, .page_next_mini, .page_prev_mini {
    float: left;
}

.page_next_mini, .page_prev_mini {
    margin-top: 3px;
}

#span_jump {
    line-height: 20px;
    margin-left: 10px;
    opacity: 1;
}

input.page {
    background: #fff;
}

.BtTop {
    float: right;
    margin-right: 50px;
}

.BtContrast img {
    float: left;
    position: relative;
    z-index: 1;
}

.contrast-value {
    background-image: url("../../assets/images/viewer/bg-title.png");
    border: 0px solid #444;
    color: #999999;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 230px;
}

.contrast_action {
    float: left;
    background-image: url("../../assets/images/viewer/bg-title.png");
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #777;

    height: 300px;
    width: 32px;
    position: absolute;
    top: -250px;
}

.contrast_action_ie {
    float: left;
    width: 60px;
    height: 32px;
}

.contrast_action_top {
    height: 260px;
    top: 50px;
    border-top: none;
    border-bottom: solid 1px #777;
}

.slider-contrast {
    left: 10px;
    position: relative;
    top: 10px;
    z-index: 1;
}

.BtRotate img {
    float: left;
    position: relative;
    z-index: 1;
}

.rotate_bg {
    padding: 10px 2px 10px 2px;
    cursor: pointer;
    float: left;
    width: 28px;
    height: 20px;
    text-align: center;
}

.rotate_bt {
    padding: 10px 2px 10px 2px;
    cursor: pointer;
    float: left;
    width: 28px;
    text-align: center;
    color: #777;
}

.rotate_bt:hover {
    color: #fff;
}

.rotate_action {
    float: left;
    background-image: url("../../assets/images/viewer/bg-title.png");
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #777;

    height: 200px;
    width: 32px;
    position: absolute;
    top: -150px;

}

.rotate_action_top {
    height: 150px;
    top: 50px;
    border-top: none;
    border-bottom: solid 1px #777;
}

.rotate_load {
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 10000;
}

.rotate_load_txt {
    border: 1px solid #777777;
    background-color: #111111;
    filter: alpha(opacity=100);
    text-align: center;
    padding: 70px 10px 10px 10px;
    margin: auto;
    color: #fff;
    width: 250px;
    height: 100px;
    vertical-align: middle;
}

/*说明书*/
.BtHelp {
    margin-left: 10px;
    border: none;
    border-left: solid 1px #444;
}

/* CONTENT LEFT ****************/
.content_left {
    position: absolute;
    background-image: url("../../assets/images/viewer/bg-dark.png");
    border-right: 1px solid #777777;
    height: 100%;
    z-index: 10;
    left: 0;
    -moz-box-shadow: 2px 0px 5px 0px #222222;
    -webkit-box-shadow: 2px 0px 5px 0px #222222;
    -o-box-shadow: 2px 0px 5px 0px #222222;
    box-shadow: 2px 0px 5px 0px #222222;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, Direction=90, Strength=5);
}

.content_left_bar {
    background-image: url("../../assets/images/viewer/bg-title.png");
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #777777;
}

.content_left #div_Shuqian {
    padding: 5px 15px;
    width: 300px;
    height: 120px;
    background: #999;
    border: solid 1px #ccc;
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    left: 10px;
}

.content_left #div_Shuqian input {
    width: 90%;
    height: 25px;
    border-radius: 3px;
    text-indent: 5px;
    border: solid 1px #ccc;
}

.content_left #div_Shuqian button {
    width: 80px;
    height: 25px;
    background: #79603E;
    border: solid 1px #eee;
    border-radius: 5px;
    margin-left: 40px;
    color: #fff;
}

.content_left #div_Shuqian .quxiao {
    background: #666;
}

.content_left_title {
    color: #e0e0e0;
    text-transform: uppercase;
    float: left;
}

.content_left_close {
    cursor: pointer;
    float: right;
}

.content_left_drag {
    font-size: 12px;
    background-color: #000;
    color: #CCCCCC;
    float: right;
    cursor: move;
}

.left_content {
    overflow-y: auto;
    height: 100%;
}

.bookmark_content ul {
    color: #CCC;
    padding-left: 15px;
    padding-right: 2px;
    font-size: 11px;
}

.bookmark_content ul li {
    cursor: pointer;
}

.bookmark_content ul li:hover {
    color: #46c7ec;
}

.bookmark_content ul li:focus {
    color: #46c7ec;
}

.info_content, .ocr_content {
    color: #AAAAAA;
    padding: 10px;
}

/******/
.left_content_div_comments, .left_content_div_notation {
    color: #AAAAAA;
}

.ui-widget-content {
    background-image: url("../../assets/images/viewer/bg.png");
    background-color: #000;
    border: 0px solid #AAAAAA;
}

.ui-slider-vertical {
    height: 100px;
    width: 0.8em;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background-image: url("../../assets/images/viewer/bg-dark.png");
    border: 1px solid #555;
    font-weight: normal;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background-image: url("../../assets/images/viewer/bg-dark.png");
    border: 1px solid #555;
    font-weight: normal;
}

.ui-slider-vertical .ui-slider-handle {
    left: -0.3em;
    margin-bottom: -0.6em;
    margin-left: 0;
}

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}

.ui-tooltip {
    position: absolute;
    background-image: none;
    background-color: #181818 !important;
    color: #fff;
    z-index: 10000000;
    padding: 7px;
    -moz-box-shadow: 2px 0px 5px 0px #222222;
    -webkit-box-shadow: 2px 0px 5px 0px #222222;
    -o-box-shadow: 2px 0px 5px 0px #222222;
    box-shadow: 2px 0px 5px 0px #222222;
}

.ui-resizable-s {
    bottom: -5px;
    cursor: s-resize;
    height: 7px;
    left: 0;
    width: 100%;
}

.ui-resizable-e {
    cursor: e-resize;
    height: 100%;
    right: -5px;
    top: 0;
    width: 7px;
}

.ui-resizable-handle {
    display: block;
    font-size: 0.1px;
    position: absolute;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
}

.ui-icon-gripsmall-diagonal-se {
}

.ui-icon {
    background-image: url("../../assets/images/viewer/annotate/resize.png");
}


.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;

}

.arrow.top {
    top: -16px;
    bottom: auto;
}

.arrow.left {
    left: 0%;
}

.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
    background-color: #181818 !important;
}

.arrow.top:after {
    bottom: -20px;
    top: auto;
}


.logo {
    /*  background-image: url("http://cdn.divvalib.net/tools/yoolib-viewer/logo-mini.png") ;
      bottom: 60px;
      height: 10px;
      position: absolute;
      right: 10px;
      width: 60px;
      z-index: 10000;*/
}


/**/


.search_form {
    color: #CCC;
    padding: 15px 15px 5px 15px;
    font-size: 13.3px;
}

.search_txt {
    color: #666;
    background-color: #fff;
    padding-left: 5px;
    font-size: 13.3px;
    border: 1px solid #000;
    width: 80%;
    height: 28px;
}

.search_bt {
    color: #666;
    background-color: #fff;
    padding: 6px;
    font-size: 13.3px;
    border: 1px solid #000;
}

.search_result {
    color: #CCC;
    padding-top: 0px;
    font-size: 13.3px;
}

#search_left {
    overflow-y: auto;
}

.search_result_total {
    padding: 5px 15px 35px 15px;
    color: #aaa;
    border-bottom: 1px solid #555;
}

.search_result_title, .info_title {
    padding: 10px 10px 10px 5px;
    background-image: url("../../assets/images/viewer/bg-title.png");
    border-bottom: 1px solid #555;
    cursor: pointer;
}

.search_result_title_span, .info_title_span {
    padding-left: 20px;
    background-image: url("../../assets/images/viewer/mini-circle.png");
    background-repeat: no-repeat;
    background-position: 0 3px;
}

.search_result_content {
    padding: 10px 10px 10px 25px;
    background-image: url("../../assets/images/viewer/bg.png");
    border-bottom: 1px solid #444;
    cursor: pointer;
}

.search_result_content:hover {
    padding: 10px 10px 10px 25px;
    background-image: url("../../assets/images/viewer/bg-middle.png");
    border-bottom: 1px solid #444;
    cursor: pointer;
}

.search_result_content_span {
    padding-left: 20px;
    background-image: url("../../assets/images/viewer/mini-dot.png");
    background-repeat: no-repeat;
}

.search_result_content em {
    background-color: #0066AA;
    color: #FFFFFF;
}

.picture_highlight_div {
    z-index: 0;
}

.picture_highlight {
    background-color: #ff0000;
    z-index: 1000;
    opacity: 0.2;
    position: absolute;
}

.picture_boxes {
    background-color: #ff0000;
    z-index: 1000;
    opacity: 0.2;
    position: absolute;
}

.picture_boxes:hover {
    background-color: #ff9900;
}

.picture_boxes_selected {
    background-color: #00aaff;
}

.search_prev_next {
    padding: 20px 10px;
}

.search_prev_next_td {
    width: 33%;
    float: left;
}

.prev_next_bt {
    background-image: url("../../assets/images/viewer/bg-title.png");
    border: 1px solid #555555;
    cursor: pointer;
    padding: 5px;
}

.prev_next_bt.prev {
    float: left;
    margin-right: 10px;
}

.prev_next_bt.next {
    float: right;
    margin-left: 10px;
}

.search_prev_next_page {
    padding: 5px;
    float: left;
    width: 100%;
    text-align: center;
}

.search_prev_next_bt {
    float: left;
    width: 100%;
}


/* RTL */


html.RTL .close_viewer {
    border-left: 0px;
    margin-left: 0px;
    border-right: 1px solid #444444;
    float: left;
    margin-right: 10px;
}

html.RTL .title {
    float: right;
}

html.RTL .content_left_title {
    float: right;
}

html.RTL .content_left_close {
    float: left;
}

html.RTL .search_result_title_span {
    padding-left: 0px;
    padding-right: 20px;
    float: right !important;
}

html.RTL .arrow_alto {
    float: left !important;
}

html.RTL .search_prev_next_td {
    float: right;
}

html.RTL .prev_next_bt.prev {
    float: right;
}

html.RTL .prev_next_bt.next {
    float: left;
}

html.RTL .thumb {
    float: right;
}


/**/


.page_prev_rtl, .page_prev_rtl_flip {
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-left: 1px solid #777777;
    border-right: 0px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
}

.page_next_rtl, .page_next_rtl_flip {
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    border-right: 1px solid #777777;
    border-left: 0px solid #777777;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 50;
    height: 100;
    position: absolute;
    z-index: 10000;
    left: 0px;
}

.thumbbig .openseadragon-canvas {
    z-index: 1 !important;
    cursor: pointer;
}

.thumbbig .keyboard-command-area {
    cursor: pointer;
    opacity: 0;
}

.pageflip_page {
    height: 100%;
    width: 100%;
}

.navscale_bigcontainer {
    position: absolute;
    bottom: 20px;
    left: 10px;
    z-index: 10;
    cursor: move;
    display: none;
}

.navscale {
    background-color: rgba(20, 20, 20, .9);
    color: #ccc;
    font-size: 9px;
}

.navscale_container_h {
    height: 10px;
    float: right;
}

.navscale_h {
    width: 100px;
    height: 11px;
    margin-top: 3px;
    line-height: 9px;
}


.navscale_container_v {
    width: 20px;

}

.navscale_v {
    height: 100px;
    width: 12px !important;
    line-height: 9px;
    float: right;
}

.navscale_rotate_h {
    float: left;
}

.navscale_rotate img {
    height: 20px;
}


.navscale10h {
    float: left;
    width: 10%;
    height: 8px;
}

.navscale_grid_h {
    background-image: url("../../assets/images/viewer/scale-grid-h.png");
    background-position: 50%;
}

.navscale_grid_h2 {
    background-image: url("../../assets/images/viewer/scale-grid-h2.png");
    background-position: 50%;
}

.navscale10v {
    width: 8px;
    height: 10%;
    display: none;
}

.navscale_grid_v {
    background-image: url("../../assets/images/viewer/scale-grid-v.png");
    background-position: 50%;
}

.navscale_grid_v2 {
    background-image: url("../../assets/images/viewer/scale-grid-v2.png");
    background-position: 50%;
}


.div_scale_points {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.div_scale_point {
    padding: 5px;
    border: 1px solid #ff0000;
    width: 10px;
    height: 10px;
    background-color: #ff0000;

    z-index: 10;
}

.svgscale {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.svgscale svg {
    width: 100%;
    height: 100%;
}

.svgscale path {
    z-index: 100;
}

#nav {
    /*background: none transparent;*/
    position: absolute;
    z-index: 11;
    top: 0px;
    width: 360px;
    height: 100%;
    left: -360px;
    border-right: 1px solid #777777;
    background-color: rgba(0, 0, 0, 0.7);
}

#nav ul {
    list-style: none;
    padding-left: 20px;
    overflow-y: auto;
    height: 100%;
    margin-top: 0px;
    /*opacity: 0.5;*/
    /*filter:alpha(opacity:50);*/
    padding-top: 20px;
}

#nav ul li {
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 5px;
    font-family: "SimHei", "宋体", Arial, Helvetica;
}

#nav ul a {
    text-decoration: none;
    display: inline-block;
    width: 310px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    font-family: "隶书";
    font-size: 16px;
    color: #CCCCCC;
}

#nav ul span {
    color: #fff;
    vertical-align: top;
}

#muluTip {
    position: absolute;
    right: -36px;
    width: 24px;
    top: 10%;
    /* margin-top: -13px; */
    cursor: pointer;
    font: bold 24px "隶书";
    color: #CCCCCC;
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    /* opacity: 0.3; */
    padding: 0 6px 0 4px;
    border: 1px solid #777777;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#muluTip:hover {
    background: rgba(0, 0, 0, 0.6);
}

.class_bookmark {
    font-size: 16px;
    font-family: "楷体";
    color: #dbb27d;
    padding-bottom: 20px;

}

.click_bookmark {
    display: inline-block;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.class_delect {
    width: 15%;
    display: inline-block;
    text-align: right;
}

.name_box {
    display: inline-block;
    width: 150px;
}

.content_box_ul li {
    list-style-type: none;
}

.div_img_all {
    border: 1px solid red;
    position: absolute;
    z-index: 100;
    text-align: center;
    border-radius: 50%;
    color: red;
    font-weight: bold;
    display: inline-block;
}

.div_img_one {
    width: 20px;
    height: 20px;
    border: 1px solid red;
    position: absolute;
    z-index: 100;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    color: red;
    font-weight: bold;
    left: -100px;
    top: -100px;
}

@media screen and (max-width: 768px) {

    .bottom_bt, .bottom_bt_left, .BtHelp, .close_viewer {
        display: none;
    }

    .title {
        display: table;
    }

}

@media print {
  body{
    -webkit-print-color-adjust:exact;
    -moz-print-color-adjust:exact;
    -ms-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  button{display:none;}
}