// styles that apply to the user page
@import "foundation/variables";
@import "foundation/mixins";

.user-preferences {
  textarea {
    width: 530px;
    height: 100px;
  }
  .static {
    color: $black;
    margin-top: 5px;
    margin-left: 5px;
    display: inline-block;
  }
  .instructions {
    color: $dark_gray;
    margin-left: 165px;
    margin-top: 5px;
  }
  .avatar {
    margin-left: 3px;
  }
  .instructions a[href] {
    color: $darkish_gray;
  }
  .warning {
    @include border-radius-all(6px);
    background-color: lighten($red, 10%);
    padding: 5px 8px;
    color: $white;
    width: 520px;
  }

  .other .controls {
    margin-top: 10px;
    select {
      width: 280px;
    }
  }
}

#user-menu {
  .btn {
    float: right;
    margin: 5px 0 0 10px;
  }
}

#about-me {
  padding: 4px;
  margin: -4px;
  display: block;
  width: 220px;
  min-height: 200px;
  background-color: #f8f8f8;
  border-radius: 5px;
  color: #444;
  word-wrap: break-word;
}

#user-info {
  width: 240px;
  margin-right: 20px;
  float: left;
  .summary {
    height: 50px;
  }
  .avatar {
    float: left;
    width: 45px;
  }
  nav.buttons {
    width: 180px;
    padding: 0;
    .btn {
      width: 100%;
      margin-bottom: 5px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
  }
  h2 {
    a {
      font-size: 14px;
      color: #999999;
      cursor: pointer;
    }
  }
  .show {
    dl {
      width: 100%;
      overflow: hidden;
      dt {
        margin: 0;
        padding: 0;
        width: 80px;
        font-size: 12px;
        color: #555555;
        float: left;
        clear: left;
      }
      dd {
        margin: 0;
        padding: 0;
        width: 100px;
        float: left;
        color: #444444;
      }
    }
  }
  .avatar {
    vertical-align: bottom;
    a {
      display: inline-block;
    }
  }
  form {
    .bio {
      width: 220px;
      height: 150px;
    }
  }
  .side-nav {
    margin-top: 5px;
  }
}

#no-invites {
  padding: 10px;
}

#invited-users {
  h2 {
    color: $darkish_gray;
    font-size: 20px;
  }
  .invites {
    margin-bottom: 20px;
    tr {
      height: 45px;
    }
  }
}

#user-menu h1 {
  color: #2d3234;
  float: left;
  padding-left: 150px;
  span {
    font-size: 18px;
    color: #676b6c;
    margin-left: 15px;
    font-weight: lighter;
    position: relative;
    top: -4px;
    .icon {
      margin-left: 5px;
      font-size: 14px;
    }
  }
}

#user-menu {
  margin: 10px 0 0;
}

.user-heading {
  border-bottom: 1px solid #bcbcbc;
  background-color: #e6e6e6;
  margin-top: -15px;
  margin-bottom: 10px;
  position: relative;
  .nav {
    float: right;
    margin: 5px 0 14px 5px;
  }
}

.user-info {
  margin-bottom: 10px;
  .about-me {
    position: relative;
    border: 1px solid #b9b9b9;
    padding: 6px;
    @include border-radius-all(4px);
    float: left;
    width: 936px;
    height: 57px;
    margin-left: 150px;
    background-color: white;
    @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14)));
    &:before,
    &:after {
      position: absolute;
      width: 0;
      height: 0;
      content: "";
      border-style: solid;
      border-color: transparent;
      pointer-events: none;
    }
    &:before {
      top: 12px;
      left: -10px;
      border-width: 10px 10px 10px 0;
      border-right-color: #b9b9b9;
    }
    &:after {
      top: 13px;
      left: -9px;
      border-width: 9px 9px 9px 0;
      border-right-color: $white;
    }
    .missing-profile {
      color: lighten(#000, 70%);
    }
  }
  @include medium-width {
    .about-me {
      width: 821px;
    }
  }
  @include small-width {
    .about-me {
      width: 776px;
    }
  }
}

.user-heading {
  .avatar-wrapper {
    position: absolute;
    display: block;
    width: 120px;
  }
}

#user-activity {
  width: 840px;
  float: left;
  margin-bottom: 50px;

  .user-stream {
    .excerpt {
      margin: 5px 0px;
      font-size: 13px;
      word-wrap: break-word;
      color: lighten($black, 30%);
    }
    .item.moderator-action {
      background-color: #eef0ff;
    }
    .item.deleted {
      opacity: 0.8;
      background-color: #ffcece;
    }
    .item.hidden {
      display: block;
      opacity: 0.4;
    }
    .item {
      padding: 10px 8px;
      background-color: white;
      border: 1px solid #b9b9b9;
      margin-bottom: 10px;
      @include border-radius-all(4px);
      @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14)));
    }
    .type {
      color: lighten($black, 40%);
    }
    span.name {
      color: lighten($black, 40%);
    }
    .time {
      display: block;
      float: right;
      color: silver;
      margin-right: 8px;
      font-size: 11px;
    }
    .avatar-link {
      float: left;
      margin-right: 10px;
    }
    .title {
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
    }
  }
}

// styling of bottom section
.user-stream .child-actions {
  margin-top: 8px;
  .avatar-link {
    float: none;
  }
  .icon {
    width: 15px;
    display: inline-block;
    color: #777;
  }
  .avatar-wrapper {
    border: none;
  }
  .avatar-link {
    margin-right: 3px;

  }
}

@include medium-width {
  #user-activity {
    width: 725px;
  }
}
@include small-width {
  #user-activity {
    width: 680px;
  }
}

.avatar-selector {
  label {
    display: inline-block;
    margin-right: 10px;
  }
  #avatar-input {
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .avatar {
    margin: 5px 10px 5px 0;
  }
}