@import url('fontawesome/css/all.min.css');

/******** Color Variables ********/

@accent-color: #58180d;
@link-color-standard: #33CC80;
@link-color-page: #33CC80;
@link-color-monster: #bc0f0e;
@link-color-spell: #532bca;
@link-color-item: #105a92;
@link-color-roll: #d77e20;
@foreground-color: #000000;
@link-blue: #105a92;
@link-green: #099d43;
@link-red: #9d0e09;
@link-yellow: #d77e20;
@link-neutral: #631d07;
@link-gray: #535353;
@link-purple: #551092;
@link-black: #000000;
@green-background-secondary: #e0e4c3;
@blue-background-secondary: #c3d3e4;
@purple-background-secondary: #cec3e4;
@red-background-secondary: #e4c3c3;
@yellow-background-secondary: #e4e1c3;
@gray-background-secondary: #d4d4d4;
@neutral-background-primary: #edebe8;
@neutral-background-secondary: #d8d6d2;
@statblock-background-blue: #e5edf4;
@statblock-title-color-blue: #105a92;
@statblock-subtitle-color-blue: #0d3e7a;
@statblock-border-top-bottom-blue: #7c9eba;
@statblock-background-green: #e4f5eb;
@statblock-title-color-green: #099d43;
@statblock-subtitle-color-green: #068347;
@statblock-border-top-bottom-green: #78bf94;
@statblock-background-red: #f5e4e4;
@statblock-title-color-red: #9d0e09;
@statblock-subtitle-color-red: #831a06;
@statblock-border-top-bottom-red: #bf7a78;
@statblock-background-yellow: #f7f1ed;
@statblock-title-color-yellow: #d77e20;
@statblock-subtitle-color-yellow: #dd712f;
@statblock-border-top-bottom-yellow: #cdb4a5;
@statblock-background-gray: #ededed;
@statblock-title-color-gray: #535353;
@statblock-subtitle-color-gray: #454545;
@statblock-border-top-bottom-gray: #9c9c9c;
@statblock-background-neutral: #edebe8;
@statblock-title-color-neutral: #631d07;
@statblock-subtitle-color-neutral: #75240b;
@statblock-border-top-bottom-neutral: #bda099;
@statblock-background-purple: #ede5f4;
@statblock-title-color-purple: #551092;
@statblock-subtitle-color-purple: #470d7a;
@statblock-border-top-bottom-purple: #9b7cba;

