/*Infobox (Tooltips)*/
a.info, a.info1
	{ position:relative; /*this is the key*/
		z-index:240; background-color:#fff; width:1em; margin-left: 0.6em; margin-right: 1em; padding: 0 0.3em 0.1em; border: solid 1px #ccc; 
		color:#333; font-size: 0.9em; font-weight: bold; /*font-family: "Times New Roman", Times, serif;*/ text-decoration:none; }
a.info1 { top:0.5em; }
a.info:hover, a.info1:hover
	{z-index:250; background-color:#ffffd5; color:#000; }
a.info span, a.info1 span
	{display: none}
a.info:hover span, a.info1:hover span
	{ /*the span will display just on :hover state*/ display:block; position:absolute;
		border:1px solid #ccc; background-color:#ffffd5; 
		font-size: 1em; color:#000; text-align: left; }
a.info:hover span
	{ top:0.5em; left:2.7em; width:17em; padding: 0.2em 0.5em;}
a.info1:hover span
	{ top:2.7em; left:0.5em; width:17em; padding: 0.2em 0.5em;}

a.info, a.info:hover, a.info span, a.info:hover span
a.info1, a.info1:hover, a.info1 span, a.info1:hover span
        { font-weight: normal; }
/* source: http://psacake.com/web/jl.asp 
...
What is a tooltip? <a class=info href="#">This is a tooltip <span>an aiding text that appears just when you roll on with the mouse</span></a>. 
The basic idea comes from Eric Meyer's <a class=info href="http://www.meyerweb.com/eric/css/edge/popups/demo.html"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> 
...
*/