@import "config";

.container {
  width: 1000px;
  padding: 5px 17px;
}

.leftside {
  width: 23%;
}

.roster {
  background: $bg-roster;
  padding: 16px 9px 9px;
  min-height: 400px;
  position: relative;

  &:hover, &:active {
    cursor: default;
  }
}

.user {
  padding: 4px 3px;
  margin-right: -9px;

  &:hover {
    background: #fbfbfb;
  }

  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: #b0b7b9;
  }

  .avatar {
    float: left;
    margin-right: 8px;
    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;

    li {
      list-style: none;

      img {
        width: 32px;
      }
    }
  }

  .active-group {
    margin: 0 -14px 0 -10px;
    padding: 8px 10px;
    background: white;
    border-right: 1px solid #fcfcfc;

    .user {
      margin-right: -6px;

      &:hover {
        background: $bg-roster;
      }
    }
  }
}

.toolbox {
  position: absolute;
  bottom: 0;
}

.chatting-window {

}