/* SYNTAX <span class="tt">Tooltip to be shown<span class="tooltip" >Regular text</span></span>*/

span.tt{
    position:relative;
    z-index:24;
    color:blue;
    text-decoration:none;
z-index:10;
cursor:pointer;
}
span.tt span{ display: none;


 }



span.tt:hover{ z-index:25; color: red; background:tomato;
width:auto;color:yellow;

cursor:pointer;}

span.tt:hover span.tooltip{

cursor:auto;

    display:block;
position:absolute;
  top:15px;left:20px;
background:lightgreen;border:solid 1px navy;

	padding: 5px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:100);
	KHTMLOpacity: 1;
	MozOpacity: 1;
	opacity: 1;
z-index:10;



}
span.tt:hover span.top{
	display: block;
	background: url('bubble.gif') no-repeat top;; padding-left:8px; padding-right:8px; padding-top:30px; padding-bottom:0;

z-index:100;
border:solid 1px red;

}
span.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	background: url('bubble_filler.gif') bottom;; padding:5px;
z-index:100;

border:solid 1px red;

}
span.tt:hover span.bottom{
	display: block;
	color: #548912;
    background: url('bubble.gif') no-repeat bottom;; padding-left:8px; padding-right:8px; padding-top:3px; padding-bottom:10px;
z-index:100;
}