/* NavDat rebuild (2026), dressed in the 2006-2019 NAVDAT look (NewHeader.cfm, navdat.css, buttons.css) */
:root {
	--page: #cccccc;
	--frame: #333333;
	--banner: #fefef5;
	--menu: #666633;
	--link: #74914f;
	--box-line: #666666;
	--box-head: #b3ccd8;
	--grid: #000000;
	--muted: #666666;
	--red: #cc0000;
	--font: verdana, helvetica, arial, sans-serif;
	--mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 8px; background: var(--page); color: #000; font: 12px/15px var(--font); }
table, td, th, input, select, textarea, button { font-family: var(--font); font-size: 12px; }
a:link, a:visited { color: var(--link); text-decoration: none; font-weight: bold; }
a:hover { color: var(--link); text-decoration: underline; }
img { border: 0; }

/* frame: 800 px like the old site; result, map and plot pages get more room */
.frame { width: 804px; max-width: 100%; margin: 0 auto; background: var(--frame); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.frame.wide { width: 1204px; }
.banner { background: var(--banner); line-height: 0; overflow: hidden; }
.banner img { max-width: 100%; height: auto; }
.menubar { background: var(--menu); color: #fff; text-align: center; font-weight: bold; padding: 2px 4px; }
.menubar a:link, .menubar a:visited { color: #fff; }
.menubar a:hover { color: #fff; text-decoration: underline; }
.menubar a[aria-current="page"] { text-decoration: underline; }
.content { background: #fff; padding: 10px 14px 24px; min-height: 400px; }

h1 { font-size: 18px; line-height: 22px; text-align: center; margin: 6px 0 14px; }
h2 { font-size: 14px; line-height: 18px; margin: 18px 0 8px; }
h3 { font-size: 12px; margin: 14px 0 6px; }
p { margin: 10px 0; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.red { color: var(--red); font-size: 10px; }
.center { text-align: center; }

/* boxes: the old #666666 bordered tables with a #B3CCD8 title cell */
.panel { border: 1px solid var(--box-line); background: #fff; padding: 8px 10px; margin: 0 0 14px; }
.panel > h2:first-child, .panel > summary { background: var(--box-head); margin: -8px -10px 8px; padding: 3px 6px; font-size: 12px; line-height: 15px; border-bottom: 1px solid var(--box-line); }
.panel > summary { cursor: pointer; }
details.panel:not([open]) > summary { margin-bottom: -8px; border-bottom: 0; }
.notice { border: 1px solid #cccccc; background: #fff; padding: 10px; text-align: center; margin: 0 0 14px; }
table.box { border-collapse: separate; border-spacing: 1px; background: var(--box-line); }
table.box th, table.box td { background: #fff; padding: 3px; text-align: left; vertical-align: top; font-weight: normal; }
table.box th.head, table.box td.head { background: var(--box-head); font-weight: bold; }

.stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--box-line); border: 1px solid var(--box-line); width: max-content; max-width: 100%; margin: 10px 0; }
.stat { background: #fff; padding: 3px 8px; }
.stat b { color: #000; }

/* buttons: buttons.css "threeDgray" (used on the old Output page) and the plain light button */
.btn, button { display: inline-block; font: bold 12px/15px Arial, Verdana, sans-serif; padding: 2px 7px; background: #999999; color: #000; border: 4px solid; border-color: #bfbfbf #6a6a6a #4f4f4f #adadad; cursor: pointer; text-decoration: none; }
a.btn:link, a.btn:visited { color: #000; }
.btn:hover, button:hover { color: #fff; text-decoration: none; }
a.btn:hover { color: #fff; text-decoration: none; }
.btn.secondary, button.secondary { background: #f5f5f5; color: #565656; border: 1px solid #dedede; border-top-color: #eee; border-left-color: #eee; padding: 5px 7px; }
a.btn.secondary:link, a.btn.secondary:visited { color: #565656; }
.btn.secondary:hover, button.secondary:hover { background: #dff4ff; border-color: #c2e1ef; color: #336699; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.imgbtn { display: inline-block; line-height: 0; vertical-align: middle; }
input.imgbtn { padding: 0; border: 0; }
button.imgbtn, button.imgbtn:hover { background: none; border: 0; padding: 0; }

/* forms */
form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 18px; }
fieldset { border: 1px solid #999; padding: 8px 12px 12px; margin: 0 0 12px; min-width: 0; }
legend { font-weight: bold; padding: 0 4px; }
label { display: block; margin-bottom: 2px; }
input[type=text], input[type=number], input[type=search], select { width: 100%; padding: 2px 3px; border: 1px solid #999; background: #fff; color: #000; }
select[multiple] { min-height: 10em; }
.check { display: flex; gap: 4px; align-items: center; }
.row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.row > * { flex: 1 1 120px; }
.hint { font-size: 10px; line-height: 13px; color: var(--muted); margin: 3px 0 0; }

/* the search summary table (Search.cfm): SET / CLEAR, criterion, current value */
table.criteria { border-collapse: collapse; margin: 0 0 8px; width: 100%; }
table.criteria td { border: 1px solid #808080; padding: 5px; vertical-align: middle; background: #fff; }
table.criteria td.btns { white-space: nowrap; width: 1%; }
table.criteria td.btns a { display: inline-block; line-height: 0; vertical-align: middle; }
table.criteria td.name { white-space: nowrap; width: 1%; }
.searchfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.setform { max-width: 760px; margin: 0 auto; }

/* data tables: thin black grid, white cells, title-blue header */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 11px; }
table.data th, table.data td { padding: 2px 5px; border: 1px solid var(--grid); text-align: left; vertical-align: top; white-space: nowrap; }
table.data th { background: var(--box-head); position: sticky; top: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.kv th { width: 30%; white-space: normal; }
table.kv td { white-space: normal; }
.pager { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
code, .mono { font-family: var(--mono); font-size: 11px; }

/* plot type tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 10px; border-bottom: 1px solid var(--box-line); }
.tabs a { padding: 3px 9px; border: 1px solid var(--box-line); border-bottom: 0; margin-right: 2px; background: #eee; }
.tabs a[aria-current="page"] { background: var(--box-head); color: #000; }

#map { height: 560px; border: 1px solid #000; }
#searchmap { height: 320px; border: 1px solid #000; }
.plot-box { border: 1px solid var(--box-line); padding: 6px; background: #fff; }
.plot-box canvas, .plot-box svg { width: 100%; height: auto; display: block; }
.map-legend { background: #fff; color: #000; padding: 5px 8px; font-size: 11px; line-height: 16px; border: 1px solid #666; }
.map-legend span { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 1px solid #222; }

/* home page */
.home { display: flex; gap: 16px; align-items: flex-start; }
.home .intro { flex: 1 1 auto; }
.home .side { flex: 0 0 260px; }
.news td.date { white-space: nowrap; text-align: right; }
.feature { text-align: center; margin: 18px 0 0; font-size: 11px; }
.feature img { max-width: 100%; height: auto; }

@media (max-width: 700px) {
	body { margin: 0; }
	.home { flex-direction: column; }
	.home .side { flex-basis: auto; width: 100%; }
	#map { height: 420px; }
	table.criteria td.name { white-space: normal; }
}