@font-face {
	font-family: 'Quicksand Regular';
	src: url(https://www.tceq.texas.gov/assets/public/implementation/air/am/modeling/tx/mpe/font/Quicksand-Regular.otf);
}

div#main {
	width: 100%;
	padding: 0px 0px 15px 0px;
	border: 0px solid #aaa;
}

div#main select {
	display: inline-block;
	padding: 2px;
	height: 24px;
}
div#main label {
	margin-bottom: 0px;
}

/* chart block wrapper */
#chart {
	clear: both;
	position: relative;
}

/* chart plot layer */
#chart > div:first-child {
	opacity: 1.0;
}

#content input {
	margin-right: 5px;
}

#hc_wrapper {
	position: relative;
	width: 905px;
}

#hc_container {
	position: relative;
	margin-bottom: 5px;
	width: 600px;
	height: 602px;
	z-index: 10;
	overflow: hidden;
}

#hc_wrapper #sct_side_bar {
	position: absolute;
	top: 2em;
	right: 0px;
	width: 270px;
}
#hc_wrapper #sct_side_bar .option_block_side {
	width: 100%;
	padding: 0;
	margin-bottom: 20px;
}
.option_item {
	margin-top: 10px;
}
.option_item#sliders {
	display: none;
	margin-top: 25px;
}
.option_item select {
	width: 265px;
}
.option_item input[type="checkbox"] {
	vertical-align: text-bottom;
	margin-right: 5px;
}


/* sliders */
.option_item#sliders > div:nth-child(odd) {
	height: 23px;
}
.slider_main {
	position: relative;
	height: 35px;
}
.slider_main div.slider {
	top: 5px;
	left: 25px;
	width: 220px;
}
/*
.slider_main input {
	display: none;
	position: absolute;
	border: 0;
	font-size: 80%;
	width: 18px;
	text-align: center;
	margin-top: -16px;
	margin-left: 10px;
	background-color: rgba(255,255,255,0);
}
.slider_main#date_slider input {
	width: 50px;
}
*/
.slider_main #slider-date > span,
.slider_main #slider-hour > span {
	padding: 0px;
	margin-left: -1.45em;
	width: 3.5em;
	height: 1.5em;
	line-height: 1.5em;
	font-size: 75%;
	color: #555;
	text-align: center;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
}
.slider_main #slider-hour > span {
	width: 2.0em;
}
input#hinvert {
	margin-left: 30px;
}
img.tooltip {
	display: inline-block;
	position: relative;
	top: 0px;
	opacity: 1;	
}
.ui-tooltip {
	width: 8.5em;
	font-size: 0.98em;
	line-height: 1.1em;
}
input#dhrange {
	position: relative;
	top: 5px;
	left: 205px;
	padding: 0 5px;
	height: 20px;
	line-height: 10px;
}


/* site selecton */
select#site {
	width: 770px;
	vertical-align: bottom;
}

#animation_control {
	position: relative;
	top: 0.4em;
	left: 0.2em;
}
#animation_control #playspeed {
	position: relative;
	top: -0.4em;
}
#animation_control .buttons {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 2px;
	background-image: url('https://www.tceq.texas.gov/assets/public/implementation/air/am/modeling/tx/mpe/graphics/buttons.png');
	background-repeat: no-repeat;
	border: 0px solid #f00;
}
#animation_control .buttons#first {
	background-position: -80px 0px;
}
#animation_control .buttons#first:active {
	background-position: -80px -20px;
}
#animation_control .buttons#last {
	background-position: -100px 0px;
}
#animation_control .buttons#last:active {
	background-position: -100px -20px;
}
#animation_control .buttons#prev {
	background-position: 0px 0px;
}
#animation_control .buttons#prev:active {
	background-position: 0px -20px;
}
#animation_control .buttons#next {
	background-position: -20px 0px;
}
#animation_control .buttons#next:active {
	background-position: -20px -20px;
}
#animation_control .buttons#forward {
	background-position: -60px 0px;
}
#animation_control .buttons#forward:active {
	background-position: -60px -20px;
}
#animation_control .buttons#backward {
	background-position: -40px 0px;
}
#animation_control .buttons#backward:active {
	background-position: -40px -20px;
}
#animation_control .buttons#pause {
	background-position: -120px 0px;
}
#animation_control .buttons#pause:active {
	background-position: -120px -20px;
}
#animation_control .buttons#stop {
	background-position: -140px 0px;
}
#animation_control .buttons#stop:active {
	background-position: -140px -20px;
}
#animation_control .buttons#fast {
	background-position: -160px 0px;
	width: 19px;
	margin-left: -1px;
}
#animation_control .buttons#fast:active {
	background-position: -160px -20px;
}
#animation_control .buttons#slow {
	background-position: -179px 0px;
	width: 19px;
	margin-left: 0px;
	margin-right: -1px;
}
#animation_control .buttons#slow:active {
	background-position: -179px -20px;
}
#animation_control .buttons#noloop {
	background-position: -198px 0px;
	width: 57px;
	margin: 0 4px;
}
#animation_control .buttons#loop {
	background-position: -198px -20px;
	width: 57px;
	margin: 0 4px;
}
#animation_control .buttons#speed {
	background-position: -255px 0px;
	width: 35px;
	margin-left: 4px;
	margin-right: 0px;
}

