/* ---------------------------------------------------------
   50 Pound Rooster media page - mobile-only layout
   Desktop/table layout remains unchanged.
--------------------------------------------------------- */

@media screen and (max-width: 800px) {

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #ff9900;
  }

  /*
     Keep the old sliced header/nav art, but scale it to fit
     the phone instead of letting the 775px tables overflow.
  */

body > table:nth-of-type(1),
body > table:nth-of-type(2),
body > table:nth-of-type(3) {
  width: 100% !important;
  max-width: 775px !important;
  height: auto !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

body > table:nth-of-type(2),
body > table:nth-of-type(3) {
  margin-top: -1px !important;
}

body > table:nth-of-type(1) tr,
body > table:nth-of-type(2) tr,
body > table:nth-of-type(3) tr {
  display: table-row !important;
}

body > table:nth-of-type(1) td,
body > table:nth-of-type(2) td,
body > table:nth-of-type(3) td {
  display: table-cell !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  vertical-align: top !important;
}

  body > table:nth-of-type(1) img,
  body > table:nth-of-type(2) img,
  body > table:nth-of-type(3) img {
    display: block;
    width: 100% !important;
    height: auto !important;
    vertical-align: top !important;
  }

  /* Header row 1: 317 + 458 = 775 */
  body > table:nth-of-type(1) td:nth-child(1) {
    width: 40.9% !important;
  }

  body > table:nth-of-type(1) td:nth-child(2) {
    width: 59.1% !important;
  }

  /* Nav row: 317, 84, 90, 92, 91, 101 */
  body > table:nth-of-type(2) td:nth-child(1) {
    width: 40.9% !important;
  }

  body > table:nth-of-type(2) td:nth-child(2) {
    width: 10.8% !important;
  }

  body > table:nth-of-type(2) td:nth-child(3) {
    width: 11.6% !important;
  }

  body > table:nth-of-type(2) td:nth-child(4) {
    width: 11.9% !important;
  }

  body > table:nth-of-type(2) td:nth-child(5) {
    width: 11.7% !important;
  }

  body > table:nth-of-type(2) td:nth-child(6) {
    width: 13.1% !important;
  }

  /* Orange spacer row: 281 + 494 = 775 */
  body > table:nth-of-type(3) td:nth-child(1) {
    width: 36.3% !important;
  }

  body > table:nth-of-type(3) td:nth-child(2) {
    width: 63.7% !important;
  }

  /*
     Main media content:
     On desktop this is left sidebar + right show list.
     On mobile, show list comes first, sidebar moves below.
  */

  table.media-content-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: #ff9900 !important;
  }

  table.media-content-table > tbody {
    display: block !important;
    width: 100% !important;
  }

  table.media-content-table > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  table.media-content-table > tbody > tr > td {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }

  /* Right/date column first */
table.media-content-table > tbody > tr > td:nth-child(2) {
  order: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px !important;
  line-height: 1.45 !important;
}

  /* Left/sidebar column second */
  table.media-content-table > tbody > tr > td:nth-child(1) {
    order: 2;
    margin-top: 28px;
    padding-bottom: 40px !important;
    font-size: 18px;
    line-height: 1.25;
  }

  /*
     Hide the tall decorative sidebar top image on mobile.
     The album/media content still appears below the show list.
  */

  table.media-content-table > tbody > tr > td:nth-child(1) > img:first-child {
    display: none;
  }

  table.media-content-table > tbody > tr > td:nth-child(1) img {
    max-width: 250px;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 12px 0 6px 0;
  }

  /*
     Make old text links easier to tap on mobile,
     especially the Pictures links.
  */

  table.media-content-table a {
    display: inline-block;
    background: #111;
    color: #ffffff !important;
    text-decoration: none;
    padding: 8px 12px;
    margin: 5px 0 8px 0;
    border-radius: 7px;
    font-size: 18px;
    line-height: 1.2;
  }

  table.media-content-table hr {
    border: 0;
    border-top: 1px solid #ffd37a;
    margin: 18px 0;
  }

  /*
     Old embedded video/object is wider than a phone.
  */

  table.media-content-table object,
  table.media-content-table embed,
  table.media-content-table iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {

  /* Main media table: stack list first, sidebar second */
  table.media-content-table > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
  }

  td.media-list {
    order: 1 !important;
    width: auto !important;
    padding: 0 16px !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  td.media-sidebar {
    order: 2 !important;
    width: auto !important;
    margin-top: 28px !important;
    padding: 0 16px 40px 16px !important;
  }

  /* Bigger event/date text */
  td.media-list,
  td.media-list font,
  td.media-list p,
  td.media-list div,
  td.media-list b {
    font-size: 21px !important;
    line-height: 1.4 !important;
  }

  /* Slightly smaller Pictures buttons */
  td.media-list a[href*="/gallery/"],
  td.media-list a[href*="gallery/"] {
    display: inline-block !important;
    background: #111 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 5px 9px !important;
    margin: 3px 0 8px 8px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  /* Sidebar links should not become big black buttons */
  td.media-sidebar a {
    background: transparent !important;
    color: #0000ee !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    text-decoration: underline !important;
  }
}