/* archive.css */
@charset "utf-8"
/* styles for all devices */
table {
   border-collapse: collapse;
}
html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 85%;
}
/* styles for small devices */
@media (max-width: 768px) {
   table { border: none; }
   /* display the whole table as a block */
   table, thead, tbody, tr, th, td {
      display: block;
   }
   /* Hide the headers */
   thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }
   tr { border: 1px solid #eee; margin-bottom: 0em; }
   tr:nth-of-type(odd) {
      background: #b7c9e2; /* blue-gray */
   }
   td {
      /* Behave like a row */
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 30%;
   }
   td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 1px;
      left: 6px;
      width: 25%;
      padding-right: 10px;
      white-space: nowrap;
      color: #600;
      font-weight: bold;
   }
   /* label the data */
   td:nth-of-type(1):before { content: "Date:"; }
   td:nth-of-type(2):before { content: "Presenter:"; }
   td:nth-of-type(3):before { content: "Sermon:"; }
   td:nth-of-type(4):before { content: "Abstract:"; }
}

/* Styles for larger devices */
@media (min-width: 769px) {
   tr:nth-child(2n+1) {
      background-color: #b7c9e2; /* blue-gray */
   }
   table thead tr:nth-child(n) {
      background-color: #80a0cc; /* darker shade of */
      color: #600;
   }
}