body{line-height: 25px; color: #333;font-family: 'Hiragino Sans GB', Helvetica, Arial, 'STHeiti', 'WenQuanYi Micro Hei', sans-serif;font-size: 13px;}
html,body{height: 100%}
.left{float: left; }
.right{float: right}
.clear{clear: both}

[v-cloak]{ display: none }


img{
  border: 0;
}
a{ 
  text-decoration: none;
  -webkit-transition:all,.5s,ease,0s; 
}

a{
  &.normal{
    text-decoration: none;
    &:visited,&:link{
      color: #333;
    }
    &:hover,&:active{
      color: #da552f;
    }
  }
}
.search-form{
  .search{border: none; padding: 8px 20px; outline: none; border-radius: 100px; margin: 20px 0; width: 250px;padding-right: 40px;}
  .form-control{
    box-shadow: none;border: 1px solid #F5F5F5;
    &::-webkit-input-placeholder {
      color: #EEE;
    }
  }
  button{border: 0; background: none;margin-left: -30px;outline: none;}
  i{ color: #CACACA;}
}

.alert-pop {
  position: fixed;
  top: 0px;
  width: 300px;
  text-align: center;
  left: 50%;
  margin-left: -150px;
  z-index: 1500
}

.has-msg{
  a {
    color: red!important
  }
}


.main-container{
  max-width: 1000px; margin: 0 auto;    position: relative;
}


header{
  .extra-menu{
    border: #EEE 1px solid;  width: 120px; display: block;  padding: 0; right: 0; 
    position: absolute; display: none;background-color: #FFF;
    li{list-style: none; display: block; border-bottom: #EEE 1px solid;}
    a{ padding: 10px 20px;display: block;width: 100%; height: 100%; text-decoration: none;}
    &.vs-menus{ 
      p{
        padding: 5px 10px;
        display: inline-block;
        margin: 0;

      }
      i.fa-close{
        position: absolute;
        right: 5px;
        top: 10px;
        cursor: pointer;
        color: #ffbeab;
        display: none;
      }
      li{
        position: relative;
        overflow: hidden;
        &:hover{
          i.fa-close{
            display: inline-block;
          }
        }
      }
    }
  }
  li:hover{
    .extra-menu{display: block;}
  }

}

.logo-wraper{
  img{  position: absolute;  top: 13px; width: 25px;}
  span{  color: #da552f;  margin-left: 29px;font-size: 17px;}
}

article.con{font-size: 15px }

.footer{
  border-top: 1px solid #e9eaef;background: #ECECEC;color: #999; margin-top: 100px; padding: 20px;padding-top: 30px; font-size: 12px;
  .menus{
    padding: 0; float: right;  
    li{list-style: none; display: inline-block; margin-left: 15px; }
    
  }
  a{color: #575757;}
 

  .bottom-wraper{  
    border-top: #D3D3D3 1px solid;    margin: 40px 0;    padding: 40px 0;   padding-bottom: 0;
    font-size: 12px;  
    p{text-align: center;}
  }

  .link-wraper{
    a{margin-right: 10px;}
  }

  .third-contact{
    i.fa{font-size: 25px; margin: 20px;}
  }
}

.txt.error{
  background-color:rgb(255, 201, 201);
}

.txt-center {text-align:center}

h3.high{margin-bottom: 30px;}
pre{
  background: none;font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace, monospace;padding: 1em; padding: 2px 0 2px 15px;
border: 0; margin: 0px 0 30px;  border-radius: 0;
}


.navbar{
  border-radius: 0;
  z-index: 2000;
  font-weight: bold;
  box-shadow: 1px 1px 2px rgb(238, 238, 238);
  margin-bottom: 0;
  position: fixed;
  width: 100%;
}
.header-placeholder{
  height: 50px;
}

.left-menus
{
  border-color: #bce8f1;
  *{border-left-color: #bce8f1;border-right-color: #bce8f1;} 
  
  .sub-menus{
    display: none;
    .list-group-item{
      background-color: #F9F9F9;
      &:link,&:visited{
        color: #B8B8B8;
      }
      &:hover,&:active{
        color: #333;
      }
      

    }
  }
  
}

.logo{
  &:after{
  }
}


#loginModal{
  .modal-body{text-align:center}
  .fa-github,.fa-weibo{font-size: 60px; display: inline-block; margin: 20px;}
  a{color: #333}
  .modal-content{box-shadow: 0 1px 2px rgba(166, 166, 166, 0.5);border: 1px solid rgba(189, 189, 189, 0.2)}
  .modal-footer{text-align:center}
}

// bootstrap 
.modal-backdrop.in{opacity: 0.9;filter: alpha(opacity=90);}
.modal-backdrop{background-color:#FFF; z-index: 100}
.modal{z-index: 1000}
.list-group-item{
  border-color: #EEE; border-radius: 0!important; position: relative; overflow: visible;
  text-overflow:ellipsis;//让超出的用...实现
  white-space:nowrap;//禁止换行
  overflow:hidden;//超出的隐藏
  display: block;
  &.root{
    display: block;
    &:hover{
      .sub-menus{display: block;}
    }
  }
}
.modal-dialog{
  margin: 130px auto;
}
.list-group-item:first-child,.list-group-item:last-child{border-radius: 0}

.btn{
  border: 0;
  border-radius: 0

}


// 分页
.pagenation{
  text-align: center;
}
.pagination > li > a, .pagination > li > span{
  padding: 10px 20px;
}

.no-items {
  text-align: center;
  color: rgba(214, 213, 213, 0.51);
  padding: 50px 0;
}


// simditor
.markdown-editor-wraper{
  .simditor.simditor-markdown .markdown-editor{
      width: 55%;  float: right; border-left: #DDD 1px solid;
  }
  .simditor.simditor-markdown .simditor-body{
      width: 45%;  float: left;  border-bottom: none;
  }
  .simditor .simditor-toolbar{
      text-align: center;
  }
  .simditor .simditor-toolbar > ul > li{
    display: inline-block; float: none;
  }
  .simditor-wrapper{
    width: 100%;
  }
  .simditor .markdown-editor textarea{
    border-bottom: none;
  }
}

.CodeMirror{
  font-family: 'Source Code Pro', Consolas, 'Lucida Console', Courier, monospace!important;
  font-size: 15px;
}
//- markdown 编辑器
.markdown-wraper{
   position: relative;
 
  & > div{
    height: 100%;
    &.preview-wraper{
     width: 40%; left:0; box-shadow: inset 0 1px 2px #e4e4e4; 
     & > div{
       overflow-y: scroll; height: 100%; padding: 10px;
     }
    }
    &.editor-wraper{ 
      textarea{
        width: 100%;
        border:0 ; 
        outline: none;
      }
      .inner{
        padding: 10px; 
        position: relative;
        height: 3500px
       
      }
    }
    &.spliter{
      width:5px;background-color: #111;left:40%;z-index: 11;  cursor: col-resize;
    }
  }
  .CodeMirror{height: 100%;} 

} 

.unselect {
-webkit-user-select: none; 
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

//- diff
.diff{overflow:auto;}
.diff ul{background:#fff;overflow:auto;font-size:13px;list-style:none;margin:0;padding:0;display:table;width:100%;}
.diff del, .diff ins{display:block;text-decoration:none;}
.diff li{padding:0; display:table-row;margin: 0;height:1em;}
.diff li.ins{background:#dfd; color:#080}
.diff li.del{background:#fee; color:#b00}
.diff li:hover{background:#ffc}
/* try 'whitespace:pre;' if you don't want lines to wrap */
.diff del, .diff ins, .diff span{white-space:pre-wrap;font-family:courier;margin-right: 50px;}
.diff del strong{font-weight:normal;background:#fcc;}
.diff ins strong{font-weight:normal;background:#9f9;}
.diff li.diff-comment { display: none; }
.diff li.diff-block-info { background: none repeat scroll 0 0 gray; }


//上传
.upwrap{
  position: relative;
  input{ display: inline-block;position: absolute; top:0;FILTER:ALPHA(opacity=0); -moz-opacity:0; opacity: 0;}
  .upbtn{
    padding: 10px 20px; display: inline-block;  background-color: rgb(14, 173, 255);color: #FFF; text-align: center;
  }
}

.upload {
  input[type=file] {
    position: absolute;
    top: 0;
    opacity: 0;
  }
}

.doc-title{
  .upwrap{
   position: absolute;  top: 10px;
  }
}

.panel,.list-group-item{
  border-radius: 0;border-color: #E5E5E5;
}
.panel-heading{border-radius: 0}

.simditor{
  img{max-width: 100%}
}


.comment-wraper{
  ul{padding: 0;}
  li{
    list-style: none;
    position: relative;
    display: block;
    min-height: 80px;
    padding: 10px;
    padding-left: 60px;
    border-bottom: #EEE 1px solid;
    
  }
  .tx{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: inline-block;
    position: absolute;
    left:10px;
    top: 17px;
  }
  .comment-editor{
    padding: 10px;
    border:#EEE 1px solid;
    margin-bottom: 30px;
  }
  .CodeMirror{height: 100%;   padding: 10px;height: 200px;}
  .comment-footer{
    border-top:#EEE 1px solid;
    padding-top: 10px;
    overflow: hidden;
    a{
      color: #a7a7a7;
    }
  }
  
  .comment-list{
    a.oper{
      color:#999; float: right; margin-left: 10px; display: none;
      &:hover{color: #000}
      &.zan-btn{
        display: inline-block;
        text-decoration: none;
        &.active-true {
          i{ color: #EF4245; }
        }
      }
    }
    li:hover{
      a.oper{display: inline-block;}
    }

    .co-mem {
      font-weight: bold;
      color: #333;
    }
    .co-time {
      color: #999;
      margin-left: 10px;
    }
  }
  
}



// font-awesome patch
.tag-icon{
  background-image: url("tag-icon.png");   background-repeat: no-repeat;width: 18px; height: 20px; margin-top: 5px;
}
.fa-jquery{
  @extend .tag-icon;  background-position: 0px -4px;
}

.fa-bootstrap{
  @extend .tag-icon;   background-position: 0px -25px;
}

.fa-angular{
  @extend .tag-icon;   background-position:  0px -46px;
}

.fa-node{
  @extend .tag-icon;   background-position:  0px -68px;
}


// bootstrap patch
.navbar{
  background-color: rgba(254, 254, 254, 0.97);  border: 0;
  a{
    &:link,&:visited{
      color:#777777;
    }
    &:hover,&:active{
      color:#111;
    }
  }

  .tx{
    width: 25px; height: 25px; border-radius: 100%;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-weight: bold}


//- validate
.form-control.error{border-color: #d9534f }
label.error{color: #d9534f}

//- prism
:not(pre) > code[class*="language-"], pre[class*="language-"]{background-color: #f8f8f8;}


//- ad
.ad-item{
  .cover{width: 100%; }
}

.ad-wraper-1{
  padding: 20px 30px;

  .ad-tip {
    text-align: center;
    color: #DDD
  }
}

// bootstrap 样式
.form-control{
  border-radius: 0; -webkit-box-shadow: none; box-shadow: none;
}
.alert{ padding: 10px 15px;}


//- 主要颜色
.mc{color: #da552f}

//- 客服
#MEIQIA-BTN-HOLDER{display: none!important;}
.kefu-btn{
  background-color: #F7F7F7; display: inline-block;  cursor: pointer;
  border-radius: 100%; position: fixed; width: 35px; height: 35px;text-align: center;
  bottom: 20px; right: 20px;color: #da552f; line-height: 35px;   box-shadow: 0 0 14px 0 rgba(0,0,0,.16);
  &:hover{
    color: #F7F7F7; background-color: #da552f;
  }
}

 
// 模态框
.modal-wraper{
  background-color: #FFF; width: 100%;  border: #DDD 1px solid; border-top: 0;  position: absolute; top: 0;display: none; top: -100%; left: 0; z-index: 1000; padding-top: 55px; width: 500px; left: 50%; margin-left: -250px;
  .close-modal{
    position: absolute; cursor: pointer; font-size: 50px; color:#EEE;
    right: 10px; font-weight: bolder; top: 55px;
  }
  .panel{
     border-color: #FFFFFF; padding: 30px; padding-top: 0;
  }
  .modal-title{
    border-bottom: #EFEFEF 1px solid; padding-bottom: 15px;

    h3{
      text-align: center; font-size: 20px; 
    }

  }
}

#fork-wraper{z-index: 900;}

code[class*="language-"], pre[class*="language-"]{
  text-shadow: none;
}


/**
登陸**/
.login-wraper{
  max-width: 340px;
  margin-left: -170px;

  .third-login{
    text-align: center;
    & > div{
      padding: 15px 0;
    }
    & > a{
      font-size: 50px;
      color: #333
    }
  }

  .login-panel{
    max-width: 400px;
    margin: 50px auto; 
    margin-bottom: 0;
    .panel-heading{
      background-color: #FFF;
      padding: 15px;
    }
   
  }


}



// 自定义字体
.icon-heart{
  width: 30px;
  height: 30px; 
  fill: #BBB;
  cursor: pointer;
}

// 评论
.comment-panel {
  .co-title {
    //border-top: #DDD 1px dashed;
    padding: 50px;
    text-align: center;
  }

  .co-footer {
    border-top: 1px solid #dddddd;
    padding: 10px 15px;
  }
}



// 加载动画
.sk-rotating-plane {
  width: 40px; height: 40px;  
   background-color: #14B9C7; margin: 40px auto;
  -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
          animation: sk-rotatePlane 1.2s infinite ease-in-out; }

@-webkit-keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

