/* basic usage piscoToolTip with id by default --- */
.tooltip {position: absolute;}
.tooltip .cont {width: 300px; padding: 10px; background: #2E64FE; opacity: 1; color:#fff; font-family: Verdana, Geneva, sans-serif; font-size: 12px; border-radius:10px;}
.tooltip .arrow {width: 0; height: 0; position: absolute; display: block; opacity: .9;}
.tooltip .arrowTop {border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #2E64FE; bottom: -5px; left: 10px;}
.tooltip .arrowBottom {border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #2E64FE; top: -5px; left: 10px;}
.tooltip .arrowLeft {border-right: 5px solid #2E64FE; border-top: 5px solid transparent; border-bottom: 5px solid transparent; top: 50%; left: -5px; margin-top:-3px}
.tooltip .arrowRight {border-left: 5px solid #2E64FE; border-top: 5px solid transparent; border-bottom: 5px solid transparent; top: 50%; right: -5px; margin-top:-3px}


/* custom design --- */
.tooltip2 {position: absolute;}
.tooltip2 .cont {margin-left:14px; padding: 0 10px 0 0; line-height: 58px; background: url(../images/css/bg-bubble1.png) center right no-repeat; color:#8f9da4; font-size: 13px; border-radius:3px; font-weight: bold; text-shadow: 0 1px 1px #fff;}
.tooltip2 .arrow {width: 15px; height: 58px; position: absolute; display: block; background: url(../images/css/arrow-bubble1.png) center left no-repeat; position: absolute; top: 0; left:0;}