/* Trend Tools - Sitewide graph components */

/* Container */
.chartContainer
{
	position: relative;
	margin: 0; padding: 0 0 8px 0;
	width: auto; height: auto;
	border: 1px solid rgb(174,174,174);
}
.chartContainer h1, .chartContainer h2, 
	.chartContainer h3, .chartContainer h4
{
	margin: 0; padding: 8px;
	width: auto;
	font-size: 13px; line-height: 14px;
	background: rgb(255,255,255) url(/images/backgrounds/headerTrendTabE8E4DCtoWhite_30x60.jpg) repeat scroll left top;
	border: 0 none; border-bottom: 1px solid rgb(174,174,174);
	/* color: rgb(210,146,11); */
}

/* compare areas button */
.chartContainer .buttonTopRight
{
	position: absolute;
	top: 0; right: 0;
	margin: 0; padding: 6px 8px;
	z-index: 3;
}
.chartContainer .buttonTopRight img
{
	margin: 0; padding: 0;
	border: 0 none;
}

/** chart copy  **/
.chartContainer .copy
{
	position: absolute;
	top: 0; right: 0;
	margin: 0; padding:55px 10px 10px;
	width: 130px; height: 100%;
}
.chartContainer .tooltip  /* extends phxgrid .tooltip class */
{
	z-index: 3;
}

/** date range control **/
.dateRange
{
	position: relative;
	margin: 8px 72px; padding: 8px;
	width: auto; height: 16px;
	text-align: center; vertical-align: middle;
	background: url(/images/backgrounds/DateRangeBar_600x32.gif) top left no-repeat;
	z-index: 1;
}
.dateRange img
{
	margin: 0 4px; padding: 0;
	vertical-align: middle;
}
.dateRange img.endcap
{
	position: absolute; 
	top: 0px; right: -15px;
}
a.disabled
{
	filter: alpha(opacity=40); -moz-opacity: .40; opacity: .40;
	#color: rgb(164,214,235);
}

/* Chart Alternate views - no data and non-member */
.chartAlternate
{
	position: absolute;
	top: 30px; left: 0px;
	margin: 68px 12px 26px 70px; padding: 0;
	width: 340px; height: 188px;
}
.chartAlternate .toplayer
{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	text-align: center;
	z-index: 2;
}
.chartAlternate .background
{
	position: absolute;
	top: 0; left: 0;
	margin: 0; padding: padding: 24px 12px 12px;
	width: 100%; height: 100%;
	background: rgb(255,255,206);
	border: 1px solid rgb(64,74,79);
	filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70;
	z-index: 1;
}
.chartAlternate .lead
{
	margin: 0; padding: 24px 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px; line-height: 32px;
	font-weight: bold;
	color: rgb(80,92,98);
}
.chartAlternate .content
{
	margin: 0; padding: 10px 0;
	font-size: 12px; font-weight: bold;
	color: rgb(80,92,98);
}
.chartAlternate .button
{
	margin: 10px 0; padding: 0;
}
.nodata .lead
{
	margin-top: 36px;
	font-size: 16px; line-height: 16px;
}
.nodata .background, .heatmapNodata .background
{
	background: rgb(255,255,255);
	border-color: rgb(216,216,216);
}
.heatmapNodata .lead
{
	margin-top: 34px;
	font-size: 18px; line-height: 16px;
}

/** Foreclosure heatmap - tooltips **/
.heatmapContainer
{
	position: relative;
	margin: 0; padding: 0;
	width: auto; height: auto;
}
.chartContainer .heatmapContainer .tooltip
{
	position: absolute;	display: none;
	width: 220px;
	z-index: 2;
}
.chartContainer .heatmapContainer .tooltip .contents 
{
	position: relative;
	top: 0; left: 0;
	margin: 0; padding: 2px 5px 8px;
	width: 100%;
	background: rgb(223,235,242);
	border: 1px solid rgb(166,166,166);
	z-index: 2;
}
.chartContainer .heatmapContainer .tooltip .contents .heading
{
	margin: 0; padding: 0;
	font-size: 12px;
	color: rgb(240,2,17);
	font-weight: bold;
	clear: both;
}
.chartContainer .heatmapContainer .tooltip .contents .copy
{
	position: static;
	top: auto; right: auto;
	margin: 0; padding: 8px 0;
	width: auto; height: auto;
	font-size: 11px;
	color: rgb(64,74,79);
}
.chartContainer .heatmapContainer .tooltip .shadow 
{
	position:absolute;
	top: 3px; bottom: -3px; left: 3px; right: -3px;
	margin: 0; padding: 0;
	width: 106%;
	background: rgb(0,0,0);
	filter: alpha(opacity=42);
	opacity: 0.42; -moz-opacity: 0.42;
	z-index: 1;
}

/** Foreclosure heatmap - nonvisible states **/
.heatmapContainer .nonVisibleState
{
	position: absolute;
	margin: 0px; padding: 0.3em;
	color: rgb(255,255,255);
	font-size: 0.9em; line-height: 1em;
	font-weight: bold; 
	background: rgb(181,181,181);
	text-decoration: none;
	border: 1px solid rgb(174,174,174);
	z-index: 1;
}

/** Error Handling - Validation **/
.chartContainer .validationSummary
{
	position: relative;
	margin: 0; padding: 5px 0;
	border-top: 0 none;
	font-style:italic; font-weight: normal;
	color: rgb(128,0,0);
	text-align: center;
	z-index: 1;
}
.validationSummary .closeButton
{
	position: absolute;
	top: 0; right: 0;
	margin: 0; padding: 5px;
	width: 50px;
	font-size: 10px;
}
.validationSummary .closeButton img
{
	border: 0 none;
	vertical-align: middle;
}
.validationSummary .closeButton a
{
	color: rgb(128,0,0);
}