@font-face {
  font-family: 'Mr De Haviland';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/mrdehaviland/v14/OpNVnooIhJj96FdB73296ksbOg3F60Y.ttf) format('truetype');
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body,
pullquote {
  font-size: 14pt;
  line-height: 1.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
}
a {
  color: #134B4B;
}
a:hover {
  color: #61A5A5;
}
a:visited {
  color: #193838;
}
.links a {
  font-weight: bold;
}
h2 {
  font-size: 16pt;
  line-height: 1.2em;
}
h2 span#alt_measure {
  font-size: 50%;
}
h3 {
  font-size: 16pt;
  line-height: 1.2em;
}
.label {
  border-radius: 0px;
  background-color: inherit;
  color: inherit;
  display: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: inherit;
  text-shadow: inherit;
  vertical-align: inherit;
  white-space: inherit;
}
/*** My stuff ***/
h1,
h2,
h3,
h4,
h5,
h6,
.mimicHeader {
  font-family: "New York", Georgia, serif;
  color: #7D1F1F;
}
blockquote {
  font-style: italic;
}
/* Make sure the header doesn't go past the size of the background image, and centers nicely. */
body {
  max-width: 1200px;
  margin: auto;
}
article,
sidebar {
  display: block;
  padding: 0em 1em;
}
.nowrap {
  white-space: nowrap;
}
.screenReaderOnly {
  display: none;
}
/* header and footer */
header,
footer {
  background: #7D1F1F url('/images/inheritance.jpg') no-repeat center top;
  padding: 1em;
  color: #61A5A5;
  text-shadow: #000 0px 0px 8px;
}
header {
  padding-bottom: 0em;
  margin-bottom: 1em;
}
header > h1 {
  color: #61A5A5;
  /* Override h1 style */
  text-align: right;
  margin-bottom: 0.75em;
  background: transparent;
  padding: 0px;
}
footer {
  background-position: center bottom !important;
  padding-top: 0em;
  margin-top: 1em;
  clear: both;
}
footer > p#copyright {
  clear: both;
  margin-top: 0.5em;
}
ul[role="navigation"],
nav > ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: normal;
  margin: 0em -1em;
  padding: 0.25em 1em;
  background: rgba(255, 255, 255, 0.5);
  border-top: 1px solid #063131;
  border-bottom: 1px solid #063131;
  text-shadow: none;
}
ul[role="navigation"] li,
nav > ul li {
  list-style-type: none;
}
ul[role="navigation"] li > a,
nav > ul li > a {
  text-decoration: none;
  color: #063131;
  font-family: sans-serif;
  padding-right: 1.2em;
}
ul[role="navigation"] li > a:hover,
nav > ul li > a:hover {
  color: #134B4B;
}
ul[role="navigation"] li > ul,
nav > ul li > ul {
  border: 1px solid #063131;
}
@media (max-width: 767px) {
  ul[role="navigation"],
  nav > ul {
    display: flex;
    flex-flow: column;
  }
}
/* Submenu stuff https://www.w3schools.com/howto/howto_css_dropdown.asp*/
/* Dropdown toggle */
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown:hover {
  /* Show the dropdown menu on hover */
}
.dropdown:hover .dropdown-menu {
  display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #FFF;
  min-width: 160px;
  padding: 0.5em;
  /* Change color of dropdown links on hover */
}
footer > .dropdown > .dropdown-menu {
  top: auto;
  bottom: 0px;
  left: 30px;
  margin-bottom: 1px;
}
.dropdown-menu > * {
  margin-top: 0.5em;
}
.dropdown-menu > :first-child {
  margin-top: 0em;
}
/* Hide menu options when on the page */
#advent #adventLink,
#pastAdvent #adventLink {
  font-weight: bold;
}
#about #aboutLink {
  font-weight: bold;
}
#baking101 #baking101Link {
  font-weight: bold;
}
#disastersCurrent #disastersLink,
#disasters2019 #disastersLink,
#disasters2009 #disastersLink {
  font-weight: bold;
}
#other #otherLink {
  font-weight: bold;
}
#sources #sourcesLink {
  font-weight: bold;
}
/* JS-created social media sharing links */
#linksToShareParent {
  white-space: nowrap;
  padding: 0px;
}
#linksToShareParent > * {
  padding: 0px;
  margin: 0px;
}
/* Photos, graphics */
img {
  border: 0px;
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}
.pinterestOnly {
  display: none;
  speak: none;
}
.photo,
.bookCover {
  border: 2px solid #7D1F1F;
  margin-top: 1em;
  margin-bottom: 1em;
}
.no-border {
  border: none;
}
.caption {
  font-style: italic;
  font-size: 0.8em;
  display: block;
  margin-top: 0.5em;
}
.left {
  float: left;
  margin-bottom: 1em;
  margin-top: 1em;
  margin-right: 1em;
}
.right {
  float: right;
  margin-bottom: 1em;
  margin-top: 1em;
  margin-left: 1em;
}
.bookCover {
  /* Not working :( Working? */
  /*
  border: 2px solid @red;
  margin-top: 1em;
  margin-bottom: 1em;
 */
  max-width: 100px;
}
/** Inner pages **/
span.subtitle {
  display: block;
  font-size: 75%;
  font-family: 'Mr De Haviland', 'Edwardian Script ITC', cursive;
}
/** Recipes **/
ul#meta {
  margin-top: 0.5em;
  margin-left: 0px;
}
ul#meta > li {
  display: block;
  /* removes the ball */
  line-height: 2em;
}
ul#meta a {
  color: #FFF;
  font-weight: bold;
  background-color: #364C09;
  border: 1px #A0BA6D solid;
  padding: 0.25em;
  white-space: nowrap;
}
ul#meta a.category {
  background-color: #A0BA6D;
  color: #364C09;
  border: 1px #364C09 solid;
}
a#altMeasure {
  color: #BE6F6F;
  font-size: 0.5em;
}
/** Index **/
/* Six newest items on front page */
#whatsNew {
  padding-left: 10%;
  padding-right: 10%;
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.75em;
  gap: 0.75em;
}
#whatsNew h2 {
  background-color: #7D1F1F;
  color: #FFF !important;
  text-shadow: #000 0px 0px 8px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.4em;
  min-height: 3em !important;
  max-width: 24em;
  border: 1px #7D1F1F solid;
}
#whatsNew h2 > a {
  color: inherit !important;
  text-decoration: none;
}
@supports (display: grid) {
  #whatsNew h2 {
    /* Let grid set the size & spacing */
    max-width: 100%;
    margin: 0px;
  }
}
@media (max-width: 767px) {
  #whatsNew {
    /* Narrowest image width */
    grid-template-columns: 1fr;
    /* A list! */
    padding-left: 1em;
    padding-right: 1em;
  }
}
/* Recipe list in the index */
#recipeList {
  display: block;
  background: #A0BA6D !important;
  color: #364C09 !important;
  clear: both;
}
#recipeList section {
  padding-left: 0.5em;
  display: block;
  float: left;
  width: 32%;
}
#recipeList h2,
#recipeList h3 {
  background: inherit !important;
  color: inherit !important;
}
#recipeList ul {
  list-style-type: none;
  padding-left: 0em;
  font-family: sans-serif;
}
#recipeList a {
  text-decoration: none;
  color: #364C09;
}
@supports (display: grid) {
  #recipeList {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(auto, 1fr), minmax(auto, 1fr), minmax(auto, 5fr);
    grid-gap: 0.75em;
    gap: 0.75em;
    padding: 1em;
  }
  #recipeList > section {
    float: none;
    padding: 0px;
    width: 100%;
  }
  #recipeList > section > h3 {
    margin: 0px;
    padding: 0px;
  }
  #recipeList > section.long {
    grid-row: span 3;
  }
  @media (max-width: 767px) {
    #recipeList {
      /* Narrowest image width */
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }
    #recipeList > section.long {
      grid-row: span 1;
    }
    #recipeList > section > ul {
      display: none;
    }
  }
}
.new {
  font-weight: bold;
}
.new :after {
  content: " (New)";
}
li.old,
li.new {
  font-style: italic;
}
li.old > a,
li.new > a {
  font-style: normal;
}
/** Forms **/
input.aquamarine {
  display: none;
}
.required {
  font-weight: bold;
}
.currentField {
  background-color: #A0BA6D;
}
.help {
  color: #888;
  font-weight: normal;
}
.formField {
  padding: 0.25em;
}
.formField input[type=text],
.formField textarea {
  width: 95%;
}
.formField input + label {
  display: inline;
}
/** Calendar-style Advent calendar **/
#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Could use repeat (7, 1fr), but my less compiler hates it */
}
#calendar a {
  text-decoration: none;
}
#calendar div {
  font-size: 42pt;
  text-align: right;
  text-shadow: #FFF 0px 0px 8px;
  padding: 0.25em;
  padding-bottom: 1em;
  color: #364C09;
}
#calendar div a:link,
#calendar div a:visited {
  color: #510A0A;
  opacity: 1;
}
#calendar .dow {
  color: #A0BA6D;
  background-color: #364C09;
  font-size: 14pt;
  padding-bottom: 0.25em;
  text-align: center;
  text-shadow: none;
}
#calendar .starts-on-monday {
  grid-column: span 1;
}
#calendar .starts-on-tuesday {
  grid-column: span 2;
}
#calendar .starts-on-wednesday {
  grid-column: span 3;
}
#calendar .starts-on-thursday {
  grid-column: span 4;
}
#calendar .starts-on-friday {
  grid-column: span 5;
}
#calendar .starts-on-saturday {
  grid-column: span 6;
}
#calendar .starts-on-sunday {
  display: none;
}
#calendar .ends-on-friday {
  grid-column: span 1;
}
#calendar .ends-on-thursday {
  grid-column: span 2;
}
#calendar .ends-on-wednesday {
  grid-column: span 3;
}
#calendar .ends-on-tuesday {
  grid-column: span 4;
}
#calendar .ends-on-monday {
  grid-column: span 5;
}
#calendar .ends-on-sunday {
  grid-column: span 6;
}
#calendar .ends-on-saturday {
  display: none;
}
#calendar [class^="starts-on-"],
#calendar [class^="ends-on-"],
#calendar .blank {
  background-color: #364C09;
  opacity: 1;
}
#calendar .future {
  border: 1px solid #A0BA6D;
}
@media (max-width: 700px) {
  #calendar {
    /* Narrowest image width */
    grid-template-columns: 1fr;
    /* A list! */
  }
  #calendar [class^="starts-on-"],
  #calendar [class^="ends-on-"],
  #calendar .dow,
  #calendar .blank {
    display: none;
  }
}
@supports not (display: grid) {
  #calendar {
    padding: 0px;
  }
  @media (min-width: 701px) {
    #calendar div {
      width: 14%;
      float: left;
    }
    #calendar .starts-on-monday {
      width: 14%;
    }
    #calendar .starts-on-tuesday {
      width: 28%;
    }
    #calendar .starts-on-wednesday {
      width: 42%;
    }
    #calendar .starts-on-thursday {
      width: 56%;
    }
    #calendar .starts-on-friday {
      width: 70%;
    }
    #calendar .starts-on-saturday {
      width: 84%;
    }
    #calendar .ends-on-friday {
      width: 14%;
    }
    #calendar .ends-on-thursday {
      width: 28%;
    }
    #calendar .ends-on-wednesday {
      width: 42%;
    }
    #calendar .ends-on-tuesday {
      width: 56%;
    }
    #calendar .ends-on-monday {
      width: 70%;
    }
    #calendar .ends-on-sunday {
      width: 84%;
    }
  }
  @media (max-width: 700px) {
    #calendar div {
      width: 100%;
    }
  }
}
/* Jumbled-up calendar */
#calendarHidden {
  margin: 0em;
  padding: 0em;
  display: grid;
  grid-gap: 0px;
  gap: 0px;
}
#calendarHidden > a,
#calendarHidden > div {
  display: block;
  text-decoration: none;
  color: #FFF;
  font-size: 42pt;
  text-shadow: #000 0px 0px 8px;
  text-align: right;
  padding: 0.5em;
}
#calendarHidden > a:visited,
#calendarHidden > div:visited {
  color: #888;
  background-color: transparent;
}
#calendarHidden a:hover {
  opacity: 0.5;
}
#calendarHidden div.date-1,
#calendarHidden a.date-1.unseen {
  background-color: #97BA51;
}
#calendarHidden div.date-2,
#calendarHidden a.date-2.unseen {
  background-color: #193838;
}
#calendarHidden div.date-3,
#calendarHidden a.date-3.unseen {
  background-color: #57751D;
}
#calendarHidden div.date-4,
#calendarHidden a.date-4.unseen {
  background-color: #48A5A5;
}
#calendarHidden div.date-5,
#calendarHidden a.date-5.unseen {
  background-color: #510A0A;
}
#calendarHidden div.date-6,
#calendarHidden a.date-6.unseen {
  background-color: #7D1F1F;
}
#calendarHidden div.date-7,
#calendarHidden a.date-7.unseen {
  background-color: #BE6F6F;
}
#calendarHidden div.date-8,
#calendarHidden a.date-8.unseen {
  background-color: #BE5353;
}
#calendarHidden div.date-9,
#calendarHidden a.date-9.unseen {
  background-color: #475826;
}
#calendarHidden div.date-10,
#calendarHidden a.date-10.unseen {
  background-color: #134B4B;
}
#calendarHidden div.date-11,
#calendarHidden a.date-11.unseen {
  background-color: #61A5A5;
}
#calendarHidden div.date-12,
#calendarHidden a.date-12.unseen {
  background-color: #5E2929;
}
#calendarHidden div.date-13,
#calendarHidden a.date-13.unseen {
  background-color: #063131;
}
#calendarHidden div.date-14,
#calendarHidden a.date-14.unseen {
  background-color: #364C09;
}
#calendarHidden div.date-15,
#calendarHidden a.date-15.unseen {
  background-color: #A0BA6D;
}
#calendarHidden div.date-16,
#calendarHidden a.date-16.unseen {
  background-color: #BE6F6F;
}
#calendarHidden div.date-17,
#calendarHidden a.date-17.unseen {
  background-color: #063131;
}
#calendarHidden div.date-18,
#calendarHidden a.date-18.unseen {
  background-color: #57751D;
}
#calendarHidden div.date-19,
#calendarHidden a.date-19.unseen {
  background-color: #5E2929;
}
#calendarHidden div.date-20,
#calendarHidden a.date-20.unseen {
  background-color: #364C09;
}
#calendarHidden div.date-21,
#calendarHidden a.date-21.unseen {
  background-color: #48A5A5;
}
#calendarHidden div.date-22,
#calendarHidden a.date-22.unseen {
  background-color: #475826;
}
#calendarHidden div.date-23,
#calendarHidden a.date-23.unseen {
  background-color: #7D1F1F;
}
#calendarHidden div.date-24,
#calendarHidden a.date-24.unseen {
  background-color: #193838;
}
#calendarHidden div.date-25,
#calendarHidden a.date-25.unseen {
  background-color: #BE5353;
}
#calendarHidden div.date-26,
#calendarHidden a.date-26.unseen {
  background-color: #A0BA6D;
}
#calendarHidden div.date-27,
#calendarHidden a.date-27.unseen {
  background-color: #61A5A5;
}
#calendarHidden div.date-28,
#calendarHidden a.date-28.unseen {
  background-color: #97BA51;
}
#calendarHidden div.date-29,
#calendarHidden a.date-29.unseen {
  background-color: #510A0A;
}
#calendarHidden div.date-30,
#calendarHidden a.date-30.unseen {
  background-color: #134B4B;
}
@media (min-width: 711px) {
  #calendarHidden {
    grid-template-columns: repeat(6, 1fr);
    background: #888 url('/images/adventBkgd/Tangerines.jpg') no-repeat center center;
  }
  #calendarHidden > a,
  #calendarHidden > div {
    padding-bottom: 2em;
  }
  #calendarHidden > a.date-1,
  #calendarHidden > div.date-1 {
    grid-area: 4 / 2;
  }
  #calendarHidden > a.date-2,
  #calendarHidden > div.date-2 {
    grid-area: 5 / 5;
  }
  #calendarHidden > a.date-3,
  #calendarHidden > div.date-3 {
    grid-area: 5 / 3;
  }
  #calendarHidden > a.date-4,
  #calendarHidden > div.date-4 {
    grid-area: 1 / 1;
  }
  #calendarHidden > a.date-5,
  #calendarHidden > div.date-5 {
    grid-area: 4 / 5;
  }
  #calendarHidden > a.date-6,
  #calendarHidden > div.date-6 {
    grid-area: 3 / 4;
  }
  #calendarHidden > a.date-7,
  #calendarHidden > div.date-7 {
    grid-area: 3 / 5 / 4 / 7;
  }
  #calendarHidden > a.date-8,
  #calendarHidden > div.date-8 {
    grid-area: 1 / 2;
  }
  #calendarHidden > a.date-9,
  #calendarHidden > div.date-9 {
    grid-area: 3 / 3;
  }
  #calendarHidden > a.date-10,
  #calendarHidden > div.date-10 {
    grid-area: 5 / 1 / 6 / 3;
  }
  #calendarHidden > a.date-11,
  #calendarHidden > div.date-11 {
    grid-area: 4 / 6;
  }
  #calendarHidden > a.date-12,
  #calendarHidden > div.date-12 {
    grid-area: 2 / 6;
  }
  #calendarHidden > a.date-13,
  #calendarHidden > div.date-13 {
    grid-area: 4 / 1;
  }
  #calendarHidden > a.date-14,
  #calendarHidden > div.date-14 {
    grid-area: 1 / 3;
  }
  #calendarHidden > a.date-15,
  #calendarHidden > div.date-15 {
    grid-area: 1 / 5 / 3 / 6;
  }
  #calendarHidden > a.date-16,
  #calendarHidden > div.date-16 {
    grid-area: 3 / 2;
  }
  #calendarHidden > a.date-17,
  #calendarHidden > div.date-17 {
    grid-area: 1 / 6;
  }
  #calendarHidden > a.date-18,
  #calendarHidden > div.date-18 {
    grid-area: 2 / 4;
  }
  #calendarHidden > a.date-19,
  #calendarHidden > div.date-19 {
    grid-area: 2 / 2 / 3 / 4;
  }
  #calendarHidden > a.date-20,
  #calendarHidden > div.date-20 {
    grid-area: 2 / 1 / 4 / 2;
  }
  #calendarHidden > a.date-21,
  #calendarHidden > div.date-21 {
    grid-area: 4 / 4 / 6 / 5;
  }
  #calendarHidden > a.date-22,
  #calendarHidden > div.date-22 {
    grid-area: 5 / 6;
  }
  #calendarHidden > a.date-23,
  #calendarHidden > div.date-23 {
    grid-area: 4 / 3;
  }
  #calendarHidden > a.date-24,
  #calendarHidden > div.date-24 {
    grid-area: 1 / 4;
  }
  @supports not (display: grid) {
    #calendarHidden > a[class*="date-"],
    #calendarHidden > div[class*="date-"] {
      display: block;
      width: 16%;
      float: left;
    }
  }
}
@media (max-width: 711px) {
  #calendarHidden {
    grid-template-columns: repeat(5, 1fr);
    background: #888 url('/images/adventBkgd/GluehwienInSnow.jpg') no-repeat center center;
  }
  #calendarHidden .date-4 {
    grid-area: 1 / 1;
  }
  #calendarHidden .date-8 {
    grid-area: 1 / 2;
  }
  #calendarHidden .date-14 {
    grid-area: 1 / 3;
  }
  #calendarHidden .date-24 {
    grid-area: 1 / 4;
  }
  #calendarHidden .date-15 {
    grid-area: 1 / 5;
  }
  #calendarHidden .date-17 {
    grid-area: 2 / 1;
  }
  #calendarHidden .date-20 {
    grid-area: 2 / 2;
  }
  #calendarHidden .date-19 {
    grid-area: 2 / 3;
  }
  #calendarHidden .date-18 {
    grid-area: 2 / 4;
  }
  #calendarHidden .date-12 {
    grid-area: 2 / 5;
  }
  #calendarHidden .date-16 {
    grid-area: 3 / 1;
  }
  #calendarHidden .date-9 {
    grid-area: 3 / 2;
  }
  #calendarHidden .date-6 {
    grid-area: 3 / 4;
  }
  #calendarHidden .date-7 {
    grid-area: 3 / 5;
  }
  #calendarHidden .date-13 {
    grid-area: 4 / 1;
  }
  #calendarHidden .date-1 {
    grid-area: 4 / 2;
  }
  #calendarHidden .date-23 {
    grid-area: 4 / 3;
  }
  #calendarHidden .date-21 {
    grid-area: 4 / 4;
  }
  #calendarHidden .date-5 {
    grid-area: 4 / 5;
  }
  #calendarHidden .date-11 {
    grid-area: 5 / 1;
  }
  #calendarHidden .date-10 {
    grid-area: 5 / 2;
  }
  #calendarHidden .date-3 {
    grid-area: 5 / 3;
  }
  #calendarHidden .date-2 {
    grid-area: 5 / 4;
  }
  #calendarHidden .date-22 {
    grid-area: 5 / 5;
  }
}
@media (max-width: 592px) {
  #calendarHidden {
    grid-template-columns: repeat(4, 1fr);
  }
  #calendarHidden .date-4 {
    grid-area: 1 / 1;
  }
  #calendarHidden .date-8 {
    grid-area: 1 / 2;
  }
  #calendarHidden .date-14 {
    grid-area: 1 / 3;
  }
  #calendarHidden .date-24 {
    grid-area: 1 / 4;
  }
  #calendarHidden .date-15 {
    grid-area: 2 / 1;
  }
  #calendarHidden .date-17 {
    grid-area: 2 / 2;
  }
  #calendarHidden .date-20 {
    grid-area: 2 / 3;
  }
  #calendarHidden .date-19 {
    grid-area: 2 / 4;
  }
  #calendarHidden .date-18 {
    grid-area: 3 / 1;
  }
  #calendarHidden .date-12 {
    grid-area: 3 / 2;
  }
  #calendarHidden .date-16 {
    grid-area: 3 / 3;
  }
  #calendarHidden .date-9 {
    grid-area: 3 / 4;
  }
  #calendarHidden .date-6 {
    grid-area: 4 / 1;
  }
  #calendarHidden .date-7 {
    grid-area: 4 / 2;
  }
  #calendarHidden .date-13 {
    grid-area: 4 / 3;
  }
  #calendarHidden .date-1 {
    grid-area: 4 / 4;
  }
  #calendarHidden .date-23 {
    grid-area: 5 / 1;
  }
  #calendarHidden .date-21 {
    grid-area: 5 / 2;
  }
  #calendarHidden .date-5 {
    grid-area: 5 / 3;
  }
  #calendarHidden .date-11 {
    grid-area: 5 / 4;
  }
  #calendarHidden .date-10 {
    grid-area: 6 / 1;
  }
  #calendarHidden .date-3 {
    grid-area: 6 / 2;
  }
  #calendarHidden .date-2 {
    grid-area: 6 / 3;
  }
  #calendarHidden .date-22 {
    grid-area: 6 / 4;
  }
}
@media (max-width: 435px) {
  #calendarHidden {
    grid-template-columns: repeat(3, 1fr);
  }
  #calendarHidden .date-4 {
    grid-area: 1 / 1;
  }
  #calendarHidden .date-8 {
    grid-area: 1 / 2;
  }
  #calendarHidden .date-14 {
    grid-area: 1 / 3;
  }
  #calendarHidden .date-24 {
    grid-area: 2 / 1;
  }
  #calendarHidden .date-15 {
    grid-area: 2 / 2;
  }
  #calendarHidden .date-17 {
    grid-area: 2 / 3;
  }
  #calendarHidden .date-20 {
    grid-area: 3 / 1;
  }
  #calendarHidden .date-19 {
    grid-area: 3 / 2;
  }
  #calendarHidden .date-18 {
    grid-area: 3 / 3;
  }
  #calendarHidden .date-12 {
    grid-area: 4 / 1;
  }
  #calendarHidden .date-16 {
    grid-area: 4 / 2;
  }
  #calendarHidden .date-9 {
    grid-area: 4 / 3;
  }
  #calendarHidden .date-6 {
    grid-area: 5 / 1;
  }
  #calendarHidden .date-7 {
    grid-area: 5 / 2;
  }
  #calendarHidden .date-13 {
    grid-area: 5 / 3;
  }
  #calendarHidden .date-1 {
    grid-area: 6 / 1;
  }
  #calendarHidden .date-23 {
    grid-area: 6 / 2;
  }
  #calendarHidden .date-21 {
    grid-area: 6 / 3;
  }
  #calendarHidden .date-5 {
    grid-area: 7 / 1;
  }
  #calendarHidden .date-11 {
    grid-area: 7 / 2;
  }
  #calendarHidden .date-10 {
    grid-area: 7 / 3;
  }
  #calendarHidden .date-3 {
    grid-area: 8 / 1;
  }
  #calendarHidden .date-2 {
    grid-area: 8 / 2;
  }
  #calendarHidden .date-22 {
    grid-area: 8 / 3;
  }
}
@media (max-width: 335px) {
  #calendarHidden {
    grid-template-columns: repeat(2, 1fr);
  }
  #calendarHidden .date-4 {
    grid-area: 1 / 1;
  }
  #calendarHidden .date-8 {
    grid-area: 1 / 2;
  }
  #calendarHidden .date-14 {
    grid-area: 2 / 1;
  }
  #calendarHidden .date-24 {
    grid-area: 2 / 2;
  }
  #calendarHidden .date-15 {
    grid-area: 3 / 1;
  }
  #calendarHidden .date-17 {
    grid-area: 3 / 2;
  }
  #calendarHidden .date-20 {
    grid-area: 4 / 1;
  }
  #calendarHidden .date-19 {
    grid-area: 4 / 2;
  }
  #calendarHidden .date-18 {
    grid-area: 5 / 1;
  }
  #calendarHidden .date-12 {
    grid-area: 5 / 2;
  }
  #calendarHidden .date-16 {
    grid-area: 6 / 1;
  }
  #calendarHidden .date-9 {
    grid-area: 6 / 2;
  }
  #calendarHidden .date-6 {
    grid-area: 7 / 1;
  }
  #calendarHidden .date-7 {
    grid-area: 7 / 2;
  }
  #calendarHidden .date-13 {
    grid-area: 8 / 1;
  }
  #calendarHidden .date-1 {
    grid-area: 8 / 2;
  }
  #calendarHidden .date-23 {
    grid-area: 9 / 1;
  }
  #calendarHidden .date-21 {
    grid-area: 9 / 2;
  }
  #calendarHidden .date-5 {
    grid-area: 10 / 1;
  }
  #calendarHidden .date-11 {
    grid-area: 10 / 2;
  }
  #calendarHidden .date-10 {
    grid-area: 11 / 1;
  }
  #calendarHidden .date-3 {
    grid-area: 11 / 2;
  }
  #calendarHidden .date-2 {
    grid-area: 12 / 1;
  }
  #calendarHidden .date-22 {
    grid-area: 12 / 2;
  }
}
/* Individual day pages of the calendar */
.adventDay {
  display: grid;
  grid-gap: 0.75em;
  gap: 0.75em;
  grid-template-areas: "main" "art" "recipe" "niftyness";
}
.adventDay > .theDay {
  grid-area: main;
}
.adventDay > .theRecipe {
  grid-area: recipe;
}
.adventDay > .theLink {
  grid-area: niftyness;
}
.adventDay > .theRecipe > h2,
.adventDay > .theLink > h2 {
  text-align: right;
  font-size: 90%;
}
.adventDay > .thePhoto {
  grid-area: art;
}
.adventDay > .thePhoto > * {
  margin: 0px;
  padding: 0px;
}
@media (max-width: 767px) {
  .adventDay {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "recipe" "niftyness" "art";
  }
}
@media (min-width: 768px) {
  .adventDay {
    grid-template-columns: 3fr 2fr 2fr;
    grid-template-areas: "main  recipe    art" "main  niftyness art";
  }
  .adventDay.wide {
    grid-template-areas: "main  recipe niftyness" "main  art    art";
  }
}
@supports not (display: grid) {
  .adventDay * {
    display: block;
  }
  .adventDay .thePhoto {
    display: none;
  }
  .adventDay .theDay {
    width: 50%;
    float: left;
  }
  .adventDay .theLink,
  .adventDay .theRecipe {
    width: 23%;
    float: right;
    margin-left: 0.75em;
  }
  @media (max-width: 767px) {
    .adventDay .theDay,
    .adventDay .theLink,
    .adventDay .theRecipe {
      float: none;
      width: 100%;
      margin-left: 0px;
    }
  }
}
table#calendar th {
  color: #A0BA6D;
  background-color: #364C09;
}
table#calendar td {
  font-size: 42pt;
  text-align: right;
  text-shadow: #FFF 0px 0px 8px;
  vertical-align: top;
  padding-bottom: 1em;
  color: #364C09;
}
table#calendar td.blank {
  background-color: #364C09;
  opacity: 1;
}
table#calendar td.future {
  border: 1px solid #A0BA6D;
}
table#calendar td a:link,
table#calendar td a:visited {
  color: #510A0A;
  opacity: 1;
}
#byline {
  font-weight: bold;
  margin-top: -5 px;
  /* Fscking bootstrap */
}
#byline a {
  font-weight: normal;
  font-style: italic;
}
/** itsAllAboutTheFood **/
ol.countdown {
  list-style-type: none;
}
ol.countdown > li {
  counter-increment: start-from -1;
  padding-top: 3em;
}
ol.countdown > li:before {
  content: counter(start-from) " ... ";
  font-family: 'Mr De Haviland', 'Edwardian Script ITC', cursive;
  color: #134B4B;
  font-size: 300%;
}
* html ol.countdown {
  list-style-type: decimal;
}
* + html ol.countdown {
  list-style-type: decimal;
}
.cursive {
  font-family: 'Mr De Haviland', 'Edwardian Script ITC', cursive;
}
.large {
  font-size: 300%;
  padding: 3em 0;
}
.menu {
  text-align: center;
  font-family: 'Mr De Haviland', 'Edwardian Script ITC', cursive;
}
td.time {
  vertical-align: top;
  text-align: right;
}
td.action {
  vertical-align: top;
}
/**
ol.countdown {
    counter-increment: -1;
}

 <!--
      var ol = document.getElementById("reverse");
      var lis = ol.getElementsByTagName("li");
      for (var i = 1; i <= lis.length; i++)
        lis[lis.length-i].value = i;
      ol.style.listStyleType = "decimal";
    //-->
  </script>
There seem to be some properties in drafts of CSS3 that will allow box layouts from bottom to top, but not much useful otherwise.
 Reply With Quote Reply With Quote  Share on Google+
**/
@media (max-width: 767px) {
  body {
    font-size: 12pt;
  }
  h2 {
    font-size: 15pt;
  }
  h3 {
    font-size: 14pt;
  }
  header {
    margin-top: 0.5em;
  }
  header > h1 {
    margin-bottom: 0.5em;
  }
  header > h1 > span.subtitle {
    display: none;
  }
  /* Advent calendar */
  table#calendar tr > td {
    font-size: 24pt;
  }
  /* Recipe categories */
  ul#meta > li {
    display: inline;
  }
  ul#meta a.category {
    display: none;
  }
}
/**  **/
table.striped tr:nth-child(odd) {
  background-color: #A0BA6D;
}
table.striped th {
  width: 20%;
}
table.striped th:nth-child(4) {
  width: 40%;
}
table tr:nth-child(odd) {
  background-color: #A0BA6D;
}
table th {
  width: 20%;
}
table th:nth-child(4) {
  width: 40%;
}
table tr {
  border-bottom: #364C09 1 px solid;
}
table th {
  font-weight: bold;
  text-align: center;
  vertical-align: bottom;
  color: #364C09;
  padding: 0.5em;
}
table td {
  text-align: left;
  vertical-align: top;
  padding: 0.5em;
}
#Cocktails101 main {
  /*
    display: grid;
    gap: 0px;
    grid-template-columns: 2fr 1fr;
 */
}
@media (max-width: 767px) {
  #Cocktails101 main {
    grid-template-columns: 1fr;
  }
}
#Cocktails101 sidebar {
  display: block;
  width: 33%;
  border-top: 5px solid #57751D;
  border-bottom: 5px solid #57751D;
  float: right;
  margin-bottom: 1em;
  margin-top: 1em;
  margin-left: 1em;
}
#Cocktails101 td.cocktail_name {
  font-weight: bold;
}
/*
 * Used on the index page of Baking101 to give a bit more visual interest.
 */
