/* For testing. Comment out to see how things actually look. */
/** { border: .25px solid red; }*/
/* For testing. To quickly apply to an element to hide it, the better to see something else */
/*.hidden { display: none; }*/

/* Body */
body {
  margin: 0 0 0 0;
}

/* Header */
header {
  background-color: #0033FF;
  color: #FFFFFF;
  font-family: "Times New Roman", Times, serif;
  margin: 0 0 0 0;
  margin: auto;
  max-width: 732px;
}
.masthead {
  display:flex;
}
.spacer {
  flex-basis: 80px;
  flex-grow: 1;
}
.headline {
  flex-grow: 8;
  text-align: center;
}
.thumb {
  flex-basis: 80px;
  flex-grow: 1;
  margin-bottom: 0;
  margin-right: .25em;
  margin-top: .3em;
  text-align: right;
}
h1 {
  font-size: 2.25em;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: .2em;
}
h2 {
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
}

/* Header on Home page */
.home img {
  display: none;
}
.home .thumb {
  min-height: 6.35em;
}

/* Nav */
nav {
  text-align: center;
}
nav ul {
  display: flex;
  justify-content: space-around;
  margin: auto;
  padding: 0;
  text-align: center;
}
nav > ul > li {
  border-left: .05em solid white;
  border-right: .05em solid white;
  border-top: .1em solid white;
  flex: auto;
  font-size: .8em;
  list-style-type: none;
  padding-bottom: .05em;
  padding-top: .1em;
  text-transform: lowercase;
}

/* Nav on Home page */
.home ul li {
  border-color: #0033FF;
}

/* Nav links */
nav a:link {
  color: #FFFFFF;
  text-decoration: none;
}
nav a:visited {
  color: #FFFFFF;
  text-decoration: none;
}
nav a:hover {
  color: #FF0000;
  text-decoration: underline;
}
nav a:focus {
  color: #FF0000;
  text-decoration: none;
}
nav a:active {
  color: #FF0000;
  text-decoration: underline;
}

/* Main (non header on every page) */
.main {
  margin: 0 .7em 4em .7em;
}

/* Home page sections */
.home-image, .home-audio, .home-quotations {
  text-align: center;
}
.home-image img {
  border: 1px solid;
  margin-top: 1em;
}
.home-audio {
  margin-bottom: 2em;
  margin-top: 1em;
}
.home-audio p {
  font-size: .8em;
  margin-top: 0;
}
.home-quotations .attr {
  color: #0033FF;
  margin-bottom: 0;
  margin-top: 1em;
}
.home-quotations .quot {
  color: #1c771c;
  margin-bottom: 0;
  margin-top: 0;
}

/* H3 page description */
h3 {
  color: #1c771c;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  line-height: 3;
  margin-bottom: 0;
  text-align: center;
  text-transform: lowercase;
}
.blue {
  color: #0033FF;
}
.two-line {
  line-height: 1em;
  margin-top: 1.5em;
}
.small {
  font-size: 1.2em;
}
.smaller {
  font-size: 80%;
}
.sub-h3 {
  color: #0033FF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .85em;
  font-style: italic;
  margin: auto;
  margin-bottom: 3em;
  margin-top: 1em;
  text-align: center;
}

/* H4 section description */
h4 {
  color: #1c771c;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  margin-top: 2em;
  text-align: center;
  text-transform: lowercase;
}
h5 {
  color: #1c771c;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.3em;
  font-weight: normal;
  margin-bottom: 1em;
  margin-top: 2em;
  text-align: center;
}
.whims h5 {
  font-size: 1.125em;
  margin-bottom: 0;
}

