html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

b, strong {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
}

* {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

* {
	font-family: 'bookmania';
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/*
	General
*/

.text>strong,
.text>b {
	display: inline;
	font-weight: bold;
}

/*
	card format
*/

.card * {
	line-height: 120%;
}

.card {
	display: inline-block;
	width: 63mm;
	min-width: 63mm;
	height: 88mm;
	padding: 0;
	font-size: 10px;
	position: relative;
	vertical-align: top;
	text-align: left;
	margin: 0 1px 1px 0;
	border-radius: 10px;
	overflow: hidden;
}

.card .front {
	height: 100%;
	width: 100%;
	padding: 0px;
	border-radius: 10px;
	border: 5px solid;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.card .back,
.card .backface {
	height: 100%;
	width: 100%;
	border-radius: 10px;
	border: 5px solid;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.card {
	background:  url(../images/parchmentBackground.jpg);
	background-repeat: no-repeat;
}

.card-left .front:after {
	content: "";
	position: absolute;
	bottom: -16px;
	height: 50px;
	width: calc(100% - 10px);
	background-image: url('../images/PHB_footerAccent.png');
	transform: scaleX(-1);
	background-size: cover
}
.card-left .front:after {
	width: 100%;
	left: 0px;
}

.card .front .classes {
	position: absolute;
	top: 10px;
	right: 10px;
    display: flex;
    flex-direction: row;
}
.card.card-right .front .classes {
	position: absolute;
	visibility: hidden;
}

.inline-artificer,
.inline-barbarian,
.inline-bard,
.inline-cleric,
.inline-druid,
.inline-fighter,
.inline-monk,
.inline-paladin,
.inline-ranger,
.inline-rogue,
.inline-sorcerer,
.inline-wizard,
.inline-warlock {
	display: inline;
}

.card .front .inline-artificer::before,
.card .front .inline-barbarian::before,
.card .front .inline-bard::before,
.card .front .inline-cleric::before,
.card .front .inline-druid::before,
.card .front .inline-fighter::before,
.card .front .inline-monk::before,
.card .front .inline-paladin::before,
.card .front .inline-ranger::before,
.card .front .inline-rogue::before,
.card .front .inline-sorcerer::before,
.card .front .inline-wizard::before,
.card .front .inline-warlock::before {
	content: "";
	display: inline-block;
	height: 1em !important;
	width: 1em !important;
	margin-bottom: -0.15em;
	border-radius: 10px;
	background-size: cover;
}
.card .backface .inline-artificer::before,
.card .backface .inline-barbarian::before,
.card .backface .inline-bard::before,
.card .backface .inline-cleric::before,
.card .backface .inline-druid::before,
.card .backface .inline-fighter::before,
.card .backface .inline-monk::before,
.card .backface .inline-paladin::before,
.card .backface .inline-ranger::before,
.card .backface .inline-rogue::before,
.card .backface .inline-sorcerer::before,
.card .backface .inline-wizard::before,
.card .backface .inline-warlock::before {
	content: "";
	display: inline-block;
	height: 1em !important;
	width: 1em !important;
	margin-bottom: -0.15em;
	border-radius: 30px;
	background-size: cover;
}
.inline-artificer::before {
	background-image: url(../images/Artificer.jpg);
}
.inline-barbarian::before {
	background-image: url(../images/Barbarian.jpg);
}
.inline-bard::before {
	background-image: url(../images/Bard.jpg);
}
.inline-cleric::before {
	background-image: url(../images/Cleric.jpg);
}
.inline-druid::before {
	background-image: url(../images/Druid.jpg);
}
.inline-fighter::before {
	background-image: url(../images/Fighter.jpg);
}
.inline-monk::before {
	background-image: url(../images/Monk.jpg);
}
.inline-paladin::before {
	background-image: url(../images/Paladin.jpg);
}
.inline-ranger::before {
	background-image: url(../images/Ranger.jpg);
}
.inline-rogue::before {
	background-image: url(../images/Rogue.jpg);
}
.inline-sorcerer::before {
	background-image: url(../images/Sorcerer.jpg);
}
.inline-wizard::before {
	background-image: url(../images/Wizard.jpg);
}
.inline-warlock::before {
	background-image: url(../images/Warlock.jpg);
}

.card .front .artificer,
.card .front .barbarian,
.card .front .bard,
.card .front .cleric,
.card .front .druid,
.card .front .fighter,
.card .front .monk,
.card .front .paladin,
.card .front .ranger,
.card .front .rogue,
.card .front .sorcerer,
.card .front .wizard,
.card .front .warlock {
	content: "";
	width: 12px;
	height: 12px;
	margin-left: 1px;
	border-radius: 10px;
	background-size: cover;
}
.card .front .artificer {
	background-image: url(../images/Artificer.jpg);
	left:132px;
}
.card .front .barbarian {
	background-image: url(../images/Barbarian.jpg);
	left:145px;
}
.card .front .bard {
	background-image: url(../images/Bard.jpg);
	left:145px;
}
.card .front .cleric {
	background-image: url(../images/Cleric.jpg);
	left:158px;
}
.card .front .druid {
	background-image: url(../images/Druid.jpg);
	left:171px;
}
.card .front .fighter {
	background-image: url(../images/Fighter.jpg);
	left:171px;
}
.card .front .monk {
	background-image: url(../images/Monk.jpg);
	left:171px;
}
.card .front .paladin {
	background-image: url(../images/Paladin.jpg);
	left:184px;
}
.card .front .ranger {
	background-image: url(../images/Ranger.jpg);
	left:184px;
}
.card .front .rogue {
	background-image: url(../images/Rogue.jpg);
	left:184px;
}
.card .front .sorcerer {
	background-image: url(../images/Sorcerer.jpg);
	left:197px;
}
.card .front .wizard {
	background-image: url(../images/Wizard.jpg);
	left:210px;
}
.card .front .warlock {
	background-image: url(../images/Warlock.jpg);
	left:223px;
}
.card .front .large {
	width: 39px;
	height: 39px;
	border-radius: 20px;
	margin-bottom: 1px;
}

/*
	card layout
*/

.card .front .body {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 25px min-content min-content min-content min-content 1fr min-content 6px;
	display: grid;
	padding: 5px;
}

.card .front .body.creature,
.card .front .body.race {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.card .front .left {
	grid-column: 1 / 4;
	display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.card .front .right {
	grid-column: 4 / 7;
	text-align: right;
	justify-content: flex-start;
	display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.left,
.right {
	margin-top: 3px;
}
.spellslot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff55;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	vertical-align: middle;
	margin-bottom: 2px;
	margin-top: 2px;
}
.right .spellslot{
	margin-right: 3px;
	margin-left: 3px;
}
.left .spellslot{
	margin-right: 3px;
	margin-left: 3px;
}
.slot-name {
    grid-column: 1 / 7;
    line-height: 100%;
	width: 85px;
    font-size: 14px;
	height: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: end;
    border-bottom: 1px solid;
	margin-bottom: 2px;
}
.card .slot-unlock {
    grid-column: 1 / 7;
    line-height: 100%;
	width: 85px;
	color: grey;
    font-size: 8px;
    display: inline-flex;
    align-items: end;
	margin-bottom: 2px;
}
.slot-name.smaller {
	font-size: 12px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.slot-name.smallest {
	font-size: 10px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.left .slot-name,
.left .slot-unlock {
	justify-content: left;
	padding-left: 5;
}
.right .slot-name,
.right .slot-unlock {
	justify-content: right;
	padding-right: 5;
}
.slot-0::after {
	content: "0",
}
.slot-name.blank {

}
.spellslot-line.title {
	background-color: #ffffff55;
	display: inline-flex;
	justify-content: center;
	border-radius: 12px;
	align-items: flex-end;

}
.left .spellslot-line.title {
	padding-right: 5px;
	padding-left: 20px;
	margin-left: -20px;
}
.right .spellslot-line.title {
	padding-right: 20px;
	margin-right: -20px;
	padding-left: 5px;
}
.spellslot-line.title .slot-0 {
	background-color: #ffffff55;
}

.card .name,
.card .slot-name,
.card .level,
.card .cr {
	font-family: MrEavesRemake;
}

.card .name {
	grid-row: 1;
	grid-column: 1 / 9;
	padding-right: 63px;
	line-height: 90%;
	padding-bottom: 0.4px;
	font-size: 16px;
	font-weight: bold;
	display: inline-flex;
	align-items: end;
	border-bottom: 1px solid;
}
.card .potion:has(.rarity) .name {
	padding-right: 50px;
}
.card .potion .name {
	padding-right: 10px;
}

.card .race:not(:has(.poc)) .name {
    grid-column: 1 / 9;
}

.card.card-left .name.smallest,
.card .creature .name.smallest,
.card .race .name.smallest {
	font-size: 14px;
}
.card .creature .name {
	grid-column: 1 / 9;
	padding-right: 30px;
}
.card .front .body[data-level="1/2"].creature .name,
.card .front .body[data-level="1/4"].creature .name,
.card .front .body[data-level="1/8"].creature .name {
	padding-left: 18px;
}
.card-left .front .body:not([data-level="0"]).spell .name,
.card-left .front .body:not([data-level=""]).ability .name,
.card .front .body:not([data-level=""]).creature .name {
	padding-left: 15px;
}
.card-left .front .body[data-level="10"] .name,
.card-left .front .body[data-level="11"] .name,
.card-left .front .body[data-level="12"] .name,
.card-left .front .body[data-level="13"] .name,
.card-left .front .body[data-level="14"] .name,
.card-left .front .body[data-level="15"] .name,
.card-left .front .body[data-level="16"] .name,
.card-left .front .body[data-level="17"] .name,
.card-left .front .body[data-level="18"] .name,
.card-left .front .body[data-level="19"] .name,
.card-left .front .body[data-level="20"] .name {
	padding-left: 25px !important;
}

.card .front .cr,
.card .front .level {
	grid-row: 1;
	grid-column: 1 / 2;
	font-size: 25px;
	line-height: 25px;
	margin-bottom: -1px;
	font-weight: bold;
	display: grid;
	justify-content: start;
	align-items: end;
}
.card .front .body[data-level="0"] .level {
	visibility: hidden;
}
.card .front .body[data-level="1/2"].creature .cr,
.card .front .body[data-level="1/4"].creature .cr,
.card .front .body[data-level="1/8"].creature .cr {
	font-size: 17px;
	padding-top: 3px;
}
.card .front .cr:not(:empty)::before {
	top: 1px;
	position: absolute;
	content: "CR";
	font-size: 7px;
	justify-content: start;
	align-content: center;
}

.card .type_long,
.card .front .school,
.card .front .rarity {
	grid-row: 1;
	grid-column: 1 / 8;
	font-size: 10px;
	font-style: italic;
	margin: 0;
	padding-bottom: 1px;
	display: inline-flex;
	justify-content: end;
	align-items: flex-end;
	text-align: end;
}
.card .front .body[data-level="0"].spell .school::after {
	position: relative;
	content: " cantrip";
	font-weight: normal;
	padding-left: 2px;
}
.card .type_long {
	grid-column: 1 / 7;
	font-size: 8px;
	word-break: break-all;
	word-spacing: 700px;
}

.card .front .action,
.card .front .target,
.card .front .conditions,
.card .front .weight,
.card .front .ritual,
.card .front .durationshort {
	font-size: 10px;
	min-height: 12px;
	text-align: center;
	align-content: center;
	display: inline-flex;
	flex-direction: row;
}
.card .front .action,
.card .front .target {
	padding-bottom: 0px;
}
.card .front .action {
	grid-row: 2;
	grid-column: 1 / 9;
	text-align: left;
}
.card .front .body[data-flags~="R"] .action::after {
	position: relative;
	padding-left: 2px;
	content: "(Ritual)"
}
.card .front .target {
	grid-row: 2;
	grid-column: 3 / 7;
	padding-right: 2px;
	justify-content: flex-end;
}
.card .front .durationshort {
	padding-left: 2px;
	grid-row: 3;
	grid-column: 1 / 5;
	text-align: left;
}
.card .front .body[data-flags~="C"] .durationshort {
	text-transform: lowercase;
}
.card .front .body[data-flags~="C"] .durationshort::before {
	position: relative;
	padding-right: 2px;
	content: "Concentration, ";
	text-transform: capitalize;
}
.card .front .conditions,
.card .front .weight {
	grid-row: 3;
	grid-column: 5 / 7;
	padding-right: 2px;
	text-align: right;
	justify-content: flex-end;
}
.card .front .need {
	border-top: 1px solid;
}
.card .front .need,
.card .front .description {
	grid-row: 5;
	grid-column: 1 / 8;
	font-style: italic;
	font-size: 8px;
	border-bottom: 1px solid;
	padding: 1px;
	text-align: center;
}
.card .front .need:empty {
	border-top: 0;
	padding: 0px;
	height: 0px;
}

.card.card-right .need {
	position: absolute;
	visibility: hidden;
	display: grid;
}

.card .bottom {
	grid-row: 7;
	grid-column: 1 / 8;
	padding: 3px 4px;
	font-style: italic;
	font-size: 8px;
	border-radius: 5px;
	display: inline-flex;
	align-content: flex-end;
}
.card .bottom:empty {
	position: absolute;
	visibility: hidden;
}

.card .text {
	grid-row: 6;
	grid-column: 1 / 9;
	position: relative;
	padding: 2px 0px;
	margin: 0;
	z-index: 5;
}
.card .creature .text,
.card .race .text {
	padding: 0px;
}
.card .text.split::after {
    content: '⏵';
    position: absolute;
    display: inline-block;
}

.card.card-right .target,
.card.card-right .type,
.card.card-right .action,
.card.card-right .school,
.card.card-right .ritual,
.card.card-right .conditions,
.card.card-right .weight,
.card.card-right .duration,
.card.card-right .durationshort,
.card.card-right .level {
	visibility: hidden;
	position: absolute;
}

.card .creature .str,
.card .creature .dex,
.card .creature .con,
.card .creature .int,
.card .creature .wis,
.card .creature .cha,
.card .creature .prof {
	font-family: 'ScalySansRemake';
	font-size: 8px;
	grid-row: 2;
	text-align: center;
	padding-bottom: 1px;
}
.card .creature .str::before,
.card .creature .dex::before,
.card .creature .con::before,
.card .creature .int::before,
.card .creature .wis::before,
.card .creature .cha::before,
.card .creature .prof::before {
	font-size: 9px;
	font-weight: bold;
	line-height: 150%;
	text-transform: uppercase;
	word-spacing: 30;
}
.card .creature .str::after,
.card .creature .dex::after,
.card .creature .con::after,
.card .creature .int::after,
.card .creature .wis::after,
.card .creature .cha::after,
.card .creature .prof::after {
	content: '(' attr(data-mod) ')';
	padding-left: 1px;
}
.card .creature .ac[data-unarmoreddef]::after {
	content: '(' attr(data-unarmoreddef) ' Unarmored Defence)';
	padding-left: 3px;
}
.card .creature .str::before {
	content: "Str ";
}
.card .creature .dex::before {
	content: "Dex ";
}
.card .creature .con::before {
	content: "Con ";
}
.card .creature .int::before {
	content: "Int ";
}
.card .creature .wis::before {
	content: "Wis ";
}
.card .creature .cha::before {
	content: "Cha ";
}
.card .creature .str_mod,
.card .creature .dex_mod,
.card .creature .con_mod,
.card .creature .int_mod,
.card .creature .wis_mod,
.card .creature .cha_mod {	
	visibility: hidden;
	position: absolute;
}


.card .creature .prof:not(:empty)::before {
	content: "Prof ";
}

.card .poc {
	display: grid;
	grid-row: 1 / 6;
	grid-column: 7 / 9;
	width: 100%;
	object-fit: cover;
	filter: brightness(1.2);
}

.card .creature .scale_up {
	transform: scale(1.5);
}

.card .creature .hp {
	border-top: 1px solid;
	padding-top: 2px;
	padding-right: 17px;
}
.card .race .size,
.card .race .speed,
.card .race .age,
.card .race .alignment {
	grid-column: 1 / 9;
}
.card .race .speed {
	border-bottom: 1px solid;
}

.card .creature .hp,
.card .creature .ac,
.card .creature .speed,
.card .race .speed,
.card .race .size,
.card .race .age,
.card .race .alignment {
	grid-column: 1 / 9;
	display: flex;
}

.card .creature .hp::before,
.card .creature .ac::before,
.card .creature .speed::before,
.card .race .speed::before,
.card .race .size::before,
.card .race .age::before,
.card .race .alignment::before {
	font-weight: bold;
	flex: 0 0 29px;
}
.card .text>b.core {
	display: inline-block;
	min-width: 26px;
}
.card .text>b.damage,
.card .text *>b.damage,
.card .text>b.save,
.card .text *>b.save,
.card .text>i.check,
.card .text *>i.check,
.card .text>i.attack,
.card .text *>i.attack,
.card .text>b.hit,
.card .text *>b.hit {
	font-size: inherit;
}
.card .text>b.hit,
.card .text *>b.hit,
.card .text>b.bonus,
.card .text *>b.bonus,
.card .text>b.AC,
.card .text *>b.AC,
.card .text>b.DC,
.card .text *>b.DC  {
	font-weight: bold;
	/*font-style: italic;*/
	color: #58180D;
}
.card .text>b.damage,
.card .text *>b.damage,
.card .text>b.roll,
.card .text *>b.roll {
	font-weight: bold;
	/*font-style: italic;*/
	color: #58180D;
}
.card .text>b.save,
.card .text *>b.save{
	font-weight: bold;
	font-style: italic;
	color: #58180D;
}
.card .text>b.check,
.card .text *>b.check{
	font-weight: bold;
	font-style: italic;
	color: #58180D;
}
.card .text>i.attack,
.card .text *>i.attack {
	font-weight: bold;
	font-style: italic;
	color: #58180D;
}
.card .text>i.spell,
.card .text *>i.spell {
	/*font-weight: bold;*/
	font-style: italic;
	/*color: #58180D;*/
}
.card .need>b.gold {
	font-weight: bold;
	font-style: italic;
	font-size: inherit;
}

.card .creature .hp {
	grid-row: 3;
}

.card .creature .hp::before {
	content: "HP ";
}

.card .creature .ac {
	grid-row: 4;
}

.card .creature .ac::before {
	content: "AC";
}

.card .creature .speed {
	grid-row: 5;
}


.card .race .size {
	grid-row: 2;
}

.card .race .speed {
	grid-row: 3;
}

.card .race .age {
	grid-row: 4;
}

.card .race .alignment {
	grid-row: 5;
}

.card .race .text {
	grid-row: 4;
}



.card .creature .speed::before,
.card .race .speed::before {
	content: "Speed";
}

.card .race .size::before {
	content: "Size";
}
.card .race .age::before {
	content: "Age";
}
.card .race .alignment::before {
	content: "Align.";
}

.card .creature .prof
{
	grid-column: 7 / 9;
	color: transparent;
}
.card .creature .type,
.card .creature .size,
.card .creature .senses,
.card .alignment,
.card .age,
.card .front .ritual,
.card .duration,
.card .cost,
.card .consumed,
.card .type {

	visibility: hidden;
	position: absolute;
}

.card .ac,
.card .hp,
.card .creature .speed,
.card .text,
.card .text>b,
.card .text>i,
.card .text td,
.card .text th {
	font-size: 10px;
	line-height: 110%;
}

.card .ac.text2,
.card .hp.text2,
.card .speed.text2,
.card .size.text2,
.card .age.text2,
.card .alignment.text2,
.card .text.text2,
.card .text.text2>b,
.card .text.text2>i,
.card .text.text2 td,
.card .text.text2 th {
	font-size: 9.5px;
}

.card .ac.text3,
.card .hp.text3,
.card .speed.text3,
.card .size.text3,
.card .age.text3,
.card .alignment.text3,
.card .text.text3,
.card .text.text3>b,
.card .text.text3>i,
.card .text.text3 td,
.card .text.text3 th {
	font-size: 9.0px;
}

.card .ac.text4,
.card .hp.text4,
.card .speed.text4,
.card .size.text4,
.card .age.text4,
.card .alignment.text4,
.card .text.text4,
.card .text.text4>b,
.card .text.text4>i,
.card .text.text4 td,
.card .text.text4 th {
	font-size: 8.5px;
}

.card .ac.text5,
.card .hp.text5,
.card .speed.text5,
.card .size.text5,
.card .text.text5,
.card .text.text5>b,
.card .text.text5>i,
.card .text.text5 td,
.card .text.text5 th {
	font-size: 8.0px;
}

.card .ac.text6,
.card .hp.text6,
.card .speed.text6,
.card .size.text6,
.card .text.text6,
.card .text.text6>b,
.card .text.text6>i,
.card .text.text6 td,
.card .text.text6 th {
	font-size: 7.5px;
}

.card .ac.text7,
.card .hp.text7,
.card .speed.text7,
.card .size.text7,
.card .text.text7,
.card .text.text7>b,
.card .text.text7>i,
.card .text.text7 td,
.card .text.text7 th {
	font-size: 7.0px;
}

.card .ac.text8,
.card .hp.text8,
.card .speed.text8,
.card .size.text8,
.card .text.text8,
.card .text.text8>b,
.card .text.text8>i,
.card .text.text8 td,
.card .text.text8 th {
	font-size: 6.5px;
}
.card .text.text8>br
{
	line-height: 15%;
} 


.card .text table {
    border-collapse: separate;
}
.card table tr td:first-child,
.card table tr th:first-child,
.card table tr td.min,
.card table tr th.min {
	padding-left: 2px;
	width: 1%;
	white-space: nowrap;
}
.card table tr td:last-child,
.card table tr th:last-child {
	padding-right: 2px;
}

.card .text td,
.card .text th {
	padding: 0 3px 0 0;
}

.card .text .extraPadding td,
.card .text .extraPadding  th {
	padding-top: 1px;
}
.card .text>br {
	line-height: 40%;
}

.card .text>b.category {
	border-bottom: 1px solid;
	margin-bottom: 1px;
	display: block;
	font-size: 130%;
	line-height: 100%;
}

.card .text>b.higher {
	border-bottom: 1px solid;
	margin-bottom: 1px;
	display: block;
	font-family: 'MrEavesRemake';
}

.card th>b.header {
	padding-top: 3px;
	display: block;
	font-size: 110%;
	line-height: 100%;
	text-align: left;
}

/*
	colors
*/

.card * {
	color: black;
}
.card .front,
.card .back,
.card .backface {
	border-color: #C9AD6A;
}

.card .creature .str,
.card .creature .dex,
.card .creature .con,
.card .creature .int,
.card .creature .wis,
.card .creature .cha,
.card .creature .prof {
    background-color:#ffffff55;
}
.card .front .action,
.card .race .speed,
.card .race .size,
.card .front .conditions,
.card .front .weight,
.card .front .durationshort {
    background-color:#ffffff55;
}

.card table tr:nth-child(odd) td {
    background-color:#ffffff55;
}

.card .front .name,
.card .front .creature .hp,
.card .front .race .speed,
.card .front .need,
.card .front .description,
.card .front .text>b.category,
.card .front .text>b.higher {
	border-color: #C9AD6A;
}


.card .b-lt,
.card .b-rt,
.card .b-lb,
.card .b-rb,
.card .body .b-lt:after,
.card .body .b-rt:after,
.card .body .b-lb:after,
.card .body .b-rb:after,
.card .body .b-lt:before,
.card .body .b-rt:before,
.card .body .b-lb:before,
.card .body .b-rb:before {
	color: #C9AD6A;
}

.card .back .body *,
.card .level-1,
.card .level-2,
.card .back .line,
.card .backface .line,
.card .icon,
.card .icon-bot,
.card .icon-top,
.card .icon-bot {
	border-color: #58180D;
	color: #58180D;
}

.card .front .cr,
.card .front .level,
.card .front .name,
.card .front .slot-name,
.card .front .type_long {
	color: #58180D;
}

.card .text>b.category,
.card .text>b.higher,
.card th>b.header {
	color: #58180D;
}

.card .str::before,
.card .dex::before,
.card .con::before,
.card .int::before,
.card .wis::before,
.card .cha::before,
.card .str_mod::before,
.card .dex_mod::before,
.card .con_mod::before,
.card .int_mod::before,
.card .wis_mod::before,
.card .cha_mod::before {
	color: #58180D;
}

/*
	Background
*/

.card .backface .body,
.card .back .body {
	border-radius: 5px;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.card .backface .line,
.card .back .line {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
	position: relative;
	opacity: 0.8;
}

.card .backface .line *,
.card .back .line * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
}

.card .level-1 {
	font-size: 40px;
	position: absolute;
	top: 5px;
	right: 10px;
	display: block;
	text-align: right;
}

.card .level-2 {
	font-size: 40px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	display: block;
	text-align: left;
}

.card .b-lt,
.card .b-rt,
.card .b-lb,
.card .b-rb {
	border-bottom: 2px solid;
	border-top: 2px solid;
	height: 10px;
	width: 200%;
	position: absolute;
	zoom: 1;
	font-size: 18px;
	line-height: 0px;
	margin-top: -21px;
	margin-bottom: -21px;
	z-index: 2;
}

.card .b-lt:before,
.card .b-rt:before,
.card .b-lb:before,
.card .b-rb:before {
	font-family: "rpg-icons";
	display: block;
	width: 100%;
	height: 11px;
	font-size: 13px;
	margin-top: 0;
	font-style: normal;
	overflow: hidden;
	position: relative;
	line-height: 12px;
	content: "";
}

.card .b-lt:after,
.card .b-rt:after,
.card .b-lb:after,
.card .b-rb:after {
	font-family: "rpg-icons";
	display: block;
	width: 100%;
	height: 11px;
	font-style: normal;
	font-size: 13px;
	margin-top: 0;
	overflow: hidden;
	position: relative;
	line-height: 12px;
	margin-top: -24px;
	content: "";
}

.card .b-lb:before,
.card .b-rb:before,
.card .b-lb:after,
.card .b-rb:after {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.card .b-lb:before,
.card .b-rb:before {
	line-height: 17px;
}

.card .b-lb:after,
.card .b-rb:after {
	margin-top: 1px;
}

.card .b-lt {
	-moz-transform: rotate(-55deg);
	-o-transform: rotate(-55deg);
	-webkit-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	transform: rotate(-55deg);
	left: -75%;
	top: 25%;
}

.card .b-rt {
	-moz-transform: rotate(55deg);
	-o-transform: rotate(55deg);
	-webkit-transform: rotate(55deg);
	-ms-transform: rotate(55deg);
	transform: rotate(55deg);
	left: -25%;
	top: 25%;
}

.card .b-lb {
	-moz-transform: rotate(-55deg);
	-o-transform: rotate(-55deg);
	-webkit-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	transform: rotate(-55deg);
	left: -25%;
	bottom: 25%;
}

.card .b-rb {
	-moz-transform: rotate(55deg);
	-o-transform: rotate(55deg);
	-webkit-transform: rotate(55deg);
	-ms-transform: rotate(55deg);
	transform: rotate(55deg);
	left: -75%;
	bottom: 25%;
}

.card .icon {
	font-family: 'rpg-icons' !important;
	font-size: 130px;
	position: absolute;
	top: 50%;
	margin-top: -75px;
	width: 100%;
	text-align: center;
	font-style: normal;
	height: 150px;
	line-height: 150px;
}

/*
	page / print
*/
body {
	text-align: center;
}

.cardlist {
	width: 21cm;
	border: 1px solid #ccc;
	padding: 0mm;
	border-radius: 10px;
	font-size: 0;
	margin: 5mm auto;
}

@page {
	margin: 1.5cm 0.5cm 0.0cm 0.5cm;
	size: 210mm 297mm;
}

/*
.cardlist {
	width: calc(63mm + 2px);
}


@page {
	margin: 2.5mm;
	size: calc(63mm + 2 * 2.5mm) 
		  calc(88mm + 2 * 2.5mm);
}
*/


@media print {
	body,
	.cardlist {
		width: auto !important;
		border: 0;
		padding: 0;
		border-radius: 0;
		margin: 0;
	}
	.cardlist {
		margin-left: 1px;
	}
}