.tip {
  position: absolute;
  background: #FFF;
  border: 4px solid #e9e6e1;
  border-radius: 7px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 12px;
}
  /* create the box that will hold the tooltip arrow */
  .tip:before {
    content: ".";
    text-indent: -10000px;
    width: 8px;
    height: 100%;
    background: url(left.png) center no-repeat;
    left: -12px;
    position: absolute;
  }
  /* when .tip also has .up .down or .right */
  .tip.right:before {
    background-image: url(right.png);
    right: -12px;
    left: auto;
  }
  .tip.up:before,
  .tip.down:before {
    width: 100%;
    height: 8px;
    background-image: url(up.png);
    left: auto;
    top: -12px;
  }
  .tip.down:before {
    background-image: url(down.png);
    top: auto;
    bottom: -12px;
  }
  /* bump the content away from the edges - cannot use padded because it messes with the
   * height: 100%; display.
   */
  .tip > * {
    margin: 0 10px 3px 10px;
  }
  .tip > *:first-child {
    margin-top: 10px;
  }
  .tip > *:last-child {
    margin-bottom: 10px;
  }