body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	opacity: 0.9;	
	margin: 0px;
	height: 1200px;
	line-height: 1.6;
	background-color: darkslategrey;
	}

h1 { font-size:28px; }
h2 { font-size:24px; }
h3 { font-size:24px; }
h4 { font-size:22px; }
h5 { font-size:20px; }
h6 { font-size:18px; }

hr { 
	clear:both;
	width:80%;
	height:0.5px;
	}
	
/* main is a overarching container for all of the content*/
#main {
	width: 1100px;
	height: auto;
	margin: auto;
	position: relative;
	padding: 30px;
	background-color: ghostwhite;
	}
a:link			{ text-decoration: underline; text-decoration-thickness: 1px; font-weight: bold; color: navy; }
a:visited		{ text-decoration: underline; text-decoration-thickness: 1px; font-weight: bold; color: navy; }
a:hover			{ text-decoration: none; font-weight: bold; color: darkslategrey; background-color: ghostwhite; }
a:active		{ text-decoration: none; font-weight: bold; color: slategrey; }

/* content is the container for the main body content */
.content {
	width: 900px;
	}

/* container is for the top logo area*/
.container {
	display: flex;
	background-color: ghostwhite;
	color: darkslategrey;
	align-items: center; 
	width: 100%;
	margin: 0px;
	}

.numbers {
	display: block;
	margin: auto;
	width: 50%;
	height: auto;
	padding: 0px;
	font-size: 10px;
}
	
.left {
	display: grid;
	float: left;
	padding: 0px;
	margin: 10px 15px 5px 0px;
	border: 0px dotted grey;
	clear: left;
	font-size: 12px;
	}
.right {
	display: grid;
	float: right;
	padding: 0px;
	margin: 10px 0px 5px 5px;
	border: 0px dotted black;
	clear: right;
	font-size: 12px;
	z-index: -1;
	}
	
.center {
	display: block;
	margin: auto;
	width: 50%;
	border: 0px dotted green; 
	height: auto;
	padding: 0px;
	clear: both;
}

.diagram {
	display: block;
	margin:auto;
	position: sticky;
	top: 0px;
	padding: 10px 0px 0px 0px;
	width: 100%;
	height: auto;
	background-color: ghostwhite;
	border-top: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;

	}


.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 15px;
}
	
.caption {
  position: relative;
  top: 4px;
  left: 4px;
  font-size: 12px;
  text-align: center;
  padding: 0px 0px 10px 0px;
}
	
.footer {
	position: sticky;
	bottom: 0;
	background-color: ghostwhite;
	color: darkslategrey;
	text-align: center;
	align-items: center;
	font-size: 14px;
	width: auto;
	height: 60px;
	border-top: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
	margin: 0px;
	clear: both;
	}
 
/* style for menu bar */
#header {
	margin: 0px 20px 0px 20px;
	padding: 0px;
	width: auto;
	height: auto;
	position: sticky;
	top: 0;
	background-color: ghostwhite;
	border-top: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
	color: grey;
	font-size: 14px;

	}

#header a:link		{ text-decoration: none; font-weight: bold; color: grey; }
#header a:visited	{ text-decoration: none; font-weight: bold; color: grey; }
#header a:active	{ text-decoration: none; font-weight: bold; color: slategrey; }
#header a:hover		{ text-decoration: none; font-weight: bold; color: darkslategrey; background-color: ghostwhite;}
	
#header table {
	width: 96%;
	margin: 2px 30px 2px 30px;
	}
	
#header table td {
	width: auto;
	padding: 10px;
	text-align: center;
	font-weight: bold;
}