@import url('https://fonts.googleapis.com/css?family=Exo:800,900|Open+Sans:400,400i,700,700i|Overpass+Mono:400,700') all;

/* RESETS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
html { font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
p, table, td, ul, ol { color: #000000; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote, q { quotes: "" ""; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a img { border: 0; }
table { border-collapse: separate; border-spacing: 0; margin: 0 0 1.5em; width: 100%; font-size: 90%; }
thead { display: table-header-group; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
button, input, select, textarea { margin: 0; }
button { width: auto; overflow: visible; } /* Make buttons play nice in IE */
.ie6 html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } /* Prevent BG image flicker upon hover */

/* TEXT ELEMENTS */
p { margin: 0 0 0.5em; }
ul, ol { margin: 0 0 1em 2em; padding: 0; }
ul { list-style: disc; }
ul ul { list-style: circle; margin-bottom: 0; }
ol { list-style: decimal; }
ol ol { list-style: lower-alpha; margin-bottom: 0; }
ul ol, ol ul { margin-bottom: 0; }
li { padding-bottom: 4px; padding-left: 0; }
dt { margin: 1em 0 0.5em; }
dd { margin: 0 1.5em 1.5em; }
b, strong, th, thead, dt { font-weight: bold; }
em { font-style: italic; }
body {
  background-color: #edeac6;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #222;
}
pre, code { font-family: 'Overpass Mono', monospace; }
a { color: #00e; text-decoration: none; }
a:visited { color: purple; }
a:hover { color: #f33; text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: 'Exo', sans-serif; font-weight: 800; margin: 0.75em 0 0.5em 0; line-height: 130%; letter-spacing: -0.2px; }
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2rem; }
h4 { font-size: 16px; font-size: 1.6rem; }
h5 { font-size: 16px; font-size: 1.6rem; }
h6 { font-size: 14px; font-size: 1.4rem; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0.2em; }
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }
blockquote { background-color: #f6f6f6; margin: 1em 0; padding: 1em; }

/* LAYOUT */
#wrapper {
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 1em;
  -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 1em;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 1em;
  width: 1040px;
  margin: 0 auto;
  background-color: #f5f7fa;
}
#header {
  margin: 0; padding: 20px 20px 2px; background-color: #fff;
  background-image: url(/images/grain.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #163a68), color-stop(100%, #1d4e8e));
  background-image: url(/images/grain.png), -webkit-linear-gradient(#163a68, #1d4e8e);
  background-image: url(/images/grain.png), -moz-linear-gradient(#163a68, #1d4e8e);
  background-image: url(/images/grain.png), -o-linear-gradient(#163a68, #1d4e8e);
  background-image: url(/images/grain.png), linear-gradient(#163a68, #1d4e8e);
	border-bottom: 6px solid #223;
}
#header h1 { color: #fff !important; font-size: 175%; font-weight: 400; margin-top: 0; }
#header a { color: #fff !important; text-decoration: none; }
#header #searchbox { float: right; }
#appHeaderLogo { float: right; }
#body { margin: 0; padding: 25px 15px; background-color: #fff; }
#footer  {
  margin: 0;
  padding: 15px 20px 5px;
  background-color: #18191d;
}
.footerLogo { float: right; padding: 5px 0 5px 5px; }
#footer p { color: #999; font-size: 10pt; line-height: 110%; }
#footer a { color: #999; text-decoration: underline; }
#metaFooter { margin: 0 auto; padding: 10px;  background-color: #ddf; font-size: 80%; }
#metaFooter p { margin: 0 0 0 0.3em; }

/* NAVIGATION (new for 2020) */
#main-menu { clear: both; }
#main-menu ul { list-style: none; margin: 0; padding-left: 0; }
#main-menu li { display: inline-block; position: relative; margin-right: 0.75em; font-size: 14px; font-size: 1.4rem; padding: 0; }
#main-menu .sub-menu li { background: rgba(0, 0, 0, 0.9); }
#main-menu .sub-menu .sub-menu li { background: rgba(0, 0, 0, 0.8); }
#main-menu > ul > li { margin-right: 25px; margin-right: 2.5rem; }
#main-menu li li { margin-right: 0; }
#main-menu a { display: block; text-decoration: none; color: #000; padding: 0.5em 0; position: relative; cursor: pointer; }
#main-menu ul ul { display: none; float: left; position: absolute; left: 0; z-index: 99999; text-align: left; margin-top: -1px; padding-top: 1px; font-weight: normal; }
#main-menu ul ul ul { left: 100%; top: 0; padding-top: 0; }
#main-menu ul ul a { width: 250px; padding: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#main-menu ul ul li { margin-right: 0; }
#main-menu ul li:hover > ul { display: block; }
#main-menu > ul > a { padding-left: 1em; }
#main-menu > ul > a:before { content: ""; display: inline-block; margin-right: 0.4em; position: absolute; top: 50%; left: 0; width: 0; height: 0; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #fff; opacity: 0.9; }
#main-menu ul { font-weight: bold; }
#main-menu .sub-menu > a { padding-right: 1.5em; }
#main-menu .sub-menu > a:after { content: ""; display: inline-block; margin-left: 0.5em; position: absolute; top: 50%; right: 0; margin-top: -4px; margin-right: 0.6em; width: 0; height: 0; border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent; border-left: 0.5em solid #fff; opacity: 0.9; }
#main-menu .sub-menu li, #main-menu .sub-menu .sub-menu li { background: #193b69; }
#main-menu .sub-menu li:hover { background: #0f2440; }
#main-menu .menu-subhead > a { font-weight: bold; background: #223; }
.assistive-text { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }

/* "MORE INFO" BOXES (new for 2020) */
.infoBox {
	border: 1px solid #e5e5e5;
	background-color: #f2f2f2;
	padding: 0px;
	margin: 20px 0 0 0;
	-webkit-box-shadow: -2px -1px 3px #999 inset;
	-moz-box-shadow: -2px -1px 3px #999 inset;
	box-shadow: -2px -1px 3px #999 inset;
	font-size: 90%;
}
.infoBox-title { font-size: 2.0rem; margin-top: 0px !important; padding: 5px; color: #fff; background-color: #666; }
.infoBox-content { padding: 5px; }

/* POSITIONING */
.leftBox { float: left; margin: 0 10px 15px 0; }
.rightBox { float: right; margin: 0 0 15px 10px; }
.clearFix:before, .clearFix:after { content: " "; display: table; }
.clearFix:after { clear: both !important; }
.floatRight { float: right; }
.floatLeft { float: left; }
.inner { padding: 0 20px; padding: 0 2rem; margin: 0 auto; width: 100%; max-width: 1040px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clear { zoom: 1; }
.clear:before, .clear:after { clear: both; content: "\0020"; display: block; height: 0; overflow: hidden; }

/* COLUMNS */
.col2 { -moz-column-count: 2; -moz-column-width: 45%; -webkit-column-count: 2; -webkit-column-width: 45%; column-count: 2; column-width: 45%; }
.col3 { -moz-column-count: 3; -moz-column-width: 30%; -webkit-column-count: 3; -webkit-column-width: 30%; column-count: 3; column-width: 30%; }
.col5 { -moz-column-count: 5; -moz-column-width: 18%; -webkit-column-count: 5; -webkit-column-width: 18%; column-count: 5; column-width: 18%; }

/* SIZING */
.width30pct { width: 30%; max-width: 30%; }
.width35pct { width: 35%; max-width: 35%; }
.width40pct { width: 40%; max-width: 40%; }
.width45pct { width: 45%; max-width: 45%; }
.width50pct { width: 50%; max-width: 50%; }
.width55pct { width: 55%; max-width: 55%; }
.width60pct { width: 60%; max-width: 60%; }
.width65pct { width: 65%; max-width: 65%; }
.width75pct { width: 75%; }
/* .width100pct, .fullWidth { width: 100%; } */
.width40 { width: 40px; } /* use for <input type="number">, which can't use width= attribute */
.width80 { width: 80px; }
.width120 { width: 120px; }
.maxWidth800 { max-width: 800px; }
.maxWidth1000 { max-width: 1000px; }

/* TABLES */
table, td, th { border: 1px solid #666; border-collapse: collapse; }
td, th { padding: 3px; }
tr.headRow td, tr.headRow th { background-color: #ccc; }
tr.subheadRow td, tr.subheadRow th { background-color: #eee; }
th.noWrap, td.noWrap { white-space: nowrap; }
td.r, th.r { text-align: right; }

/* FORMS */
.inputForm { font-size: 90%; }
.inputForm fieldset { display: block; background-color: #f6f6f6; margin: 5px 0 15px; padding: 0 0.5em 0.5em; border: 1px solid #ccc; }
.inputForm legend { font-weight: bold; background-color: #B8C8EF; padding: 2px 8px; text-transform: uppercase; }
.inputForm label { display: block; font-weight: bold; margin: 15px 0 2px; }
.inputForm .submit { display: block; margin: 10px 0 20px; }
.inputForm .inputGroup > * { padding-left: 10px; margin: 0; }
.inputForm legend.level2 { font-weight: bold; background-color: inherit; padding: 8px; text-transform: none; }
.leftBox select, .rightBox select { width: 100%; }

/* APP CONTROLS */
.controlForm {
	border: 1px solid #e5e5e5;
	float: right; clear: right;
	padding: 0px;
	margin: 15px 0;
	background-color: #f2f2f2;
	-webkit-box-shadow: -2px -1px 3px #999 inset;
	-moz-box-shadow: -2px -1px 3px #999 inset;
	box-shadow: -2px -1px 3px #999 inset;
}
.controlForm h3 { margin: 0; padding: 5px; color: #fff; background-color: #666; }
.controlForm p { margin: 5px; }
.controlForm img { vertical-align: bottom; }
.iconButton { vertical-align: middle; padding: 0 4px; }
.tooltipButton { vertical-align: top; padding: 0 4px; }
.navLink { font-size: 85%; margin: 0; }
.navLink a.upArrow {
	background-image: url('/images/up.png');
	padding-left: 1.5em; background-position: left; background-repeat: no-repeat;
}

/* TEXT FORMATTING */
.small { font-weight: normal; font-style: italic; font-size: 90%; }
.strong { font-weight: bold; }
.caution { font-style: italic; color: #a00; }
.danger { font-weight: bold; color: #c00; }
.varname, .SASname { font-family: 'Overpass Mono', monospace; font-weight: 700; }
.varname:before { content: '['; }
.varname:after { content: ']'; }
.noBullets { list-style-type: none; margin: 0; }
.smallNote { font-weight: normal; font-style: italic; font-size: 80%; color: #444; }

/* IMAGES */
img.screenShot {
  border: 1px solid #666;
  margin: 5px 0;
  -webkit-box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
}

/* PRINT */
@media print {
	* { font-family: "Open Sans", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif !important; color: #000 !important; }
	html { background: #fff; }
	body { border: none; width: 100% !important; margin: 0; padding: 0; font-size: 10pt !important; }
	.noPrint { display: none; visibility: hidden; }
	footer, #footerContainer { font-size: 8pt !important; }
	a { text-decoration: none; }
	.moeHigh { color: #888 !important; }
}

/* MOBILE */
@media screen and (max-device-width: 768px) {
	body { width: 100% !important; max-width: 100% !important; margin: 0; }
}