@charset "utf-8";
*{
    color:rgba(255,255,255,.7);
    font-family:"consolas","Menlo","DejaVu Sans Mono","monaco","MonoSpace","courier new","微软雅黑","Microsoft Yahei";
    font-weight:300;
    background-repeat:no-repeat;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust: none;
}
::selection { background-color: rgba(0,255,255,.2); }
::-moz-selection { background-color: rgba(0,255,255,.2); }
::-webkit-selection { background-color: rgba(0,255,255,.2); }
::-webkit-scrollbar { display: none; }
img{
    display:block;
    max-width:100%;
}
hr{
    height: 1px;
    border: none;
    border-top: solid 1px #2b2b2b;
}
body{
    margin:0px;
    position:relative;
    font-size:14px;
    background-color:#343434;
}
a{ 
    color:#58b4e8;
    cursor:pointer;
    outline:none;
    text-decoration:none; 
}
a:hover{ 
    color:#58b4e8;
    outline-style:none;
}
table{
    margin:10px 0px;
    color: rgba(255,255,255,.7);
    font-size: 12px;
    border-spacing: 0px;
    border-top: solid 1px #1f1f1f;
    border-left: solid 1px #1f1f1f;
    background-color: #2b2b2b;
    min-width:500px;
}
th{
    padding: 5px 20px;
    border-right: solid 1px #1f1f1f;
    border-bottom: solid 1px #1f1f1f;
    background-color:#505050;
}
.tr_hight{background-color:rgba(255,255,255,.04);}
td{
    padding: 5px 20px;
    border-right: solid 1px #1f1f1f;
    border-bottom: solid 1px #1f1f1f;
}
#div_body{
    
}
#div_left{
    overflow:auto;
    height:100%;
    width:250px;
    position:fixed;
    background-color:#343434;
    padding-right:10px;
    z-index:1;
}
#div_left_list{border-right:solid 1px black;}
#a_btn_left{
    display:block;
}
.ul_group_root a{
    color:gray;
    font-weight:300px;
    height:30px;
    line-height:30px;
    display:block;
    padding:5px 15px;
    transition:background-color .5s;
}
.ul_group_root a:hover{
    color:white;
    background-color:deepskyblue;
    transition:background-color 0s;
}
.ul_group_root,.ul_group_root ul{
    margin:0px;
    padding:0px;
    list-style:none;
    font-size:12px;
    background-color:#1A1A1A;
}
.a_node_root{
    color:gray;
    font-size:14px;
    padding:5px;
    display:block;
    background-color:#343434;
}
.anchor_btn{
    transition:background-color 1s;
}
.anchor_btn.active{
    color:white;
    background-color:#0076A0;
    transition:background-color 0s;
}
.li_node_sub{
    text-align:right;
}
#div_left:hover{
    left:0px;
}
#div_right{
    padding:0px 10px;
}
@media screen and (min-width:820px){
    #div_right{
        margin-left:250px;
    }  
}
@media screen and (max-width:820px){
    #div_left{
        left:-250px;
        transition:left 1s;
    }
    #div_left:hover{border-right:solid 1px black;}
    #div_left:before{
        content: ' ';
        position: fixed;
        width: 10px;
        left: 4px;
        top: 0px;
        height: 100%;
        animation-name: light;
        animation-duration: 2s;
        animation-iteration-count: 4;
        border-left:dashed 2px gray;
        transition:left 1s;
    }
    @keyframes light{
        from{opacity: 0;}
        50%{opacity: 1;}
        to{opacity: 0;}
    }
    #div_left:hover:before{
        left:254px;
        transition:left 1s;
    }
    .h_title{ font-size:1.4rem; }
}
#div_right a{
    color: white;
    margin: 2px;
    padding: 1px 2px;
    border-radius: 2px;
    display: inline-block;
    font-size:12px;
    background-color: rgba(0,150,201,.2);
    border:solid 1px #0096C9;
}
.h_title{
    margin:0px 0px 10px 0px;
    padding-left:10px;
    border-left:solid 5px dodgerblue;
    font-weight:bold;
    background-color:#505050;
    height:40px;
    line-height:40px;
}
.h_option{
    margin:0px;
    display: inline-block;
    background-color: dodgerblue;
    padding: 2px 10px;
    font-size: 12px;
    position: relative;
    height: 20pxpx;
    line-height: 20px;
}
.h_option:after{
    content: ' ';
    position: absolute;
    border-left: solid 13px #2090ff;
    border-top: solid 12px transparent;
    border-bottom: solid 12px transparent;
    right: -13px;
    top: 0px;
}
.span_mark{
    color:white;
    font-size: 12px;
    border-radius: 2px;
    background-color: gray;
    padding: 1px 4px;
    margin:0px 4px;
}
.p_hightlight{
    color:hotpink;
}
.div_table{
    overflow:auto;
}
.div_code{
    overflow: auto;
    counter-reset: code_line_num;
    border: solid 1px black;
    vertical-align: bottom;
    font-size: 0px;
    display:inline-block;
    max-width:100%;
    margin-bottom:10px;
}
.span_code_title{
    display: inline-block;
    background-color: black;
    padding: 2px 5px;
    margin-top: 10px;
}
.pre_code{
    background-color: #1a1a1a;
    font-size: 12px;
    overflow: auto;
    padding:10px 10px 10px 35px;
    display:inline-block;
    margin:0px;
    min-width:680px;
    position:relative;
}
.pre_code:before{
    content: ' ';
    background-color: gray;
    width: 30px;
    display: block;
    position: absolute;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgb(43 43 43);
}
.span_code_line{ 
    position:relative;
}
.span_code_line:before{
    content: counter(code_line_num);
    counter-increment: code_line_num;
    position: absolute;
    width: 25px;
    text-align: right;
    left: -35px;
    height: 100%;
    color:gray;
}
.code_note{ color:gray; }
.code_note_1{ color:bisque; }
.code_key{ color:cornflowerblue; }
.code_class{ color:#0de8e8; }
.code_string{ color:darkorange; }
.span_time{
    display: block;
    text-align: center;
    padding: 2px;
    font-size: 12px;
    background-color: darkgoldenrod;
}