#hintbox{ /*CSS for pop up hint box */
position:absolute;
background-color: lightyellow;
width: 100px; /*Default width of hint.*/ 
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

/*---------- bubble tooltip -----------*/
div.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    text-decoration:none;
}

/*background:; ie hack, something must be changed in a for ie to execute it*/
div.tt{ z-index:25; color: #aaaaff; background:;}
div.tt span.tooltip{
    display:block;
    position:relative;
    top:0px; left:0;
	padding: 0px 0 0 0;
	width:200px;
	color: #000000;
    text-align: center;
}
div.tt span.tooltip2{
    display:block;
    position:absolute;
	width:150px;
	color: #000000;
    text-align: center;
}
div.tt span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(../imgs/bt.gif) no-repeat top;
}
div.tt span.top2{
	display: block;
	padding: 20px 8px 0;
    background: url(../imgs/bt2.gif) no-repeat top;
}
div.tt span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../imgs/bt.gif) repeat bottom; 
}
div.tt span.bottom{
	display: block;
	padding:3px 8px 10px;
    background: url(../imgs/bt.gif) repeat bottom;
}
div.tt span.bottom2{
	display: block;
	padding:3px 8px 10px;
    background: url(../imgs/bt2.gif) repeat bottom;
}
div.hintBubble{ z-index:25; left:-5px}
div.hintBubble span.tooltip{
    display:block;
    position:relative;
    top:0px; left:0;
	padding: 0px 0 0 0;
	width:200px;
	color: #000000;
    text-align: center;
}
div.hintBubble span.top{
	text-align: right;
	display: block;
	padding: 30px 8px 0;
    background: url(../imgs/bt.gif) no-repeat top;
}
div.hintBubble span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../imgs/bt.gif) repeat bottom; 
}
div.hintBubble span.bottom{
	display: block;
	padding:3px 8px 10px;
    background: url(../imgs/bt.gif) no-repeat bottom;
}