@charset "UTF-8";

html, body {
    width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;
}

* {
    user-select: none;
    -webkit-user-select: none;
    transition: all ease .2s;
    -webkit-transition: all ease .2s;
}

yx {display: inline-block;}

img {max-width: 100%; vertical-align: middle;border: 0;}

#main {
    width: 100%; height: 100%; display: block; 
    background: #ffffff url(../images/back1.jpg);
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
}

#left {
    width: 90px; height: 100%; float: left;
}

#right {
    width: calc(100% - 90px); height: 100%; float: right;
}

#logo {
    width: 100%; height: 30px; float: left; 
    background-image: url(../images/logo.png);
}

#menu {
    width: 100%; height: calc(100% - 30px); float: left; background-color: rgba(240, 240, 240, 0.25);
}

#top {
    width: calc(100% - 90px); height: 30px; float: left; background-color: rgba(240, 240, 240, 0.25);
}

#sysmenu {
    width: 90px;
    height: 30px;
    float: right;
    background-color: rgba(240, 240, 240, 0.25);
}

#box {
    width: 100%; height: calc(100% - 30px); float: right; 
    background-color: rgba(240, 240, 240, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

#menu-box {width: 100%; height: calc(100% - 34px);}

#menu-set {width: calc(100% - 6px);
    height: 24px;
    padding: 3px;
    text-align: center;}

#menu-set img {
        width: 16px;
        height: 16px;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,0);
}
    
#menu-set img:hover {
        border: 1px solid rgba(255,255,255,0.3);
}

.menu-item {
    width: 84px;
    height: 19px;
    line-height: 19px;
    float: left;
    padding: 5px 3px;
    font-size:  13px;
    text-align: center;
    color: #e4e4e4;
    text-shadow: 0 0 0 #fff, 0 0 1px #000, 0 0 2px #000;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-item:hover {
    background-color: rgba(200,200,200,.3);
}

.menu-item:active {
    color: #91eac1;
}

.menu-item.active {
    background-color: rgba(220,220,220,.3);
    color: #ffe000;
}

.soft-item {
    width: 70px; min-height:70px; height: auto; z-index: 30; display: block;
    position: absolute; 
    border: 1px solid rgba(56, 52, 52, 0);
}

.soft-item .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1;
}

.soft-item .body {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 3px;
}

.soft-item img {
    border-style: none;
    border-radius: 7px;
    max-width: 36px;
    max-height: 36px;
}

.soft-item .body .title.blur {
    overflow: hidden;
    height: 13px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.soft-item .body .title {
    font-size: 13px;
    line-height: 13px;
    margin-top: 4px;
    display: block;
    color: #ffffff;
    transition: all 0.3s;
    text-shadow: 0px 0px 0px #fff, 0px 0px 2px #000, 0px 0px 4px #000;
    cursor: default;
}

.soft-item:active, .soft-item.active, .soft-item:focus {
    background-color: rgba(250, 250, 250, 0.2);
}
.soft-item:hover {
    border: 1px solid rgba(250, 250, 250, 0.5);
}

yx.layer-box {
    padding: 15px;
    width: calc(100% - 30px);
    display: inline-block;
}

.form-input {
    border: 1px solid #dddddd;
    line-height: 25px;
    outline: none;
    margin: 10px 0;
    width: 98%;
    border-radius: 3px;
}

.form-input:hover {
    border: 1px solid #cae8ff;
}

.form-input:focus {
    border: 1px solid #1e9fff;
}

button.btn {
    padding: 6px 15px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin-left: 10px;
}

button.btn:hover {
    border: 1px solid #c3c3c3;
}

button.btn:active {border: 1px solid #b3b3b3;background-color: #dddddd;}

button.btn.btn-primary {
    border: 1px solid #cae8ff;
    background-color: #1e9fff;
    color: #ffffff;
}

button.btn.btn-primary:hover {
    border: 1px solid #0076ce;
}

button.btn.btn-primary:active {border: 1px solid #1e9fff;background-color: #1a85d4;}

yx.layer-box .btn {
    float: right;
}

.sysbtn {
    width: 30px;
    height: 30px;
    float: left;
}

.sysbtn.skin {
    background-image: url('../images/skin.png');
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

.sysbtn.menu {
    background-image: url('../images/menu.png');
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

.sysbtn.close {
    background-image: url('../images/close.png');
    background-repeat: no-repeat;
    background-position: 5px 5px;
}


.sysbtn.skin:hover {
    background-image: url('../images/skin_active.png');
}

.sysbtn.close:hover {
    background-image: url('../images/close_active.png');
}

.sysbtn.skin:active {
    background-image: url('../images/skin_pres.png');
}

.sysbtn.close:active {
    background-image: url('../images/close_pres.png');
}

.sysbtn.menu:hover {
    background-image: url('../images/menu_active.png');
}

.sysbtn.menu:active {
    background-image: url('../images/menu_pres.png');
}

#search-panel {
    position: fixed;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    z-index: 2;
    padding: 15px;
    background-color: rgba(0,0,0,0.5);
}

.waitting {
    position: fixed;
    width: calc(100% - 90px);
    height: calc(100% - 120px);
    margin-top: 30px;
    margin-left: 90px;
    display: block;
    text-align: center;
    padding-top: 100px;
    background-color: rgba(0,0,0,0.2);
    z-index: 9999999;
}