.container {
  width: 1000px;
  padding: 10px 17px;
}
 
.leftside {
  width: 23%;
}
 
.rightside {
  width: 75%;
}
 
.roster {
  background: $bg-roster;
  padding: 16px 9px 9px;
  min-height: 400px;
  position: relative;
 
  &:hover, &:active {
    cursor: default;
  }
}
 
.my-info {
  height: 53px;
}
 
.user {
  padding: 4px 0 4px 3px;
  margin-right: -9px;
 
  h1, h2, h3 {
    margin: 0 0 1px;
  }
 
  h1 {
    font-size: 12px;
    color: $black;
    text-shadow: white 1px 1px;
  }
 
  h2 {
    font-size: 11px;
    font-weight: normal;
    color: #7e8b90;
    text-shadow: white 1px 1px;
  }
 
  h3 {
    font-size: 12px;
    color: $status-color;
    margin-top: -3px;
 
    .drop-down {
      position: relative;
      top: 2px;
      left: -2px;
      font-size: 13px;
    }
  }
 
  .avatar {
    float: left;
 
    height: 32px;
    width: 32px;
 
    margin-right: 8px;
 
    img {
      height: 32px;
 
      margin: 0 auto;
      display: block;
    }
 
    &.bigger {
      height: 46px;
      width: 46px;
 
      img {
        height: 46px;
      }
    }
  }
}
 
.friends {
  .group-header {
    margin: 16px 3px 3px;
    font-size: 12px;
    text-transform: uppercase;
    color: #9db0b7;
 
    &.active {
      color: $app-color;
    }
  }
 
  ul {
    padding: 0;
    margin: 0;