html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}

.content-table {
  display: table;
  width: 100%;
  height: 100%;
}

.content-row {
  height: auto;
  display: table-row;
}

div.wide {
  width: 100%;
}

div.table {
  display: table;
}

div.tr {
  display: table-row;
}

div.td {
  display: table-cell;
  vertical-align: top;
}

div.right {
  text-align: right;
}

a.subtle {
  color: inherit;
  text-decoration: none;
}

article.centered {
  position: relative;
  margin: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 1.5em;
  padding-top: 1em;
  margin-top: 10px;
  margin-bottom: 10px;
}

.body-left-column {
  display: table-cell;
  width: 351px;
  vertical-align: top;
}

.body-left-column img {
  width: 351px;
  height: 512px;
  z-index: -1;
}

.body-right-column {
  display: table-cell;
  padding-left: 30px;
  vertical-align: top;
}

.title-bar {
  /*overflow: hidden;  /* magic: new BFC, in lieu of float: left or display: inline-block */
  position: relative;
  left: -80px; /* img padding-right (30) + title-bar-left width (50) */
  top: 10px;
  color: #efefff; /* white, hint of blue */
  right: 0; /* TODO */
}

/* Because title-bar is relatively shifted left, we need a filler div to fill out the right side. */
.title-bar-filler {
  z-index: -1;
  position: absolute;
  background-color: #439b00;
  left: 0;
  top: 0;
  right: -80px; /* same as .title-bar left shift */
  bottom: 0;
  border-radius: 0px 5px 5px 0px;
}

/* semi-transparent bar over image */
.title-bar-left {
  display: table-cell;
  width: 50px;
  background-color: #439b00;
  opacity: 0.6;
  border-radius: 5px 0px 0px 5px;
}

.title-bar-right {
  display: table-cell;
  background-color: #439b00;
  padding: 30px;
}

.title-bar-text {
  font-size: 2em;
  font-weight: 600;
}

.title-bar-subtext {
  font-size: 1.5em;
  font-weight: normal;
}

.column-text {
  position: relative;
  top: 30px;
  /* padding-left is done by img */
  /* padding-top is done by top */
  padding-right: 20px;
  padding-bottom: 20px;
  color: #222222;
  font-size: 1em;
}

.column-text a {
  text-decoration: none;
  color: #439b00;
  font-weight: 600;
}

.column-text a:hover {
  text-decoration: underline;
}

.certificate {
  font-size: 0.8em;
}

ol.roman {
  list-style-type: upper-roman;
}

.address-map > .tr > .td:first-child {
  padding-right: 30px;
}

@media screen and (max-width: 768px) {
  article.centered {
    padding: 0;
    margin: 0;
  }
  .body-left-column {
    display: none;
  }
  .body-right-column {
    padding: 0;
  }
  .title-bar {
    position: static;
    display: block;
  }
  .title-bar-filler {
    display: none;
  }
  .title-bar-left {
    display: none;
  }
  .title-bar-right {
    padding: 2em;
    border-radius: 0;
  }
  .column-text {
    position: static;
    padding: 1em;
  }
  .address-map > .tr > .td {
    margin-right: 0;
    display: block;
  }
}