/* site map */
#site_map {
	display: block;
	margin-top: 5px;
	width: 910px
	height: 400px;
	border: 1px solid #888;
}

#site_map #map_canvas {
	display: inline-block;
	width: 760px;
	height: 398px;
	border-right: 1px solid #888;
}

#site_map #map_control {
	display: inline-block;
	width: 130px;
	margin: 5px 0 0 5px;
	vertical-align: top;
}
#site_map #map_control #o3area {
	margin-top: 15px;
}

#site_map #map_control #site_center {
	margin-top: 20px;
}
#site_map #map_control #site_center > div {
	display: inline-block;
	vertical-align: top;
}
#site_map #map_control #site_center > div:first-child {
	width: 15px;
}
#site_map #map_control #site_center > div:first-child > input {
	vertical-align: middle;
}
#site_map #map_control #site_center > div:last-child {
	width: 100px;
}

#site_map .markerlabel,
#site_map .markerlabel_selected {
	font-weight: bold;
	font-size: 9px;
	color: #fff;
	line-height: 9px;
	background-color: #aa0000;
	padding: 1px;
	border-radius: 1px;
	cursor: pointer;
}
#site_map .markerlabel_selected {
	background-color: #005500;
}



/* instruction layer */

/*
#ins_button {
	float: right;
	width: 200px;
	height: 22px;
	line-height: 22px;
	padding: 0 10px;
	text-align: center;
	background-color: #ddd;
	color: #003087;
	font-weight: bold;
	cursor: pointer;
}
#ins_button:hover {
	background-color: #003087;
	color: #fff;
}
*/

#ins_button {
	float: right;
	width: 200px;
	margin: 5px 0 10px 0;
}

#chart > div:last-child {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 1040px;
	background-color: rgba(0,0,0,0.2);
	color: #008;
	font-weight: bold;
	font-family: 'Quicksand Regular', cursive, sans-serif;
	font-size: 110%;
}
#chart > div:last-child > div {
	position: absolute;
	border: solid 2px #ff0;
	border-radius: 10px;
	text-align: center;
	color: #fff;
}
#chart > div:last-child div > div {
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	border-radius: 10px;
	line-height: 110%;
	padding: 2px 4px;
}
#chart > div:last-child div svg {
	position: absolute;
}
#chart > div:last-child div#ins_eps {
	top: 42px;
	left: 635px;
	width: 270px;
	height: 40px;
}
#chart > div:last-child div#ins_eps > div {
	top: 0px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_eps > svg {
	top: 15px;
	left: -20px;
	height: 18px;
}
#chart > div:last-child div#ins_run {
	top: 100px;
	left: 635px;
	width: 270px;
	height: 40px;
}
#chart > div:last-child div#ins_run > div {
	top: -5px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_run > svg {
	top: 15px;
	left: -20px;
	height: 18px;
}
#chart > div:last-child div#ins_chem {
	top: 156px;
	left: 635px;
	width: 270px;
	height: 40px;
}
#chart > div:last-child div#ins_chem > div {
	top: 0px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_chem > svg {
	top: 15px;
	left: -20px;
	height: 18px;
}
#chart > div:last-child div#ins_mavg {
	top: 210px;
	left: 635px;
	width: 270px;
	height: 40px;
}
#chart > div:last-child div#ins_mavg > div {
	top: 0px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_mavg > svg {
	top: 15px;
	left: -20px;
	height: 18px;
}
#chart > div:last-child div#ins_spatial {
	top: 265px;
	left: 635px;
	width: 270px;
	height: 40px;
}
#chart > div:last-child div#ins_spatial > div {
	top: -5px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_spatial > svg {
	top: 15px;
	left: -20px;
	height: 18px;
}
#chart > div:last-child div#ins_qq {
	top: 315px;
	left: 635px;
	width: 270px;
	height: 18px;
}
#chart > div:last-child div#ins_qq > div {
	top: -6px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_qq > svg {
	top: 5px;
	left: -20px;
	height: 18px;
}
#chart > div:last-child div#ins_slider {
	display: none;
	top: 375px;
	left: 635px;
	width: 270px;
	height: 160px;
}
#chart > div:last-child div#ins_slider > div {
	top: 20px;
	left: -180px;
	width: 160px;
}
#chart > div:last-child div#ins_slider > svg {
	top: 60px;
	left: -20px;
	height: 18px;
}

