/* ********************   pure css tooltip like acronym, abbreviation  ************* */
/* ********************   credit: http://www.madaboutstyle.com/tooltip2.html  ****** */
/* ********** usage:   <a class="info" href=""><strong>the abbreviation</strong><span>The explanation can be long.</span></a> **** */
a.info {
	border-bottom: 1px dashed #000;
	position: relative; /*this is the key*/
	text-decoration: none;
	cursor: help;
	}
* html a.info { /* Star HTML Selector bug (IE only) */
	z-index: 24;
	}
a.info strong {
	white-space: nowrap;
	}
a.info:link, a.info:visited, a.info:hover, a.info:active {
	color: #000; text-decoration: none;
	}
a.info:hover {
	background: transparent;
	}
* html a.info:hover { /* Star HTML Selector bug (IE only) */
	z-index: 25;
	}
a.info span {
	display: none;
	}
a.info:hover span { /*the span will display just on :hover state*/
	background-color: #FFFFE1;
	padding: 4px; border: 1px #000 solid;
	width: 22em;
	display: block;
	position: absolute;
	top: 2em; left: 0em; 
	z-index: 99; /* covers other info links */
	font-weight: normal; line-height: 1.4; color: #000; text-decoration: none;
	}