@import "config.less";
body{.user-select(auto)}
@selected_color:#666;
#body{
    position:absolute;width:100%;top:0;
    ul{margin: 0;padding: 0;}
    li{margin: 0;padding: 0;}
    a{text-decoration: none;color: #446;}
    input,input:focus{outline: none;box-shadow:none;border: 1px solid #bbb;padding:5px;}
    input:focus{border-color:#75A1F0 !important;outline:none;box-shadow:0 0 12px #75A1F0;.transition(all 0.15s);}
    .font-icon{padding-right:0.8em;display: inline-block;}
    .menu_left{
        position:fixed;z-index:999;min-width:170px;background:#f6f6f6;
        left:0;height:100%;width:15%;padding: 10px;border-right:1px solid #ddd;        
        h1 {
            width: 100%;height: 60px;.font-family();
            border-bottom: 1px solid #f2f2f2;
            margin: 0 auto;margin-bottom: 15px; margin-top: 10px;
            text-align: center;
            font-size: 35px;font-weight: 800;
            background: #666; 
            -webkit-background-clip: text; 
            -moz-background-clip: text; 
            background-clip: text; 
            color: transparent;
            text-shadow:rgba(255,255,255,0.5) 0px 3px 3px;
            background: ~"#f6f6f6\0";color: ~"#444\0";
        }
       .setting li{
            height:40px;
            text-shadow:0 0 2px #ccc;
            line-height: 40px;
            box-sizing: border-box;
            text-indent: 5px;
            color: #444;
            display: block;overflow: hidden;
            cursor: pointer;
            text-transform: capitalize;
            .transition();
            font-size: 15px;
            &.hover{background:#C6EBFA;}
            &.selected{background:#80DBFF;color:#fff;border-left:5px solid #222;padding-left: 10px;}
        }
    }
    .main{
        .h1 .font-icon{padding-right:16px;}
        position:absolute;left:20%;width:75%;margin:30px 0 0 20px;
        div.h1{font-weight:400;color:#666;padding-bottom:8px;margin: 0;font-size:22px;}
        .section {
            padding-bottom:10px;border-top: 1px solid #EEE;padding-top: 10px;color:#666;
            .box{
                .line{margin-top:15px;margin-bottom:15px;}
                .login{border-bottom:1px dashed #dde;}
                .login2{border-bottom:1px solid #dde;}
                .upasswordinfo{position:absolute;top:275px;color:#bbb;}
                .button{margin-left:110px;margin-top:5px;}
                span{display:block;float:left;width:110px;line-height:25px;}
                input{display:block;width:200px;border-radius: 2px;font-weight:800;color:#446;}
            }
            h3 {font-size:14px;font-weight: bold;width: 140px;float:left;}
            label {display:block;}
        }
        .savebox{
            border-top:1px solid #eee;margin-bottom:10px;
            a.save{margin-left:5px;margin-top:5px;padding:4px 20px;}
        }
        
        .list{
            float: left;width:120px;background:#fff;margin-right:15px;height:90px;
            border: 2px solid #fcfcfc;margin-bottom:10px;cursor: pointer;
            .ico{width:100px;height:65px;margin:10px;background-color: #fff;
                box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
            }
            .theme{margin:5px 10px;}
            .info{text-align:center;color: #aaa;margin: 0px;margin-top:-5px;}
            .ico img{width:100px;height:65px;}
            &.this{border:2px solid #777;background-color: #eee;
                .info{color:#777;}
            }
            &.listhover{border:2px solid #777;background-color: #eee;}
        }
        .content{
            word-break:break-all;color:#448;
            h2{border-bottom:1px dashed #eef;padding-bottom:5px;margin-bottom:5px;font-weight:400;font-size:16px;}
            p{margin-left:5px;text-indent:2em;margin-bottom:8px;color:#666;}
			.box{
				color:#555;clear:both;color:#666;
				.title{color:#444;border-bottom:1px dashed #ddd;font-size:21px;margin-bottom:10px;margin-top:10px;
					span{border-bottom:1px solid #aaa;display:inline-block;margin-bottom:-1px;
					text-align:center;padding:5px 10px;float:none;width:auto;}
				}
				p{line-height:1.7em;text-indent:2em;padding:3px;margin:0;}
				p b{padding-right:8px;}
				p i{padding-right:10px;}
			}
        }
        
        /*更新记录页面*/
        fieldset{
            margin-top:10px;border:solid 1px #f2f2f2;padding:10px;color:#448;.border-radius(4px);
            legend{padding:3px 20px;color:#FFF;background:#888;font-size:15px;.border-radius(4px);}
            span{display:block;background:#eee;width:100px;color:#224;padding:1px 0 3px 10px;margin-top:10px;font-size:14px;border-left:5px solid #777;}
            .line{margin:0px;height:1px;width:100%;border-bottom:1px solid #eee;margin-bottom:10px;margin-top:-1px;_margin-top:-21px;}
        }
        .content li,fieldset li{line-height: 2em;list-style-type:none;
            margin-left:10px;padding-left:25px;color:#666;word-break:break-all;            
            &:before{font-family: FontAwesome;content: "\f006";padding-right: 10px;text-shadow:0 0 1px;}
        }

        /*用户管理页面*/
        .nav{
            a{display: block;float: left;padding: 4px 2em;background: #eee;border: 1px solid #ddd;
                margin-bottom: -1px;margin-left: -1px;.transition(all 0.218s);}
            a:hover,a.this{background: @selected_color;color: #444;border:1px solid @selected_color;border-left-color: #ddd;color: #fff;}
        }
        .member{
            input{display: inline-block;width:45px;margin-left:2px;}
            span{padding-left:10px;}
            select{padding: 3px 5px;font-family: "微软雅黑";color: #666;}
            .info{background: #efe;padding: 6px 10px;color: #8a8;border: #ccc 1px dotted;margin-top: 10px;}
            .edit_role{color: @selected_color;}
            .edit_role:hover{border-bottom: 1px solid @selected_color;}
        }
        .together{
            border:1px solid #dde;margin-top: -1px;padding: 5px 0 0 10px;
            .title{float: left;width: 80px;height: 28px;margin: 5px;color: #333;}
            .title i{padding-left: 5px;font-style: normal;}
            span.text{color: #bbb;font-size: 12px;padding-left: 10px;}
            &.input input{width: 40%;margin-left: 5px;}
        }
        .group_editor{
            a.revert{float: right;margin: 10px;padding: 4px 2em;border: 1px solid #ddd;background: #eee;
                &:hover{background:#ddd;border-color: #bbb;} 
            }
            .tag{height: 25px;line-height: 27px;margin: 2px 4px;padding: 0px 8px;
                text-decoration: none;color: #666;.transition(all 0.218s);
                display: block;float: left;color: #668;
                border:1px solid lighten(@selected_color,40%);background:#fff;
                input{border: none;vertical-align: initial;
                    display: inline-block;min-height: 12px;margin-right: 6px;}
                &:hover{color:@selected_color; background:lighten(@selected_color,50%);}
                &.this{border-color: @selected_color;color: @selected_color; background:lighten(@selected_color,50%);}
                span{cursor: pointer;}
            }
        }
    }

    /*收藏夹页面*/
    table {
        font-size:13px;color:#888;width:100%;margin:0px;border:1px solid #ccc;
        tr{border-bottom:1px solid #ddd;background:#fcfcfc;height:30px;
            input{display:block;border: 1px solid #ddd;width: 80%;color:#888;}
            &.title{background:#eee;color:#224;
                td{border-bottom:1px solid #ddd;font-weight:800;}
                span{color:#999;font-size:13px;padding-left:4px;font-weight:400;}
            }
            td{border-bottom:1px solid #eee;line-height:2.5em;height:2.5em;padding-left:3%;
                &.name{width:30%;}
                &.name,&.path{border-right:1px solid #ddd;}
                &.action{line-height:1.3em;width:30%;}
                &.action a{margin-right:5px;}
            }
        }

    }
    a{  &.add{display:block;text-align:center;text-decoration:none;background:#f6f6f6;
        line-height:2em;height:2em;border:1px solid #ccc;color:#555;}
        &.add:hover{background:#eee;}
        &.button{
            text-decoration: none;cursor: pointer; 
            margin:5px 10px 5px 0;
            padding: 5px 1.5em;font-size:13px;
            display: inline-block;border-radius: 2px;
            text-align: center;font-weight: 400;
            .transition();
            border:1px solid #ddd;
            background: #f6f6f6;color:#222;
            &:hover{background:#C6EBFA;border-color:#bbb;box-shadow: none;}
            &:active{background:#444;color: #fff;border-color:#eee;border-radius: 2px;}
        }
    }

    a.create_app{margin: 0;display: block;position: absolute;right:21px;}
    .app_menu_left {min-width:130px;width:130px;}
    .app_menu_left .setting li.selected {padding-left: 12px;}
    .app_list{position:absolute;left: 150px;width:initial;margin: 15px 0 20px 15px;right: 20px;
        .app-list{margin-top: 10px;border: 1px solid #ddd;
            li{padding:4px;list-style: none;border-bottom: 1px solid #eee;
                a.icon{float: left;width:70px;padding: 5px;}
                a.icon img{width: 64px;height:64px;}
                p{float: left;width:340px;margin:0;padding:0;color:#666;height: 67px;overflow: hidden;}
                p span{display: block;word-break: break-all;}
                p span.title{font-size: 16px;font-weight: 800;line-height: 33px;height:33px;}
                .right{width:160px;float: right;}
            }
        }
    }
}