body {margin-left: 5%; margin-right: 5%; margin-top: 2%; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: LightGray;}

h1 { border-bottom-style: double; border-bottom-color: Navy; font-size: 2 em; text-align: center; color: Navy; background-color: LightGray; padding: .5%;}
h2 { font-size: 1.5em; color: Navy;}
h2.navy { font-size: 1.5em; color: LightGray; text-align: center;}
h3 { font-size: 1.3em; color: Navy;}
h3.navy {font-size: 1.3em; color: LightGray;}

p.hanging {margin-left: 5%; padding-left: 1em; text-indent: -3em;}
p.center {text-align: center;}
p.quote {text-align: center; font-style: italic;}

a:link {color: blue; text-decoration: none; background: transparent; }  /* for unvisited links */
a:hover { color: black; background: yellow; } /* when mouse is over link */

div.grey { margin-left: 5%; margin-right: 5%; background-color: #C0C0C0}
.navy {color: #FFFFFF; background: #001E5A; }
.white {color: #000000;background-color: #FFFFFF;}
.grid-container {
    	display: grid;
	grid-template-columns: auto auto;
}
.blue {
  background-color: #b3e6ff;
  text-align: left;
  padding: 1%;
  border-style: solid;
  border-width: medium;
 border-color: lightgrey; 
}
.lightgrey {
  background-color: lightgrey;
  text-align: left;
  }
.gold {
  background-color: #ddff99;
  padding: 1%;
  text-align: left;
  border-style: solid;
  border-width: medium;
 border-color: lightgrey; 
}
.brown {
	background-color: burlywood;
	padding: 1%;
	text-align: left;
	color: black;
  border-width: medium;
  border-style: solid;
 border-color: lightgrey; 
}
.border {
	background-color: lightgrey;
	border-style: solid;
	border-width: medium;
	border-color: brown;
	padding: 3%;
}
* {
  box-sizing: border-box;
}
@media only screen and (max-width: 799px) {
	div.grid-container 	{
		display: block;
		width: 100%;
	}
}
@media only screen and (min-width: 800px) {
	div.grid-container {
		display: grid; 
		grid-template-columns: 50% 50%;							
	}
}


hr { color: #C69E29; background: transparent;}

ul {margin-left: 1%}

img.floatright {
	float: right; 
	}
img.floatleft {float: left; border: solid; border-width: medium; border-color: silver; margin-right: 3%;}
img.border {border-width: medium; border-color: silver; border-style: solid; margin-left: 2%; margin-right: 2%;}
img.center {display: block; margin-left: auto; margin-right: auto; border: solid; border-width: medium; border-color: black;}

iframe {
	display: block;
	margin: 0 auto;
}