@font-face {
  font-family: 'Andada SC';
  src: data-uri('../font/AndadaSC-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Andada SC';
  src: data-uri('../font/AndadaSC-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Andada SC';
  src: data-uri('../font/AndadaSC-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Andada SC';
  src: data-uri('../font/AndadaSC-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Solbera Imitation';
  src: data-uri('../font/Solbera-Imitation.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Zatanna Misdirection';
  src: data-uri('../font/Zatanna-Misdirection.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Zatanna Misdirection';
  src: data-uri('../font/Zatanna-Misdirection-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Zatanna Misdirection';
  src: data-uri('../font/Zatanna-Misdirection-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Zatanna Misdirection';
  src: data-uri('../font/Zatanna-Misdirection-Bold-Italic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Bookinsanity Remake';
  src: data-uri('../font/Bookinsanity.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bookinsanity Remake';
  src: data-uri('../font/Bookinsanity-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Bookinsanity Remake';
  src: data-uri('../font/Bookinsanity-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Bookinsanity Remake';
  src: data-uri('../font/Bookinsanity-Bold-Italic.ttf');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Dungeon Drop Case';
  src: data-uri('../font/Dungeon-Drop-Case.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Mr Eaves SC Remake';
  src: data-uri('../font/Mr-Eaves-Small-Caps.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nodesto Caps Condensed';
  src: data-uri('../font/Nodesto-Caps-Condensed.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nodesto Caps Condensed';
  src: data-uri('../font/Nodesto-Caps-Condensed-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Nodesto Caps Condensed';
  src: data-uri('../font/Nodesto-Caps-Condensed-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Nodesto Caps Condensed';
  src: data-uri('../font/Nodesto-Caps-Condensed-Bold-Italic.ttf');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Scaly Sans Remake';
  src: data-uri('../font/Scaly-Sans-Bold-Italic.ttf');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Scaly Sans Remake';
  src: data-uri('../font/Scaly-Sans-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Scaly Sans Remake';
  src: data-uri('../font/Scaly-Sans-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Scaly Sans Remake';
  src: data-uri('../font/Scaly-Sans.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Scaly Sans Caps';
  src: data-uri('../font/Scaly-Sans-Caps-Bold-Italic.ttf');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Scaly Sans Caps';
  src: data-uri('../font/Scaly-Sans-Caps-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Scaly Sans Caps';
  src: data-uri('../font/Scaly-Sans-Caps-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Scaly Sans Caps';
  src: data-uri('../font/Scaly-Sans-Caps.ttf');
  font-weight: normal;
  font-style: normal;
}

@body-font-family: '-apple-system', sans-serif;
@heading-font-family: 'Andada SC', '-apple-system', sans-serif;
@flavor-font-family: 'Zatanna Misdirection', '-apple-system', sans-serif;

.andada-sc {
  font-family: 'Andada SC';
}

.solbera-imitation {
  font-family: 'Solbera Imitation';
}

.zatanna-misdirection {
  font-family: 'Zatanna Misdirection';
}

.bookinsanity-remake {
  font-family: 'Bookinsanity Remake';
}

.dungeon-drop-case {
  font-family: 'Dungeon Drop Case';
}

.mr-eaves-sc-remake {
  font-family: 'Mr Eaves SC Remake';
}

.nodesto-caps-condensed {
  font-family: 'Nodesto Caps Condensed';
}

.scaly-sans {
  font-family: 'Scaly Sans Remake';
}

.scaly-sans-caps {
  font-family: 'Scaly Sans Caps';
}

/******** Body / HTML ********/

html {
  -webkit-print-color-adjust: exact;
  font-size: 10px;
  &.catalyst {
    font-size: 13px;
  }
}

p {
  margin-block-start: 0;
  margin-block-end: 1em;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.float-left {
  float: left;
  margin-right: 1.0rem;
}

.float-right {
  float: right;
  margin-left: 1.0rem;
}

.hidden {
  display: none;
}

/******** Multi-column Div ********/

div.force-two-column,
div.two-column {
  &:not(.statblock) {
    width: 7.5in;
    position: relative;
    column-count: 2;
    column-gap: 0.25in;
    column-fill: auto;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -webkit-column-gap: 0.25in;
    -moz-column-gap: 0.25in;
  }
}

/******** Headings ********/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: @heading-font-family;
  color: @accent-color;
  font-weight: normal;
  display: block;
  padding: 0;
  margin: .5rem 0;
}

h1 {
  font-size: 3.0rem;
  line-height: 3.4rem;
  padding-bottom: .5rem;
}

h2 {
  font-size: 2.3rem;
  line-height: 2.8rem;
}

h3 {
  font-size: 2.0rem;
  border-bottom: .1rem solid @accent-color;
  line-height: 2.8rem;
  overflow: hidden;
}

h4 {
  font-size: 1.8rem;
  line-height: 2.3rem;
}

h1 + p {
  &:not(.no-fancy) {
    &::first-letter {
      font-family: 'Solbera Imitation' !important;
      font-size: 9.3rem;
      text-decoration: none;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      margin-top: -.3rem;
      padding-right: .8rem;
      float: left;
    }
  }
}

/******** Horizontal Rule ********/

hr {
  border-color: @accent-color;
  height: .1rem;
  border-bottom: .1rem solid;
}

/******** Standard Block Quote ********/

.blockquote-wrap {
  padding-top: .8rem;
  padding-bottom: .8rem;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  overflow: hidden;
  page-break-inside: avoid;
}

blockquote {
  font-family: @body-font-family !important;
  font-size: 1.3rem;
  display: block;
  background-color: @green-background-secondary;
  padding: 1.0rem 1.5rem;
  margin: 2.0rem 0;
  position: relative;
  border-top: .2rem solid black;
  border-bottom: .2rem solid black;

  p {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-position: top center, bottom center;
    width: 1.4rem;
    top: -.8rem;
    bottom: -.8rem;
    background-size: 1.4rem .7rem;
  }

  &:before {
    left: 0;
    background-image: linear-gradient(to bottom right, #fff0 0%, #fff0 50%, #000 50%, #000 100%),
      linear-gradient(to top right, #fff0 0%, #fff0 50%, #000 50%, #000 100%);
  }

  &:after {
    right: 0;
    background-image: linear-gradient(to bottom left, #fff0 0%, #fff0 50%, #000 50%, #000 100%),
      linear-gradient(to top left, #fff0 0%, #fff0 50%, #000 50%, #000 100%);
  }

  &.green {
    background: @green-background-secondary;
    &.color-links a {
      color: @link-green;
    }
  }

  &.red {
    background: @red-background-secondary;
    &.color-links a {
      color: @link-red;
    }
  }

  &.blue {
    background: @blue-background-secondary;
    &.color-links a {
      color: @link-blue;
    }
  }

  &.yellow {
    background: @yellow-background-secondary;
    &.color-links a {
      color: @link-yellow;
    }
  }

  &.gray {
    background: @gray-background-secondary;
    &.color-links a {
      color: @link-gray;
    }
  }

  &.purple {
    background: @purple-background-secondary;
    &.color-links a {
      color: @link-purple;
    }
  }

  &.neutral {
    background: @neutral-background-secondary;
    &.color-links a {
      color: @link-neutral;
    }
  }
}

/******** Read-Aloud Block Quote ********/

.blockquote-read-wrap {
  padding-top: .3rem;
  padding-bottom: .3rem;
  padding-left: .3rem;
  padding-right: .3rem;
  margin: 0rem;
  overflow: hidden;
  page-break-inside: avoid;
}

blockquote.read {
  border-top: none;
  border-bottom: none;
  border-left: .2rem solid @accent-color;
  border-right: .2rem solid @accent-color;
  background-color: #edebe8;
  box-shadow: none;

  &:before,
  &:after {
    width: .4rem;
    background-size: .4rem .4rem;
    background-position: top center, bottom center;
    top: -.3rem;
    bottom: -.3rem;
    background-image: radial-gradient(circle at center, @accent-color .2rem, transparent 0),
      radial-gradient(circle at center, @accent-color .2rem, transparent 0);
  }

  &:before {
    left: -.3rem;
  }

  &:after {
    right: -.3rem;
  }
}

/******** Large Quote Block Quote ********/

blockquote.large-quote {
  font-size: 2.0rem;
  font-style: italic;
  text-align: center;
  margin: 1.0rem 4.0rem;
  padding: 2.0rem 0;
  line-height: 1.45;
  position: relative;
  color: #58180d;
  border-top: none;
  border-bottom: none;
  background-color: transparent;
  box-shadow: none;
  border-top: .2rem solid #58180d;
  border-bottom: .2rem solid #58180d;
}

blockquote.large-quote:before {
  background-image: none;
}

blockquote.large-quote:after {
  background-image: none;
}

/******** Paper Block Quote ********/

.blockquote-paper-wrap {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: .1rem;
  padding-right: .1rem;
  margin: 1.0rem;
  overflow: hidden;
  page-break-inside: avoid;
}

blockquote.paper {
  font-family: @flavor-font-family !important;
  border-left: .1rem solid #d7d2d0;
  border-right: .1rem solid #d7d2d0;
  border-top: 0;
  border-bottom: 0;
  background-color: #fbf4df;
  padding: 2.0rem;
  box-shadow: none;

  &:before,
  &:after {
    content: '';
    background-image: data-uri('../img/note.png');
    background-size: 100% 100%;
    height: 1.5rem;
    position: absolute;
    left: -.1rem;
    right: -.1rem;
    width: auto;
  }

  &:before {
    transform: rotateY(180deg);
    top: -1.5rem;
    bottom: unset;
  }

  &:after {
    transform: rotateX(180deg);
    bottom: -1.5rem;
    top: unset;
  }
}

/******** Flowchart Block Quote ********/

blockquote.flowchart,
blockquote.flowchart-with-link {
  box-shadow: none;
  border-width: 1.6rem 1.6rem 1.6rem 1.6rem;
  border-style: solid;
  border-color: transparent;
  border-image-repeat: repeat;
  border-image-slice: 16 16 16 16 fill;
  background-color: transparent;
  padding: 1.0rem;
  position: relative;
  border-image-source: data-uri('../img/flowchart.png');
  margin: 5.0rem 2.5rem;

  &:before,
  &:after {
    background-image: none;
  }
}

blockquote.flowchart-with-link {
  &:before {
    content: '';
    border-left: .3rem solid @accent-color;
    height: 10.0rem;
    left: 50%;
    position: absolute;
    margin-top: -8.0rem;
    z-index: -1;
  }
}

/******** Flavor Text Block Quote ********/

.blockquote-flavortext-wrap {
  padding-top: 5.0rem;
  padding-bottom: 5.0rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  overflow: hidden;
  display: table;
  page-break-inside: avoid;
}

blockquote.flavortext {
  font-family: @flavor-font-family !important;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  background-image: data-uri('../img/flavortext.png');
  background-size: cover;
  padding: 2.0rem;
  filter: opacity(1);
  max-width: 50.0rem;
  -webkit-filter: opacity(1);
  transform: rotate(-7deg);
  margin: 0;
}

blockquote.flavortext:before,
blockquote.flavortext:after {
  background-image: none;
}

/******** Marks ********/

mark {
  background: #e4c3c3;
}

/******** Square List Style ********/

ul.square {
  list-style-type: square;
}

/******** Table of Content List Style ********/

ul.toc {
  padding-left: 0;

  li {
    font-size: 1.3rem;
    font-weight: normal;
    display: flex;
    margin-bottom: 1.0rem;
    padding-left: 2em;

    span.toc-title {
      order: 1;
      margin-right: 0.25rem;
    }

    span.toc-page-number {
      font-size: 1.3rem;
      font-weight: normal;
      color: @foreground-color;
      order: 3;
      margin-left: 0.25em;

      a { 
        color: @foreground-color;
      }
    }

    &::after {
      content: "";
      color: @foreground-color;
      border-bottom: .2rem dotted;
      flex-grow: 1;
      order: 2;
    }

    a {
      color: @foreground-color
    }
  }

  li.subitem {
    padding-left: 3em;
  }

  li.part {
    padding-left: 0;    
    border-bottom: .1rem solid @accent-color;
    font-family: @heading-font-family;
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-weight: bold;
    color: @accent-color;

    &::after {
      border-bottom: none;
    }

    a {
      color: @accent-color;
    }
  }

  li.category {
    padding-left: 1em;
    font-size: 1.4rem;
    font-family: @heading-font-family;
    font-weight: bold;
    color: @accent-color;

    a {
      color: @accent-color;
    }
  }
}

/******** Code Blocks ********/

code,
pre {
  display: block;
  background: #f5f5f5;
  padding: 1.0rem 1.5rem;
  margin: 1.0rem 0;
  border-top: .2rem solid black;
  border-bottom: .2rem solid black;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

/******** Links ********/

a {
  color: @link-color-standard;
  text-decoration: none;
  font-weight: bold;

  &.underline {
    text-decoration: underline !important;
  }
  &.green {
    color: @link-green !important;
  }
  &.red {
    color: @link-red !important;
  }
  &.blue {
    color: @link-blue !important;
  }
  &.yellow {
    color: @link-yellow !important;
  }
  &.gray {
    color: @link-gray !important;
  }
  &.purple {
    color: @link-purple !important;
  }
  &.neutral {
    color: @link-neutral !important;
  }
  &.black {
    color: @link-black !important;
  }
}

a:hover {
  text-decoration: none;
}

a[href*='dndbeyond.com/sources'],
a[href*='/page/'],
a.page {
  color: @link-color-page;
}

a[href*='dndbeyond.com/monsters'],
a[href*='/monster/'],
a.monster {
  color: @link-color-monster;
}

a[href*='dndbeyond.com/spells'],
a[href*='/spell/'],
a.spell {
  color: @link-color-spell;
  font-style: italic;
}

a[href*='dndbeyond.com/equipment'],
a[href*='dndbeyond.com/magic-items'],
a[href*='/item/'],
a.item {
  color: @link-color-item;
  font-style: italic;
}

a[href*='/table-roll/'],
a[href*='/roll/'],
a.roll {
  color: @link-color-roll;
}

/******** Text Alignment ********/

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/******** Images ********/

figure {
  margin: 0;
  padding: 0;
  page-break-inside: avoid;
}

figcaption {
  text-align: center;
  font-size: .9rem;
}

img {
  max-width: 100%;
  height: auto;
}

figure.size-full,
img.size-full {
  width: 100%;
  height: auto;
}

/******** Tables ********/

.table-responsive,
.table-overflow-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

table {
  font-family: @body-font-family;
  border-collapse: collapse;
  margin-bottom: 3.0rem;
  page-break-inside: avoid;
  overflow-wrap: break-word;

  &.center {
    display: table;
  }

  &:not(.center):not(.float-left):not(.float-right):not(.sidebar) {
    width: 100%;
  }

  &.header-title {
    thead {
      font-weight: bold;
      font-family: @heading-font-family;
      color: @accent-color;
    }
  }

  a {
    color: @link-neutral;
  }

  thead {
    font-weight: bold;
  }

  tbody {
    tr:nth-child(odd) {
      background: @green-background-secondary;
    }
  }

  &.green {
    &.color-links a {
      color: @link-green;
    }
    tbody {
      tr:nth-child(odd) {
        background: @green-background-secondary;
      }
    }
  }

  &.red {
    &.color-links a {
      color: @link-red;
    }
    tbody {
      tr:nth-child(odd) {
        background: @red-background-secondary;
      }
    }
  }

  &.blue {
    &.color-links a {
      color: @link-blue;
    }
    tbody {
      tr:nth-child(odd) {
        background: @blue-background-secondary;
      }
    }
  }

  &.yellow {
    &.color-links a {
      color: @link-yellow;
    }
    tbody {
      tr:nth-child(odd) {
        background: @yellow-background-secondary;
      }
    }
  }

  &.gray {
    &.color-links a {
      color: @link-gray;
    }
    tbody {
      tr:nth-child(odd) {
        background: @gray-background-secondary;
      }
    }
  }

  &.purple {
    &.color-links a {
      color: @link-purple;
    }
    tbody {
      tr:nth-child(odd) {
        background: @purple-background-secondary;
      }
    }
  }

  &.neutral {
    &.color-links a {
      color: @link-neutral;
    }
    background: @neutral-background-primary;
    tbody {
      tr:nth-child(odd) {
        background: @neutral-background-secondary;
      }
    }
  }
}

td,
th {
  text-align: left;
  padding: 1.0rem;
}

th p,
td p {
  margin: 0;
  padding: 0;
}

tbody tr:nth-child(odd) {
  background: #e0e4c3;
}

/******** Shop Tables ********/
table.shop {
  tbody {
    font-size: 1.1rem;
    tr {
      &:nth-child(odd) {
        background: #edebe840;
      }
    }
  }
}

table.shop tbody table.shop > thead > tr > td,
table.shop > tbody > tr > td {
  border-color: @accent-color;
  border-bottom-width: .1rem;
  border-bottom-style: solid;
}

table.shop > tbody > tr {
  background: none;
}

table.shop > tbody > tr.shopH1 {
  font-weight: bold;
  font-family: @heading-font-family;
  color: @accent-color;
  font-size: 1.4rem;
  font-weight: bold;
}

table.shop > tbody > tr.shopH2 {
  font-weight: bold;
  font-family: @heading-font-family;
  color: @accent-color;
  font-size: 1.2rem;
  font-weight: bold;
}

/******** Information Block Tables ********/

table.info-block {
  line-height: 1.3rem;
  background: @neutral-background-primary;
  font-size: 1.1rem;
  page-break-inside: avoid;
  float: right;

  tbody {
    tr {
      &:nth-child(odd) {
        background: @neutral-background-secondary;
      }
    }
  }

  tr td img {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: auto;
  }

  thead {
    font-weight: bold;
    font-family: @heading-font-family;
    color: @accent-color;
    font-size: 1.8rem;
    border-top: none;
  }

  tbody tr {
    border-bottom: none;
    border-top: none;
    border-collapse: separate;
  }

  td:first-child {
    font-weight: bold;
    font-family: @heading-font-family;
    color: @accent-color;
    font-size: .9rem;
    padding: .4rem .8rem;
  }
}

/******** Sidebar Tables ********/

table.sidebar {
  line-height: 1.3rem;
  background: @neutral-background-primary;
  font-size: 1.1rem;
  page-break-inside: avoid;
  float: right;
  margin-left: 1.0rem;
  max-width: 40.0rem;
  width: 45%;

  tbody {
    tr {
      &:nth-child(odd) {
        background: @neutral-background-secondary;
      }
    }
  }

  tr td img {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: auto;
  }

  thead {
    font-weight: bold;
    font-family: @heading-font-family;
    color: @accent-color;
    font-size: 1.8rem;
    border-top: none;
  }

  tbody tr {
    border-bottom: none;
    border-top: none;
    border-collapse: separate;
  }

  td:first-child {
    font-weight: bold;
    font-family: @heading-font-family;
    color: @accent-color;
    font-size: .9rem;
    padding: .4rem .8rem;
  }
}

/******** Statblock Div Styles ********/

.statblock {
  @statblock-background-default: #fdf1dc;
  @statblock-subtitle-color: #7a200d;
  @statblock-title-color: #922610;
  @statblock-border-top-bottom-color: #dea858;
  @statblock-border-sides-color: #000000;

  font-family: @body-font-family;
  text-align: left;
  margin: 1.0rem 2.0rem;
  display: inline-block;
  vertical-align: top;
  width: 30.0rem;
  background: @statblock-background-default;
  padding: .5rem 1.0rem 2.0rem;
  page-break-inside: avoid;

  &.two-column {
    width: 90%;
    max-width: 85.0rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    // margin-left: auto;
    // margin-right: auto;
    // text-align: center;

    .statblock-section-left,
    .statblock-section-right {
      display: inline-block;
      vertical-align: top;
      width: 48%;
      text-align: left;
    }

    .statblock-section-left {
      margin-right: 1.5%;
    }

    .statblock-section-right {
      margin-left: 1.5%;
    }
  }

  .statblock-title {
    font-family: @heading-font-family;
    color: @statblock-title-color;
    font-size: 2.3rem;
    line-height: 1.2em;
    margin: 1.0rem 0 0;
    letter-spacing: 0.1rem;
    font-variant: small-caps;
    font-weight: bold;
  }

  .statblock-subtitle,
  .statblock-trait-name,
  .statblock-topstat-name,
  .statblock-property-name,
  .statblock-property-name,
  .statblock-section-title,
  .statblock-property-value {
    color: @statblock-subtitle-color;
  }

  .statblock-trait-name,
  .statblock-topstat-name,
  .statblock-ability-abbrev,
  .statblock-property-name {
    font-weight: bold;
  }

  .statblock-trait-description,
  .statblock-action-description,
  .statblock-bonus-action-description,
  .statblock-reaction-description,  
  .statblock-legendary-action-description,
  .statblock-mythic-action-description,
  .statblock-property-value,
  .statblock-property-name,
  .statblock-trait-name,
  .statblock-topstat-name,
  .statblock-topstat-value {
    display: inline;
  }

  .statblock-border {
    display: block;
    background: @statblock-border-top-bottom-color;
    border: .1rem solid @statblock-border-sides-color;
    height: .5rem;
    padding: 0 1.0rem 0;
    margin: -.5rem -1.0rem 0;
    box-sizing: initial;
  }

  .statblock-border.bottom {
    margin: 1.5rem -1.0rem -2.0rem;
  }

  .statblock-tapered-rule {
    display: block;
    width: 100%;
    height: .5rem;
    border: none;
    color: @statblock-title-color;
    fill: @statblock-title-color;
    stroke: @statblock-title-color;
  }

  .statblock-subtitle {
    font-weight: normal;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.2em;
    margin: 0 0 1.0rem;
  }

  .statblock-topstat-name,
  .statblock-topstat-value {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2em;
  }

  .statblock-topstat-value {
    color: @statblock-title-color;
  }

  .statblock-property-line {
    text-indent: -1em;
    padding-left: 1.1em;
    line-height: 1.4em;
  }

  .statblock-property-line.first {
    margin: .8rem 0 0;
  }

  .statblock-property-line.last {
    margin: 0 0 1.0rem;
  }

  .statblock-abilities {
    text-align: center;
    color: @statblock-title-color;
  }

  .statblock-abilities > div {
    display: inline-block;
    vertical-align: middle;
    width: 16.5%;
    min-width: 4.0rem;
    font-size: 1.2rem;
    line-height: 1em;
  }

  .statblock-ability-abbrev {
    margin: 1.0rem 0 .2rem;
    font-size: 1.3rem;
    line-height: 1.2em;
    text-transform: uppercase;
    color: @statblock-title-color;
  }

  .statblock-ability-value {
    margin: 0 0 1.0rem;
    line-height: 1.2em;
    font-weight: lighter;
  }

  .statblock-action-name,
  .statblock-bonus-action-name,
  .statblock-reaction-name,
  .statblock-legendary-action-name,
  .statblock-mythic-action-name,
  .statblock-trait-name {
    color: @foreground-color;
    font-size: 1.35rem;
    line-height: 1.2em;
    display: inline;
    margin: 0;
  }

  .statblock-action-name,
  .statblock-bonus-action-name,
  .statblock-reaction-name,
  .statblock-trait-name {
    font-style: italic;
    font-weight: bold;
  }

  .statblock-legendary-action-name,
  .statblock-mythic-action-name {
    font-weight: bold;
  }

  .statblock-property-block {
    padding: 1.0rem .2rem 0;
  }

  .statblock-actions,
  .statblock-bonus-actions,
  .statblock-reactions,
  .statblock-legendary-actions,
  .statblock-mythic-actions {
    margin: 0 0 2.0rem;
  }

  .statblock-section-title {
    border-bottom: .1rem solid @statblock-title-color;
    font-size: 2.1rem;
    font-variant: small-caps;
    font-weight: normal;
    letter-spacing: .1rem;
    margin: 2.0rem 0 0;
    padding: 0 0 1.0rem;
    text-indent: .5rem;
  }

  .statblock-spacer {
    width: 2.5rem;
    min-width: 1.0rem;
    display: inline-block;
  }

  img.stablock-image {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .statblock-actions:last-child,
  .statblock-bonus-actions:last-child,
  .statblock-reactions:last-child,
  .statblock-legendary-actions:last-child,
  .statblock-mythic-actions:last-child {
    margin: 0;
  }
}

/* Blue Stat Blocks */
.statblockColor(@color) {


  .statblock.@{color} {
    background: ~"@{statblock-background-@{color}}";

    .statblock-title,
    .statblock-tapered-rule,
    .statblock-topstat-value,
    .statblock-abilities,
    .statblock-ability-abbrev,
    .statblock-section-title {
      color: ~"@{statblock-title-color-@{color}}";
    }

    .statblock-tapered-rule {
      fill: ~"@{statblock-title-color-@{color}}";
      stroke: ~"@{statblock-title-color-@{color}}";
    }

    .statblock-section-title {
      border-bottom-color: ~"@{statblock-title-color-@{color}}";
    }

    .statblock-subtitle,
    .statblock-topstat-name,
    .statblock-property-name,
    .statblock-property-name,
    .statblock-section-title,
    .statblock-property-value {
      color: ~"@{statblock-subtitle-color-@{color}}"
    }

    .statblock-border {
      background: ~"@{statblock-border-top-bottom-@{color}}"
    }
  }
}

.statblockColor(~"blue");
.statblockColor(~"green");
.statblockColor(~"red");
.statblockColor(~"yellow");
.statblockColor(~"gray");
.statblockColor(~"neutral");
.statblockColor(~"purple");

/******** Item Style ********/

.item-block {
  @item-block-background-default: #ffffff;
  @item-block-title-color: #000000;
  @item-block-border-top-bottom-color: #588ede;
  @item-block-border-sides-color: #d4d4d4;
  font-family: @body-font-family;
  margin: 1.5rem 0 1.5rem 0;

  .item-block-body {
    padding: 1.0rem 1.0rem 1.0rem 1.0rem;
    border-left: .1rem solid @item-block-border-sides-color;
    border-right: .1rem solid @item-block-border-sides-color;
    background: @item-block-background-default;
  }

  .item-block-title {
    font-size: 2.0rem;
    line-height: 1.2em;
    margin-bottom: .5rem;
    letter-spacing: .1rem;
    font-variant: small-caps;
    font-weight: bold;
  }
  
  .item-block-top-border {
    display: block;
    background: @item-block-border-top-bottom-color;
    height: .3rem;
    padding: 0 1.0rem 0;
    box-sizing: initial;
  }

  .item-block-heading-border {
    display: block;
    background: @item-block-border-top-bottom-color;
    height: .1rem;
    margin: 0 2.0rem 1.0rem 0;
    box-sizing: initial;
  }

  .item-block-bottom-border {
    content: '';
    background-image: data-uri('../img/item.png');
    background-size: 100% 100%;
    height: 1.5rem;
    width: auto;
    margin: 0 -1.1rem -1.5rem -1.1rem;
  }

  .item-block-description {
    font-size: 1.3rem;
    display: inline;
  }

  .item-block-heading {
    font-size: 1.3rem;
    font-style: italic;
    margin: 0;
  }
}

.itemBlockColor(@color) {
  @item-block-accent-color-blue: #105a92;
  @item-block-accent-color-green: #099d43;
  @item-block-accent-color-red: #9d0e09;
  @item-block-accent-color-yellow: #d7c220;
  @item-block-accent-color-orange: #dd712f;
  @item-block-accent-color-gray: #535353;
  @item-block-accent-color-neutral: #631d07;
  @item-block-accent-color-purple: #6431ab;

  .item-block.@{color} {
    .item-block-top-border {
      background: ~"@{item-block-accent-color-@{color}}";
    }

    .item-block-heading-border {
      background: ~"@{item-block-accent-color-@{color}}";
    }
  }
}

.itemBlockColor(~"blue");
.itemBlockColor(~"green");
.itemBlockColor(~"red");
.itemBlockColor(~"yellow");
.itemBlockColor(~"orange");
.itemBlockColor(~"gray");
.itemBlockColor(~"neutral");
.itemBlockColor(~"purple");

/******** Spell Style ********/

.spell-block {
  @item-block-background-default: #ffffff;
  @item-block-title-color: #000000;
  @item-block-border-top-bottom-color: #6431ab;
  @item-block-border-sides-color: #d4d4d4;
  font-family: @body-font-family;
  margin: 1.5rem 0 1.5rem 0;

  .spell-block-body {
    padding: 1.0rem 1.0rem 1.0rem 1.0rem;
    border-left: .1rem solid @item-block-border-sides-color;
    border-right: .1rem solid @item-block-border-sides-color;
    background: @item-block-background-default;
  }

  .spell-block-title {
    font-size: 2.0rem;
    line-height: 1.2em;
    margin-bottom: .5rem;
    letter-spacing: .1rem;
    font-variant: small-caps;
    font-weight: bold;
  }
  
  .spell-block-top-border {
    display: block;
    background: @item-block-border-top-bottom-color;
    height: .3rem;
    padding: 0 1.0rem 0;
    box-sizing: initial;
  }

  .spell-block-heading-border {
    display: block;
    background: @item-block-border-top-bottom-color;
    height: .1rem;
    margin: 0 2.0rem 1.0rem 0;
    box-sizing: initial;
  }

  .spell-block-bottom-border {
    content: '';
    background-image: data-uri('../img/item.png');
    background-size: 100% 100%;
    height: 1.5rem;
    width: auto;
    margin: 0 -1.1rem -1.5rem -1.1rem;
  }

  .spell-block-description {
    font-size: 1.3rem;
  }

  .spell-block-heading {
    font-size: 1.3rem;
    font-style: italic;
    margin: 0;
  }
}

.spellBlockColor(@color) {
  @spell-block-accent-color-blue: #105a92;
  @spell-block-accent-color-green: #099d43;
  @spell-block-accent-color-red: #9d0e09;
  @spell-block-accent-color-yellow: #d7c220;
  @spell-block-accent-color-orange: #dd712f;
  @spell-block-accent-color-gray: #535353;
  @spell-block-accent-color-neutral: #631d07;
  @spell-block-accent-color-purple: #6431ab;

  .spell-block.@{color} {
    .spell-block-top-border {
      background: ~"@{spell-block-accent-color-@{color}}";
    }

    .spell-block-heading-border {
      background: ~"@{spell-block-accent-color-@{color}}";
    }
  }
}

.spellBlockColor(~"blue");
.spellBlockColor(~"green");
.spellBlockColor(~"red");
.spellBlockColor(~"yellow");
.spellBlockColor(~"orange");
.spellBlockColor(~"gray");
.spellBlockColor(~"neutral");
.spellBlockColor(~"purple");

/******** Screen-Specific Styles ********/

@media screen and (max-width: 45.0rem) {
  /* Make the statblock single column when the screen width is too small */
  .statblock {
    &.two-column {
      width: 30rem;
      max-width: unset;
      position: unset;
      left: unset;
      transform: unset;
  
      .statblock-section-left,
      .statblock-section-right {
        display: unset;
        vertical-align: unset;
        width: unset;
        text-align: unset;
      }
  
      .statblock-section-left {
        margin-right: unset;
      }
  
      .statblock-section-right {
        margin-left: unset;
      }
    }
  }
}

@media screen and (max-width: 40.0rem) {
  /* Make the sidebar not float when the screen width is too small */
  table.sidebar {
    float: none;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    width: calc(100% - 0.2in);
  }
}

@media screen {
  .print-only {
    display: none;
  }

  html {
    margin: 0;
  }

  body {
    font-family: @body-font-family;
    font-size: 1.3rem;
    line-height: 1.8rem;
    padding: 0;
    margin: 0;
    color: black;
    background: data-uri('../img/bg.png') #fefefc repeat;
  }

  .statblock {
    box-shadow: 0 0 0.5em #616161;
    margin: 0.5em;
  }

  img.size-cover {
    max-width: none;
    width: calc(100% + 4.0rem);
    margin-top: calc(-3.0rem);
    margin-left: calc(-2.0rem);
    margin-right: calc(-2.0rem);
    margin-bottom: calc(+2.0rem);
    height: auto;
  }

  #page {
    padding: 1.5rem 2.0rem;
    overflow: hidden;
  }

  blockquote {
    box-shadow: 0 .3rem 1.0rem 0 rgba(0, 0, 0, 0.3);
  }
}

/******** Print-Specific Styles ********/

@media print {
  @page {
    size: auto;
    margin: 0;
  }

  a {
    font-weight: bold;
  }

  ul.toc > li > a,
  ul.toc > li > span > a {
    font-weight: unset;
  }

  div.print-two-column {
    &:not(.statblock) {
      width: 7.5in;
      position: relative;
      column-count: 2;
      column-gap: 0.25in;
      column-fill: auto;
      -webkit-column-count: 2;
      -moz-column-count: 2;
      -webkit-column-gap: 0.25in;
      -moz-column-gap: 0.25in;
    }
  }

  .print-cover-page,
  .print-section-cover-page {
    position: relative;
    height: 11in;
    width: 8.5in;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-size: 100%;
  }

  p.size-cover,
  p.size-full,
  figure.size-cover,
  figure.size-full,
  div.size-full {
    column-span: all;
  }

  figure.size-cover,
  img.size-cover {
    max-width: none;
    width: calc(100% + 1in);
    margin-top: -0.5in;
    margin-left: -0.5in;
    margin-right: -0.5in;
    margin-bottom: 0;
    height: auto;
  }

  img.size-cover.with-margin {
    margin-left: -0.25in;
    margin-right: -0.25in;
  }

  .print-bottom-right {
    position: absolute;
    bottom: -0.55in - .5rem;
    right: -0.5in;
    z-index: -1;
  }

  .print-bottom-right.with-margin {
    bottom: .1rem;
    right: .1rem;
  }

  .print-bottom-left {
    position: absolute;
    bottom:  -0.55in - .5rem;
    left: -0.5in;
    z-index: -1;
  }

  .print-bottom-left.with-margin {
    bottom: .1rem;
    left: .1rem;
  }

  .print-top-left {
    position: absolute;
    top:  -0.55in;
    left: -0.5in;
    z-index: -1;
  }
 
  .print-top-left.with-margin {
    top: .1rem;
    left: .1rem;
  }

  .print-top-right {
    position: absolute;
    top:  -0.55in;
    right: -0.5in;
    z-index: -1;
  }

  .print-top-right.with-margin {
    top: .1rem;
    right: .1rem;
  }

  .screen-only {
    display: none;
  }

  body {
    font-size: 1.3rem;
    line-height: 1.8rem;
    padding: 0;
    margin: 0;
    color: @foreground-color;
  }

  blockquote {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
  }

  /* Enable this if you want to print with
     drop shadows on elements - this will
     cause text to be non-selectable in block quotes */
  /*blockquote {
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
    filter: opacity(1);
    -webkit-filter: opacity(1);
  }
  .statblock {
    box-shadow: 0 0 0.5em #616161;
    margin: 20px;
    filter: opacity(1);
    -webkit-filter: opacity(1);
  }
  */

  .statblock {
    box-shadow: 0 0 0.5em #616161;
    margin: 1.0em 0.25em;
    filter: opacity(1);
    -webkit-filter: opacity(1);
  }

  .print-page {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    position: relative;
    height: 11in;
    width: 8.5in;
    z-index: 10;
    box-sizing: border-box;
    padding-top: 0.5in;
    padding-bottom: 0.6in;
    padding-left: 0.5in;
    padding-right: 0.5in;
    text-rendering: optimizeLegibility;
    page-break-before: always;
    page-break-after: always;
    overflow: hidden;

    .footer-background {
      position: absolute;
      bottom: 0.1in;
      left: 0;
      z-index: -10;
      height: 0.5in;
      width: 8.5in;
      background-size: 8.5in 0.5in;
    }

    .page-content {
      height: 9.9in;
      width: 7.5in;
      position: relative;
      z-index: 20;
    }

    .footer-content {
      font-family: @heading-font-family;
      position: absolute;
      font-variant: small-caps;
      bottom: 0.2in;
      width: 8.5in;
      font-size: 1.5rem;
      color: #aea41a;
      right: .2rem;
      text-align: center;
      z-index: -10;
    }

    .footer-page-number {
      font-family: @heading-font-family;
      position: absolute;
      bottom: 0.3in;
      width: 5.0rem;
      font-size: 1.5rem;
      color: #aea41a;
      right: .2rem;
      text-align: center;
      z-index: -10;
    }
  }

  .force-two-column,
  .two-column {
    table.sidebar {
      float: none;
      margin-left: 0.1in;
      margin-right: 0.1in;
      width: calc(100% - 0.2in);
    }

    div.statblock.two-column {
      display: block;
    }
  }

  .statblock {
    width: 3.25in;
  }

  .print-column-break {
    break-after: always;
    display: flex;
    -webkit-column-break-after: always;
    -moz-column-break-after: always;
  }

  .print-float-left {
    float: left;
  }

  .print-float-right {
    float: right;
  }

  .print-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}