.boxes {
  display: grid;
  grid-gap: 0.75em;
  gap: 0.75em;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 374px) {
  .boxes {
    grid-template-columns: 1fr;
  }
}
.boxes > section {
  border: 1px solid #7D1F1F;
  border-radius: 5px;
  margin: 0px;
  padding: 0px;
}
.boxes > section > * {
  margin: 0px;
  padding: 0.75em;
}
.boxes > section > h2 {
  color: #FFF;
  background-color: #7D1F1F;
}
.boxes > section > h2 > a {
  color: #FFF;
  text-decoration: none;
}
/*
 * Pages of links to interesting stuff
 */
.colorBlock {
  margin: 0em;
  padding: 0em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (min-width: 1200px) {
  .colorBlock {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 374px) {
  .colorBlock {
    grid-template-columns: 1fr;
  }
}
.colorBlock section {
  padding: 0.75em;
}
.colorBlock section *,
.colorBlock section a,
.colorBlock section a:hover,
.colorBlock section a:visited {
  color: #FFF !important;
}
.colorBlock section:nth-child(1) {
  background-color: #BE6F6F;
}
.colorBlock section:nth-child(2) {
  background-color: #134B4B;
}
.colorBlock section:nth-child(3) {
  background-color: #364C09;
}
.colorBlock section:nth-child(4) {
  background-color: #063131;
}
.colorBlock section:nth-child(5) {
  background-color: #7D1F1F;
}
.colorBlock section:nth-child(6) {
  background-color: #A0BA6D;
}
.colorBlock section:nth-child(7) {
  background-color: #57751D;
}
.colorBlock section:nth-child(8) {
  background-color: #61A5A5;
}
.colorBlock section:nth-child(9) {
  background-color: #510A0A;
}
.colorBlock section:nth-child(10) {
  background-color: #134B4B;
}
.colorBlock section:nth-child(11) {
  background-color: #364C09;
}
.colorBlock section:nth-child(12) {
  background-color: #BE6F6F;
}
.colorBlock section:nth-child(13) {
  background-color: #A0BA6D;
}
.colorBlock section:nth-child(14) {
  background-color: #063131;
}
.colorBlock section:nth-child(15) {
  background-color: #7D1F1F;
}
.colorBlock section:nth-child(16) {
  background-color: #510A0A;
}
.colorBlock section:nth-child(17) {
  background-color: #57751D;
}
.colorBlock section:nth-child(18) {
  background-color: #61A5A5;
}
.colorBlock section.image {
  padding: 0px !important;
}
.colorBlock section.image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: unset;
}
.colorBlock section h1,
.colorBlock section h2 {
  margin-top: 0px;
  font: 200% 'Mr De Haviland', 'Edwardian Script ITC', cursive;
}
.colorBlock section a {
  font: italic bold 110% "New York", Georgia, serif;
}
@supports not (display: grid) {
  .colorBlock section {
    display: block;
    width: 372px;
    height: 496px;
    overflow: hidden;
    float: left;
  }
}
/** Disasters **/
.disasterSubmitter {
  font-weight: bold;
  color: #57751D;
}
.disasterEntry {
  border-bottom: 2px dotted #364C09;
  padding-bottom: 1em;
  margin-bottom: 1em;
  -webkit-columns: auto 18em;
     -moz-columns: auto 18em;
          columns: auto 18em;
  -webkit-column-gap: 0.75em;
     -moz-column-gap: 0.75em;
          column-gap: 0.75em;
}
.disasterEntry h2 {
  -webkit-column-span: all;
     -moz-column-span: all;
          column-span: all;
}
.disasterEntry h2 + p {
  margin-top: 0px;
}
#recipePage {
  display: grid;
  grid-gap: 0.75em;
  gap: 0.75em;
  grid-template-columns: 1fr 2fr 1fr;
}
#recipePage ul#meta {
  margin: 0px;
  margin-top: 0.5em;
  padding: 0px;
}
#recipePage ul#meta > li {
  display: block;
  /* removes the ball */
  line-height: 2em;
}
#recipePage ul#meta a {
  color: #FFF;
  font-weight: bold;
  background-color: #364C09;
  border: 1px #A0BA6D solid;
  padding: 0.25em;
}
#recipePage ul#meta a.category {
  background-color: #A0BA6D;
  color: #364C09;
  border: 1px #364C09 solid;
  white-space: nowrap;
}
#recipePage a#altMeasure {
  color: #BE6F6F;
  font-size: 0.5em;
}
@media (max-width: 767px) {
  #recipePage {
    grid-template-columns: 1fr;
  }
  #recipePage #history {
    display: none;
  }
}
body.listing header,
body.listing footer {
  background: #7D1F1F url('/images/1200w/FamilyRecipes.jpg') no-repeat center top;
}
#categoryListing {
  -webkit-columns: auto 18em;
     -moz-columns: auto 18em;
          columns: auto 18em;
  -webkit-column-gap: 0.75em;
     -moz-column-gap: 0.75em;
          column-gap: 0.75em;
}
/* @import 'logo'; **/
form label {
  font-weight: bold;
}
form fieldset {
  maxwidth: 600px;
}
#flour-converter fieldset {
  border: none;
}
#flour-converter fieldset legend {
  font-size: 16pt;
  line-height: 1.2em;
  font-weight: bold;
  font-family: "New York", Georgia, serif;
  color: #7D1F1F;
}
/** Printing! **/
@media print {
  header,
  footer,
  #bottomNav,
  .navbar {
    display: none;
  }
  body {
    font-size: 10pt;
    line-height: 1.1em;
  }
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}