@charset "utf-8";
div.chartSelector {
	margin: 0px 0px .5em 0px;
	padding: 0px;
	border: none;
	/*float: left;*/
	width: 100%;
}
div.chartSelector h2 {
	background-color: #069;
	color: #FFF;
	font-size: 110%;
	line-height: 150%;
	text-indent: 5px;
	text-transform: capitalize;
	padding: 0px;
	margin: 0px 0px 1em;
	display: block;
}
 div.chartSelector label.nodisplay, 
 div.chartSelector .nodisplay, .nodisplay {
	display: none;
}
div.chartSelector label {
	/*color: #585858;*/
	text-transform: capitalize;
	display: block;/**/
	margin-top: 2px;
	width: 5em;
	text-align: right;
	margin-right: .5em;
	float:left;
}
div.chartSelector select { /* inline-block creates issue for IE6 and early FF */
	width: 14.5em;
	float: left;
	margin-left: 3px;
	/* border: thin #D0D0D0 solid; Is it appropriate to start overriding default form appearance? */
}
div.chartSelector p {
	width: 27%;
	float: left;
	margin-top: 0px;
	margin-right: 2%;
}
div.chartSelector p.option {
	width: 15em;
	float: left;
	background-color: #F0F0F0;
	color: #585858;
	margin: 0px;
	margin-left: 3px;
	/*margin-bottom: .3em;*/
	text-indent: 5px;
	border: 1px solid #D0D0D0;
}
div.chartSelector div {
	width: 70%;
	float: left;
}
div.chartSelector div div {
	width: 22em;
	float: left; /* Keeps floated content from extending beyond div */
}
div.chartSelector div div {
	width: 100%;
	margin-bottom: 0.5em;
	float: right;
	clear: both;
}
div.chartSelector div div.tz_div {
	margin-bottom: 1em;
}
div.chartSelector div.submitButton{
	display: block;
	/*float: left;*/
	position: relative; /* Define new reference frame for input button */
}
div.chartSelector div.submitButton input {
	width: 10.5em;
	position: relative; /* Use relative positioning to move button to right so it aligns with dropdowns */
	left: 5em;
	margin: 0px 0em 0px 3px;
	border: none;
	color: #585858;
	font-weight: bold;
	/* padding: 6px 8px 6px 25px;*/
	padding: 0.5em 0.5em 0.5em 2em;
	background: url("/images/Animator/updateNo.png") 8px 50% no-repeat #DBDBDB;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;	
}
div.chartSelector div.submitButton input.update {
	background: url("/images/Animator/updateYes.png") 8px 50% no-repeat #CCC;
	color: #000;
}
div.animatorcontainer { 
	width: 100%; /* This depends on the page the animator is used in and should be overridden there. */
	position: relative; /* This may be required so that map lays out correctly.  Map requires that some containing object not be static */
	min-height: 500px; /* This ensures that the footer doesn't overlay the display area.  It is overridden when Javascript is available */
	clear: both;
}
div.animatorcontainer div h3 {
	margin-left: 3px;
}
div.animatorcontainer div.controls {
	background-color: #585858; /* Dark */
	color: #FFF;
	float: left;
	width: 100%;
}
div.animatorcontainer div.controls a {
	background-color: #585858; /* Dark */
	color: #FFF;
}
div.animatorcontainer div.controls a.button {
	display: block;
	float: left;
	margin-top: .5em;
	margin-left: .3em;
	width: 35px;
	height: 20px;
	text-indent: -999em;
	overflow: hidden;
	color: #000;
	background: url("/images/Animator/Animator.buttons.png") 0px -20px no-repeat #999;
}
div.animatorcontainer div.controls a.stepback {
	background-position: 0px 0px;
}
div.animatorcontainer div.controls a.stepback:hover {
	background-position: 0px -20px;
}
div.animatorcontainer div.controls a.stepforward {
	background-position: -35px 0px;
}
div.animatorcontainer div.controls a.stepforward:hover {
	background-position: -35px -20px;
}
div.animatorcontainer div.controls a.stop {
	background-position: -70px 0px;
}
div.animatorcontainer div.controls a.stop:hover {
	background-position: -70px -20px;
}
div.animatorcontainer div.controls a.play {
	background-position: -105px 0px;
}
div.animatorcontainer div.controls a.play:hover {
	background-position: -105px -20px;
}
div.animatorcontainer div.controls a img {
	vertical-align: middle;
}
div.animatorcontainer div.controls p {
	margin: 0px 0.5em 0px 5em;
	padding-bottom: 0.5em;
	padding-left: 2px;
	padding-top: 0.5em;
	float: left;
	font-size: 90%;
	display: inline; /* Fixes IE5 double margin bug */
}
div.animatorcontainer div.controls p.controls {
	float: left;
	margin: 0px;
	padding-top: 0px;
}
div.animatorcontainer div.controls p.branding {
	float: right;
	margin: 0px 5em;
}
div.animatorcontainer .onscreen {
	display: block;
}
div.animatorcontainer div.controls a img {
	margin: 4px 2px 0px;
}
div.animatorcontainer ul.periodlist, div.animatorcontainer ul.periodlist ul {
	padding-left: 0px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
}
div.animatorcontainer ul.periodlist {
	margin: 0px;
}
div.animatorcontainer div.periodlist {
	width: 100%;
	background-color: #D0D0D0;
	float: left;
}
div.animatorcontainer ul.periodlist ul {
/* 	border-top: none; */
	margin: 0px;
/* 	border: solid 1px #E0E0E0; Light-Medium */
	color: #585858; /* Dark */
}
div.animatorcontainer ul.periodlist li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	display: inline; /* Gets rid of bullets */
	float: left; /* Allows list to appear on horizontal line */
	text-align: left;
	padding: 1px 0px;
