/* BODY style */
body {
	font-family: Tahoma, Roboto, sans-serif;
	font-size: 100%;
  	width: 1000px;
	margin: auto;
	column-count: 1;
/*	padding: 0px 10px 0px 10px; */
	--Navy: #001E44;  /* official "Nittany Navy" color */
	--BeaverBlue: #1E407C;  /* official "Beaver Blue" color */
	--OldCoaly: #262626;  /* official "Old Coaly" color */
	--PSUgray: #96BEE6;  /* official "PA Limestone" color */
	--PSUpink: #BC204B;  /* official "Original '87" color */
	--PSUgreen: #4A7729; /* official "Penn's Forest" color */
	background-color: white;
}

/* HEADER style */
header h1 {
  font-family: Papyrus, "Times-Roman", serif;
	font-size: 2.5em;
	font-weight: bold;
  	color: white;
  	background: var(--BeaverBlue);
  	line-height:1;
  	padding:1.5%;
  	margin:0.5em auto;
  	text-align:center;
 }

header h1 span#name{
  font-size: 2.0rem;
  font-weight: bold;
  color: var(--PSUgray);
 }
header h1 span#PSU{
  font-size: 1.0rem;
  font-weight: normal;
 }

p#cc-lic {
  color: var(--PSUpink);
  font-size: 0.75em;
 }

p#date {
  display: block;
  color: var(--PSUgreen);
  font-size: 75%;
  text-align: center;
 }

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

header h1 a:link {
  color: var(--PSUgray);
  text-decoration: none;
}
header h1 a:visited {
  color: var(--PSUpink);
  text-decoration: none;
}


/* MAIN CONTENT style stuff */
/* don't use <h1> in main sections -- can only have ONE <h1> per page */
h2 {
  font-family: "Georgia", Garamond, serif;
  font-size: 2.5em;
  color: var(--Navy);
  margin:0.75em auto;
 }

h3 {
  font-family: "Georgia", Garamond, serif;
  font-size: 1.75em;
  color: var(--BeaverBlue);
 }

h4 {
  font-family: "Georgia", Garamond, serif;
  font-size: 1.25em;
  color: var(--OldCoaly);
  margin: 0;
 }

hr {
  width: 100%;
  height: 6px;
  color: var(--BeaverBlue);
  border: 0;
  background: var(--BeaverBlue);
	}
hr.gray{
  width: 100%;
  height: 3px;
  color: var(--PSUgray);
  border: 0;
  background: var(--PSUgray);
}

figcaption{
	font-size: 75%;
	font-style: italic;
	font-weight: bold;
}

p{
  margin: 0 5px 0 5px;
	}
	
p#notes {
  color: var(--BeaverBlue);
  font-size: 0.75em;
 }
 
/* define the setup for a 2x4 grid of content */	
.grid2x4 {
  display: grid;
  grid-template-columns: auto auto;
  background-color: white;
  row-gap: 10px;
  padding: 5px;
}
.grid2x4 > div {
  background-color: white;
  border: 2px solid var(--PSUgray);
  border-style: none none solid none;  
  padding: 5px;
  text-align: left;
}	
	
.grid3x2 {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: white;
  padding: 5px;
}
.grid3x2 > div {
  background-color: white;
  border: 0px solid black;
  padding: 5px;
  text-align: center;
}	

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
}
.flex-row > div {
  background-color: white;
  margin: 10px;
  text-align: center;
  vertical-align: middle;
}

blockquote {
  color:darkblue;
  margin:2em;
 }

img {
  max-width:100%;
  max-height:100%;
 }
 
/* use this with <img class="imgL"> put the image on the left or right */
.imgL {
	float: left;
	padding-right: 10px;
	}
.imgR {
	float: right;
	padding-left: 10px;
	}
/* use this with <div class="clearfix"> to make sure images fit inside box when image is larger than the box of text */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* use this with <img class=""> to vertically center images compared to text in the grid in the left or fight */
.vert-mid {
  padding: 50px 0;
}

.twocolumn{
	display:grid;
	grid-template-columns: 50% 50%;
	}

div.column1of2 { 
	float: left;
  	width: 490px;
	margin: 0px 0px 0px 5px;
	text-align: left;
}
	
div.column2of2 {
	float: right;
	width: 490px;
	margin: 0px 5px 0px 0px;
	text-align: left;
}

.narrow{
	margin: 0px 50px;
}


/* FOOTER style */

footer {
	color: white;
	background-color: var(--BeaverBlue);	
	font-size: 175%; 		
	text-align: center;
	width: 1000px;
	float: left;
	padding-top: 15px;
	padding-bottom: 15px;}
a.foot:link {color:#ffffff; text-decoration: none;}
a.foot:visited {color:#ffffff; text-decoration: none;}
a.foot:hover {text-decoration: underline; font-weight: bold;}