﻿@import "compass/css3";
@import "compass/utilities/";
@import "compass/utilities/sprites";

@import "reference/sprite-mixins";
@import "reference/variables";

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html{ line-height: 1; height:100%;}
ol,ul{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th,td{ text-align: left; font-weight: normal; vertical-align: middle; }
q,blockquote{ quotes: none; }
q:before,q:after,blockquote:before,blockquote:after{ content: ""; content: none; }
a img{ border: none; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{ display: block; }

body{color:#44515d; font:14px $yahei; background-color:#f2f4f8; height:100%;}
textarea,select,input{font:inherit;}
textarea{resize:none;}
b,strong{font-weight:700;}
a{color:#0088cc; text-decoration:none;}
a:hover{color:#00438a; text-decoration:underline;}
*:focus{outline:none;}
input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
}

.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:block; *zoom:1;}
.break{
    word-break:break-all; word-wrap:break-word;
}

/*sprite*/
.icon{ @include inline-block; background:sprite-url($icon-common) no-repeat; overflow:hidden; }
.icon_top_user{@include sprite-background($icon-common, top_user);}
.icon_top_msg{@include sprite-background($icon-common, top_msg);}
.icon_top_logout{@include sprite-background($icon-common, top_logout);}
.icon_menu_order{@include sprite-background($icon-common, menu_order);}
.icon_menu_user{@include sprite-background($icon-common, menu_user);}
.icon_menu_prod{@include sprite-background($icon-common, menu_product);}
.icon_menu_cont{@include sprite-background($icon-common, menu_content);}
.icon_menu_sys{@include sprite-background($icon-common, menu_system);}
.icon_menu_catalog{@include sprite-background($icon-common, menu_catalog);}
.icon_search{@include sprite-background($icon-common, search);}

/*header*/
#header{
    position:absolute; left:0; top:0; width:100%; z-index:2;
    height:45px; background-color:#64707f; @include box-shadow(rgba(187, 187, 187, 0.75) 0 0 18px);
    .logo{
        width:225px; height:100%; background:#14b9d6 url(images/logo.png) center center no-repeat; text-align:center; float:left;
    }
    .top{
        margin-left:225px; height:45px; padding-left:25px; color:#fff;
    }
    .user_wrp{
        padding:12px 20px 0 0; float:left;
        a{
            color:#fff; line-height:16px; display:inline-block; vertical-align:middle;
        }
    }
    .topbar{
        float:right;
    }
    .topbar-item{
        float:left; border-left:1px solid #5b6571; position:relative; zoom:1;
    }
    .topbar-item:first-child{
        border-left:0 none;
    }
    .topbar-btn{
        height:33px; padding:12px 10px 0 10px; float:left; overflow:hidden; color:#fff;
        span{
            line-height:16px; display:inline-block; vertical-align:middle;
        }
        .icon{
            margin-right:5px;
        }
        .topbar-btn-msg-num{
            background-color:#ff9900; color:#fff; font-family:$song; padding:2px 5px; border-radius: 5px; margin:2px 0 0 3px; vertical-align: top; display:none;
        }
    }
    .topbar-btn:hover, .topbar-btn-active{
        background-color:#5b6571; color:#e8edf1; text-decoration:none;
    }
    .topbar-btn-active + .topbar-msg-panel{
        display:block;
    }

    .topbar-msg-panel{
        position:absolute; top:45px; right:0; display:none;
        width: 300px; word-break: break-all; border-radius: 2px;
        @include box-shadow(rgba(0,0,0,0.175) 0 1px 2px);
    }
    .topbar-msg-arrow{
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        position: absolute;
        top: -6px;
        right: 40px;
    }
    .topbar-msg{
        li{
            height: 60px; line-height: 20px; border-bottom: 1px solid #eaedf1;
        }
    }
    .topbar-msg-item{
        display: block; height: 100%; padding: 10px; background: #fff; color: #333; font-size:12px; box-sizing: border-box;
        .topbar-msg-title{
            display: block; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #00C1DE;
        }
        .topbar-msg-time{
            color: #4a4a4a;
        }
    }
    a.topbar-msg-item:hover{
        background:#f9f9f9; text-decoration:none;
    }
}

/*main*/
#main{
    position:absolute; z-index:1; left:0; top:45px; bottom:0; width:100%;
}

/*menu*/
#menu{
    position:absolute; z-index:3; left:0; top:45px; bottom:0;
    background-color:#44515d; width:225px; overflow:hidden;
}
.menu_main{
    margin-left:56px; width:169px; height:100%; background-color:#e8edf1; position:relative; zoom:1;
    h2{
        position:relative; zoom:1; left:-56px; width:56px; background-color:#64707f; text-align:center; padding:6px 0;
    }
    a.main_item{
        position:relative; zoom:1; left:-56px; display:block; width:56px; height:50px; text-align:center; margin-bottom:1px;
        .icon{
            margin:5px 0 3px 0;
        }
        span{
            display:block; font-size:12px; font-family:$song; color:#adb5b8;
        }
    }
    a.main_item:hover, a.main_item_active{
        background-color:#14b9d6; text-decoration:none;
        span{
            text-decoration:none; color:#fff;
        }
        .icon_menu_order{
            background-position:sprite-position($icon-common, menu_order_on);
        }
        .icon_menu_user{
            background-position:sprite-position($icon-common, menu_user_on);
        }
        .icon_menu_prod{
            background-position:sprite-position($icon-common, menu_product_on);
        }
        .icon_menu_cont{
            background-position:sprite-position($icon-common, menu_content_on);
        }
        .icon_menu_sys{
            background-position:sprite-position($icon-common, menu_system_on);
        }
    }
    a.main_item_active + .menu_sub{
        display:block;
    }
}
.menu_sub{
    display:none; position:absolute; left:0; top:0; width:100%; height:100%; overflow-x:hidden; overflow-y:auto;
    dl{
        padding-bottom:20px;
    }
    dt{
        font-size:14px; color:#333; font-weight:700; padding-left:15px; line-height:36px; height:36px; overflow:hidden;
    }
    .sub_item{
         display:block; padding-left:30px; font-size:12px; line-height:35px; color:#44515d;
    }
    .sub_item:hover, .sub_item_active{
        background-color:#fff; text-decoration:none;
    }
}

