body {
	margin: 0px;
	background-color: black;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	min-height: 100%;
}
#banner {
	display: none;
}
.home-title {
	display: block;
	text-align: center;
	margin: 0 auto;
}
div.home-background-rect {
	border-radius: 18px;
	padding: 8px 8px 8px 8px;
}
img.home-logo {
	width: 100%;
	max-width: 580px;
}
img.glow-on-hover {
	transition: opacity .25s ease-in-out;
}
img.click-to-expand {
	cursor: pointer;
}
div.foundry-import-link {
	float: right;
	width: 200px;
	text-align: right;
}
/*Homepage Slideshow CSS*/
ul.slideshow {
	position: relative;
	height: 340px;
	width: 100%;
	list-style-type: none;
	vertical-align: top;
}
li.slide {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	text-align: center;
	transition: opacity 0.75s linear;
}
li.slide.active {
	opacity: 1;
	z-index: 2;
}
li.slide img {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
}
.slideshow-link {
	display: block;
	text-align: center;
}
.slideshow-link img {
	width: 50%;
	max-width: 128px;
}

div.tab-container {
	display: block;
	width: 100%;
	height: 480px;
	overflow-y: scroll;
}

div.dots {
	text-align: center;
}
div.dot {
	cursor: pointer;
	display: inline-block;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	border-radius: 50%;
	transition: background-color 0.75s ease;
}

/*Navigation Bar Styling*/
#navigation {
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	text-align: left;
	vertical-align: middle;
	width: 100%;
	margin: 0px;
}
#navigation #hamburger {
	display: inline-block;
	padding: 10px;
}
#navigation #searchButton {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 4;
	width: 10%;
	max-width: 52px;
}
#magnifyingGlass {
	width: 50px;
}
#searchForm {
	display: block;
	margin: 0 auto;
}
#searchForm form {
	margin-block-end: 0;
}
#searchForm input {
	border: none;
	outline: none;
}
#navigation #logo {
	display: inline-block;
	width: 40%;
	max-width: 283px;
}
#navigation #logo img {
	width: 100%;
}
.hamburger-icon div {
	width: 35px;
	height: 5px;
	margin: 6px 0;
}

#menu {
	position: fixed;
	height: 100%;
	width: 0;
	z-index: 4;
	top: 0;
	left: 0;
	background-color: #222;
	overflow: hidden;
	padding-top: 60px;
	transition: 0.5s;
}
#menu.expanded {
	width: 250px;
}
#menu a {
	padding: 8px 8px 8px 32px;
	width: 250px;
	text-decoration: none;
	font-size: 1.5em;
	display: block;
	transition: 0.3s;
}
#menu #close {
	position: absolute;
	top: 0;
	right: 25px;
	width: auto !important;
	font-size: 1.5em;
	margin-left: 50px;
}
#menu #discord-link {
	position: absolute;
	bottom: 60px;
	width: 250px;
	text-align: center;
}
#discord-link a {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	max-width: 250px;
}
#discord-link img {
	width: 84px;
	margin: 0 auto;
	display: block;
	transition: 0.3s;
}

/*Search page*/
div.search-result {
	display: block;
	transition: background-color .25s linear;
	margin-top: 5px;
	padding-top: 5px;
	border-radius: 5px;
}
div.result-icon {
	display: inline-block;
	width: 10%;
	text-align: center;
}
div.result-icon img {
	display: block;
	margin: 0 auto;
	width: 60%;
	max-width: 48px;
}
div.result-text {
	display: inline-block;
	width: 80%;
	text-align: left;
}
span.spell-slot-icon {
	padding: 3px;
	border-radius: 10px;
}

/*Footer*/
#footer {
  display: block;
	text-align: center;
	width: 100%;
	max-width: 1366px;
	margin: 0 auto 10px auto;
	padding-top: 3px;
}
#footer p {
    margin: 0 auto;
    color: #DDD;
}

