/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;
}
/* override the arrow image of the tooltip */
.tooltip.bottom {
	background:url(black_arrow_bottom.png);
	padding-top:40px;
	height:55px;
}

.tooltip.bottom {
	background:url(black_arrow_bottom.png);
}


<!-- use gif image for IE -->
<!--[if lt IE 7]>

.tooltip {
	background-image:url(black_arrow.gif);
}

<![endif]-->

<!-- use gif image for IE -->
<!--[if lt IE 7]>
<style>
.tooltip {
	background-image:url(black_arrow.gif);
}

.tooltip.bottom {
	background:url(black_arrow_bottom.gif);
}
<![endif]-->