
body{
  color:$color-text;
  background:$bg-grey;
}
header{
  background:$color-white;
  box-shadow: 1px 0 10px rgba(0,0,0,.1);
}

.footer .container{
  padding-bottom:50px;
  font-size: 12px;
}

a{
  color:$color-eye-darker;
  &:hover{
    color:$color-eye;
  }
  &:visited{
    color:$color-text-dark;
  }
}

.empty{
  width: 100%;
  padding:30px 0;
  text-align: center;
  color:$color-text-dark;
}

.my-card{
  border-radius:0;
  border:0;
  .card-header{
    border-bottom:1px $color-eye-darker solid;
    background:#fff;
    font-weight: bold;
  }
}
.btn{
  border-radius: 0;
}
.input-group-text{
  border-radius: 0;
  border: 0;
  background: transparent;
  border-bottom:1px #009dac solid;
}
.form-control{
  border-radius: 0;
  border: 0;
  border-bottom:1px #009dac solid;
}


.nav-box{
  padding-top:0;
  padding-bottom:0;
  z-index:9;

  .navbar-brand{
    color:$color-eye;
    padding:0;
  }
  .navbar-toggler-icon{
    &:before{
      font-size:30px;
      color : $color-text-dark;
    }
  }
  .navbar-nav {
    .nav-link {
      color         : $color-text;
      padding : 1rem 1.5rem;
    }
    >.nav-item>.nav-link{
      position: relative;
      background : $color-white;
      z-index: 2;
    }
    >.active>.nav-link{
      color : $color-eye;
    }
    .dropdown-menu{
      border:0;
      border-radius:0;
      margin:0;
      box-shadow: 1px 0 10px rgba(0,0,0,.1);
      z-index:1;
    }
  }
}

.carousel{
  .carousel-item{
    height:400px;
    background:url(../images/blank.gif) center center no-repeat;
    background-size:cover;
    img{
      display:none;
    }
  }
}
.subbanner{
  height:300px;
  .inner{
    background:url(../images/blank.gif) center center no-repeat;
    background-size:cover;
  }
}

.main{
  min-height:500px;
}

.index-body{
  padding-top:20px;
}
.list-body{
  padding-top:20px;
}
.view-body{
  padding-top:20px;
  .col-md-9 {
    background : $color-white;
  }
}

.card-comment{
  border-radius:0;
  border:0;
  .card-header{
    border-bottom:1px $color-eye-darker solid;
    background:#fff;
  }
}

.comment-form{
  padding-bottom:1rem;
  border-bottom:1px #eee solid;
  .avatar{
    width:40px;height:40px;
  }
  .form-control{
    border: 1px #eee solid;
  }
}


.comment_list{
  .media{
    border-bottom:1px #eee solid;
    .avatar{
      width:40px;height:40px;
    }
    .comment-content{
      font-size:0.9rem;
    }
    .comment-info{
      font-size:0.8rem;
    }
  }
}

.sidecolumn{
  .card{
    margin-bottom:20px;
    border-radius:0;
    border:0;
    .card-header{
      border-bottom:1px $color-eye-darker solid;
      background:#fff;
    }
    .card-body{
      .list-group{
        .list-group-item{
          border-radius:0;
          border:0;
          &.active{
            background:$color-eye;
          }
        }
      }
    }
  }
}

.article-list{
  .list-group-item{
    border: 0;
    border-radius: 0;
    margin-bottom: 20px;
    padding: 0;
    display: flex;
    transition: all .3s ease-out;
    
    .list-img{
      width:20%;
      padding-top:15%;
      flex:0 0 auto;
      height: 0;
      margin: 10px;
      background:url(../images/blank.gif) center center no-repeat;
      background-size:cover;
      img{
        display:none;
      }
    }
    .art-view{
      flex:auto;
      padding:.8rem 1rem;
      display:flex;
      flex-direction: column;
      h3{
        font-size:18px;
      }
      .desc{
        flex:auto;
        font-size:12px;
        line-height:20px;
        margin-bottom:.5em;
        color:$color-text-dark;
      }
      .text-muted{
        line-height:1.2em;
        font-size:12px;
      }
    }
    &:hover{
      box-shadow: 0 4px 12px 0 rgba(0,0,0,.1);
      border-radius:3px;
      transform:translateY(-2px);
      /*transform: scale(1.05);*/
    }
    &.empty-box:hover{
      background-color : $color-white;
      box-shadow: none;
      transform: none;
    }
  }
}

.article-body{
  padding: 20px;
  background: #fff;
  .article-title{
    text-align: center;
    font-size:24px;
    font-weight:bold;
  }
  .article-info{
    width: 60%;
    font-size: 0.8rem;
    margin: 0 auto;
    margin-top: 1em;
    padding-bottom: .5em;
    border-bottom: 1px #eee solid;
  }
  
  .article-content{
    margin-top:2em;
    min-height: 500px;
    line-height: 1.6;
    img{
      max-width: 100%;
    }
  }
  .article-slides{
    height:450px;
    .carousel,.carousel-inner,.carousel-item {
      height:100%;
      overflow: hidden;
    }
    .carousel-item{
      background:center center no-repeat;
      background-size:contain;
      img{
        display: none;
      }
    }

    &+.article-content{
      min-height: 200px;
    }
  }
}

.loginbox{
  padding-top:10%;
}

.register{
  padding-top:30px;
}
.sidecolumn{
  .card-header{
    font-weight: bold;
  }
  .list-side{
    a{
      display:block;
      margin:8px 0;
      line-height:1.2em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
}

.page-item{
  .page-link{
    color:#009dac;
  }
  &.active{
    .page-link{
      color:#fff;
      background-color: #009dac;
      border-color: #009dac;
    }
  }
  &:first-child .page-link{
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
  }
  &:last-child .page-link{
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
  }
}

@media (max-width: 991px) {
  .carousel{
    .carousel-item{
      height:260px;
    }
  }
  .subbanner{
    height:120px;
  }
  header .container{
    padding:0;
  }
  .nav-box {
    .navbar-collapse{
      border-top:1px $bg-hover solid;
    }
    .navbar-nav {
      .nav-link {
        padding : 0.5rem 1rem;
      }
      .dropdown-menu{
        border:0;
        border-radius:0;
        margin:0;
        box-shadow: none;
        background:$bg-grey;
        z-index:1;
      }
    }
  }
  .list-body,.view-body{
    .sidecolumn{
      display: none;
    }
  }
  .article-body{
    .article-info{
      width: 95%;
    }
  }
}
@media (max-width: 480px) {
  .carousel{
    .carousel-item{
      height:150px;
    }
  }
  .subbanner{
    height:80px;
  }
  .article-list{
    .list-group-item {
      flex-wrap: wrap;
      .list-img {
        width : 100%;
        padding-top:60%;
      }
    }
  }
}