/*Reset Styles*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

header,
section,
footer,
aside,
nav,
main,
article,
figure {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

/*Background Photos*/
@media screen and (min-width: 768px) {
  #photo {
    background-image: url(graphics/sheep-1024x192_2x.jpg);
  }
}

@media screen and (max-width: 767px) {
  #photo {
    background-image: url(graphics/sheep-768x144_2x.jpg);
  }
}

/*Page Styles*/
html {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}

body {
  margin: 0;
  background-color: #f7f7f7;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#top-page-wrap {
  flex: 1 0 auto;
  overflow-y: hidden;
  max-width: 1024px;
  background-color: #f7f7f7;
}

/*Header Styles*/
header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d7d7d7;
  width: 100%;
  height: 50px;
}

#centering-container a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

#logo {
  width: 30px;
  height: 30px;
}

#h1-title {
  margin: 0;
  text-align: left;
  padding-left: 10px;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
}

/*Photo Styles*/
#photo-container {
  position: relative;
  background-color: #d7d7d7;
  width: 100%;
}

/*Padding-Top allows dynamic sizing of the background image based on the percentage of the pixel ratio of its height divided by width*/
#photo {
  padding-top: 18.75%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100px;
}

#photo-verse-container {
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 6px 0px 0px 0px;
  background-color: #d7d7d7;
}

.photo-verse {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #000000;
  padding: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/*Navigation and Content Styles*/
#nav-main-wrap {
  display: block;
}

/*Navigation Styles*/
nav {
  position: relative;
}

.small-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.small-nav a:link,
.small-nav a:visited {
  text-decoration: none;
  color: #ffffff;
  background-color: #192d54;
}

.small-nav a:focus,
.small-nav a:hover,
.small-nav a:active {
  text-decoration: none;
  color: #ffffff;
  background-color: #294887;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  width: 100%;
  position: absolute;
  top: 50px;
}

nav ul li a {
  display: block;
  padding: 10px 0px 10px 20px;
  text-align: left;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border-top: 1px solid #ffffff;
}

nav ul li a:link,
nav ul li a:visited {
  text-decoration: none;
  color: #ffffff;
  background-color: #192d54;
}

nav ul li a:focus,
nav ul li a:hover,
nav ul li a:active {
  text-decoration: none;
  color: #ffffff;
  background-color: #294887;
}

.current a:link,
.current a:visited,
.current a:hover,
.current a:active {
  text-decoration: none;
  color: #b3ccff;
  background-color: #192d54;
  cursor: default;
}

.toggle-icon {
  height: 12px;
  width: auto;
  margin-right: 4px;
}

/*Content Styles*/
main {
  display: block;
  max-width: 500px;
  padding: 4%;
  margin: 0 auto;
  background-color: #f7f7f7;
}

.h1-article {
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

.h1-margin {
  margin-bottom: calc(16px * 1.5);
}

#note {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0 calc(16px * 1.5);
}

#note-print {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0 calc(16px * 1.5);
}

.hr {
  margin: 0px auto;
  border: 0px;
  width: 85%;
  height: 1px;
  background-color: #000000;
  margin-bottom: calc(16px * 1.5);
}

