* { box-sizing: border-box }

img { max-width: 100% }

body {
	margin: 0;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF
}
a {
  color: #06C;
}
header h1 { text-align: center }
header h1 img {
	padding: .25em .5em;
}

/* main menu */
#topnav {
  background-color: #333;
}
#topnav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#topnav li {
	display: block;
  text-align: left;
  padding: .5em;
  width: 100%;
}
#topnav a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 1.5em;
  margin-left: 1em;
}
#topnav a.active {
  color: lightskyblue;
}
/* end main menu */

main h2 {
  font-size: 1.5em;
  margin-bottom: 0;
}
main h2+p {
  margin-top: .5em;
}
article h3 {
  font-size: 1.25em;
}
.whiteBG { 
  background-color: #fff;
  padding: .5em .5em 2em .5em;
}
.grayBG { 
  background-color: #ccc;
  padding: .5em;
}
.flex-home-center, .flex-units {
  display: flex;
  flex-direction: column;
}
.flex-l {
  flex: 50%;
}
.flex-r {
  flex: 50%;
}
.flex-23 {
  flex: 60%;
  margin-right:7%;
  padding: .25em;
}
.flex-13 {
  flex: 33%;
  padding: .25em;
}
.flex-33{
  flex: 33%;
  padding: 2em 1em 2em 1em;
}
.s-units {
  background-color: #ddd;
  margin: 3em;
  padding: 1.5em;
}
figure img{
  border: solid .25em #ccc;
}
figcaption {
  padding-left: .25em;
}
table.officeHours {
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 1em;
}
.officeHours tr:nth-child(odd) { background-color: #ddd; }
.officeHours tr:first-child {
  background-color: #444 !important;
  color: #fff;
}
.officeHours th, .officeHours td { 
  padding: .25em;
  text-align: left;
}
table.units th, table.units td {
  text-align: left;
  padding: .125em .5em;
}

footer h2 {
  font-size: 1.125em;
  margin-bottom: 0;
}
footer h2+p {
  margin-top: .5em;
}

@media only screen and (min-width: 900px) {
  #topnav ul {
    height: 2.5em;
    padding-top: .5em;
  }
  #topnav li {
    display: inline;
  }
  #topnav a {
    font-size: 1.25em;
    padding: .25em;
    margin-left: 0;
  }
  #topnav a:hover {
    color: lightskyblue;
  }
  .flex-home-center, .flex-units {
    flex-direction: row;
  }
  .leftGutter { padding-left: 4em; }

}