/* =========================================
   WAYSTATION TELEVISION ONLINE
   Original site design: 1998
   ========================================= */

html {
  background: #102b55;
}

body {
  margin: 0;
  padding: 18px 0 30px 0;
  background: #102b55;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #111111;
}

a {
  color: #0000cc;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #cc0000;
}

/* MAIN SITE */

#site {
  width: 960px;
  margin: 0 auto;
  background: #eeeeee;
  border: 3px ridge #d7e5ff;
}

/* MASTHEAD */

#masthead {
  min-height: 125px;
  position: relative;
  padding: 15px 25px;
  box-sizing: border-box;
  background:
    linear-gradient(to bottom, #f8fbff 0%, #dbe9fa 55%, #b7d1ef 100%);
  border-bottom: 2px solid #163e83;
}

.logo-placeholder {
  display: inline-block;
  margin-top: 10px;
  color: #082f82;
  line-height: 1;
}

.logo-placeholder strong {
  display: block;
  font-family: Arial Black, Arial, sans-serif;
  font-size: 48px;
  font-style: italic;
  letter-spacing: -4px;
}

.logo-placeholder span {
  display: block;
  margin-top: 7px;
  margin-left: 55px;
  font-family: "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: 9px;
}

.slogan {
  position: absolute;
  right: 28px;
  bottom: 25px;
  color: #143c83;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
}

/* NAVIGATION */

#main-nav {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid #8db5e8;
  border-bottom: 3px ridge #aac8ed;
  background: #174e9b;
}

#main-nav a {
  display: table-cell;
  padding: 10px 3px;
  border-left: 2px ridge #82ace0;
  border-right: 1px solid #082f6b;
  color: white;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(to bottom, #2469bb, #073f8a);
}

#main-nav a:hover {
  background: #0c3470;
  color: #ffff99;
}

/* THREE-COLUMN HOMEPAGE */

#homepage {
  display: grid;
  grid-template-columns: 205px 1fr 205px;
  gap: 8px;
  padding: 8px;
  align-items: start;
  background: #e4e4e4;
}

.left-column,
.center-column,
.right-column {
  min-width: 0;
}

/* OLD-FASHIONED CONTENT BOXES */

.box {
  margin: 0 0 9px 0;
  border: 1px solid #5676a4;
  background: #ffffff;
}

.box h2 {
  margin: 0;
  padding: 5px 7px;
  color: white;
  background: linear-gradient(to right, #174d96, #2f75bd);
  border-bottom: 2px ridge #9ebbe0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
}

.box-content {
  padding: 9px;
}

.box-content h3 {
  margin: 7px 0 3px 0;
  color: #102d6b;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
}

.box-content p {
  margin: 7px 0;
  line-height: 1.25;
}

/* PLACEHOLDERS UNTIL REAL GRAPHICS ARE UPLOADED */

.image-placeholder {
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px inset #bdbdbd;
  background: #d5d5d5;
  color: #555555;
  font-size: 11px;
  text-align: center;
}

.large-image-placeholder {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px inset #bdbdbd;
  background: #d5d5d5;
  color: #555555;
  font-size: 12px;
  text-align: center;
}

/* COMMUNITY BULLETIN */

.bulletin {
  background: #fffde1;
}

.bulletin .box-content {
  background: #fffde1;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

/* WELCOME AREA */

#welcome {
  margin-bottom: 9px;
  padding: 16px 18px;
  border: 1px solid #7e9abd;
  background: #f8fbff;
  font-family: "Times New Roman", Times, serif;
}

#welcome h1 {
  margin: 0 0 13px 0;
  color: #123b86;
  font-family: "Times New Roman", Times, serif;
  font-size: 28px;
  text-align: center;
}

#welcome p {
  margin: 9px 0;
  font-size: 16px;
  line-height: 1.25;
}

/* CURRENT PROGRAM */

.new-program .box-content {
  font-family: "Times New Roman", Times, serif;
}

.new-program .box-content p {
  font-size: 15px;
}

/* PROGRAM LINKS */

.program-links {
  text-align: center;
}

