* { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: #000;
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.5;
}

.site-header { background: #000; overflow: hidden; }
.site-header img { display: block; width: 100%; max-height: 71px; object-fit: cover; object-position: left; }

.layout { display: flex; align-items: flex-start; }

/* Sidebar menu (replaces the old left frame) */
.site-nav {
  flex: 0 0 150px;
  background: #000;
  display: flex;
  flex-direction: column;
}
.site-nav a {
  color: #f2e6c9;
  text-decoration: none;
  padding: 10px 14px;
  font-weight: bold;
  border-bottom: 1px solid #333;
}
.site-nav a:hover,
.site-nav a.active { background: #A44053; color: #fff; }

/* Main content (replaces the old body frame) */
.content {
  flex: 1;
  min-width: 0;
  padding: 24px 20px;
  text-align: center;
  background: #fff url("images/misc/background_butterfly.jpg");
}
.content a { color: #A44053; }
.content a:visited { color: #003468; }
.callout { font-weight: bold; margin: 0 0 1.4em; }
.content h2 { color: #0000ff; margin: 1em 0; }
.content h2 a { color: inherit; }
.content img { max-width: 100%; height: auto; display: block; margin: 0 auto 1.4em; }
.content p { max-width: 720px; margin: 0 auto 1.4em; }

.site-footer { background: #fff; text-align: center; padding: 16px 0; }
.site-footer img { max-width: 100%; height: auto; }

/* Phones: menu moves to the top */
@media (max-width: 700px) {
  .layout { flex-direction: column; }
  .site-nav { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .site-nav a { flex: 1 1 auto; text-align: center; border-bottom: 0; }
}
/* Latest News page */
.news {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 24px 24px;
  background: #fff;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
}
.news h3 { color: #0000ff; margin: 1.6em 0 0.4em; font-size: 1rem; }
.news p { margin: 0 0 1em; max-width: none; text-align: justify; }
.news img.right { float: right; display: inline; margin: 0 0 10px 14px; max-width: 45%; }
.news img.left { float: left; display: inline; margin: 0 14px 10px 0; max-width: 45%; }
.news h3 { clear: both; }
/* Schedule page */
.page-head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-bottom: 10px; }
.page-head img { margin: 0; }
.schedule, .schedule p { text-align: center; }
.schedule h2.year { font-size: 1.5rem; color: #000; margin: 1.6em 0 0.4em; clear: both; }
.schedule .event { border-top: 2px solid #ccc; max-width: 300px; margin: 0 auto; padding-top: 1em; }
.schedule .event p { max-width: none; }
.schedule .event p.when { color: #336666; font-weight: bold; }
@media (min-width: 701px) { .schedule .event { max-width: none; border-top: 0; background: linear-gradient(#ccc,#ccc) top center / 300px 2px no-repeat; } }
/* Bio page */
.bio p { text-indent: 2em; }
/* Scrapbook page */
.scrapbook p { text-align: left; }
.scrapbook p.note { color: red; font-weight: bold; font-size: 0.75rem; }
.scrapbook a { font-weight: bold; }
/* Lyrics index */
.lyrics-list, .lyrics-list p { text-align: center; }
.lyrics-list h3 { color: #000; }
.lyrics-list a { font-weight: bold; }
/* Lyric pages */
.song-head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-bottom: 10px; }
.song-head img { margin: 0; }
.song { max-width: 640px; margin: 0 auto; padding: 10px 24px 24px; text-align: center; font-family: Arial, Helvetica, sans-serif; }
.song h1 { margin: 0.4em 0; }
.song p { max-width: none; margin: 0 0 1.2em; }
.song p.credit { font-size: 0.8rem; }
.song p.back { font-size: 0.85rem; margin-top: 2em; }
/* Praises page */
.praises h2 { text-align: center; color: #000; font-size: 1.15rem; margin: 0.6em 0 1.2em; }
.praises p { font-weight: bold; font-size: 0.85rem; text-align: justify; }
/* Music and More menu */
.more-menu, .more-menu p { text-align: center; }
.more-menu p { font-size: 1.5rem; margin: 0 0 1.2em; }
.more-menu a { font-weight: bold; }
/* ReVisions book page */
.book h2 { text-align: center; color: #000; font-size: 1.15rem; margin: 0.4em 0; }
.book .book-links { text-align: center; font-weight: bold; line-height: 2.2; }
.book .book-links a { color: #999955; margin: 0 10px; }
.book p.order { text-align: center; color: #0000ff; }
.book img.center { display: block; margin: 1.2em auto; max-width: 100%; height: auto; }
/* Schedule page extras */
.schedule .event.joined { border-top: 0; background: none; padding-top: 0.4em; }
.schedule p.and { font-weight: bold; margin: 0.6em 0; }
.schedule p.note { font-weight: bold; max-width: 600px; margin: 2em auto; }
/* Contact page */
.contact, .contact p { text-align: center; }
/* Art page */
.art h2 { font-size: 1.05rem; color: #000; margin: 0.6em 0; text-align: left; }
.art p { text-align: left; }
.art p.note-red { color: red; font-weight: bold; font-size: 0.75rem; }
/* Review page */
.review p { text-align: left; }
.review p.head { text-align: center; }
.review p.sig { padding-left: 2em; }
/* Newspaper article pages */
.clip p { text-align: left; }
.clip p.head, .clip p.headline { text-align: center; }
.clip p.headline { font-size: 1.1rem; }
.clip p.small { font-size: 0.85rem; }
.clip p.indent { text-indent: 2em; text-align: justify; }
.clip p.tiny { font-size: 0.7rem; }
/* Article subheads and quoted lyrics */
.clip h3.sub { text-align: center; color: #000; font-size: 1rem; margin: 1.6em 0 0.6em; }
.clip p.lyric { text-align: center; font-style: italic; }
/* ReVisions praises */
.book .quotes p { font-weight: bold; text-align: justify; }
/* Original image-button menu with hover images */
.site-nav a {
  display: block; width: 123px; height: 27px; padding: 0; border: 0;
  overflow: hidden; text-indent: -9999px; white-space: nowrap;
  background-color: transparent; background-repeat: no-repeat; background-position: 0 0;
}
.site-nav a:hover, .site-nav a.active { background-color: transparent; }

.site-nav a[href$="index.html"]          { background-image: url("images/nav_home.gif"); }
.site-nav a[href$="latestnews.html"]     { background-image: url("images/nav_latest.gif"); }
.site-nav a[href$="schedule.html"]       { background-image: url("images/nav_live.gif"); }
.site-nav a[href$="bio.html"]            { background-image: url("images/nav_bio.gif"); }
.site-nav a[href$="scrapbook.html"]      { background-image: url("images/nav_scrap.gif"); }
.site-nav a[href$="lyrics.html"]         { background-image: url("images/nav_lyrics.gif"); }
.site-nav a[href$="praises.html"]        { background-image: url("images/nav_praises.gif"); }
.site-nav a[href$="music-and-more.html"] { background-image: url("images/nav_merch.gif"); }
.site-nav a[href$="contact.html"]        { background-image: url("images/nav_contact.gif"); }

.site-nav a[href$="index.html"]:hover,          .site-nav a[href$="index.html"].active          { background-image: url("images/nav_home2.gif"); }
.site-nav a[href$="latestnews.html"]:hover,     .site-nav a[href$="latestnews.html"].active     { background-image: url("images/nav_latest2.gif"); }
.site-nav a[href$="schedule.html"]:hover,       .site-nav a[href$="schedule.html"].active       { background-image: url("images/nav_live2.gif"); }
.site-nav a[href$="bio.html"]:hover,            .site-nav a[href$="bio.html"].active            { background-image: url("images/nav_bio2.gif"); }
.site-nav a[href$="scrapbook.html"]:hover,      .site-nav a[href$="scrapbook.html"].active      { background-image: url("images/nav_scrap2.gif"); }
.site-nav a[href$="lyrics.html"]:hover,         .site-nav a[href$="lyrics.html"].active         { background-image: url("images/nav_lyrics2.gif"); }
.site-nav a[href$="praises.html"]:hover,        .site-nav a[href$="praises.html"].active        { background-image: url("images/nav_praises2.gif"); }
.site-nav a[href$="music-and-more.html"]:hover, .site-nav a[href$="music-and-more.html"].active { background-image: url("images/nav_merch2.gif"); }
.site-nav a[href$="contact.html"]:hover,        .site-nav a[href$="contact.html"].active        { background-image: url("images/nav_contact2.gif"); }

/* Load the hover images in advance so there's no flicker on first hover */
body::after {
  content: url("images/nav_home2.gif") url("images/nav_latest2.gif") url("images/nav_live2.gif") url("images/nav_bio2.gif") url("images/nav_scrap2.gif") url("images/nav_lyrics2.gif") url("images/nav_praises2.gif") url("images/nav_merch2.gif") url("images/nav_contact2.gif");
  display: none;
}
/* Side strip behind the menu */
.site-nav {
  flex: 0 0 123px;
  padding-top: 3px;
  background: #000 url("images/leftside.jpg") no-repeat top left;
}

@media (max-width: 700px) {
  .site-nav { flex: none; padding-top: 0; background-image: none; }
}
/* Repeat the side strip down the whole left side */
.site-nav {
  align-self: stretch;
  background: #000 url("images/leftside.jpg") repeat-y top left;
}

@media (max-width: 700px) {
  .site-nav { align-self: auto; background-image: none; }
}