/*page*/
#page{
    margin-left:225px; height:100%; overflow:hidden; overflow-y:auto;
}

.toolbar{
    @include clearfix(); padding-bottom:5px;
}

/*search*/
.search_wrapper{
    background-color:#eaedf2; padding:5px 10px 0 10px; margin-top:5px; border:1px solid #d4d4d4;
}
.search_item, .search_label, .search_submit{
    display:inline-block; vertical-align:middle;
}
.search_label{
    min-width: 4em;
    text-align: justify;
    text-align-last: justify;
    padding-right:0.8em;
    position:relative;
}
.search_label:after{
    content:"：";
    position:absolute;
    top:0;
    right:0;
}
.search_item{
    margin:0 10px 5px 0;
}
.search_submit{
    margin-bottom:5px;
}

/*box*/
.box{
    padding:10px;
}
.box_caption{
    font-size:14px; font-weight:700; margin-bottom:10px; padding:10px 0; border-bottom:1px solid #d4d4d4;
}
table.table_base{
    width:100%;
    td{
        padding:5px 0;
        .note{
            display:inline-block; vertical-align:middle; color:#aaa;
        }
    }
    th{
        padding:5px 10px; white-space:nowrap;
    }
    caption{
        padding:5px; border-bottom:1px dashed #d4d4d4; border-top:1px dashed #d4d4d4; margin-top:5px; background-color:#f7f7f7;
    }
}
table.table_info{
    th{
        text-align:right; padding:5px;
    }
}
table.table_search{
    width:auto;
    td{
        padding-right:15px;
    }
}
table.table_grid{
    width: 100%; border: 1px solid #e7e7eb;
    thead {
        background-color: #f4f5f9; color: #333; border-bottom: 1px solid #e7e7eb;
        th {
            height: 30px; white-space: nowrap; padding: 0 3px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        th:first-child {
            padding-left: 10px;
        }
    }
    tbody{
        tr:hover {
            background-color: #f5f5f5;
        }
        td {
            border-bottom: 1px solid #ececec; padding: 5px 3px; height: 20px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        td:first-child {
            padding-left: 10px;
        }
        a.operate {
            display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; vertical-align: baseline;
        }
    }
}

/*checkbox*/
.pretty-checkbox {
	@include inline-block;
    input{
        display: none;
    }
    input + i {
	    background-color: #fafafa;
	    border: 1px solid #cacece;
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	    padding: 7px;
	    border-radius: 3px;
	    display: inline-block;
	    position: relative;
        vertical-align: middle;
    }
    input + i:active, input:checked + i:active {
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }
    input:checked + i {
	    background-color: #e9ecee;
	    border: 1px solid #adb8c0;
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	    color: #99a1a7;
    }
    input:checked + i:after {
	    content: '\2714';
	    font-size: 12px;
	    position: absolute;
	    top: -1px;
	    left: 2px;
	    color: #99a1a7;
    }
    span{
        display: inline-block; vertical-align: middle; padding:0 5px 0 3px;
    }
}

/* RADIO */
.pretty-radio {	
    @include inline-block;
    input{
        display: none;
    }
    input + i {
	    -webkit-appearance: none;
	    background-color: #fafafa;
	    border: 1px solid #cacece;
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	    padding: 7px;
	    border-radius: 50px;
	    display: inline-block;
	    position: relative;
        vertical-align: middle;
    }
    input:checked + i:after {
	    content: ' ';
	    width: 10px;
	    height: 10px;
	    border-radius: 50px;
	    position: absolute;
	    top: 2px;
	    background: #99a1a7;
	    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	    text-shadow: 0px;
	    left: 2px;
	    font-size: 32px;
    }
    input:checked + i {
	    background-color: #e9ecee;
	    color: #99a1a7;
	    border: 1px solid #adb8c0;
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
    }
    input + i:active, input:checked + i:active {
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }
    span{
        display: inline-block; vertical-align: middle; padding:0 5px 0 3px;
    }
}
.pretty-checkbox-mutiline{
    .pretty-checkbox{
        margin-bottom:5px;
    }
}

/*uploader*/
.up-container{
	@include clearfix;
}
.up-entry{
	width:130px; height:130px; margin:0 6px 6px 0; position:relative;
	background:transparent url(images/upload-sprite.png) no-repeat -120px 0; background-size:540px 130px;
	.up-file{
		position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer;
	}
}
.up-entry:active {
    background:transparent url(images/upload-sprite.png) no-repeat -260px 0; background-size:540px 130px;
}
.up-error {
    background:transparent url(images/upload-sprite.png) no-repeat -400px 0; background-size:540px 130px;
}
.up-pics{
	@include clearfix;
	.up-pic{
		float:left; width:130px; height:130px; margin:0 6px 6px 0; position:relative; background-color:#fff;
	}
	.up-clip{
		width:100%; height:100%; box-sizing:border-box; border:1px solid #d4d4d4; @include border-radius(5px); overflow:hidden;
		img{
			display:none; width:100%;
		}
	}

	.up-del{
		position:absolute; top:3px; right:3px; border:1px solid #fff; border-radius:12px; width:22px; height:22px; background:rgba(0,0,0,.38);
	}
	.up-del:hover, up-del:active {
		background:rgba(0,0,0,.5); text-decoration:none;
	}
	.up-del:before, .up-del:after {
		display:block; position:absolute; top:11px; left:4px; width:14px; height:1px; background:#fff; -webkit-transform:rotate(45deg); content:"";
	}
	.up-del:after {
		-webkit-transform:rotate(-45deg);
	}

	.up-mask {
		position:absolute; top:0; left:0; width:100%; height:100%; @include border-radius(5px); background-color: #000; opacity:.5;
	}
	.up-progress {
		position:absolute; bottom:8px; left:50%; margin-left:-19px; @include border-radius(4px); width:38px; height:7px; background-color:rgba(255,255,255,.11);
		.pos{
			@include box-sizing(border-box); @include border-radius(4px); width:6px; height:100%; background-color:#fff;
		}
	}

	.up-over, .up-error{
		.up-mask, .up-progress{
			display:none;
		}
	}
}

/*overwrite easyui*/
.tabs-header{
    padding-top:5px;
}
.datagrid-cell{
    a{
        color:#0088cc; text-decoration:underline;
    }
    a:hover{
        color:#00438a;
    }
}
.datagrid-row-selected{
    a{
        color:#fff;
    }
}

/*inner message*/
.inner-message{
    padding:10px 60px;
    .title{
        text-align:center; border-bottom:1px solid #ddd; padding-bottom:10px;
        h2{
            font-size:16px; padding:10px 0;
        }
        h3{
            font-size:12px;
        }
    }
    .content{
        font-size:14px; line-height:2.0; padding:30px 0;
    }
}