@font-face {
	font-family: "TitleFontRegular";
	src: url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.eot");
	src: url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.woff") format("woff"),
			 url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.ttf") format("truetype"),
			 url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.svg#CACLogoAlternateRegular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "TitleFontRegular";
	src: url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.eot");
	src: url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.woff") format("woff"),
			 url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.ttf") format("truetype"),
			 url("/local/css/fonts/CACLogoAlternative/CACLogoAlternative-Regular.svg#CACLogoAlternateRegular") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontRegular";
	src: url("/local/css/fonts/OpenSans/OpenSans-Regular.eot");
	src: url("/local/css/fonts/OpenSans/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Regular.woff") format("woff"),
			 url("/local/css/fonts/OpenSans/OpenSans-Regular.ttf") format("truetype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Regular.svg#OpenSansRegular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontRegular";
	src: url("/local/css/fonts/OpenSans/OpenSans-Bold.eot");
	src: url("/local/css/fonts/OpenSans/OpenSans-Bold.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Bold.woff") format("woff"),
			 url("/local/css/fonts/OpenSans/OpenSans-Bold.ttf") format("truetype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Bold.svg#OpenSansBold") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontLight";
	src: url("/local/css/fonts/OpenSans/OpenSans-Light.eot");
	src: url("/local/css/fonts/OpenSans/OpenSans-Light.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Light.woff") format("woff"),
			 url("/local/css/fonts/OpenSans/OpenSans-Light.ttf") format("truetype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Light.svg#OpenSansLight") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontLight";
	src: url("/local/css/fonts/OpenSans/OpenSans-Regular.eot");
	src: url("/local/css/fonts/OpenSans/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Regular.woff") format("woff"),
			 url("/local/css/fonts/OpenSans/OpenSans-Regular.ttf") format("truetype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Regular.svg#OpenSansRegular") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontBold";
	src: url("/local/css/fonts/OpenSans/OpenSans-Bold.eot");
	src: url("/local/css/fonts/OpenSans/OpenSans-Bold.eot?#iefix") format("embedded-opentype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Bold.woff") format("woff"),
			 url("/local/css/fonts/OpenSans/OpenSans-Bold.ttf") format("truetype"),
			 url("/local/css/fonts/OpenSans/OpenSans-Bold.svg#OpenSansBold") format("svg");
	font-weight: normal;
	font-style: normal;
}
html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	overflow: hidden;
}

body, p, span, div, table, tr, td, a, ul, li, textarea, input {
	font-family: StandardFontLight, sans-serif;
	/*
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	*/

	/* safari specific font smoothing attributes defined in safari-modifiers.css */
}

body {
	height: 100%;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	line-height: 100%;
	color: hsl(0, 0%, 100%);
	margin: 0px;
	padding: 0px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
}

p, div, table, tr, td, ul, li, textarea, input {
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
	line-height: 100%;
	margin: 0px;
	padding: 0px;
	position: relative; /* ensures that offset calculations are correct */
}

p, div, table, tr, td, ul, li, textarea, input {
	color: hsl(0, 0%, 100%);
}

p {
	text-align: left;
}

span {
	text-align: left;
}

div {
	text-align: left;
	/*box-sizing: border-box;*/ /*messes up calculation of info window section content*/
}

table {
	border-collapse: collapse;
}

td {
	vertical-align: top;
}

a {
	color: hsl(195, 100%, 75%);
	text-decoration: none;
	outline: none;
}

.mouseInput a:hover {
	text-decoration: underline;
}

.mouseInput a.noHL:hover {
	background: none;
	text-decoration: none;
}

.block {
	display: block;
}

ul {
	margin: 12px 8px 12px 24px;
}

li {
	line-height: 100%;
	margin-top: 10px;
}

li:first-child {
	margin-top: 0px;
}
body {
	background-image: url("/local/images/framework/background-trans.png");
	background-position: center center;
	/*-webkit-background-size: 1815px 1815px;*/ /*mostly for mobile safari*/
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: hsl(205, 55%, 20%);
}



div.preloadImages {
	position: fixed;
	left: 0px;
	top: -1000px;
	visibility: hidden;
	pointer-events: none;
}



/*** HEADER ***/
div.headerPanel {
	/*height dynamically set in Framework.php */
	position: fixed;
	z-index: 130;
	top: 0px;
	left: 0px;
	width: 100%;
	min-width: 400px;
	background-color: hsl(205, 50%, 10%);
	box-sizing: border-box;
}

div.headerMain {
	position: relative;
	width: 100%;
	text-align: center;
}

a.headerTitle {
	/*height dynamically set in Framework.php */
	position: relative;
	display: block;
	width: 100%;
	max-width: 630px;
	margin: 0px auto;
	text-align: center;
	background-position: center center;
	background-attachment: local;
	background-repeat: no-repeat;
}

a.headerTitle:hover {
	text-decoration: none;
}

p.headerTitle, p.headerTitleAndApp {
	/*height and line-height dynamically set in Framework.php */
	position: absolute;
	z-index: 2;
	width: 100%;
	top: 0px;
	font-family: TitleFontRegular, sans-serif;
	font-size: 26px;
	letter-spacing: 1px;
	font-variant: small-caps;
	text-align: center;
	white-space: nowrap;
	color: hsl(200, 90%, 65%);
	-webkit-transform: scaleX(1.2);
  transform: scaleX(1.2);
}

p.headerTitleAndApp {
	/*height and line-height dynamically set in Framework.php */
	font-family: StandardFontRegular, sans-serif;
	font-size: 20px;
	-webkit-transform: scaleX(1.1);
  transform: scaleX(1.1);
}

div.headerSectionMenu {
	text-align: center;
}

div.headerSectionMenuButtonContainer {
	display: inline-block;
	min-width: 600px;
	text-align: center;
}

div.headerSectionMenuTopLine {
	height: 1px;
	background: hsl(205, 50%, 25%);
	background: linear-gradient(-90deg, hsl(205, 50%, 10%), hsl(205, 50%, 25%) 10%, hsl(205, 50%, 25%) 90%, hsl(205, 50%, 10%));
}

div.headerSectionMenuButtons {
	text-align: center;
	white-space: nowrap;
	padding: 0px 50px;
}

div.sectionButtonNorm, div.sectionButtonSelected {
	display: inline-block;
	min-width: 100px;
	overflow-y: hidden;
	overflow-x: hidden;
	font-size: 18px;
	text-align: center;
	color:hsl(0, 0%, 100%);
	padding: 0px 12px;
	text-decoration: none;
	cursor: pointer
}

.mouseInput div.sectionButtonNorm:hover {
	background-color: hsla(195, 100%, 40%, 0.40);
}

div.sectionButtonSelected {
	background-color: hsl(195, 100%, 40%);
}

div.appCredit {
	position: absolute;
	right: 12px;
	bottom: 4px;
	color: hsla(0, 0%, 100%, 0.25);
	font-size: 10px;
	font-style: italic;
	pointer-events: none;
}

div.headerControls {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	font-size: 0px;
	pointer-events: none;
}

div.headerCtlsTL {
	position: absolute;
	z-index: 100;
	top: 0px;
	left: 0px;
	font-size: 0px;
}

div.headerCtlsTR {
	position: absolute;
	z-index: 100;
	top: 0px;
	right: 0px;
	font-size: 0px;
}

div.headerCtlsBL {
	position: absolute;
	z-index: 100;
	left: 0px;
	bottom: 0px;
}

div.headerCtlsBR {
	position: absolute;
	z-index: 100;
	right: 0px;
	bottom: 0px;
}

div.headerCtlsPartnerLogos {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 68px;
	font-size: 0px;
	box-sizing: border-box;
}

.headerPartnerLogo {
	display: inline-block;
	height: 68px;
	font-size: 0px;
	margin-left: 8px;
	padding: 8px;
	box-sizing: border-box;
}

.headerPartnerLogo:first-child {
	margin-left: 0px;
}

a.headerPartnerLogo {
	pointer-events: auto;
}

a.headerPartnerLogo:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.10);
}

img.headerPartnerLogoImg {
	display: block;
	height: 52px;
}



div.contentPanel {
	position: absolute;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px; /* overridden in Framework.php */
	bottom: 0px;
}

div.sectionPanel {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	box-sizing: border-box;
}

div.sectionPanelPad {
	padding: 24px;
}

div.sectionPanelVertScroll {
	overflow-y: auto; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}

div.contentPanelOverlay { /* positioned above section panel */
	position: absolute;
	z-index: 2;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}




div.auxHeadMenuContainer {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	font-size: 0px;
	min-width: 70px;
}

div.auxHeadMenuButton, div.headUsernameButton {
	position: relative;
	/*height: specified in php;*/
	padding: 0px 30px 0px 10px;
	font-size: 0px;
	cursor: pointer;
	pointer-events: auto;
}

