div#container {
	width: 500px;
	margin: 0 auto
	}

/*---------- bubble tooltip -----------*/
a.tt {
    position: relative;
    z-index: 24;
	font-weight: bold;
    text-decoration: none;
	}
a.tt span {
	display: none;
	}

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover {
	z-index: 25;
	color: #AAAAFF;
	background:;
	}
a.tt:hover span.tooltip {
	display: block;
	position: absolute;
	top: 0px;
	left: 0;
	padding: 15px 0 0 0;
	width: 200px;
	color: #333333;
	font-size: 11px;
	line-height: 12px;
	text-align: left;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
	text-decoration: none;
	font-weight: normal;
	}
a.tt:hover span.top {
	display: block;
	padding: 30px 8px 0;
    background: url(../../img/bubble/bubble.gif) no-repeat top;
	}
a.tt:hover span.middle { /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../../img/bubble/bubble_filler.gif) repeat bottom; 
	}
a.tt:hover span.bottom {
	display: block;
	padding: 3px 8px 10px;
	color: #548912;
    background: url(../../img/bubble/bubble.gif) no-repeat bottom;
	}
	
/*------ for a bigger bubble ------*/
a.tt:hover span.tooltip-big {
	display: block;
	position: absolute;
	top: 0px;
	left: 0;
	padding: 15px 0 0 0;
	width: 350px;
	color: #333333;
	font-size: 11px;
	line-height: 12px;
	text-align: left;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
	text-decoration: none;
	font-weight: normal;
	}
a.tt:hover span.top-big {
	display: block;
	padding: 30px 8px 0;
    background: url(../../img/bubble/bubble_bigger.gif) no-repeat top;
	}
a.tt:hover span.middle-big { /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../../img/bubble/bubble_filler_bigger.gif) repeat bottom; 
	}
a.tt:hover span.bottom-big {
	display: block;
	padding: 3px 8px 10px;
	color: #548912;
    background: url(../../img/bubble/bubble_bigger.gif) no-repeat bottom;
	}