/* Style for test3.html */
body {
   background-image: url("../images/stonetile.jpg");
   font-family: sans-serif;
   }
img.thumb {
   border-style: solid;
   border-color: black;
   border-width: 2px;
   }
a.external-link {
   text-decoration: none;
   font-size: 80%;
   }
.thumb {
   width: 160px;
   line-height: 100%;
   align-self: center;
   }

/* For small screens like phones */
@media screen and (max-width: 641px) {
   .events-div {
      background-image: url("/images/parchtile.jpg");
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 265px; margin: auto;
      text-align: center;
      }
   /* Left list, right thumb */
   .events-left-container {
      display: grid;
      grid-template-columns: 225px 0px;
      }
   .events-left-list-class {
      grid-row: 1;
      grid-column: 1;
      text-align: left;
      /*margin-left: 20px;*/
      margin-left: 15px;
      align-content: center;
      color: black;
      }
   .events-right-thumb-class {
      grid-row: 1;
      grid-column: 2;
      display: none;
      }
   /* Right list; left thumb */
   .events-right-container {
      display: grid;
      grid-template-columns: 210px 0px;
      }
   .events-right-list-class {
      grid-row: 1;
      grid-column: 1;
      text-align: left;
      /*margin-left: 20px;*/
      margin-left: 15px;
      align-content: center;
      color: black;
      }
   .events-left-thumb-class {
      grid-row: 1;
      grid-column: 2;
      display: none;
      }
   }
/* For larger tablets, laptops, and desktops */
@media not screen and (max-width: 641px) {
   .events-div {
      background-image: url("/images/parchtile.jpg");
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 636px; margin: auto;
      text-align: center;
      }
   /* Left list, right thumb */
   .events-left-container {
      display: grid;
      grid-template-columns: 30px 412px 164px;
      align-items: center;
      }
   .events-left-list-class {
      grid-row: 1;
      grid-column: 2;
      text-align: left;
      display: inline;
      }
   .events-right-thumb-class {
      grid-row: 1;
      grid-column: 3;
      display: inline;
      }
   /* Right list; left thumb */
   .events-right-container {
      display: grid;
      grid-template-columns: 30px 376px 200px; /* Total = 606 */
      align-items: center;
      }
   .events-right-list-class {
      grid-row: 1;
      grid-column: 3;
      text-align: left;
      display: inline;
      }
   .events-left-thumb-class {
      grid-row: 1;
      grid-column: 2;
      margin-left: 0px; margin-right: 212px; /* margin-right = column-2 - 164 */
      display: inline;
      }
   }

/* vvvvv Navbar Styles vvvvv */
/* For small screens like phones */
@media screen and (max-width: 641px) {
   .wide-navbar {
      display: none;
      }
   .narrow-navbar {
      display: inline;
      }
   }
/* For larger tablets, laptops, and desktops */
@media not screen and (max-width: 641px) {
   .narrow-navbar {
      display: none;
      }
   .wide-navbar {
      display: grid;
      }
   .nav1 {
      grid-row: 1;
      grid-column: 1;
      }
   .nav2 {
      grid-row: 1;
      grid-column: 2;
      }
   .nav3 {
      grid-row: 1;
      grid-column: 3;
      }
   .nav4 {
      grid-row: 1;
      grid-column: 4;
      }
   .nav5 {
      grid-row: 1;
      grid-column: 5;
      }
   }
/* ^^^^^ Navbar Styles ^^^^^ */
/* vvvvv Epilog Styles vvvvv */
/* For small screens like phones */
@media screen and (max-width: 641px) {
   .epilog {
      background-color: #909090;
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 175px; margin: auto;
      text-align: center;
      padding-top: 10px; padding-bottom: 10px;
      font-family: serif; font-size: 10pt;
      }
   }
/* For larger tablets, laptops, and desktops */
@media not screen and (max-width: 641px) {
   .epilog {
      background-color: #909090;
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 270px; margin: auto;
      text-align: center;
      padding-top: 10px; padding-bottom: 10px;
      font-family: serif; font-size: 10pt;
      }
   }
/* ^^^^^ Epilog Styles ^^^^^ */