#tooltip {
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.6);
  max-width: 350px;
  display: none;
  position: absolute;
  z-index: 100;
}
#tooltip.black {
  background: rgba(0,0,0,0.95);
  color: #fff;
}
#tooltip.white {
  background: rgba(255,255,255,0.95);
  color: #222;
}
#tooltip.arrow {
  width: 11px;
  height: 11px;
  position: absolute;
  background-image: url('../images/tooltip.png');
  background-repeat: no-repeat;
}
#tooltip.black.top.arrow {
  background-position: -10px -17px;
}
#tooltip.black.right.arrow {
  background-position: 5px -6px;
}
#tooltip.black.bottom.arrow {
  background-position: -6px 5px;
}
#tooltip.black.left.arrow {
  background-position: -37px -60px;
}
#tooltip.white.top.arrow {
  background-position: -39px -17px;
}
#tooltip.white.right.arrow {
  background-position: -28px -6px;
}
#tooltip.white.bottom.arrow {
  background-position: -39px 5px;
}
#tooltip.white.left.arrow {
  background-position: -50px -6px;
}



#tooltip2 {
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.6);
  max-width: 350px;
  display: none;
  position: absolute;
  z-index: 100;
}
#tooltip2.black {
  background: rgba(0,0,0,0.95);
  color: #fff;
}
#tooltip2.white {
  background: rgba(255,255,255,0.95);
  color: #222;
}
#tooltip2.arrow {
  width: 11px;
  height: 11px;
  position: absolute;
  background-image: url('../images/tooltip.png');
  background-repeat: no-repeat;
}
#tooltip2.black.top.arrow {
  background-position: -10px -17px;
}
#tooltip2.black.right.arrow {
  background-position: 5px -6px;
}
#tooltip2.black.bottom.arrow {
  background-position: -6px 5px;
}
#tooltip2.black.left.arrow {
  background-position: -37px -60px;
}
#tooltip2.white.top.arrow {
  background-position: -39px -17px;
}
#tooltip2.white.right.arrow {
  background-position: -28px -6px;
}
#tooltip2.white.bottom.arrow {
  background-position: -39px 5px;
}
#tooltip2.white.left.arrow {
  background-position: -50px -6px;
}