/* <style> */

	body, html {
		margin: 0;
		width: 100%;
		height: 100%;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	}
	#container {
		background: rgb(198,198,198);
		background: -moz-linear-gradient(top, rgb(198,198,198) 0%, rgb(147,147,147) 33%, rgb(58,58,58) 100%);
		background: -webkit-linear-gradient(top, rgb(198,198,198) 0%,rgb(147,147,147) 33%,rgb(58,58,58) 100%);
		background: linear-gradient(to bottom, rgb(198,198,198) 0%,rgb(147,147,147) 33%,rgb(58,58,58) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#3a3a3a',GradientType=0 );
		background-attachment: fixed;
		background-size: 100% 100vh;
		width: 100%;
		overflow: hidden;
	}
	#page_content {
		float: left;
		width: 100%;
		min-height: calc( 100vh - 25px );
		display: flex;
		align-items: stretch;
		margin-top: 25px;
	}
	#navigation {
		background-color: rgba(255,255,255,.25);
		width: 250px;
		height: auto;
		float: left;
		border-right: solid 2px white;
		box-sizing: border-box;
	}
	#navigation img.codLogo {
		display: block;
		width: 90%;
		padding: 5px 5%;
		height: auto;
		margin: 0 auto 5px auto;
		border: none;
		outline: none;
		background-color: rgba(0,84,0,0.75);
	}
	#navigation img.logo {
		display: block;
		height: 125px; /* 150px */
		width: auto;
		margin: 0 auto;
		border: none;
		outline: none;
	}
	#navigation img.storm-relief {
		display: block;
		height: auto;
		width: 100%;
		margin: 0 auto;
		border: none;
		outline: none;
	}
	#navigation h2 {
		color: black;
		font-size: 14px;
		margin: 5px auto;
		text-align: center;
	}
	#navigation table {
		margin-top: 15px;
	}
	#navigation table tr th {
		height: 25px;
		border-bottom: solid 2px white;
		font-size: 14px;
	}
	#navigation td {
		transition: 0.2s;
		user-select: none;
	}
	#navigation td:hover {
		color: black;
		background-color: rgba(255,255,255,.5);
	}

	#navigation table.support {
		width: 100%;
		font-size: 14px;
		line-height: 25px;
		text-align: center;
		margin: 0; /* to remove default margin */
	}
	#navigation table.support td a:link, #navigation table.support td a:visited {
		color: white;
	}
	#navigation table.support td a:hover {
		color: green;
	}

	#navigation table.scaleSelect {
		width: 100%;
	}
	#navigation table.scaleSelect td {
		width: 100%;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
		padding: 5px 0;
		cursor: pointer;
	}
	#navigation table.scaleSelect td.selected {
		color: white;
		background-color: rgba(0,0,0,.5);
	}
	#navigation table.bandSelect {
		width: 100%;
	}
	#navigation table.bandSelect tr th.subhead {
		border-bottom: dotted 1px white;
		border-bottom-width: 90%;
	}
	#navigation table.bandSelect td {
		width: 25%;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
		cursor: pointer;
	}
	#navigation table.bandSelect td[data-prodgroup*="ABI"] {
		text-align: left;
	}
	#navigation table.bandSelect td.selected {
		color: white;
		background-color: rgba(0,0,0,.5);
	}
	#navigation table.imgNumSelect {
		width: 100%;
	}
	#navigation table.imgNumSelect td {
		width: 33%;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
		cursor: pointer;
	}
	#navigation table.imgNumSelect td.selected {
		color: white;
		background-color: rgba(0,0,0,.5);
	}
	#navigation table.nthImgSelect {
		width: 100%;
	}
	#navigation table.nthImgSelect td {
		width: 20%;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
		cursor: pointer;
	}
	#navigation table.nthImgSelect td.selected {
		color: white;
		background-color: rgba(0,0,0,.5);
	}
	#navigation table.sliderType {
		width: 100%;
	}
	#navigation table.sliderType td {
		width: 50%;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
		cursor: pointer;
	}
	#navigation table.sliderType td.selected {
		color: white;
		background-color: rgba(0,0,0,.5);
	}

	#navigation #footer {
		font-size: 12px;
		text-align: center;
		padding: 10px 0;
		margin: 10px 0 0 0;
	}
	#navigation #footer a, #navigation #footer a:link, #navigation #footer a:visited {
		color: white;
	}
	#navigation #footer a:hover {
		color: darkgreen;
	}
	#display {
		position: relative;
		width: calc( 100% - 250px );
		float: left;
		box-sizing: border-box;
		word-wrap: break-word;
		overflow: hidden;
		overflow-x: visible;
	}
	#display #message {
		position: absolute;
		width: 350px;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
		color: white;
		font-weight: bold;
		text-align: center;
		left: calc( 50% - 175px );
		top: 0;
		display: block;
		background-color: rgba(0,255,0,.5);
		z-index: 100000;
	}
	#alertmsg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		z-index: 1000;
		background-color: rgba(0,0,0,.75);
		color: white;
		font-size: 20px;
		text-align: left;
		box-sizing: border-box;
		padding: 50px 10%;
		display: none;
	}
	#alertmsg img.close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}
	#alertmsg h1 {
		margin: 0 0 25px 0;
	}
	#alertmsg h2 {
		margin: 10px 0;
	}
	#alertmsg a,#alertmsg a:link,#alertmsg a:visited {
		color: rgba(137,200,154,1.00);
	}
	#alertmsg a:hover {
		color: white;
	}
	#unidata {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		z-index: 10000;
		background-color: rgba(0,0,0,.75);
		color: white;
		font-size: 20px;
		text-align: left;
		box-sizing: border-box;
		padding: 50px 10%;
		display: none;
	}
	#unidata img.close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}
	#unidata h1 {
		margin: 0 0 25px 0;
	}
	#unidata h2 {
		margin: 10px 0;
	}
	#unidata a,#unidata a:link,#unidata a:visited {
		color: rgba(137,200,154,1.00);
	}
	#unidata a:hover {
		color: white;
	}
	#disclaimer { /* base all other pop-ups off this */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10000;
		background-color: rgba(0,0,0,.75);
		color: white;
		font-size: 16px;
		text-align: left;
		box-sizing: border-box;
		padding: 50px 10%;
		display: none;
		overflow: auto;
	}
	#disclaimer h1 {
		margin: 0 0 25px 0;
	}
	#disclaimer h2 {
		margin: 10px 0;
	}
	#disclaimer a,#disclaimer a:link,#disclaimer a:visited {
		color: rgba(137,200,154,1.00);
	}
	#disclaimer a:hover {
		color: white;
	}
	#disclaimer img.close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}

	#product_description {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
		height: auto;
		z-index: 1000;
		background-color: rgba(0,0,0,.75);
		color: white;
		font-size: 16px;
		box-sizing: border-box;
		padding: 50px 20%;
		display: none;
	}
	#product_description table {
		background-color: rgba(150,255,150,0.25); /* rgba(115,200,255,0.50); */
	}
	#product_description table th {
		padding: 10px;
		border-bottom: solid 2px white;
	}
	#product_description table tr td {
		padding: 10px;
		width: 50%;
		vertical-align: top;
	}
	#product_description table td img {
		width: 100%;
		max-width: 640px;
		height: auto;
		margin: 0 auto;
		display: block;
		background-color: black;
	}
	#product_description table tr td.category {
		text-decoration: underline;
		font-weight: bold;
		text-align: right;
	}
	#product_description a,#product_description a:link,#product_description a:visited {
		color: rgba(137,200,154,1.00);
	}
	#product_description a:hover {
		color: white;
	}
	#product_description img.close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}

	#overlay_panel {
		position: absolute;
		bottom: 0;
		left: 0;
		min-width: 450px;
		width: 100%;
		height: 25%;
		z-index: 1000;
		background-color: rgba(0,0,0,.66);
		color: white;
		font-size: 12px;
		box-sizing: border-box;
		display: none;
		overflow-y: auto;
	}
	#overlay_panel img.close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}
	#overlay_panel span.uncheckall, #overlay_panel span.uncheckcat, #overlay_panel span.recheck {
		position: absolute;
		text-align: center;
		line-height: 20px;
		box-sizing: border-box;
		background-color: rgba(255,0,0,0.50);
		border-radius: 10px;
		top: 5px;
		right: 60px;
		width: 125px;
		cursor: pointer;
		z-index: 1;
		display: block;
	}
	#overlay_panel span.uncheckcat {
		right: calc( 60px + 1*130px );
		background-color: rgba(255,150,0,0.50);
	}
	#overlay_panel span.recheck {
		right: calc( 60px + 2*130px );
		background-color: rgba(0,255,50,0.50);
	}

	#overlay_panel span.uncheckall.alt, #overlay_panel span.uncheckcat.alt, #overlay_panel span.recheck.alt {
		font-size: 0px;
		top: 60px;
		right: 5px;
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}
	#overlay_panel span.uncheckcat.alt {
		top: calc( 60px + 1*55px );
		background-color: rgba(255,150,0,0.50);
	}
	#overlay_panel span.recheck.alt {
		top: calc( 60px + 2*55px );
		background-color: rgba(0,255,50,0.50);
	}
	#overlay_panel table.overlays {
		height: 30px;
	}
	#overlay_panel table.overlays th {
		background-color: rgba(255,255,255,0.25);
		font-size: 14px;
		padding: 0 20px;
		height: 100%;
		cursor: pointer;
		-moz-user-select: none;
		-webkit-user-select: none;
		user-select: none;
		box-sizing: border-box;
		border-left: solid 1px transparent;
		border-right: solid 1px transparent;
	}
	#overlay_panel table.overlays th.selected {
		background: -moz-linear-gradient(top, rgba(104,127,102,0.5) 0%, rgba(176,214,173,0.5) 100%);
		background: -webkit-linear-gradient(top, rgba(104,127,102,0.5) 0%,rgba(176,214,173,0.5) 100%);
		background: linear-gradient(to bottom, rgba(104,127,102,0.5) 0%,rgba(176,214,173,0.5) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80687f66', endColorstr='#80b0d6ad',GradientType=0 );
		border-left: solid 1px #333;
		border-right: solid 1px #333;
	}
	/*#overlay_panel table td:nth-of-type(1) {
		width: 33%;
	}
	#overlay_panel table td:nth-of-type(2) {
		min-height: 100px;
		width: 37%;
	}
	#overlay_panel table td:nth-of-type(3) {
		width: 30%;
	}*/
	#overlay_panel ul[data-state="on"] {
		display: block;
	}
	#overlay_panel ul[data-state="off"] {
		display: none;
	}
	#overlay_panel ul {
		width: calc( 100% - 60px );
		min-height: calc( 100% - 30px );
		margin: 0;
		padding: 10px 10% 0 10%;
		background-color: rgba(255,255,255,0.25);
		list-style: none;
		overflow: auto;
		box-sizing: border-box;
		border-top: solid 1px #333;
	}
	#overlay_panel ul span.listTitle {
		display: table;
		margin: 0 auto 5px auto;
		width: auto;
		padding: 2px 10px;
		text-align: center;
		font-size: 14px;
		color: lightgreen;
		border-radius: 15px;
		border: solid 1px white;
		box-sizing: border-box;
		font-weight: bold;
		background-color: rgba(0,0,0,0.5);
	}
	#overlay_panel ul li {
		display: inline-block;
		float: left;
		line-height: 25px;
		border-radius: 12px;
		width: auto;
		min-width: 20%;
		padding: 0 10px;
		margin-bottom: 10px;
		text-align: center;
		cursor: pointer;
		transition: all ease 200ms;
		box-sizing: border-box;
	}
	#overlay_panel ul li:hover {
		color: white;
		background-color: rgba(0,0,0,.5);
	}
	#overlay_panel ul li.selected {
		background-color: rgba(150,255,150,0.25);
	}

	#download {
		position: absolute;
		color: white;
		width: 100%;
		height: auto;
		min-height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.75);
		display: none;
		z-index: 1000;
		overflow-x: hidden;
	}

	#download img.close, #scaleMenu img.close {
		position: absolute;
		top: 5px;
		right: 5px;
		display: block;
		z-index: 1;
		cursor: pointer;
	}

	#scaleMenu {
		position: absolute;
		color: white;
		width: 100%;
		height: auto;
		min-height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.75);
		display: none;
		z-index: 10000;
		overflow: hidden;
		overflow-y: visible;
		box-sizing: border-box;
	}

	#scaleMenu #derivedSectors {
		position: absolute;
		text-align: center;
		width: 400px;
		height: 50px;
		line-height: 50px;
		padding: 5px 0;
		box-sizing: border-box;
		top: 0;
		left: calc( 50% - 200px );
	}
	#scaleMenu #derivedSectors a, #scaleMenu #derivedSectors a:visited {
		color: lightblue;
	}
	#scaleMenu #derivedSectors a:hover {
		color: white;
	}
	#scaleMenu #mapTabs {
		width: 100%;
	}
	#scaleMenu #mapTabs table.tabs {
		margin: 0 auto;
		height: 25px;
	}
	#scaleMenu #mapTabs table.tabs td {
		width: 200px;
		text-align: center;
		user-select: none;
		cursor: pointer;
	}
	#scaleMenu #mapTabs table.tabs td.selected {
		background-color: rgba(100,175,110,0.75);
	}
	#scaleMenu #scaleConstraint {
		width: 1600px;
		max-width: 100%;
		min-width: 450px;
		height: auto;
		margin: 0 auto;
	}
	#scaleMenu #scaleConstraint h1 {
		margin: 0;
		line-height: 50px;
		padding: 5px 0;
		text-align: center;
	}
		#scaleMenu.global #scaleConstraint #sectorMap[data-map="east"], #scaleMenu.continental #scaleConstraint #sectorMap[data-map="east"] {
		max-width: 920px;
		max-height: 900px;
		background: url('https://weather.cod.edu/data/satellite/global/fulldiskeast/current/fulldiskeast.02.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
		#scaleMenu.global #scaleConstraint #sectorMap[data-map="west"], #scaleMenu.continental #scaleConstraint #sectorMap[data-map="west"] {
		max-width: 920px;
		max-height: 900px;
		background: url('https://weather.cod.edu/data/satellite/global/fulldiskwest/current/fulldiskwest.02.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
		#scaleMenu.subregional #scaleConstraint #sectorMap[data-map="namer"] {
		max-width: 1600px;
		max-height: 900px;
		background: url('https://weather.cod.edu/data/satellite/background_sr/background_sr.02.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
		#scaleMenu.regional #scaleConstraint #sectorMap[data-map="namer"], #scaleMenu.local #scaleConstraint #sectorMap[data-map="namer"] {
		max-width: 1600px;
		max-height: 900px;
		background: url('https://weather.cod.edu/data/satellite/background/background.02.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
		#scaleMenu.regional #scaleConstraint #sectorMap[data-map="ak"], #scaleMenu.subregional #scaleConstraint #sectorMap[data-map="ak"], #scaleMenu.local #scaleConstraint #sectorMap[data-map="ak"] {
		max-width: 1600px;
		max-height: 900px;
		background: url('https://weather.cod.edu/data/satellite/continental/Alaska/current/Alaska.02.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
		#scaleMenu.regional #scaleConstraint #sectorMap[data-map="hi"], #scaleMenu.subregional #scaleConstraint #sectorMap[data-map="hi"], #scaleMenu.local #scaleConstraint #sectorMap[data-map="hi"] {
		max-width: 1600px;
		max-height: 900px;
		background: url('https://weather.cod.edu/data/satellite/regional/Hawaii/current/Hawaii.02.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	#scaleMenu #scaleConstraint #sectorMap #add_sector {
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0 0 20px 10px;
		background-color: rgba(0,0,0,0.50);
		color: white;
		font-size: 0.8em;
		border-radius: 10px;
		padding: 20px;
		border: solid 2px white;
	}
	#scaleMenu #scaleConstraint #sectorMap #add_sector h3 {
		margin: 0;
	}
	#scaleMenu #scaleConstraint #sectorMap #add_sector a,
	#scaleMenu #scaleConstraint #sectorMap #add_sector a:visited {
		color: white;
		padding: 5px 10px;
		display: block;
	}
	#scaleMenu #scaleConstraint #sectorMap #add_sector a:hover {
		color: forestgreen;
		background-color: rgba(255,255,255,0.25);
	}
	#scaleMenu #scaleConstraint #sectorMap img {
		width: 100%;
		height: auto;
		display: block;
	}
	#scaleMenu #scaleConstraint #sectorMap map area {
		outline: none;
	}
	#scaleConstraint #sectorMap #highlight {
		display: none;
		background: rgba(255,255,255,.25);
		position: absolute;
		border-radius: 10px;
		border: solid 1px black;
		overflow: hidden;
		pointer-events: none;
		z-index: 100000;
	}
	#scaleMenu #scaleConstraint #sectorMap {
		width: 100%;
		height: auto;
		display: none;
		overflow: hidden;
		position: relative;
		margin: 0 auto;
	}
	#scaleMenu #scaleConstraint #sectorMap[data-display="hide"] {
		display: none;
	}
	#scaleMenu #scaleConstraint #sectorMap[data-display="show"] {
		display: block;
	}

	#scaleConstraint #sectorTiles.show {
		display: block;
	}
	#scaleConstraint #sectorMap.show {
		display: block;
	}
	#scaleConstraint #sectorTiles.hide {
		display: none;
	}
	#scaleConstraint #sectorMap.hide {
		display: none;
	}

	#scaleConstraint #sectorTiles table.sectorTile {
		background-color: grey;
		width: calc( 50% - 10px );
		height: auto;
		display: block;
		float: left;
		margin: 0 5px 20px 5px;
		box-sizing: border-box;
	}
	#scaleConstraint #sectorTiles table.sectorTile.derived {
		/* display: none;  hide during development */
	}

	#scaleConstraint #sectorTiles table.sectorTile td img {
		width: 100%;
		height: auto;
		display: block;
		cursor: pointer;
	}
	#scaleConstraint #sectorTiles table.sectorTile.derived td img {
		height: auto;
		max-height: 300px;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
		display: block;
		cursor: pointer;
	}
	#scaleConstraint #sectorTiles table.sectorTile td.bandOptions, #scaleConstraint #sectorTiles table.sectorTile th {
		font-size: 12px;
		width: 25%;
		height: 25px;
		text-align: center;
	}
	#scaleConstraint #sectorTiles table.sectorTile td.bandOptions {
		cursor: pointer;
	}
	#scaleConstraint #sectorTiles table.sectorTile td.bandOptions.selected {
		color: black;
		background-color: lightgrey;
	}

	#download #formConstraint {
		width: 90%;
		max-width: 100%;
		min-width: 450px;
		min-height: 100%;
		height: auto;
		margin: 0 auto;
	}
	#download form[name=gifSave], #download form[name=hanisSave] {
		font-size: 14px;
		width: 100%;
		height: calc( 50% - 10px );
		margin-top: 10px;
	}
	#download form[name=gifSave] table, #download form[name=hanisSave] table {
		width: 100%;
	}
	#download form[name=hanisSave] table td.hanisDescription {
		padding: 0 5px;
	}
	#download form[name=gifSave] table td, #download form[name=gifSave] table th, #download form[name=hanisSave] table td, #download form[name=hanisSave] table th {
		height: 50px;
	}
	#download form[name=gifSave] table input[readonly], #download form[name=hanisSave] table  input[readonly] {
		width: calc( 30% - 10px );
		padding: 5px;
		height: 30px;
		vertical-align: -2px;
		float: left;
		text-align: center;
		font-size: 16px;
		border: none;
	}
	#download form[name=gifSave] table input[type="range"], #download form[name=hanisSave] table  input[type="range"] {
		width: 70%;
		padding: 5px 0;
		margin: 0;
		height: 30px;
		cursor: pointer;
		float: left;
		border: none;
	}
	#download form[name=gifSave] table input[readonly].limitExceeded, #download form[name=hanisSave] table input[readonly].limitExceeded {
		background-color: pink;
	}
	#download form[name=gifSave] table th, #download form[name=hanisSave] table th {
		font-size: 16px;
		vertical-align: bottom;
		border-bottom: dotted 1px white;
	}
	#download form[name=gifSave] table td.saveTypeLogo, #download form[name=hanisSave] table td.saveTypeLogo {
		vertical-align: top;
		width: 15%;
	}
	#download form[name=gifSave] table td.saveTypeLogo img, #download form[name=hanisSave] table td.saveTypeLogo img {
		height: 150px;
		padding: 0;
		margin: 0 auto;
		display: block;
	}
	#download form[name=gifSave] table td.label, #download form[name=hanisSave] table td.label {
		text-align: right;
		padding: 0 5px;
	}
	#download form[name=gifSave] table td.lastCol, #download form[name=hanisSave] table td.lastCol {
		width: 70%;
	}
	#download form[name=gifSave] table td input[type=number], #download form[name=hanisSave] table td input[type=number] {
		padding: 5px;
		width: calc( 100% - 10px );
		height: 30px;
		border: none;
	}

	#download form[name=gifSave] table td button[name="saveGIF"], #download form[name=hanisSave] table td button[name="saveHANIS"] {
		font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
		float:left;
		height: 50px;
		padding: 5px 20px;
		font-size: 24px;
		color: #FFF;
		background-color: #060;
		border: none;
		cursor: pointer;
		transition: all 500ms;
	}
	#download form[name=gifSave] table td button[name="saveGIF"]:hover, #download form[name=hanisSave] table td button[name="saveHANIS"]:hover {
		color: #060;
		background-color: #FFF;
	}
	#data_viewer {
		position: relative;
		background-color: black;
		display: block;
		max-width: 900px;
		max-height: 900px; /* always us native height; or " calc( 100% - 25px); " this will fit to height of window */
		min-width: 450px;
		min-height: 450px;
		width: 100%; /* these were max-width/height - just another option for displaying the product */
		height: auto;
		margin: 0 auto;
		overflow: hidden;
	}
	#data_viewer #refresh_counter {
		position: absolute;
		bottom: 0;
		right:0;
		z-index: 101;
		background-color: rgba(0,0,0,0.50);
		color: white;
		font-size: 14px;
		padding: 5px;
		width: auto;
		cursor: pointer;
		user-select: none;
	}
	#data_viewer #refresh_counter.disabled {
		background-color: rgba(255,255,255,0.50);
		color: yellow;
	}
	#data_viewer img.product {
		width: 100%;
		height: 100%;
		display: block;
		-ms-interpolation-mode: bicubic;
	}
	#data_viewer img.overlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		-ms-interpolation-mode: bicubic;
	}
	/* overlay z-index ing */
	#data_viewer img.overlay[id="acha"],
	#data_viewer img.overlay[id="acht"],
	#data_viewer img.overlay[id="actp"],
	#data_viewer img.overlay[id="dsi_cape"],
	#data_viewer img.overlay[id="lst"],
	#data_viewer img.overlay[id="rrqpe"],
	#data_viewer img.overlay[id="sst"],
	#data_viewer img.overlay[id="tpw"],
	#data_viewer img.overlay[id="radar"] {
		z-index: 99;
	}
	/* overlay opacities */
	#data_viewer img.overlay[id="ww"] {
		opacity: 0.75;
	}
	#data_viewer img.overlay[id="radar"],
	#data_viewer img.overlay[id="acha"],
	#data_viewer img.overlay[id="rrqpe"],
	#data_viewer img.overlay[id="actp"] {
		opacity: 0.66;
	}
	#data_viewer img.overlay[id="dsi_cape"],
	#data_viewer img.overlay[id="tpw"] {
		opacity: 0.50;
	}
	#data_viewer img.overlay[id="acht"] {
		opacity: 0.33;
	}
	#data_viewer img.overlay[data-state="on"], #data_viewer img.colorbar[data-state="on"] {
		display: block;
	}
	#data_viewer img.overlay[data-state="off"], #data_viewer img.colorbar[data-state="off"] {
		display: none;
	}
	#data_viewer img.colorbar {
		position: absolute;
		top: calc( 50% - 400px );
		right: 0;
		max-height: 100%;
		z-index: 999;
		background-color: rgba(255,255,255,0.3);
		-ms-interpolation-mode: bicubic;
	}
	div#data_viewer.flipped img.product, div#data_viewer.flipped img.overlay {
		/* the switch hemisphere style */
		-moz-transform: scaleX(-1) rotate(180deg);
		-o-transform: scaleX(-1) rotate(180deg);
		-webkit-transform: scaleX(-1) rotate(180deg);
		transform: scaleX(-1) rotate(180deg);
		filter: FlipH;
		-ms-filter: "FlipH";
	}
	#data_viewer #rateChange {
		position: absolute;
		top: calc( 50% - 36px );
		left: calc( 50% - 100px );
		z-index: 100;
		width: 200px;
		height: 72px;
		color: white;
		text-align: center;
		font-size: 72px;
		line-height: 72px;
		-webkit-text-stroke: 5px black;
		text-stroke: 5px black;
		font-weight: 900;
		-webkit-text-stroke: 3px black;
		text-stroke: 5px black;
		box-sizing: border-box;
		user-select: none;
		white-space: nowrap;
		display: none;
	}
	#data_viewer #saveFrameMenu {
		position: absolute;
		width: auto;
		height: auto;
		background-color: rgba(0,0,0,0.50);
		color: white;
		border: solid 2px white;
		border-radius: 16px;
		z-index: 999;
		display: none;
		overflow: hidden;
	}
	#data_viewer #saveFrameMenu span {
		font-size: 14px;
		line-height: 14px;
		font-weight: bold;
		padding: 5px 20px;
		display: block;
		cursor: pointer;
		user-select: none;
		white-space: nowrap;
		text-align: center;
	}
	#data_viewer #saveFrameMenu span:hover {
		background: rgb(171,204,171);
		background: -moz-linear-gradient(top, rgb(171,204,171) 0%, rgb(66,127,66) 100%);
		background: -webkit-linear-gradient(top, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		background: linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abccab', endColorstr='#427f42',GradientType=0 );
	}

	#data_viewer #metadata,
	#data_viewer #overlayToggle,
	#data_viewer #dataToggle,
	#data_viewer #saveToggle,
	#data_viewer #alertToggle {
		position: absolute;
		color: white;
		width: 30px;
		padding: 5px;
		font-size: 12px;
		line-height: 30px;
		white-space: nowrap;
		top: 5px;
		left: 5px;
		background-color: rgba(0,0,0,.5);
		cursor: pointer;
		user-select: none;
		transition: ease all 200ms;
		z-index: 1001;
		overflow: hidden;
	}
	#data_viewer #alertToggle {
		top: calc( 5px + 1*45px);
	}
	#data_viewer #overlayToggle {
		top: calc( 5px + 2*45px);
	}
	#data_viewer #dataToggle {
		top: calc( 5px + 3*45px);
	}
	#data_viewer #saveToggle {
		top: calc( 5px + 4*45px);
	}
	#data_viewer #metadata:hover,
	#data_viewer #overlayToggle:hover,
	#data_viewer #dataToggle:hover,
	#data_viewer #saveToggle:hover,
	#data_viewer #alertToggle:hover {
		background-color: rgba(150,225,150,.5); /* rgba(0,150,225,.5); */
		width: auto;
		min-width: 115px;
	}
	@keyframes good {
		0% {background-color: rgba(150,225,150,.5);}
		25% {background-color: rgba(0,0,0,.5);}
		50% {background-color: rgba(150,225,150,.5);}
		75% {background-color: rgba(0,0,0,.5);}
		100% {background-color: rgba(150,225,150,.5);}
	}
	@keyframes bad {
		0% {background-color: rgba(210,100,100,0.75);}
		25% {background-color: rgba(0,0,0,.5);}
		50% {background-color: rgba(210,100,100,0.75);}
		75% {background-color: rgba(0,0,0,.5);}
		100% {background-color: rgba(210,100,100,0.75);}
	}
	#data_viewer #alertToggle.good {
		animation: good 2s;
		background-color: rgba(150,225,150,.5);
	}
	#data_viewer #alertToggle.bad {
		animation: bad 2s;
		background-color: rgba(210,100,100,0.75);
	}
	#data_viewer #metadata img,
	#data_viewer #overlayToggle img,
	#data_viewer #dataToggle img,
	#data_viewer #saveToggle img,
	#data_viewer #alertToggle img {
		display: inline-block;
		padding: 0 5px 0 0;
		height: 30px;
		width: auto;
		float: left;
		vertical-align: bottom;
	}
	#controls {
		font-size: 12px;
		width: 900px;
		max-width: 100%;
		min-width: 450px;
		height: 25px;
		margin: 0 auto;
	}

	#timerBar {
		/* GREEN */
		background: rgb(66,127,66);
		background: -moz-linear-gradient(top, rgb(66,127,66) 0%, rgb(171,204,171) 100%);
		background: -webkit-linear-gradient(top, rgb(66,127,66) 0%,rgb(171,204,171) 100%);
		background: linear-gradient(to bottom, rgb(66,127,66) 0%,rgb(171,204,171) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#427f42', endColorstr='#abccab',GradientType=0 );
		text-align: center;
		float: left;
		line-height: 25px;
		text-shadow: white 1px 1px 1px;
		height: 100%;
		width: 82%;
		overflow: hidden;
		position: relative;
	}
	#slider {
		position: absolute;
		background: #e2e2e2;
		background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
		background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
		background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
		background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
		background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
		color: black;
		width: 40px;
		height: 25px;
		line-height: 23px;
		border: 1px solid #000;
		border-radius: 12px;
		z-index: 100;
		top: 0; /* keeps the marker from breaking to new line due to text in rollover region */
		right: 0;
		cursor: pointer;
		box-sizing: border-box;
	}
	#controls button {
		width: 6%;
		height: 100%;
		color: white;
		float: left;
		display: block;
		box-sizing: border-box;
		font-size: 12px;
		border: none;
		cursor: pointer;
		user-select: none;
		background: rgb(204,204,204);
		background: -moz-linear-gradient(top, rgb(204,204,204) 0%, rgb(127,127,127) 100%);
		background: -webkit-linear-gradient(top, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		background: linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#7f7f7f',GradientType=0 );
		outline: none;
	}
	#controls button img {
		height: 100%;
		width: auto;
		display: block;
		margin: 0 auto;
	}
	#controls button[name="rate"]:active {
		/* GREEN */
		background: rgb(171,204,171);
		background: -moz-linear-gradient(top, rgb(171,204,171) 0%, rgb(66,127,66) 100%);
		background: -webkit-linear-gradient(top, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		background: linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abccab', endColorstr='#427f42',GradientType=0 );
	}
	#controls button[name="rate"][value="-"] img {
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	#controls button[name="loopToggle"][value="stopped"] {
		color: white;
		font-size: 16px;
		/* GREEN */
		background: rgb(171,204,171);
		background: -moz-linear-gradient(top, rgb(171,204,171) 0%, rgb(66,127,66) 100%);
		background: -webkit-linear-gradient(top, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		background: linear-gradient(to bottom, rgb(171,204,171) 0%,rgb(66,127,66) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abccab', endColorstr='#427f42',GradientType=0 );
		/* BLUE
		background: rgb(212,228,239);
		background: -moz-linear-gradient(top, rgb(212,228,239) 0%, rgb(134,174,204) 100%);
		background: -webkit-linear-gradient(top, rgb(212,228,239) 0%,rgb(134,174,204) 100%);
		background: linear-gradient(to bottom, rgb(212,228,239) 0%,rgb(134,174,204) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=0 );
		*/
	}
	#controls button[name="loopToggle"][value="started"] {
		color: white;
		font-size: 20px;
		background: rgb(204,204,204);
		background: -moz-linear-gradient(top, rgb(204,204,204) 0%, rgb(127,127,127) 100%);
		background: -webkit-linear-gradient(top, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		background: linear-gradient(to bottom, rgb(204,204,204) 0%,rgb(127,127,127) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#7f7f7f',GradientType=0 );
	}
	#textBubble {
		color: white;
	}
	#preloader {
		display: none;
	}