#content-pane {
	display: block;
	margin: 0 auto;
	overflow: auto;
	padding-top: 1px;
	width: 100%;
	max-width: 1366px;
	overflow: hidden;
}
#upper-spacer {
	display: block;
	width: 100%;
	height: 62px;
}
#srd-navigator, #wiki-navigator { /* If a navigation sidebar is displayed, it will load its own style that overrides this */
	width: 0px;
	display: none;
}
#page-main {
	display: block;
	margin: 0 auto;
	padding-top: 2px;
	width: 90%;
}
/*Preview Banners*/
div.env-banner {
  display: inline-block;
	vertical-align: bottom;
	text-align: center;
	width: 40%;
	font-family: Segoe UI, Helvetica, sans-serif;
	color: yellow;
}
div.env-banner a:link, div.env-banner a:visited {
	color: yellow;
	text-decoration: underline;
}

/*Page Body Content*/
body.transparent #content-pane p {
	text-align: center;
	margin: 10px auto;
}
#page-main p {
	text-align: left;
	max-width: 90%;
}
#page-main hr {
    width: 90%;
    border-bottom: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}
.ampText-normal {
	font-weight: bold;
}
.rollButton {
	cursor: pointer;
}

/*Alternate styling*/
body.transparent div#content-pane, body.transparent div.spacer {
	text-align: center;
}
div.draft {
	background-image: url("/resources/watermark.png");
	background-repeat: repeat;
}

