@charset'UTF-8';

//顶部导航

#header{
    height:50px;
    background-color:nth($navy,2); 
    color:nth($baseColor,1); 
    clear:both; 
    white-space:nowrap;
    overflow:hidden;
    h1{
        width:190px; 
        height:50px;
        float:left;
        overflow:hidden;
    }
}

#nav{
    line-height:50px;
    @include float;
    li{
        @include float;
        a{
            font-size:16px;
            font-weight:500;
            color:nth($baseColor,1);
            padding:0 20px 0 20px;
            display:block; 
            &:hover{
                color:nth($baseColor,1);
                background-color:nth($jade,2);
            }
        }
        a.on{
            color:nth($baseColor,1);
            background-color:nth($jade,2);
        }
    }
}

#notice{
    line-height:50px;
    @include float(right); 
    margin-right:10px;
    span{
        margin-right:20px;
        cursor:pointer;
        &:hover{
            color:nth($jade,1); 
        }
    }
}

#nav.small li a{
    padding:0 15px 0 10px;
    width:16px;
}
#nav.small li a span{
    display:none;
}

#my{
    @include float(right); 
    p{
        height:40px;
        padding:10px 60px 0 10px;
        padding-right:20px\9;
        line-height:15px;
        overflow:hidden;
        @include float;
        img{
             @include float;
             margin:0 10px 0 10px;
             width:30px;
             height:30px;
        }
    }

    #welcome{
        display:block;
    }

    .oper{
        @include float;
        p{
            width:50px; 
            height:50px; 
            line-height:50px;
            background-color:nth($jade,2);
            overflow:hidden; 
            cursor:pointer; 
            padding:0;}
    }

    .box{
        color:nth($navy,2);
        position:absolute;
        top:50px;  
        right:0;
        border:1px solid nth($gery,3);
        border-top:0; 
        padding:10px;
        display:none;
        z-index:1000;  
        background-color:nth($baseColor,1);

        dl{
            padding:5px;
            @include float; 
            dt{
                color:nth($navy,1);
                line-height:30px; 
                padding:0 30px 0 6px; 
                font-weight:bold; 
                border-bottom:2px solid nth($gery,1);
            }
            dd{
                line-height:26px;
                padding-top:6px;
                li{
                    height:26px;
                    margin:1px;
                    a{
                        display:block;
                        padding-left:6px;
                        color:nth($navy,2);
                        border-radius:3px;
                        &:hover{
                            color:nth($baseColor,1);
                            background-color:nth($jade,2);}
                    }
                    .myred{color:nth($red,1);}
                }
            }
        }
    }
    div.oper{
        margin:0;
        padding:0;
    }
}

//侧边导航

#middle{
    position:absolute; 
    top:50px; 
    width:100%; 
    height:auto;
}

#left{
    width:0;
    position:absolute;
    overflow:auto;
    height:100%;
    left:0;
    top:0;
    bottom:0;
    background-color:nth($navy,2);
    scrollbar-arrow-color:#888; 
    scrollbar-face-color:#eee; 
    scrollbar-3dlight-color:#fff;
    scrollbar-highlight-color:#fff; 
    scrollbar-shadow-color:#ccc; 
    -ms-scrollbar-darkshadow-color:#fff; 
    -ms-scrollbar-track-color:#f1f1f1; 
    -ms-scrollbar-base-color:#f8f8f8;
    &::-webkit-scrollbar{
        width:5px;
    }
    &::-webkit-scrollbar-track{
        background:#f1f1f1;
        -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
        border-radius:6px
    }
    &::-webkit-scrollbar-thumb{
        background:#eee; 
        border-radius:2px; 
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)
    }

    dl{
        display:none;
        dt{ 
            height:25px;
            background:nth($navy,2) url(../images/icon.png) no-repeat 166px 16px; 
            padding:10px 0 10px 10px; 
            font-size:16px;
            cursor:pointer;
            color:nth($baseColor,1);
            border-bottom:1px solid nth($navy,1);
        }
        dd{
            display:none;
            background:nth($ash,2);
            li{
                a{
                    color:nth($baseColor,1);
                    background:nth($navy,1);
                    display:block;
                    line-height:40px;
                    padding-left:35px; 
                    position:relative;
                    *zoom:1;
                    &:hover{                        
                        color:nth($baseColor,1);
                        background-color:nth($jade,2);
                    }
                }
            }
        }
    }
    dl.on{
        display:block;
    }
}

#left.on{
    width:190px;
}
