/* Start Pearls code, uses background gif due to IE6 not supporting dotted underlines */		
span.pearllink				{ font-size: 100%; background-image: url(../images/pearl_dots.gif); background-position: bottom left; background-repeat: repeat-x; color: #0000FF; text-decoration: none; display: inline-block;}
span.pearllink a			{ font-size: 100%; text-decoration: none; color: #0000FF; }
span.pearllink a:hover		{ background-color: #eee; background-image: url(../images/pearl_dots.gif); background-position: bottom left; background-repeat: repeat-x; color:#fff; text-decoration: none; color: #0000FF;}

span.pearllink a:link span	{ display: none; text-decoration: none; color: #0000FF; }
span.pearllink a:visited span { display: none; text-decoration: none; color: #0000FF; }
span.pearllink a:hover span { position: absolute; margin:5px 0px 0px 0px; background-color: #ffffff; width:250; padding: 2px 10px 2px 10px; border: 1px solid #C0C0C0;  font: normal xx-small verdana; color: #000; text-align: left; display: block; text-decoration: none; }

a.pearllink{
	position:relative; /*this is the key*/
	border-bottom: 1px dashed #000000;
	z-index:24;
	color: #0000FF;
	text-decoration:none;
}

a.pearllink:hover{
	z-index:25;
	background-color: #eee;
	text-decoration: none;
	color: #0000FF;
}

a.pearllink span{
	display: none;
}

a.pearllink:hover span{ /*the span will display just on :hover state*/
	display:block;
	position:absolute;
	top: 1em;
	left: 2em;
	margin:5px 0px 0px 0px;
	padding: 2px 10px 2px 10px;
	width: 250px;
	border: 1px solid #C0C0C0;
	background-color: #ffffff;
	text-align: left; 
	color: #000;
	font: normal xx-small verdana;
}