h2 {
  font-family: Georgia, serif;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

h3 {
  font-family: Georgia, serif;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

h4 {
  font-family: Georgia, serif;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 calc(16px * 1.5) 0;
}

main p {
  margin: 0 0 calc(16px * 1.6) 0;
}

main a:link,
main a:visited {
  text-decoration: none;
  color: #001c54;
  border-bottom: 1px solid #001c54;
}

main a:focus,
main a:hover,
main a:active {
  text-decoration: none;
  color: #0036a1;
  border-bottom: 1px solid #0036a1;
}

sup {
  line-height: 1;
  vertical-align: super;
  font-size: smaller;
}

ul.endnote {
  list-style: none;
  margin: 0 0 calc(16px * 1.6) 0;
  padding: 0;
}

ul.endnote li {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}

#top-of-page-wrap {
  display: flex;
  justify-content: flex-end;
}

.nobr {
  white-space: nowrap;
}

i,
cite,
.font-italic {
  font-style: italic;
}

.font-normal {
  font-style: normal;
}

.font-small-caps {
  font-variant: small-caps;
}

main a.top-of-page {
  text-align: center;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px;
  border: 6px solid #192d54;
  border-radius: 25% / 50%;
}

main a.top-of-page:link,
main a.top-of-page:visited {
  text-decoration: none;
  color: #ffffff;
  background-color: #192d54;
}

main a.top-of-page:hover,
main a.top-of-page:active {
  text-decoration: none;
  color: #ffffff;
  background-color: #25417a;
  border-color: #25417a;
}

/*Footer Styles*/
footer {
  flex-shrink: 0;
  max-width: 1024px;
  height: 50px;
  background-color: #d7d7d7;
}

/*RefTagger Styles*/
.verse-black a:link,
.verse-black a:visited {
  color: #000000;
}

.verse-black a:focus,
.verse-black a:hover,
.verse-black a:active {
  color: #002570;
}

@media screen and (min-width: 768px) {
  /*Page Styles*/
  html {
    font-size: 18px;
    line-height: 1.7;
  }

  /*Header Styles*/
  header {
    height: 100px;
  }

  #logo {
    width: 60px;
    height: 60px;
  }

  #h1-title {
    font-size: 34px;
    padding-left: 20px;
  }

  /*Photo Styles*/
  #photo-verse-container {
    border-radius: 10px 0px 0px 0px;
  }

  .photo-verse {
    font-size: 16px;
    padding: 10px;
  }

  /*Navigation and Content Styles*/
  #nav-main-wrap {
    display: flex;
  }

  /*Navigation Styles*/
  nav {
    position: static;
    min-width: 20%;
  }

  .small-nav {
    display: none;
  }

  nav ul {
    position: static;
    height: auto;
    display: block !important;
  }

  nav ul li:first-child a {
    border-top: none;
  }

  nav ul li a {
    text-align: right;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 20px;
  }

  nav ul li:last-child a {
    border-radius: 0 0 10px 0;
  }

  /*Content Styles*/
  main {
    width: 100%;
    max-width: none;
    padding: 40px;
    margin: 0;
  }

  .h1-article {
    font-size: 24px;
    line-height: 1.6;
  }

  .h1-margin {
    margin-bottom: calc(24px * 1.6);
  }

  #note {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: calc(24px * 1.6);
  }

  #note-print {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: calc(24px * 1.6);
  }

  .hr {
    margin-bottom: calc(24px * 1.6);
  }

  h2 {
    font-size: 18px;
    line-height: 1.6;
  }

  h3 {
    font-size: 18px;
    line-height: 1.6;
  }

  h4 {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: calc(18px * 1.6);
  }

  main p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: calc(18px * 1.7);
  }

  main a.top-of-page {
    font-size: 16px;
    padding: 8px;
    border-width: 8px;
  }

  .last-p-margin {
    margin-bottom: 0;
  }

  ul.endnote {
    margin-bottom: calc(18px * 1.7);
  }

  ul.endnote li {
    font-size: 18px;
    line-height: 1.7;
  }
}

@media screen and (min-width: 1024px) {
  /*Page Styles*/
  html {
    font-size: 20px;
  }

  body {
    background-color: #ebebeb;
  }

  #top-page-wrap {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  /*Navigation and Content Styles*/
  #nav-main-wrap {
    display: block;
  }

  /*Navigation Styles*/
  nav {
    width: 100%;
  }

  .small-nav {
    display: none;
  }

  nav ul {
    display: flex !important;
  }

  nav ul li {
    flex: 1 0 0%;
  }

  nav ul li a {
    padding: 0;
    text-align: center;
    font-size: 16px;
    border-top: 0;
    border-right: 1px solid #ffffff;
  }

  nav ul li:last-child a {
    border-radius: 0;
  }

  /*Content Styles*/
  #note {
    font-size: 20px;
  }

  #note-print {
    font-size: 20px;
  }

  h2 {
    font-size: 20px;
    line-height: 1.6;
  }

  h3 {
    font-size: 20px;
    line-height: 1.6;
  }

  h4 {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: calc(20px * 1.6);
  }

  main p {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: calc(20px * 1.7);
  }

  ul.endnote {
    margin-bottom: calc(20px * 1.7);
  }

  ul.endnote li {
    font-size: 20px;
    line-height: 1.7;
  }

  main {
    display: block;
    padding: 40px 152px;
  }

  main p {
    margin-bottom: calc(20px * 1.7);
  }

  footer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}