/* 

Tooltip CSS 

Created by: Boris Pophristov
Questions or Comments: pophristov.boris@gmail.com

HOW-TOs:

-------------------------------------------------------------------------
1. How can I add a new tooltip?

You have a table cell with date number which will look like this: 
<td><div align="center"><font size="1">24</font></div></td>

First add the tooltippar CSS class to the cell ("td") like this:
<td class="tooltippar"><div align="center"><font size="1">24</font></div></td>

Make the date number (in our case 24) an empty link and add the tooltip class to it (to the "a" tag):
<td class="tooltippar"><div align="center"><font size="1"><a href="javascript:;" class="tooltip">24</a></font></div></td>

Add a "span" tag after the date number:
<td class="tooltippar"><div align="center"><font size="1"><a href="javascript:;" class="tooltip">24<span></span></a></font></div></td>

In the "span" tag you will add the text you want the tooltip to display using the following format:
<strong>Title: </strong>Text<br> - this makes one line in the tooltip
The "strong" tag makes the text in it bold. The "br" tag means new line. You can add as many lines as you want.

Here is a finished example:
<td class="tooltippar"><div align="center"><font size="1"><a href="javascript:;" class="tooltip">24<span><strong>Event: </strong>MN Quality Conf. Committee meeting<br><strong>Time: </strong>6:00 p.m.<br><strong>Location: </strong>Minnetronix</span></a></font></div></td>

-------------------------------------------------------------------------
2. How can I change the look of the tooltips?

Below you will find the CSS rules that make the tooltips work. Some of these CSS rules also determine the look
of the tooltips.

You will see that I added comments to some of the CSS rules. You can edit those CSS rules that have comments 
after their definition. The comments will guide you through the process of editing.

Editing the CSS rules that are not commented may damage the tooltips functionality.

*/

.tooltippar {
	background-color: #C3E0FF; /* Background color of the calendar date. */

}

a.tooltip {
  z-index:24;
  position:relative;
}

a.tooltip:link, a.tooltip:visited, a.tooltip:active {
	color: #000000; /* Color of the calendar date. */
}

a.tooltip:hover {
  z-index:25;
  text-decoration: none;
  border-bottom:none;
}

a.tooltip span {
  display:none;
  text-decoration: none;
}

a.tooltip:hover span {
	position:absolute;
	top:23px;
	left:0px;
	border:1px solid #333333; /* Tooltip border settings. */
	padding:5px; /* Tooltip padding in pixels. */
	display:block;
	width:200px; /* Tooltip width in pixels. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; /* Tooltip fond size in pixels. */
	color: #000000; /* Tooltip text color. */
	background-color:#F8F8F8; /* Tooltip background color. */
	text-align: left;
}