@acolor: #9A9A9A;
@ahovercolor: #FF9900;
@bgcolor:#353535;
@typecolor:#9A9A9A;
@bordercolor:#E9E9E9;
@catcolor:#0095FF;

body,dd,dl,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,ol,p,select,td,textarea,th,ul{margin:0;padding:0}
a{color:@acolor;text-decoration:none;transition:all .15s}
a:hover{color:@ahovercolor;text-decoration:none}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
body{font:14px"Microsoft Yahei","Arial Narrow",HELVETICA;background:@bgcolor;-webkit-text-size-adjust:100%;line-height:1.42857143;color:@acolor;
        -webkit-transition: background-color 400ms ease-in-out;
        -ms-transition: background-color 400ms ease-in-out;
        -o-transition: background-color 400ms ease-in-out;
        -moz-transition: background-color 400ms ease-in-out;
        transition: background-color 400ms ease-in-out;}
body,html{border:0;padding:0;margin:0;height: 100%;display: flex;min-height: 100vh; flex-direction: column;}
.clearfix{zoom:1}
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.hide{display:none}
.middle{width:1000px;margin:0 auto}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:3px}
::-webkit-scrollbar-thumb:vertical{height:5px;background-color:#666;-webkit-border-radius:3px}
::-webkit-scrollbar-thumb:horizontal{width:5px;background-color:#666;-webkit-border-radius:3px}
.container {
  min-width: 500px;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -1;
}
#output { opacity: 0.3;width: 100%;height: 100%;-webkit-transition: all 400ms ease-in-out;-ms-transition: all 400ms ease-in-out;-o-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
.header{width:1000px;margin:0 auto}
.nav-container{flex: 1;}
.main-nav { width: 995px; margin: 20px auto; color:@acolor;
  .tab {
    .tab-cat { position: relative; float: left; width: 100px; min-height: 37px;line-height: 37px;text-align: center; color: @catcolor;
      i{position: absolute; top: 0px; right: 0px; line-height: 18px; cursor: pointer;
        &:hover{color: @ahovercolor}
      }
    }
    .cat-edit-input {position:absolute;left:0;top:0;width:100%;height:100%;padding:0 14px 1px;border-radius:0;
      box-shadow:0px 0px 0px 2px rgba(0,0,0,.15);background-color:@bgcolor;color:@acolor;
      &:focus{box-shadow: 0px 0px 0px 1px @bordercolor;transition: box-shadow 0.3s;}
    }
    .tab-type {float: left;min-height: 37px;}
    .tab-type ul li {position: relative; float: left; height: 37px; padding: 0 15px; line-height: 37px; font-size: 14px; cursor: pointer; letter-spacing: 1px;
      box-sizing:border-box;  
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      i{position: absolute; top: 0px; right: 0px; line-height: 14px;
        &:hover{color: @ahovercolor}
      }
    }
    .tab-type ul li.current{margin-bottom:-1px;border-bottom:1px solid @ahovercolor;
      span {color:@ahovercolor;}
    }
  }
  .site-content{border-left:1px solid @bordercolor;}
  .site-content>ul{border-top: 1px solid @bordercolor;}
  .site-content>ul>li{position:relative;float:left;width:141px;height:36px;line-height:36px;text-align:center;font-size:14px;border-right:1px solid @bordercolor;border-bottom:1px solid @bordercolor;margin-top:-1px;}
  .site-content>ul>li>a{display:block}
  .site-content>ul>li>i{position:absolute;top: 0px;line-height: 18px; cursor: pointer;
    &.del{right: 0px;}
    &.edit{left: 0px;}
    &:hover{color: @ahovercolor}
  }
  .type-edit-input, .site-edit-input {
	  position:absolute;left:1px;top:1px;width:139px;height:34px;background-color:@bgcolor;color:@acolor;border:0;
    &:focus{box-shadow: 0px 0px 0px 1px @bordercolor;transition: box-shadow 0.3s;}
  }
}

.page-table {
  padding: 20px;margin: 20px auto; 
  td,th {position:relative;padding: 10px;border: @bordercolor solid 2px;}
  input[type='text']{position:absolute;left:0;top:0;width:90%;height:90%;padding:0px 0px 0px 5px;border:0px;background-color:@bgcolor;color:@acolor;}
}
.slidebar{position: fixed; left: 50%; top: 185px; margin-left: 512px; border: 1px solid #ECECEC;
  ul{
    li{
      border-bottom: 1px solid #ECECEC;padding: 5px;
      a{width: 70px;cursor: pointer;display: inline-block;text-align: justify;text-align-last: justify;}
    }
    li:last-child{
      border-bottom: 0px;
    }
  }
}
.footer-container{background-color:#353535;padding:30px 0;
  .footer .yqlj {
    width: 600px;
    height: 164px;
    font-size: 0;
  }
  .footer .footer-item {
    box-sizing: border-box;
    padding: 0 12px;
    background: url("../images/footer-line.png") repeat-y right top;
  }
  .footer div {
    float: left;
  }
  .footer .footer-title {
    font-size: 15px;
    color: #bebdbd;
    margin-bottom: 14px;
  }
  .footer .yqlj div {
    height: auto;
  }
  .footer div {
    float: left;
  }
  .footer .yqlj a {
    width: 84px;
    height: 26px;
    line-height: 26px;
    display: inline-block;
    color: #888;
    font-size: 13px;
    margin-right: 12px;
  }
  .footer .about {
    width: 120px;
    height: 164px;
  }
    .footer .footer-item {
      box-sizing: border-box;
      padding: 0 12px;
      background: url("../images/footer-line.png") repeat-y right top;
  }
  .footer div {
      float: left;
  }
}

.hiddenInput{
  position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;
}
/* --- Dialog --- */
.helper-dialog-container {position: relative; z-index: 99999;
    .helper-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.55);opacity:0}
    .helper-dialog-wrapper{position:fixed;top:50%;left:50%;background:#fff;overflow:hidden;box-shadow:rgba(0,0,0,.14) 0 0 15px;transform:scale(0.88);opacity:0}
    .helper-dialog-header{overflow:hidden}
    .helper-dialog-title{display:block;float:left;width:calc(100% - 65px);padding:15px;font-size:16px;font-weight:bold;word-break:break-all;cursor:default}
    .helper-dialog-close{display:block;float:right;width:20px;height:20px;line-height:20px;margin:15px 13px 0 0;font-style:normal;text-align:center;cursor:pointer;opacity:.7;transition:.2s}
    .helper-dialog-close:hover{opacity:1}
    .helper-dialog-content{position:relative;border-top:#e5e5e5 solid 1px;border-bottom:#e5e5e5 solid 1px;padding:15px 0;min-height:100px;font-size:14px;line-height:160%;overflow:auto;color:#292929}
    .helper-dialog-content > div{overflow:hidden;margin:0 15px}
    .helper-dialog-type-left,.helper-dialog-type-right{float:left;margin-top:20px}
    .helper-dialog-type-left{width:30px;height:30px;margin-left:15px}
    .helper-dialog-type-right{width:calc(100% - 75px);margin-left:15px;word-break:break-all}
    .helper-dialog-type-right-title{font-size:16px;font-weight:bold;margin:3px 0 5px 0}
    .helper-dialog-footer{height:32px;padding:15px 0}
    .helper-dialog-footer > div{float:right;height:32px;line-height:32px;font-size:14px;cursor:pointer;padding:0 15px;border-radius:4px;transition:.2s}
    div.helper-dialog-yes{background:#2285ee;color:#fff;border:#2285ee solid 1px;margin-left:12px;margin-right:15px}
    .helper-dialog-no{color:#777;border:#e5e5e5 solid 1px}
    .helper-dialog-yes:hover{background:#4797ed}
    .helper-dialog-no:hover{border-color:#cfcfcf}
    .helper-dialog-autoclose{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#2285ee;transform:scale(0,1);transform-origin:left center}
    .helper-dialog-dark-mode{background:#292d34;color:#d8d8d8}
    .helper-dialog-dark-mode .helper-dialog-content{border-color:#3D4047;background:#292d34 !important;color:#d8d8d8}
    .helper-dialog-dark-mode .helper-dialog-yes{background:#292d34;border-color:#9a9a9a;color:#9f9f9f}
    .helper-dialog-dark-mode .helper-dialog-yes:hover{background:#292d34;border-color:#eee;color:#eee}
    .helper-dialog-dark-mode .helper-dialog-no{background:#292d34;border-color:#55585D;color:#858585}
    .helper-dialog-dark-mode .helper-dialog-no:hover{background:#292d34;border-color:#777;color:#999}
}