#chart > div:last-child div#ins_export {
	top: 2px;
	left: 576px;
	width: 21px;
	height: 20px;
}
#chart > div:last-child div#ins_export > div {
	top: -2px;
	left: -185px;
	width: 160px;
}
#chart > div:last-child div#ins_export > svg {
	top: 6px;
	left: -17px;
}
#chart > div:last-child div#ins_export {
	top: 0px;
	left: 606px;
	width: 21px;
	height: 20px;
}
#chart > div:last-child div#ins_export > div {
	top: 0px;
	left: 38px;
	width: 160px;
}
#chart > div:last-child div#ins_export > svg {
	top: 8px;
	left: 18px;
}
#chart > div:last-child div#ins_zoom {
	top: 90px;
	left: 130px;
	width: 290px;
	height: 150px;
	border: dotted 2px #ff0;
}
#chart > div:last-child div#ins_zoom > div:first-child {
	top: 10px;
	left: 15px;
	width: 250px;
}
#chart > div:last-child div#ins_zoom > div:last-child {
	top: 70px;
	left: 15px;
	width: 250px;
}
#chart > div:last-child div#ins_yaxis1 {
	top: 60px;
	left: 30px;
	width: 30px;
	height: 242px;
}
#chart > div:last-child div#ins_yaxis1 > div {
	left: 70px;
	top: 215px;
	width: 300px;
	text-align: left;
	padding: 5px 8px;
}
#chart > div:last-child div#ins_yaxis1 > svg {
	left: 27px;
	top: 180px;
}
#chart > div:last-child div#ins_yaxis2 {
	top: 305px;
	left: 30px;
	width: 30px;
	height: 242px;
}
#chart > div:last-child div#ins_yaxis2 > svg {
	left: 27px;
	top: 100px;
}
#chart > div:last-child div#ins_xaxis1 {
	top: 540px;
	left: 318px;
	width: 260px;
	height: 25px;
}
#chart > div:last-child div#ins_xaxis1 > svg {
	left: 58px;
	top: -52px;
}
#chart > div:last-child div#ins_xaxis2 {
	top: 540px;
	left: 58px;
	width: 260px;
	height: 25px;
}
#chart > div:last-child div#ins_xaxis2 > svg {
	left: 120px;
	top: -24px;
}

#chart > div:last-child div#ins_sitelist {
	top: 610px;
	left: 0px;
	width: 908px;
	height: 25px;
}
#chart > div:last-child div#ins_sitelist > div {
	top: 40px;
	left: 100px;
	width: 320px;
}
#chart > div:last-child div#ins_sitelist > svg {
	top: 20px;
	left: 200px;
}
#chart > div:last-child div#ins_sitemap {
	top: 640px;
	left: 2px;
	width: 755px;
	height: 392px;
}
#chart > div:last-child div#ins_sitemap > div:first-child {
	top: 65px;
	left: 100px;
	width: 200px;
	text-align: left;
}
#chart > div:last-child div#ins_sitemap > div:last-child {
	top: 150px;
	left: 100px;
	width: 200px;
	text-align: left;
}
#chart > div:last-child div#ins_domain {
	top: 650px;
	left: 770px;
	width: 115px;
	height: 90px;
}
#chart > div:last-child div#ins_domain > div {
	top: 20px;
	left: -180px;
	width: 150px;
}
#chart > div:last-child div#ins_domain > svg {
	top: 40px;
	left: -30px;
}
#chart > div:last-child div#ins_center {
	top: 860px;
	left: 770px;
	width: 115px;
	height: 40px;
}
#chart > div:last-child div#ins_center > div {
	top: -5px;
	left: -180px;
	width: 150px;
}
#chart > div:last-child div#ins_center > svg {
	top: 15px;
	left: -30px;
}