#tooltip {
  padding: 10px;
  border-radius: 4px;
  /*box-shadow: 0px 1px 5px rgba(0,0,0,0.6);*/
  max-width: 300px;
  display: none;
  position: absolute;
  z-index: 100;

}

#tooltip .arrow {
  width: 11px;
  height: 11px;
  position: absolute;
  background-image: url('../images/tooltip.png');
  background-repeat: no-repeat;
}



#tooltip.black {
  background: rgba(0,0,0,0.95);
  color: #fff;
}

#tooltip.black.top .arrow {
  background-position: -6px -17px;
}

#tooltip.black.right .arrow {
  background-position: 5px -6px;
}

#tooltip.black.bottom .arrow {
  background-position: -6px 5px;
}

#tooltip.black.left .arrow {
  background-position: -17px -6px;
}







#tooltip.white {
  background: rgba(45,104,44,0.95);
  color: #fff;
  margin-top:0;
  padding-top:2px;
  padding-bottom:2px;
  font-size:13px;
}

#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;
}