/*Page Elements*/
.grid-container {
	font: inherit;
	width: 80%;
	display: block;
	margin: 0 auto;
	text-align: center;
}
.grid-container .grid-5 {
	width: 18%;
	display: inline-block;
}
.grid-container .grid-4 {
	width: 23%;
	display: inline-block;
}
.grid-container .grid-light-4 {
	display: inline-block;
	font: inherit;
	margin: 4px;
	width: 22%;
	border-radius: 2px;
	text-align: center;
}
.grid-container .grid-3 {
	width: 30%;
	display: inline-block;
}
.grid-container .grid-light-3 {
  display: inline-block;
	font: inherit;
	margin: 8px;
	padding: 5px;
	width: 30%;
	border-radius: 3px;
	text-align: center;
}
.grid-container .grid-light-2 {
  display: inline-block;
	font: inherit;
	margin: 10px;
	width: 46%;
	border-radius: 3px;
	text-align: center;
	vertical-align: top;
}
.grid-container .grid-2 {
	display: inline-block;
	font: inherit;
	margin: 10px;
	width: 46%;
	text-align: center;
	vertical-align: top;
}
.grid-icon-borderless {
	display: block;
	width: 50%;
	margin: 0 auto;
}
.grid-img-full {
	display: block;
	width: 80%;
	margin: 0 auto;
}
img.right-graphic-sm {
	float: right;
	max-width: 10%;
}
img.right-graphic-md {
	float: right;
	max-width: 30%;
}
.resource-cost {
	float: right;
	width: 20%;
	font-size: 2em;
	font-family: ArchitectsDaughter, sans-serif;
	color: #EE77EE;
}
.resource-cost img {
	display: inline;
	width: 20%;
	vertical-align: middle;
}
.article-image {
	float: right;
	max-width: 30%;
	padding: 4px;
	margin: 10px;
	font: inherit;
}
.article-image-wide {
	float: right;
	max-width: 40%;
	padding: 4px;
	margin: 10px;
	font: inherit;
}
.article-image img, .article-image-wide img {
	display: block;
	margin: 0 auto;
	width: 85%;
}
.article-image p, .article-image-wide p {
	display: block;
	margin: 0 auto;
	font: inherit;
	font-size: 12px;
	text-align: center;
}
.col-right-md {
    float: right;
    max-width: 30%;
    padding: 10px;
    margin: 10px;
    font: inherit;
}
.col-right-md img {
    display: block;
    width: 80%;
    max-width: 512px;
    margin: 0 auto;
}
.col-right-md ul {
    list-style-type: none;
    padding-left: 0;
}
.col-left-lg {
    max-width: 60%;
    display: block;
    padding: 10px;
    font: inherit;
}
.full-wide-block {
	display: block;
	width: 95%;
	margin: 0 auto;
	float: none;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
.full-wide-block h3 {
	text-align: center;
}
.col-right-md table, .col-left-lg table, .full-wide-block table {
    display: table;
    width: 90%;
    margin: 0 auto;
    border: 0;
    font: inherit;
}
.col-multi-container {
    display: flex;
    margin: 0 auto;
    width: 90%;
}
.col-2 {
    flex: 50%;
}
.col-3 {
    flex: 33%;
}
.table-separator {
    height: 8px;
}
.caption {
    font-size: 12px;
}
.icon {
    display: inline;
}
.info-banner {
    display: block;
    max-width: 60%;
    font: inherit;
    text-align: center;
}
.spoiler-alert-minor {
    display: block;
    max-width: 60%;
    font: inherit;
    text-align: center;
}
.spoiler-alert-major {
	display: block;
	max-width: 60%;
	font: inherit;
	text-align: center;
}
table.spell-list {
	margin: 0 auto;
	width: 80%;
	border: 0px;
	border-collapse: collapse;
}
.spell-tier{
	display: block;
	margin-bottom: 2px;
	font-weight: bold;
	font-size: 28px;
}
p.spell-type {
	margin-top: 4px;
	margin-bottom: 4px;
}
div.scene {
	padding: 6px;
	margin-left: 3em;
	border-radius: 3px;
}
div.scene img {
	display: inline-block;
	width: 10%;
	vertical-align: middle;
}
div.scene p {
	display: inline-block;
	width: 86%;
	vertical-align: middle;
}
td.spell-header {
	text-align: center;
}

#redirected {
	display: block;
	text-align: center;
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
	margin-top: 6px;
}
.fam-navigator h3 {
	display: inline-block;
	width: 58%;
	text-align: center;
}
.iconlink img, .inline-h3-icon {
	display: inline;
	width: 32px;
	height: 32px;
	margin: 2px 2px;
	vertical-align: middle;
}
.h3-icon {
	width: 32px;
	height: 32px;
	margin: 2px 2px;
}
img.inline-h1-icon {
	display: inline;
	max-width: 48px;
	vertical-align: middle;
}
.home-social {
	margin-left: 6px;
	margin-right: 6px;
}
img.inline-keyword-icon, .inline-keyword-icon img {
	display: inline;
	width: 18px;
	weight: 18px;
	margin: 0px 0px;
	vertical-align: middle;
}
h2 a.link-with-icon img.inline-keyword-icon {
	display: inline;
	width: 32px;
	weight: 32px;
	margin: 0px 0px;
	vertical-align: middle;
}
a.link-with-icon {
	white-space: nowrap;
}
.class-table {
	margin: 0 auto;
	width: 80%;
	border-collapse: collapse;
}
.class-table th {
	text-align: left;
}
.class-table tr td {
	padding: 4px;
}
.hidden-table {
	margin: 0 auto;
	width: 50%;
	border: 0px;
	font: inherit;
}
.table-comp-container {
	width: 90%;
	margin: 0 auto;
}
.table-comp-title {
	width: 100%;
	margin: 0 auto;
}
.table-comp-title h4 {
	display: inline-block;
	width: 80%;
}
.table-comp-title a, .step-container a {
	display: inline-block;
	text-decoration: none;
	border-radius: 1em;
	padding: 0 1em;
}
.table-comp {
	padding-bottom: 3px;
}
/*Link/Share Component */
.srd-link-share {
	float: right;
	width: 30%;
}
.srd-link-share img {
	width: 15%;
	display: inline-block;
}
.srd-link-share .share-content {
	width: 80%;
	display: inline-block;
	text-align: center;
}
h3.source-info {
	float: right;
	text-align: right;
}
/* Tooltips */
.tooltip {
	position: relative;
	display: block;
}
.tooltip .tooltiptext {
	font-size: 0.7em;
	visibility: hidden;
	width: 300px;
	text-align: center;
	border-radius: 4px;
	padding: 5px 0;
	position: absolute;
	z-index: 4;
	top: 125%;
	left: 20%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tabs {
	float: right;
}
.tabButton {
	display: inline-block;
	text-decoration: none;
	border-radius: 1em;
	padding: 0 1em;
	cursor: pointer;
}
.tabButton.active {
	font-weight: bold;
}
.tabContent {
	display: none;
	width: 100%;
}
.tier {
	font-size: 20px;
}
.tier-large {
	font-size: 72px;
	float: left;
	margin-right: 10px;
}
img.srd-contents-logo {
	width: 80%;
	display: block;
	margin: 0 auto;
}
div.srd-main-container img.srd-contents-logo {
	display: none;
}
div.srd-main-container h3 {
	text-align: center;
	font-weight: bold !important;
}
div.map-container {
	width: 100%;
	min-height: 700px;
	margin: 0 auto;
	cursor: pointer;
}
hr.hidden-separator {
	border: none !important;
}

div.calist-collapse {
	column-count: 3;
  	column-gap: 1em;
}
div.char-ability {
	display: inline-block;
	width: calc(100% - 1em);
	margin: 0 0 1em;
  	padding: 5px;
}
div.spell-detail-emblem {
	float: right;
	position: relative;
	width: 20%;
	text-align: center;
}
div.spell-detail-emblem h1 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 2;
	text-align: left;
}
div.spell-detail-emblem img {
	width: 100%;
}