/* 	margin: 0px -1px; Set negative margin so there is space for border. */
	width: auto;
/* 	border-right: solid 1px #E0E0E0; Light-Medium */
/* 	border-bottom: none; */
/* 	border-top: none; */
/* 	border-left: solid 1px #D0D0D0; Dark-Medium */
	background-color: #D0D0D0; /* Light-Medium */
}
div.animatorcontainer ul.periodlist li:first-child {
/* 	border-left: solid 1px #E0E0E0; Light-Medium */
}
div.animatorcontainer ul.periodlist li.na {
	background-color: #D0D0D0; /* Dark-Medium */
}
div.animatorcontainer ul.periodlist li.units1 {
	width: 100%;
}
div.animatorcontainer ul.periodlist li.units2 {
	width: 50%;
}
div.animatorcontainer ul.periodlist li.units3 {
	width: 33.33%;
}
div.animatorcontainer ul.periodlist li.units4 {
	width: 24.95%;
}
div.animatorcontainer ul.periodlist li.units5 {
	width: 20%;
}
div.animatorcontainer ul.periodlist li.units6 {
	width: 16.66%;
}
div.animatorcontainer ul.periodlist li.units7 {
	width: 14.27%;
}
div.animatorcontainer ul.periodlist li.units8 {
	width: 12.49%;
}
/* Use for rightmost unit, so that it fills the remaining space and doesn't wrap onto following line. */
div.animatorcontainer ul.periodlist li.unitsrest {
	float: none;
	display: block;
	width: auto;
	z-index: 1;
/* 	margin: 0px; */
/* 	border-right: none; */
}
div.animatorcontainer ul.periodlist li a {
	font-weight: bold;
	text-transform: uppercase;
	text-align:center; /* Necessary because link is block element */
	text-decoration: none;
	color: #585858; /* Dark */
	display: block;
	background-color: #E0E0E0;
	margin: 0px 1px 0 0;
}
div.animatorcontainer ul.periodlist li li a {
	font-weight: normal;
	/*letter-spacing: normal; /* causing issues in IE6 as spacing is miscalculated */
/* 	padding-left: 0px; */
	background-color:#F0F0F0;
	zoom: 1;
/* TODO: display: block; here instead of in the list of p# rules? */	
}
div.animatorcontainer div.animatorimage { 
	width: 100%; 
	overflow-x: hidden; 
	padding-bottom: 1em;
	position: relative;
	clear: both;
}
div.animatorcontainer div.animatorimage div {
	position: relative;
	z-index: 1;
	width: 100%;
}
div.animatorcontainer div.animatorimage div.behind {
	position: absolute;
	top: 0;
	z-index: 2;
}
div.animatorcontainer div.animatorimage div.hidden {
	visibility: hidden;
}
div#imgStore {
	visibility: hidden;
	height: 1px;
	width: 1px;
}
div#imgStore img {
	position: absolute;
	height: 1px;
	width: 1px;
}
div.animatorcontainer div.animatorimage h2 {
	text-align: center;
	padding-bottom: 0.4em;
	background-color: #F0F0F0;
	margin-top: 0px;
}
div.animatorcontainer div.animatorimage img {
	padding: 0px;
	background-color: white;
}
/* 
div.animatorcontainer ul.periodlist li div {
	left: 2px;
	right: 0px;
	margin-top: 2px;
	text-align: left;
	display: none;
	background-color: white;
	position: absolute;
/* 	border-bottom: 1px solid #006699; *
}
div.animatorcontainer ul.periodlist li div h2 {
	padding-bottom: 0.4em;
	margin-bottom: 0.4em;
	padding-left: 4px;
}
div.animatorcontainer ul.periodlist li div img {
	padding: 6px 0px 0px 3px;
	background-color: white;
}
 */
