.hovercard {
  position: absolute;
  left: 0;
  z-index: 10000;

  padding: 20px;
  white-space: pre;
  background: #2D2D2D top left no-repeat;
  background-size: contain;
  padding-left: 130px;
  color: #ccc;
  box-shadow: 0px 3px 3px rgba(0,0,0,.85);
  
  opacity: 0;
  transition: opacity 0.15s ease-in-out 0.25s, top 0.15s ease-in-out 0.25s;
  pointer-events: none;

  h3 {
    margin: 0 0 12px;
    color: #5CBB1D;
  }
  p {
    margin: 0;
  }
  p:last-child {
    color: #fff;
  }
}

.layout-rightnav .hovercard {
  // orient for right side of the page
  left: auto;
  right: 0;
}

.user-hexagon {
  position: relative;
  .hovercard {
    top: 65px;
  }
  &:hover .hovercard {
    opacity: 1;
    top: 60px;
  }
}

.user-img {
  position: relative;
  .hovercard {
    top: 55px;
  }
  &:hover .hovercard {
    opacity: 1;
    top: 50px;
  }
}

.user-link-outer {
  position: relative;
  .hovercard {
    top: 25px;
  }
  &:hover .hovercard {
    opacity: 1;
    top: 20px;
  }
}