/* SYNTAX <span class="tt">OUTSIDE<span class="tooltip" >Tooltip Content</span></span>
*/

span.tt{
    position:relative;
    z-index:24;

    text-decoration:none;
z-index:10;
cursor:pointer;
width:200px;
}

span.tt a{
    position:relative;
    z-index:24;

    text-decoration:none;
z-index:10;
cursor:pointer;
}

span.tt span{ display: none;


 }



span.tt:hover{ z-index:25; color: red; background:transparent;
width:auto;span:4px 4px 4px 4px;color:navy

cursor:pointer;}

span.tt:hover span.tooltip{

cursor:pointer;

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

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

font:italic bold 10pt/12pt times new roman;

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