/*** Added a <main> element surrounding the content between the <nav> and <footer> elements for accessibility.
     Because Bootstrap makes HTML5 semantic elements display:block, that screwed up the height of the
     half-height intro. Setting the <main> to inline seemed to fix it.  ***/
     
main {
  display: inline;
}

.subpage main .container:first-of-type {
  padding-top: 2em;
}
     

@media (min-width: 767px) {
  .navbar-relative {
    padding: 5px 0;
    border-radius: 0;
    border-bottom: none;
    letter-spacing: 1px;
    background: #3e444d;
  }
}

/* Simple Table */

.simple-table {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

.simple-table caption {
  font-weight: bold;
  text-align: left;
  margin: .5em 0px;
}

.simple-table th,
.simple-table td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
  padding: .5em 1em;
}

.simple-table.no-borders th,
.simple-table.no-borders td {
  border-bottom: none;
}
  

.simple-table th {
  font-weight: bold;
  vertical-align: bottom;
  font-size: .9em;
  background-color: #eee
}

.simple-table.side-header th {
  vertical-align: top;
}

.simple-table tr.hilight td,
.simple-table td.hilight {
  background-color: #eee;
}

.simple-table tr.border td,
.simple-table td.border {
  border-bottom: 1px solid #ccc;
}

.alternating-rows tr:nth-child(odd) {
  background-color: #eee;
}

.alternating-rows th {
  background-color: #333;
  color: white;
}

.vertical-borders {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;  
}

.vertical-borders td,
.vertical-borders th {
  border-right: 1px solid #ccc;
}

.dotted td {
  border-style: dotted;
}

.dashed td {
  border-style: dashed;
}

.nowrap {
  white-space: nowrap;
}