:root {
	--text-color: #223322;
	--bg-color: #e8eae8;
	--link-color: #000099;
	--link-hover: #cb1000;
	--header-bg: #008000;
	--header-text: #fff;
	--border-color: #666;
}

body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 16px;
	color: var(--text-color);
	background: var(--bg-color);
	margin: 0;
	min-height: 100vh;
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"header header"
		"image menu"
		"main main"
		"footer footer";
}

a { color: var(--link-color); text-decoration: underline; }
a:hover { color: var(--link-hover); }

/* Layout Areas */
header#topbanner {
	grid-area: header;
	background: var(--header-bg);
	position: relative;
	min-height: 100px;
}

header#topbanner .headfootbar {
    position: absolute; top: 0; width: 100%; height: 15px; background: #636563;
}

header#topbanner img {
    float: left; /* Keep float for now as it's simple for this specific header layout */
    margin-top: 15px; /* Clear bar */
}

header#topbanner h1 {
	font-family: georgia, verdana, arial, helvetica, sans-serif;
	font-size: 2.0em;
	font-variant: small-caps;
	font-weight: bold;
	text-align: right;
	margin: 0.5em;
    padding-top: 20px;
}

#rallyimage {
	grid-area: image;
	margin: 10px 15px;
	position: relative;
}

#mainmenu {
	grid-area: menu;
	margin: 10px 0;
	padding-left: 15px;
	font-variant: small-caps;
	background: var(--bg-color);
}
#mainmenu ul { padding-left: 0; margin: 0; }
#mainmenu li { list-style: none; line-height: 140%; }
#mainmenu a { font-weight: bold; }

main, #pagetext {
	grid-area: main;
	margin: 20px 15% 0 3%;
    position: relative;
}

footer#footer {
	grid-area: footer;
	padding-top: 2em;
	font-size: 0.8em;
}
footer#footer p { margin-left: 2em; }

/* Responsive */
@media (max-width: 640px) {
	body {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"menu"
			"main"
			"footer";
	}
	#rallyimage { display: none; }
	header#topbanner img { display: none; }
	header#topbanner h1 { text-align: left; }
    header#topbanner { min-height: auto; }
    main, #pagetext { margin-right: 3%; }
}

/* Helpers from Legacy CSS */
pre { color: blue; }
li { margin-bottom: 0.5em; }
img { border: none; }

.borderimage, .rightimage, .leftimage, .centerimage {
	border: 1px solid var(--border-color);
	padding: 4px;
	display: inline-block;
}
.rightimage { float: right; margin: 0 0 2px 7px; }
.leftimage { float: left; margin: 0 7px 2px 0; }
.centerimage { display: block; margin: 0 auto; }

.moddate { float: right; padding: 2px; font-style: italic; color: #ff0000; }
.nobot { margin-bottom: 0; }
.nobot + *, .notop { margin-top: 0; }

#rilabel {
	position: absolute; bottom: 0.5em; right: 0.5em; font-size: 15px;
}
#rilabel.white { color: #FFFFFF !important; }
#rilabel.black { color: #000000 !important; }
#rilabel a { text-decoration: none; font-weight: bold; color: inherit; }

#about, #meeting, #announce {
    /* No longer need clear: both with grid, handled by 'main' area */
	line-height: 180%;
}
#about { font-weight: bold; font-style: italic; }

.under { text-decoration: underline; }
.italic	{ font-style: italic; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }

.w10 { width: 10%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

.indent { margin-left: 5%; margin-right: 5%; }
.green { color: black; background: #CCFFCC; }
.outline { border: 1px solid black; padding: 2px; }
ul.rasc { list-style-image: url("/images/r_bullet.gif"); font-size: 120%; }

/* Tables */
table.current-board, table.roster {
	border: 2px solid black; width: 80%; text-align: left; vertical-align: middle; color: black;
}
table.past-board { border: 1px solid black; width: 75%; text-align: left; color: black; }
table.current-board thead, table.past-board thead { background: #999999; color: black; font-weight: bold; }
table.current-board td, table.past-board td, table.roster td { border: 1px solid black; }
table.roster td { width: 50%; }

table.ham {
	border: 1px solid black; width: 50%; text-align: left; vertical-align: middle; color: black;
}
table.ham tr:nth-child(odd) { background: #CCFFCC; }

/* Colors */
.first { background: #C0C0FF; }
.second { background: #FF8080; }
.third { background: #33FF99; }

/* Detailed Scoring */
table.detailed {
	border: 1px solid black; text-align: center; vertical-align: middle; color: black; empty-cells: show;
}
table.detailed td, table.detailed th { border: 1px solid black; }
table.detailed tr.shade { background: #AEAEAE; }
table.detailed td.total, table.detailed th.total { background: #33CCFF; min-width: 4em; font-weight: bold; }
table.detailed td.sectot, table.detailed th.sectot { background: #33FFFF; min-width: 4em; font-weight: bold; }
table.detailed th.sectot, table.detailed th.total { background: #4D4D4D; }
table.detailed th { text-align: left; background: #4D4D4D; color: white; }

/* Misc table column widths */
table.detailed th.ta, table.detailed td.ta, table.detailed th.cp, table.detailed td.cp { min-width: 4em; }
table.detailed th.car, table.detailed td.car { min-width: 5em; }
table.detailed th.comp, table.detailed td.comp { min-width: 15em; }
table.detailed th.class, table.detailed td.class, table.detailed th.ord-oa, table.detailed td.ord-oa, table.detailed th.ord-cl, table.detailed td.ord-cl { min-width: 2em; }

table.score-sum { text-align: right; vertical-align: middle; color: black; empty-cells: show; }
table.score-sum tr { border-bottom: thin; }
td.comp, th.comp { text-align: left; }

/* Workers */
table.work-sum th, table.work-sum td, table.work-det th, table.work-det td { text-align: left; border: 1px solid black; }
td.work, tr.work td { font-weight: bold; background: silver; }

div.ham-form { color: black; background: #CCFFCC; width: 50%; margin: 0; }
div.ham-form div { font-size: 80%; margin-top: -1.2em; text-align: right; }

table.teeshirt { border: 1px solid black; text-align: center; vertical-align: middle; color: black; }
table.teeshirt thead, td.tshead { font-weight: bold; text-align: left; }
table.teeshirt td { border: 1px solid black; }

.regigrp { border: thin; color: black; }
.clear { clear: both; }