html, body { font-family: "Montserrat Thin", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif }
body>div.content {
	max-width: 60em;
	margin: 0 auto;
	line-height: 135%;
	background-color: #FFF;
	border-image: radial-gradient(white, transparent 70%) 49%;
	border-width: 2.5em;
	border-style: solid;
	padding: 0 1em 1em;
	background-clip: padding-box;
}
body              { background-color: #546 }
body.rules        { background-color: #336 }
body.charops      { background-color: #355 }
body.other        { background-color: #434 }
body.races        { background-color: #6AA }
body.snakes       { background-color: #8A6 }
body.etr.heroes   { background-color: #DB7 }
body.eth.heroes   { background-color: #ADA }
body.etr.villians { background-color: #66A }
body.eth.villians { background-color: #A66 }
.nope { text-decoration: line-through; }
.pc { color: #808 }
.na { text-decoration: line-through; }
li, ol { list-style-position: inside; text-indent: -1em; margin-left: 1em; }
ol.nonum { list-style: disc }
img { display: block }
dt { font-weight: bold; margin-top: 0.5em; clear: both; border-top: gray dotted 1px; }
body > dl > dd + dt,
dl+h2, dl+h3, p+h2/*, p+h3*/ {  padding-top: 0.5em; margin-top: 0.5em; clear: both; border-top: gray dotted 1px; }
dl+h2, p+h2 { border-top: gray solid 2px; }
dd dt { clear: none; border: none }
dd { text-indent: -2em; margin: .2em 0 .2em 4em; }
dd>ol, dd>ul { padding-left: 0; margin-top: 0; margin-bottom: 0 }
td>ol, td>ul { padding-left: 0; margin-left: 0 }
dd p { margin: 0.2em 0 }
.inline>li:after, .inline>dd:after { content: ', '; }
.inline>li:last-of-type:after, .inline>dd:last-of-type:after { content: '' }
.inline, .inline>* { display: inline; margin: 0; padding: 0 }
.illustration { float: right; margin: 0; border: 1px solid black; page-break-inside: avoid }
.fleft { float: left }
.noclear { clear: none }
.clear { clear: both }
.nob, .nob img { border: none }
td.spells, .spells dd, .spells li, .powers dd, .powers li { font-style: italic }
.spells .description, .powers .augment, .notpower, .notspell { font-style: normal }
.sublevels dl { font-size: 70% }
.sidebar { width: 40%; float: right; padding: 0.5em; border: 1px solid black; background: #EEE; text-indent: 0; margin-left: 0; }
.widebar { padding: 0.5em; border: 1px solid black; background: #EEE; text-indent: 0; margin: 0.5em 1em }
.note { color: #208; font-style: italic; }
.fluff { font-style: italic }
dd th, dd td { text-indent: 0 }
table.power { border-collapse: collapse; border: 0; width: 30em }
table.power th, table.power td { padding: 2px 3px 2px 2.1em; text-indent: -2em; }
table.atwill>tbody>tr          { color: #FFF; background: #060 }
table.encounter>tbody>tr       { color: #FFF; background: #600 }
table.daily>tbody>tr           { color: #FFF; background: #444 }
table.power .hit         { color: #000; background: #DDC }
table.power>tbody>tr+tr        { color: #000; background: #DDC; font-style: italic; font-size: 90% }
table.power>tbody>tr+tr+tr     { color: #000; background: #FFF; font-style: normal; font-weight: bold }
table.power>tbody>tr+tr+tr+tr  { font-weight: normal }
table.power th { font-weight: bold; text-align: left }
table.power .strong { font-weight: bold }
table.power th+th { text-align: right; font-size: 90%; font-weight: normal }
table.power>tbody>tr+tr, table.power .hit { background: linear-gradient(to right, #DDC, #FFF); }
table caption { font-weight: bold; }
table.gridded, table.vgridded { border-collapse: collapse }
.gridded th, .gridded td { padding: 0.3em 0.6em; border: 1px dotted #222 }
.gridded tr:nth-child(odd) { background-color: #DDD }
.vgridded th, .vgridded td { padding: 0.1em 0.3em; border-right: 1px dotted #222; border-left: 1px dotted #222 }
table.monster th { text-align: right }
table.monster th+th, table.monster td+th { text-align: center }
table.weapons tr { background-color: #FFF }
table.weapons tr.even { background-color: #FDB }
table.weapons { border-collapse: collapse; border: 1px solid black }
table.weapons th,
table.weapons td { padding: 0.2em 0.5em; }
table.weapons tfoot tr { background-color: #FFF; border-top: 1px solid black; font-size: .7em }
table.weapons tr.subhead th { font-weight: normal; font-style: italic; text-align: left; }
table.weapons tr>td { padding-left: 3em; text-align: left; }
table.weapons tr>td+td { padding-left: 0.5em; text-align: center }
@media print {
	.illustration { page-break-inside: avoid; }
	img { page-break-inside: avoid; }
	html, body { font-size: 8pt; }
}

body { margin: 1em 32px }
div.breadcrumb {
	overflow: hidden;
	position: fixed;
	background-color: transparent;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	/*top: 4em; left: -2.25em;*/
}
div.breadcrumb, div.breadcrumb a {
	display: block;
	width: auto; height: auto;
	border: 0;
	top: 0; left: 0;
	font-weight: bold;
	text-decoration: none;
}
div.breadcrumb a {
	font-size: 1.3em;
	padding: 1em 0.5em;
	text-shadow: 0 0 3px #000, 0 0 10px #000;
	/*text-stroke: .5px #000;
	-webkit-text-stroke: .5px #000;*/
}
div.breadcrumb a:link    { color: #CCC; text-decoration: none }
div.breadcrumb a:visited { color: #CCC; text-decoration: none }
div.breadcrumb a:hover   { color: #AAF; text-decoration: none }
div.breadcrumb a:active  { color: #FAA; text-decoration: none }