.tip, .tip2, .tip3 {
    z-index: 100000;
    text-align: left;
    border: 1px solid #B0B1B2;
    padding: 5px 11px;
    min-width: 20px;
    max-width: 300px;
    color: #7D8594;
    background-color: #FAFAFA;
    border-bottom: 1px solid #9AA1A5;
    border-top: 1px solid #BEBEBE;
    border-left: 1px solid #9AA1A5;
    border-radius: 11px;
    box-shadow: 0 2px 0px 1px rgb(229 229 229);
}
.tip2 {
	background-color:#fff9c9;
}
.tip3 {
    background-color: #ecfde1;
    color: #104d1a;
}

.tip .tip-inner, .tip2 .tip-inner , .tip3 .tip-inner {
	font:12px/16px arial,helvetica,sans-serif;
	text-align:center;
}

.tip .tip-arrow-top, .tip2 .tip-arrow-top, .tip3 .tip-arrow-top {
	margin-top:-6px;
	margin-left:-5px; 
	top:0;
	left:50%;
	width:9px;
	height:6px;
	background:url(tip.gif) no-repeat;
}
.tip3 .tip-arrow-top {
	left:unset;
	right:17%;
	background:url(tip3.gif) no-repeat;
}
.tip2 .tip-arrow-top {
	background:url(tip2.gif) no-repeat;
}
.tip .tip-arrow-right, .tip2 .tip-arrow-right, .tip3 .tip-arrow-right {
	margin-top:-4px; 
	margin-left:0;
	top:50%;
	left:100%;
	width:6px;
	height:9px;
	background:url(tip.gif) no-repeat -9px 0;
}
.tip2 .tip-arrow-right {
	background:url(tip2.gif) no-repeat -9px 0;
}
.tip3 .tip-arrow-right {
	background:url(tip3.gif) no-repeat -9px 0;
}
.tip .tip-arrow-bottom, .tip2 .tip-arrow-bottom, .tip3 .tip-arrow-bottom {
	margin-top:0;
	margin-left:-5px; 
	top:100%;
	left:50%;
	width:9px;
	height:6px;
	background:url(tip.gif) no-repeat -18px 0;
}
.tip2 .tip-arrow-bottom {
	background:url(tip2.gif) no-repeat -18px 0;
}
.tip3 .tip-arrow-bottom {
	background:url(tip3.gif) no-repeat -18px 0;
}
.tip .tip-arrow-left, .tip2 .tip-arrow-left, .tip3 .tip-arrow-left {
	margin-top:-4px; 
	margin-left:-6px;
	top:50%;
	left:0;
	width:6px;
	height:9px;
	background:url(tip.gif) no-repeat -27px 0;
}
.tip2 .tip-arrow-left {
	background:url(tip2.gif) no-repeat -27px 0;
}
.tip3 .tip-arrow-left {
	background:url(tip3.gif) no-repeat -27px 0;
}