/* Re-establish some CSSA after reset */
@namespace url(http://www.w3.org/1999/xhtml);
  /* set default namespace to HTML */

html, body, p, div, h1, h2, h3, h4, h5, h6,
ul, ol, dl, dt, dd, blockquote, address, pre,
listing, plaintext, xmp, menu, dir, isindex, hr, map,
multicol, center, frameset, marquee {display: block;}

li {display: list-item;}

area, base, basefont, head, meta, script, style, title,
noembed, noscript, param, noframes {display: none;}

table {display: table;}
caption {display: table-caption;}
tr {display: table-row;}
col {display: table-column;}
colgroup {display: table-column-group;}
tbody {display: table-row-group;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
td {display: table-cell;}
th {display: table-cell;}

sup {font-size:xx-small; vertical-align:super;}

/* COLOR & FONTS SCHEME */
		html {font-family:arial,sans-serif}
		:root {
			--brand-color: #b63923;
			--color1: #213140; 
			--color2: #364959;
			--color3: #79858C; 
			--color4: #BFAC95; 
			--color5: #F2DCC2; 
			}
		body {background: var(--color5) none repeat scroll 0% 0%;}
		.header {
			background-image: url('img/header_flotsam.jpg');
			background-size: cover; 
			border: 1px solid black;
			}
		div {
			line-height: 1.2;
		}
		a {
			color: var(--color2);
		}
		a.active {
			color: var(--brand-color);
		}
		h1 {
			font-size: 1.75em;
		}
		h2 {
			font-size: 1.5em;
		}
		h3 {
			font-size:1.25em;
		}
		h4, h5, h6 {
			font-size: 1.1em;
		}
		
		h1, h2, h3, h4, h5, h6 {
			font-family: 'Roboto', sans-serif;
			color: var(--color2);
			margin-top: .5em;
			font-variant: small-caps;
		}
		p, ul {
			margin-top: .5em;
		}
		ul {
			list-style-type: none;
			margin-left: 1em;
		}
		.content ul {
			list-style-type: circle;
			list-style-position: inside;
			
		}
		li {
			padding-bottom: .5em;
		}
		.footer hr {
			color: var(--brand-color);
		}
/* MEDIA QUERIES AND GRID AREAS */
		@media screen and (min-width: 601px){
		.container {
			height: 100%;
			display: grid;
			grid-template-columns: repeat(12, auto);
			grid-column-gap: 20px;  
			grid-template-rows: 140px auto auto;
			grid-template-areas:
				"h h h h h h h h h h h h"
				"l l l c c c c c c c r r"
				"f f f f f f f f f f f f";
			}
		}
	/*	@media screen and (max-width: 600px) and (min-width: 401px) {
		.container {
			height: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto 40px;
			grid-template-areas:
				"h h "
				"l c "
				"f f ";
		}
		}  */
		@media screen and (max-width: 600px) {
		.container {
			height: 100%;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 140px auto auto auto auto;
			grid-template-areas:
				"h"
				"c"
				"l"
				"r"
				"f";
		}
		}

/* OTHER GRID DEFINITIONS */

.header-menu {
	grid-area: h;
	font-family: 'Roboto', sans-serif;
	position: fixed;
  	top: 0;
  	width: 100%;
  	background: var(--color5);
  	padding-bottom: 10px;
}
.left {
	grid-area: l;
	padding-top: 20px;
	margin-left: 2em;
	margin-right: 1em;
}
.content {
	grid-area: c;
	margin-left: 1em;
	margin-right: 1em;
	padding-top: 15px;
}
.right {
	grid-area: r;
	padding-top: 20px;
	margin-left: 1em;
	margin-right: 2em;
}
.footer {
	grid-area: f;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 2em;
}

/* HEADER DEFINITIONS */
h1#branding {
	font-weight: normal;
	font-size: 3em;
	margin: 10px;
}
#branding a {
	text-decoration: none; 
	color: var(--brand-color);
}
.menu {
	margin: 10px 0 0 1em;
}

/* MENU DEFINITIONS */
li.inline {
  display: inline;
  padding-right: 1em;
  font-size: 1.25em;
  white-space: nowrap;
}


/* CONTENT DEFINITIONS */
table {
	margin-top: .5em;
}
th, td {
  padding: 10px;
}
table, th, td {
  border: 1px solid black;
}
th {
  text-align: left;
  background-color:white; 
}