/* CSS only needed for the demo */
#mainContainer{
	/*width:630px;*/
	border-left: 1px solid #317082;	
	border-right: 1px solid #317082;	
	margin: 0 auto;	/* Center align content, equivalent to margin-left:auto;margin-right:auto; */
	text-align: left;	/* Override inherited text-align:center from the body tag */
	background-color: #FFF;
	/*height:100%;
	padding: 0px;
	float: left;*/
}

#menuColumn{
	/*width:160px;*/
	float: left;
	padding: 0px;
	font-size: 11px;
}
#mainContent{
	/*width:440px;*/
	float: left;	
}

.oddRow{
	background-color: #FFF;
}
.evenRow{
	background-color: #EEE;
}

.productTable{
	border: 3px double #000;
}
h3{
	font-size: 18px;
	font-weight: bold;
	color: #fde445;
	padding: 5px 0px 5px 0px;
	margin: 0px;
}
.style-tooltiptext {
	font-size: 11px;
	color: #FFF;
}
/* End css for the demo */

/* CSS needed for the script */

#ajax_tooltipObj{
	z-index: 1000000;
	text-align: left;
}
#ajax_tooltipObj div{
	position: relative;
}

/* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */
p {
	margin: 0px;
	padding: 0px;
}
#ajax_tooltipObj .ajax_tooltip_arrow{	/* Left div for the small arrow */
	background-image: url(../images/tooltiparrow.png);
	width: 16px;
	position: absolute;
	/*left: 0px;
	top: 0px;*/
	background-repeat: no-repeat;
	background-position: center left;
	z-index: 1000005;
	padding-top: 22px;
	padding-bottom: 10px;
	color: #FFFFFF;
	margin-left: 12px;
}

#ajax_tooltipObj .ajax_tooltip_content{
	border: 0px solid #ff2525;	/* Border width */
	left: 28px;	/* Same as border thickness */
	/*top: 0px;*/
	position: absolute;
	width: 190px;	/* Width of tooltip content */
	/*height:62px;*/	/* Height of tooltip content */
	background-color: #6d0500;	/* Background color */
	padding: 10px 15px 10px 15px;	/* Space between border and content */
	font-size: 11px;	/* Font size of content */
	overflow: hidden;	/* Hide overflow content */
	z-index: 1000001;
	color: #FFFFFF;
	vertical-align: top;
}