body
{
	margin: 0px;
	padding: 0px;
	font-family: cambria, serif;
	font-size: 1em;
	background-color: rgb(228 234 225); /* pale grey-green */

	/* Background image - prefer it without 
	background-image: url("highlands.jpg");
    background-position: top center;
	background-size: cover;
	background-attachment: fixed; /**/  
}

div.Content, div.content
{
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
}

div[data-custom-style="DisplayExpression"] p, div.DisplayExpression p
{
	text-align: center;
}

div[data-custom-style="Statblock"] p
{
	font-family: Arial, sans-serif;
	font-size: 0.85em;
	padding-left: 1em;
	text-indent: -1em;
}

p
{
	line-height: 1.25;
	margin-top: 1em;
	margin-bottom: 1em;
}

button.roll_button
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

div.copyright
{
	border-top: 1px rgb(13 64 24) solid;
	padding-top: 4px;
	font-size: 0.75em;
	color: rgb(13 64 24);
}

/* BODY TEXT INDENTING */

/* Currently disabled - looks better on print than web

div[data-custom-style="BodyIndent"] p, div.BodyIndent p
{
	text-indent: 1em;
	margin-top: 0em;
	margin-bottom: 0em;
}

div[data-custom-style="BodyLeader"] p, div.BodyLeader p
{
	margin-bottom: 0em;
}
*/

/* HEADINGS */

h1
{
	text-align: center;
	color: rgb(13 64 24); /* misty forest green */
	font-size: 2.25em;
	padding: 0.25em;
	font-variant: small-caps;
	border-bottom: 2px rgb(13 64 24) solid;
	padding-bottom: 0em;
	margin-top:0em;
}

h2
{
	background-color: rgb(13 64 24); /* misty forest green */
	font-size: 1.5em;
	color: white;
	border: 1px solid black;
	padding: 0.25em;
	padding-top: 0.2em;
	font-variant: small-caps;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h3
{
	background-color:rgb(219 228 205); /*yellow-green-grey*/
	border: 1px solid rgb(121 138 95); /*darker y-g-g*/
	font-size: 1.1em;
	color: black;
	padding: 0.25em;
	text-transform: uppercase;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}

/* PARAGRAPH */

/*p
{
	margin-block-start: 0.75em;
	margin-block-end: 0.75em;
}*/

/* TABLES */

table
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-family: calibri, sans-serif;
	border-collapse: collapse;
}

tr
{
	border-top: 1px solid darkgrey;
	border-bottom: 1px solid darkgrey;
}

tr.odd /* stripes */
{
	background-color:rgb(241 248 236); /* very pale green */
}

td, th
{
	padding: 0px;
}

td div p, th div p, td p, th p
{
	margin: 0px;
	padding-right: 0.5em;
	/*padding-left: 0.5em;*/
}

/* LISTS */

ol li p, ul li p
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0.25em;
}

/* LINKS IN TEXT */

a
{
	color: rgb(10 55 131); /* blue with hint of green */
}

a:visited
{
	color: rgb(68 11 107); /* dark purple */
}

a:active
{
	color: rgb(75 159 255); /* brighter blue */
}

/* MAIN MENU */

h1.MainTitle
{
	text-align: center;
	color: rgb(13 64 24); /* misty forest green */
	font-size: 2.25em;
	padding: 0.25em;
	font-variant: small-caps;
	border-bottom: 0em;
	border-top: 2px rgb(13 64 24) solid;
	padding-top: 0.25em;
	padding-bottom: 0em;
	margin-top:0em;
	margin-bottom:0.25em;
}
div.Subtitle
{
	text-align: center;
	color: rgb(13 64 24); /* misty forest green */
	font-size: 1.5em;
	padding: 0.25em;
	font-variant: small-caps;
	border-bottom: 2px rgb(13 64 24) solid;
	padding-bottom: 0.5em;
	margin-top:0em;
}

a.SectionButton
{	
	display:inline-block;
	padding:0.5em;
	margin-right:0.5em;
	background-color:rgb(219 228 205); /*yellow-green-grey*/
	border: 1px solid rgb(121 138 95); /*darker y-g-g*/

	color: black;
	text-decoration: none;
}

a.SectionButton:hover
{
	background-color:rgb(241 248 236); /* very pale green */
}

a.SectionButton2
{	
	display:inline-block;
	padding:0.5em;
	margin-right:0.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	background-color:rgb(219 228 205); /*yellow-green-grey*/
	border: 1px solid rgb(121 138 95); /*darker y-g-g*/

	color: black;
	text-decoration: none;
}

a.SectionButton2:hover
{
	background-color:rgb(241 248 236); /* very pale green */
}

/* NAVIGATION TO HEADERS */

div.LocalNav
{
	display:block;
	position:sticky; /* changes to static on tiny screens */
	bottom:0px;
	
	text-align:center;
	background-color:rgb(219 228 205); /*yellow-green-grey*/
	border: 1px solid rgb(121 138 95); /*darker y-g-g*/
	
	padding: 0.25em;
	padding-left:1em;
	padding-right:1em;

	margin-top: 0.5em;
	margin-bottom: -1em;
	margin-left:-1em;
	margin-right:-1em;
}

div.LocalNav a
{
	display:inline-block;
}

/* NAVIGATION MENU ON SUBPAGES */

a.FloatingBackButton
{
	display:block;
	padding:0.5em;
	position:sticky;
	top:0px;
	left:0px;
	color: white;
	background-color: rgb(13 64 24); /* misty forest green */
	border: 1px solid black; /*darker y-g-g*/
	text-decoration: none;	
	width:100%;
}

a.FloatingBackButton:hover, div.SideMenu a:hover
{
	background-color:rgb(24 99 41); /* lightened green */
	color: white;
}

div.Main
{
	display:block;
	margin:0px;
	padding:0px;
}

div.SideMenu
{
	display:none; /* toggled on with media selector below */
	position: fixed;
	left: 0;
	top: 0;
	width: 200px;
	height: 100%;
	background-color: rgb(13 64 24); /* misty forest green */
	
	/* add scrollbar if window is not tall enough */
	height: 100%;
	overflow: auto;
}

div.SideMenu a
{
	display:block;
	width:100%;
	margin:0em;
	text-align:left;
	padding:0.46em;
	box-sizing: border-box;
	color: white;
	background-color: rgb(13 64 24); /* misty forest green */
	text-decoration: none;
	border-bottom: solid 1px rgb(2 23 5); /* very dark green */
}

/* RESIZING FOR LARGE OR TINY WINDOW */

@media screen and (min-width: 800px)
{
	/* turn on the side menu and turn off the back button */
	div.SideMenu
	{
		display: block;
	}
	div.Main
	{
		margin-left:200px;
	}	
	a.FloatingBackButton
	{
		display: none;
	}
}

@media screen and (max-width: 400px) and (max-height:600px)
{
	div.LocalNav
	{	
		position:static;
	}
}

@media screen and (max-height:400px)
{
	div.LocalNav
	{	
		position:static;
	}
	a.FloatingBackButton
	{
		position:static;
	}
}