body {
  font-family: 'Work Sans', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

html > body {
  font-size: 11pt;
}

acronym, .titleTip {
  border-bottom: 1px dotted #3d5c7a;
  cursor: help;
  margin: 0;
  padding: 0 0 0.4px 0;
}

a {
  color: #a51212;
  background-color: transparent;
  text-decoration: underline;
  margin: 0;
  padding: 0 1px 2px 1px;
}

a:hover {
  text-decoration: none;
  color: #a51212;
}

ol {
  margin: 1em 0 1.5em 0;
  padding: 0;
}

ul {
  list-style-type: square;
  margin: 0 0 1.5em 0;
  padding: 0;
}

dl {
  margin: 1em 0 0.5em 0;
  padding: 0;
}

ul li {
  line-height: 1.5em;
  margin: 1.25ex 0 0 1.5em;
  padding: 0;
}

ol li {
  line-height: 1.5em;
  margin: 1.25ex 0 0 2em;
  padding: 0;
}

dt {
  font-weight: bold;
  margin: 0;
  padding: 0 0 1ex 0;
}

dd {
  line-height: 1.75em;
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}

.doNotDisplay {
  display: none !important;
}

input, textarea, select {
  border: 1px dotted #004183;
}

.th {
  font-weight: bold;
  font-size: 120%;
}

.noWrap { 
  white-space: nowrap;
}

#header {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #cccccc;
}

.logo {
  margin: auto;
  padding: 0;
  margin: 0;
}

.logo img {
  padding: 0 1em;
}

.superHeader {
  color: #000000;
  background-color: #ffffff;
  text-align: center;
  margin: 0;
  padding: 0.5ex 10px;
}

.superHeader span {
  color: #a51212;
  background-color: transparent;
  font-weight: bold;
  text-transform: uppercase;
}

.superHeader a {
  color: #a51212;
  background-color: transparent;
  text-decoration: none;
  margin: 0;
  padding: 0 0.25ex 0 0;
}

.superHeader a:hover {
  color: #a51212;
  background-color: transparent;
  text-decoration: underline;
}

.midHeader {
  color: white;
  background-color: #ffffff;
  margin: 0;
  padding: 0.26ex 10px;
}

/*

Photo by John Lockwood @justjohnl downloaded from https://unsplash.com/photos/FcLq69V7Rsc

Used under license:

All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.

More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash.

*/
#banner {
  background-image: url(/img/john-lockwood-FcLq69V7Rsc-unsplash-mod.jpg);
  background-size: cover;
  background-position: center;
  height: 33vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#banner h1 {
  margin: 0;
}

.headerTitle {
  font-size: 300%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.headerSubTitle {
  font-size: 151%;
  font-weight: normal;
  font-style: italic;
  margin: 0 0 1ex 0;
  padding: 0;
}

.headerLinks {
  text-align: right;
  margin: 0;
  padding: 0 0 2ex 0;
  position: absolute;
  right: 1.5em;
  top: 3.5em;
}

.headerLinks a {
  color: white;
  background-color: transparent;
  text-decoration: none;
  margin: 0;
  padding: 0 0 0.5ex 0;
  display: block;
}

.headerLinks a:hover {
  color: #c3c4d2;
  background-color: transparent;
  text-decoration: underline;
}

.subHeader {
  color: black;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

.subHeader a, .subHeader .highlight {
  color: white;
  background-color: transparent;
  font-size: 110%;
  font-weight: bold;
  text-decoration: none;
  margin: 0;
  padding: 0 0.25ex 0 0;
}

.subHeader a:hover, .subHeader .highlight {
  color: #ffcc00;
  background-color: transparent;
  text-decoration: none;
}

#main-copy {
  margin: 0;
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#main-copy h1 {
  color: #7590ae;
  background-color: transparent;
  font-size: 200%;
  margin: 0;
  padding: 0;
}

#main-copy h2 {
  color: #3d5c7a;
  background-color: transparent;
  font-weight: normal;
  font-size: 151%;
  margin: 0;
  padding: 1ex 0 0 0;
}