div.auxHeadMenuButton:hover {
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.headUsernameButton {
	margin-top: 4px;
	height: 28px;
	padding: 0px 25px 0px 8px;
	border-radius: 3px;
	background-color: hsl(200, 35%, 55%);
}

div.headUsernameButton:hover {
	background-color: hsl(200, 35%, 55%);
}

p.auxHeadMenuLabel {
	position: relative;
	display: inline-block;
	top: 0px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	/*line-height: specified in php;*/
	color: hsl(200, 35%, 55%);
	pointer-events: none;
}

div.auxHeadMenuIcon {
	position: absolute;
	width: 14px;
	height: 7px;
	right: 10px;
	top: 15px;
	pointer-events: none;
}

.auxHeadMenuIconSvg {
	position: absolute;
	width: 14px;
	height: 7px;
	fill: hsl(200, 35%, 55%);
}

p.headUsername {
	position: relative;
	display: inline-block;
	top: -1px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: hsl(0, 0%, 0%);
	pointer-events: none;
}

div.headUsernameMenuIcon {
	position: absolute;
	width: 14px;
	height: 7px;
	right: 5px;
	top: 11px;
	pointer-events: none;
}

.headUsernameMenuIconSvg {
	position: absolute;
	width: 14px;
	height: 7px;
	fill: hsl(200, 50%, 20%);
}

div.auxHeadMenuListShow, div.auxHeadMenuListHide {
	position: absolute;
	opacity: 1;
	left: 0px;
	top: 39px;
	background-color: hsl(206, 55%, 10%);
	border: solid 2px hsl(195, 25%, 50%);
	border-radius: 5px;
	box-shadow: 0px 1px 2px 1px hsla(0, 0%, 0%, 0.35);
	box-sizing: border-box;
	overflow: hidden;
	transition: opacity 0.25s linear;
}

div.auxHeadMenuListHide {
	opacity: 0;
}

.auxHeadMenuItemBtn, .auxHeadMenuItemBtnActive {
	display: block;
	color: hsl(200, 35%, 75%);
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	padding: 0px 10px;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
}

.auxHeadMenuItemBtn:hover {
	text-decoration: none !important;
	background-color: hsla(0, 0%, 100%, 0.12);
}

.auxHeadMenuItemBtnActive {
	color: hsl(50, 100%, 60%);
	cursor: default;
	pointer-events: none;
}
div.modalBg {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: hsla(205, 75%, 5%, 0.85);
}

div.sectionModalBg {
	display: none;
	position: fixed;
	z-index: 98;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: hsla(205, 75%, 5%, 0.85);
}

div.sectionModalDiv {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0px;
	left: 0px;
	width: 100%;
	padding-top: 150px;
	pointer-events: none;
}

div.sectionModalBg2 {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: hsla(205, 75%, 5%, 0.85);
}

div.sectionModalDiv2 {
	display: none;
	position: fixed;
	z-index: 101;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	box-sizing: border-box;
	/*pointer-events: all;*/
}



/*** MODAL OVERLAY - FULL SCREEN IMAGES, ETC. ***/
div.modalOverlayBg {
	display: none;
	position: fixed;
	z-index: 201;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: hsla(205, 75%, 5%, 0.85);
	pointer-events: all;
}

div.modalOverlayContainer {
	position: fixed;
	z-index: 1;
	width: auto;
	height: auto;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
	background-color: hsl(0, 0%, 100%);
	box-sizing: border-box;
}

div.modalOverlay {
	display: none;
	position: absolute;
	z-index: 1;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: hsl(0, 0%, 100%);
	box-sizing: border-box;
	pointer-events: all;
}

div.modalOverlayCloseBtn {
	display: block;
	position: fixed;
	z-index: 2;
	width: 30px;
	height: 30px;
	right: 5px;
	top: 5px;
	background-color: hsl(0, 0%, 100%);
	border-radius: 3px;
	border: solid 1px hsla(0, 0%, 0%, 0.25);
	box-sizing: border-box;
	cursor: pointer;
	pointer-events: all;
}

div.modalOverlayCloseBtnX1, div.modalOverlayCloseBtnX2 {
	position: absolute;
	width: 20px;
	height: 4px;
	left: 50%;
	margin-left: -10px;
	top: 50%;
	margin-top: -2px;
	transform: rotate(45deg);
	background-color: hsl(0, 0%, 20%);
	pointer-events: none;
}

div.modalOverlayCloseBtnX2 {
	transform: rotate(-45deg);
}
div.noticePanel {
	display: none;
	position: absolute;
	z-index: 101;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 0px;
	overflow: hidden;
}

div.noticePanel td {
	vertical-align: middle;
}

div.noticeMsgStandard, div.noticeMsgConfirmation, div.noticeMsgAlert {
	width: 95%;
	max-width: 500px;
	margin: 0px auto;
	border-style: solid;
	border-width: 2px;
	border-bottom: none;
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
}

p.noticeMsg {
	font-size: 1em;
	line-height: 26px;
	margin: 0px 8px;
}

div.noticeMsgStandard {
	border-color: hsl(195, 100%, 40%);
	background-color: hsl(195, 100%, 5%);
}

div.noticeMsgStandard p.noticeMsg {
	color: hsl(195, 100%, 80%);
}

div.noticeMsgConfirmation {
	border-color: hsl(160, 100%, 60%);
	background-color: hsl(160, 50%, 10%);
}

div.noticeMsgConfirmation p.noticeMsg {
	color: hsl(160, 100%, 70%);
}

div.noticeMsgAlert {
	border-color: hsl(0, 100%, 55%);
	background-color: hsl(0, 75%, 10%);
}

div.noticeMsgAlert p.noticeMsg {
	color: hsl(0, 0%, 100%);
}
div.confirmContainer {
	display: none;
	position: fixed;
	z-index: 9000;
	left: 0px;
	right: 0px;
	top: 0px;
	width: auto;
	height: 100%;
	padding: 0px 12px;
	background-color: hsla(0, 0%, 0%, 0.65);
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

div.confirmPanel {
	position: relative;
	top: 150px; /*20px;*/
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	border-radius: 6px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 2px 10px 1px hsla(0, 0%, 0%, 0.50);
}

p.confirmPanelMsg {
	font-size: 12pt;
	line-height: 150%;
	letter-spacing: 1px;
	text-align: center;
	padding: 5px 5px 15px 5px;
	color: hsl(0, 0%, 5%);
	background-color: hsl(0, 0%, 100%);
	border-bottom: solid 1px hsl(0, 0%, 85%);
}

div.confirmPanelButtonRow {
	margin-top: 15px;
}

div.confirmPanelBtnApprove, div.confirmPanelBtnCancel {
	height: 40px;
	font-size: 16px;
	line-height: 36px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	background-color: hsl(200, 100%, 35%);
	border: solid 1px hsl(200, 100%, 35%);
	border-radius: 5px;
	box-sizing: border-box;
	pointer-events; auto;
	cursor: pointer;
}

div.confirmPanelBtnCancel {
	line-height: 36px;
	color: hsl(200, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(200, 50%, 65%);
}

div.confirmPanelBtnApprove:hover {
	background-color: hsl(200, 100%, 45%);
}

div.confirmPanelBtnCancel:hover {
 background-color: hsl(200, 100%, 90%);
}
p.text, p.text a {
	font-size: 15px;
	letter-spacing: 0.5px;
	line-height: 150%;
}

p.small, span.small, .small a {
	font-size: 14px !important;
	line-height: 140%;
}

p.teeny, span.teeny, .teeny a {
	font-size: 12px !important;
	line-height: 140%;
}

p.tiny, span.tiny, .tiny a {
	font-size: 11px !important;
	line-height: 140%;
}

p.inverseColor, span.inverseColor {
	line-height: 140%;
	color: hsl(0, 0%, 0%);
}

.inverseColor a {
	color: hsl(195, 100%, 30%);
}

p.medium, span.medium, .medium a {
	font-size: 14px !important;
	line-height: 140%;
}

p.large, span.large, .large a {
	font-size: 16px !important;
	line-height: 140%;
}

p.huge, span.huge, .huge a {
	font-size: 24px !important;
	line-height: 140%;
}

p.impact {
	font-size: 18px !important;
	font-weight: bold;
	line-height: 140%;
}

p.contentTitle, p.notice {
	color: hsl(50, 100%, 65%);
	line-height: 140%;
	font-weight: bold;
	font-size: 1.5em;
}

p.contentSubTitle {
	color: hsl(50, 60%, 80%);
	line-height: 140%;
	font-size: 1.2em;
}

p.contentHead {
	color: hsl(50, 100%, 65%);
	line-height: 140%;
	font-weight: bold;
	border-bottom: solid 1px hsl(50, 100%, 65%);
	font-size: 1.2em;
	margin-top: 24px;
	margin-bottom: 5px;
}

p.contentHead:first-child {
	margin-top: 0px;
}

p.pageInstructions {
	color: hsl(205, 10%, 70%);
	line-height: 140%;
	font-style: italic;
}

p.hl, span.hl {
	color: hsl(50, 100%, 65%) !important;
}



/*** INPUTS & TEXTAREAS ***/
form.default {
	margin: 0px;
	padding: 0px;
}

input.default, textarea.default, input.alert, textarea.alert {
	font-size: 1em;
	line-height: 140%;
	padding: 5px;
	color: hsl(0, 0%, 100%);
	border: solid 1px hsl(205, 50%, 35%);
	resize: none;
	background: none;
	background-color: hsla(0, 0%, 0%, 0.35);
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input.alert, textarea.alert {
	background-color: hsla(0, 100%, 40%, 0.50) !important;
}

input.default:focus, textarea.default:focus, input.alert:focus, textarea.alert:focus {
	outline: none;
	box-shadow: 0px 0px 2px 2px hsl(50, 100%, 65%);
}



/*** PULLDOWN MENUS ***/
select.large {
	font-size: 16px;
}

select.large option {
	font-size: 16px;
}

img.basic {
	display: inline-block;
	border: solid 2px hsl(200, 100%, 30%);
}

img.basicRound {
	display: inline-block;
	border: solid 2px hsl(200, 100%, 30%);
	background-color: 0px 2px 3px 2px hsla(0, 0%, 0%, 0.35);
	border-radius: 12px;
}

img.impact {
	display: inline-block;
	border: solid 2px hsl(0, 0%, 100%);
}

img.impactRound {
	display: inline-block;
	border: solid 2px hsl(0, 0%, 100%);
	background-color: 0px 2px 3px 2px hsla(0, 0%, 0%, 0.35);
	border-radius: 12px;
}

img.noShadow {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}


/*** DYNAMIC IMAGES ***/
div.dynamicImageWrapper, div.dynamicImageWrapperLoading {
	position: relative;
	width: 100%;
	height: 100%;
	border: solid 1px hsl(0, 0%, 75%);
	background-color: hsl(0, 0%, 100%);
	box-sizing: border-box;
}

div.dynamicImageWrapperLoading {
	background-image: url('/lib/images/animations/loading_animation-v1.gif');
	background-position: center center;
	background-repeat: no-repeat;
}

div.dynamicImageElementsContainer {
	position: absolute;
	width: 100%;
	height: 100%;
}

div.dynamicImageElements {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: hsl(0, 0%, 100%);
}

div.dynamicImageContainer {
	position: absolute;
	z-index: 1;
	/*width: 100%;*/
	width: auto;
	left: 0px;
	right: 0px;
	height: 100%;
}

img.dataImageMagnify {
	position: absolute;
	z-index: 8;
	bottom: 0px;
	right: 0px;
	padding: 2px;
	background-color: hsla(0, 0%, 0%, 0.25);
	border: none;
}

div.dynamicImageLegendContainer {
	position: absolute;
	z-index: 9;
	width: 70px;
	height: auto;
	right: 5px;
	top: 9px;
	bottom: 37px;
	font-size: 0px;
}

div.modalOverlay div.dynamicImageLegendContainer {
	width: 150px;
	top: 16px;
	bottom: 35px;
	right: 15px;
}

div.dynamicImageToggleBtnContainer {
	position: absolute;
	top: 0px;
	width: 100%;
}

div.dynamicImageToggleBtn {
	display: inline-block;
	font-family: StandardFontRegular, sans-serif;
	font-size: 12px !important;
	font-weight: bold !important;
	width: 50%;
	line-height: 15px;
	text-align: center;
	color: hsl(200, 100%, 35%) !important;
	box-sizing: border-box;
	pointer-events: all;
	cursor: pointer;
}

div.modalOverlay div.dynamicImageToggleBtn {
	font-size: 15px !important;
	font-weight: bold !important;
	line-height: 18px;
	padding: 0px 5px;
}

div.dynamicImageToggleBtn:first-child {
	text-align: left;
}

div.dynamicImageToggleBtn:last-child {
	text-align: right;
}

div.dynamicImageLegend {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: auto;
	top: 18px;
	bottom: 0px;
	border: solid 1px hsl(0, 0%, 75%);
	background-color: hsl(0, 0%, 100%);
	padding: 3px 0px;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

div.modalOverlay div.dynamicImageLegend {
	top: 22px;
}

div.dynamicImageLegendItem, div.dynamicImageLegendItemDim {
	position: relative;
	color: hsl(0, 0%, 0%);
	padding: 1px 0px;
	pointer-events: all;
	cursor: pointer;
}

div.modalOverlay div.dynamicImageLegendItem, div.modalOverlay div.dynamicImageLegendItemDim {
	padding: 2px 0px;
}

div.dynamicImageLegendItemDim {
	opacity: 0.35;
}

div.dynamicImageLegendItemIconLine {
	position: absolute;
	top: 50%;
	left: 5px;
	width: 8px;
	margin-top: -3px;
	height: 6px;
	background-color: hsl(0, 0%, 0%);
	pointer-events: none;
}

div.modalOverlay div.dynamicImageLegendItemIconLine {
	left: 8px;
	width: 10px;
	margin-top: -4px;
	height: 8px;
}

p.dynamicImageLegendItemLabel {
	position: relative;
	font-family: StandardFontRegular, sans-serif;
	font-size: 11px !important;
	line-height: 110%;
	color: hsl(0, 0%, 0%) !important;
	margin-left: 18px;
	pointer-events: none;
}

div.modalOverlay p.dynamicImageLegendItemLabel {
	font-size: 14px !important;
	font-weight: bold !important;
	line-height: 135%;
	margin-left: 24px;
}

div.dynamicImageLegendItemSelectButton {
	position: absolute;
	right: 0px;
	top: 50%;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	pointer-events: auto;
}

div.modalOverlay div.dynamicImageLegendItemSelectButton {
	right: 3px;
	margin-top: -10px;
	width: 20px;
	height: 20px;
}

div.dynamicImageLegendItemSelectIcon, div.dynamicImageLegendItemSelectIconActive {
	position: absolute;
	left: 3px;
	top: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: solid 1px hsl(0, 0%, 75%);
	box-sizing: border-box;
	pointer-events: none;
}

div.dynamicImageLegendItemSelectIconActive {
	border: none;
}

div.modalOverlay div.dynamicImageLegendItemSelectIcon, div.modalOverlay div.dynamicImageLegendItemSelectIconActive {
	left: 4px;
	top: 4px;
	width: 12px;
	height: 12px;
}

p.dynamicImageTooltipTitle {
	font-family: StandardFontRegular, sans-serif !important;
	color: hsl(0, 0%, 0%) !important;
	font-size: 15px !important;
}

p.dynamicImageTooltipInfo {
	font-family: StandardFontLight, sans-serif !important;
	color: hsl(0, 0%, 25%) !important;
	font-size: 13px !important;
	margin-top: 8px;
}

p.dynamicImageTooltipValue {
	font-family: StandardFontRegular, sans-serif !important;
	color: hsl(0, 0%, 0%) !important;
	font-size: 18px !important;
	margin-top: 6px;
}

div.dynamicImageInstructions {
	position: absolute;
	display: none;
	z-index: 10;
	left: 0px;
	top: 0px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 14px !important;
	font-style: italic !important;
	line-height: 125%;
	color: hsl(220, 50%, 60%) !important;
	background-color: hsl(0, 0%, 100%);
	padding: 3px 5px;
	pointer-events: none;
}

div.dynamicImageOptionsBtn {
	position: absolute;
	z-index: 11;
	left: 5px;
	top: 5px;
	width: 25px;
	height: 25px;
	background-color: hsl(0, 0%, 100%);
	border-radius: 2px;
	cursor: pointer;
}

div.modalOverlay div.dynamicImageOptionsBtn {
	left: 8px;
	top: 8px;
}

div.dynamicImageOptionsBtn:hover {
	background-color: hsl(0, 0%, 92%);
}

div.dynamicImageOptionsBtnIcon1, div.dynamicImageOptionsBtnIcon2, div.dynamicImageOptionsBtnIcon3 {
	position: absolute;
	left: 4px;
	top: 6px;
	width: 17px;
	height: 3px;
	border-radius: 3px;
	background-color: hsl(0, 0%, 40%);
	pointer-events: none;
}

div.dynamicImageOptionsBtnIcon2 {
	top: 11px;
}

div.dynamicImageOptionsBtnIcon3 {
	top: 16px;
}

div.dynamicImageOptionMenu {
	position: absolute;
	z-index: 12;
	left: 5px;
	top: 35px;
	padding: 10px;
	background-color: hsl(0, 0%, 100%);
	border-radius: 2px;
	font-size: 0px;
	box-shadow: 0px 1px 3px 1px hsla(0, 0%, 0%, 0.45);
	box-sizing: border-box;
}

div.modalOverlay div.dynamicImageOptionMenu {
	left: 8px;
	top: 38px;
}

div.dynamicImageOptionMenuItem {
	font-size: 14px;
	line-height: 28px;
	color: hsl(0, 0%, 100%) !important;
	background-color: hsl(200, 100%, 35%);
	border-radius: 3px;
	padding: 0px 8px;
	margin-top: 10px;
	text-align: center;
	cursor: pointer;
	pointer-events: all;
}

div.dynamicImageOptionMenuItem:first-child {
	margin-top: 0px;
}

div.dynamicImageOptionMenuItem:hover {
	background-color: hsl(200, 100%, 45%);
}

div.dynamicImageOptionActiveColor, div.dynamicImageOptionActiveColorOpen {
	position: relative;
	height: 28px;
	background-color: hsl(200, 100%, 35%);
	border-radius: 3px;
	margin-top: 10px;
	box-sizing: border-box;
	cursor: pointer;
}

div.dynamicImageOptionActiveColor:first-child, div.dynamicImageOptionActiveColorOpen:first-child {
	margin-top: 0px;
}

div.dynamicImageOptionActiveColor:hover, div.dynamicImageOptionActiveColorOpen:hover {
	background-color: hsl(200, 100%, 45%);
}

div.dynamicImageOptionActiveColorOpen {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

div.dynamicImageOptionActiveColorSwatch {
	position: absolute;
	width: auto;
	height: auto;
	left: 8px;
	right: 30px;
	top: 8px;
	bottom: 8px;
	border: solid 1px hsl(0, 0%, 100%);
	background-color: hsl(0, 0%, 75%);
	box-sizing: border-box;
	pointer-events: none;
}

.dynamicImageOptionItemArrowSvg {
	position: absolute;
	width: 16px;
	height: 12px;
	right: 8px;
	top: 50%;
	margin-top: -6px;
	fill: hsl(200, 75%, 70%);
	pointer-events: none;
}

div.dynamicImageOptionActiveColorOpen .dynamicImageOptionItemArrowSvg {
	transform: rotate(180deg);
}

div.dynamicImageOptionColorMenu {
	background-color: hsl(200, 100%, 30%);
	border: solid 1px hsl(200, 100%, 30%);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	overflow: hidden;
}

div.dynamicImageOptionColorRange, div.dynamicImageOptionColorRangeSel {
	padding: 10px;
	cursor: pointer;
	box-sizing: border-box;
}

div.dynamicImageOptionColorRange:hover {
	background-color: hsl(200, 100%, 40%);
}

div.dynamicImageOptionColorRangeSel {
	background-color: hsl(55, 100%, 75%);
}

div.dynamicImageOptionColorRangeSwatch {
	height: 10px;
	background-color: hsl(0, 0%, 75%);
	border: solid 1px hsl(0, 0%, 100%);
	box-sizing: border-box;
	pointer-events: none;
}

/*** HIGHCHARTS OVERRIDES ***/
.highcharts-credits {
	display: none !important;
}

.highcharts-menu {
	padding: 5px 5px !important;
}

.highcharts-menu, .highcharts-contextbutton, .highcharts-button-normal {
	cursor: pointer !important;
}
/*** PAGE CONTENT CONTAINER ***/
div.pageContentContainer {
	width: 85%;
	min-width: 500px;
	margin: 0px auto;
}



/*** PAGE CONTENT BOX ***/
div.pageContentBox {
	width: 85%;
	min-width: 500px;
	border: solid 1px hsl(205, 50%, 40%);
	border-radius: 9px;
	background-color: hsla(205, 80%, 12%, 0.60);
	margin: 0px auto;
}

div.pageContentBoxInner {
	padding: 25px;
}

div.pageContentBox p.heading {
	font-size: 18px;
	font-weight: bold;
	color: hsl(50, 100%, 70%);
}

div.pageContent {
	width: 85%;
	min-width: 500px;
	margin: 0px auto;
}



/*** CHECKBOX GRID ***/
table.checkBoxGrid, table.radioGrid {}

table.checkBoxGrid td.item, table.radioGrid td.item {
	vertical-align: middle;
	padding: 12px 10px 0px 10px;
	white-space: nowrap;
}

table.checkBoxGrid tr:last-child td.item, table.radioGrid tr:last-child td.item {
	padding-bottom: 12px;
}

.checkBoxLabel, label.radioLabel {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	white-space: nowrap;
	padding-left: 6px;
	cursor: pointer;
}

span.checkBoxCounter {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(200, 35%, 65%);
	padding-left: 6px;
}



/*** SELCTOR LIST ***/
table.selectorList {}

table.selectorList td.selectorListItem {
	vertical-align: middle;
	padding: 3px 0px;
}

table.selectorList td.selectorListXtra {
	vertical-align: middle;
	padding-left: 8px;
	color: hsl(200, 65%, 60%);
}



/*** APP BLOCK ***/
div.appBlockContainer {
	text-align: center;
}

a.appBlock {
	display: inline-block;
	background-color: hsl(0, 0%, 100%);
	border-radius: 12px;
	padding: 2px;
	margin: 12px;
	cursor: pointer;
}

a.appBlock:hover {
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 0px 12px 3px hsla(200, 100%, 65%, 0.95);
}

a.appBlock:active {}

div.appBlockInner {
	position: relative;
	width: 400px;
	height: 74px;
	pointer-events: none;
}

div.appBlockIcon {
	position: absolute;
	box-sizing: border-box;
	left: 0px;
	top: 0px;
	width: 74px;
	height: 74px;
	border-radius: 10px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

div.appBlockInfo {
	position: absolute;
	width: auto;
	left: 82px;
	right: 0px;
	height: 74px;
	top: 0px;
	overflow: hidden;
}

div.appBlockInfo p.title {
	font-size: 20px;
	font-weight: bold;
	color: hsl(205, 50%, 15%);
	padding-top: 4px;
}

div.appBlockInfo p.summary {
	font-size: 14px;
	line-height: 145%;
	color: hsl(205, 100%, 10%);
	padding: 4px 3px 0px 1px;
}



/*** APP LINK BUTTONS ***/
a.appLinkAreaLight, a.appLinkAreaDark {
	display: inline-block;
	border-radius: 12px;
	padding: 6px 12px 6px 6px;
}

a.appLinkAreaLight:active, a.appLinkAreaDark:active {
	background-image: none;
}

a.appLinkAreaLight {
	background-color: hsl(200, 100%, 35%);
}

.mouseInput a.appLinkAreaLight:hover {
	text-decoration: none;
	background-color: hsl(200, 100%, 45%);
}

a.appLinkAreaDark {
	background-color: hsla(0, 0%, 100%, 0.10);
}

.mouseInput a.appLinkAreaDark:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.15);
}

table.appLinkArea td {
	vertical-align: middle;
}

table.appLinkArea td.image {
	padding-right: 6px;
}

table.appLinkArea td.image div.appLinkAreaImg {
	width: 76px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
}

table.appLinkArea td.image img.appLinkAreaImg {
	display: block;
	width: 76px;
	height: 60px;
}

table.appLinkArea td.label {
	font-size: 1em;
}

a.appLinkAreaLight table.appLinkArea td.label {
	color: hsl(0, 0%, 100%);
}

a.appLinkAreaDark table.appLinkArea td.label {
	color: hsl(0, 0%, 100%);
}

a.appLinkAreaLight table.appLinkArea td.image div.appLinkAreaImg {
	border: solid 1px hsla(0, 0%, 100%, 0.65);
}

a.appLinkAreaDark table.appLinkArea td.image div.appLinkAreaImg {
	border: solid 1px hsl(0, 0%, 90%);
}



/*** INFO MESSAGE ***/
div.infoMessage {
	width: 85%;
	min-width: 500px;
	margin: 0px auto;
	border: solid 1px hsla(0, 100%, 100%, 0.2);
	border-radius: 16px;
	background-color: hsla(0, 0%, 0%, 0.1);
	box-shadow: 0px 3px 6px 2px hsla(0, 0%, 0%, 0.35);
	padding: 0px;
}

div.infoMessage p.message {
	font-size: 1em;
	line-height: 140%;
	color: hsl(0, 0%, 100%);
	padding: 16px;
}



/*** NOTICE MESSAGE ***/
div.noticeMessage {
	display: table;
	max-width: 85%;
	margin: 0px auto;
	border: solid 1px hsla(0, 0%, 100%, 0.25);
	border-radius: 16px;
	background-color: hsla(50, 60%, 45%, 0.5);
	box-shadow: 0px 3px 6px 2px hsla(0, 0%, 0%, 0.35);
	padding: 0px;
}

div.noticeMessage p.message {
	font-size: 0.92em;
	line-height: 140%;
	color: hsl(0, 0%, 100%);
	padding: 8px 16px;
	text-align: center;
}



/*** ITEM INFO ***/
div.itemInfoButton {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: solid 1px hsla(30, 100%, 65%, 0.50);
	margin-left: 8px;
	text-align: center;
	cursor: pointer;
	pointer-events: auto;
}

div.itemInfoButton:hover {
	background-color: hsla(30, 100%, 65%, 0.30);
}

div.itemInfoIcon {
	position: absolute;
	display: block;
	left: 3px;
	top: 3px;
	width: 14px;
	height: 14px;
	border: none;
	pointer-events: none;
}

.itemInfoIconSvg {
	width: 14px;
	height: 14px;
	fill: hsl(30, 100%, 65%);
}

div.itemInfoPanel {
	position: fixed;
	z-index: 150;
	left: 0px;
	top: -100px;
	max-width: 400px;
	border-radius: 3px;
	padding: 5px 10px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	box-sizing: border-box;
}

div.itemInfoPanel p.itemInfoText {
	font-size: 14px;
	color: hsl(0, 0%, 0%);
	line-height: 150%;
	pointer-events: none;
}

div.itemInfoPanel p.itemInfoText a {
	color: hsl(195, 100%, 30%);
	pointer-events: all;
}



/*** CONTENT BLOCK & SECTION TITLE ***/
div.contentBlock, p.sectionTitle {
	margin-top: 32px;
}

div.contentBlock:first-child, p.sectionTitle:first-child {
	margin-top: 0px;
}

div.contentBlock p.title, p.sectionTitle {
	color: hsl(50, 80%, 65%);
	font-size: 1.2em;
	letter-spacing: 1px;
	font-weight: normal;
	text-shadow: hsl(0, 0%, 0%) 0px 1px 2px;
	padding: 0px 0px 4px 0px;
	border-bottom: solid 1px hsl(200, 35%, 35%);
	margin-bottom: 12px;
}

p.subSectionTitle {
	color: hsl(50, 35%, 75%);
	font-size: 1.05em;
	letter-spacing: 1px;
	font-weight: normal;
	padding: 0px 0px 4px 0px;
	border-bottom: solid 1px hsl(200, 35%, 35%);
	margin-bottom: 4px;
}

div.contentBlock div.contentWithImg {
	position: relative;
	min-height: 180px;
}

div.contentBlock div.contentWithImgSmall {
	min-height: 120px;
}

div.contentBlock div.contentWithImgMedium {
	min-height: 180px;
}

div.contentBlock div.contentWithImgLarge {
	min-height: 240px;
}

div.contentBlock div.content {}

div.contentBlock div.image {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 270px;
	height: 100%;
	min-height: 180px;
	border: solid 2px hsl(0, 0%, 100%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

div.contentBlock div.imgSmall {
	width: 180px;
	min-height: 120px;
}

div.contentBlock div.imgMedium {
	width: 270px;
	min-height: 180px;
}

div.contentBlock div.imgLarge {
	width: 360px;
	min-height: 240px;
}

div.contentBlock div.textAsideImg {
	margin-left: 288px;
	padding: 2px 0px 4px 0px;
}

div.contentBlock div.textAsideImgSmall {
	margin-left: 198px;
}

div.contentBlock div.textAsideImgMedium {
	margin-left: 288px;
}

div.contentBlock div.textAsideImgLarge {
	margin-left: 378px;
}

div.contentBlock div.text {
	padding: 0px;
}



/*** LINK GRAPHIC ***/
div.linkGraphic {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 24px;
	font-size: 0px;
}

div.linkGraphicIcon1, div.linkGraphicIcon2, div.linkGraphicIcon3 {
	position: absolute;
  width: 0; 
  height: 0;
  top: 0px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid hsl(190, 100%, 60%);
}

div.linkGraphicIcon1 {
	left: 0px;
	opacity: 0.40;
}

div.linkGraphicIcon2 {
	left: 12px;
	opacity: 0.70;
}

div.linkGraphicIcon3 {
	left: 24px;
}



/*** GENERIC FLOATING PANEL ***/
div.genericLightFloatingPanel {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	border-radius: 3px;
	padding: 15px 15px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	box-sizing: border-box;
	pointer-events: none;
}

div.genericLightFloatingPanel p.genericPanelTitle {
	font-size: 16px;
	font-weight: bold;
	color: hsl(0, 0%, 0%);
	line-height: 135%;
	text-align: center;
	pointer-events: none;
}

div.genericLightFloatingPanel p.genericPanelText {
	font-size: 14px;
	color: hsl(0, 0%, 0%);
	line-height: 135%;
	pointer-events: none;
}



/*** SPACERS ***/
div.contentVertSpacerXS {
	height: 6px;
	pointer-events: none;
}

div.contentVertSpacerS {
	height: 12px;
	pointer-events: none;
}

div.contentVertSpacerSM {
	height: 16px;
	pointer-events: none;
}

div.contentVertSpacerM {
	height: 24px;
	pointer-events: none;
}

div.contentVertSpacerL {
	height: 48px;
	pointer-events: none;
}



/*** HISTORY INDICATOR ***/
div.historyIndicatorOld, div.historyIndicatorOneMonth, div.historyIndicatorThreeMonths, div.historyIndicatorHidden {
	display: inline-block;
	color: hsl(0, 0%, 100%);
	border: solid 1px hsla(0, 0%, 100%, 0.20);
	border-radius: 2px; 
	font-size: 10px;
	line-height: 16px;
	padding: 0px 4px;
	margin-top: 4px;
	cursor: pointer;
}

div.historyIndicatorOld:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

div.historyIndicatorOneMonth {
	color: hsl(205, 100%, 10%);
	background-color: hsl(145, 65%, 65%);
	border: solid 1px hsl(145, 65%, 65%);
}

div.historyIndicatorOneMonth:hover {
	background-color: hsl(145, 100%, 75%);
	border-color: hsl(145, 100%, 75%);
}

div.historyIndicatorThreeMonths {
	color: hsl(205, 100%, 10%);
	background-color: hsl(50, 65%, 65%);
	border: solid 1px hsl(50, 65%, 65%);
}

div.historyIndicatorThreeMonths:hover {
	background-color: hsl(50, 100%, 80%);
	border-color: hsl(50, 100%, 80%);
}

div.historyIndicatorHidden {
	visibility: hidden;
	pointer-events: none;
}



/*** DATA AGE CIRCLES ***/
div.dataAgeRow, div.dataAgeRowActive {
	display: inline-block;
	vertical-align: top;
	font-size: 0px;
}

div.dataAgeRowActive {
	position: relative;
	left: -3px;
	border-radius: 8px;
	padding: 2px; /*2px 3px;*/
	cursor: pointer;
}

div.dataAgeRowActive:hover {
	background-color: hsla(0, 0%, 100%, 0.35);
}

div.dataAgeIcon {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: solid 1px hsl(205, 10%, 45%);
	box-sizing: border-box;
	pointer-events: none;
}

div.dataAgeRowActive:hover div.dataAgeIcon {
	border: solid 1px hsl(205, 10%, 65%);
}

div.dataAgeRow div.dataAgeIcon, div.dataAgeRowActive div.dataAgeIcon {
	/*margin-left: 4px;*/
	margin: 2px;
}

/*
div.dataAgeRow div.dataAgeIcon:first-child, div.dataAgeRowActive div.dataAgeIcon:first-child {
	margin-left: 0px;
}
*/

div.dataAgeIcon0h-1h {
	background-color: hsl(145, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon1h-2h {
	background-color: hsl(140, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon2h-3h {
	background-color: hsl(135, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon3h-4h {
	background-color: hsl(130, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon4h-5h {
	background-color: hsl(125, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon5h-6h {
	background-color: hsl(120, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon6h-7h {
	background-color: hsl(115, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon7h-8h {
	background-color: hsl(110, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon8h-9h {
	background-color: hsl(105, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon9h-10h {
	background-color: hsl(100, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon10h-11h {
	background-color: hsl(95, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon11h-12h {
	background-color: hsl(90, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon12h-24h {
	background-color: hsl(70, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon1d-7d {
	background-color: hsl(60, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon7d-30d {
	background-color: hsl(40, 100%, 65%);
	border: none !important;
}

div.dataAgeIcon30dPlus {
	background-color: hsl(0, 100%, 55%);
	border: none !important;
}
div.animationStripContainer {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

div.animationStripFrames {
	position: absolute;
	left: 0px;
	top: 0px;
}

img.animationStripImg {
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
}
/*** STANDARD LOADING ANIMATIONS ***/
div.loadingAnim {
	position: relative;
	display: none;
	opacity: 0;
	width: 66px;
	height: 66px;
	margin: 0px auto;
	overflow: visible;
}

div.loadAnimW {
	width: 64px !important;
}

div.loadAnimH {
	height: 64px !important;
}

div.loadingAnimFadeIn {
	opacity: 1 !important;
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.35s;
}

div.loadingAnimFadeOut {
	opacity: 0 !important;
	transition: opacity 0.25s;
	-webkit-transition: opacity 0.25s;
}

div.spinnersOff, div.spinnersOn {
	position: relative;
	width: 60px;
	height: 60px;
}

div.outerSpinner {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

div.spinnersOn div.outerSpinner {
	-webkit-animation: outerSpin 1.5s linear infinite;
	animation: outerSpin 1.5s linear infinite;
}

@-webkit-keyframes outerSpin {
	100% {-webkit-transform: rotate(360deg);}
}

@keyframes outerSpin {
	100% {transform:rotate(360deg);}
}

div.innerSpinner {
	position: absolute;
	z-index: 2;
	left: 8px;
	top: 8px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

div.outerSpinner, div.innerSpinner {
	border-top: solid 3px hsl(0, 0%, 100%);
	border-bottom: solid 3px hsl(0, 0%, 100%);
	border-left: solid 3px hsla(0, 0%, 100%, 0.35);
	border-right: solid 3px hsla(0, 0%, 100%, 0.35);
}

div.spinnersOn div.innerSpinner {
	-webkit-animation: innerSpin 1.5s linear infinite;
	animation: innerSpin 1.5s linear infinite;
}

@-webkit-keyframes innerSpin {
	100% {-webkit-transform: rotate(-360deg);}
}

@keyframes innerSpin {
	100% {transform:rotate(-360deg);}
}



/*** SIMPLE-SMALL LOADING ANIMATION ***/
div.loadAnimSimpleSmall {
	width: 20px;
}

div.loadAnimSimpleSmall div.loadingAnim {
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0px;
}

div.loadAnimSimpleSmall div.spinnersOff, div.loadAnimSimpleSmall div.spinnersOn {
	width: 14px;
	height: 14px;
}

div.loadAnimSimpleSmallSpinner {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 16px;
	height: 16px;
	border-radius: 14px;
	border-top: solid 2px hsl(195, 100%, 75%);
	border-bottom: solid 2px hsl(195, 100%, 75%);
	border-left: solid 2px hsla(195, 100%, 75%, 0.35);
	border-right: solid 2px hsla(195, 100%, 75%, 0.35);
}

div.spinnersOn div.noticeLoadAnimSpinner {
	-webkit-animation: outerSpin 1s linear infinite;
	animation: outerSpin 1s linear infinite;
}



/*** NOTICE (HEADING) LOADING ANIMATION ***/
div.noticeLoadAnim {
	width: 20px;
}

div.noticeLoadAnim div.loadingAnim {
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0px;
}

div.noticeLoadAnim div.spinnersOff, div.noticeLoadAnim div.spinnersOn {
	width: 14px;
	height: 14px;
}

div.noticeLoadAnimSpinner {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 16px;
	height: 16px;
	border-radius: 14px;
	border-top: solid 2px hsl(195, 100%, 75%);
	border-bottom: solid 2px hsl(195, 100%, 75%);
	border-left: solid 2px hsla(195, 100%, 75%, 0.35);
	border-right: solid 2px hsla(195, 100%, 75%, 0.35);
}

div.spinnersOn div.noticeLoadAnimSpinner {
	-webkit-animation: outerSpin 1s linear infinite;
	animation: outerSpin 1s linear infinite;
}



/*** PROGRESS BAR WITH SPINNER ***/
div.animProgressBarTrackTime {
	padding: 0px 3px;
}

p.animProgressBarTrackTime {
	font-size: 13px;
	color: hsl(160, 100%, 65%);
	text-align: center;
	margin-bottom: 4px;
}

div.animProgressBar {
	position: relative;
	display: block;
	height: 20px;
	border-radius: 7px;
	background-color: hsla(0, 0%, 0%, 0.15);
	border: solid 2px hsl(160, 100%, 50%);
	box-sizing: border-box;
}

div.animProgressBarTrack {
	position: absolute;
	width: auto;
	height: auto;
	left: 2px;
	right: 2px;
	top: 2px;
	bottom: 2px;
}

div.animProgressBarProgress, div.animProgressBarProgressAnim {
	width: 75%;
	height: 12px;
	border-radius: 3px;
	background-color: hsl(160, 100%, 50%);
	box-sizing: border-box;
}

div.animProgressBarProgressAnim {
	background-size: 25px 25px;
  animation: progBarSripes 1.5s linear infinite;
  background-image: linear-gradient(
    -45deg, 
    hsl(160, 100%, 50%) 25%, 
    hsl(160, 100%, 45%) 25%, 
    hsl(160, 100%, 45%) 50%, 
    hsl(160, 100%, 50%) 50%, 
    hsl(160, 100%, 50%) 75%, 
    hsl(160, 100%, 45%) 75%, 
    hsl(160, 100%, 45%)
  );
	
}

@keyframes progBarSripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 25px 25px;
  }
}
div.headerMenu {
	display: none;
	position: absolute;
	z-index: 9999;
	left: 0px;
	top: 0px;
	pointer-events: none;
}

div.menuList {
	position: relative;
	background-color: hsl(206, 55%, 10%);
	border: solid 2px hsl(195, 25%, 50%);
	border-radius: 6px;
	box-shadow: 0px 1px 2px 1px hsla(0, 0%, 0%, 0.35);
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	pointer-events: auto;
}

div.menuListGroup {
	display: none;
	position: absolute;
	z-index: 9999;
	left: 0px;
	top: 0px;
}

div.headerMenu a.headerMenuItem, div.headerMenu a.headerMenuGroup {
	position: relative;
	display: block;
	height: 38px;
	cursor: pointer;	
}

div.headerMenu a.headerMenuItem:first-child, div.headerMenu a.headerMenuGroup:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

div.headerMenu a.headerMenuItem:last-child, div.headerMenu a.headerMenuGroup:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
}

div.headerMenu a.headerMenuGroup {
	background-image: url('/lib/images/themes/Ocean/misc/arrow-right-small.png');
	background-repeat: no-repeat;
	background-position: center right;
}

.mouseInput div.headerMenu a.headerMenuItem:hover, .mouseInput div.headerMenu a.headerMenuGroup:hover, .mouseInput div.headerMenu a.headerMenuGroupHover  {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.12);
}

.mouseInput div.headerMenu a.headerMenuItem:active {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.20);
}

.mouseInput div.headerMenu a.headerMenuGroupHover:hover {
	text-decoration: none;
}

table.headerMenuItem {
	width: 100%;
}

table.headerMenuItem td {
	vertical-align: middle;
}

table.headerMenuItem td.icon {
	width: 1px;
	padding: 0px 4px 0px 6px;
}

div.headerMenu div.itemIcon, div.headerMenu div.groupIcon {
	width: 36px;
	height: 28px;
	border-radius: 3px;
	background-color: hsl(200, 5%, 50%);
	border: solid 1px hsla(0, 0%, 100%, 0.80);
	box-sizing: border-box;
	font-size: 0px;
	overflow: hidden;
}

div.headerMenu div.groupIcon {
	background-color: hsl(205, 90%, 12%);
}

div.headerMenu a.headerMenuItemActive div.itemIcon, div.headerMenu a.headerMenuItemActive div.groupIcon {
	border-radius: 3px;
	border: solid 1px hsl(50, 100%, 55%);
}

div.headerMenu img.itemIcon {
	display: block;
	width: 34px;
	height: 26px;
}

table.headerMenuItem td.label {}

div.headerMenu a.headerMenuItem p.itemLabel, div.headerMenu a.headerMenuGroup p.itemLabel {
	color: hsl(206, 20%, 98%);
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 1px;
	text-align: left;
	line-height: 38px;
	padding: 0px 8px 0px 4px;
	white-space: nowrap;
}

div.headerMenu a.headerMenuItemActive p.itemLabel, .mouseInput div.headerMenu a.headerMenuItemActive:hover p.itemLabel {
	color: hsl(50, 100%, 60%);
}
div.sectionContainer {
	max-width: 1100px;
	margin: 0px auto;
}

div.sectionContainerWide {
	margin: 0px 0px;
}

div.sectionMenu, div.sectionMenuSmall {
	background-color: hsl(200, 75%, 30%);
	border-radius: 6px;
	padding: 6px;
	text-align: center;
	margin-bottom: 20px;
	font-size: 0px; /*removes space between items*/
	overflow: hidden;
}

.sectionMenuItem, .sectionMenuItemActive {
	display: inline-block;
	color: hsl(0, 0%, 100%);
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: normal;
	white-space: nowrap;
	line-height: 35px;
	padding: 0px 12px;
	border-radius: 4px;
	margin: 2px 2px;
	cursor: pointer;
}

div.sectionMenuSmall .sectionMenuItem, div.sectionMenuSmall .sectionMenuItemActive {
	font-size: 14px;
}

.sectionMenuItemActive {
	color: hsl(200, 100%, 15%);
	background-color: hsl(0, 0%, 100%);
	cursor: default;
}

.mouseInput .sectionMenuItem:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.10);
}

.mouseInput .sectionMenuItemActive:hover {
	text-decoration: none;
}

div.sectionContent {
	position: relative;
	padding: 0px 10px;
}

div.sectionContentWithBg {
	position: relative;
	background-color: hsla(205, 80%, 12%, 0.60);
	padding: 0px 10px;
}

div.sectionContentWithBorder {
	position: relative;
	z-index: 1;
	border: solid 2px hsl(205, 50%, 40%);
	background-color: hsla(205, 80%, 12%, 0.60);
	padding: 16px;
}

div.sectionContent p.text {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	line-height: 150%;
}

div.sectionContent p.text a {
	line-height: 150%;
}

div.sectionContent p.caption {
	font-size: 15px;
	color: hsl(205, 50%, 80%);
	line-height: 140%;
}

div.sectionContent p.caption a {
	line-height: 140%;
}

div.sectionContent img.border {
	background-color: hsl(0, 0%, 0%);
	border: solid 2px hsl(0, 0%, 100%);
}

div.sectionContent p.heading {
	font-size: 20px;
	color: hsl(0, 0%, 100%);
	border-bottom: solid 3px hsl(200, 100%, 35%);
	padding-bottom: 0px;
	margin-bottom: 20px;
	line-height: 16px;
	letter-spacing: 1px;
}

div.sectionContent p.large, div.sectionContent span.large {
	font-size: 18px;
}

div.sectionContent p.impact, div.sectionContent span.impact {
	font-weight: bold;
	color: hsl(50, 100%, 70%);
}

div.sectionContent ul.list {}

div.sectionContent ul.list li {
	font-size: 15px;
	letter-spacing: 0.5px;
	line-height: 140%;
}

p.sectMinorHeading {
	color: hsl(0, 0%, 100%);
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 6px;
}



/***********************************
SECTION TAB SET
***********************************/
div.sectTabSet {}

div.sectTabSet div.tabRow {
	text-align: center;
}

div.sectTabSet div.tabRow a.tab, div.sectTabSet div.tabRow a.tabSelected {
	display: inline-block;
	font-size: 1em;
	color: hsl(205, 15%, 75%);
	padding: 6px 10px;
	white-space: nowrap;
}

div.sectTabSet div.tabRow a.tabSelected {
	color: hsl(205, 100%, 5%);
	background-color: hsl(0, 0%, 100%);
}

.mouseInput div.sectTabSet div.tabRow a.tab:hover {
	text-decoration: none;
	background-color: hsla(205, 50%, 80%, 0.20);
}

.mouseInput div.sectTabSet div.tabRow a.tabSelected:hover {
	text-decoration: none;
}

div.sectTabSet div.contentContainer, div.sectTabSet div.contentContainerMinPad {
	background-color: hsl(0, 0%, 100%);
	padding: 8px;
}

div.sectTabSet div.contentContainerMinPad {
	padding: 8px;
}



/***********************************
ROUND RECT ITEM DARK
***********************************/
div.roundRectDark {
	border: solid 2px hsl(205, 50%, 40%);
	background-color: hsla(205, 80%, 12%, 0.60);
	border-radius: 16px;
	padding: 8px;
}

div.roundRectDarkHeader {
	border: solid 2px hsl(205, 50%, 40%);
	background-color: hsla(205, 50%, 40%, 0.20);
	border-radius: 16px;
	padding: 8px;
}



/***********************************
FEATURE ITEM
***********************************/
table.featureItem {
	width: 100%;
}

table.featureItem td {
	font-size: 1em;
	line-height: 135%;
	vertical-align: middle;
	padding: 6px;
}

table.featureItem td.hilite {
	color: hsl(50, 100%, 65%);
	font-size: 1.1em;
	font-weight: bold;
	text-align: right;
}

table.featureItem td.content {
	width: 95%;
}

table.featureItem td.buttons {
	width: 1%;
}

table.featureItem td.image {
	width: 1%;
}

table.featureItem td p.title {
	color: hsl(0, 0%, 100%);
	font-size: 1.15em;
	font-weight: bold;
	line-height: 135%;
	padding-top: 3px;
}

table.featureItem td p.summary {
	color: hsl(205, 15%, 65%);
	font-size: 1em;
	line-height: 135%;
	padding-top: 3px;
}

table.featureItem td p.subdued {
	color: hsl(205, 35%, 50%);
	font-size: 1em;
	line-height: 135%;
	padding-top: 3px;
}

table.featureItem td span.new {
	color: hsl(140, 100%, 60%);
}

table.featureItem td span.update {
	color: hsl(50, 100%, 50%);
}



/***********************************
ARTICLE TILE
***********************************/
a.articleTile {
	position: relative;
	display: inline-block;
	width: 400px;
	height: 470px;
	vertical-align: top;
	margin: 25px;
	background-color: hsl(0, 0%, 100%);
	border-radius: 6px;
	border: none;
	box-sizing: border-box;
}

a.articleTile:hover {
	text-decoration: none;
	box-shadow: 0px 0px 12px 3px hsl(200, 100%, 65%);
}

div.articleTile {
	position: absolute;
	width: auto;
	height: auto;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
	pointer-events: none;
}

div.articleTileImg {
	width: 100%;
	height: 240px;
	margin-bottom: 12px;
	background-color: hsl(0, 0%, 50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-sizing: border-box;
}

p.articleTileTitle {
	font-size: 22px;
	color: hsl(195, 100%, 35%);
	line-height: 135%;
}

p.articleTileSummary {
	height: 85px;
	font-size: 15px;
	line-height: 140%;
	color: hsl(0, 0%, 15%);
	margin-top: 8px;
	overflow: hidden;
}

p.articleTileDate {
	position: absolute;
	right: 0px;
	bottom: 0px;
	font-size: 14px;
	line-height: 100%;
	color: hsl(0, 0%, 60%);
}

p.articleTileInfo {
	position: absolute;
	left: 0px;
	bottom: 0px;
	font-size: 15px;
	line-height: 100%;
	color: hsl(0, 0%, 60%);
}

p.articleTileProvider {
	position: absolute;
	left: 0px;
	bottom: 0px;
	font-size: 15px;
	line-height: 100%;
	color: hsl(0, 0%, 65%);
}



/***********************************
ARTICLE GRAPHIC
***********************************/
a.articleGraphic {
	position: relative;
	display: block;
	max-width: 650px;
	background-color: hsl(0, 0%, 100%);
	padding: 10px;
	border-radius: 6px;
	border: none;
	margin: 35px auto 0px auto;
	box-sizing: border-box;
}

a.articleGraphic:first-child {
	margin-top: 0px;
}

a.articleGraphic:hover {
	text-decoration: none;
	box-shadow: 0px 0px 12px 3px hsl(200, 100%, 65%);
}

div.articleGraphicContent {
	position: relative;
	height: 170px;
	font-size: 0px;
	/*border-radius: 5px;*/
	background-color: hsl(0, 0%, 50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	pointer-events: none;
}

p.articleGraphicTitle {
	display: inline-block;
	font-size: 20px;
	color: hsl(195, 100%, 35%);
	line-height: 100%;
	padding: 3px 15px 10px 15px;
	background-color: hsl(0, 0%, 100%);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	text-align: center;
}

p.articleGraphicSummary {
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: 0px;
	font-size: 15px;
	line-height: 130%;
	color: hsl(0, 0%, 15%);
	/*background-color: hsla(0, 0%, 100%, 0.75);*/
	padding: 5px 0px;
	text-align: center;
}



/***********************************
LINED TABLE
***********************************/
table.sectionLinedTable {}

table.sectionLinedTable td {
	padding: 5px 15px;
	border-bottom: solid 1px hsla(0, 0%, 100%, 0.10);
}

p.sectionLinedTableHead {
	color: hsl(50, 100%, 65%);
	line-height: 140%;
	font-size: 1.2em;
}



/***********************************
STATUS
***********************************/
p.statusDate {
	font-size: 1em;
	color: hsl(205, 40%, 70%);
	text-align: center;
}

table.statusList {}

table.statusList td {
	font-size: 1em;
	line-height: 135%;
	color: hsl(0, 0%, 100%);
	vertical-align: middle;
	padding: 10px;
}

table.statusList td.heading {
	font-weight: bold;
	text-align: center;
	padding: 0px 10px;
}

table.statusList td.border {
	border-top: solid 2px hsl(205, 35%, 25%);
}

table.statusList tr:first-child td.border {
	border-top: none;
}

table.statusList td.statusIndicator {
	padding: 6px;
}

table.statusList td.hiliteLeft {
	color: hsl(50, 100%, 65%);
	font-size: 1.2em;
	font-weight: bold;
	text-align: right;
	vertical-align: middle;
	border-right: solid 2px hsl(205, 35%, 25%);
}

table.statusList td p.statusOk, table.statusList td p.statusWarning, table.statusList td p.statusCritical, table.statusList td p.statusUnknown {
	font-size: 1em;
	line-height: 135%;
	color: hsla(0, 0%, 0%, 0.9);
	text-align: center;
	border-radius: 8px;
	padding: 4px;
}

table.statusList td p.statusOk {
	background-color: hsl(155, 100%, 50%);
}

table.statusList td p.statusWarning {
	background-color: hsl(55, 100%, 68%);
}

table.statusList td p.statusCritical {
	background-color: hsl(0, 80%, 55%);
	color: hsla(0, 0%, 100%, 0.9);
}

table.statusList td p.statusUnknown {
	background-color: hsl(200, 100%, 65%);
}



/***********************************
MATRIX TABLE
***********************************/
div.matrixContainer {
	position: absolute;
	top: 15px;
	bottom: 15px;
	left: 15px;
	right: 15px;
	border: solid 1px hsl(205, 35%, 35%);
	background-color: hsl(205, 50%, 20%);
	overflow: auto;
}

table.matrix {
	background-color: hsl(205, 50%, 20%);
	/*border: solid 1px hsl(205, 35%, 35%);*/
}

table.matrix td {
	vertical-align: middle;
}

/*need 4 declarations of row (odd/even) and column (odd/even) because of IE*/
table.matrix tr:nth-child(odd) td:nth-child(odd){
	background-color: hsla(0, 0%, 100%, 0.05);
}

table.matrix tr:nth-child(odd) td:nth-child(even){
	background-color: hsla(0, 0%, 100%, 0.1);
}

table.matrix tr:nth-child(even) td:nth-child(odd){
	background-color: hsla(0, 0%, 100%, 0.1);
}

table.matrix tr:nth-child(even) td:nth-child(even){
	background-color: hsla(0, 0%, 100%, 0.15);
}

table.matrix tr:first-child td.corner {
	background-color: hsl(205, 50%, 15%);
}

table.matrix td.headTop, table.matrix td.headLeft {
	font-size: 0.85em;
	color: hsl(0, 0%, 100%);
	padding: 4px;
	background-color: hsl(205, 50%, 15%);
}

/*need 4 declarations of row (odd/even) and column (odd/even) because of IE*/
table.matrix tr:nth-child(odd) td.headTop:nth-child(odd), table.matrix tr:nth-child(odd) td.headLeft:nth-child(odd) {
	background-color: hsl(205, 50%, 15%);
}

table.matrix tr:nth-child(odd) td.headTop:nth-child(even), table.matrix tr:nth-child(odd) td.headLeft:nth-child(even) {
	background-color: hsl(205, 50%, 18%);
}

table.matrix tr:nth-child(even) td.headTop:nth-child(odd), table.matrix tr:nth-child(even) td.headLeft:nth-child(odd) {
	background-color: hsl(205, 50%, 18%);
}

table.matrix tr:nth-child(even) td.headTop:nth-child(even), table.matrix tr:nth-child(even) td.headLeft:nth-child(even) {
	background-color: hsl(205, 50%, 15%);
}

table.matrix td.headTop {
	text-align: center;
}

table.matrix td.headLeft {
	width: 1%;
	text-align: right;
}

table.matrix td.grid {
	text-align: center;
	padding: 3px;
}
/*** BASIC BOX ***/
div.basicBox, div.basicBoxRound {
	border: solid 2px hsl(205, 50%, 40%);
	background-color: hsla(205, 80%, 12%, 0.60);
	padding: 12px;
}

div.basicBoxRound {
	border-radius: 12px;
}

div.basicBoxXtraOpaque {
	background-color: hsla(205, 80%, 12%, 0.85);
}

div.basicBoxHeader, div.basicBoxHeaderRound {
	font-weight: bold;
	text-align: center;
	background-color: hsla(205, 50%, 40%, 0.20);
	padding: 8px;
}

div.basicBoxHeaderRound {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

div.basicBoxHeaderAlert {
	background-color: hsl(0, 100%, 20%);
}

div.basicBoxFooter, div.basicBoxFooterRound {
	text-align: center;
	background-color: hsla(205, 50%, 40%, 0.20);
	padding: 8px;
}

div.basicBoxFooterRound {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

div.basicBoxContents {
	padding: 12px;
}



/*** SOLID BOX ***/
div.solidBox, div.solidBoxRound {
	background-color: hsl(200, 100%, 25%);
	padding: 24px;
	overflow: hidden;
}

div.solidBoxRound {
	border-radius: 12px;
}

div.solidBoxHeader, div.solidBoxHeaderBlank {
	position: relative;
	font-weight: bold;
	text-align: center;
	background-color: hsl(200, 65%, 35%);
	padding: 8px;
}

div.solidBoxHeaderBlank {
	padding: 12px 0px 0px 0px;
	background: none;
}

div.solidBoxContents {
	padding: 12px;
}

div.solidBoxInnerRect {
	padding: 12px;
	background-color: hsla(0, 0%, 0%, 0.20);
}

div.solidBoxFooter {
	position: relative;
	text-align: center;
	background-color: hsl(200, 65%, 35%);
	padding: 8px;
}

div.solidBoxBorder {
	border: none;
}



/*** STANDARD TABLE ***/
table.standard {}

table.standard td {
	font-size: 1em;
	vertical-align: middle;
	padding: 6px;
}

table.standard td.subhead {
	width: 1%;
	color: hsl(205, 25%, 70%);
	line-height: 130%;
	letter-spacing: 1px;
	text-align: right;
	white-space: nowrap;
}

table.standard td.content {
	color: hsl(0, 0%, 100%);
}



/*** LINED LIST TABLE ***/
table.linedListTable {}

table.linedListTable td {
	font-size: 1em;
	vertical-align: middle;
	padding: 6px;
	border-top: solid 1px hsl(205, 35%, 25%);
}

table.linedListTable tr:first-child td { /*need to use <tbody> if table has a heading*/
	border-top: none;
}

table.linedListTable tr.head td {
	padding: 0px;
	background-color: hsl(205, 50%, 30%);
	border-top: none;
}

table.linedListTable tr.headRound td:first-child {
	border-top-left-radius: 8px;
}

table.linedListTable tr.headRound td:last-child {
	border-top-right-radius: 10px;
}

table.linedListTable tr.head p.staticHeading, table.linedListTable tr.head a.sortHeading {
	display: block;
	font-size: 1em;
	color: hsl(205, 50%, 85%);
	font-weight: bold;
	text-align: center;
	padding: 6px 12px;
}

table.linedListTable td.subhead {
	width: 1%;
	color: hsl(205, 25%, 70%);
	line-height: 130%;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

table.linedListTable tr.head a.sortHeading {
	color: hsl(195, 100%, 75%);
	padding-left: 16px;
	padding-right: 16px;
}

.mouseInput table.linedListTable tr.head a.sortHeading:hover {
	text-decoration: none;
	background-color: hsla(205, 65%, 70%, 0.20);
}

.mouseInput table.linedListTable tr.head a.sortHeading:active {
	background-color: hsla(205, 65%, 70%, 0.40);
}

table.linedListTable tr.head a.sortAsc {
	background-image: url('/lib/images/themes/Ocean/misc/arrow-sort_asc-v1.png'), url('/lib/images/themes/Ocean/misc/arrow-sort_asc-v1.png');
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-color: hsla(0, 0%, 0%, 0.20);
}

table.linedListTable tr.head a.sortDesc {
	background-image: url('/lib/images/themes/Ocean/misc/arrow-sort_desc-v1.png'), url('/lib/images/themes/Ocean/misc/arrow-sort_desc-v1.png');
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-color: hsla(0, 0%, 0%, 0.20);
}

table.linedListTable td.label {
	color: hsl(205, 25%, 70%);
	text-align: right;
}

table.linedListTable td.info {
	color: hsl(205, 20%, 80%);
}

table.linedListTable td.text {
	color: hsl(205, 20%, 80%);
	padding: 6px 12px;
}

table.linedListTable td.sort {
	color: hsl(0, 0%, 100%);
	background-color: hsla(0, 0%, 0%, 0.15);
}

table.linedListTable td.content {}

table.linedListTable p.content {
	border-left: solid 2px hsl(205, 35%, 25%);
	padding: 4px 8px;
}

table.linedListTable td.footer {
	background-color: hsl(205, 50%, 30%);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 8px;
}

table.linedListTable td span.subdued {
	color: hsl(205, 20%, 80%);
}



/*** INFO TABLE ***/
table.infoTable {
	margin: 0px auto;
	background-color: hsla(205, 80%, 12%, 0.60);
	border: solid 2px hsl(205, 50%, 40%);
}

table.infoTable td {
	font-size: 0.9em;
	font-style: normal;
	font-weight: normal;
	line-height: 140%;
	text-align: left;
	color: hsl(0, 0%, 100%);
	padding: 6px 8px 5px 8px;
}

table.infoTable tr td:first-child {
	border-left: solid 2px hsl(205, 50%, 40%);
}

table.infoTable tr td:last-child {
	border-right: solid 2px hsl(205, 50%, 40%);
}

table.infoTable tbody td {
	border-top: solid 2px hsl(205, 35%, 25%);
}

table.infoTable tbody tr:first-child td {
	border-top: none;
}

table.infoTable td.title, table.infoTable td.titleWithButtons {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	background-color: hsl(205, 50%, 40%);
}

table.infoTable td.titleWithButtons div.title {
	position: relative;
	font-size: 1.1em;
	text-align: center;
	font-weight: bold;
	color: hsl(0, 0%, 100%);
	padding: 4px 4px 4px 4px;
}

div.titleWithButtons {
	display: block;
	color: hsl(0, 0%, 100%);
	padding: 4px;
	cursor: pointer;
}

.mouseInput a.titleWithButtons:hover {
	text-decoration: none;
}

img.infoTable {
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
}

table.infoTable td.heading {
	width: 1%;
	white-space: nowrap;
	font-weight: bold;
	text-align: right;
	vertical-align: top;
	padding-left: 16px;
	color: hsl(205, 25%, 70%);
	background-color: hsla(0, 0%, 0%, 0.20);
}

table.infoTable td.info {
	width: 99%;
	vertical-align: top;
	color: hsl(60, 50%, 85%);
}

table.infoTable td.info ul.outer {
	margin-left: 14px;
	list-style-type: disc;
}

table.infoTable td.info ul.outer li {
	color: hsl(60, 50%, 85%);
}

table.infoTable td.info ul.inner {
	margin-left: 24px;
	list-style-type: disc;
}

table.infoTable td.info ul.inner li {
	font-weight: normal;
}

table.infoTable td.info ul li.hilite {
	color: hsl(60, 50%, 85%);
	font-weight: bold;
}

table.infoTable td.info ul li.vspace {
	padding-top: 14px;
}

table.infoTable td.info ul li span.underline {
	text-decoration: underline;
}

table.infoTable td.info ul li span.lineInfo {
	color: hsl(60, 50%, 85%);
	padding-left: 4px;
}

table.infoTable ul li {
	line-height: 140%;
}



/*** RAIL TABLE ***/
table.railForm {
	margin-left: auto;
	margin-right: auto;
	background-color: hsla(205, 80%, 12%, 0.60);
}

table.railForm td.title, table.railForm td.titleWithButtons, table.railForm td.contents, table.railForm td.footer, table.railForm td.alert {
	border: solid 2px hsl(205, 50%, 40%);
}

table.railForm td.noTopBorder {
	border-top: none;
}

table.railForm td.title {
	text-align: center;
	font-weight: bold;
	padding: 4px 4px 4px 4px;
	background-color: hsl(205, 50%, 40%);
}

table.railForm td.titleWithButtons {
	background-color: hsl(205, 50%, 40%);
}

table.railForm td.titleWithButtons div.title {
	position: relative;
	text-align: center;
	font-weight: bold;
	padding: 4px 4px 4px 4px;
}

div.railFormDisplayButton, a.railFormDisplayButton {
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 23px;
	height: 23px;
	cursor: pointer;
}

div.railFormDisplayButton:hover, a.railFormDisplayButton:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

div.railFormDisplayButton:active, a.railFormDisplayButton:active {
	background-color: hsla(0, 0%, 100%, 0.30);
}

img.railFormDisplayButton {
	display: block;
	width: 13px;
	height: 13px;
	margin: 5px;
	border: none;
}

table.railForm td.contents {
	padding: 2px 8px;
}

table.railForm td.footer {
	padding: 5px;
}

table.railFormContents {}

table.railFormContents td.subhead, table.railFormContents td.content {
	padding: 6px;
	border: none;
	border-top: solid 1px hsl(205, 35%, 25%);
}

table.railFormContents td.subhead {
	width: 1%;
	color: hsl(205, 25%, 70%);
	font-weight: bold;
	text-align: right;
	vertical-align: middle;
	padding-left: 8px;
	padding-right: 3px;
	padding-top: 7px;
	white-space: nowrap;
}

table.railFormContents td.content {
	width: 99%;
}

table.railFormContents td.content p.content {
	border-left: solid 1px hsl(205, 35%, 25%);
	padding: 4px 5px 3px 5px;
}

table.railFormContents td.content div.content {
	border-left: solid 1px hsl(205, 35%, 25%);
	padding: 0px 0px 0px 2px;
}

table.railFormContents tr:first-child td.subhead, table.railFormContents tr:first-child td.content {
	border: none;
}

table.railFormContents input.textField {
	font-size: 0.92em;
	line-height: 100%;
	padding: 4px;
	color: hsl(0, 0%, 100%);
	border: solid 1px hsl(205, 50%, 35%);
	resize: none;
	background: none;
	background-color: hsla(0, 0%, 0%, 0.35);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



/*** LIST TABLE ***/
table.listTable {
	width: 100%;
}

table.listTable tr.headRound td:first-child {
	border-top-left-radius: 8px;
}

table.listTable tr.headRound td:last-child {
	border-top-right-radius: 10px;
}

table.listTable tr.active {}

table.listTable td {
	padding: 8px 8px 7px 8px;
}

table.listTable td.standard, table.listTable td.sort, table.listTable td.sortAlt {
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	line-height: 140%;
	text-align: left;
	color: hsl(0, 0%, 100%);
	vertical-align: top;
	border-top: solid 1px hsl(205, 35%, 25%);
	padding: 8px 8px 7px 8px;
}

table.listTable td p {
	font-size: 14px !important;
}

table.listTable tr:first-child td.standard, table.listTable tr:first-child td.sort, table.listTable tr:first-child td.sortAlt {
	border-top: none;
}

table.listTable td.headLink, table.listTable td.headLinkSelected, table.listTable td.headLinkSelectedAlt {
	position: relative;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	border-bottom: none;
	padding: 0px;
	background-color: hsl(205, 50%, 30%);
}

div.listTableHead {
	position: relative;
	z-index: 9;
	background-color: hsl(205, 50%, 30%);
}

table.listTable p.headNormLabel, table.listTable .headNorm, table.listTable .headSelected, table.listTable .headSelectedAlt {
	display: block;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	padding: 8px 8px;
	box-sizing: border-box;
	cursor: pointer;
}

table.listTable p.headNormLabel {
	color: hsl(205, 50%, 85%);
	cursor: default;
}

table.listTable .headNorm {
	color: hsl(195, 100%, 75%);
}

table.listTable .headNormHeight0 {
	height: 0px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	overflow: hidden !important;
}

.mouseInput table.listTable .headNorm:hover {
	text-decoration: none;
	background-color: hsla(205, 65%, 70%, 0.20);
}

table.listTable .headSelected, table.listTable td.headLinkSelected {
	color: hsl(195, 100%, 75%);
	background-color: hsla(0, 0%, 0%, 0.20);
}

table.listTable .headSelectedAlt, table.listTable td.headLinkSelectedAlt {
	color: hsl(50, 100%, 10%);
	background-color: hsl(50, 100%, 75%);
}

.mouseInput table.listTable .headSelected:hover, .mouseInput table.listTable .headSelectedAlt:hover {
	text-decoration: none;
}

table.listTable td.hidden {
	padding: 0px;
	border: none;
}

table.listTable tr.clickableRow, table.listTable tr.clickableRowOfflineTemp, table.listTable tr.clickableRowOfflinePerm {
	cursor: pointer;
}

table.listTable tr.offlineTemp, table.listTable tr.clickableRowOfflineTemp {
	background-color: hsl(205, 35%, 20%);
}

table.listTable tr.offlinePerm, table.listTable tr.clickableRowOfflinePerm {
	background-color: hsl(205, 15%, 22%);
}

table.listTable tr.clickableRow:hover {
	/*box-shadow: 0px 0px 6px 2px hsla(195, 100%, 75%, 0.75) inset;*/
	background-color: hsla(0, 0%, 100%, 0.06);
}

table.listTable tr.clickableRowOfflineTemp:hover {
	background-color: hsl(205, 25%, 25%);
}

table.listTable tr.clickableRowOfflinePerm:hover {
	background-color: hsl(205, 10%, 27%);
}

p.listTableLabelClickable {
	display: inline-block;
	/*border-radius: 1px;*/
	cursor: pointer;
}

p.listTableLabelClickable:hover {
	background-color: hsla(0, 0%, 100%, 0.25);
	box-shadow: 0px 0px 0px 5px hsla(0, 0%, 100%, 0.25);
}

div.listTableIconClickable {
	border-radius: 2px;
	cursor: pointer;
}

div.listTableIconClickable:hover {
	background-color: hsla(0, 0%, 100%, 0.35);
	box-shadow: 0px 0px 0px 2px hsla(0, 0%, 100%, 0.35);
	/*filter: saturate(0.85) brightness(1.35);*/
}

div.listTableThumbImgClickable, div.listTableThumbImgClickableSubtle {
	position: relative;
	cursor: pointer;
}

div.listTableThumbImgClickable:hover {
	filter: saturate(0.85) brightness(1.35);
}

div.listTableThumbImgClickableSubtle:hover {
	filter: saturate(0.85) brightness(1.10);
}

/*
div.listTableThumbImgClickable:hover img {
	opacity: 0.75;
}
*/

table.listTable .listTableLink {
	color: hsl(195, 100%, 75%);
}

table.listTable td.standard {}

table.listTable td.details {
	background-color: hsla(0, 0%, 100%, 0.05);
}

table.listTable td.sort {
	background-color: hsla(0, 0%, 0%, 0.15);
}

table.listTable td.sortAlt, table.listTable td.sortAlt p, table.listTable td.sortAlt div {
	color: hsl(50, 100%, 75%);
}

table.listTableDetails {
	margin: 4px 5px 4px 24px;
}

table.listTableDetails td {
	border: none;
	padding: 4px;
}

table.listTableDetails tr:last-child td {
	border: none;
}

table.listTableDetails td.minPad {
	padding: 2px 4px;
}

table.listTableDetails td p.detailHead {
	font-size: 13px;
	color: hsl(190, 20%, 70%);
	white-space: nowrap;
	text-align: right;
	line-height: 135%;
	padding: 3px 0px;
}

table.listTableDetails td p.detailText {
	font-size: 13px;
	color: hsl(190, 20%, 70%);
	line-height: 135%;
	padding: 3px 0px;
}

svg.listTableSortArrowAsc, svg.listTableSortArrowDesc, svg.listTableSortArrowAltAsc, svg.listTableSortArrowAltDesc {
	position: absolute;
	z-index: 1;
	right: 8px;
	top: 50%;
	margin-top: -8px;
	fill: hsl(195, 100%, 75%);
}

svg.listTableSortArrowAltAsc, svg.listTableSortArrowAltDesc {
	fill: hsl(50, 100%, 10%);
}

svg.listTableSortArrowDesc, svg.listTableSortArrowAltDesc {
	transform: rotate(180deg);
}

table.listTable td.listTableHeadOptionPanel {
	position: relative;
	height: 0px;
	font-size: 0px;
	padding: 0px;
}

div.listTableHeadOptionPanel {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	/*border-radius: 3px;*/
	padding: 10px 10px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 0px 1px hsla(0, 0%, 0%, 0.25); /*0px 1px 1px 1px hsla(0, 0%, 0%, 0.25)*/;
	border-top: none;
	box-sizing: border-box;
	overflow-y: auto;
	pointer-events: auto;
}



div.listTableOptionButton, div.listTableOptionButtonDisabled, div.listTableOptionButtonActive {
	font-size: 0px;
	padding: 5px;
	cursor: pointer;
}

div.listTableOptionButton:hover, div.listTableOptionButtonActive:hover {
	background-color: hsl(195, 100%, 95%);
}

div.listTableOptionButtonDisabled {
	pointer-events: none;
}

div.listTableOptionButtonContents {
	position: relative;
}

p.listTableOptionsGroupLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	color: hsl(0, 0%, 0%);
	text-align: center;
}

td.listTableOptionsDiv {
	border-left: solid 1px hsl(0, 0%, 85%);
}

div.listTableOptionCheckBox {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 24px;
	height: 24px;
	border: solid 2px hsl(0, 0%, 75%);
	border-radius: 3px;
	box-sizing: border-box;
	pointer-events: none;
}

div.listTableOptionButtonActive div.listTableOptionCheckBox {
	border-color: hsl(195, 100%, 45%); /*hsl(150, 100%, 50%);*/
}

div.listTableOptionButtonDisabled div.listTableOptionCheckBox {
	border-color: hsl(0, 0%, 92%) !important;
	background-color: hsl(0, 0%, 92%);
}

.listTableOptionCbIconSvg {
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	left: 3px;
	top: 3px;
	fill: hsl(195, 100%, 45%); /*hsl(150, 100%, 50%)*/;
}

div.listTableOptionButton .listTableOptionCbIconSvg, div.listTableOptionButtonDisabled .listTableOptionCbIconSvg {
	display: none;
}

p.listTableOptionCbLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: hsl(0, 0%, 65%);
	padding-left: 32px;
	white-space: nowrap;
	pointer-events: none;
}

div.listTableOptionButtonActive p.listTableOptionCbLabel {
	color: hsl(192, 100%, 38%);
}

span.listTableOptionCbLabelCount {
	color: hsl(0, 0%, 70%);
	padding-left: 6px;
}

div.listTableOptionButtonActive span.listTableOptionCbLabelCount {
	color: hsl(192, 40%, 60%);
}



div.listTableSingleSelButton, div.listTableSingleSelButtonDisabled, div.listTableSingleSelButtonActive {
	font-size: 0px;
	padding: 5px;
	cursor: pointer;
}

div.listTableSingleSelButton:hover, div.listTableSingleSelButtonActive:hover {
	background-color: hsl(195, 100%, 95%);
}

div.listTableSingleSelButtonDisabled {
	pointer-events: none;
}

div.listTableSingleSelButtonContents {
	position: relative;
}

p.listTableSingleSelsGroupLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	color: hsl(0, 0%, 0%);
	text-align: center;
}

td.listTableSingleSelDiv {
	border-left: solid 1px hsl(0, 0%, 85%);
}

div.listTableSingleSelCircle {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 24px;
	height: 24px;
	border: solid 2px hsl(0, 0%, 75%);
	background-color: none;
	border-radius: 50%;
	box-sizing: border-box;
	pointer-events: none;
}

div.listTableSingleSelButtonActive div.listTableSingleSelCircle {
	border-color: hsl(195, 100%, 45%);
	background-color: hsl(195, 100%, 45%);
}

div.listTableSingleSelButtonDisabled div.listTableSingleSelCircle {
	border-color: hsl(0, 0%, 92%);
	background-color: hsl(0, 0%, 92%);
}

p.listTableSingleSelItemLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: hsl(0, 0%, 65%);
	padding-left: 32px;
	white-space: nowrap;
	pointer-events: none;
}

div.listTableSingleSelButtonActive p.listTableSingleSelItemLabel {
	color: hsl(192, 100%, 38%);
}



div.listTableOptionAllNone {
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	background-color: hsl(195, 100%, 45%);
	border-radius: 3px;
	cursor: pointer;
}

div.listTableOptionAllNone:hover {
	background-color: hsl(195, 100%, 55%);
}

div.listTableOptionClose {
	position: absolute;
	z-index: 1;
	right: 8px;
	top: 8px;
	padding: 5px;
	border-radius: 3px;
	font-size: 0px;
	cursor: pointer;
}

div.listTableOptionClose:hover {
	background-color: hsl(0, 0%, 95%);
}

img.listTableOptionClose {
	display: block;
	width: 18px;
	height: 18px;
	border: none;
	pointer-events: none;
}

input.listTableOptionSearch, input.listTableOptionSearchDisabled {
	width: 400px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	line-height: 140%;
	padding: 5px;
	color: hsl(192, 100%, 35%);
	border: solid 2px hsl(195, 100%, 45%);
	resize: none;
	background: none;
	background-color: hsl(0, 0%, 100%);
	border-radius: 3px;
	box-sizing: border-box;
	margin: 5px;
}

input.listTableOptionSearchDisabled {
	border: solid 2px hsl(0, 0%, 75%);
}

input.listTableOptionSearch:focus {
	outline: none;
	box-shadow: 0px 0px 4px 3px hsl(195, 100%, 75%);
}

input.listTableOptionSearchDisabled:focus {
	outline: none;
}

div.listTableOptionSearchCancel {
	position: absolute;
	z-index: 1;
	left: 4px;
	top: 50%;
	margin-top: -14px;
	border-radius: 3px;
	font-size: 15px;
	line-height: 25px;
	padding: 0px 6px;
	color: hsl(0, 0%, 20%);
	border: solid 1px hsl(0, 0%, 75%);
	border-radius: 5px;
	cursor: pointer;
}

div.listTableOptionSearchCancel:hover {
	background-color: hsl(0, 0%, 95%);
}

a.listTableAppButton {
	position: relative;
	display: inline-block;
	background-color: hsla(0, 0%, 100%, 0.25);
	border-radius: 5px;
	font-size: 0px;
	text-decoration: none;
}

a.listTableAppButton:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.35);
}

img.listTableAppButtonIcon {
	position: absolute;
	z-index: 1;
	left: 5px;
	top: 5px;
	display: block;
	width: 38px;
	height: 30px;
	border: solid 1px hsla(0, 0%, 100%, 0.35);
	border-radius: 4px;
}

div.listTableAppButtonLabel {
	/*font-family: StandardFontRegular, sans-serif;*/
	font-size: 14px;
	color: hsl(0, 0%, 100%) !important;
	line-height: 42px;
	padding-left: 52px;
	padding-right: 8px;
}

span.listTableSearchMatch {
	color: hsl(0, 0%, 100%) !important;
	background-color: hsl(195, 100%, 40%) !important;
	/*padding: 0px 2px !important;*/
}
div.debugMessage {
	position: fixed;
	z-index: 1000;
	right: 0px;
	top: 0px;
	font-size: 0.85em; /*12px;*/
	color: #00ff00;
	text-align: left;
	padding: 6px 28px 6px 8px;
	background-color: #000000;
	border-left: solid 1px #00ff00;
	border-bottom: solid 1px #00ff00;
	max-height: 1000px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-touch-callout: text !important;
	-webkit-user-select: text !important;
	-khtml-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
	pointer-events: all;
}
div.buttonWrapSingle {}

div.buttonWrapList {
	margin-top: 8px;
}



/* LINK BUTTONS */
a.simpleLinkButton, div.simpleLinkButton {
	display: inline-block;
	color: hsl(195, 100%, 75%);
	padding: 14px 16px;
	cursor: pointer;
}

.mouseInput a.simpleLinkButton:hover, .mouseInput div.simpleLinkButton:hover {
	text-decoration: none;
	background-color: hsla(195, 100%, 75%, 0.15);
}

.simpleLinkButtonBorder {
	border-radius: 5px;
	border: solid 1px hsla(195, 65%, 75%, 0.25);	
}

a.linkButton, div.linkButton {
	display: inline-block;
	color: hsl(0, 0%, 100%);
	font-size: 15px;
	letter-spacing: 1px;
	font-weight: normal;
	text-align: center;
	line-height: 35px;
	padding: 0px 24px;
	background-color: hsl(200, 100%, 35%);
	border: none;
	border-top-left-radius: 22px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 22px;
	cursor: pointer;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

.mouseInput a.linkButton:hover, .mouseInput div.linkButton:hover {
	text-decoration: none;
	background-color: hsl(200, 100%, 40%);
}

a.linkButton:active, div.linkButton:active {
	background-color: hsl(200, 100%, 45%);
}



/* ICON BUTTON */
div.iconButton, a.iconButton {
	display: inline-block;
	padding: 3px;
	cursor: pointer;
}

div.iconButton:hover, a.iconButton:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

img.iconButtonS, img.iconButtonM {
	display: block;
	border: none;
}

img.iconButtonS {
	width: 13px;
	height: 13px;
}

img.iconButtonM {
	width: 17px;
	height: 17px;
}



/* HEADER BUTTON */
.headerButton, .headerButtonActive, .headerButtonHover, .headerButtonActiveHover {
	/*height and line-height dynamically set in Framework.php */
	display: inline-block;
	vertical-align: top;
	color: hsl(200, 35%, 55%);
	padding: 0px 10px;
	font-size: 0px;
	cursor: pointer;
	pointer-events: auto;
}

.mouseInput .headerButton:hover, .headerButtonHover {
	background-color: hsla(0, 0%, 100%, 0.10);
	text-decoration: none;
}

.headerButtonActive, .headerButtonActiveHover {
	color: hsl(50, 100%, 60%);
}

.mouseInput .headerButtonActive:hover, .headerButtonActiveHover {
	background-color: hsla(0, 0%, 100%, 0.10);
	text-decoration: none;
}

.headerButton span.label, .headerButtonActive span.label, .headerButtonHover span.label, .headerButtonActiveHover span.label {
	position: relative;
	display: inline-block;
	top: 0px;
	font-family: StandardFontRegular, sans-serif !important;
	font-size: 16px;
}

.headerButton img.icon, .headerButtonActive img.icon, .headerButtonHover img.icon, .headerButtonActiveHover img.icon {
	position: relative;
	top: 6px;
	height: 24px;
	margin-right: 4px;
	border: none;
}

.headerButtonExternal {
	color: hsl(350, 55%, 55%);
}

.headerIconStroke {
	border: solid 1px hsl(200, 35%, 55%);
}

.headerButtonActive .headerIconStroke, .headerButtonActiveHover .headerIconStroke {
	border: solid 1px hsl(50, 100%, 60%);
}

.headerButtonIconSvg {
	position: relative;
	display: block;
	/*width: specified in svg html*/
	/*height: specified in svg html*/
	/*top: specified in svg html*/
	fill: hsl(200, 35%, 55%);
	pointer-events: none;
}

.headerButtonActive .headerButtonIconSvg {
	fill: hsl(50, 100%, 60%);
}



/* PAGE BUTTON COMMON STYLING */
.pageButton {
	/*display: set in Buttons::standardButton();*/
	font-size: 14px;
	cursor: pointer;
	pointer-events: auto;
}

.mouseInput .pageButton:hover {
	text-decoration: none;
}

.mouseInput .pageButton:focus {
	text-decoration: none;
}

.pageButton p.btnText {
	font-size: 15px;
	line-height: 35px;
	text-align: center;
	padding: 0px 15px;
	white-space: nowrap;
	pointer-events: none;
}

.pageButton p.btnText a {}

.mouseInput .pageButton p.btnText a:hover {
	text-decoration: none;
}	

.pageButton p.btnData {
	display: none;
}

.smallRound {
	border-radius: 2px;
}

.mediumRound {
	border-radius: 4px;
}

.largeRound {
	border-radius: 8px;
}



/* STANDARD BUTTON */
.btnStandard, .btnStandardDisabled {
	background-color: hsl(0, 0%, 90%);
	border: none;
	pointer-events: auto;
}

.mouseInput .btnStandard:hover {
	background-color: hsl(0, 0%, 95%);
}

.mouseInput .btnStandard:active, .mouseInput .btnStandard:focus {
	background-color: hsl(0, 0%, 100%);
}

.btnStandard p.btnText, .btnStandard p.btnText a, .btnStandardDisabled p.btnText, .btnStandardDisabled p.btnText a {
	color: hsl(0, 0%, 0%);
	pointer-events: none;
}

.btnStandardDisabled {
	background-color: hsl(0, 0%, 90%);
	opacity: 0.35;
	filter: alpha(opacity=35);
	pointer-events: none;
}

.btnStandardDisabled p.btnText {
	background-image: none;
	pointer-events: none;
}



/* IMPACT BUTTON */
.btnImpact, .btnImpactDisabled {
	background-color: hsl(50, 60%, 70%);
	border: none;
	pointer-events: auto;
}

.mouseInput .btnImpact:hover {
	background-color: hsl(50, 65%, 75%);
}

.mouseInput .btnImpact:active, .mouseInput .btnImpact:focus {
	background-color: hsl(50, 60%, 80%);
}

.btnImpact p.btnText, .btnImpact p.btnText a, .btnImpactDisabled p.btnText, .btnImpactDisabled p.btnText a {
	color: hsl(50, 0%, 0%);
}

.btnImpactDisabled {
	background-color: hsl(50, 20%, 70%);
	opacity: 0.35;
	filter: alpha(opacity=35);
	pointer-events: none;
}

.btnImpactDisabled p.btnText {
	background-image: none;
}



/* GHOST BUTTON */
.btnGhost, .btnGhostDisabled {
	border-radius: 3px;
	border: solid 1px none;
	background: none;
	background-color: hsla(0, 0%, 100%, 0.25);
}

.mouseInput .btnGhost:hover {
	background-color: hsla(0, 0%, 100%, 0.35);
}

.mouseInput .btnGhost:active, .mouseInput .btnGhost:focus {
	background-color: hsla(0, 0%, 100%, 0.45);
}

.btnGhost p.btnText, .btnGhost p.btnText a, .btnGhostDisabled p.btnText, .btnGhostDisabled p.btnText a {
	color: hsla(0, 0%, 100%, 0.80);
}

.btnGhostDisabled {
	background-color: hsla(0, 0%, 100%, 0.05);
	opacity: 0.50;
	filter: alpha(opacity=50);
	pointer-events: none;
}

.btnGhostDisabled p.btnText {
	background-image: none;
}



/* IMAGE BUTTON */
.imageButton {
	display: inline-block;
	cursor: pointer;
}



/* SELECTOR LIST BUTTON */
.selectorListButton, .selectorListButtonActive {
	display: block;
	color: hsl(0, 0%, 0%);
	text-align: center;
	padding: 5px 10px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
}

.selectorListButton {
	background-color: hsl(0, 0%, 86%);
}

.mouseInput .selectorListButton:hover {
	text-decoration: none;
	background-color: hsl(0, 0%, 100%);
}

.selectorListButtonActive {
	background-color: hsl(50, 100%, 55%);
	pointer-events: none;
}

.mouseInput .selectorListButtonActive:hover {
	text-decoration: none;
}



/* IMAGE BUTTON WITH LABEL */
div.btnImgWithLabelLight, a.btnImgWithLabelLight, div.btnImgWithLabelDark, a.btnImgWithLabelDark {
	display: block;
	border-radius: 4px;
	padding: 4px;
	cursor: pointer;
}

.mouseInput div.btnImgWithLabelLight:hover, .mouseInput a.btnImgWithLabelLight:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.15);
}

.mouseInput div.btnImgWithLabelDark:hover, .mouseInput a.btnImgWithLabelDark:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 0%, 0.06);
}

table.btnImgWithLabelLight, table.btnImgWithLabelDark {}

table.btnImgWithLabelLight td, table.btnImgWithLabelDark td {
	vertical-align: middle;
}

table.btnImgWithLabelLight td.image, table.btnImgWithLabelDark td.image {}

table.btnImgWithLabelLight td.labelLeft, table.btnImgWithLabelLight td.labelRight, table.btnImgWithLabelDark td.labelLeft, table.btnImgWithLabelDark td.labelRight {
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
	padding: 0px 5px;
}

table.btnImgWithLabelLight td.labelLeft, table.btnImgWithLabelLight td.labelRight {
	color: hsl(0, 0%, 100%);
}

table.btnImgWithLabelDark td.labelLeft, table.btnImgWithLabelDark td.labelRight {
	color: hsl(0, 0%, 0%);
}

table.btnImgWithLabelLight td.labelLeft, table.btnImgWithLabelDark td.labelLeft {
	text-align: right;
}

table.btnImgWithLabelLight td.labelRight, table.btnImgWithLabelDark td.labelRight {
	text-align: left;
}



/* INFO WINDOW FRAME BUTTON */
.btnIwFrame {
	/*display: block; set in button creation script*/
	border: solid 1px hsl(0, 0%, 82%);
	border-radius: 4px;
	white-space: nowrap;
	text-align: center;
	padding: 4px;
	cursor: pointer;
}

.mouseInput .btnIwFrame:hover {
	background-color: hsl(0, 0%, 95%);
	text-decoration: none;
}

.mouseInput .btnIwFrame:active {
	background-image: none;
}

.btnIwFrame span.label {
	position: relative;
	top: 1px;
	font-size: 0.9em;
	font-weight: normal;
	color: hsl(0, 0%, 0%);
}



/* MORE & LESS BUTTONS */
div.moreButton, div.lessButton, div.moreLessBlankButton {
	position: relative;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

div.panelSectionHead div.moreButton, div.panelSectionHead div.lessButton, div.panelSectionHead div.moreLessBlankButton {
	position: relative;
	width: 26px;
	height: 26px;
	cursor: pointer;
}

div.moreLessBlankButton {
	cursor: none;
	pointer-events: none;
}

div.moreButton:hover, div.lessButton:hover {
	background-color: hsla(0, 0%, 100%, 0.10);
}	

div.lessMoreIcon {
	position: absolute;
	width: 16px;
	height: 16px;
	left: 4px;
	top: 4px;
	pointer-events: none;
}

div.panelSectionHead div.lessMoreIcon {
	width: 18px;
	height: 18px;
	left: 4px;
	top: 4px;
}

div.lessMoreIconHoriz {
	position: absolute;
	display: block;
	width: 16px;
	height: 2px;
	left: 0px;
	top: 7px;
	background-color: hsl(0, 0%, 100%);
}

div.panelSectionHead div.lessMoreIconHoriz {
	width: 18px;
	height: 2px;
	left: 0px;
	top: 8px;
	background-color: hsl(200, 100%, 80%);
}

div.lessMoreIconVert {
	position: absolute;
	display: block;
	width: 2px;
	height: 16px;
	left: 7px;
	top: 0px;
	background-color: hsl(0, 0%, 100%);
}

div.panelSectionHead div.lessMoreIconVert {
	width: 2px;
	height: 18px;
	left: 8px;
	top: 0px;
	background-color: hsl(200, 100%, 80%);
}

div.lessButton div.lessMoreIconVert {
	display: none;
}



/* ON-OFF BUTTON */
div.toggleButtonOn, div.toggleButtonOff {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 28px;
	border-radius: 14px;
	background-color: hsl(155, 100%, 38%);
	overflow: hidden;
	cursor: pointer;
}

div.toggleButtonOff {
	background-color: hsla(0, 0%, 0%, 0.35);
}

div.toggleButtonCircle {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: hsl(0, 0%, 100%);
}

div.toggleButtonOn div.toggleButtonCircle {
	top: 2px;
	right: 2px;
}

div.toggleButtonOff div.toggleButtonCircle {
	top: 2px;
	left: 2px;
}

div.toggleButtonTextOn, div.toggleButtonTextOff {
	position: absolute;
	font-family: StandardFontRegular, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 28px;
}

div.toggleButtonOn div.toggleButtonTextOn {
	display: block;
	color: hsl(0, 0%, 100%);
	top: 0px;
	left: 7px;
}

div.toggleButtonOff div.toggleButtonTextOn {
	display: none;
	color: hsl(0, 0%, 100%);
	top: 0px;
	left: 7px;
}

div.toggleButtonOn div.toggleButtonTextOff {
	display: none;
	color: hsla(0, 0%, 100%, 0.50);
	top: 0px;
	right: 5px;
}

div.toggleButtonOff div.toggleButtonTextOff {
	display: block;
	color: hsla(0, 0%, 100%, 0.50);
	top: 0px;
	right: 5px;
}



/* CHECKBOX BUTTONS */
div.checkBoxChecked, div.checkBoxUnchecked {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	border: solid 2px hsl(150, 100%, 65%);
	border-radius: 3px;
	box-sizing: border-box;
	cursor: pointer;
}

div.checkBoxUnchecked {
	border-color: hsla(0, 0%, 100%, 0.30);
}

.checkBoxIconSvg {
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	left: 3px;
	top: 3px;
	fill: hsl(150, 100%, 65%);
}

div.checkBoxUnchecked .checkBoxIconSvg {
	display: none;
}

div.checkMarkOn, div.checkMarkOff {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.checkMarkIconSvg {
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	fill: hsl(150, 100%, 65%);
}

div.checkMarkOff .checkMarkIconSvg {
	display: none;
}

.checkMarkDisabledIconSvg {
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
	left: 1px;
	top: 1px;
	fill: hsla(0, 0%, 100%, 0.30);
}

div.checkMarkOn .checkMarkDisabledIconSvg {
	display: none;
}



/* SYNTH ITEM BUTTON */
div.synthItem, a.synthItem {
	padding: 4px 12px;
	border-radius: 6px;
	margin: 4px;
	vertical-align: top;
	cursor: pointer;
}

div.synthItemDark, a.synthItemDark {
	background-color: hsl(200, 65%, 30%);
}

.mouseInput a.synthItemDark:hover {
	text-decoration: none;
	background-color: hsl(200, 60%, 40%);
}

div.synthItemStandard, a.synthItemStandard {
	background-color: hsl(0, 0%, 90%);
}

.mouseInput a.synthItemStandard:hover {
	text-decoration: none;
	background-color: hsl(0, 0%, 100%);
}

table.synthItem {}

table.synthItem td {
	vertical-align: middle;
}

table.synthItem td.img {
	padding: 4px 0px;
}

table.synthItem td.label {
	font-size: 14px;
	line-height: 130%;
	text-align: left;
}

.synthItemDark td.label {
	color: hsl(0, 0%, 100%);
}

.synthItemStandard td.label {
	color: hsl(0, 0%, 0%);
}

table.synthItem td.hSpacer {
	padding-left: 8px;
}



/* OPTION ON/OFF BUTTON*/
div.optionButtonOff, div.optionButtonOn, div.optionButtonOnAlt {
	display: inline-block;
	color: hsl(0, 0%, 100%);
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: normal;
	text-align: center;
	line-height: 32px;
	padding: 0px 12px;
	border: solid 1px hsla(0, 0%, 100%, 0.25);
	border-radius: 5px;
	/*margin: 3px;*/
	cursor: pointer;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

div.optionButtonOff:hover {
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.optionButtonOn {
	color: hsl(205, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
	border-color: hsl(0, 0%, 100%);
}

div.optionButtonOn:hover {
	/*
	background-color: hsl(205, 100%, 95%);
	border-color: hsl(205, 100%, 95%);
	*/
}

div.optionButtonOnAlt {
	color: hsl(205, 100%, 25%);
	background-color: hsl(0, 0%, 100%);
	border-color: hsl(195, 100%, 45%);
}

div.optionButtonOnAlt:hover {
	/*
	background-color: hsl(205, 100%, 95%);
	border-color: hsl(195, 100%, 45%);
	*/
}
div.guidePanelHidden, div.guidePanelVisible {
	position: fixed;
	z-index: 999;
	display: none;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: hsla(0, 0%, 0%, 0.35);
	box-sizing: border-box;
	pointer-events: none;
	transition: opacity 0.35s linear;
}

div.guidePanelVisible {
	opacity: 1;
	pointer-events: auto;
}

div.guideInfoPanel {
	position: absolute;
	z-index: 3;
	width: 100%;
	/*left: 0px;*/
	right: 0px;
	top: 0px;
	padding: 20px;
	border-radius: 15px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 2px 1px hsla(0, 0%, 0%, 0.35);
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: none;
}



div.guideHeader {
	position: relative;
	height: 50px;
	font-size: 0px;
	box-sizing: border-box;
}

div.guideHeaderL, div.guideHeaderR {
	position: absolute;
	bottom: 10px;
	height: 40px;
	font-size: 0px;
	box-sizing: border-box;
}

div.guideHeaderL {
	left: 0px;
}

div.guideHeaderR {
	right: 0px;
}

div.guideInfoTitle {
	position: relative;
	width: auto;
	height: 40px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 24px;
	line-height: 40px;
	color: hsl(0, 0%, 0%);
	text-align: center;
	margin-bottom: 10px;
	box-sizing: border-box;
}



div.guideFooter {
	position: relative;
	height: 50px;
	font-size: 0px;
	box-sizing: border-box;
}

div.guideFooterL, div.guideFooterR {
	position: absolute;
	top: 10px;
	height: 40px;
	font-size: 0px;
	box-sizing: border-box;
}

div.guideFooterL {
	left: 0px;
}

div.guideFooterR {
	right: 0px;
}

div.guideInfoPanel div.checkBoxChecked {
	border-color: hsl(150, 100%, 42%);
}

div.guideInfoPanel .checkBoxIconSvg {
	fill: hsl(150, 100%, 42%);
}

div.guideInfoPanel div.checkBoxUnchecked {
	border-color: hsl(0, 0%, 75%);
}

p.guideFooterCheckBoxText {
	font-size: 15px;
	color: hsl(0, 0%, 10%);
}



div.guideBtnNextPrev, div.guideBtnClose, div.guideBtnDisabled {
	display: inline-block;
	vertical-align: top;
	width: 80px;
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

div.guideBtnNextPrev {
	background-color: hsl(200, 100%, 35%);
}

div.guideBtnClose {
	background-color: hsl(0, 100%, 40%);
}

div.guideBtnDisabled {
	background-color: hsl(0, 0%, 95%);
	cursor: default;
	pointer-events: none;
}

/*
div.guidePageCount {
	display: inline-block;
	vertical-align: top;
	width: 70px;
	height: 40px;
	padding: 0px 10px;
	text-align: center;
}

p.guidePageCount, p.guidePageCountDivider, p.guidePageCountTotal {
	display: inline-block;
	vertical-align: top;
	height: 40px;
	font-size: 24px;
	font-weight: bold;
	line-height: 40px;
	color: <guide->hsl(0, 0%, 0%);
	text-align: center;
}

p.guidePageCountDivider {
	font-size: 34px;
	font-weight: normal;
	color: hsl(0, 0%, 70%);
	padding: 0px 3px;
}

p.guidePageCountTotal {
	font-weight: normal;
	color: hsl(0, 0%, 65%);
}
*/

div.guidePageButtons {
	display: inline-block;
	height: 40px;
	margin-right: 12px;
}

div.guidePageButton, div.guidePageButtonSelected {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 40px;
	cursor: pointer;
	pointer-events: auto;
}

div.guidePageButtonCircle {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -5px;
	margin-top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: hsl(200, 25%, 85%);
}

div.guidePageButtonSelected div.guidePageButtonCircle {
	margin-left: -7px;
	margin-top: -7px;
	width: 14px;
	height: 14px;
	background-color: hsl(200, 100%, 35%);
}



div.guidePages {
	position: relative;
	/*min-height: 100px;*/
	max-height: 500px;
	padding: 20px 0px;
	border-top: solid 1px hsl(0, 0%, 90%);
	border-bottom: solid 1px hsl(0, 0%, 90%);
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	pointer-events: auto;
}

div.guidePage {}

div.guideContentBlock {
	margin-top: 20px;
}

div.guideContentBlockXtraSpace {
	margin-top: 30px;
}

div.guideContentBlock:first-child, div.guideContentBlockXtraSpace:first-child {
	margin-top: 0px;
}

p.guideText {
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 0%);
	margin-top: 20px;
}

p.guideText a {
	color: hsl(195, 100%, 30%);
}

img.guideImage {
	display: block;
	margin-top: 20px;
	background-color: hsl(0, 0%, 85%);
	border: solid 1px hsl(0, 0%, 50%);
}

div.guideImage {
	margin-top: 20px;
	min-height: 100px;
	background-color: hsl(0, 0%, 85%);
	border: solid 1px hsl(0, 0%, 50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

p.guideText:first-child, img.guideImage:first-child, div.guideImage:first-child {
	margin-top: 0px;
}

span.guideTip {
	position: relative;
	top: 1px;
	font-weight: bold;
	color: hsl(0, 0%, 100%);
	background-color: hsl(45, 100%, 45%);
	padding: 4px 8px;
	border-radius: 5px;
}

div.guideOptBtn, div.guideOptBtnSelected {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 0%);
	border-radius: 5px;
	border: solid 1px hsl(0, 0%, 75%);
	line-height: 35px;
	padding: 0px 15px;
	margin-top: 10px;
	margin-right: 20px;
	cursor: pointer;
}

div.guideOptBtn:hover {}

div.guideOptBtnSelected {
	background-color: hsl(150, 100%, 65%);
	border-color: hsl(150, 100%, 45%);
	cursor: default;
	pointer-events: none;
}



div.guideItemHilites {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

div.guideItemHilite {
	position: absolute;
	z-index: 1;
	left: -100px;
	top: -100px;
	width: 0px;
	height: 0px;
	background-color: hsla(0, 0%, 100%, 0.35);
	border: solid 2px hsl(0, 0%, 100%);
	box-sizing: border-box;
	pointer-events: none;
	animation-name: guideItemHilitePulse;
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes guideItemHilitePulse {
	0%   {background-color: hsla(0, 0%, 100%, 0.00);}
	100% {background-color: hsla(0, 0%, 100%, 0.35);}
}



/* SAFARI TEXT SMOOTHING */
div.guidePages *, div.guideInfoTitle, p.guideFooterCheckBoxText {
	-webkit-font-smoothing: initial !important;
	-webkit-text-stroke: initial !important;
}
div.snapshotTooltipHidden, div.snapshotTooltipVisible {
	position: absolute;
	z-index: 999;
	left: 0px;
	top: 0px;
	width: 510px;
	background-color: hsl(0, 0%, 100%);
	border: solid 3px hsl(200, 100%, 60%);
	border-radius: 5px;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 135%;
	color: hsl(0, 0%, 0%);
	opacity: 0;
	transition: opacity 0.25s linear;
}

div.snapshotTooltipVisible {
	opacity: 1;
	transition: opacity 0.50s linear;
}

div.snapshotPanelHidden, div.snapshotPanelVisible {
	position: fixed;
	z-index: 999;
	display: none;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: hsla(0, 0%, 0%, 0.35);
	box-sizing: border-box;
	text-align: center;
	pointer-events: none;
	transition: opacity 0.35s linear;
}

div.snapshotPanelVisible {
	opacity: 1;
	pointer-events: auto;
}

div.snapshotContentPanel {
	position: relative;
	display: inline-block;
	top: 20px;
	min-width: 600px;
	padding: 20px;
	border-radius: 3px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: auto;
}

div.snapshotHeader {
	position: relative;
	height: 40px;
	font-size: 0px;
	box-sizing: border-box;
}

div.snapshotHeaderL, div.snapshotHeaderR {
	position: absolute;
	top: 0px;
	height: 40px;
	font-size: 0px;
	box-sizing: border-box;
}

div.snapshotHeaderL {
	left: 0px;
}

div.snapshotHeaderR {
	right: 0px;
}

img.snapshotIcon {
	display: inline-block;
	vertical-align: top;
	width: 40px;
	height: 40px;
}

div.snapshotPanelTitle {
	display: inline-block;
	vertical-align: top;
	font-family: StandardFontRegular, sans-serif;
	font-size: 24px;
	height: 40px;
	line-height: 40px;
	margin-left: 12px;
	color: hsl(0, 0%, 0%);
}

div.snapshotPanelTitleInfo {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 390px;
	top: -3px;
	margin-left: 45px;
	font-family: StandardFontRegular, sans-serif;
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0px;
	line-height: 120%;
	color: hsl(0, 0%, 60%);
}

div.snapshotPanelTitleButtons {
	position: relative;
	display: inline-block;
	top: 7px;
	margin-left: 20px;
}



/*** SNAPSHOT INFO ***/
div.snapshotInfo {
	width: 700px;
	margin-top: 20px;
	padding: 15px 5px 25px 5px;
	border-top: solid 1px hsl(0, 0%, 85%);
	/*border-bottom: solid 1px hsl(0, 0%, 85%);*/
	text-align: center;
}

p.snapshotInfoText {
	display: inline-block;
	width: 620px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	letter-spacing: 0px;
	color: hsl(0, 0%, 0%);
	line-height: 150%;
	text-align: center;
}

div.snapshotBtnShowHideOptions {
	display: inline-block;
	vertical-align: top;
	width: 110px;
	font-size: 13px;
	line-height: 28px;
	text-align: center;
	color: hsl(200, 100%, 25%);
	background-color: hsl(200, 50%, 92%);
	/*border: solid 1px hsl(200, 35%, 75%);*/
	padding: 0px;
	border-radius: 14px;
	cursor: pointer;
	pointer-events: auto;
}



/*** SNAPSHOT CONTENTS ***/
div.snapshotContents {
	margin-top: 20px;
	padding: 15px 5px;
	border-top: solid 1px hsl(0, 0%, 85%);
	border-bottom: solid 1px hsl(0, 0%, 85%);
	overflow-y: auto;
}

div.snapshotContentGrid {
	display: grid;
	grid-gap: 0px 30px;
	margin: 10px 0px;
}

div.snapshotContentGridCell {
	margin-top: 30px;
}

div.snapshotContentGridLastRowFiller {
	grid-row-start: content-end;
}

div.snapshotContentGridFullColR {
	grid-column: right;
}



/*** SNAPSHOT OPTION ***/
div.snapshotOptionSelected, div.snapshotOptionUnselected {
	min-width: 220px; /*300px;*/
	max-width: 350px;
	font-size: 0px;
	border-radius: 6px;
	height: 100%;
}

div.snapshotOptionSelected {
	background-color: hsl(196, 85%, 94%);
	border: solid 1px hsl(196, 65%, 84%);
}

div.snapshotOptionUnselected {
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(0, 0%, 80%);
}

div.snapshotOptionDisabled {
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(0, 0%, 100%);
	pointer-events: none;
}

div.snapshotOptionSelected div.snapshotOptionSelected, div.snapshotOptionSelected div.snapshotOptionUnselected, div.snapshotOptionUnselected div.snapshotOptionSelected, div.snapshotOptionUnselected div.snapshotOptionUnselected {
	width: initial;
}

div.snapshotOptionInfo {
	margin-left: 38px;
	box-sizing: border-box;
}

div.snapshotOptionInfoMapView {
	min-width: 220px;
	border: solid 1px hsl(196, 50%, 85%);
	background-color: hsl(196, 85%, 96%);
	padding: 3px;
	margin-top: 3px;
	box-sizing: border-box;
}

div.snapshotOptionUnselected div.snapshotOptionInfoMapView {
	border: solid 1px hsl(0, 0%, 90%);
	background-color: hsl(0, 0%, 100%);
}

p.snapshotOptionInfoHead, p.snapshotOptionInfo, p.snapshotOptionInfoItem {
	font-size: 14px;
	line-height: 130%;
	letter-spacing: 0px;
	color: hsl(196, 25%, 60%);
	margin-top: 6px;
}

p.snapshotOptionInfoHead {
	color: hsl(196, 30%, 55%);
	font-weight: bold;
	margin-top: 12px;
}

p.snapshotOptionInfoItem {
	margin-left: 15px;
}

p.snapshotOptionInfo:first-child, p.snapshotOptionInfoHead:first-child, p.snapshotOptionInfoItem:first-child {
	margin-top: 0px;
}

div.snapshotOptionUnselected p.snapshotOptionInfoHead, div.snapshotOptionUnselected p.snapshotOptionInfo, div.snapshotOptionUnselected p.snapshotOptionInfoItem {
	color: hsl(0, 0%, 70%);
}

div.snapshotOptionDisabled p.snapshotOptionInfoHead, div.snapshotOptionDisabled p.snapshotOptionInfo, div.snapshotOptionDisabled p.snapshotOptionInfoItem {
	color: hsl(0, 0%, 80%);
}

p.snapshotOptionInfoSmall, span.snapshotOptionInfoSmall {
	font-size: 12px;
}



/*** SNAPSHOT OPTION BUTTON ***/
div.snapshotOptionButton {
	font-size: 0px;
	padding: 5px;
	cursor: pointer;
}

div.snapshotOptionDisabled div.snapshotOptionButton {
	pointer-events: none;
}

div.snapshotOptionButtonContents {
	position: relative;
}

div.snapshotOptionCheckBox {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 24px;
	height: 24px;
	border: solid 2px hsl(195, 100%, 45%);
	border-radius: 3px;
	box-sizing: border-box;
	pointer-events: none;
}

div.snapshotOptionUnselected div.snapshotOptionCheckBox {
	border-color: hsl(0, 0%, 75%);
}

div.snapshotOptionDisabled div.snapshotOptionCheckBox {
	border-color: hsl(0, 0%, 92%) !important;
	background-color: hsl(0, 0%, 92%);
}

.snapshotOptionCbIconSvg {
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	left: 3px;
	top: 3px;
	fill: hsl(195, 100%, 45%);
}

div.snapshotOptionUnselected .snapshotOptionCbIconSvg, div.snapshotOptionDisabled .snapshotOptionCbIconSvg {
	display: none;
	fill: hsl(0, 0%, 75%);
}

div.snapshotOptionUnselected div.snapshotOptionSelected .snapshotOptionCbIconSvg {
	display: block;
}

p.snapshotOptionCbLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: hsl(192, 100%, 36%);
	padding-left: 32px;
	white-space: nowrap;
	pointer-events: none;
}

div.snapshotOptionUnselected p.snapshotOptionCbLabel {
	color: hsl(0, 0%, 55%);
}

div.snapshotOptionDisabled p.snapshotOptionCbLabel {
	color: hsl(0, 0%, 75%);
}




div.snapshotFooter {
	background-color: hsl(0, 0%, 100%);
	transition: background-color 3s;
}

div.snapshotCreateLinkDiv {
	margin-top: 15px;
	text-align: center;
}

div.snapshotLinkDiv {
	margin-top: 10px;
}

div.snapshotCreateMsg, div.snapshotCreateMsgWarning, div.snapshotCreateMsgAlert {
	position: absolute;
	height: 26px;
	right: 2px;
	top: -26px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	line-height: 26px;
	color: hsl(0, 0%, 0%);
}

div.snapshotCreateMsgWarning {
	color: hsl(50, 100%, 25%);
}

div.snapshotCreateMsgAlert {
	color: hsl(0, 100%, 35%);
}

input.snapshotLinkField, input.snapshotLinkFieldWarning, input.snapshotLinkFieldAlert, input.snapshotLinkFieldDisabled {
	width: 400px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	line-height: 140%;
	padding: 10px;
	color: hsl(0, 0%, 5%);
	border: solid 2px hsl(195, 100%, 45%);
	resize: none;
	background: none;
	border-radius: 3px;
	box-sizing: border-box;
}

input.snapshotLinkFieldWarning {
	background-color: hsl(50, 100%, 80%);
}

input.snapshotLinkFieldAlert {
	background-color: hsl(0, 100%, 40%);
	color: hsl(0, 0%, 100%);
}

input.snapshotLinkFieldDisabled {
	border: solid 2px hsl(0, 0%, 85%);
}

input.snapshotLinkField:focus {
	outline: none;
}

input.snapshotLinkFieldDisabled:focus {
	outline: none;
}

div.snapshotLabelDiv {
	position: relative;
	margin-top: 12px;
	margin-left: 50px;
	margin-right: 50px;
}

div.snapshotLabel {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 1px;
	width: 90px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	color: hsl(195, 100%, 30%);
	line-height: 22px;
	padding: 5px 0px;
	border-left: none;
	border-right: none;
	white-space: nowrap;
	box-sizing: border-box;
}

div.snapshotLabelField {
	margin-left: 90px;
}

input.snapshotLabelField, input.snapshotLabelFieldWarning, input.snapshotLabelFieldAlert {
	width: 400px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0px;
	color: hsl(0, 0%, 5%);
	padding: 5px 8px;
	resize: none;
	background: none;
	/*background-color: hsl(195, 65%, 97%);*/
	border: solid 1px hsl(195, 55%, 75%);
	border-radius: 3px;
	box-sizing: border-box;
}

input.snapshotLabelField:focus {
	outline: none;
	box-shadow: 0px 0px 4px 2px hsl(195, 100%, 65%);
}

input.snapshotLabelFieldWarning {
	background-color: hsl(50, 100%, 80%);
}

input.snapshotLabelFieldAlert {
	background-color: hsl(0, 100%, 40%);
	color: hsl(0, 0%, 100%);
}

div.snapshotBtnCreateLink, div.snapshotBtnCreateLinkDisabled, div.snapshotBtnClose {
	display: inline-block;
	vertical-align: top;
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

div.snapshotBtnCreateLink, div.snapshotBtnCreateLinkDisabled {
	width: 200px;
	background-color: hsl(200, 100%, 35%);
}

div.snapshotBtnCreateLinkDisabled {
	background-color: hsl(0, 0%, 85%);
	pointer-events: none;
}

div.snapshotBtnClose {
	width: 80px;
	background-color: hsl(0, 100%, 40%);
}



/*** SNAPSHOT PUBLIC VIEW ITEMS ***/
div.snapshotPublicViewPanelWrapper {
	text-align: center;
}

div.snapshotPublicViewPanel {
	display: inline-block;
	width: 100%;
	max-width: 850px;
	background-color: hsl(205, 50%, 35%);
	border: solid 2px hsl(205, 50%, 35%);
	border-radius: 15px;
	font-size: 0px;
	overflow: hidden;
	box-sizing: border-box;
}

p.snapshotPublicViewItemsTitle {
	/*font-family: StandardFontRegular, sans-serif;*/
	font-size: 20px;
	line-height: 180%;
	letter-spacing: 1px;
	color: hsl(0, 0%, 100%);
	padding: 10px;
	white-space: nowrap;
	text-align: center;
}

p.snapshotPublicViewItemsSubtitle {
	font-size: 16px;
	line-height: 130%;
	letter-spacing: 1px;
	color: hsl(205, 50%, 75%);
	text-align: center;
}

div.snapshotPublicViewItems {
	font-size: 0px;
	padding: 10px;
	background-color: hsl(205, 50%, 16%);
}

a.snapshotItem {
	display: block;
	font-size: 0px;
	padding: 15px;
	text-align: left;
	border-top: solid 1px hsl(205, 35%, 28%);
	box-sizing: border-box;
}

a.snapshotItem:first-child {
	border-top: solid 1px hsl(0, 0%, 80%);
	border-top: none;
}

a.snapshotItem p, a.snapshotItem:hover p {
	text-decoration: none !important;
}

a.snapshotItem:hover {
	text-decoration: none;
	background-color: hsl(205, 50%, 22%);
}

table.snapshotItem {}

td.snapshotItemInfo {
	padding-left: 15px;
}

td.snapshotItemLinkGraphic {
	vertical-align: middle;
	padding-left: 15px;
}

div.snapshotItemAppImg {
	width: 98px;
	height: 74px;
	border-radius: 8px;
	background-color: hsl(0, 0%, 80%);
	border: solid 2px hsl(0, 0%, 100%);
	overflow: hidden;
}

img.snapshotItemApp {
	display: block;
	width: 98px;
	height: 74px;
}

p.snapshotItemLabel {
	/*font-family: StandardFontRegular, sans-serif;*/
	font-size: 16px;
	line-height: 120% !important;
	color: hsl(0, 0%, 100%);
	letter-spacing: 1px;
	box-sizing: border-box;
	pointer-events: none;
}

p.snapshotItemCreator {
	font-size: 15px;
	line-height: 135% !important;
	color: hsl(200, 25%, 55%);
	letter-spacing: 0px;
	margin-top: 5px;
	box-sizing: border-box;
	pointer-events: none;
}

p.snapshotItemSummary {
	font-size: 15px;
	line-height: 135% !important;
	color: hsl(200, 15%, 70%);
	letter-spacing: 0.5px;
	margin-top: 4px;
	box-sizing: border-box;
	pointer-events: none;
}



/*** SNAPSHOT MANAGER ***/
div.snapshotNoticePanel {
	display: inline-block;
	width: 100%;
	max-width: 850px;
	background-color: hsl(205, 50%, 35%);
	border: solid 2px hsl(205, 50%, 35%);
	border-radius: 15px;
	font-size: 0px;
	padding-bottom: 15px;
	overflow: hidden;
	box-sizing: border-box;
}

div.snapshotManagerItemsWrapper {
	font-size: 0px;
	text-align: center;
}

div.snapshotManagerItems {
	display: inline-block;
	font-size: 0px;
	width: 825px;
}

div.snapshotManagerItemWrapper {
	display: block; /*inline-block*/
	font-size: 0px;
	margin-top: 15px;
	/*width: 825px;*/
	/*text-align: center;*/
}

div.snapshotManagerItemWrapper:first-child {
	margin-top: 0px;
}

div.snapshotManagerItem, div.snapshotManagerItemActive {
	position: relative;
	z-index: 9;
	display: block; /*inline-block;*/
	/*width: 825px;*/
	background-color: hsl(0, 0%, 100%);
	border-radius: 10px;
	font-size: 0px;
	padding: 15px;
	box-sizing: border-box;
}

div.snapshotManagerItemActive {
	background-color: hsl(50, 100%, 88%); /*hsl(195, 100%, 90%);*/
}

table.snapshotManagerItem {}

td.snapshotManagerItemInfo {
	padding-left: 15px;
}

td.snapshotManagerItemLinkButtonsT, td.snapshotManagerItemLinkButtonsB, td.snapshotManagerItemLinkButtonsC {
	padding-left: 15px;
}

td.snapshotManagerItemLinkButtonsB {
	vertical-align: bottom;
}

td.snapshotManagerItemLinkButtonsC {
	vertical-align: middle;
}

div.snapshotManagerItemAppImg {
	width: 98px;
	height: 74px;
	border-radius: 8px;
	background-color: hsl(0, 0%, 80%);
	border: solid 1px hsla(0, 0%, 0%, 0.20);
	overflow: hidden;
}

img.snapshotManagerItemApp {
	display: block;
	width: 98px;
	height: 74px;
}

div.snapshotManagerItemLabel {
	position: relative;
	font-size: 0px;
}

p.snapshotManagerItemLabel, input.snapshotManagerItemLabelField {
	position: relative;
	left: -7px;
	top: -6px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	line-height: 120% !important;
	color: hsl(0, 0%, 0%);
	letter-spacing: 0px;
	padding: 5px 7px;
	resize: none;
	background: none;
	border: none;
	box-sizing: border-box;
	pointer-events: none;
}

input.snapshotManagerItemLabelField {
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.10);
	pointer-events: auto;
}

input.snapshotManagerItemLabelField:focus {
	outline: none;
	box-shadow: 0px 0px 4px 2px hsl(195, 100%, 65%);
}

div.snapshotManagerItemSummary {
	position: relative;
	font-size: 0px;
}

p.snapshotManagerItemSummary, textarea.snapshotManagerItemSummaryField {
	position: relative;
	left: -7px;
	top: -6px;
	font-size: 15px;
	line-height: 135% !important;
	color: hsl(0, 0%, 35%);
	letter-spacing: 0px;
	padding: 5px 7px;
	resize: none;
	background: none;
	border: none;
	margin-top: 10px;
	box-sizing: border-box;
	pointer-events: none;
}

p.snapshotManagerItemSummary:empty {
	padding: 2px 7px;
}

textarea.snapshotManagerItemSummaryField {
	height: 100px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.10);
	pointer-events: auto;
}

textarea.snapshotManagerItemSummaryField:focus {
	outline: none;
	box-shadow: 0px 0px 4px 2px hsl(195, 100%, 65%);
}

div.snapshotManagerItemApp {
	font-size: 0px;
	margin-top: 5px;
}

a.snapshotManagerItemApp {
	display: inline-block;
	font-family: StandardFontRegular, sans-serif;
	font-size: 15px;
	color: hsl(195, 100%, 36%);
}

a.snapshotManagerItemApp:hover {
	text-decoration: none;
}

/*
div.snapshotManagerItemHash {
	font-size: 16px;
	color: hsl(0, 0%, 0%);
}
*/

div.snapshotManagerItemUrl {
	/*width: 650px;*/
	font-size: 15px;
	color: hsl(0, 0%, 0%);
	margin-top: 0px;
	user-select: all !important;
}

div.snapshotManagerItemEdit {
	position: relative;
	height: 30px;
	margin-top: 8px;
	font-size: 0px;
}

div.snapshotManagerItemMsg, div.snapshotManagerItemMsgConfirm, div.snapshotManagerItemMsgWarning, div.snapshotManagerItemMsgError {
	/*
	position: absolute;
	width: auto;
	left: 116px;
	right: 80px;
	top: 2px;
	height: 24px;
	line-height: 24px;
	padding-left: 4px;
	*/
	/*width: 98px;*/
	position: relative;
	left: -7px;
	font-size: 14px;
	line-height: 135%;
	text-align: left; /*center;*/
	padding: 4px 6px; /*4px 4px;*/
	color: hsl(0, 0%, 0%);
	border: solid 1px hsla(0, 0%, 0%, 0.20);
	border-radius: 4px;
	margin-top: 10px;
	box-sizing: border-box;
}

div.snapshotManagerItemMsgConfirm {
	background-color: hsl(150, 100%, 65%);
}

div.snapshotManagerItemMsgWarning {
	background-color: hsl(50, 100%, 80%);
}

div.snapshotManagerItemMsgError {
	background-color: hsl(0, 100%, 40%);
	color: hsl(0, 0%, 100%);
}

div.snapshotManagerItemMsgInstaHide {
	opacity: 0;
	transition: opacity 0s;
}

div.snapshotManagerItemMsgHidden {
	opacity: 0;
	transition: opacity 1.5s;
}

div.snapshotManagerItemMsgVisible {
	opacity: 1;
	transition: opacity 0.35s;
}

div.snapshotManagerItemEditButtons {
	position: absolute;
	height: 30px;
	right: 0px;
	top: 0px;
	font-size: 0px;
}

.snapshotManagerItemLinkButton, .snapshotManagerItemLinkButtonRed, .snapshotManagerItemWireButton, .snapshotManagerItemWireButtonActive, .snapshotManagerItemWireButtonRed {
	position: relative;
	display: block;
	width: 65px;
	font-size: 15px;
	line-height: 30px;
	color: hsl(0, 0%, 100%);
	background-color: hsl(195, 100%, 35%);
	border-radius: 5px;
	text-align: center;
	white-space: nowrap;
	margin-top: 10px;
	box-sizing: border-box;
	cursor: pointer;
}

.snapshotManagerItemLinkButtonRed {
	background-color: hsl(0, 100%, 40%);
}

.snapshotManagerItemWireButton, .snapshotManagerItemWireButtonActive, .snapshotManagerItemWireButtonRed {
	line-height: 28px;
	color: hsl(195, 100%, 30%);
	border: solid 1px hsl(195, 50%, 65%);
	background-color: hsl(0, 0%, 100%);
}

.snapshotManagerItemWireButtonActive {
	color: hsl(150, 100%, 15%);
	border-color: hsl(150, 75%, 50%);
	background-color: hsl(150, 100%, 65%);
}

.snapshotManagerItemWireButtonRed {
	color: hsl(0, 100%, 35%);
	border-color: hsl(0, 50%, 80%);
}

.snapshotManagerItemLinkButton:first-child, .snapshotManagerItemWireButton:first-child, .snapshotManagerItemWireButtonActive:first-child, .snapshotManagerItemWireButtonRed:first-child {
	margin-top: 0px;
}

.snapshotManagerItemLinkButton:hover {
	text-decoration: none !important;
	background-color: hsl(195, 100%, 45%);
}

.snapshotManagerItemWireButton:hover {
	background-color: hsl(195, 100%, 90%);
}

.snapshotManagerItemWireButtonRed:hover {
	background-color: hsl(0, 100%, 94%);
}

div.snapshotManagerItemActive .snapshotManagerItemEditButton {
	color: hsl(50, 50%, 25%);
	border-color: hsl(50, 75%, 50%);
	background-color: hsl(50, 100%, 85%);
	box-shadow: 0px 0px 0px 4px hsl(50, 75%, 50%);
}

div.snapshotManagerItemInfoWrapperClosed, div.snapshotManagerItemInfoWrapperOpen {
	position: relative;
	z-index: 1;
	display: block; /*inline-block;*/
	/*width: 825px;*/
	height: 0px;
	overflow: hidden;
	transition-property: height;
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}

div.snapshotManagerItemInfoBorder {
	position: absolute;
	z-index: 2;
	top: 0px;
	width: auto;
	left: 15px;
	right: 15px;
	border-top: solid 1px hsl(0, 0%, 90%);
	font-size: 0px;
}

div.snapshotManagerItemInfo {
	position: absolute;
	z-index: 1;
	bottom: 0px;
	width: auto;
	left: 15px;
	right: 15px;
	background-color: hsl(0, 0%, 96%);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	font-size: 0px;
	padding: 15px;
	box-sizing: border-box;
}

div.snapshotInfoGrid3Col {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /*auto auto auto;*/
}

p.snapshotInfoItemLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 16px;
	line-height: 135% !important;
	color: hsl(0, 0%, 0%);
	margin-top: 15px;
}

p.snapshotInfoItemLabel:first-child {
	margin-top: 0px;
}

.snapshotInfoItemSubLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 14px;
	line-height: 135% !important;
	color: hsl(0, 0%, 10%);
	padding-left: 10px;
	margin-top: 8px;
}

.snapshotInfoItem {
	font-size: 14px;
	line-height: 135% !important;
	color: hsl(0, 0%, 10%);
	padding-left: 10px;
	margin-top: 3px;
}

span.snapshotInfoItemSmall {
	font-size: 13px;
}

div.snapshotInfoItemMapView {
	min-width: 200px;
	border: solid 1px hsl(0, 0%, 85%);
	padding: 3px;
	margin-top: 3px;
	margin-left: 10px;
	box-sizing: border-box;
}

p.snapshotInfoItemMapViewText {
	font-size: 12px;
	color: hsl(0, 0%, 10%);
}
div.masterPanel {
	position: absolute;
	width: auto;
	height: 100%;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
}
div.standardPanel {
	position: absolute;
	display: none;
	z-index: 1;
	left: 0px; /* overridden in PanelManager.js */
	height: auto;
	top: 0px;
	bottom: 0px; /* overridden in PanelManager.js */
	background-color: hsl(204, 35%, 28%);
	border-right: solid 1px hsl(200, 15%, 20%);
	padding: 0px;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}

div.panelHead {
	position: relative;
}

p.panelHead {
	font-size: 24px;
	letter-spacing: 2px;
	color: hsl(50, 90%, 65%);
	padding: 15px 5px;
}

div.panelCloseButton {
	position: absolute;
	width: 26px;
	height: 26px;
	right: 0px;
	top: 0px;
	cursor: pointer;
}

div.panelCloseButton:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

img.panelCloseButton {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	left: 6px;
	top: 7px;
	border: none;
}

div.standardContent {
	padding: 0px 10px 10px 10px;
}



div.panelSectionHead {
	margin-top: 25px;
}

div.panelSectionHead:first-child {
	margin-top: 0px;
}

table.panelSectionHead {
	width: 100%;
}

table.panelSectionHead td {
	vertical-align: middle;
}

table.panelSectionHead td.controls {
	width: 1%;
	padding-right: 5px;
}

p.panelSectionHead {
	color: hsl(200, 100%, 80%);
	font-size: 22px;
	letter-spacing: 1px;
	padding: 0px 5px;
	margin-top: 25px;
}

p.panelSectionHead:first-child {
	margin-top: 0px;
}



/*** PANEL GROUP ***/
div.panelGroupWrapper {}

div.panelGroupHead, div.panelGroupHeadMinTopPad {
	position: relative;
	padding: 24px 5px 6px 5px;
}

div.panelGroupWrapper:first-child div.panelGroupHead {
	padding-top: 6px;
}

div.panelGroupHeadBottom {
	height: 2px;
}

p.panelGroupHead {
	color: hsl(0, 0%, 100%);
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: bold;
}

p.panelGroupHead span.dim {
	color: hsl(200, 5%, 60%);
	font-weight: normal;
}

td.panelGroupHeadCtl {
	vertical-align: middle;
	padding: 2px 3px;
}

div.panelGroupSub {
	padding: 0px 6px;
}

div.panelGroup {}

div.panelGroupContent {}

div.panelGroupContentPad {
	padding: 10px;
	
}

a.panelGroupVisToggle {
	display: block;
}

.mouseInput a.panelGroupVisToggle:hover {
	text-decoration: none;
}

img.panelGroupVisToggle {}



div.panelGroupSubHead {
	position: relative;
	padding: 0px 6px;
}

div.panelGroupSubHead img.icon {
	margin-right: 6px;
}

div.panelGroupSubHead p.label {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(205, 15%, 65%);
	white-space: nowrap;
}



div.standardPanel input.textField, div.standardPanel input.textFieldAttention {
	font-size: 15px;
	line-height: 100%;
	padding: 4px;
	color: hsl(200, 100%, 85%);
	border: none;
	resize: none;
	background: none;
	background-color: hsla(0, 0%, 0%, 0.25);
	border: solid 1px hsl(205, 20%, 45%);
	border-radius: 4px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

input.textField:focus {
	outline: none;
	box-shadow: 0px 0px 2px 2px hsla(45, 100%, 65%, 0.90);
}

div.standardPanel div.container {
	padding: 5px;
}



div.standardPanel div.tabSet {}

div.standardPanel div.tabSet table.tabRow {}

div.standardPanel div.tabSet .tabNorm, div.standardPanel div.tabSet .tabSelected {
	display: block;
	font-size: 17px;
	line-height: 38px;
	/*font-weight: bold;*/
	color: hsl(0, 0%, 90%);
	text-align: center;
	/*padding: 4px 6px;*/
	cursor: pointer;
}

.mouseInput div.standardPanel div.tabSet .tabNorm:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.standardPanel div.tabSet .tabSelected {
	color: hsl(0, 0%, 100%);
	background-color: hsl(200, 65%, 40%);
	cursor: default;
}

.mouseInput div.standardPanel div.tabSet .tabSelected:hover {
	text-decoration: none;
}

div.standardPanel div.tabSetUnderLine {
	border-bottom: solid 2px hsl(200, 65%, 40%);
}

div.standardPanel div.tabSet div.item {
	background-color: hsl(200, 65%, 40%);
	padding: 8px;
}

div.standardPanel div.tabSet div.item input.textField, div.standardPanel div.tabSet div.item input.textFieldAttention {
	width: 100%;
	font-size: 15px;
	line-height: 100%;
	padding: 4px;
	color: hsl(0, 0%, 0%);
	resize: none;
	background: none;
	background-color: hsl(0, 0%, 100%);
	border-radius: 3px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

div.standardPanel div.tabSet div.item input.textField:focus {
	outline: none;
	box-shadow: 0px 0px 1px 3px hsl(50, 100%, 65%);
}

div.standardPanel div.tabSet div.item input.textFieldAttention {
	outline: none;
	background-color: hsl(50, 100%, 90%);
	animation: textFieldBorderAnim 0.67s infinite alternate;
}

@keyframes textFieldBorderAnim {
	from {
		box-shadow: 0px 0px 1px 0px hsla(50, 100%, 65%, 1.0);
	}
	to {
		box-shadow: 0px 0px 6px 6px hsla(50, 100%, 65%, 1.0);
	}
}

div.standardPanel div.tabSet div.item p.tabSetItemText {
	font-size: 15px;
	color: hsl(0, 0%, 100%);
}



/*** OPTIONS ***/
div.options, div.optionsDisabled {
	background-color: hsl(200, 65%, 40%);
	padding: 15px;
	border-radius: 10px;
}

div.optionsDisabled {
	background-color: hsl(200, 25%, 40%);
	transition: background-color 1s;
}

p.optionPanelLabel {
	font-size: 15px;
	color: hsl(200, 50%, 80%);
}

div.optionsDisabled p.optionPanelLabel {
	color: hsl(200, 20%, 70%);
	transition: color 1s;
}

input.optionPanelField {
	font-size: 14px;
	line-height: 26px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	padding: 0px 6px;
	width: 100%;
	color: hsl(0, 0%, 100%);
	border: solid 1px hsl(200, 45%, 60%);
	resize: none;
	background-color: hsl(200, 65%, 35%); /*hsla(0, 0%, 0%, 0.35);*/
	box-sizing: border-box;
}

input.optionPanelField:focus {
	outline: none;
	box-shadow: 0px 0px 2px 2px hsl(50, 100%, 65%);
}

div.optionsDisabled input.optionPanelField {
	border-color: hsla(200, 15%, 60%, 0.35);
	background-color: hsla(200, 65%, 35%, 0);
	transition: border-color 1s, background-color 1s;
	pointer-events: none;
}

div.optionPanelTextBtn, div.optionPanelMenuBtn, div.optionPanelMenuBtnOpen, div.optionPanelText {
	position: relative;
	color: hsl(0, 0%, 100%);
	font-size: 14px;
	padding: 6px;
	border-radius: 6px;
	border: solid 1px hsl(200, 45%, 60%);
	background-color: hsl(200, 65%, 35%);
	box-sizing: border-box;
	cursor: pointer;
}

div.optionsDisabled div.optionPanelTextBtn, div.optionsDisabled div.optionPanelMenuBtn {
	border-color: hsla(200, 15%, 60%, 0.35);
	background-color: hsla(200, 65%, 35%, 0);
	transition: border-color 1s, background-color 1s;
	pointer-events: none;
}

div.optionPanelMenuBtnOpen {
	/*background-color: hsla(0, 0%, 0%, 0.05);*/
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

div.optionPanelTextBtn:hover, div.optionPanelMenuBtn:hover, div.optionPanelMenuBtnOpen:hover {
	background-color: hsl(200, 65%, 40%);
}

div.optionPanelText {
	border: none;
	background: none;
	padding: 7px;
	cursor: default;
	pointer-events: none;
}

p.optionPanelMenuBtnText {
	font-size: 14px;
	pointer-events: none;
}

span.optionPanelTextSub {
	font-size: 13px;
	color: hsla(0, 0%, 100%, 0.75);
	pointer-events: none;
}

div.opmbArrowDiv {
	position: absolute;
	z-index: 1;
	right: 6px;
	top: 7px;
	width: 16px;
	height: 12px;
	pointer-events: none;
}

div.optionPanelMenuBtnOpen div.opmbArrowDiv {
	top: 6px;
	transform: rotate(180deg);
}

div.optionsDisabled .opmbArrowDiv {
	opacity: 0;
	transition: opacity 1s;
}

.opmbArrowSvg {
	position: absolute;
	width: 16px;
	height: 12px;
	left: 0px;
	fill: hsl(200, 75%, 70%);
}

div.optionPanelBtnColor {
	height: 13px;
	border: solid 1px hsl(200, 45%, 60%);
	background-color: hsl(0, 0%, 65%);
}

div.optionPanelMenuBtn div.optionPanelBtnColor, div.optionPanelMenuBtnOpen div.optionPanelBtnColor {
	margin-right: 22px;
}

div.optionPanelMenuPanel {
	position: absolute;
	z-index: 9;
	max-height: 300px;
	left: 0px;
	top: 0px;
	font-size: 14px;
	/*padding: 6px;*/
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border: solid 1px hsl(200, 45%, 60%);
	border-top: none;
	background-color: hsl(200, 30%, 35%);
	box-sizing: border-box;
	overflow-y: auto;
	pointer-events: auto;
}

div.optionPanelMenuPanelItem, div.optionPanelMenuPanelItemSel, div.optionPanelMenuColorItem, div.optionPanelMenuColorItemSel {
	color: hsl(0, 0%, 100%);
	font-size: 14px;
	padding: 6px;
	cursor: pointer;
}

div.optionPanelMenuPanelItemSel, div.optionPanelMenuColorItemSel {
	background-color: hsl(60, 30%, 50%);
	cursor: default;
	pointer-events: none;
}

div.optionPanelMenuPanelItem:hover, div.optionPanelMenuColorItem:hover {
	background-color: hsl(200, 30%, 45%);
}

/*
div.optionPanelMenuColorItem, div.optionPanelMenuColorItemSel {
	color: hsl(0, 0%, 100%);
	font-size: 14px;
	padding: 6px;
	cursor: pointer;
}

div.optionPanelMenuColorItemSel {
	background-color: hsl(50, 85%, 45%);
	cursor: default;
	pointer-events: none;
}

div.optionPanelMenuColorItem:hover {
	background-color: hsl(200, 65%, 48%);
}
*/

div.optionPanelMenuColorItemSwatch {
	height: 13px;
	border: solid 1px hsl(200, 45%, 60%);
	background-color: hsl(0, 0%, 65%);
}

/*
div.optionPanelSetBtn {
	font-size: 0px;
}

div.optionPanelSetBtnOpt, div.optionPanelSetBtnOptSel {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	padding: 6px;
	min-height: 28px;
	border-top: solid 1px hsl(200, 45%, 60%);
	border-bottom: solid 1px hsl(200, 45%, 60%);
	background-color: hsla(0, 0%, 0%, 0.15);
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
}

div.optionPanelSetBtnOptSel {
	color: hsl(200, 100%, 25%);
	background-color: hsl(50, 100%, 40%);
}

div.optionPanelSetBtnOpt:first-child, div.optionPanelSetBtnOptSel:first-child {
	border-left: solid 1px hsl(200, 45%, 60%);
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

div.optionPanelSetBtnOpt:last-child, div.optionPanelSetBtnOptSel:last-child {
	border-right: solid 1px hsl(200, 45%, 60%);
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

div.optionPanelSetBtnOpt:hover {
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.optPanelBtnShapeSquare, div.optPanelBtnShapeCircle {
	position: absolute;
	display: inline-block;
	width: 16px;
	height: 16px;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
	background-color: hsla(0, 0%, 100%, 0.5);
	border: solid 2px hsl(0, 0%, 100%);
	box-sizing: border-box;
}

div.optPanelBtnShapeCircle {
	border-radius: 50%;
}
*/

/*
div.optionPanelSetBtnOptSel div.optPanelBtnShapeSquare, div.optionPanelSetBtnOptSel div.optPanelBtnShapeCircle {
	background-color: hsl(200, 100%, 20%);
}
*/



/*** TEXT AND IMAGE CONTENT WITHIN A PANEL ***/
div.panelContent {
	padding: 8px;
	word-wrap: break-word;
}

div.panelContent p.heading {
	color: hsl(50, 100%, 85%);
	font-weight: bold;
	line-height: 140%;
}

div.panelContent p.text {
	line-height: 140%;
}

div.panelContent p.text a {
	line-height: 140%;
}



/*** PANEL BUTTON ROW ***/
table.panelButtonRow {
	width: 100%;
	background-color: hsla(0, 0%, 100%, 0.30);
}

table.panelButtonRow div.button, table.panelButtonRow div.buttonSelected {
	color: hsl(0, 0%, 100%);
	font-size: 15px;
	text-align: center;
	padding: 5px 0px;
	background-color: hsla(204, 35%, 30%, 0.50);
	cursor: pointer;
}

.mouseInput table.panelButtonRow div.button:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, 0.05);
}

table.panelButtonRow div.buttonSelected {
	background-color: hsl(50, 75%, 45%);
	pointer-events: none;
}



/*** POP-UP BUTTON PANEL ***/
div.panelPopUpButtonPanel {
	position: absolute;
	z-index: 1;
	display: none;
	/*width: specific;*/
	/*left: specific;*/
	/*margin-left: specific;*/
	/*bottom: specific;*/
	padding: 6px;
	background-color: hsl(0, 0%, 100%);
	border-radius: 5px;
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	box-sizing: border-box;
}

div.panelPopUpButtons {
	border-radius: 3px;
	border: solid 1px hsl(0, 0%, 70%);
}

table.panelPopUpButtonRow {
	width: 100%;
}

table.panelPopUpButtonRow td.panelPopUpButton {
	border-left: solid 1px hsl(0, 0%, 70%);
}

table.panelPopUpButtonRow td.panelPopUpButton:first-child {
	border-left: none;
}

div.panelPopUpButton {
	color: hsl(0, 0%, 0%);
	padding: 6px 6px;
	cursor: pointer;
}

div.panelPopUpButton:last-child {
	border-bottom: none;
}

.mouseInput div.panelPopUpButton:hover {
	background-color: hsla(0, 0%, 0%, 0.05);
}

.mouseInput div.panelPopUpButton:active {
	background-color: hsla(0, 0%, 0%, 0.05);
}

img.panelPopUpButton {
	display: block;
	width: 18px;
	height: 18px;
	border: none;
}

p.panelPopUpButton {
	color: hsl(0, 0%, 0%);
	line-height: 18px;
	font-size: 12px;
	padding-left: 6px;
}



/*** PANEL INDICATOR ***/
div.panelIndicatorDefault, div.panelIndicatorSaved {
	position: absolute;
	z-index: 1;
	/*right: set where added to html */
	/*top: set where added to html */
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: hsla(0, 0%, 0%, 0.0);
	transition: background-color 0.65s;
}

div.panelIndicatorSaved {
	background-color: hsl(150, 100%, 65%);
	transition: background-color 0.15s;
}



/*** FILTER COMPARE OPTIONS BUTTON ***/
div.filterCompareOptButtonAny, div.filterCompareOptButtonAll {
	position: relative;
	width: 92px;
	height: 26px;
	pointer-events: none;
}

div.filterCompareOptionAny, div.filterCompareOptionAll {
	position: absolute;
	width: 46px;
	height: 26px;
	top: 0px;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 25px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	background-color: hsla(0, 0%, 100%, 0.15);
	pointer-events: auto;
	cursor: pointer;
}

div.filterCompareOptionAny {
	left: 0px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

div.filterCompareOptionAll {
	right: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

div.filterCompareOptionAll:hover {
	background-color: hsla(0, 0%, 100%, 0.25);
}

div.filterCompareOptButtonAny div.filterCompareOptionAny, div.filterCompareOptButtonAll div.filterCompareOptionAll {
	color: hsl(0, 0%, 100%);
	background-color: hsl(195, 100%, 40%);
	pointer-events: none;
}

div.filterCompareAny {
	position: relative;
	width: 46px;
	height: 26px;
	top: 0px;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 25px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	background-color: hsl(195, 100%, 40%);
	border-radius: 4px;
	pointer-events: none;
}
a.panelMenuGroupHead {
	display: block;
}

.mouseInput a.panelMenuGroupHead:hover {
	text-decoration: none;
}

div.panelMenuGroupHead {
	padding: 24px 6px 6px 6px;
}

table.panelMenuGroupHead {
	width: 100%;
	margin-left: 6px;
	margin-right: 6px;
}

table.panelMenuGroupHead td {
	vertical-align: middle;
	font-size: 0px;
}

table.panelMenuGroupHead td.icon {
	padding-right: 8px;
}

table.panelMenuGroupHead td.checkBox {
	padding-right: 8px;
}

table.panelMenuGroupHead td.title {
	white-space: nowrap;
}

p.menuGroupTitle {
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: bold;	
	color: hsl(0, 0%, 100%);
}

p.menuGroupTitle span.dimFullSize {
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	opacity: 0.6;
	filter: alpha(opacity=60);
}

table.panelMenuGroupHead td span.sub {
	font-weight: normal;
	color: hsl(180, 35%, 50%);
}

table.panelMenuGroupHead td.fill {
	width: 90%;
}

table.panelMenuGroupHead td.visButton {
	width: 1%;
	padding-right: 3px;
}



div.panelMenuGroupItems {}

div.panelMenuItem { /*side padding*/
	padding: 0px 6px;
}

div.panelMenuItemNoPad { /*no padding*/
	padding: 0px;
}

div.panelMenuItemPad { /*all padding*/
	padding: 6px 6px;
}

div.panelMenuButton, div.panelMenuButtonNoHover {
	padding: 6px 6px;
}

div.panelMenuButton {
	cursor: pointer;
}

.mouseInput div.panelMenuButton:hover {
	background-color: hsla(0, 0%, 100%, 0.15);
}

div.panelMenuButtonActiveIcon {
	padding: 6px 6px;
	background-color: hsl(50, 100%, 40%);
	cursor: pointer;
}

div.panelMenuButtonActiveOverlay {
	padding: 6px 6px;
	background-color: hsl(165, 100%, 40%);
	cursor: pointer;
}

div.panelMenuButtonActiveValues {
	padding: 6px 6px;
	background-color: hsl(200, 100%, 50%);
	cursor: pointer;
}

table.panelMenuItem {
	width: 100%;
}

table.panelMenuItem td {
	vertical-align: middle;
	font-size: 0px;
}

table.panelMenuItem td.fill {
	width: 90%;
}

table.panelMenuItem td.spacer {
	padding-right: 8px;
}

table.panelMenuItem td.checkBox {
	padding-right: 8px;
}

table.panelMenuItem td.icon {
	padding-right: 8px;
}

img.itemIcon {
	display: block;
	width: 28px;
	height: 28px;
	border: none;
}

div.overlayIcon {
	position: relative;
}

div.overlayIconBox {
	position: relative;
	width: 24px;
	height: 24px;
	background-color: hsla(0, 0%, 100%, 0.20);
	border: solid 1px hsla(0, 0%, 100%, 0.35);
	box-sizing: border-box;
}

div.oiForecast div.overlayIconBox {
	background-color: hsl(150, 35%, 40%);
}

div.oiObs div.overlayIconBox {
	background-color: hsl(200, 35%, 45%);
}

div.oiClimate div.overlayIconBox {
	background-color: hsl(35, 50%, 40%);
}

div.oiAnomaly div.overlayIconBox {
	background-image: linear-gradient(hsl(0, 50%, 40%), hsl(0, 0%, 65%), hsl(240, 50%, 40%));
	background-repeat: no-repeat;
  background-size: cover;
}

div.oiVariable div.overlayIconBox {
	background-color: hsl(0, 0%, 45%);
}

img.overlayIcon {
	display: inline-block;
	vertical-align: top;
	position: absolute;
	left: 3px;
	top: 3px;
	width: 16px;
	height: 16px;
	border: none;
}



table.panelMenuItem td.pulldown {
	white-space: nowrap;
}

table.panelMenuItem td.title {
	white-space: nowrap;
}

table.panelMenuItem td.wrap {
	white-space: normal;
}

p.panelMenuItemTitle {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
}

p.panelMenuItemTitleMultiLine {
	font-size: 15px;
	line-height: 125%;
	letter-spacing: 0px;
	color: hsl(0, 0%, 100%);
}

p.panelMenuItemTitleDim {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	opacity: 0.75;
	filter: alpha(opacity=75);
}

p.panelMenuItemTitle span.dim, p.panelMenuItemTitleDim span.dim {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	opacity: 0.6;
	filter: alpha(opacity=60);
}

p.panelMenuItemTitle span.small, p.panelMenuItemTitleDim span.small {
	font-size: 12px !important;
}

p.panelMenuItemTitle span.dimFullSize {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	opacity: 0.6;
	filter: alpha(opacity=60);
}

img.panelMenuItemIcon, img.panelMenuItemIconTile, img.panelMenuItemIconPlain {
	display: block;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	background-color: hsl(200, 15%, 65%);
	border: solid 1px hsla(0, 0%, 100%, 0.35);
}

img.panelMenuItemIconPlain {
	background: none;
	border: none;
}

table.panelMenuItem td.checkbox {
	padding-left: 4px;
	white-space: nowrap;
}

table.panelMenuItem td.aux {}

.panelItemButton, .panelItemButtonHl {
	display: block;
	margin: 0px 0px 0px 3px;
	pointer: cursor;
}

.panelItemButtonHl {
	background-image: url('/lib/images/themes/Ocean/buttons/panel_item_button-hilite.png');
	background-repeat: no-repeat;
	background-position: center center;
}

div.panelItemIconButton, div.panelItemIconButtonDim, div.panelItemIconButtonActive {
	display: inline-block;
	padding: 6px;
	border-radius: 3px;
	opacity: 1.0;
	box-sizing: border-box;
	/*background-color: hsl(200, 15%, 65%);*/
	cursor: pointer;
}

div.panelItemIconButtonDim {
	opacity: 0.50;
}

div.panelItemIconButtonActive {
	background-color: hsl(180, 50%, 50%);
}

div.panelItemIconButton:hover, div.panelItemIconButtonDim:hover {
	opacity: 1.0;
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.panelItemIconButton:active, div.panelItemIconButtonDim:active {
	opacity: 1.0;
	background-color: hsla(0, 0%, 100%, 0.25);
}

img.panelItemIconButton {
	display: block;
	width: 13px;
	height: 13px;
}

p.panelItemLabel, input.panelItemLabelField {
	font-size: 15px;
	line-height: 28px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	padding: 0px 6px;
	box-sizing: border-box;
}

input.panelItemLabelField {
	width: 100%;
	color: hsl(0, 0%, 100%);
	border: none;
	resize: none;
	background-color: hsla(0, 0%, 0%, 0.35);
}

input.panelItemLabelField:focus {
	outline: none;
	box-shadow: 0px 0px 2px 2px hsl(50, 100%, 65%);
}

table.panelItemList {}

p.panelItemListHeading {
	font-size: 15px;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	padding: 4px;
	text-align: center;
}

p.panelItemListText, p.panelItemListFreeText, p.panelItemListNumber, p.panelItemListLabel, input.panelItemListField {
	width: 80px;
	font-size: 13px;
	line-height: 16px;
	color: hsl(0, 0%, 100%);
	padding: 4px 8px;
	margin: 2px;
	box-sizing: border-box;
}

p.panelItemListNumber {
	width: 34px;
	text-align: right;
	white-space: nowrap;
	margin-right: 10px;
	opacity: 0.50;
}

p.panelItemListFreeText {
	width: initial;
}

p.panelItemListLabel {
	text-align: left;
	white-space: nowrap;
	margin-right: 10px;
	opacity: 0.50;
}

input.panelItemListField {
	color: hsl(0, 0%, 100%);
	border: none;
	resize: none;
	background-color: hsla(0, 0%, 0%, 0.35);
}

input.panelItemListField:focus {
	outline: none;
	box-shadow: 0px 0px 2px 2px hsl(50, 100%, 65%);
}

div.panelImageWrapper {
	display: inline-block;
	background-color: hsla(0, 0%, 100%, 0.15);
	padding: 6px;
	border-radius: 6px;
}
div.dockPanel {
	display: none;
	position: absolute;
	/* width: 0px; set in Dock.php */
	left: 0px;
	height: auto;
	top: 0px;
	bottom: 0px;
	background-color: hsl(200, 50%, 22%);
	border-right: solid 1px hsl(200, 15%, 20%);
	box-sizing: border-box;
}

div.dockContent {
	position: relative;
	height: 100%;
	overflow-x: hidden;
}

div.dockDisplay {
	position: absolute;
	z-index: 1000;
	left: -100px;
	cursor: pointer;
}

img.dockDisplay {
	display: block;
	border: none;
}

div.dockButtonContainerSnapshot {
	position: relative;
	width: 100%;
}

div.dockButtonSnapshot, div.dockButtonSnapshotActive {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 86px;
	font-size: 0px;
	cursor: pointer;
	pointer-events: auto;
}

div.dockButtonSnapshot:hover {
	background-color: hsl(200, 100%, 60%);
}

div.dockButtonSnapshotActive {
	background-color: hsl(50, 100%, 40%);
}

div.dockButtonShapeSnapshot {
	position: relative;
	width: 66px;
	height: 72px;
	border-radius: 15px;
	background-color: hsl(0, 0%, 100%);
	font-size: 0px;
}

div.dockButtonIconSnapshot {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0px;
	top: 8px;
	font-size: 0px;
	text-align: center;
	pointer-events: none;
}

img.dockButtonIconSnapshot {
	display: inline-block;
	width: 26px;
	height: 26px;
	pointer-events: none;
}

p.dockButtonLabelSnapshot {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0px;
	bottom: 8px;
	font-family: StandardFontRegular, sans-serif !important;
	font-size: 12px;
	letter-spacing: 0.5px;
	line-height: 100%;
	color: hsl(200, 75%, 30%);
	text-align: center;
	pointer-events: none;
}

div.dockButtonContainer {
	position: relative;
	width: 100%;
}

div.dockButtonContainerAux {
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: 0px;
}

div.dockButton, div.dockButtonActive, div.dockButtonDisabled {
	position: relative;
	font-size: 0px;
	box-sizing: border-box;
	cursor: pointer;
}

div.dockButton:hover {
	background-color: hsl(200, 50%, 27%);
}

div.dockButtonActive {
	background-color: hsl(50, 100%, 40%);
}

div.dockButtonContainerAux div.dockButtonActive {
	background-color: hsl(200, 75%, 35%);
}

div.dockButtonDisabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

div.dockButtonIcon {
	font-size: 0px;
	text-align: center;
	pointer-events: none;
}

img.dockButtonIcon {
	display: inline-block;
	/*width: 40px;*/
	/*height: 40px;*/
	border: none;
	pointer-events: none;
}

p.dockButtonLabel {
	color: hsla(0, 0%, 100%, 0.50);
	font-size: 12px;
	line-height: 125%;
	letter-spacing: 1px;
	text-align: center;
	margin-top: 5px;
	pointer-events: none;
}

/*
div.dockButtonIconVis {
	position: absolute;
	z-index: 11;
	width: 26px;
	height: 26px;
	right: 0px;
	top: 0px;
	cursor: pointer;
}

div.dockButtonIconVisOff, div.dockButtonIconVisOn {
	display: block;
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	left: 7px;
	top: 7px;
	background-color: hsla(0, 0%, 100%, 0.25);
	poniter-events: none;
}

div.dockButtonIconVisOn {
	background-color: hsl(150, 100%, 40%);
}
*/

div.dockButtonIconVis {
	position: absolute;
	z-index: 11;
	width: 34px;
	height: 24px;
	right: 0px;
	top: 0px;
	cursor: pointer;
}

div.dockButtonIconVisOff, div.dockButtonIconVisOn {
	display: block;
	position: absolute;
	width: 28px;
	height: 18px;
	border-radius: 9px;
	right: 3px;
	top: 3px;
	background-color: hsla(0, 0%, 100%, 0.25);
	poniter-events: none;
}

div.dockButtonIconVisOn {
	background-color: hsl(150, 100%, 40%);
}

div.dockButtonIconVisNode {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: hsla(0, 0%, 100%, 0.50);
}

div.dockButtonIconVisOn div.dockButtonIconVisNode {
	left: initial;
	right: 0px;
	background-color: hsl(0, 0%, 100%);
}

div.dockButtonIndicatorOff, div.dockButtonIndicatorOn {
	display: block;
	position: absolute;
	z-index: 10;
	width: 3px;
	height: auto;
	left: 0px;
	top: 0px;
	bottom: 0px;
	background-color: hsla(0, 0%, 0%, 0);
	pointer-events: none;
}

div.dockButtonIndicatorOn {
	background-color: hsl(190, 100%, 65%);
}

div.dockButtonDisabled table.dockButton, div.dockButtonDisabled div.dockButtonIndicatorOff, div.dockButtonDisabled div.dockButtonIndicatorOn, div.dockButtonDisabled div.dockButtonIconVis {
	opacity: 0.25 !important;
	filter: alpha(opacity=25) !important;
}



/*** DOCK TOGGLE ***/
div.dockToggle {
	position: absolute;
	z-index: 5;
	left: 0px;
	top: 0px;
	width: 35px;
	height: 35px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: hsl(204, 35%, 28%);
	box-sizing: border-box;
	overflow: hidden;
}

div.dockToggleButton {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 35px;
	height: 35px;
	cursor: pointer;
}

div.dockToggleButton:hover {
	background-color: hsla(0, 0%, 100%, 0.10);
}

.dockToggleIconSvgL, .dockToggleIconSvgR {
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
	top: 7px;
	fill: hsl(200, 75%, 75%);
	pointer-events: none;
}

div.dockToggleClosed .dockToggleIconSvgL {
	left: 1px;
}

div.dockToggleClosed .dockToggleIconSvgR {
	left: 13px;
}

div.dockToggleOpen .dockToggleIconSvgL {
	left: 1px;
	transform: rotate(180deg);
}

div.dockToggleOpen .dockToggleIconSvgR {
	left: 13px;
	transform: rotate(180deg);
}

div.dockToggleLabel {
	position: absolute;
	height: 36px;
	left: 22px;
	color: hsl(200, 75%, 75%);
	font-size: 15px;
	line-height: 36px;
	letter-spacing: 1px;
}
#panel-timebar {
	position: absolute;
	z-index: 11;
	width: auto;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: visible;
}

#timebar {
	position: relative;
	width: 100%;
	height: 0px;
	box-sizing: border-box;
	border-top: solid 1px hsl(200, 15%, 20%);
	background-color: hsl(200, 40%, 22%);
	overflow: hidden;
}

#tb-date-time-container, #tb-date-time-container-simple {
	position: absolute;
	z-index: 2;
	width: 340px;
	height: 35px;
	left: 50%;
	margin-left: -170px;
	font-size: 0px;
	text-align: center;
	pointer-events: none;
}

#tb-date-time-container-simple {
	width: 460px;
	margin-left: -230px;
}

/*
#timebar_simple_menu {
	position: absolute;
	z-index: 12;
	width: 270px;
	height: 350px;
	left: 50%;
	margin-left: -135px;
	bottom: 30px;
	background-color: hsl(200, 50%, 35%);
	border-radius: 4px;
	box-shadow: 0px 1px 2px 1px hsla(0, 0%, 0%, 0.35);
}
*/

.timebarDate, .timebarDateSel, .timebarTime, .timebarDateReadonly, .timebarTimeReadonly {
	position: relative;
	display: inline-block;
	font-family: StandardFontLight, sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	color: hsl(50, 100%, 65%);
	line-height: 27px;
	padding: 0px 6px;
}

.timebarDate, .timebarDateSel {
	line-height: 27px;
	border: solid 1px hsla(0, 0%, 100%, 0.25);
	margin: 3px 2px;
	border-radius: 4px;
	cursor: pointer;
	pointer-events: auto;
}

.timebarDate:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarDate:active {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarDateSel {
	background-color: hsla(0, 0%, 0%, 0.20);
	cursor: pointer;
}

.timebarDateSel:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarDateSel:active {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarTime {}

.timebarDateReadonly {
	padding: 0px;
	margin: 3px 6px 3px 0px;
}

.timebarTimeReadonly {
	padding: 0px;
	margin: 3px 0px 3px 6px;
}

.timebarSimpleWrapper {
	display: inline-block;
	width: 250px;
	text-align: center;
}

.timebarSimpleSpacer {
	display: inline-block;
	width: 25px;
}

#timebar-ctrls-left {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	height: 35px;
}

#timebar-ctrls-right {
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	height: 35px;
}

.timebarButton, .timebarButtonSelected, .timebarButtonActive, .timebarButtonSelectedActive, .timebarButtonDisabled {
	display: inline-block;
	padding: 7px 7px;
	cursor: pointer;
}

#timebar-ctrls-left .timebarButton, #timebar-ctrls-left .timebarButtonSelected, #timebar-ctrls-left .timebarButtonActive, #timebar-ctrls-left .timebarButtonSelectedActive, #timebar-ctrls-left .timebarButtonDisabled {
	margin-right: 0px;
}

#timebar-ctrls-right .timebarButton, #timebar-ctrls-right .timebarButtonSelected, #timebar-ctrls-right .timebarButtonActive, #timebar-ctrls-right .timebarButtonSelectedActive, #timebar-ctrls-right .timebarButtonDisabled {
	margin-left: 0px;
}

img.timebarButtonIcon {
	display: block;
	width: 21px;
	height: 21px;
	pointer-events: none;
}

.timebarButton:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarButton:active, .timebarButtonActive {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarButtonSelected {
	background-color: hsl(50, 100%, 40%);
}

.timebarButtonSelected:active, .timebarButtonSelectedActive {
	background-color: hsl(50, 100%, 50%);
}

.timebarButtonDisabled {
	opacity: 0.25 !important;
	filter: alpha(opacity=25) !important;
	cursor: default;
	pointer-events: none;
}

.timebarTextButton, .timebarTextButtonActive, .timebarTextButtonDisabled {
	position: relative;
	display: inline-block;
	width: 50px;
	font-family: StandardFontLight, sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	color: hsl(0, 0%, 100%);
	line-height: 27px;
	text-align: center;
	padding: 0px 6px;
	border: solid 1px hsla(0, 0%, 100%, 0.25);
	margin: 3px 2px;
	border-radius: 4px;
	cursor: pointer;
	pointer-events: auto;
}

.timebarTextButton:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarTextButton:active, .timebarTextButtonActive {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.timebarTextButtonDisabled {
	opacity: 0.25 !important;
	filter: alpha(opacity=25) !important;
	cursor: default;
	pointer-events: none;
}

#timebar-selection-tray {
	position: absolute;
	z-index: 1;
	visibility: hidden;
	width: auto;
	left: 0px;
	right: 0px;
	top: 35px;
	background-color: hsla(0, 0%, 0%, 0.20);
	text-align: center;
	padding: 0px 35px;
}

div.tbTrayCloseBtn {
	position: absolute;
	width: 35px;
	height: 35px;
	right: 0px;
	top: 0px;
	cursor: pointer;
}

div.tbTrayCloseBtn:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

div.tbTrayCloseBtn:active {
	background-color: hsla(0, 0%, 100%, 0.20);
}

img.tbTrayCloseBtn {
	position: absolute;
	z-index: 1;
	display: block;
	width: 13px;
	height: 13px;
	left: 11px;
	top: 11px;
}

.tbTrayBtn, .tbTrayBtnSel, .tbTrayBtnDisabled {
	display: inline-block;
	vertical-align: top;
	height: 35px;
	line-height: 35px;
	color: hsl(200, 50%, 65%);
	font-size: 14px;
	letter-spacing: 1px;
	padding: 0px 6px;
	cursor: pointer;
}

.tbTrayBtn:hover {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.tbTrayBtn:active {
	background-color: hsla(0, 0%, 100%, 0.20);
}

.tbTrayBtnSel {
	color: hsl(0, 0%, 0%);
	background-color: hsl(50, 100%, 65%);
	pointer-events: none;
}

.tbTrayBtnDisabled {
	opacity: 0.25 !important;
	pointer-events: none;
}

#panel-timeline {
	position: absolute;
	z-index: 10;
	width: auto;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: hidden;
	background-color: hsl(200, 40%, 22%);
}

#container-timeline {
	position: absolute;
	z-index: 1;
	width: auto; /*100%*/
	left: 0px;
	right: 0px;
	cursor: pointer;
}

#overlay-timeline { /* contains loading animation, etc. */
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100px;
	bottom: 0px;
	padding-top: 30px;
	box-sizing: border-box;
	pointer-events: none;
}

#hilite-timeline {
	position: absolute;
	z-index: 3;
	display: none;
	width: 0px;
	height: 0px;
	left: 0px;
	top: 0px;
	background-color: hsla(0, 0%, 100%, 0.35);
	border: solid 2px hsl(0, 0%, 100%);
	box-sizing: border-box;
	pointer-events: none;
	animation-name: timelineHilitePulse;
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes timelineHilitePulse {
	0%   {background-color: hsla(0, 0%, 100%, 0.00);}
	100% {background-color: hsla(0, 0%, 100%, 0.35);}
}

div.timelineInfoPanel {
	position: absolute;
	z-index: 99;
	left: 0px;
	bottom: 0px;
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsla(0, 0%, 0%, 0.25);
	border-bottom: none;
	box-sizing: border-box;
}

div.timelineInfoPanelArrow {
	position: absolute;
	z-index: 1;
	bottom: -20px;
	left: 50%;
	margin-left: -20px;
	width: 40px;
	height: 40px;
	background-color: hsl(0, 0%, 100%);
	transform: rotate(45deg);
	transform-origin: 50% 50%;
}

div.timelineInfoPanelContent {
	position: relative;
	z-index: 2;
	padding: 20px;
}

p.tipText {
	font-size: 16px;
	line-height: 145%;
	/*letter-spacing: 0.5px;*/
	color: hsl(0, 0%, 0%);
	pointer-events: none;
}

div.timelineInfoPanelButton {
	height: 40px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	color: hsl(0, 0%, 100%);
	background-color: hsl(200, 100%, 35%);
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

div.timelineInfoPanel div.checkBoxChecked {
	border-color: hsl(150, 100%, 42%);
}

div.timelineInfoPanel .checkBoxIconSvg {
	fill: hsl(150, 100%, 42%);
}

div.timelineInfoPanel div.checkBoxUnchecked {
	border-color: hsl(0, 0%, 75%);
}

p.timelineInfoPanelCheckBoxText {
	font-size: 15px;
	color: hsl(0, 0%, 10%);
}
.gm-style > div { /*some google map div elements are screwed up if default div position of relative is not removed*/
	position: initial;
}

div.mapPanel {
	position: absolute;
	display: none;
	z-index: 1;
	width: auto;
	left: 0px;
	right: 0px;
	height: auto;
	top: 0px;
	bottom: 0px; /* overridden in PanelManager.js */
	overflow: hidden;
}

div.mapControls {
	position: absolute;
	z-index: 2;
	width: 100%;
	left: 0px;
	height: 36px;
	top: 0px;
	background-color: hsl(200, 40%, 22%);
	border-bottom: solid 1px hsl(200, 15%, 20%);
	box-sizing: border-box;
}

div.mapControlsL {
	position: absolute;
	top: 0px;
	height: 35px;
	left: 80px;
	font-size: 0px;
	overflow: hidden;
}

div.mapControlsR {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 35px;
	font-size: 0px;
}

div.mapControl {
	padding: 3px;
	cursor: pointer;
}

div.mapReadoutDisplayTitle {
	display: inline-block;
	vertical-align: top;
	font-family: StandardFontRegular, sans-serif;
	color: hsl(200, 25%, 65%);
	font-size: 16px;
	letter-spacing: 1px;
	height: 35px;
	line-height: 35px;
	margin-left: 10px;
	overflow: hidden;
}

div.mapReadoutDisplay {
	display: inline-block;
	vertical-align: top;
	color: hsl(0, 0%, 100%);
	font-size: 16px;
	letter-spacing: 1px;
	height: 35px;
	line-height: 35px;
	width: 165px;
	margin-left: 8px;
	overflow: hidden;
}

div.mapElements {
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0px;
	height: auto;
	top: 36px;
	bottom: 0px;
}

div.mapCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: hsl(0, 0%, 85%);
	cursor: crosshair;
	box-sizing: border-box;
}

div.mapLegendsWrapper {
	position: absolute;
	z-index: 14;
	display: block;
	left: 5px;
	bottom: 5px;
	pointer-events: none;
}

div.mapAdditionalInfoPanel, div.mapAdditionalInfoPanelMinimize {
	position: absolute;
	z-index: 15;
	display: block;
	opacity: 1;
	right: 5px;
	top: 5px;
	background-color: hsl(0, 0%, 96%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	/*transition: opacity 0.35s linear;*/
	/*transition: right 0.25s linear;*/
}

div.mapAdditionalInfoPanelMinimize {
	/*opacity: 0;*/
	right: 362px;
}

div.mapXtraInfoPanel {
	display: block;
	background-color: hsl(0, 0%, 96%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	margin-top: 5px;
	padding: 10px;
}

p.mapXtraInfo {
	color: hsl(0, 0%, 0%);
	font-size: 14px;
	line-height: 175%;
}

div.mapColorbarPanel {
	margin-left: 5px;
	margin-top: 20px;
	background-color: hsl(0, 0%, 96%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	pointer-events: auto;
}

/*
div.mapColorbarPanelHidden {
	position: relative;
	z-index: 1;
	opacity: 0;
	left: -50px;
	transform: scale(1);
	transform-origin: bottom left;
	transition: opacity 0.25s linear, left 0.25s linear;
}

div.mapColorbarPanelVisible {
	opacity: 1;
	transform: scale(1);
	left: 0px;
	transition: opacity 0.25s linear, left 0.25s linear;
}
*/

div.mapColorbarColormap, div.mapColorbarColormapSelected {
	padding: 10px;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: pointer;
}

div.mapColorbarColormap:hover {
	background-color: hsl(195, 100%, 90%);
}

div.mapColorbarColormapSelected {
	background-color: hsl(195, 100%, 80%);
	pointer-events: none;
}

div.mapColorbarColormapGradient {
	width: 200px;
	height: 16px;
	border: solid 1px hsl(0, 0%, 0%);
	background-color: hsl(0, 0%, 70%);
	background-position: center;
	background-size: cover;
	background-repeat: repeat-y;
	box-sizing: border-box;
}

p.mapColorbarColormapLabel {
	font-family: StandardFontRegular, sans-serif;
	font-size: 12px;
	color: hsl(0, 0%, 0%);
	text-align: center;
	margin-top: 5px;
}

div.mapColorbarRange {
	position: relative;
	height: 38px;
	margin-top: 15px;
}

input.mapColorbarRangeStart, input.mapColorbarRangeEnd {
	position: absolute;
	z-index: 2;
	left: 0px;
	top: 0px;
	width: 70px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 14px;
	line-height: 25px;
	padding: 5px 10px;
	color: hsl(0, 0%, 5%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(0, 0%, 25%);
	border-radius: 3px;
	resize: none;
	box-sizing: border-box;
	pointer-events: auto;
}

input.mapColorbarRangeEnd {
	left: initial;
	right: 0px;
	text-align: right;
}

input.mapColorbarRangeStart:focus, input.mapColorbarRangeEnd:focus {
	outline: none;
	box-shadow: 0px 0px 4px 2px hsl(195, 100%, 65%);
}

input.mapColorbarRangeValueInvalid {
	background-color: hsl(0, 100%, 85%);
}

div.mapColorbarUnits {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	height: 37px;
	width: 100%;
	font-size: 15px;
	line-height: 37px;
	color: hsl(0, 0%, 0%);
	text-align: center;
}

div.mouseActionLegend {
	position: absolute;
	z-index: 13;
	display: table;
	top: 5px;
	left: 5px;
}

div.mapLegends {
	font-size: 0px;
	opacity: 1;
	transform-origin: left bottom;
	transform: scale(1, 1);
	transition: transform 0.35s ease, opacity 0.35s ease;
	pointer-events: auto;
}

div.mapLegendsMinimize, div.mapLegendsAutoMinimize {
	opacity: 0.35;
	/*transform-origin: left bottom;*/
	transform: scale(0.25, 0.25);
	/*transition: transform 0.5s ease, opacity 0.5s ease;*/
}

div.mapLegendsAutoMinimize:hover {
	opacity: 1;
	transform: scale(1.0, 1.0);
}

div.mapLegendsSizeControls {
	position: absolute;
	z-index: 1;
	opacity: 0;
	right: 0px;
	top: -45px;
	width: 40px;
	height: 45px;
	transition: opacity 0.35s ease;
	pointer-events: auto;
}

div.mapLegends:hover div.mapLegendsSizeControls {
	opacity: 1;
}

div.mapLegendsSizeControlsTile {
	position: absolute;
	z-index: 1;
	right: 0px;
	top: 0px;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	overflow: hidden;
	pointer-events: auto;
}

div.btnMapLegendMaximize, div.btnMapLegendMaximizeActive {
	position: absolute;
	z-index: 1;
	right: 3px;
	top: 3px;
	width: 16px;
	height: 16px;
	border-top-right-radius: 3px;
	background-color: hsl(0, 0%, 85%);
	pointer-events: auto;
	cursor: pointer;
}

div.btnMapLegendMaximize:hover {
	background-color: hsl(195, 35%, 75%);
}

div.btnMapLegendMaximizeActive {
	background-color: hsl(195, 100%, 45%);
}

div.btnMapLegendMinimize, div.btnMapLegendMinimizeActive {
	position: absolute;
	z-index: 1;
	left: 3px;
	bottom: 3px;
	width: 16px;
	height: 16px;
	border-bottom-left-radius: 3px;
	background-color: hsl(0, 0%, 85%);
	pointer-events: auto;
	cursor: pointer;
}

div.btnMapLegendMinimize:hover {
	background-color: hsl(195, 35%, 75%);
}

div.btnMapLegendMinimizeActive {
	background-color: hsl(195, 100%, 45%);
}

div.mapLegendControlsMask {
	position: absolute;
	z-index: 2;
	left: 7px;
	top: 7px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: hsl(0, 0%, 100%);
	pointer-events: auto;
}

div.btnMapLegendAutoMinimize, div.btnMapLegendAutoMinimizeActive {
	position: absolute;
	z-index: 3;
	left: 12px;
	top: 12px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: hsl(0, 0%, 85%);
	pointer-events: auto;
	cursor: pointer;
}

div.btnMapLegendAutoMinimize:hover {
	background-color: hsl(195, 35%, 75%);
}

div.btnMapLegendAutoMinimizeActive {
	background-color: hsl(195, 100%, 45%);
}

div.mapLegend {
	margin-top: 5px;
	background-color: hsl(0, 0%, 96%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
}

div.mapLegend:first-child {
	margin-top: 0px;
}

div.mapOverlayLegend {
	width: 275px;
}

div.mapLegendTitle {
	padding: 5px;
	background-color: hsl(0, 0%, 100%);
}

div.mapLegendTitle p.title {
	height: 18px;
	font-size: 13px;
	line-height: 18px;
	font-weight: bold;
	color: hsl(0, 0%, 0%);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

div.mapLegendInfo { /*, div.mapLegendInfoLargePad {*/
	padding: 4px;
}

div.mapLegendInfoLargePad {
	padding: 8px;
}

p.mapLegendText {
	font-size: 14px;
	line-height: 17px; /*150%;*/
	color: hsl(0, 0%, 0%);
}

p.mapLegendTextS {
	font-size: 13px;
	line-height: 15px; /*150%;*/
	color: hsl(0, 0%, 0%);
}

p.mapLegendText a {
	line-height: 150%;
}

div.layerLegend, div.layerLegendClickable, div.layerLegendClickableActive {
	margin-top: 8px;
	text-align: center;
	padding: 4px;
	border: solid 1px hsl(0, 0%, 100%);
	background-color: hsla(0, 0%, 100%, 0.75);
 	box-sizing: border-box;
}

div.layerLegendClickable {
	border-color: hsl(195, 100%, 55%);
	pointer-events: auto;
	cursor: pointer;
}

div.layerLegendClickable:hover {
	background-color: hsl(195, 100%, 90%);
}

div.layerLegend:first-child {
	margin-top: 0px;
}

div.layerLegendClickableActive {
	background-color: hsl(195, 100%, 80%);
	border-color: hsl(195, 100%, 65%);
	pointer-events: auto;
	cursor: pointer;
}

img.layerLegend, img.layerLegendCickable {
	display: block;
	width: 100%;
}

div.mapLegendButton, div.mapLegendButtonSolid, div.mapLegendButtonSolidDisabled {
	display: inline-block;
	height: 32px;
	font-size: 13px;
	line-height: 30px;
	padding: 0px 10px;
	text-align: center;
	color: hsl(0, 0%, 0%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(0, 0%, 75%);
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

div.mapLegendButtonSolid, div.mapLegendButtonSolidDisabled {
	color: hsl(0, 0%, 100%);
	background-color: hsl(195, 100%, 35%);
	color: hsl(0, 0%, 100%);
	border: none;
}

div.mapLegendButtonSolidDisabled {
	background-color: hsl(0, 0%, 35%);
	opacity: 0.25;
	pointer-events: none;
}

div.mapLegend div.iconButton:hover, div.mapLegend a.iconButton:hover {
	background-color: hsla(0, 0%, 0%, 0.06);
}

div.mapLegendAutoFitRangeIndicatorOn, div.mapLegendAutoFitRangeIndicatorOff {
	visibility: visible;
	display: inline-block;
	font-size: 11px;
	line-height: 20px;
	color: white;
	background-color: hsl(160, 100%, 35%);
	text-align: center;
	padding: 0px 6px;
	border-radius: 4px;
	pointer-events: none;
}

div.mapLegendAutoFitRangeIndicatorOff {
	visibility: hidden;
}

input.mapLegendLinkField {
	display: block;
	width: 100%;
	font-size: 12px;
	color: hsl(0, 0%, 0%);
	border: solid 1px hsl(0, 0%, 50%);
	background-color: hsla(0, 0%, 100%, 0.75);
	padding: 3px;
	box-sizing: border-box;
}

input.mapLegendLinkField:focus {
	outline: none;
}

p.legendAlert {
	font-size: 0.92em;
	font-weight: normal;
	line-height: 135%;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 100%);
	padding: 8px;
	background-color: hsl(0, 100%, 20%);
}

div.mapLegendIndicator { /* fills 23x23 space */
	display: inline-block;
	width: 17px;
	height: 17px;
	margin: 2px;
	border: solid 1px hsla(0, 0%, 0%, 0.30);
}

div.mapLegendOptionButton, div.mapLegendOptionButtonSelected {
	position: relative;
	font-size: 0px;
	padding: 2px 5px;
	cursor: pointer;
}

div.mapLegendOptionCheckBox {
	position: relative;
	width: 30px;
	height: 30px;
	border: solid hsl(0, 0%, 35%);
	border-radius: 3px;
	box-sizing: border-box;
	pointer-events: none;
}

div.mapLegendOptionButtonSelected div.mapLegendOptionCheckBox {
	border: solid 2px hsl(195, 100%, 40%);
	background-color: hsl(195, 100%, 40%);
}

.mapLegendOptionCbIconSvg {
	position: absolute;
	display: none;
	width: 20px;
	height: 20px;
	left: 3px;
	top: 3px;
	fill: hsl(0, 0%, 35%);
}

div.mapLegendOptionButtonSelected .mapLegendOptionCbIconSvg {
	display: block;
	fill: hsl(0, 0%, 100%);
}

p.mapLegendOptionCbLabel {
	/*position: relative;
	top: -2px;*/
	font-family: StandardFontRegular, sans-serif;
	font-size: 13px;
	line-height: 16px;
	color: hsl(0, 0%, 35%);
	padding-left: 6px;
	pointer-events: none;
}

p.mapLegendOptionCbLabel span {
	font-family: StandardFontRegular, sans-serif;
}

div.mapLegendOptionButtonSelected p.mapLegendOptionCbLabel, div.mapLegendOptionButtonSelected p.mapLegendOptionCbLabel span {
	color: hsl(192, 100%, 30%);
}

div.mapLegendScrollableList {
	border: solid 1px hsl(0, 0%, 65%);
	overflow-y: auto;
}

div.mliInvis {
	border: none;
}

div.mliDefault {
	background-color: hsl(0, 0%, 75%);
}

div.mliGreen {
	background-color: hsl(140, 75%, 65%);
}

div.mliYellow {
	background-color: hsl(60, 100%, 65%);
}

div.mliOrange {
	background-color: hsl(30, 100%, 65%);
}

div.mliRed {
	background-color: hsl(0, 100%, 50%);
}

p.mapOverPanelTitle {
	font-size: 14px;
	font-weight: bold;
	line-height: 150%;
	letter-spacing: 0.5px;
	white-space: nowrap;
	text-align: center;
	color: hsl(0, 0%, 0%);
	background-color: hsl(0, 0%, 100%);
	padding: 10px;
}

.mapOverPanelInfo {
	font-size: 12px;
	line-height: 150%;
	letter-spacing: 0.5px;
	white-space: nowrap;
	text-align: center;
	color: hsl(0, 0%, 0%);
	background-color: hsl(0, 0%, 100%);
	padding: 10px;
}

.mapOverPanelInfoText {
	font-size: 12px;
	line-height: 150%;
	letter-spacing: 0.5px;
	white-space: nowrap;
	text-align: center;
	color: hsl(0, 0%, 0%);
}

div.mapOverPanelContent {
	background-color: hsl(0, 0%, 96%);
	padding: 10px;
}

.mapOverPanelButton, .mapOverPanelButtonAlt {
	display: block;
	padding: 5px;
	border-radius: 3px;
	margin-top: 5px;
	cursor: pointer;
	pointer-events: auto;
}

.mapOverPanelButtonAlt {
	background-color: hsl(200, 100%, 35%);
}

.mapOverPanelButton:first-child, .mapOverPanelButtonAlt:first-child {
	margin-top: 0px;
}

a.mapOverPanelButton:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 0%, 0.05);
}

a.mapOverPanelButtonAlt:hover {
	text-decoration: none;
	background-color: hsl(200, 80%, 45%);
}

.mapOverPanelButton img.icon, .mapOverPanelButtonAlt img.icon {
	display: block;
	padding-right: 8px
}

.mapOverPanelButton p.label, .mapOverPanelButtonAlt p.label {
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 0%);
	white-space: nowrap
}

.mapOverPanelButton p.sublabel, .mapOverPanelButtonAlt p.sublabel {
	font-size: 12px;
	line-height: 135%;
	letter-spacing: 0.5px;
	color: hsl(0, 0%, 35%);
	white-space: nowrap
}

.mapOverPanelButtonAlt p.label {
	color: hsl(0, 0%, 100%);
}

.mapOverPanelSolidButton {
	padding: 0px 8px;
	line-height: 26px;
	font-size: 13px;
	border-radius: 4px;
	color: hsl(0, 0%, 100%);
	background-color: hsl(200, 100%, 35%);
	text-align: center;
	cursor: pointer;
}



/*** MAP TIP ***/
div.mapTip {
	display: none;
	position: absolute;
	z-index: 12;
	top: -100px;
	left: -100px;
	font-size: 12px;
	font-style: normal;
	color: hsl(0, 0%, 0%);
	padding: 4px 4px 3px 5px;
	white-space: nowrap;
	background-color: hsl(0, 0%, 100%);
	line-height: 125%;
	border-radius: 4px;
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	pointer-events: none;
}

div.mapTip p {
	color: hsl(0, 0%, 0%);
	font-size: 12px;
	padding: 2px;
}

div.mapTip p.mapTipXtraLineHeight {
	line-height: 175% !important;
	padding: 0px 2px;
}

div.mapTip p.mapTipBorderBottom {
	border-bottom: solid 1px hsl(0, 0%, 80%);
}

div.mapTip p.title {
	color: hsl(0, 0%, 0%);
	font-size: 13px;
	letter-spacing: 0.5px;
	font-weight: bold;
	padding: 4px 4px 2px 4px;
}

div.mapTip p.subtext {
	color: hsl(0, 0%, 35%);
	font-size: 11px;
	font-style: italic;
	padding: 2px 4px 4px 4px;
}

div.mapTip p.mapTipAlert {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 100%, 25%);
	text-align: center;
	margin: 4px 0px 3px 0px;
	padding: 6px;
	line-height: 130%;
	border-radius: 4px;
}

div.mapTip p.mapTipDisabled {
	color: hsl(0, 0%, 96%);
	background-color: hsl(0, 0%, 40%);
	text-align: center;
	padding: 0px 5px;
	line-height: 22px;
	border-radius: 4px;
	font-size: 11px;
	margin-left: 2px;
	letter-spacing: 1px;
}



/*** MAP MISC ***/
div.mapMisc {
	display: none;
	position: absolute;
	z-index: 11;
	top: -100px;
	left: -100px;
	pointer-events: none;
}



/*** MAP POINT VALUE ***/
div.mapPointValueDiv {
	display: none;
	position: absolute;
	z-index: 21;
	top: -100px;
	left: -100px;
	pointer-events: none;
}

div.mapPointValueWrapper {
	/*
	position: relative;
	top: -34px;
	*/
	position: absolute;
	left: 0px;
	bottom: 0px;
	border: solid 1px hsl(0, 0%, 100%);
	background-color: hsl(0, 0%, 98%);
	border-radius: 10px;
	border-bottom-left-radius: 0px;
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
}

div.mapPointValue {
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 1px;
	color: hsl(0, 0%, 0%);
	padding: 6px 8px;
	white-space: nowrap;
	line-height: 135%;
	/*border-radius: 25px;*/
}

div.mapPointValue span.units {
	position: relative;
	top: 0px;
	font-size: 12px;
	font-weight: normal;
	padding-left: 4px;
}



/*** MAP NOTICES **/
div.mapNoticeTop, div.mapNoticeBottom {
	position: absolute;
	z-index: 20;
	width: auto;
	left: 50px;
	right: 50px;
	top: 20px;
	font-size: 0px;
	text-align: center;
	pointer-events: none;
}

div.mapNoticeBottom {
	top: initial;
	bottom: 20px;
}

div.mapNoticePanel {
	display: inline-block;
	padding: 10px;
	border-radius: 4px;
	font-size: 0px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
}

p.mapNoticePanelMsg {
	color: hsl(0, 0%, 0%);
	line-height: 135%;
}



/*** BASEMAP MENU ***/
div.basemapMenuContainer {
	position: relative;
}

div.basemapMenuButton, div.basemapMenuButtonSel {
	height: 35px;
	background-color: hsla(0, 0%, 100%, 0.05);
	font-size: 0px;
	padding: 0px 15px;
	cursor: pointer;
}

div.basemapMenuButton:hover {
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.basemapMenuButtonSel {
	background-color: hsl(200, 50%, 35%);
}

div.basemapMenuLabel {
	display: inline-block;
	vertical-align: top;
	font-family: StandardFontRegular, sans-serif;
	width: 110px;
	color: hsl(0, 0%, 100%);
	height: 35px;
	line-height: 35px;
	letter-spacing: 1px;
	font-size: 16px;
	white-space: nowrap;
	margin-right: 10px;
	pointer-events: none;
}

div.basemapMenuIcon {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: 35px;
	pointer-events: none;
}

.basemapMenuIconSvgUp, .basemapMenuIconSvgDown {
	position: absolute;
	width: 20px;
	height: 10px;
	left: 0px;
	fill: hsl(200, 25%, 65%);
}

.basemapMenuIconSvgUp {
	top: 6px;
}

.basemapMenuIconSvgDown {
	top: 19px;
}

div.basemapMenuList {
	position: absolute;
	width: 100%;
	right: 0px;
	top: 36px;
	padding: 5px;
	background-color: hsl(200, 50%, 35%);
	box-sizing: border-box;
}

div.basemapMenuItem, div.basemapMenuItemSel {
	color: hsl(0, 0%, 100%);
	height: 30px;
	line-height: 30px;
	letter-spacing: 1px;
	font-size: 16px;
	padding: 0px 10px;
	cursor: pointer;
}

div.basemapMenuItem:hover {
	background-color: hsla(0, 0%, 100%, 0.15);
}

div.basemapMenuItemSel {
	background-color: hsl(50, 85%, 40%);
	pointer-events: none;
}



/*** GRATICULES ***/
div.graticuleLine, div.graticuleLine {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

div.graticuleLineTerrain {
	background-color: hsla(0, 0%, 0%, 0.10);
}

div.graticuleLineSatellite {
	background-color: hsla(0, 0%, 100%, 0.10);
}

div.graticuleLineRoad {
	background-color: hsla(0, 0%, 0%, 0.10);
}

div.graticuleLineHybrid {
	background-color: hsla(0, 0%, 0%, 0.10);
}

div.graticuleLineRelief {
	background-color: hsla(0, 0%, 100%, 0.15);
}

div.graticuleLineGebco {
	background-color: hsla(0, 0%, 100%, 0.15);
}

div.graticuleLineArcGisTopo {
	background-color: hsla(0, 0%, 0%, 0.10);
}

div.graticuleLabelLat, div.graticuleLabelLon {
	position: absolute;
	z-index: 2;
	font-size: 11px;
	height: 18px;
	line-height: 18px;
	white-space: nowrap;
	pointer-events: none;
}

div.graticuleLabelLat {
	padding: 0px 5px 0px 3px;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 9px;
}

div.graticuleLabelLon {
	width: 90px;
	text-align: center;
	border-bottom-left-radius: 9px;
	border-bottom-right-radius: 9px;
}

div.graticuleLabelTerrain {
	color: hsl(0, 0%, 20%);
	background-color: hsl(193, 75%, 70%); /*hsl(218, 86%, 76%);*/ /*hsl(206, 90%, 82%);*/
	border: solid 1px hsla(0, 0%, 0%, 0.10);
}

div.graticuleLabelSatellite {
	color: hsl(0, 0%, 90%);
	background-color: hsl(225, 50%, 30%);
	border: solid 1px hsla(0, 0%, 100%, 0.20);
}

div.graticuleLabelRoad {
	color: hsl(0, 0%, 20%);
	background-color: hsl(218, 86%, 76%); /*hsl(206, 90%, 82%);*/
	border: solid 1px hsla(0, 0%, 0%, 0.10);
}

div.graticuleLabelHybrid {
	color: hsl(0, 0%, 90%);
	background-color: hsl(230, 50%, 30%);
	border: solid 1px hsla(0, 0%, 100%, 0.20);
}

div.graticuleLabelRelief {
	color: hsl(0, 0%, 90%);
	background-color: hsl(235, 55%, 55%);
	border: solid 1px hsla(0, 0%, 100%, 0.20);
}

div.graticuleLabelGebco {
	color: hsl(0, 0%, 90%);
	background-color: hsl(218, 50%, 35%);
	border: solid 1px hsla(0, 0%, 100%, 0.20);
}

div.graticuleLabelArcGisTopo {
	color: hsl(0, 0%, 20%);
	background-color: hsl(200, 100%, 86%);
	border: solid 1px hsla(0, 0%, 0%, 0.10);
}

.forceMapCrosshair * {
	cursor: crosshair !important;
}

.mapElements .forceMapCrosshair img { /*allow map markers to use pointer cursor*/
	cursor: pointer !important;
}
div.infoObj {
	pointer-events: auto;
}



/***********************************
INFO PANEL PANE
***********************************/
div.infoPanelPane {
	position: absolute;
	z-index: 99;
	display: none;
	/*width: 400px;*/
	right: 5px;
	height: auto;
	top: 5px;
	bottom: 5px;
	pointer-events: auto;
}

div.infoPanelPaneFlex {
	position: absolute;
	z-index: 99;
	display: none;
	right: 5px;
	top: 5px;
	pointer-events: auto;
}



/***********************************
INFO PANEL CONTAINER
***********************************/
div.infoPanelContainer {
	/*
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
	bottom: 0px;
	*/
	position: relative;
	/*width: 100%; set when info panel is opened */
	height: 100%;
	pointer-events: none;
}

div.infoPanelPaneFlex div.infoPanelContainer {
	position: relative;
	height: initial;
	top: initial;
	bottom: initial;
}



/***********************************
INFO PANEL
***********************************/
div.infoPanel {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
	bottom: 0px;
	padding: 6px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: auto;
}

div.infoPanelPaneFlex div.infoPanel {
	position: relative;
	height: initial;
	top: initial;
	bottom: initial;
}



/***********************************
INFO WINDOW PANE
***********************************/
div.infoWindowPane {
	pointer-events: none;
}

/* override google .gm-style class */
div.infoWindowPane div, div.infoWindowPane a, div.infoWindowPane p, div.infoWindowPane span {
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
}



/***********************************
INFO WINDOW CONTAINER
***********************************/
div.infoWindowContainer {
	position: relative;
	pointer-events: none;
}



/***********************************
INFO WINDOW
***********************************/
div.infoWindow {
	position: relative;
	padding: 6px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
	overflow: hidden;
	pointer-events: auto;
}




/***********************************
COMMON TO INFO WINDOW & INFO PANEL
***********************************/
div.infoObj * {
	font-family: StandardFontRegular, sans-serif !important;
	letter-spacing: 0px !important;
}

/*
img.infoWindowPointer {
	position: relative;
	z-index: 1;
	top: -1px;
	display: block;
	margin: 0px auto;
	pointer-events: auto;
}
*/

div.infoWindowPointerTop {
	position: relative;
	z-index: 1;
	top: 0px;
	display: block;
	height: 28px;
	margin: 0px auto;
	-ms-transform: scaleX(0.75);
	-webkit-transform: scaleX(0.75);
	transform: scaleX(0.75);
	overflow: hidden;
	pointer-events: none;
}

div.infoWindowPointerRectTop {
	position: absolute;
	left: 50%;
	margin-left: -20px;
	bottom: -24px;
	width: 40px;
	height: 40px;
	-ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
  pointer-events: auto;
}

div.infoWindowPointerBottom {
	position: relative;
	z-index: 1;
	top: 0px;
	display: block;
	height: 35px;
	margin: 0px auto;
	-ms-transform: scaleX(0.75);
	-webkit-transform: scaleX(0.75);
	transform: scaleX(0.75);
	overflow: hidden;
	pointer-events: none;
}

div.infoWindowPointerRectBottom {
	position: absolute;
	left: 50%;
	margin-left: -20px;
	top: -24px;
	width: 40px;
	height: 40px;
	-ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.25);
  pointer-events: auto;
}

div.infoWindowClose {
	position: absolute;
	z-index: 100;
	right: 2px;
	top: 9px;
	padding: 3px;
	cursor: pointer;
}

div.infoWindowClose:hover {
	background-color: hsla(0, 0%, 0%, 0.06);
}

img.infoWindowClose {}

/*div.infoObj p, div.infoObj div, div.infoObj span, div.infoObj li, div.infoObj td {*/
div.infoObj p, div.infoObj div, div.infoObj li, div.infoObj td {
	color: hsl(0, 0%, 0%);
}

div.infoObj p.default, div.infoObj li.default {
	font-size: 13px;
	line-height: 150%;
}

div.infoObj p.default {
	margin-top: 12px;
}

div.infoObj p.default:first-child {
	margin-top: 0px;
}

div.infoObj a, div.infoObj a:visited {
	color: hsl(195, 100%, 35%) /*!important*/; /*should add "link" class to <a> for more specicifity*/
}

div.infoObj img.default, div.infoObj div.imgHolder {
	background-color: hsl(0, 0%, 35%);
	border: solid 1px hsla(0, 0%, 0%, 0.65);
	overflow: hidden;
}

div.infoObj div.horizDivider {
	border-bottom: solid 1px hsla(0, 0%, 0%, 0.65);
	margin: 12px 0px 16px 0px;
}

/*div.infoObj div.heading, div.infoObj div.headingCentered {*/
div.infoObj div.heading {
	height: 24px;
	padding: 4px 22px 5px 3px;
	overflow: hidden;
}

/*
div.infoObj div.headingCentered {
	padding: 4px 22px 5px 22px;
	text-align: center;
}
*/

div.infoObj table.heading, div.infoObj table.headingCentered {
	width: 100%;
	min-height: 24px;
}

div.infoObj table.headingCentered {
	/*
	margin-left: auto;
	margin-right: auto;
	*/
}

div.infoObj table.heading td, div.infoObj table.headingCentered td {
	vertical-align: middle;
	min-height: 24px;
}

div.infoObj table.heading td.headingIcon, div.infoObj table.headingCentered td.headingIcon {
	width: 1%;
}

div.infoObj p.title {
	font-weight: bold;
	font-size: 13px;
}

div.infoObj table.headingCentered p.title {
	text-align: center;
}

div.infoObj p.title a.title {
	font-size: 13px;
	font-weight: bold;
}

div.infoObj table.heading img.headingIcon, div.infoObj table.headingCentered img.headingIcon {
	display: block;
	height: 24px;
}

div.infoObj table.heading img.headingIcon {
	margin-right: 6px;
}

div.infoObj a.link, div.infoObj a.link:visited {
	color: hsl(195, 100%, 35%) !important;
}

div.infoObj div.footer {
	margin-top: 8px;
}

div.infoPanel div.footer {
	position: absolute;
	width: auto;
	left: 8px;
	right: 8px;
	bottom: 8px;
}

div.infoPanelPaneFlex div.infoPanel div.footer {
	position: relative;
	width: initial;
	left: initial;
	right: initial;
	bottom: initial;
}

div.infoObj div.footer p.default {
	padding-bottom: 4px;
}

div.infoObj div.footer a.link, div.infoObj div.footer a.link:visited {
	color: hsl(195, 100%, 35%);
}

img.iWdefault {
	display: block;
}



/***********************************
INFO WINDOW POP-UP DIV
***********************************/
div.infoWindowPopUpDiv {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	border: solid 4px hsl(0, 0%, 100%);
	border-radius: 5px;
	background-color: hsl(0, 0%, 100%);
	box-shadow: 0px 2px 4px 2px hsla(0, 0%, 0%, 0.35);
	padding: 0px;
	pointer-events: auto;
}

div.infoWindowPopUpDiv div.iwpudContent {
	position: relative;
	padding: 5px;
}

div.infoWindowPopUpDiv div.iwpudContent div, div.infoWindowPopUpDiv div.iwpudContent p {
	color: hsl(0, 0%, 0%);
	font-size: 12px;
	line-height: 130%;
}

div.infoWindowPopUpDiv div.iwpudContent a {
	color: hsl(195, 100%, 35%);
}

div.infoWindowPopUpDiv div.iwpudButtonList {
	border-radius: 4px;
	border: solid 1px hsl(0, 0%, 70%);
	background-color: hsl(0, 0%, 98%);
	overflow: hidden;
}

div.infoWindowPopUpDiv div.iwpudContent div.iwpudButtonList {
	border-radius: 2px;
}

div.infoWindowPopUpDiv div.iwpudLink {
	min-width: 60px;
	color: hsl(0, 0%, 0%);
	font-size: 12px;
	text-align: center;
	line-height: 24px !important;
	padding: 0px 6px;
	border-bottom: solid 1px hsl(0, 0%, 70%);
	cursor: pointer;
}

div.infoWindowPopUpDiv div.iwpudLink:last-child {
	border-bottom: none;
}

.mouseInput div.infoWindowPopUpDiv div.iwpudLink:hover {
	background-color: hsla(0, 0%, 0%, 0.05);
}

.mouseInput div.infoWindowPopUpDiv div.iwpudLink:active {
	background: none;
	background-color: hsla(0, 0%, 0%, 0.05);
}



/***********************************
INFO WINDOW LINK URL
***********************************/
div.infoWindowLinkUrl {}

div.infoWindowLinkUrl input.infoWindowLinkUrl {
	display: block;
	width: 98%;
	font-size: 14px;
	color: hsl(0, 0%, 0%);
	border: solid 1px hsl(0, 0%, 50%);
	border-radius: 3px;
	background-color: hsl(0, 0%, 100%);
	padding: 2px 4px;
}



/***********************************
INFO WINDOW TABS
***********************************/
div.infoWindowTabs {
	position: relative;
	border-top: solid 1px hsl(0, 0%, 90%);
}

table.infoWindowTabs {
	width: 100%;
}

div.infoWindowTabs div.tab, div.infoWindowTabs div.tabSelected {
	padding: 0px 4px;
	line-height: 24px;
	font-size: 13px;
	color: hsl(0, 0%, 10%);
	text-align: center;
	cursor: pointer;
}

.mouseInput div.infoWindowTabs div.tab:hover {
	text-decoration: none;
	background-color: hsl(0, 0%, 95%);
}

div.infoWindowTabs div.tabSelected {
	color: hsl(0, 0%, 100%);
	background-color: hsl(200, 100%, 35%);
}

.mouseInput div.infoWindowTabs div.tabSelected:hover {
	text-decoration: none;
}



/***********************************
INFO WINDOW SECTIONS
***********************************/
div.infoWindowSections {
	position: relative;
	padding: 10px;
	background-color: hsl(0, 0%, 98%);
	border: solid 1px hsl(0, 0%, 90%);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}



/***********************************
INFO PANEL SECTIONS
***********************************/
div.infoPaneSectionsContainer {
	position: absolute;
	z-index: 1;
	width: auto;
	left: 6px;
	right: 6px;
	height: auto;
	top: 40px;
	bottom: 6px;
}

div.infoPanelPaneFlex div.infoPaneSectionsContainer {
	position: relative;
	width: initial;
	left:initial;
	right: initial;
	height: initial;
	top: initial;
	bottom: initial;
}

div.infoPaneSecConWithTabs {
	top: 64px;
}

div.infoPanelPaneFlex div.infoPaneSecConWithTabs {
	top: initial;
}

div.infoPaneSecConWithFooter {
	bottom: 42px;
}

div.infoPanelPaneFlex div.infoPaneSecConWithFooter {
	bottom: initial
}

div.infoPanelSections {
	position: absolute;
	z-index: 1;
	width: auto;
	left: 0px;
	right: 0px;
	height: auto;
	top: 0px;
	bottom: 0px;
	padding: 10px;
	background-color: hsl(0, 0%, 98%);
	overflow-x: hidden;
	overflow-y: auto;
}

div.infoPanelPaneFlex div.infoPanelSections {
	position: relative;
	width: initial;
	left: initial;
	right: initial;
	height: initial;
	top: initial;
	bottom: initial;
	padding: 9px;
	border: solid 1px hsl(0, 0%, 90%);
	box-sizing: border-box;
	/*max-height: 500px; set in InfoWindow.js*/
}

div.infoPanelSectionsShadow {
	position: absolute;
	z-index: 2;
	width: auto;
	left: 0px;
	right: 0px;
	height: auto;
	top: 0px;
	bottom: 0px;
	border: solid 1px hsl(0, 0%, 90%);
	pointer-events: none;
}

div.infoPanelPaneFlex div.infoPanelSectionsShadow {
	display: none;
}



/***********************************
INFO WINDOW SECTION CONTENT
***********************************/
div.infoWindowSectionContent {}

div.infoWindowSectionContentDisableScroll {
	position: absolute;
	width: auto;
	height: auto;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
}


/***********************************
INFO WINDOW CONTENT INFO
***********************************/
div.iwcInfo {
	padding: 4px;
	background-color: hsla(0, 0%, 0%, 0.10);
	border: solid 1px hsla(0, 0%, 0%, 0.20);
	border-radius: 8px;
}

div.iwcInfo td {
	vertical-align: middle;
}



.iwhTextField, .iwcTextField {
	color: hsl(0, 0%, 0%);
	font-size: 14px;
	border: solid 1px hsl(0, 0%, 65%);
	background-color: hsl(0, 0%, 100%);
	padding: 2px 3px;
	resize: none;
}


/***********************************
CONTENT RECT
***********************************/
div.contentRect {
	background-color: hsla(0, 0%, 100%, 0.70);
	border-radius: 10px;
	padding: 8px;
}



/***********************************
NOTICE PARAGRAPH
***********************************/
p.iwcNotice {
	color: hsl(0, 0%, 100%);
	font-size: 11px;
	line-height: 125%;
}



/***********************************
TABBED SET
***********************************/
div.iwTabSet {}

div.iwTabRow {
	position: relative;
	border: solid 1px hsl(200, 100%, 30%);
	background-color: hsl(200, 100%, 30%);
	text-align: center;
	margin-bottom: 8px;
	overflow: hidden;
}

div.iwTabRow div.iwTabNorm, div.iwTabRow div.iwTabSelected, div.iwTabRow p.iwTabHeading {
	display: inline-block;
	font-size: 13px;
	white-space: nowrap;
	padding: 5px 12px 4px 12px;
	cursor: pointer;
}

div.iwTabRow div.iwTabNorm {
	color: hsl(0, 0%, 100%);
}

.mouseInput div.iwTabRow div.iwTabNorm:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsla(0, 0%, 100%, 0.20);
}

div.iwTabRow div.iwTabSelected, div.iwTabRow p.iwTabHeading {
	color: hsl(0, 0%, 0%);
	background-color: hsl(0, 0%, 100%);
	cursor: pointer;
}

div.iwTabContainer {
	position: relative;
	overflow: hidden;
}

div.iwTabContainer div, div.iwTabContainer p, div.iwTabContainer span, div.iwTabContainer a {
	font-size: 12px;
}

div.iwTabContainer p.iwTabContainerTitle {
	font-size: 1em;
	font-weight: bold;
	color: hsl(0, 0%, 25%);
	padding: 2px 0px;
}



/***********************************
SIMPLE INFO GRID
***********************************/
table.simpleInfoGrid {}

table.simpleInfoGrid div, table.simpleInfoGrid p, table.simpleInfoGrid a, table.simpleInfoGrid span {
	font-size: 13px;
}

table.simpleInfoGrid td {
	color: hsl(0, 0%, 0%);
	font-size: 13px;
	vertical-align: middle;
}

table.simpleInfoGrid td.label {
	font-weight: bold;
	padding-right: 4px;
	white-space: nowrap;
}

table.simpleInfoGrid td.info {}



/***********************************
INFO ROWS
***********************************/
div.infoObj table.infoRows {
	width: 100%;
}

div.infoObj table.infoRows tr td {
	font-size: 13px;
	padding: 3px 0px;
	line-height: 125%;
}

div.infoObj table.infoRows tr td a {
	font-size: 13px;
	line-height: 125%;
}

div.infoObj table.lined tr td {
	border-top: solid 1px hsla(0, 0%, 0%, 0.15);
	padding: 5px 0px;
}

div.infoObj table.infoRows tr:first-child td {
	border-top: none;
	padding-top: 0px;
}

div.infoObj table.infoRows tr:last-child td {
	padding-bottom: 0px;
}

div.infoObj table.infoRows td.label, div.infoObj table.infoRows td.item, div.infoObj table.infoRows td.subitem {
	width: 1%;
	white-space: nowrap;
}

div.infoObj table.infoRows td.label {
	text-align: right;
	font-weight: bold;
	padding-right: 3px;
}

div.infoObj table.infoRows td.item, div.infoObj table.infoRows td.item a {
	font-weight: bold;
}

div.infoObj table.infoRows td.subitem, div.infoObj table.infoRows td.subitem a {
	font-style: italic;
}

div.infoObj table.infoRows td.default {}

div.infoObj table.infoRows td.spacer {
	padding: 0px 0px 0px 12px;
}



/***********************************
INFO RECT LIST
***********************************/
table.infoRectList {
	margin: 0px auto;
}

table.infoRectList td {
	vertical-align: top; /*middle*/
}

table.infoRectList td.infoRectItem {
	padding: 3px;
}

table.infoRectList tr:first-child td.infoRectItem {
	padding-top: 0px;
}

table.infoRectList tr:last-child td.infoRectItem {
	padding-bottom: 0px;
}

div.infoRectListSpace {
	padding-top: 4px;
	padding-bottom: 6px;
}

div.infoRect, div.infoRectClear {
	background-color: hsl(0, 0%, 92%);
	border-radius: 5px;
	padding: 6px 12px 6px 4px;
}

div.infoRectClear {
	background: none;
	box-shadow: none;
}

table.infoRect {
	width: 100%;
}

table.infoRect div, table.infoRect p, table.infoRect a, table.infoRect span {
	font-size: 13px;
}

table.infoRect td {
	vertical-align: middle;
}

table.infoRect td.label, table.infoRect td.date {
	font-weight: bold;
	width: 100px;
	font-size: 13px;
	line-height: 125%;
	text-align: right;
	white-space: nowrap;
}

table.infoRect td.creditOrg {
	font-size: 13px;
	line-height: 125%;
	font-weight: bold;
	padding-left: 8px;
}

table.infoRect td.label a, table.infoRect td.date a, table.infoRect td.creditOrg a {
	font-weight: bold;
}

table.infoRect td.date {
	width: 84px;
}

table.infoRect td.paragraph, table.infoRect td.line {
	font-size: 13px;
	line-height: 125%;
	padding-left: 6px;
}

table.infoRect.line {
	white-space: nowrap;
}



/***********************************
DATA IMAGE
***********************************/
div.dataImageMultiRow {
	position: relative;
	margin-left: 20px;
	background-color: hsl(0, 0%, 100%);
	border-left: solid 1px hsl(0, 0%, 75%);
	border-right: solid 1px hsl(0, 0%, 75%);
	padding: 5px;
}

div.dataImageMultiRowSelected {
	background-color: hsl(50, 100%, 75%);
}

a.dataImage, a.dataImageLoading, img.dataImageBlank {
	display: inline-block;
	position: relative;
	overflow: hidden;
	border: solid 1px hsl(0, 0%, 75%);
	background-color: hsl(0, 0%, 100%);
	box-sizing: border-box;
}

a.dataImageLoading {
	background-image: url('/lib/images/animations/loading_animation-v1.gif');
	background-position: center center;
	background-repeat: no-repeat;
}

a.dataImageMultiRow, a.dataImageMultiRowLoading {
	display: block;
	background-color: hsl(0, 0%, 100%);
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

div.dataImageMultiRow:last-child, div.dataImageMultiRow:last-child {
	border-bottom: solid 1px hsl(0, 0%, 75%);
}

a.dataImageMultiRowLoading {
	background-image: url('/lib/images/animations/loading_animation-v1.gif');
	background-position: center center;
	background-repeat: no-repeat;
}

img.dataImage {
	display: block;
	width: 100%;
	border: none;
}



/***********************************
BUTTON LIST
***********************************/
p.buttonListLabel {
	color: hsl(0, 0%, 0%);
	font-size: 12px;
	padding-bottom: 4px;
}

p.listButtonGroupHead {
	color: hsl(0, 0%, 0%);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 16px 0px 6px 0px;
}

p.listButtonGroupHead:first-child {
	padding-top: 2px;
}

div.buttonList {
	overflow-x: hidden;
	overflow-y: auto;
}

table.buttonList {}

table.buttonList td {
	border: solid 1px hsl(0, 0%, 75%) !important;
}

div.listButton {
	position: relative;
	height: 26px;
	border: solid 1px hsl(0, 0%, 75%);
	border-bottom: none;
	background-color: hsl(0, 0%, 100%);
	vertical-align: middle;
	overflow: hidden;
	cursor: pointer;
}

div.listButton:hover {
	background-color: hsl(0, 0%, 94%);
}

div.listButtonSimple {
	position: relative;
	color: hsl(0, 0%, 0%);
	font-size: 11px !important;
	font-weight: bold !important;
	line-height: 140% !important;
	border: solid 1px hsl(0, 0%, 75%);
	border-bottom: none;
	background-size: auto 100%;
	background-color: hsl(0, 0%, 100%);
	vertical-align: middle;
	padding: 5px;
	cursor: pointer;
}

div.listButton:after {
	clear: both;
}

div.listButton:last-child, div.listButtonSimple:last-child {
	border-bottom: solid 1px hsl(0, 0%, 75%);
}

div.lbSelected, div.lbSelected:hover {
	background-color: hsl(50, 100%, 75%);
	cursor: default;
}

div.lbSub {
	margin-left: 20px;
	background: none;
	cursor: default;
}

div.lbSub:hover {
	background: none;
}

div.lbSub:first-child {
	border-top: none;
}

div.lbNoClick {
	background: none;
	cursor: default;
	border-left: none;
	border-right: none;
}

div.lbNoClick:hover {
	background: none;
}

div.lbInactive {
	background: none;
	cursor: default;
	border-left: none;
	border-right: none;
}

div.lbInactive:hover {
	background: none;
}

img.lbIcon {
	float: left;
	width: 18px;
	height: 18px;
	border: none;
	margin: 4px 5px 4px 4px;
}

div.listButton p {
	line-height: 26px !important;
	margin-right: 5px;
}

div.listButton p:first-child {
	margin-left: 5px !important
}

div.listButton p, div.listButton span {
	color: hsl(0, 0%, 0%) !important;
	font-size: 11px !important;
	white-space: nowrap !important;
}

div.lbInactive p, div.lbInactive span {
	color: hsla(0, 0%, 0%, 0.75) !important;
}

p.lbLabel {
	float: left;
	font-weight: bold !important;
}

p.lbLabelXtra {
	float: left;
}

p.lbLabelXtraMultiRow {
	display: inline-block;
	width: 45px;
}

p.lbValue {
	float: right;
	font-weight: bold !important;
}

p.lbValueMultiRow {
	display: inline-block;
	width: 35px;
	font-weight: bold !important;
	text-align: right;
}

p.lbUnits {
	float: right;
	width: 60px;
}

p.lbUnitsMultiRow {
	display: inline-block;
	width: 40px;
}

p.lbMode {
	float: right;
	width: 90px;
}

p.lbLinkItem {
	position: relative;
	float: right;
	width: 20px;
	height: 26px;
	text-align: center;
}

.lbLink, .lbLinkDisabled {
	position: relative;
 	display: block;
 	top: 3px;
 	width: 20px;
 	height: 20px;
 	background-color: hsla(0, 0%, 0%, 0.20);
 	border-radius: 4px;
	cursor: pointer;
 	pointer-events: auto;
}

.lbLink:hover {
	text-decoration: none;
	background-color: hsla(0, 0%, 0%, 0.35);
}

img.lbLinkIcon {
	position: relative;
	display: block;
	left: 2px;
	top: 2px;
	width: 16px;
	height: 16px;
}

div.lbBottomBorder {
	border-bottom: solid 1px hsl(0, 0%, 75%);
}

div.lbNoBottomBorder {
	border-bottom: none !important;
}



/***********************************
INFO CONTENT
***********************************/
div.infoPanel div.infoContent {
	padding: 0px 10px;
	font-size: 0px;
}

div.infoPanel .infoSectionHead {
	font-size: 16px;
	font-weight: bold;
	line-height: 140%;
	color: hsl(0, 0%, 0%);
	margin-top: 15px;
	user-select: text !important;
}

div.infoPanel .infoFieldLabel {
	font-size: 13px;
	font-weight: bold;
	line-height: 140%;
	color: hsl(0, 0%, 0%);
	margin-top: 5px;
	user-select: text !important;
}

div.infoPanel .infoFieldValue {
	font-size: 13px;
	line-height: 140%;
	color: hsl(0, 0%, 0%);
	word-wrap: break-word;
	user-select: text !important;
}

div.infoPanel .infoFieldValue li {
	font-size: 13px !important;
	color: hsl(0, 0%, 0%) !important;
	user-select: text !important;
}

div.infoPanel div.infoLinkButtonWrapper {
	margin-top: 6px;
	text-align: center;
}

div.infoPanel div.infoLinkButtonWrapper:first-child {
	margin-top: 0px;
}

div.infoPanel a.infoLinkButton {
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 140%;
	color: hsl(195, 100%, 35%);
	padding: 4px 8px;
	border: solid 1px hsl(195, 100%, 35%);
	border-radius: 3px;
	margin: 4px;
}

div.infoPanel a.infoLinkButton:hover {
	text-decoration: none;
	background-color: hsla(200, 100%, 25%, 0.10);
}



/***********************************
LINK BUTTON
***********************************/
.iwLinkButton {
	display: inline-block;
	color: hsl(0, 0%, 100%) !important;
	background-color: hsl(200, 100%, 35%);
	font-size: 14px !important;
	border-radius: 5px;
	padding: 15px 15px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.iwLinkButton:hover, .iwLinkButton:active {
	text-decoration: none !important;
	background-color: hsl(200, 100%, 45%);
}



/***********************************
ASSET LINK
***********************************/
table.assetLinkButtonGrid {
	width: 100%;
}

table.assetLinkButtonGrid td.item {
	padding-top: 7px;
	padding-left: 7px;
}

table.assetLinkButtonGrid tr:first-child td.item {
	padding-top: 0px;
}

table.assetLinkButtonGrid td.item:first-child {
	padding-left: 0px;
}

div.assetLinkButton {
	box-sizing: border-box;
	color: hsl(0, 0%, 0%) !important;
	background-color: hsl(0, 0%, 100%);
	border-radius: 6px;
	border: solid 1px hsl(0, 0%, 75%);
	padding: 5px 8px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.mouseInput div.assetLinkButton:hover {
	background-color: hsl(0, 0%, 95%);
	text-decoration: none;
}

.mouseInput div.assetLinkButton:active {
	background-color: hsl(0, 0%, 95%);
	background-image: none;
	text-decoration: none;
}

table.assetLinkButton {
	pointer-events: none;
}

table.assetLinkButton td {
	vertical-align: middle;
}

table.assetLinkButton td.assetLinkButtonIcon {
	padding-right: 4px;
}

table.assetLinkButton td.assetLinkButtonLabel {
	position: relative;
	top: 1px;
	width: 140px;
	max-width: 138px;
	font-size: 12px;
	overflow: hidden;
}



/***********************************
ALERT
***********************************/
div.infoObj div.alert {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 100%, 40%);
	border-radius: 6px;
	padding: 0px;
	overflow: hidden;
}

div.infoObj div.alert p.alertHead {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 100%, 30%);
	letter-spacing: 1px !important;
	font-weight: bold;
	text-align: center;
	padding: 8px;
}

div.infoObj div.alert p.alertMsg {
	color: hsl(0, 0%, 100%);
	letter-spacing: 1px !important;
	line-height: 140%;
	padding: 8px;
}
.fadeOut {
	opacity: 0 !important;
	transition: opacity 0.50s linear;
}

.fadeOutQuick {
	opacity: 0 !important;
	transition: opacity 0.25s linear;
}

.fadeIn {
	opacity: 1 !important;
	transition: opacity 0.50s linear;
}

.fadeInQuick {
	opacity: 1 !important;
	transition: opacity 0.25s linear;
}

.opacity0 {
	opacity: 0 !important;
}

.vSpaceXXS {
	margin-top: 2px !important;
}

td.vSpaceXXS {
	padding-top: 2px !important;
}

.vSpaceXS {
	margin-top: 4px !important;
}

td.vSpaceXS {
	padding-top: 4px !important;
}

.vSpaceS {
	margin-top: 8px !important;
}

td.vSpaceS {
	padding-top: 8px !important;
}

.vSpaceBS {
	margin-bottom: 8px !important;
}

td.vSpaceBS {
	padding-bottom: 8px !important;
}

.vSpaceSM {
	margin-top: 12px !important;
}

td.vSpaceSM {
	padding-top: 12px !important;
}

.vSpaceM {
	margin-top: 16px !important;
}

td.vSpaceM {
	padding-top: 16px !important;
}

.vSpaceL {
	margin-top: 32px !important;
}

td.vSpaceL {
	padding-top: 32px !important;
}

.vSpaceXL {
	margin-top: 64px !important;
}

td.vSpaceXL {
	padding-top: 64px !important;
}

.vSpaceXXL {
	margin-top: 96px !important;
}

td.vSpaceXXL {
	padding-top: 96px !important;
}

.hSpaceXS {
	padding: 0px 2px !important;
}

.hSpaceS {
	padding: 0px 4px !important;
}

.hSpaceSM {
	padding: 0px 6px !important;
}

.hSpaceM {
	padding: 0px 8px !important;
}

.hSpaceL {
	padding: 0px 16px !important;
}

.textCenter, .centerContents {
	text-align: center !important;
}

.textLeft, .contentsLeft {
	text-align: left !important;
}

.textRight, .contentsRight {
	text-align: right !important;
}

.textVertCenter, .vertCenterContents {
	vertical-align: middle !important;
}

table.vertCenterContents td {
	vertical-align: middle !important;
}

.vertAlignTop {
	vertical-align: top !important;
}

.vertAlignBottom {
	vertical-align: bottom !important;
}

table.basicPadding td {
	padding: 6px !important;
}

.hLeft {
	margin-right: auto !important;
}

.hRight {
	margin-left: auto !important;
}

.hCenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.vCenter {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.bold {
	font-weight: bold !important;
}

.unBold, .notBold, .fontWeightNormal {
	font-weight: normal !important;
}

.noWrap, .nowrap {
	white-space: nowrap !important;
}

.textWrap {
	white-space: normal !important;
}

.noPad {
	padding: 0px !important;
}

.pad4 {
	padding: 4px !important;
}

.pad8 {
	padding: 8px !important;
}

.pad12 {
	padding: 12px !important;
}

.pad16 {
	padding: 16px !important;
}

.standardBorder {
	border: solid 1px hsl(205, 50%, 40%) !important;
}

.noBorder {
	border: none !important;
}

.noTopBorder {
	border-top: none !important;
}

.noMargins {
	margin: 0px !important;
}

.noMarginTop {
	margin-top: 0px !important;
}

.noMarginBottom {
	margin-bottom: 0px !important;
}

.noMarginRight {
	margin-right: 0px !important;
}

.noMarginLeft {
	margin-left: 0px !important;
}

.noPadTop {
	padding-top: 0px !important;
}

.borderBox {
	box-sizing: border-box !important;
}

div.stackedM {
	margin-top: 12px !important;
}

div.stackedM:first-child {
	margin-top: 0px !important;
}

.noPointerEvents, .pointerEventsNone {
 pointer-events: none !important;
}

.autoPointerEvents, .pointerEventsAuto {
	pointer-events: auto !important;
}

.allPointerEvents, .pointerEventsAll {
 pointer-events: all !important;
}

.bold {
	font-weight: bold !important;
}

.italic {
	font-style: italic !important;
}

.indentS {
	margin-left: 8px !important;
}

.indent {
	margin-left: 16px !important;
}

.indentM {
	margin-left: 32px !important;
}

.indentL {
	margin-left: 64px !important;
}

.lineHeight100 {
	line-height: 100% !important;
}

.lineHeight125 {
	line-height: 125% !important;
}

.lineHeight150 {
	line-height: 150% !important;
}

.lineHeight200 {
	line-height: 200% !important;
}

.fullWidth {
	width: 100% !important;
}

.maxWidth {
	width: 99% !important;
}

.minWidth {
	width: 1% !important;
}

.minWidth500 {
	min-width: 500px !important;
}

.maxWidth200 {
	max-width: 200px !important;
}

.maxWidth300 {
	max-width: 300px !important;
}

.maxWidth400 {
	max-width: 400px !important;
}

.maxWidth500 {
	max-width: 500px !important;
}

.opaque {
	opacity: 1.0 !important;
}

.muted {
	opacity: 0.75 !important;
}

.faded {
	opacity: 0.65 !important;
}

.dim {
	opacity: 0.5 !important;
}

.translucent {
	opacity: 0.25 !important;
}

.tableDisplay, .displayTable {
	display: table !important;
}

.blockDisplay, .displayBlock {
	display: block !important;
}

.inlineBlockDisplay, .displayInlineBlock {
	display: inline-block !important;
}

.visibilityVisible {
	visibility: visible !important;
}

.visibilityHidden {
	visibility: hidden !important;
}

.positionRelative {
	position: relative !important;
}

.positionAbsolute {
	position: absolute !important;
	z-index: 1;
}

.positionAbsoluteFullSize {
	position: absolute !important;
	z-index: 1;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.hideOverflow, .overflowHide, .overflowHidden {
	overflow: hidden !important;
}

.scrollOverflow, .overflowScroll {
	overflow: scroll !important;
}

.autoOverflow, .overflowAuto {
	overflow: auto !important;
}

.overFlowAutoY {
	overflow-y: auto !important;
}

.overFlowAutoX {
	overflow-x: auto !important;
}

.borderRadiusS {
	border-radius: 6px !important;
}

.borderRadiusM {
	border-radius: 12px !important;
}

.borderRadiusL {
	border-radius: 24px !important;
}

.letterSpacing1 {
	letter-spacing: 1px;
}

.shadowDefault {
	box-shadow: 0px 2px 3px 2px hsla(0, 0%, 0%, 0.35) !important;
}

.shadowLarge {
	box-shadow: 0px 3px 6px 2px hsla(0, 0%, 0%, 0.35) !important;
}

.textShadow {
	text-shadow: hsl(0, 0%, 0%) 0px 1px 2px !important;
}

.hiliteShadow:hover {
	box-shadow: 0px 0px 6px 3px hsl(195, 100%, 65%) !important;
}

.fontLight {
	font-family: StandardFontLight, sans-serif !important;
}

.fontRegular {
	font-family: StandardFontRegular, sans-serif !important;
}

.fontBold {
	font-family: StandardFontBold, sans-serif !important;
}

.underline:active {
	text-decoration: underline !important;
}

.noUnderline, .noUnderline:hover, .noUnderline:active {
	text-decoration: none !important;
}

.capitalizeWords {
	text-transform: capitalize !important;
}

.redBorder {
	border: solid 1px red !important;
}

.tableCellBorder td {
	border: solid 1px red !important;
}

.brighterOnHover:hover {
	filter: brightness(135%);
}

.fillExtentsYScroll {
	position: absolute;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow-x: hidden;
	overflow-y: auto;
}

.fillExtentsNoScroll {
	position: absolute;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.fontSize0, .fontSize0px {
	font-size: 0px !important;
}

.selectable {
	-webkit-touch-callout: all !important;
	-webkit-user-select: all !important;
	-khtml-user-select: all !important;
	-moz-user-select: all !important;
	-ms-user-select: all !important;
	user-select: all !important;
}

.textSelectable {
	-webkit-touch-callout: text !important;
	-webkit-user-select: text !important;
	-khtml-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
}

.notSelectable {
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

p.text, td.line, td.date, td.paragraph {
	-webkit-touch-callout: text !important;
	-webkit-user-select: text !important;
	-khtml-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
}

.cursorPointer {
	cursor: pointer !important;
}

.clickable, .mouseInput .clickable:hover {
	cursor: pointer !important;
	pointer-events: auto;
}

.disabled {
	opacity: 0.25 !important;
	filter: alpha(opacity=25) !important;
	cursor: default !important;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
	pointer-events: none;
}



/*** SAFARI MODIFIERS ***/
.Safari body, .Safari p, .Safari span, .Safari div, .Safari table, .Safari tr, .Safari td, .Safari a, .Safari ul, .Safari li, .Safari textarea, .Safari input {
	/* the following helps safari, but hurts chrome */
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-stroke: 0.40px !important;
}

.Safari div.infoObj p, .Safari div.infoObj span, .Safari div.infoObj div, .Safari div.infoObj td, .Safari div.infoObj a, .Safari div.infoObj li, .Safari div.infoObj textarea, .Safari div.infoObj input {
	/* the following helps safari, but hurts chrome */
	-webkit-font-smoothing: initial !important;
	-webkit-text-stroke: initial !important;
}



/*** IE MODIFIERS ***/
/* page submenu fades in, so the background image needs to be replaced with a background color.  the menu items are changed for consistency */
.IE .mouseInput a.pageMenuItem:hover {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}

.IE a.pageMenuItemActive {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}

.IE .mouseInput a.pageMenuItemActive:hover {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}

.IE div.pageMenuRowDivider {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}

.IE .mouseInput a.pageSubmenuItem:hover {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}

.IE a.pageSubmenuItemActive {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}

.IE .mouseInput a.pageSubmenuItemActive:hover {
	background: none !important;
	background-color: hsl(205, 55%, 20%) !important;
}