/* General */

html {
  font-size: 20px; /* set root font size */
}

body {
  background-color: #383838;
  color: #242001;
  font-size: 1rem;
  font-family: Times, 'Times New Roman', serif;
}

/* Cover page components */

.hymnbook-cover {
  text-align: center;
}

.hymnbook-title {
  font-size: 3em;
  font-variant: small-caps;
  margin-top: 2.5em;
  margin-bottom: 0em;
}

/* Loading progress bar */

.progress-bar-total {
  margin: 0 auto;
  background-color: #ededdf;
  width: 50%;
}

.progress-bar-current {
  background-color: #242001;
  opacity: 0.6;
  height: 3px;
  border-radius: 3px;
}

.fader {
  -webkit-animation: fadeOut 1s linear forwards;
  animation: fadeOut 1s linear forwards;
}

@-webkit-keyframes fadeOut {
  100% { opacity: 0; }
}

@keyframes fadeOut {
  100% { opacity: 0; }
}

.spinner {
  position: relative;
  -webkit-animation: spinner 3s linear infinite;
  animation: spinner 3s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    left: 0;
    width: 0%;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    left: 100%;
    width: 0%;
  }
  75% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 0;
    width: 0%;
  }
}

@keyframes spinner {
  0% {
    left: 0;
    width: 0%;
  }
  25% {
    left: 0;
    width: 100%;
  }
  50% {
    left: 100%;
    width: 0%;
  }
  75% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 0;
    width: 0%;
  }
}

/* Hymn nav components */

.hymn-nav {
  background-color: #e5e5c7;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.hymn-btn {
  background-color: #e5e5c7;
  margin-top: 5px;
  margin-bottom: 5px;
}

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

.hymn-input {
  background-color: #ededdf;
}

.hymn-number-display {
  text-align: right;
  padding: 0.5em 0.5em 0.5em 0.5em;
  max-width: 5em;
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 0.8em;
  font-variant: small-caps;
}

.hymn-text-input {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px; /* required for iOS to not zoom */
}

.hymn-text-input::-webkit-input-placeholder {
  padding-top: 0.2em;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
}
.hymn-text-input::-moz-placeholder {
  font-weight: normal;
  line-height: 1;

  -moz-osx-font-smoothing: grayscale;
}
.hymn-text-input:-ms-input-placeholder {
  padding-top: 0.2em;
  font-weight: normal;
  line-height: 1;
}

.hymn-text-input ~ .tt-dropdown-menu {
  background-color: #ededdf;
}

/* Typeahead components */

.hymn-suggestion-book {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-variant: small-caps;
  color: #999;
  float: right;
  margin-left: 2em;
  margin-right: 2em;
}

.hymn-suggestion {
  background-color: #e5e5c7;
  margin-top: 2px;
  margin-bottom: 2px;
  cursor: pointer;
}
.hymn-suggestion:hover,
.hymn-suggestion:focus {
  background-color: #ededdf;
}

.hymn-suggestion-line {
  font-family: Times, 'Times New Roman', serif;
  font-size: 0.9rem; /* just a tad smaller than hymn verse text */
}
.hymn-suggestion-line strong {
  /*background-color: #77773b;*/
  /*color: #ededdf;*/
  text-decoration: underline;
  /*text-decoration-style: wavy;*/
  font-weight: normal;
}

.hymn-suggestion-number {
  color: #999;
  float: right;
  position: relative;
  bottom: -0.2em;
  margin-left: 0.5em;
}

/* Hymn page components */

.hymn-page {
  background-color: #e5e5c7;
  padding-top: 0.5em;
  padding-bottom: 1em;
  padding-left: 10px;
  padding-right: 10px;
}

.hymn-category {
  margin-left: 1.5em;
  margin-right: 1.5em;
  text-align: center;
  font-variant: small-caps;
}

.hymn-title {
  font-weight: bold;
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.hymn-meter {
  text-align: center;
  font-size: 0.65em;
  margin-top: 0;
  margin-bottom: 0.75em;
}

.hymn-song {
  display: table;
  margin: 0 auto 0.75em auto;
}

.hymn-section {
  display: table-row;
}

.hymn-verse-number {
  display: table-cell;
  text-align: center;
  padding: 0.5em 0em 0em 0em;
}

.hymn-verse,
.hymn-chorus {
  display: table-cell;
  padding: 0.5em 0em 0.5em 0.5em;
}

.hymn-chorus {
  padding-left: 1.25em;
}

.hymn-verse > p,
.hymn-chorus > p {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}

.hymn-verse {
}

.hymn-chorus {
  font-style: italic;
}

.hymn-note {
  display: block;
  max-width: 600px;
  text-align: center;
  font-size: 0.65em;
  font-style: italic;
  margin: 2em auto 0.5em auto;
}

.hymn-authorship {
  max-width: 600px;
  font-size: 0.65em;
  margin: 1.5em auto 0 auto;
}

.hymn-author {}

.hymn-author-type {
  padding-right: 2em;
  text-align: right;
}

.hymn-author-name {
  padding-left: 0em;
  text-align: left;
  font-variant: small-caps;
}