cards.css

body {
  margin: 0px;
  padding: 0px;
  font-size: 8pt;
  font-family: Helvetica, Arial, sans-serif;
}

body.A6 {
  width: 210mm;
}
div.container.A6 {
  page: portrait;
}

body.A7 {
  width: 297mm;
}
div.container.A7 {
  page: landscape;
}

.description, .higherLevel .value {
  font-size: 8pt;
  line-height: 1;
  font-family: Didot, Times New Roman, Times, serif;
  overflow: hidden;
}

.reference .description, .reference .description table {
  font-size: 12pt;
}

.reference ul {
  padding-left: 0px;
  list-style-type: none;
}

.reference li {
  margin-bottom: 20px;
}

.card > div {
  margin: 2px;
}

div.card {
  position: relative;
  border: 1px solid black;
  overflow: hidden;
}

.A6 .card {
  height: 474px;
  width: 315px;
  padding: 20px;
  margin: 20px;
}

.A7 .card {
  height: 347px;
  width: 254px;
  padding: 6px;
  margin: 6px;
}

.row {
  display: -webkit-flex;
  flex-direction: row;
}

.name {
  margin: 2px;
  font-weight: bold;
  font-size: 16pt;
  font-family: Didot, Times New Roman, Times, serif;
}

div.type {
  position: relative;
  font-style: italic;
  top: -5px;
  margin-bottom: 5px;
}

div.cite {
  position: absolute;
  bottom: 10px;
  right: 20px;
}

.title {
  font-weight: bold;
}

.abilities .title {
  text-align: center;
  text-transform: uppercase;
}

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

.abilities .stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.abilities {
  height: 24px;
  text-align: justify;
  text-justify: distribute-all-lines;
  padding-top: 5px;
  padding-bottom: 5px;
}

.abilities .ability {
  vertical-align: top;
  width: 38px;
  height: 24px;
  display: inline-block;
  *display: inline;
}

.savingThrows div {
  display: inline;
}

.savingThrows .ability .title {
    font-weight: normal;
}

.savingThrows .title {
  text-align: left;
  text-transform: capitalize;
}

.savingThrows .stretch {
  width: 0px;
  font-size: 0;
  line-height: 0;
}

.stat div, .list div, .castingTime div, .range div, .components div, .duration div {
  display: inline;
}

.list > .title {
  font-weight: bold;
}

.listElement > div.title {
  font-weight: normal;
}

.list .listElement:after {
  content: ", ";
}

.list .listElement:last-child:after {
  content: "";
}

.bulletpoint div {
  display: inline;
}

div.bulletpoint {
  margin-bottom: 3pt;
  margin-top: 3pt;
}

.bulletlist > div.title {
  font-size: 12pt;
  border-bottom: solid 1pt black;
}

.bulletpoint .title {
  font-style: italic;
}

.stats > div {
  margin: 2px 0px 2px 0px;
}


.spell div.classes {
  position: absolute;
  top: 6px;
  right: 6px;
}

.monster div.type {
  border-bottom: solid 1pt black;
}

.monster div.stats {
  border-bottom: solid 1pt black;
}

.monster div.abilities {
  border-top: solid 1pt black;
  border-bottom: solid 1pt black;
}




@media all {
  body {
    margin: 0px;
    padding: 0px;
    writing-mode: tb-rl;
  }

  @page {
    margin: 0px;
    padding: 0px;
  }

  @page portrait {
    size: A4 portrait;
  }

  @page landscape {
    size: A4 landscape;
  }

  .card-8,
  .cardb-5,
  .page {
    page-break-after: always;
    page-break-inside: avoid;
  }
}