body {
	font-size: large;
	font-family: georgia, serif;
	color: #660000; /* A darker maroon */
	background-color: cornsilk;
}

h1 {
	color: red;
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.5em;
	clear: both;
	width: 6in;
}

h5 {
	font-size: large;
	font-weight: bold;
	font-style: italic;
	margin: 0.5em 0 0 0;
}

h6 {
	font-size: large;
	font-weight: normal;
	font-style: italic;
	margin: 0.5em 0 0 0;
}

p {
	text-indent: 0.25in;
	margin: 0;
	margin-bottom: 5px;
	padding: 0;
	width: 6in;
	clear: both;
	hyphens: auto;
}

em { /* co-opt the little-used <em> tag to do a different sort of emphasis than italicization */
	color: black;
	font-style: normal;
}

.pd2 { /* Use for the second spell of each level of planar domains */
    padding: .0em .0em .0em 1.5em;
	text-align: left;
	text-indent: -1em;
	margin: .0em .0em .0em 2em;
	border-bottom-style: dotted;
	border-width: 1px;
}

.right {
	text-align: right;
}

.cent {
	text-align: center;
}

.emp { /* Use when slight character color emphasis is needed */
	color: black;
}

.blue {
	color: blue;
}

.red {
	color: red;
}

.teal {
	color: teal;
}

.cmd {
	color: white;
	background-color: navy;
	font-family: helvetica, sans-serif;
	font-weight: bold;
}

.inv {
	color: transparent;
}

.most { /* Use when a lot of emphasis is needed */
	font-weight: bold;
	color: red;
}

.nomar {
	margin: 0;
}

.nobmar {
	margin-bottom: 0;
}

ol.super {
    counter-reset: item;
    padding: 0;
	margin: 0;
    list-style: none;
    }
	
    .super li:before{
    	content: counter(item) "";
        counter-increment: item;
    	position: absolute;	
    	vertical-align: super;
		color: blue;
		font-family: helvetica, sans-serif;
		font-weight: bold;
    	font-size: small;
		word-wrap: break-word;
    	left: 0em;
    }
   
    .super li{
	   	position: relative;
    	display: block;
    	padding: .0em .0em .0em 0.5em;
		text-align: left;
    }
	
ol.domain {
        counter-reset: item;
        padding: 0;
		margin: 0;
    	list-style: none;
    }
	
    .domain li:before{
    	content: counter(item) "";
        counter-increment: item;
    	position: absolute;	
		font-weight: bold;
		word-wrap: break-word;
    	left: 0em;
    }
   
    .domain li{
	   	position: relative;
    	display: block;
    	padding: .0em .0em .0em 1.5em;
		text-align: left;
		text-indent: -1em;
		margin: .0em .0em .0em 2em;
		hyphens: auto;
		width: 5.5in;
	}
	
ol.order {
        counter-reset: item -1;
        padding: 0;
		margin: 0;
    	list-style: none;
    }
	
    .order li:before{
    	content: counter(item) "";
        counter-increment: item;
    	position: absolute;	
		font-weight: bold;
		word-wrap: break-word;
    	left: 0em;
    }
   
    .order li{
		list-style: none;
	   	position: relative;
    	display: block;
    	padding: .0em .0em .0em 1.5em;
		text-align: left;
		text-indent: -1em;
		margin: .0em .0em .0em 2em;
		hyphens: auto;
		width: 5.5in;
	}

li {
	font-size: large;
	width: 6in;
}
ul.ast {
	list-style: none;
	padding-left: 0;
	position: relative;
	margin-left: 0px;
}

ul.ast li {
	padding-left: 12px;
}

ul.ast li:before {
	content: "*";
	position: absolute;
	left: 0px;
}

ul.qsrc {
	list-style: none;
	padding-left: 1em;
	position: relative;
	margin-left: 0px;
}

ul.qsrc li {
	max-width: 3in;
	padding-left: 3in;
}

ul.qsrc li:before {
	content: "—";
	position: absolute;
	left: 3in;
}