#main-copy p {
  line-height: 1.75em;
  margin: 1em 0 1em 0;
  padding: 0;
}

.newsHeading {
  color: #3d5c7a;
  background-color: transparent;
  font-size: 125%;
  font-weight: bold;
  text-decoration: none;
  margin: 0;
  padding: 0.5ex 0 0 0;
  display: block;
}

.newsHeading:hover {
  color: #7590ae;
  background-color: transparent;
  text-decoration: underline;
}

.newsDate {
  font-style: italic;
  margin: 0 !important;
  padding: 0;
}

.newsSummary {
  margin: 1.5ex 0 2.5ex 0.75ex !important;
  padding: 0;
}

.more {
  text-align: right;
  margin: 0;
  padding: 0.5em 0;
}

.more a {
  color: #3d5c7a;
  background-color: transparent;
  font-size: 92%;
  text-decoration: underline;
  margin: 0;
  padding: 0.25ex 0.75ex;
}

.more a:hover {
  color: #7590ae;
  text-decoration: none;
}

.rowOfBoxes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-grow: 1;
}

.quarter, .oneThird, .half, .twoThirds, .fullWidth {
  margin: 1em 0;
  float: left;
  border-left: 1px solid #cccccc;
}

.quarter {
  width: 21%;
  padding: 0 1.9%;
}

.oneThird {
  width: 28%;
  padding: 0 1.9%;
}

.half {
  width: 46%;
  padding: 0 1.9%;
}

.twoThirds {
  width: 63%;
  padding: 0 1.9%;
}

.fullWidth {
  width: 96%;
  padding: 0 1.2em;
  border-left: none;
}

.filler {  /* use with an empty <p> element to add padding to the end of a text box */
  border: 1px solid white;
}
 
.dividingBorderMenu {
  padding-top: 0.25em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rowOfBoxes > div:first-child {
  border-left: none;
}

.rowOfBoxes + .rowOfBoxes {
  border-top: 1px solid #cccccc;
}

#footer {
  color: #333366;
  background-color: #efefef;
  font-size: 87%;
  text-align: center;
  line-height: 1.25em;
  padding: 0.5em 0;
  height: 1.25em;
}

#footer a {
  color: #0044cc;
  background-color: transparent;
  text-decoration: underline;
  padding: 0;
}

#footer a:hover {
  text-decoration: none;
}

a.results { 
  color: #3d5c7a;
  text-decoration: none;
}

.quote {
}

div#___gcse_0 {
  display: inline-block;
  width: 30em;
}

#commits-list li {
  list-style-type: none;
  margin: 0;
  border-bottom: 1px solid darkgray;
  padding: 10px;
}

#commits-list li:last-child {
  border: none;
}

#commits-list p {
  font-size: 14px;
  margin: 0;
}

.gallery-container {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-container .box {
  color: black;
  line-height: 1.5;
  margin: 0.5em 2.5em;
  text-align: left;
  width: 204px;
}

.box img {
  padding: 0px;
  margin: 0px;
  border: 1px solid #000000;
  width: 204px;
}

.demos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.demos a {
  margin: 0 40px;
  text-align: center;
  width: 40%;
}

.demos img {
  max-width: 100%;
}

.demos div {
  margin: 10px;
}

@media screen and (max-width: 1000px) {
  .dividingBorderMenu, .rowOfBoxes {
    flex-wrap: wrap;
  }

  .oneThird, .twoThirds {
    width: 98%;
    border: none;
    border-bottom: 1px solid #cccccc;
  }

  .oneThird:last-child {
    border: none;
  }

  #footer {
    text-align: center;
    height: auto;
  }

  .logo img {
    width: 100%;
    padding: 0 0 1em;
  }

  #___gcse_0 {
    width: 100% !important;
  }

  ul li {
    margin: 1.25ex 1.5em 0 1.5em;
  }

  .demos a, .gallery-container .box a {
    width: 100%;
    margin-bottom: 1em;
  }

  .gallery-container .box {
    width: 40%;
  }
}

@media screen and (max-width: 1300px) {
  #header {
    flex-wrap: wrap;
  }

  .logo, .superHeader {
    margin: auto;
  }
}