@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

html,body {
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  color: rgb(0, 39, 64);
}

p {
  text-align: justify;
}

#bgimg {
  width: 100%;
  max-width: 800px;
  display: none;
  margin-right: auto;
  margin-left: auto;
}

#bgmobile {
  width: 100%;
  max-width: 800px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#container {
  width: 100%;
  max-width: 750px;
  margin-right: auto;
  margin-left: auto;
}

#narrowNav {
  list-style-type: none;
}
#narrowNav > li {
  margin: 8px 0;
}

#wideNav {
  display: none;
  margin: 0;
  max-width: 750px;
  margin-right: auto;
  margin-left: auto;
}

#wideNav > div {
  display: inline-block;
  padding: 0;
  margin: 12px;
  font-weight: 700;
}

@media (min-width: 620px) {
  #narrowNav {
    display: none;
  }
  #wideNav {
    display: block;
  }
  #bgimg {
    display: block;
  }
  #bgmobile {
    display: none;
  }
}

@media (min-width: 1024px) {
  #wideNav {
    font-size: 100%;
  }
}

#wideNav a,
#narrowNav a {
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  color: rgb(0, 39, 64);
  border: none;
}
#wideNav a:link,
#wideNav a:visited,
#narrowNav a:link,
#narrowNav a:visited {
  color: rgb(0, 39, 64);
  border: none;
}

#wideNav a:hover {
  color: rgb(255, 0, 102);
}

#content {
  margin-right: auto;
  margin-left: auto;
  max-width: 780px;
  padding: 12px;
  margin-bottom: 48px;
}

h1 {
  /*background-color: rgba(153, 169, 178, 0.5);*/
  /*padding: 8px 8px 4px 8px;*/
  border-top: 1px solid rgb(0, 39, 64);
  padding: 24px 0 4px 0;
  margin: 16px 0 0 0;
  text-transform: uppercase;
  font-size: 150%;
  color: rgb(255, 0, 102);
}

h1#counter {
  padding: 24px 0 4px 0;
  margin: 16px 0 0 0;
  text-transform: inherit;
  font-size: 150%;
  color: rgb(0, 39, 64);
}

h2 {
  /*border-top: 1px solid rgb(0, 39, 64);*/
  padding-top: 12px;
  margin: 16px 0;
  font-size: 150%;
}

h1.nosep,
h2.nosep {
  border-top: none;
}

h3, h4 {
  margin: 24px 0 -4px 0;
}

.highlight {
  position: absolute;
  margin-left: -20px;
}

a:link,
a:visited {
  color: rgb(0, 39, 64);
  text-decoration: none;
  border-bottom: 1px dashed black;
}

a:hover {
  color: rgb(255, 0, 102);
  border-bottom: 1px dashed rgb(255, 0, 102);
}

/*
table a:link,
table a:visited {
  color: rgb(255, 0, 102);
  text-decoration: none;
}
*/

table {
  width: 100%;
  max-width: 600px;
  background-color: rgba(153, 169, 178, 0.25);
  margin: 8px 0;
}

td {
  vertical-align: top;
  padding: 4px;
}

td:first-child {
  width: 100%;
}
td:nth-child(2) {
  min-width: 100px;
}

#loc {
  width: 100%;
  max-width: 600px;
}

.map {
  border: none;
}

.maplink {
  display: none;
}

@media (max-width: 620px) {
  .maplink {
    display: block;
  }
  .map {
    display: none;
  }
}

.bio h3 {
  margin: 0;
}

.bio h4 {
  margin: 8px 0;
}

.profilepic {
  width: 175px;
  height: 175px;
  margin: 0 8px 8px 0;
  float: left;
}

@media (max-width: 500px) {
  .profilepic {
    float: none;
  }
}

.clear {
  clear: left;
}

.registryItem {
  display: inline-block;
  font-size: 80%;
  vertical-align: middle;
}

@media (max-width: 675px) {
  .registryItem {
    display: block;
    margin: 24px 0;
    text-align: center;
  }
}

.registryItem > a {
  border: none;
}

.registryLogo {
  max-width: 120px;
  margin: 0 24px;
}