.gutter {
  float:left;
  border-right:1px solid lightgray;
  width:240px;
  position:relative;
  background-color:blue;
  z-index:100;
  .contact {
    float:left;
    width:100%;
    border-bottom:1px solid whitesmoke;
    color:#333;
    &:hover {
      background-color:whitesmoke;
      margin-top:-1px;
      border-bottom:1px solid lightgray;
      border-top:1px solid lightgray;
    }
  }
  .contact-details {
    position:relative;
    width:156px;
    float:left;
    text-align: left;
    h3 {
      font-size:13px;
      margin-bottom:4px;
    }
    .last-message {
      color:lighten(#333, 40%);
      letter-spacing:0.15px;
      -webkit-text-stroke: 0.2px;
      margin:0;
      font-size: 12px;
    }
    .last-timestamp {
      position:absolute;
      top:14px;
      right:8px;
      font-size:12px;
      font-weight: 500;
      color:gray;
    }
  }
}
.avatar {
  cursor:pointer;
  height:56px;
  width:56px;
  display:inline-block;
  margin:10px;
  margin-right:14px;
  float:left;
  clear:both;
  background-color:whitesmoke;
}

.search {
  padding:10px;
  border-bottom:1px solid whitesmoke;
  input[type=search] {
    box-sizing: border-box;
    font-size:12px;
    outline:0;
    width:100%;
    margin:0;
    letter-spacing: 0.25px;
    padding:4px 8px;
    border:1px solid lightgray;
  }
}