/*
<a class="infoTooltip" href="#">Why?<span>This is the tool tip message.</span></a>
*/

/* tooltip - replace alt tags */
a.infoTooltip {
    position:relative; /*this is the key*/
    z-index:24; /*24*/
    text-decoration:none;
	font-family:"Futura Lt BT", Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000000;
	}
a.infoTooltip:hover {
	z-index:25; 
	width:auto;
	}
a.infoTooltip span {
	display: none;
	}
a.infoTooltip:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-38px;
	left:0px;
    background-color:#cccccc;
	opacity:0.9;filter:alpha(opacity=90); 
    text-align: left;
	padding:3px;
	text-align:center;
	color:#000000;
	font-weight:normal;
	}



/* tooltip 2 - for main page tabs */
a.infoTooltip2_1, a.infoTooltip2_2, a.infoTooltip2_3, a.infoTooltip2_4, a.infoTooltip2_5 {
    position:relative; /*this is the key*/
    z-index:24; /*24*/
    text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	line-height:18px;
	}
a.infoTooltip2_1:hover, a.infoTooltip2_2:hover, a.infoTooltip2_3:hover, a.infoTooltip2_4:hover, a.infoTooltip2_5:hover {
	z-index:25; 
	}
a.infoTooltip2_1 span, a.infoTooltip2_2 span, a.infoTooltip2_3 span, a.infoTooltip2_4 span, a.infoTooltip2_5 span {
	display: none;
	}
a.infoTooltip2_1:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-240px;
	left:0px;
	width:460px; 
	height:160px;
    background-color:#000000;
	opacity:0.8;filter:alpha(opacity=80); 
    text-align: left;
	padding:10px;
	text-align:left;
	}
a.infoTooltip2_2:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-240px;
	left:-97px;
	width:460px; 
	height:160px;
    background-color:#000000;
	opacity:0.8;filter:alpha(opacity=80); 
    text-align: left;
	padding:10px;
	text-align:left;
	}
a.infoTooltip2_3:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-240px;;
	left:-194px;
	width:460px; 
	height:160px;
    background-color:#000000;
	opacity:0.8;filter:alpha(opacity=80); 
    text-align: left;
	padding:10px;
	text-align:left;
	}
a.infoTooltip2_4:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-240px;
	left:-291px;
	width:460px; 
	height:160px;
    background-color:#000000;
	opacity:0.8;filter:alpha(opacity=80); 
    text-align: left;
	padding:10px;
	text-align:left;
	}
a.infoTooltip2_5:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-240px;
	left:-388px;
	width:460px; 
	height:160px;
    background-color:#000000;
	opacity:0.8;filter:alpha(opacity=80);
    text-align: left;
	padding:10px;
	text-align:left;
	}
/*
<a class="infoTooltip2" href="#">Why?<span>This is the tool tip message.</span></a>
*/