/*Image layering CSS for potion bottles*/
div.layered-image-container {
	position: relative;
	top: 0px;
	left: 0px;
}
img.potion-underlay {
	position: relative;
	width: 100%;
	top: 0px;
	left: 0px
}
img.potion-bottle {
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 2
}
p.version-number {
	text-align: center;
	font-size: 0.8em;
}
div.alignment {
	display: inline-block;
	border-radius: 2px;
	margin: 3px;
	padding: 2px;
	background-color: white;
	vertical-align: middle;
	max-height: 20px;
}
div.alignment img {
	display: inline;
	width: 18px;
	height: 18px;
	margin: 2px;
	margin-right: 4px;
	vertical-align: middle;
}
div.alignment span {
	vertical-align: middle;
	font-size: 12px;
	color: #295470;
}
/* TODO Unique Alignment colors */


/*Mobile styling overrides - must remain at bottom of master CSS*/
@media screen and (max-device-width: 540px){
	#navigation #logo {
		width: 50%;
		max-width: 511px;
	}
	#menu.expanded {
		width: 100%;
	}
	#menu a {
		width: 100%;
		font-size: 4em;
	}
	#menu #close {
		font-size: 6em;
	}
	#magnifyingGlass {
		width: 120px;
	}
	#navigation #searchButton {
		width: auto;
		max-width: 120px;
	}
	#upper-spacer {
		height: 128px;
	}
	.hamburger-icon div {
		width: 70px;
		height: 10px;
		margin: 12px 0;
		margin-right: 8px;
	}
	div#slideshow-parent {
		height: 600px;
	}
	ul.slideshow {
		border-left: none;
		height: 400px;
		font-size: 2em;
	}
	#content-pane {
		min-height: calc(100% - 7em);
	}
	.col-right-md, .article-image, .right-graphic-sm, .right-graphic-md {
		display: block;
		width: 80%;
		max-width: 80%;
		margin: 0 auto;
		float: none;
	}
	.col-left-lg {
		display: block;
		width: 90%;
		margin: 0 auto;
		float: none;
	}
	.grid-container .grid-5 {
		width: 30%;
	}
	.grid-container .grid-4, .grid-container .grid-light-4 {
		width: 46%;
	}
	.grid-container .grid-3, .grid-container .grid-light-3, .grid-container .grid-2, .grid-container .grid-light-2 {
		display: block;
		width: 80%;
	}
	div.home-bottom-container {
		flex-direction: column !important;
	}
	div.home-block-container {
		height: 520px !important;
	}
}