.program-links a {
  display: inline-block;
  margin: 4px 8px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

/* SCHEDULE */

.schedule-preview {
  font-family: "Times New Roman", Times, serif;
}

.schedule-preview p {
  padding-bottom: 6px;
  border-bottom: 1px dotted #aaaaaa;
}

/* FOOTER */

footer {
  padding: 12px 15px;
  border-top: 3px ridge #8eabd0;
  background: #0d2b59;
  color: #eeeeee;
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  text-align: center;
}

footer p {
  margin: 5px 0;
}

footer a,
footer a:visited {
  color: #d9e6ff;
}

footer a:hover {
  color: #ffff99;
}

/* A LITTLE 1998 RESPONSIVENESS THAT THE ORIGINAL
   WEBMASTER DEFINITELY DID NOT PLAN FOR */

@media (max-width: 980px) {
  body {
    padding-top: 0;
  }

  #site {
    width: 100%;
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 720px) {
  #masthead {
    min-height: 145px;
  }

  .slogan {
    position: static;
    margin-top: 15px;
  }

  #main-nav {
    display: block;
  }

  #main-nav a {
    display: inline-block;
    width: 31%;
    box-sizing: border-box;
  }

  #homepage {
    display: block;
  }

  .left-column,
  .center-column,
  .right-column {
    width: auto;
  }
}
/* =========================================
   INTERIOR PAGES
   ========================================= */

.interior-page {
  margin: 8px;
  padding: 18px 22px 25px 22px;
  border: 1px solid #7892b5;
  background: #ffffff;
  font-family: "Times New Roman", Times, serif;
  min-height: 500px;
}

.interior-page h1 {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 3px double #174d96;
  color: #123b86;
  font-size: 28px;
}

.interior-page h2 {
  margin: 22px 0 8px 0;
  padding: 5px 8px;
  border: 1px solid #315d98;
  background: #e3edf9;
  color: #123b86;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.interior-page p {
  font-size: 15px;
  line-height: 1.35;
}

