:root {
   --header-color: #2E6995;
   --table-even: #B3C3CE;
   --table-odd: #A4B5C0
}

#Blog {
   background: #AAAAAA;
   min-height: 100%;
   overflow: auto;
}

#Blog .ArchiveRow {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: 20px;

   font-size: 12px;
   height: 100px;
}
#Blog .ArchiveRow td {
   padding-left: 15px;
}

#Blog .StartEntries {
   margin-top: 0;
   margin-left: 80px;
   margin-right: 80px;
   margin-bottom: 20px;
}
#Blog .LinkEntry {
   margin: 20px 80px;
}

#Blog .Entry {
   padding: 10px;

   display: grid;
   grid-template-areas:
      "title     title     "
      "meta      content   ";
   grid-template-rows: 60px auto;
   grid-template-columns: 100px auto;
   grid-gap: 10px 20px;

   background: #CCCCCC;
}
#Blog .Entry .Meta       { grid-area: meta;       }
#Blog .Entry .Title      { grid-area: title;      }
#Blog .Entry .Content    { grid-area: content;    }

#Blog .Entry.Short {
   grid-template-areas:
      "title"
      "content"
      "meta";
   grid-template-columns: auto;
   grid-template-rows: 60px auto 20px;
   grid-gap: 10px 20px;

   margin-bottom: 20px;
}
#Blog .Entry.Short .Published {
   display: none;
}
#Blog .Entry.Short .Meta {
   justify-self: left;
}

/* ==================== */

#Blog .Entry .Meta {
   text-align: center;
   font-family: sans-serif;
   font-size: 12px;
}
#Blog .Entry .Meta > * {
   margin-bottom: 10px;
}

/* ==================== */

#Blog .Entry .Title {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-left: 20px;

   font-family: serif;
   font-size: 20px;
   font-weight: bold;
   font-style: italic;

   color: white;
   border: 1px solid black;
   background: var(--header-color);
}

/* ==================== */

#Blog .Entry .Content > * {
   margin-top: 10px;
}
#Blog .Entry .Content > *:first-child {
   margin-top: 0;
}

/* ---------- */

#Blog .Entry .Content ul {
}

/* ---------- */

#Blog .Entry .Content table {
   border-collapse: collapse;
   text-align: left;
   border: 1px solid black;
}
#Blog .Entry .Content table th,
#Blog .Entry .Content table td {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 5px;
   padding-right: 15px;
   vertical-align: top; /* Unsure about this one */
}
#Blog .Entry .Content table thead tr {
   background: var(--header-color);
   color: white;
}
#Blog .Entry .Content table th {
   font-weight: normal;
   font-style: italic;
   text-decoration: underline;
}
#Blog .Entry .Content table tbody tr:nth-child(2n+1) {
   background: var(--table-even);
}
#Blog .Entry .Content table tbody tr:nth-child(2n) {
   background: var(--table-odd);
}