/* ----------------------------
         LAYOUT
------------------------------ */
layout {
  display: grid;
  grid-template-areas:
    "masthead"
    "article"
    "nav";
  grid-template-columns: 1fr;
  gap: 10px;
}

masthead { grid-area: masthead; }
article  { grid-area: article; }
nav      { grid-area: nav; }

/* --- Desktop layout --- */
@media (min-width: 700px) {
  body {padding-top:0px; margin-top:0px; background:#EEF3E2}
  layout { max-width:1200px; margin:auto; border-radius:12px; border-left:2px solid gainsboro; border-right:2px solid gainsboro; margin-top:10px; box-shadow:8px 8px 10px 2px gray;
    grid-template-areas:
      "nav masthead"
      "nav article";
    grid-template-columns: 220px 1fr;
  }
}

/* ----------------------------
         FORMATTING
------------------------------ */


nav a:link {text-decoration:none}
nav a:visited {text-decoration:none}

article {font:15px/200% Verdana; padding:25px; background-color:white}
	navTrail {display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap;
				background:#ccf; border-radius: 12px; font:bold 13px Arial; padding:5px 5px;}
	navTrailLeft:before {content:"⬅ "}
	navTrailRight:after {content:" ⮕"}

	H1,H2,H3 {margin:0px; line-height:150%}
	H1 {color:navy; font:normal 36px georgia}
	H2 {color:darkgreen}
	H3 {color:maroon}

	a:hover {color:maroon; background-color:yellow}

	blockquote { margin-left:20px;}
	.questions {font: 11px/150% Verdana;}
	.menuhang UL { margin-left:8px; padding-left:8px; margin-bottom:0px; padding-bottom:0px; margin-top:0px; padding-top:0px; list-style:none}
	.s9 {font-size:9px}
	.ctr {text-align:center}
	.dimChoice {font-style:italic; color:gray}

/* TABLES */

.table12 {background:silver; border:0px}
.table12 td {padding:4px; border:0px; font:12px/150% Arial}
.table12 tr {background:white}

.linedTable {margin-left:10px; font:12px/150% Arial; border-bottom:1px solid silver; margin:auto}
.linedTable caption { background: black; color:orange; font:18px/150% Tahoma; padding:2px; font-weight: bold;  border:-right:1px solid black}
.linedTable td {padding:4px; border-top:1px solid silver}
.linedTable th {text-align:center; background:gainsboro; color:navy; font-size:14px; font-weight:bold}

/*-------------------------------------------------*/
.dataTable {margin:auto; border-radius:12px 12px 0px 0px; overflow:hidden; border-collapse:collapse; display:inline-block; font:11px Arial;}

  /* The following for the title breaks if I use a <thead>, because then the first <tr> after *both* the <thead> and the <tbody> will be styled. */
.dataTable tr:first-child td {text-align:center; background:black; color:orange; font-weight:bold; font-size:16px}

  /* Style the column headers.  This way I don't have to manually change the tags from <td> to <th>. If the table doesn't have a header row, add a dummy blank row and then hide it. */
.dataTable tr:nth-child(2) td {background:gainsboro; font-weight:bold; font-size:12px; padding:4px}

.dataTable td {border:1px solid silver; padding:3px; text-align:center}
.dataTable td:first-child {text-align:left} /* first column */
/*-------------------------------------------------*/


.boxTable {font:12px/150% Arial; border-collapse:collapse; border-bottom:1px solid silver; border-left:1px solid silver;}
.boxTable caption { background: black; color:orange; font:18px/150% Tahoma; padding:2px; font-weight: bold;  border:-right:1px solid black}
.boxTable td {padding:4px; border-top:1px solid silver; border-right:1px solid silver}
.boxTable th {text-align:center; background:gainsboro; color:navy; font-size:14px; font-weight:bold}


/* ----------------------------
       UNUSED?
------------------------------ */
.header { font:23px Arial; border-top:1px solid black; border-left: 1px solid black; background-color:"#9999FF"}

.left { font:11px/150% Verdana; border-left:1px solid black; border-bottom: 1px solid black; border-right:1px dotted gray}
.right { font: 11px/150% Verdana; border-top:1px solid black; border-right:1px solid black; border-bottom:1px solid black }
.left-sidbar, .left, .right {display:block}