.program-table {
  width: 100%;
  margin: 8px 0 18px 0;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.program-table th {
  padding: 6px 8px;
  border: 1px solid #315d98;
  background: #174d96;
  color: #ffffff;
  text-align: left;
}

.program-table td {
  padding: 7px 8px;
  border: 1px solid #9caec5;
  vertical-align: top;
}

.program-table tr:nth-child(even) td {
  background: #f0f4f9;
}

.small-note {
  color: #555555;
  font-size: 13px !important;
  font-style: italic;
}

.return-link {
  margin-top: 25px;
  padding-top: 8px;
  border-top: 1px solid #aaaaaa;
  font-size: 13px !important;
}
/* =========================================
   PROGRAM INFORMATION PAGES
   ========================================= */

.program-page h1 {
  margin-bottom: 2px;
}

.program-category {
  margin: 0 0 18px 0 !important;
  color: #555555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  font-style: italic;
}

.program-intro {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.program-intro-text {
  flex: 1;
}

.program-intro-text > p {
  margin-top: 0;
  font-size: 16px;
}

.program-facts {
  margin-top: 18px;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.program-facts th {
  padding: 3px 12px 3px 0;
  color: #123b86;
  text-align: left;
  vertical-align: top;
}

.program-facts td {
  padding: 3px 0;
}

.program-photo {
  padding: 5px;
  border: 1px solid #9caec5;
  background: #eeeeee;
}

.program-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #777777;
  box-sizing: border-box;
}

.promo-photo {
  width: 340px;
  flex-shrink: 0;
}

.production-photo {
  width: 540px;
  margin: 18px auto 22px auto;
}

.photo-caption {
  margin: 5px 3px 2px 3px !important;
  color: #444444;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Keep old program pages usable on narrow screens. */

@media (max-width: 720px) {
  .program-intro {
    display: block;
  }

  .promo-photo,
  .production-photo {
    width: auto;
    margin: 15px 0;
  }
}
/* In the Garden program listings */

.garden-listings {
  margin-top: 12px;
}

.garden-listings th:first-child {
  width: 22%;
}

.garden-listings th:nth-child(2) {
  width: 65%;
}

.garden-listings th:last-child {
  width: 13%;
}

.garden-listings td:first-child {
  font-weight: bold;
}

.garden-listings td:last-child {
  white-space: nowrap;
  text-align: center;
}
/* At Home */

.at-home-listings th:first-child,
.at-home-listings td:first-child {
  width: 18%;
  white-space: nowrap;
}

.at-home-listings th:nth-child(2),
.at-home-listings td:nth-child(2) {
  width: 27%;
}

.at-home-listings th:nth-child(3),
.at-home-listings td:nth-child(3) {
  width: 55%;
}

.available-program {
  margin: 18px 0 30px 0;
}

.available-program h3 {
  margin-bottom: 4px;
}

.at-home-screenshots {
  display: flex;
  gap: 14px;
  margin: 16px 0;
  align-items: flex-start;
}

.at-home-screenshots figure {
  width: 50%;
  margin: 0;
}

.at-home-screenshots img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {

  .at-home-screenshots {
    display: block;
  }

  .at-home-screenshots figure {
    width: 100%;
    margin-bottom: 16px;
  }

  .at-home-listings th:first-child,
  .at-home-listings td:first-child {
    white-space: normal;
  }

}


/* ???? Program Listings */

.question-listings th:first-child,
.question-listings td:first-child {
  width: 22%;
  white-space: nowrap;
}

.question-listings th:nth-child(2),
.question-listings td:nth-child(2) {
  width: 63%;
}

.question-listings th:last-child,
.question-listings td:last-child {
  width: 15%;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 700px) {

  .question-listings th:first-child,
  .question-listings td:first-child {
    white-space: normal;
  }

}


/* ???? Program Information */

.question-program {
  margin: 18px 0 30px 0;
}

.question-program h3 {
  margin: 0 0 4px 0;
  color: #123b86;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

.question-program h3 a {
  color: #123b86;
}

.question-program-meta {
  margin: 0 0 8px 0 !important;
  color: #555555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
}

.question-program p {
  margin-top: 7px;
}


/* Cartoon Planet Intro */

.cartoon-planet-intro {
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.cartoon-planet-intro .program-intro-text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.cartoon-planet-intro .cartoon-planet-presenter {
  position: static;
  float: none;
  flex: 0 0 180px;
  width: 180px;
  max-width: 180px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.cartoon-planet-intro .professor-icon {
  position: static;
  display: block;
  width: 180px;
  max-width: 180px;
  height: auto;
  margin: 0 auto;
}

.cartoon-planet-intro .photo-caption {
  margin: 5px 0 0 0;
  font-size: 0.85em;
  text-align: center;
}

@media (max-width: 700px) {

  .cartoon-planet-intro {
    display: block;
  }

  .cartoon-planet-intro .cartoon-planet-presenter {
    width: 150px;
    max-width: 150px;
    margin: 15px auto 0 auto;
  }

  .cartoon-planet-intro .professor-icon {
    width: 150px;
    max-width: 150px;
  }

}


/* About WayStation Television */

.about-page {
  line-height: 1.5;
}

.about-page > p,
.about-welcome,
.about-mission {
  max-width: 760px;
}

.about-page h2 {
  margin-top: 24px;
}

.about-welcome {
  padding-bottom: 8px;
}

.about-welcome h2 {
  margin-top: 8px;
}

.about-mission {
  margin-top: 28px;
  padding: 12px 15px;
  border: 1px solid #999;
  background: #f3f3f3;
}

.about-mission p {
  margin-bottom: 0;
}


/* Get Involved */

.get-involved-page {
  line-height: 1.5;
}

.get-involved-page > p,
.involved-welcome,
.involved-section,
.involved-contact {
  max-width: 760px;
}

.involved-welcome {
  padding-bottom: 10px;
}

.involved-welcome h2 {
  margin-top: 8px;
}


/* How Can I Participate box */

.involved-directory {
  max-width: 720px;
  margin: 18px 0 28px;
  border: 1px solid #777;
  background: #f4f4f4;
}

.involved-directory-title {
  padding: 6px 9px;
  font-weight: bold;
  background: #d9e5f2;
  border-bottom: 1px solid #777;
}

.involved-directory table {
  width: 100%;
  border-collapse: collapse;
}

.involved-directory td {
  padding: 7px 9px;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
}

.involved-directory tr:last-child td {
  border-bottom: none;
}

.involved-directory td:first-child {
  width: 48%;
  font-weight: bold;
}


/* Main sections */

.involved-section {
  margin-top: 28px;
  padding-top: 4px;
  border-top: 1px solid #aaa;
}

.involved-section h2,
.involved-contact h2 {
  margin-top: 12px;
}

.involved-note {
  margin: 12px 0;
  padding: 7px 10px;
  background: #f3f3f3;
  border-left: 3px solid #999;
  font-size: 0.92em;
}


/* Contact */

.involved-contact {
  margin-top: 32px;
  padding: 12px 15px;
  border: 1px solid #999;
  background: #f3f3f3;
}

.involved-contact h2 {
  margin-top: 0;
}

.contact-coming-soon {
  margin: 14px 0;
}

.involved-signoff {
  margin-bottom: 0;
}


/* Mobile */

@media (max-width: 700px) {

  .involved-directory {
    width: 100%;
  }

  .involved-directory td {
    display: block;
    width: auto;
  }

  .involved-directory td:first-child {
    width: auto;
    padding-bottom: 2px;
    border-bottom: none;
  }

  .involved-directory td:last-child {
    padding-top: 2px;
  }

}


/* Sunday Service */

.sunday-service-programs th:first-child,
.sunday-service-programs td:first-child {
  width: 28%;
}

.sunday-service-programs th:last-child,
.sunday-service-programs td:last-child {
  width: 72%;
  vertical-align: top;
}

@media (max-width: 700px) {

  .sunday-service-programs th:first-child,
  .sunday-service-programs td:first-child,
  .sunday-service-programs th:last-child,
  .sunday-service-programs td:last-child {
    width: auto;
  }

}


/* Community */

.community-page {
  line-height: 1.5;
}

.community-welcome {
  max-width: 760px;
  margin-bottom: 20px;
}


/* Community Bulletin */

.community-bulletin {
  max-width: 780px;
  margin-top: 18px;
  border: 1px solid #777;
  background: #fff;
}

.bulletin-heading {
  padding: 8px 12px;
  background: #fff2a8;
  border-bottom: 2px solid #777;
}

.bulletin-title {
  font-size: 1.15em;
  font-weight: bold;
}

.bulletin-date {
  margin-top: 2px;
  font-size: 0.88em;
}

.bulletin-item {
  padding: 12px 14px;
  border-bottom: 1px solid #aaa;
}

.bulletin-item:last-child {
  border-bottom: none;
}

.bulletin-item h2 {
  margin: 0 0 6px;
  font-size: 1em;
  color: #003366;
}

.bulletin-item p {
  margin: 5px 0;
}


/* Community Information */

.community-info {
  max-width: 780px;
  margin-top: 30px;
}

.community-links {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #999;
}

.community-links td {
  padding: 8px 10px;
  border-bottom: 1px solid #bbb;
  vertical-align: top;
}

.community-links tr:last-child td {
  border-bottom: none;
}

.community-links td:first-child {
  width: 30%;
  background: #f1f1f1;
}


/* Submit Announcement */

.submit-announcement {
  max-width: 750px;
  margin-top: 30px;
  padding: 12px 15px;
  border: 1px solid #999;
  background: #f3f3f3;
}

.submit-announcement h2 {
  margin-top: 0;
}


/* Mobile */

@media (max-width: 700px) {

  .community-bulletin,
  .community-info,
  .submit-announcement {
    width: auto;
  }

  .community-links td {
    display: block;
    width: auto;
  }

  .community-links td:first-child {
    width: auto;
    border-bottom: none;
    padding-bottom: 3px;
  }

  .community-links td:last-child {
    padding-top: 3px;
  }

}


/* WayStation News */

.news-broadcasts th:nth-child(1),
.news-broadcasts td:nth-child(1) {
  width: 15%;
  white-space: nowrap;
}

.news-broadcasts th:nth-child(2),
.news-broadcasts td:nth-child(2) {
  width: 22%;
}

.news-broadcasts th:nth-child(3),
.news-broadcasts td:nth-child(3) {
  width: 45%;
}

.news-broadcasts th:nth-child(4),
.news-broadcasts td:nth-child(4) {
  width: 18%;
}

.news-broadcasts td {
  vertical-align: top;
}

@media (max-width: 700px) {

  .news-broadcasts th:nth-child(1),
  .news-broadcasts td:nth-child(1),
  .news-broadcasts th:nth-child(2),
  .news-broadcasts td:nth-child(2),
  .news-broadcasts th:nth-child(3),
  .news-broadcasts td:nth-child(3),
  .news-broadcasts th:nth-child(4),
  .news-broadcasts td:nth-child(4) {
    width: auto;
    white-space: normal;
  }

}


/* WayStation Sports */

.sports-broadcasts th:nth-child(1),
.sports-broadcasts td:nth-child(1) {
  width: 15%;
  white-space: nowrap;
}

.sports-broadcasts th:nth-child(2),
.sports-broadcasts td:nth-child(2) {
  width: 23%;
}

.sports-broadcasts th:nth-child(3),
.sports-broadcasts td:nth-child(3) {
  width: 44%;
}

.sports-broadcasts th:nth-child(4),
.sports-broadcasts td:nth-child(4) {
  width: 18%;
}

.sports-broadcasts td {
  vertical-align: top;
}

@media (max-width: 700px) {

  .sports-broadcasts th:nth-child(1),
  .sports-broadcasts td:nth-child(1),
  .sports-broadcasts th:nth-child(2),
  .sports-broadcasts td:nth-child(2),
  .sports-broadcasts th:nth-child(3),
  .sports-broadcasts td:nth-child(3),
  .sports-broadcasts th:nth-child(4),
  .sports-broadcasts td:nth-child(4) {
    width: auto;
    white-space: normal;
  }

}


/* Community Conversations */

.community-conversations-broadcasts th:nth-child(1),
.community-conversations-broadcasts td:nth-child(1) {
  width: 15%;
  white-space: nowrap;
}

.community-conversations-broadcasts th:nth-child(2),
.community-conversations-broadcasts td:nth-child(2) {
  width: 25%;
}

.community-conversations-broadcasts th:nth-child(3),
.community-conversations-broadcasts td:nth-child(3) {
  width: 42%;
}

.community-conversations-broadcasts th:nth-child(4),
.community-conversations-broadcasts td:nth-child(4) {
  width: 18%;
}

.community-conversations-broadcasts td {
  vertical-align: top;
}

@media (max-width: 700px) {

  .community-conversations-broadcasts th:nth-child(1),
  .community-conversations-broadcasts td:nth-child(1),
  .community-conversations-broadcasts th:nth-child(2),
  .community-conversations-broadcasts td:nth-child(2),
  .community-conversations-broadcasts th:nth-child(3),
  .community-conversations-broadcasts td:nth-child(3),
  .community-conversations-broadcasts th:nth-child(4),
  .community-conversations-broadcasts td:nth-child(4) {
    width: auto;
    white-space: normal;
  }

}


/* =========================
   SCHEDULE PAGE
   ========================= */

.schedule-page {
  max-width: 900px;
  margin: 0 auto;
}

.schedule-intro {
  margin-bottom: 25px;
}

.schedule-page h2 {
  margin-top: 30px;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: #e6edf5;
  border-top: 1px solid #b8c7d8;
  border-bottom: 1px solid #b8c7d8;
  color: #174a78;
  font-size: 18px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  font-size: 13px;
}

.schedule-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #d9d9d9;
  vertical-align: top;
}

.schedule-table td:first-child {
  width: 120px;
  font-weight: bold;
  color: #444;
  white-space: nowrap;
}

.schedule-table tr:nth-child(even) {
  background: #f7f7f7;
}

.schedule-table tr:hover {
  background: #eef4f9;
}

@media (max-width: 600px) {

  .schedule-table {
    font-size: 12px;
  }

  .schedule-table td {
    padding: 5px;
  }

  .schedule-table td:first-child {
    width: 90px;
  }

}


/* =========================
   PROGRAM VIDEO
   ========================= */

.program-video {
  margin: 15px 0 8px 0;
  max-width: 560px;
}

.program-video iframe {
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

@media (max-width: 600px) {

  .program-video {
    max-width: 100%;
  }

}