@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Oldenburg');
#aside-ham  { display: none; }
#navigation { border-bottom: none; }
#navigation a i { font-size: 2em; }
#navigation a label { font-size: 1rem; }
.nav-select { display:none; }
section strong { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1.7rem 0; padding-top: 0.85rem; }
header  { height:3.2rem; padding: 0 1rem; background-color: #191919; }
ul.menu { margin: 0; }
article section.page { max-width: 1920px; }
article section.page p { padding: 0 2rem; }
article section.page ul { padding: 0 2.5rem; }
article section.page hr {
  border: 0;
  height: 45px;
  margin: 4rem 0;
  background: url(/images/dice.png) no-repeat center center;
  background-size: auto 45px;
}
article section.page li > ul { padding: 0 0 0 1.5rem; }
article section.page h1:first-of-type, html { font-family: 'Libre Baskerville', serif; }
article section.page h1:first-of-type { font-weight: 700; }
article section.page img.resized { max-width:70%; height:auto; }
article section.page table { width: 80%; margin: 0 auto 2rem auto; }
article > aside {
  background-color: rgba(249,249,249,0.6);
  -webkit-box-shadow: 1px 0px 10px 1px rgba(51,51,51,0.2);
  -moz-box-shadow: 1px 1px 10px 1px rgba(51,51,51,0.2);
  box-shadow: 1px 1px 10px 1px rgba(51,51,51,0.2);
  width: 18rem;
}
article > aside .menu > .dd-item { margin: 0.5rem 0px 0.5rem 10px; }
article > aside .menu .dd-item.active > div * { border-bottom: none; }
article section.page h2 { margin: 2rem 0; padding: 1rem 0; }
article section.page { margin: 0 0rem 0 18rem; padding: 2rem 4rem; }
article > aside,
article > section.page {
  -moz-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  display: block;
}
article.mobile-open > aside {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
article.mobile-open > section.page {
  -webkit-transform: translate3d(260px, 0, 0);
  -moz-transform: translate3d(260px, 0, 0);
  -o-transform: translate3d(260px, 0, 0);
  transform: translate3d(260px, 0, 0);
}
article, footer {
  background-image: url(/images/linedpaper.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
}
footer {
  margin: 0;
  padding: 1rem 4rem 1rem 22rem;
}
footer .footline {
  font-size: xx-small;
  opacity: 50%;
}
blockquote, p { text-align: justify; }
blockquote {
  background:  #f9f9f9;
  border-left: 10px solid #eee;
  margin:      1.5rem 2rem;
  padding:     2rem 1.5rem;
  quotes:      "\201C""\201D""\2018""\2019";
}
blockquote:before {
  font-family:    serif;
  font-weight:    bold;
  content:        open-quote;
  font-size:      4rem;
  line-height:    0.1rem;
  margin-right:   0.25rem;
  vertical-align: -1.25rem;
}
blockquote p { display: inline; }

article section.page .stat-block {
  max-width: 640px;
  margin: 2em auto;
  background: #FDF1DC;
  text-align: left;
  vertical-align: top;
  padding: 5px 10px 20px;
  box-shadow: 0 0 1.5em #867453;
}
article section.page .stat-block ul strong {
  color: #7A200D;
  font-style: normal;
}
article section.page .stat-block strong { font-style: italic; }
article section.page .stat-block .creature-properties { margin: 1.7rem 0; }
article section.page .stat-block .creature-properties p { margin: 0.75rem 0; }
article section.page .stat-block li {
  padding-left: 0.5em;
  line-height: 1.4em;
}
article section.page .stat-block li ul {
  list-style-type: disc;
  padding: 0 1rem;
}
article section.page .stat-block hr.block-border {
  background: #E69A28;
  border: 1px solid #000;
  height: 5px;
  padding: 0 10px 0;
  margin: -10px -10px 0;
  box-sizing: initial;
}
article section.page .stat-block hr.block-border.bottom {
  margin: 15px -10px -20px;
}
article section.page .stat-block hr {
  background: linear-gradient(100deg, #922610, #FDF1DC);
  height: 5px;
  margin: 1em;
}
article section.page .stat-block .creature-title {
  color: #922610;
  font-size: 1.70em;
  line-height: 1.2em;
  margin: .75em 0 0;
  letter-spacing: 1px;
  font-variant: small-caps;
  font-weight: bold;
}
article section.page .stat-block .creature-subtitle {
  font-style: italic;
  font-size: .85em;
  line-height: 1.2em;
  margin: 0 0 .75px;
}
article section.page .stat-block table {
  width: auto;
  margin: .75rem auto;
  border: none;
  font-family: Helvetica, Arial, sans-serif;
}
article section.page .stat-block th {
  background: transparent;
  text-transform: capitalize;
  text-align: left;
  border: none;
}
article section.page .stat-block td {
  border: none;
  font-size: 0.90em;
  padding: 0.25rem 0.5rem;
}
article section.page .stat-block tr:nth-child(odd) { background: #D4EBB6; }
article section.page .stat-block tr:nth-child(even),
article section.page .stat-block thead > tr { background: transparent !important; }

article section.page .image-legend {
  display: block;
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
  margin-top: -2rem;
}

@media (max-width: 768px) {
  #aside-ham  { display: inline-block; padding: 0 1rem 0 0; font-size: 125%; }
  span.anchor { display: none; }
  article section.page { -webkit-overflow-scrolling: touch; margin: 0; padding: 2rem; }
  article section.page table { width: 100%; }
  article > aside {
    -webkit-transform: translate3d(-260px, 0, 0);
    -moz-transform: translate3d(-260px, 0, 0);
    -o-transform: translate3d(-260px, 0, 0);
    transform: translate3d(-260px, 0, 0);
  }
}
@media (max-width: 640px) {
  h1, article section.page h1:first-of-type { margin: 2rem 0rem; font-size: 2.5rem; line-height: 2.5rem; }
  h1,h2,h3,h4 { padding-top:0; line-height: 3rem; margin: 0 0 1rem 0; }
  h2 { font-size: 2.15rem; }
  h3 { font-size: 1.8rem;  }
  h4 { font-size: 1.4rem;  }
  h5 { font-size: 0.9rem;  }
  h6 { font-size: 0.5rem;  }
  article section.page p { padding: 0 .25rem; }
  article section.page ul { padding: 0 1rem 0 2rem; }
  article section.page hr { margin: 2rem 0; }
  article section.page img.resized { max-width: 90%; }
  article section.page table { width: 100%; margin: 0 2em 0 0; }
  article section.page table td { font-size: 0.85em; }
  article section.page table th { font-size: 0.75em; }
  article section.page { -webkit-overflow-scrolling: touch; margin: 0; padding: 1rem; }
  article section.page h2 { margin: 0; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background-color: #191919; color: #DDD; }
  #navigation {
    margin-top: 3rem;
    border-top: 1px solid #191919;
  }
  #navigation a { color: #1A1A1A; }
  section a, .anchor, .anchor:hover { color: #D67F46; }

  article section.page h1:first-of-type { color: #F9F9F9; }
  article > aside { background-color: rgba(6,6,6,0.6); }
  article, footer { background-image: url(/images/linedpaper-dark.jpg); }
  article > aside {
    -webkit-box-shadow: 1px 0px 10px 1px rgba(84,84,84,0.2);
    -moz-box-shadow: 1px 1px 10px 1px rgba(84,84,84,0.2);
    box-shadow: 1px 1px 10px 1px rgba(84,84,84,0.2);
  }
  article section.page hr { filter:invert(1); }
  article > aside .menu .dd-item.active > div { background-color: #111; }
  article > aside .menu .dd-item li { border-left: 1px solid #111; }
  article > aside .menu .dd-item div i.category-icon:active, article > aside .menu .dd-item div i.category-icon:focus, article > aside .menu .dd-item div i.category-icon:hover,
  article > aside .menu .dd-item div a:hover, article > aside .menu .dd-item div a:focus, article > aside .menu .dd-item div a:active { background-color: #111; }
  article.mobile-open > aside { background-color: #060606; }
  article.mobile-open > section.page,
  article.mobile-open > section.page > * { background-color: inherit; }
  article section.page table { border: 1px solid #222; }
  article section.page table th { background: #111; border-bottom: 2px solid #1A1A1A; color: #fff; }
  article section.page table td { border-bottom: 1px solid #1A1A1A; border: 1px solid #222; color: #CDCDCD; }

  blockquote {
    background: #101010;
    border-left: 10px solid #1A1A1A;
  }

  article section.page .stat-block {
    background: #000116;
    box-shadow: 0 0 1.5em #202035;
  }
  article section.page .stat-block hr.block-border {
    background: #1965D7;
  }
  article section.page .stat-block hr {
    background: linear-gradient(100deg, #6DD9EF, #000116);
    border-color: transparent;
    filter: none;
  }
  article section.page .stat-block .creature-title { color: #6DD9EF; }
  article section.page .stat-block ul strong { color: #85DFF2; }
  article section.page .stat-block tr:nth-child(odd) { background: #2B1449; }
}