/* Bio page */
.bio {
  color: #0033FF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .875em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}
.bio .biography {
  margin:auto;
  margin-top: 1em;
  max-width: 548px;
  text-align: justify;
}
.bio .attr {
  color: #1c771c;
  font-style: italic;
  margin:auto;
  margin-bottom: 2em;
  max-width: 548px;
  text-align: right;
}
.bio .quot {
  color: #1c771c;
}
.bio .linkdescrip {
  font-style: italic;
  margin-bottom: 0;
}
.bio .link {
  margin-top: 0;
}

/* Choral links */
.choral-links {
  color: #1c771c;
}

/* Songs page */
.songs {
  color: #0000FF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .75em;
}
.songs p {
  margin-bottom: 0;
  margin-top: 0;
}
.songs .song-title {
  font-size: 1.15em;
  font-weight: bold;
  margin-bottom: .15em;
  margin-top: 1.5em;
  text-align: center;
}
.songs .song-instrument {
  text-align: center;
}
.songs .song-publisher {
  font-size: .85em;
  margin-bottom: 1em;
  margin-top: .2em;
  text-align: center;
}
.songs .song-performer {
  color: #1c771c;
  margin-top: .5em;
  text-align: center;
}

/* Two column flex */
.two-col-flex {
  color: #2954ff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .75em;
  line-height: 1.25em;
  margin: auto;
  max-width: 65em;
  text-align: left;
}
.two-col-flex p {
  margin-bottom: 0;
  margin-top: 0;
}
.two-col-flex .sub-h3 {
  color: #0033FF;
  font-size: 1.16em;
  font-style: italic;
  margin: auto;
  margin-bottom: 3em;
  margin-top: 0;
  text-align: center;
}
.two-col-flex .piece-description {
  color: #1c771c;
  line-height: 1.25em;
  margin-bottom: 1em;
}
.two-col-flex .blue {
  color: #0033FF;
}
.section-description {
  color: #1c771c;
  font-style: italic;
}
.two-col-flex .synopsis {
  margin-bottom: 1em;
  text-align: justify;
}
.two-col-flex .always-one-col {
  margin: auto;
  max-width: 30em;
}
.two-col-flex .always-one-col-wide {
  margin: auto;
  margin-top: 2em;
  max-width: 46em;
}
.two-col-flex .always-one-col-wide p {
  margin-bottom: 1em;
}
.two-col-flex .press {
  margin-top: 1em;
}
.two-col-flex .attr {
  color: #1c771c;
  font-style: italic;
  margin:auto;
  margin-bottom: 1.5em;
  margin-top: 0;
  text-align: right;
}
.two-col-flex .footnote {
  color: #1c771c;
  font-size: .85em;
  font-style: italic;
  line-height: 1.25em;
  padding-left: 3em;
  padding-right: 3em;
  padding-top: 2em;
  text-align: justify;
}
.title {
  font-style: normal;
}
.two-col-flex .bottom-attr {
  color: #2954ff;
  font-size: .85em;
  font-style: italic;
  text-align: center;
}
.two-col-flex .image {
  text-align: center;
}
.two-col-flex img {
  max-width: 28.5em;
}
.two-col-flex iframe {
  height: 300px;
  width: 350px;
}
.two-col-flex .caption {
  font-size: .85em;
  margin-bottom: 1em;
  text-align: center;
}
.two-col-flex .video-spacer {
  line-height: 1em;
  margin-bottom: 12.1em;
  margin-top: 0;
}
.two-col-flex .notes {
  color: #1c771c;
  font-size: .85em;
  font-style: italic;
  margin-bottom: 1.5em;
  margin-top: 0;
  text-align: center;
}
.two-col-flex .video-notes {
  color: #1c771c;
  font-size: .85em;
  margin-bottom: 1.5em;
  text-align: justify;
}
.two-col-flex .explanation {
  color: #1c771c;
  font-style: italic;
  margin-bottom: 1.5em;
  text-align: center;
}
.two-col-flex .audio {
  margin-bottom: 1em;
  margin-top: .3em;
  text-align: center;
}
.two-col-flex iframe {
  margin-bottom: 1em;
  max-height: 300px;
  max-width: 400px;
  /*min-height: 270px;*/
  /*min-width: 360px;*/
}
.two-col-flex .audio-attr {
  color: #1c771c;
  font-style: italic;
  margin-bottom: .3em;
}
.two-col-flex .bridge {
  margin-bottom: 1em;
  margin-top: 0;
  text-align: center;
}
.column {
  margin-left: 2em;
  margin-right: 1em;
}
.one-col-only {
  display: block;
}
.two-col-only {
  display: none;
}
.videos {
  /*display: block;*/
  margin: auto;
  max-width: 46em;
}

/* One column page */
.one-col-page {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: auto;
  max-width: 32.5em;
}
.whims {
  margin: auto;
  max-width: 36em;
}
.songs {
  margin: auto;
  max-width: 42em;
}
.one-col-page .page-title {
  color: #1c771c;
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 2.1em;
  text-align: center;
  text-transform: lowercase;
}
.choral .page-title {
  font-size: 1.1em;
  line-height: 1.3em;
  margin-top: 2.35em;
}
.page-sub-title {
  color: #0033ff;
  font-size: .875em;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}
.shorter .page-sub-title {
  font-size: .75em;
}
.page-section {
  color: #1c771c;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.35em;
  text-align: center;
}
.page-title-note {
  color: #1c771c;
  font-size: 1em;
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}
.one-col-page .piece-title {
  color: #0033ff;
  font-size: 1.12em;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 2.2em;
  text-align: center;
  text-transform: uppercase;
}
.whims .piece-title {
  font-size: 1.375em;
  margin-top: 1.75em;
  text-transform: lowercase;
}
.choral .piece-title {
  font-size: 1em;
  margin-top: 2.5em;
}
.shorter .piece-title {
  font-size: .875em;
  text-transform: none;
}
.one-col-page .piece-sub-title {
  color: #0033ff;
  font-size: 1em;
  font-style: italic;
  margin-top: 0;
  text-align: center;
}
.whims .piece-sub-title {
  font-size: .875em;
  font-style: normal;
  font-weight: bold;
  margin-top: .1em;
}
.choral .piece-sub-title {
  font-size: .75em;
  font-style: italic;
  font-weight: bold;
  margin-bottom: .1em;
  margin-top: .1em;
}
.piece-scoring {
  color: #1c771c;
  font-size: .75em;
  font-style: italic;
  margin-bottom: .1em;
  margin-top: .1em;
  text-align: center;
}
.one-col-page .piece-descrip {
  color: #0033ff;
  font-size: .875em;
  margin-bottom: 0;
  margin-top: .13em;
  text-align: center;
}
.whims .piece-descrip {
  color: #1c771c;
  font-size: 1em;
  font-style: italic;
  line-height: 1.2em;
  margin-top: 1em;
}
.shorter .piece-descrip {
  margin-top: 1em;
  font-size: .75em;
}
.shorter .multiple-audio .piece-descrip {
  text-align: left;
}
.one-col-page .piece-details {
  color: #0033ff;
  font-size: .75em;
  margin-bottom: 0;
  margin-top: .1em;
  text-align: center;
}
.choral .piece-details {
  color: #1c771c;
  font-size: .65em;
  font-style: italic;
  margin-bottom: 0;
  margin-top: .1em;
  text-align: center;
}
.shorter .piece-details {
  font-size: .75em;
}
.shorter .multiple-audio .piece-details {
  text-align: left;
}
.one-col-page .sections-list {
  color: #2954ff;
  font-size: .875em;
  line-height: 1.25em;
  margin: auto;
  margin-bottom: 0;
  margin-top: 1.5em;
  max-width: 33em;
  text-align: center;
}
.choral .sections-list {
  font-size: .75em;
}
.one-col-page .piece-note {
  color: #1c771c;
  font-size: .75em;
  margin-bottom: 0;
  margin-top: .1em;
  text-align: center;
}
.whims .piece-note {
  font-size: 1em;
  margin: auto;
  margin-top: 1.1em;
  max-width: 32em;
}
.one-col-page .piece-quot {
  color: #1c771c;
  font-size: .875em;
  font-style: italic;
  margin-bottom: 0;
  margin-top: 1.1em;
  text-align: center;
}
.one-col-page .audio {
  margin-bottom: 3em;
  margin-top: .2em;
  text-align: center;
}
.audio-descrip {
  color: #0033ff;
  font-size: .75em;
  margin-bottom: .2em;
  margin-top: 1.2em;
  text-align: left;
}
.one-col-page .audio-descrip {
  color: #1c771c;
  font-size: .65em;
  font-style: italic;
  margin-top: 1em;
  text-align: center;
}
.songs .audio-descrip {
  color: #0033ff;
  font-size: 1em;
  font-style: normal;
  margin-top: 1em;
  text-align: left;
}
.chorus-orch .audio-descrip {
  color: #0033ff;
  font-size: .75em;
  font-style: normal;
  margin-top: 1em;
  text-align: left;
}
.choral .audio-descrip {
  color: #0033ff;
  font-size: .75em;
  font-style: normal;
  margin-top: 1em;
  text-align: left;
}


/* Multiple Audio div */
.multiple-audio {
  margin: auto;
  margin-left: 2em;
  max-width: 25em;
}
.songs .multiple-audio {
  /*margin-left: 2em;*/
  max-width: 43em;
}
.multiple-audio .audio {
  margin-bottom: 0;
  margin-top: .2em;
  text-align: left;
}
.shorter .audio {
  margin-bottom: 0;
  margin-top: .2em;
}


/* Media queries */
@media only screen and (min-width: 46em) {
  header {
    margin: auto;
    margin-top: .7em;
  }
  nav > ul > li {
    font-size: 1em;
  }
  .column {
    flex-basis: 38%;
  }
  .two-col-flex iframe {
    height: 300px;
    max-width: 26em;
    width: 350px;
  }
  .one-col-only {
    display: none;
  }
  .two-col-only {
    display: block;
  }
  .multiple-audio {
    margin-left: 6.5em;
  }
}

/* Preface */
.preface {
  margin: auto;
  max-width: 48.2em;
  text-align: justify;
}
.preface .head {
  margin-bottom: 1.4em;
  margin-top: 2em;
  text-align: center;
}
.preface .subhead {
  color: #1c771c;
  font-size: 1.33em;
  font-style: italic;
  margin-bottom: 1em;
  text-align: center;
}
.preface p {
  line-height: 1.25em;
  margin-bottom: 1em;
}

/* Links section */
.links {
  color: #0000FF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.2;
  text-align: center;
}

/* Individual links */
.link a:link {
  color: #0000FF;
  text-decoration: none;
}
.link a:visited {
  color: #0000FF;
  text-decoration: none;
}
.link a:hover {
  color: #FF0000;
  text-decoration: underline;
}
.link a:focus {
  color: #FF0000;
  text-decoration: none;
}
.link a:active {
  color: #FF0000;
  text-decoration: underline;
}

/* Links page */
.links a:link {
  color: #0000FF;
  text-decoration: none;
}
.links a:visited {
  color: #0000FF;
  text-decoration: none;
}
.links a:hover {
  color: #FF0000;
  text-decoration: underline;
}
.links a:focus {
  color: #FF0000;
  text-decoration: none;
}
.links a:active {
  color: #FF0000;
  text-decoration: underline;
}

/* Sub-nav links (i.e. Operas, Orchestral, Chamber, Piano, Choral) */
.sub-nav-links {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .875em;
  text-align: center;
}
.sub-nav-links a:link {
  color: #1c771c;
  text-decoration: underline;
}
.sub-nav-links a:visited {
  color: #1c771c;
  text-decoration: none;
}
.sub-nav-links a:hover {
  color: #FF0000;
  text-decoration: none;
}
.sub-nav-links a:focus {
  color: #FF0000;
  text-decoration: none;
}
.sub-nav-links a:active {
  color: #FF0000;
  text-decoration: underline;
}