sup {
	font-size: x-small;
	font-family: helvetica, sans-serif;
	font-weight: bold;
	color: blue;
}

sup.reg {
	font-size: x-small;
	font-family: georgia, serif;
	font-weight: normal;
	color: #660000; /* A darker maroon */
}

a {
	color: magenta;
	text-decoration: none;
}

/* visited link 
a:visited {
  color: green;
}*/

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

s {
  text-decoration: line-through black solid 5px;
}

.box {
	background-color: bisque;
	max-width: 5.5in;
	border: 5px solid darkkhaki;
	padding: 10px;
	margin: 20px;
}

.box p {
	width: 5.5in;
}

table.plain { /* For when a striped table is not wanted */
	margins: 0;
	padding: 0;
	border-spacing: 0;
}

table.plain td {
	text-align: left;
	font-family: helvetica, sans-serif;
}

table.plain tr {
	background: transparent;
}

table { /* standard striped table */
	border-collapse: collapse;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

table.center {
	margin-left: auto;
	margin-right: auto;
}

caption {
	margin-bottom: 0.5em;
	text-align: left;
	font-weight: bold;
	font-size: large;
}

tr:nth-child(even) {
	background-color: khaki;
}

thead {
	position: sticky;
	top: 0;
	background: cornsilk;
	inset-block-start: 0;
}

tfoot {
	position: sticky;
	bottom: 0;
	background: cornsilk;
	inset-block-end: 0;
}

th {
	text-align: center;
	vertical-align: bottom;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
}

td {
	text-align: center;
	padding: 2px;
	padding-right: 10px;
	vertical-align: top;
}

figure {
  /* border: 1px #cccccc solid; */
  /* padding: 4px; */
	margin: auto;
	width: 600px;
}

figcaption {
  /* background-color: black; */
  /* color: white; */
  font-size: medium;
  font-style: italic;
  /* padding: 2px; */
  text-align: center;

}

ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.txt2 { /* Two-column text layout */
	column-count: 2;
	column-gap: 36px;
	column-width: 270px;
	max-width: 6in;
	word-wrap: break-word;
}

.txt2 p {
	text-indent: -25px;
	padding: 0 0 0 25px;
	margin: 0;
	width: 270px;
	clear: both;
	hyphens: auto;
}

.txt3 { /* Three-column text layout */
	column-count: 3;
	column-gap: 18px;
	column-width: 180px;
	max-width: 6in;
	word-wrap: break-word;
}

.txt3 p {
	/* font-family: helvetica, sans-serif; */
	text-indent: -25px;
	padding: 0 0 0 25px;
	margin: 0;
	width: 160px;
	clear: both;
	hyphens: auto;
}

.txt3 h2 {
	font-size: large;
	text-align: center;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	page-break-after: avoid;
    break-after: avoid;
	width: 160px;
	clear: both;
	hyphens: none;
	background-color: khaki;
}

.col-bord td:nth-child(even) {
	border-right: 1px solid #660000;
}

.col1-left td:nth-child(1) {
    text-align: left;
}

.col2-left td:nth-child(2) {
    text-align: left;
}

.col3-left td:nth-child(3) {
    text-align: left;
}

.col4-left td:nth-child(4) {
    text-align: left;
}

.col5-left td:nth-child(5) {
    text-align: left;
}

.col6-left td:nth-child(6) {
    text-align: left;
}
.col7-left td:nth-child(7) {
    text-align: left;
}

.col8-left td:nth-child(8) {
    text-align: left;
}

.col9-left td:nth-child(9) {
    text-align: left;
}

.col10-left td:nth-child(10) {
    text-align: left;
}

.col11-left td:nth-child(11) {
    text-align: left;
}

.col12-left td:nth-child(12) {
    text-align: left;
}

.col1-right td:nth-child(1) {
    text-align: right;
}

.col2-right td:nth-child(2) {
    text-align: right;
}

.col3-right td:nth-child(3) {
    text-align: right;
}

.col4-right td:nth-child(4) {
    text-align: right;
}

.col5-right td:nth-child(5) {
    text-align: right;
}

.col6-right td:nth-child(6) {
    text-align: right;
}

.col7-right td:nth-child(7) {
    text-align: right;
}

.col8-right td:nth-child(8) {
    text-align: right;
}

.col9-right td:nth-child(9) {
    text-align: right;
}

.col10-right td:nth-child(10) {
    text-align: right;
}

.col11-right td:nth-child(11) {
    text-align: right;
}

.col12-right td:nth-child(12) {
    text-align: right;
}

iframe {
	border: 1px solid goldenrod;
	margin: 0;
	padding: 0;
}

.add {
	padding-left: 0.25em;
	border-left: 5px solid green;
}

.add li {
	margin-left: 1em;
}

.hb {
	padding-left: 0.25em;
	border-left: 5px solid purple;
}

.feat {
	padding-left: 0.25em;
	border-left: 5px solid goldenrod;
}
.feat2 {
	padding-left: 0.25em;
	border-left: 10px double goldenrod;
}

.warn {
	padding-left: 0.25em;
	border-left:5px solid red;
}

.warn li {
	margin-left: 1em;
}

.stick {
	position: sticky;
	top: 0;
	background: cornsilk;
}

.rel {
	position: relative;
}

.tleft {
	text-align: left;
}

.tright {
	text-align: right;
}

.ulined {
	margin: 0;
	padding: 0;
	border-bottom-style: solid;
	width: 6in;
	margin-bottom: 0.25em;
}

.ulthin {
	margin: 0;
	padding: 0;
	border-bottom-style: solid;
	border-width: 1px;
	width: 6in;
	margin-bottom: 0.25em;
}

.olthin {
	margin: 0;
	padding: 0;
	border-top-style: solid;
	border-width: 1px;
	width: 6in;
	margin-top: 0.25em;
}

.stripped {
	border-style: none;
	border-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.left { /* remove indent */
	text-indent: initial;
}

.ind {
	text-indent: 25px;
}

.ind2 {
	text-indent: 50px;
}

.hind { /* hanging indent */
	text-indent: -25px;
	padding-left: 25px;
	margin: 0;
}

.hind2 { /* hanging indent with a bit more */
	text-indent: -25px;
	padding-left: 50px;
	margin: 0;
}

.first { /* Leading paragraphs: remove indent, add top margin */
	text-indent: initial;
	margin-top: 0.5em;
}

.ctxt { /* Color text: remove indent, add top margin, italicize */
	text-indent: initial;
	font-style: italic;
	margin-top: 0.5em;
}

.last { /* add space back to bottom of paragraph */
	margin-bottom: 0.5em;
}

.book { /* used when citing a source */
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 2px;
	padding-left: 0.12em;
	text-indent: initial;
	background-color: lightcyan;
	color: navy;
	border: 1px solid navy;
	border-left: 5px solid navy;
}
.side { /* used when a "sidebar" is needed */
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 2px;
	padding-left: 0.12em;
	text-indent: initial;
	background-color: mintcream;
	color: navy;
	border: 1px solid turquoise;
	border-left: 5px solid turquoise;
}

.unfin { /* used when giving an "unfinished" warning */
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 2px;
	padding-left: 0.12em;
	text-indent: initial;
	font-size: x-large;
	background-color: #FFCCFF; /* very light pink */
	color: black;
	border: 1px solid red;
	border-left: 5px solid red;
	hyphens: none;
}
/* Example:
<p class="unfin"><b class="smcap">Unfinished:</b> Some elements of this section are missing or incomplete.</p>
*/

.bord { /* used for examples and offsetting from surrounding text */
	border: 1px solid;
	padding: 4px;
	max-width: 6.1in;
}

.code { /* used for code blocks */
	font-family: "Courier New", monospace;
	font-weight: bold;
	text-indent: initial;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid midnightblue;
	padding: 1em;
	background-color: white;
	color: midnightblue;
	width: 600px;
}

.hilit {
	background-color: khaki;
}

.nolit {
	background-color: transparent;
}

/* default background color */
.unlit { 
	background-color: cornsilk;
}

.smcap {
	font-variant: small-caps;
}

.sans {
	font-family: helvetica, sans-serif;
}

.sansb {
	font-family: helvetica, sans-serif;
	font-weight: bold;
}

.form { /* remove indent, add top and bottom margin, boldface */
	text-indent: initial;
	text-align: center;
	font-weight: bold;
	font-family: helvetica, sans-serif;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 600px;
}

.btn-norm.btn { /* Used for normal use */
	background-color: #660000; /* A darker maroon */
	border: 2px solid cornsilk;
	border-radius: 12px;
	color: cornsilk;
	font-size: large;
	font-family: georgia, serif;
/*	font-stretch: normal; */
	padding: 3px 3px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition: 0.3s;
	cursor: pointer;
	float: left;
	margin-bottom: 0.5em;
	width: 200px;
}

.btn-norm .btn:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

.btn-norm .btn:hover {
	background-color: red;
}

.btn-slnav .button { /* Used for navigating spells lists */
	background-color: #660000; /* A darker maroon */
	border: 2px solid cornsilk;
	border-radius: 12px;
	color: cornsilk;
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	font-stretch: condensed;
	padding: 3px 3px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition: 0.3s;
	cursor: pointer;
	float: left;
	margin-bottom: 0.5em;
	width: 40px;
}

.btn-slnav .button:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

.btn-slnav .button:hover {
	background-color: red;
}

.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.clr { /* Use on next style after a button bar. */
	clear:both;
}

/* Spell and magic item statistics block <div> class start */

.smistat {
	width: 6in;
	hyphens: auto;
	text-indent: 0;
	margin: 0;
	padding: 0;
	clear: both;
}

.smistat p {
	text-indent: -0.25in;
	padding-left: 0.25in;
	margin: 0;
}

/* Spell and magic item statistics block <div> class end */

/* Creature statistics block <div> class start */

.statblock {
    width: 605px;
    height: 100%;
    overflow: auto;
    border: none;
}

.statblock table {
    border-spacing: 0;
}

.statblock th {
    border: none;
    padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0;
	padding-right: 10px;
    width: 390px;
    min-width: 390px;
    position: static;
    top: 0;
    color: #660000; /* A darker maroon */
    font-weight: bold;
	text-align: left;
}

.statblock td {
    border: none;
    padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0;
	padding-right: 10px;
    width: 390px;
    min-width: 390px;
	text-align: left;
}

.statblock th:nth-child(1), .statblock td:nth-child(1) {
    position: sticky;
    left: 0;
	padding-right: 5px;
    width: 200px;
    min-width: 200px;
	text-align: right;
	background: cornsilk;
	font-weight: bold;
}

/* Creature statistics block <div> class end */

/* Tooltip class start */
.has-tt {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	text-indent: initial;
}

.has-tt .tt-txt {
	visibility: hidden;
	width: 400px;
	background-color: darkblue;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	padding: 5px 5px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 5%;
	margin-left: -5px;
	opacity: 0;
	transition: opacity 0.5s;
}
.has-tt .tt-txt::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 5%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.has-tt:hover .tt-txt {
	visibility: visible;
	opacity: 1;
}

/* Example use:
Try to hover <span class="has-tt">over me</span><span class="tt-txt">This is the tooltip text.</span>!
 */

/* Tooltip class end */

/* Index style that makes a collapsed accordion page index: start */
 /* Style the buttons that are used to open and close the accordion panel */
.index {
  background-color: navy;
  color: lightcyan;
  cursor: pointer;
  padding: 3px;
  width: 6in;
  text-align: left;
  border: none;
  outline: none;
  transition: 1s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .index:hover {
  background-color: #green;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: .05in;
  width: 5.9in;
  background-color: snow;
  display: none;
  overflow: hidden;
}

/*
Skeleton HTML code needed to have a Page Index:

<button class="index"><b>Click here to show or hide Page Index</b></button>
<div class="panel">
<ul>
	<li></li>
</ul>
</div>

Javascript needed for the Index style to work on a page 

<script>
var acc = document.getElementsByClassName("index");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Index style that makes a collapsed accordion page index: end */