div.animatorcontainer ul.periodlist li li {
	font-size: 90%;
	overflow: hidden;
	padding-bottom: 0;
}
div.animatorcontainer ul.periodlist li.activegroup li.active a
{
	color: #FFFFFF;
	display: block;
	background-color: #585858; /* Dark */ 
}
div.hidden {
	visibility: hidden;
}
div.chartSelector form:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* IE6 Specific styling.  Each rule must be preceded by * html */
/* * html div.animatorcontainer ul.periodlist li li div.imgFrame,  */
/* * html div.animatorcontainer ul.periodlist li li div.imgFrame h2{ 
/*	IE6 does not inherit box size from correct element so it is necessary to manually set width
/* 	width: 589px; */
/* } */
/* * html div.two-column div.animatorcontainer ul.periodlist li li div.imgFrame,  */
/* * html div.two-column div.animatorcontainer ul.periodlist li li div.imgFrame h2{ 
/*	IE6 does not inherit box size from correct element so it is necessary to manually set width
/* 	width: 790px; */
/* } */
/* * html div.animatorcontainer ul.periodlist li li.units8 { width: 12.3%; } */
* html div.animatorcontainer ul.periodlist li.unitsrest {
    float: right;
    text-align: center;
    display: block;
    width: auto;
    margin: 0px auto;
    padding: 0px;
    border-right: none;
}
div.animatorcontainer ul.periodlist li.units2 { width: 49.9%\9; } /* IE6-9 may need more rules for other unit widths as well */
* html div.animatorcontainer ul.periodlist li.unitsrest a { /* IE6 rule for unitsrest */
    float: left;
    display: inline;
    margin: 1px -1px 0px 0px;
    width: auto;
}
/* html div.animatorcontainer ul.periodlist li li.unitsrest { width: 1%; } */
* html div.animatorcontainer ul.periodlist li.activegroup li.unitsrest { width: auto; }
/* * html div.animatorcontainer ul.periodlist li li div.IE6FloatAbsFix {
    position: static; height: 0px; width: 90%; line-height: 0px; 
    margin: 0px; padding: 0px; margin-top: -3px;
}
 */
* html div.chartSelector div { margin-left: -1px; }
* html div.chartSelector div.last { margin-left: 0px; }
* html div.chartSelector div h2 { margin-right: -3px; }
* html div.chartSelector div div div { margin-right: -3px; } /* IE6 duplicate characters bug workaround.  See http://www.positioniseverything.net/explorer/dup-characters.html */
/* End IE6 specific styling */
@media print {
	div.chartSelector { display: none; }
	div.animatorcontainer { 
		width: 100%;
	}
	div.animatorcontainer .onscreen {
		display: none;
	}
	div.animatorcontainer ul.periodlist, div.animatorcontainer ul.periodlist ul {
		border: none;
		height: auto;
	}
	div.animatorcontainer ul.periodlist li, div.animatorcontainer ul.periodlist li.units2, div.animatorcontainer ul.periodlist li.units3, 
	div.animatorcontainer ul.periodlist li.units4, div.animatorcontainer ul.periodlist li.units5, div.animatorcontainer ul.periodlist li.units6, 
	div.animatorcontainer ul.periodlist li.units7, div.animatorcontainer ul.periodlist li.units8, 
	div.animatorcontainer ul.periodlist li.unitsrest {
		width: 100%;
		float: none;
		/*display: block;*/
		border: none;
		margin: 0px;
	}
	div.animatorcontainer ul.periodlist li li div { /* Only show active map for printout */
		position: static;
		height: auto;
		width: 100%;
		display: none;
	}
	div.animatorcontainer ul.periodlist li li div img {
		width: 100%;
	}
	div.animatorcontainer ul.periodlist li.na {
		display: none;
	}
	div.animatorcontainer div.controls {
		display: none;
	}
	div.animatorcontainer div#imageload {
		display: none;
	}
}