/* -----------------------------
 * :: CSS Tooltip
 * -----------------------------
 * EXAMPLE of USE
 * <table><tr><td class=".tb_tooltip"><a href="${URL}">Avail<span>Network&nbsp;Availability</span></a></td></tr></table>
 *
 * works in Firefox and IE6 with slight differences
 */
 
 /* SLA Metrics */
.slametrics { font: normal 10px/12px verdana; border: 1px solid black;}
.metrics_header { text-align: center; font-weight: bold; }
.metrics_good { text-align: right; background-color: lightgreen; font: normal 10px/12px verdana; }
.metrics_missed { text-align: right; background-color: yellow; font: normal 10px/12px verdana; }
.metrics_target { text-align: right; background-color: #cccccc; font: normal 10px/12px verdana; }

/* Toolbox Widgets */
.noUnderline { text-decoration: none; }
.tb_tooltip { font: normal 10px/12px verdana; }
.tb_tooltip a { 
	text-decoration: none;
	color: white;
}
.tb_tooltip a:hover {
	background-color: #EBEEF3;
	text-decoration: none;
}  
.tb_tooltip a:link {
	text-decoration: none;
	color: white;
}
.tb_tooltip a:link span{ display: none; }
.tb_tooltip a:visited span{ display: none; }
.tb_tooltip a:hover span {
	position: absolute;
	max-width: 300px;
	margin: 20x 50px 0px -10px;
	padding: 2px 2px 2px 2px;
	border: 1px solid black;
	background-color: lightyellow;
	color: black;		
	font: normal 10px/12px verdana;
	text-align: left;
	text-decoration: none;
	display: block;
}


/* et cetera */
a.info{
    position: relative;
    z-index: 99;
    text-decoration: none;
}
a.info:hover{ z-index: 100; background-color: #000000; }
a.info span{ display: none; }
a.info:hover span{
	color: #555555;		
    display: block;
    position: absolute;
    top: -2px; left: 20px;
	padding: 2px 2px 2px 2px;
	border: 1px solid black;
	font: normal 10px/12px verdana;	
	text-align: left;	
    text-decoration: none;
    background-color: lightyellow;
}