#container .container_left{float:right;width:300px;margin:0;}
#container .container_right{float:left;width:860px;}

.avatarList{margin:0 -5px;padding:0;}
.avatarList li{
    position:relative;
    float:left;
    width:20%;
    height:15vw;
    padding:0 5px;
    margin-bottom:10px;
}
.avatarList li .ch-item{
    background:#fff;
    width:100%;
    height:100%;
    padding:10px;
    overflow:hidden;
}
.avatarList li h3{font-size:15px;overflow:hidden;line-height:25px;margin:0;padding:5px 0;white-space: nowrap;text-overflow: ellipsis;}
.avatarList li img{width:100%;height:auto;}
.avatarList li .follow{display:none;margin:0 auto;}
.avatarList li:hover .ch-item{
    position:absolute;
    height:250px;
    width:184px;
    z-index:1;
    margin:0 0 0 -10px;
    box-shadow:0 0 2px 2px rgba(0,0,0,.3);
}
.avatarList li:hover .follow{
    display:block;
}


.sort a.btn.active{background:#ffaa31;color:#fff;text-shadow:none;border-color:#ea9748;}
.view a.btn.active{background:#64c779;color:#fff;text-shadow:none;border-color:#3cb756;}

/* new cover */

.info{position:relative;}
.info .cover{overflow:hidden;}
.info .photo{position:absolute;margin:-170px 0 0 0;color:#fff;z-index:1;}

.info .photo .outline{
  position: relative;
  width:200px;
  height:200px;
  background:#fff;
  border:1px solid #ccc;padding:5px;
  margin:0 0 0 30px;
}
.info .photo .outline img{width:100%;height:100%;}
.info .photo .outline:before,
.info .photo .outline:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 5px;
  left: 1px;
  width: 50%;
  top: 90%;
  box-shadow: 0px 9px 1px 0px rgba(150, 150, 150, 0.25);
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.info .photo .outline:after
{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 1px;
  left: auto;
}

.info .description{position:absolute;margin:-50px 0 0 250px;z-index:0;color:#fff;
  text-shadow:
    -1px -1px 3px #000,
    1px -1px 3px #000,
    -1px 1px 3px #000,
    1px 1px 3px #000;}
.info .description h1{padding:0;margin:0;font-size:31px;line-height:35px;}

.info .note{position:absolute;z-index:1;bottom:80px;right:20px;color:#e64d25;font-size:15px;background:rgba(255,255,255,.9);padding:10px;font-weight:bold;max-width:45%;max-height:30%;overflow:hidden;}
.info .note:empty {display:none;}

.info .navi{position:relative;z-index:0;background:#fff;margin:0 0 10px 0;border:1px solid #cccccc;border-top:0;padding:10px 0 10px 240px;}
.info .navi li{float:left;border-right:1px solid #e9eaed;}
.info .navi li:last-child{border:none;}
.info .navi li > span{padding:0 20px;line-height:35px;display:block;color:#333;text-decoration:none;}

.info .toolbar{position:absolute;z-index:2;right:10px;bottom:15px;}
.info .toolbar > div{display:inline-block;position:relative;}
.info .toolbar > div > ul{border:2px solid #ccc;border-radius:3px;min-width:auto;right:0px;left:auto;margin:8px 0 0 0;padding:5px 0;}
.info .toolbar > div > ul li{margin:0;}
.info .toolbar > div > ul li:hover{background:#0077b1;color:#fff;}
.info .toolbar > div > ul li a{padding:0 10px;line-height:27px;width:120px;}
            
@media (max-width: 1190px){
    #container{margin-right:310px;}
    #container .container_left{width:310px;margin-right: -310px;padding-left:10px;float:right;}
    #container .container_right{width:100%;float:left;-webkit-box-flex: 1;-moz-box-flex: 1;box-flex: 1;overflow:hidden;}
    .info{margin-right:-310px;}
}




@media (max-width: 640px){
    
    #container{width:100%;margin:0;}
    #container .container_right{float:none;width:100%;margin:0;border:0px;}
    #container .container_left{float:none;margin:auto;padding:0;}
    .category a{line-height:35px;padding:0;width:25%;text-align:center;margin:auto;}

    .avatarList{margin:0;}
    .avatarList li{
        position:relative;
        float:left;
        width:50%;
        height:auto;
        margin:0 0 10px 0;
        padding:0 5px;
    }
    .avatarList li .ch-item{
        background:#fff;
        width:100%;
        height:auto;
        padding:10px;
        border-radius:5px;
        overflow:hidden;
    }
    .avatarList li:hover .ch-item{
        position:relative;
        width:100%;
        height:auto;
        width:auto;box-shadow:none;
        margin:0;
    }

    .info .cover img{width:100%;height:auto;min-height:120px;}
    .info .photo{margin:0;top:0;}
    .info .photo .outline{
      width:100px;
      height:100px;
      margin:10px 0 0 10px ;
    }
    .info .note{display:none;}
    .info .description{margin:30px 0 0 120px;top:10px;z-index:1;}
    .info .description h1{font-size:21px;line-height:35px;}
    .info .navi{position:relative;z-index:0;background:#fff;margin:0 0 10px 0;border:1px solid #cccccc;border-top:0;padding:0px;}
    .info .navi li{float:left;border-right:1px solid #e9eaed;}
    .info .toolbar{position:absolute;z-index:2;right:10px;top:10px;}

}