body { background-color: #9c7339; color: #2b2100; font-family: Caslon, CaslonExt, "Adobe Caslon Pro", "Adobe Caslon Pro 2", serif; margin: 0; padding: 0; }
#content { background:  #f0ebd5 url('back.jpg') repeat-y; width: 715px; padding: 20px; border: 0; margin-left: auto; margin-right: auto; }
a:link, a:visited { color:#413719; }
a:hover { color:#826e32; }
a:active { color:#c36e32; }
th, td { padding: 0 1em; text-align: left; }
.divider { padding: 0; margin: 0; border: 0; }
.divider td { padding: 0; margin: 0; border: 0; text-align: center; color: #aa7; font-size: 8pt; font-style: italic; }
.script { font-size: 120%; font-style: italic; }
h2, h3, h4, h5, h6 { font-style: italic; }
h2 { font-weight: normal; font-size: 140%; border-bottom: 1px solid #ac8400; }
hr { color: white; background: #f0ebd5; border: 0; border-bottom: 1px dashed #aa7; }
dd { font-weight: bold; }
#footer { padding: 2em; color: #ac8400; font-style: italic; text-align: center; font-size: 80%; }
section h1 { font-family: "Times New Roman", "Nimbus Roman No9 L", serif; font-weight: normal; font-style: italic; font-size: 16pt; }
section section { margin-left: 2em; }
section section h1 { font-family: "Times New Roman", "Nimbus Roman No9 L", serif; font-weight: bold; font-style: italic; font-size: 14pt; }
span.quote { display: block; margin-left: 2em; }
.parchment { text-align: center; }
.parchment pre { text-align: left; border: 2px inset #9c7339; background: #feefd0; padding: 1em; display: inline-block; }
.parchment pre.drow { font-family: Drow; }
.parchment pre.hand { font-family: Hand; font-size: 16pt; }
table.divider { border: none; border-collapse: collapse; width: 100%; }
table.divider tr, table.divider td { border: none; }
table.divider td.wide { width: 40%; }
table.divider td.narrow { width: 20%; }
table.centred td { text-align: center; }
table.collapsed { border-collapse:collapse; }
table.collapsed, table.collapsed tr, table.collapsed td { border:1px solid #000; }
table.collapsed td { padding: 0.25em; vertical-align: top; }
.tt { font-family: monospace; }
.strike { text-decoration: line-through; }
.big { font-size: 150%; }
.small { font-size: 85%; }
sup, sub { font-size: 85%; }
.small sup, .small sub { font-size: 75%; }
.nobr { white-space: nowrap; }
.main-head { font-family: CaslonExt; font-size: 200%; font-weight: bold; }
ul { list-style-type: none; }
ul li:before { content: "\261E "; font-family: CaslonExt; font-size:16pt; margin-left:-20pt;  }
.gallery { float:right; clear:both; padding:0 0 0.2em 1em; font-size:8pt; text-align:center; max-width:120px; }
.breakout { float:right; background: #f0ebd5; border:1px solid #ac8400; border-width:1px 3px 3px 1px; padding:0.2em; max-width:120px; font-size:90%; }
.breakout strong { color: #ac8400; }
img { max-width: 100%; }

.card { font-family: "DejaVu Sans Condensed", "Arial Narrow", "DejaVu Sans", sans-serif; font-size:10.5pt; background:#fff; margin:0.5em; padding:0; border:2px solid #000; border-radius: .5em; }
.card div { margin:0.5em 0.5em 0.5em 1.5em; padding-left:1.5em; }
.card div div { padding-left:0; }
.card .title { margin:0; padding:0.5em; background:#999; color:#fff; font-weight:bold; border-radius: .45em .45em 0 0; }
.card .property:before { content: "Property: "; margin-left:-1.5em; font-weight:bold; }
.card .power:before { content: "Power: "; margin-left:-1.5em; font-weight:bold; }
.card .power-X:before { content: "Power (Recharge \2684\2685 \2726 Arcane, Necrotic): "; margin-left:-1.5em; font-weight:bold; }
.card .attack:before { content: "Attack: "; margin-left:-1.5em; font-weight:bold; }
.card .hit:before { content: "Hit: "; margin-left:-1.5em; font-weight:bold; }
.card .effect:before { content: "Effect: "; margin-left:-1.5em; font-weight:bold; }
.card .after-effect:before { content: "After-Effect: "; margin-left:-1.5em; font-weight:bold; }
.card .requires:before { content: "Requires: "; margin-left:-1.5em; font-weight:bold; }
.card .script { font-family: "DejaVu Serif Condensed", "DejaVu Serif", sans-serif; font-size: 10.5pt; }

.card .icon { display:inline; margin:0; padding:0; }
.card .icon.burst:before { content:"A "; font-family: Icons; font-weight:bold; }
.card .icon.blast:before { content:"C "; font-family: Icons; font-weight:bold; }
.card .icon.melee:before { content:"M "; font-family: Icons; font-weight:bold; }
.card .icon.ranged:before { content:"R "; font-family: Icons; font-weight:bold; }
.card .icon.burst.basic:before { content:"a "; font-family: Icons; font-weight:bold; }
.card .icon.blast.basic:before { content:"c "; font-family: Icons; font-weight:bold; }
.card .icon.melee.basic:before { content:"m "; font-family: Icons; font-weight:bold; }
.card .icon.ranged.basic:before { content:"r "; font-family: Icons; font-weight:bold; }

@media only screen and (max-width:775px) {
	#content { width: 90%; width: calc(100% - 20px); margin-left: 0; margin-right: 0; padding: 20px 10px; background-position-x: center; }
}

@font-face{ font-family: Caslon; src: url("caslon-r.otf") format("opentype"); }
@font-face{ font-family: Caslon; font-weight:bold; font-style:normal; src: url("caslon-b.otf") format("opentype"); }
@font-face{ font-family: Caslon; font-weight:normal; font-style:italic; src: url("caslon-i.otf") format("opentype"); }
@font-face{ font-family: Caslon; font-weight:bold; font-style:italic; src: url("caslon-bi.otf") format("opentype"); }
@font-face{ font-family: CaslonExt; src: url("caslonext.ttf") format("truetype"); }
@font-face{ font-family: Icons; src: url("icons.ttf") format("truetype"); }
@font-face{ font-family: Drow; src: url("drow.ttf") format("truetype"); }
@font-face{ font-family: Hand; src: url("hand.ttf") format("truetype"); }