/*
Theme Name: FFD20
Author: Azurift
Version: 1.61
*/
@font-face {
	font-family: 'Yanone Kaffeesatz';
	font-style: normal;
	font-weight: 400;
	src: url('./webfonts/YanoneKaffeesatz-Regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Candara2';
	font-style: normal;
	font-weight: 400;
	src: url('./webfonts/Candara-Regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Candara2';
	font-style: normal;
	font-weight: 700;
	src: url('./webfonts/Candara-Bold.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Candara2';
	font-style: italic;
	font-weight: 400;
	src: url('./webfonts/Candara-Italic.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Candara2';
	font-style: italic;
	font-weight: 700;
	src: url('./webfonts/Candara-Bold-Italic.woff2') format('woff2');
	font-display: swap;
}

:root {
	--ffd20-main-bg-color: #FFF;
	--ffd20-main-text-color: #222;
	--ffd20-footer-bg-color: #E8E8E8;
	--ffd20-link-color: #0000FF;
	--ffd20-border-color: #999;
	--ffd20-row-hover-color: #fffb93;
	--ffd20-section-color: #c9e1f7;
	--ffd20-sidebar-parent-color: #00E8E8;
	--ffd20-sidebar-color-1: #0000FF; 
	--ffd20-sidebar-color-2: #000000;
	--ffd20-color-scheme: light;
	color-scheme: var(--ffd20-color-scheme);
}

* { 
	box-sizing: border-box; 
}

body {
	margin: 0;
    padding: 0;
	font-family: 'Candara','Candara2', Arial, sans-serif;
	font-size: 18px;
	background-color: var(--ffd20-main-bg-color);
	color: var(--ffd20-main-text-color);
}

body.logged-in {
	margin-top: 32px;
}

#content {
	margin: 0 auto;
	max-width: 1440px;
	padding: 1em;
}

p, em {
	line-height: 1.45em;
}

a:visited,
a:link {
	color: var(--ffd20-link-color);
}

a:hover {
	color: var(--ffd20-sidebar-parent-color);
}

th a:hover {
	color: var(--ffd20-main-text-color);
}

header {
	height: 150px;
	margin: 0;
	background: url("./img/banner-background2.png");
	background: url("./img/banner-background.webp");
	background: url("./img/banner-background.avif");
	background-repeat: repeat-x;
	background-color: var(--ffd20-main-bg-color);
}

#header-container, #footer-container {
	margin: 0 auto;
	position: relative;
	max-width: 1440px;
	padding: 1em;
	height: 100%;
}

footer {
	border-top: 1px solid var(--ffd20-border-color);
	text-align: right;
	height: 150px;
	background-color: var(--ffd20-footer-bg-color);
}

#footer-left-section {
	display: flex;
	position: absolute;
	top: 1em;
	left: 1em;
	text-align: left;
}

#footer-note {
	font-size: 12px;
}

#widget-area {
	float: right;
	height: 110px;
}

#latest-news {
	padding: 5px;
	background-color: var(--ffd20-main-bg-color);
	border-radius: 5px;
	margin: 1px;
}


h3.class-power {
	color: white;
	background-color: teal !important;
}


img#new-update {
	vertical-align: middle;
	margin: -5px 0 -5px 5px;
}

#latest-news p {
	margin: 0;
}

#logo img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#hamburger {
	position: absolute;
	right: 10px;
	bottom: 0;
	width: 50px;
	height: 45px;
	background-color: transparent;
	padding: 13px 11px;
	display: none;
	cursor: pointer;
	border-right: 1px solid var(--ffd20-sidebar-parent-color);
}

#hamburger div {
    width: 26px;
    height: 3px;
    background-color: var(--ffd20-sidebar-parent-color);
    margin: 5px 0;
	border-radius: 2px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 8px);
    transform: rotate(-45deg) translate(-6px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -6px);
    transform: rotate(45deg) translate(-6px, -6px);
}

#hamburger div:first-of-type {
    margin: 0;
}

.page-header {
	position: relative;
}

p.page-ancestors {
	font-weight: bold;
}

nav.page-descendants {
	float: left;
	display: block;
	width: 260px;
	font-size: 15px;
	border: 1px solid var(--ffd20-border-color);
	border-radius: 5px;
	padding: 20px;
	margin-right: 20px;;
	background-color: var(--ffd20-footer-bg-color);
	overflow-y: scroll;
	max-height: calc(100vh - 111px);
}

.table-of-contents-wrapper {
	float: right;
	height: 30px;
	user-select: none;
}

.table-of-contents-section {
	width: 300px;
	position: absolute;
	right: 0px;
	top: 0px;
	font-size: 15px;
	border: 1px solid var(--ffd20-border-color);
	color: var(--ffd20-main-text-color);
	background-color: var(--ffd20-main-bg-color);
	border-radius: 3px;
}

.table-of-contents,
.table-of-contents ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ffd20-border-color);
	position: relative;
}

.table-of-contents ul {
	margin-left: 15px;
}

.table-of-contents:before,
.table-of-contents ul:before {
	content: "";
	display: block;
	width: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-left: 1px dotted;
}

.table-of-contents li {
	margin: 5px 0;
	padding-left: 15px;
	position: relative;
}

.table-of-contents li:before {
	content: "";
	display: block;
	width: 10px;
	height: 0;
	border-top: 1px dotted;
	margin-top: -1px; 
	position: absolute;
	top: 10px;
	left: 0;
}

.table-of-contents li:last-child:before {
	background: var(--ffd20-main-bg-color); /* same with body background */
	height: auto;
	top: 10px;
	bottom: 0;
}

.table-of-contents-header {
	background-color: var(--ffd20-section-color) !important;
	font-weight: bold;
	padding: 0 5px;
	height: 32px;
	line-height: 32px;
}

.table-of-contents-body {
	padding: 5px;
	max-height: 400px;
	overflow-y: scroll;
}

#main h5 {
	border-bottom: 1px solid var(--ffd20-border-color);
	border-top: 1px solid var(--ffd20-border-color);
	margin: 10px 0;
	padding: 1px 0;
	text-transform: uppercase;
}

#main h3 {
	padding: 3px;
	margin: 10px 0;
	background-color: var(--ffd20-section-color);
	clear: both;
}

#main h1 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: normal;
	font-size: 2.5em;
}

h1.page-title {
	margin: 20px 310px 20px 0;
}

h3.post-title {
	margin: 10px 0 0 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
}

table.class-power {
	border: 1px solid var(--ffd20-border-color);
	width: 50%;
	float: left;
	border-collapse: collapse;
	margin-right: 10px;
}

table.class-power + table.class-power::after {
	content: "";
	display: table;
	clear: both;
}

table.class-power th {
	background-color: red;
	text-align: left;
	color: var(--ffd20-main-bg-color);
}

table.class-power td, th {
	padding: 5px;
}

p.post-info {
	color: #888;
	font-size: 15px;
}

p.search-info {
	color: #006621;
	word-wrap: break-word;
}

p.results {
	font-size: 15px;
	color: var(--ffd20-border-color);
}

p.no-content {
	padding: 10px;
}

div.page-content {
	overflow: hidden;
}

div.container {
	margin: auto;
	position: relative;
}

div.post {
	border-bottom: 1px dotted #999999;
	margin: 10px 0;
}

div.search {
	margin: 10px 0 20px 0;
}

div.search:last-of-type {
	margin: 10px 0 10px 0;
}

div#paginated-links {
	text-align: center;
	margin: 10px;
}

div.post:last-of-type {
	border: none;
}

div.post-content {
	margin-bottom: 10px;
}

div.page {
	border-radius: 3px;
}

#sidebar {
	float: left;
	display: block;
	width: 280px;
	font-size: 15px;
	color: #FFF;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0f13ff+0,000728+100 */
	background: rgb(38, 35, 230); /* Old browsers */
    background: -moz-linear-gradient(-45deg, var(--ffd20-sidebar-color-1) 20%, var(--ffd20-sidebar-color-2) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, var(--ffd20-sidebar-color-1) 20%, var(--ffd20-sidebar-color-2) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, var(--ffd20-sidebar-color-1) 20%, var(--ffd20-sidebar-color-2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f13ff', endColorstr='#000728',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	position: sticky;
	top: 0;
	overflow-y: scroll;
	border-style: solid;
	border-width: 3px;
	-moz-border-image: url("./img/border.png") 3;
	-webkit-border-image: url("./img/border.png") 3;
	-o-border-image: url("./img/border.png") 3;
	border-image: url("./img/border.png") 3;
	border-radius: 5px;
	padding: 5px 8px;
	height: 100vh;
}

#nav-meta {
	color: var(--ffd20-main-text-color);
	font-weight: bold;
	margin: 0 auto;
	display: inline-block;
}

#nav-meta ul:before, #nav-meta ul:after {
	content: "";
	display: table;
}

#nav-meta ul:after { clear: both; }

#nav-meta ul {
	list-style: none;
	padding: 0;
	margin: 0;
	color: var(--ffd20-main-text-color);
	zoom: 1;
}

#nav-meta li {
	display: block;
	padding: 0 8px;
	float: left;
	border-right: 1px solid var(--ffd20-border-color);
	margin-bottom: 5px;
}

#nav-meta li:last-of-type {
	padding: 0 0 0 8px;
}

#nav-meta li:last-of-type {
	border-right: none;
}

#nav-main ul {
	list-style: none;
	padding: 0 0 0 15px;
	margin: 0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

li.menu-item {
	margin: 1px 0;
}

li.menu-item a {
	display: inline-block;
	line-height: 24px;
	height: 24px;

}

#nav-main ul.sub-menu {
	display: none;
}

ul.sub-menu {
	margin: 0;
	padding: 0 0 0 15px;
}

#menu-item-94 > ul.sub-menu,
#menu-item-100 > ul.sub-menu,
#menu-item-1046 > ul.sub-menu,
#menu-item-143 > ul.sub-menu,
#menu-item-72 > ul.sub-menu,
#menu-item-85 > ul.sub-menu,
#menu-item-732 > ul.sub-menu,
#menu-item-734 > ul.sub-menu {
	display: block;
}

#nav-main ul li.current-menu-ancestor > ul.sub-menu,
#nav-main ul li.current-menu-item > ul.sub-menu {
	display: block;
}

.current-menu-item > a {
	font-style: italic;
	font-weight: bold;
}

#nav-main ul li.current-menu-item > a {
	color: #FFF548 !important;
}

#nav-main ul li a {
	text-decoration: none;
	color: #FFF;
}

#nav-main .current-menu-ancestor > a:first-of-type {
	color: var(--ffd20-sidebar-parent-color);
}

li#menu-item-30204 ul.sub-menu li a:first-of-type,
li#menu-item-30322 ul.sub-menu li a:first-of-type,
li#menu-item-30471 ul.sub-menu li a:first-of-type,
li#menu-item-30473 ul.sub-menu li a:first-of-type {
	color: #FFF;
}

#nav-main ul li a:hover {
	text-decoration: underline;
}

.expandButton {
	float: left;
	width: 11px;
	height: 11px;
	background: url("img/arrowdown.png") no-repeat;
	margin-left: -17px;
	margin-top: 7px;
}

.expandButton:hover {
	filter: invert(100%);
}

.collapsed {
	transform: rotate(-90deg);
}

#main {
	margin-left: 300px;
}

#main p {
	margin: 0;
}

#main p + p {
	margin: 1em 0 0 0;
}

#main ul {
	border-collapse: separate;
}

#main ul li,
#main ol li {
	line-height: 1.45em;
}

.copyright-notice {
	font-size: 12px;
	height: 600px;
	overflow-y: scroll;
}

.tableHeader {
	padding: 3px;
	margin: 10px 0 0 0;
	background-color: var(--ffd20-section-color);
	color: var(--ffd20-main-text-color);
	font-weight: bold;
	text-align: center;
	font-size: 13px;
}

.tableHeader a {
	text-decoration: none;
}
.tableHeader a:hover {
	text-decoration: underline;
	color: var(--ffd20-main-text-color);
}

.tableContainer {
	background-color: var(--ffd20-footer-bg-color);
	overflow: hidden;
}

.tableList {
	margin: 5px 5px 0 5px;
	padding: 5px;
	border: 1px solid var(--ffd20-border-color);
	background-color: var(--ffd20-main-bg-color);
	font-size: 15px;
}

.tableList ul {
	padding-left: 25px;
	margin: 5px 0;
}

.tableList li {
	margin: 3px 0;
}

#spell-jump-box {
	text-align: center;
}

#jump-box {
	margin: 20px 0 0 0;
}

p.small-title-center{
	text-align: center;
	font-size: 110%;
	font-weight: bold;
}

.cr {
	text-align: right;
	vertical-align: top;
	float: right;
	width: 100px;
	font-size: 150%;
}

i.heading-link {
	display: none;
	border-radius: 5px;
	padding: 2px 1px;
	cursor: pointer;
	position: absolute;
	transform: translate(0.25em, 0);
}

h3 i.heading-link {
	border: 1px solid var(--ffd20-main-bg-color);
	background-color: var(--ffd20-section-color);
}

h2 i.heading-link {
	border: 1px solid var(--ffd20-section-color);
	background-color: var(--ffd20-main-bg-color);
}

h2.tablepress-table-name i.heading-link {
	transform: translate(1px, -4px);
	font-size: 20px;
}

i.heading-link:active {
	color: var(--ffd20-sidebar-parent-color);
}

h2:has(i.heading-link:hover),
h3:has(i.heading-link:hover) {
	color: var(--ffd20-link-color);
}

h1:hover i.heading-link,
h2:hover i.heading-link,
h3:hover i.heading-link,
h4:hover i.heading-link,
h5:hover i.heading-link,
h6:hover i.heading-link {
	display: inline;
}

/* TABLES */

.tablepress {
	width: auto !important;
	clear: none !important;
}

.tablepress:not(.dataTable) {
	margin: 0 0 1em 0 !important;
}

.tablepress-table-description {
	margin-bottom: 10px;
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_wrapper .tablepress {
	clear: none !important;
}

.dataTables_wrapper { max-width: 1400px; }

.tablepress .row-hover tr:hover td {
	background-color: var(--ffd20-row-hover-color) !important;
}

.table-container-right {
	margin: 0 0 10px 10px;
	float: right;
	width: 50%;
}

.table-container-left {
	margin: 0 10px 10px 0;
	float: left;
	width: 50%;
}

.table-container-left h2.tablepress-table-name,
.table-container-right h2.tablepress-table-name {
	margin: 0 0 5px 0;
}

h2.tablepress-table-name {
	clear: both;
	margin: 20px 0 0 0;
	font-size: 15px;
}

.tablepress-table-description {
	font-size: 0.8em;
}

.tablepress td {
	color: var(--ffd20-main-text-color) !important;
	padding: 2px 4px !important;
	border: 1px solid var(--ffd20-border-color) !important;
	text-align: center !important;
	line-height: 1.45em !important;
	font-size: 15px;
}

td {
	line-height: 1.45em !important;
}

.tablepress th {
	color: var(--ffd20-main-text-color) !important;
	padding: 2px 4px !important;
	text-align: center !important;
	border: 1px solid var(--ffd20-border-color) !important;
	background-color: var(--ffd20-section-color) !important;
	font-size: 13px;
	height: 25px;
}

.tablepress th a {
	text-decoration: none;
}

.tablepress th a:hover {
	text-decoration: underline;
}

.tablepress:not(.frontpage) td.column-1 { white-space: nowrap; }

.tablepress tr:nth-child(even) {
	background-color: var(--ffd20-footer-bg-color) !important;
}

.class-basic,
.class-bard,
.class-magic,
.class-powers,
.bestiary,
.frontpage {
	width: 100% !important;
}

.fullwidth {
	width: 100% !important;
}

table.fixed-column-width {
	table-layout: fixed;
	width: 100% !important;
}

table.fixed-column-width td,
table.fixed-column-width th {
	white-space: nowrap;
	overflow: hidden;
}

table.bestiary {
	table-layout: fixed;
}

table.bestiary th.column-1, table.bestiary td.column-1 { width: 16em; }
table.bestiary th.column-2, table.bestiary td.column-2 { width: 4em; }
table.bestiary th.column-3, table.bestiary td.column-3 { width: 6em; }
table.bestiary th.column-4, table.bestiary td.column-4 { width: 7em; }
table.bestiary th.column-5, table.bestiary td.column-5 { width: 26em; }
table.bestiary th.column-6, table.bestiary td.column-6 { width: 12em; }

table.creature-magic th.column-1, table.creature-magic td.column-1 { width: 13em; }

table.bestiary td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.classes th.column-1 { width: 10em; }
.classes th.column-3 { width: 4em; }
.classes th.column-4 { width: 11em; }
.classes th.column-5 { width: 4em; }
.classes th.column-6 { width: 4em; }
.classes th.column-7 { width: 4em; }
.classes th.column-8 { width: 4em; }
.classes td.column-1,
.classes td.column-2 { text-align: left !important; }

.normal td { text-align: left !important; }

th.sorting {
	padding-right: 20px !important;
}

.left-align-1st-column td.column-1 { text-align: left !important; }
.left-align-2-columns td.column-1, .left-align-2-columns td.column-2 { text-align: left !important; }

.variable-width { width: auto !important; }

.two-column td { width: 50%; }
.three-column td { width: 33%; }
.four-column td { width: 25%; }
.five-column td { width: 20%; }

.races td.column-1 { text-align: left !important; width: 10em; }
.races th.column-2 { width: 3em; }
.races th.column-3 { width: 3em; }
.races th.column-4 { width: 3em; }
.races th.column-5 { width: 3em; }
.races th.column-6 { width: 3em; }
.races th.column-7 { width: 3em; }
.races th.column-8 { width: 5em; }
.races th.column-9 { width: 4em; }
.races td.column-10 { text-align: left !important; }

.class-basic th.column-1 { width: 4em; }
.class-basic th.column-2 { width: 13em; }
.class-basic th.column-3 { width: 4em; }
.class-basic th.column-4 { width: 4em; }
.class-basic th.column-5 { width: 4em; }
.class-basic td.column-6 { text-align: left !important; }

.class-powers th.column-1 { width: 16em; }
.class-powers th.column-2 { width: 14em; }
.class-powers td.column-1 { text-align: left !important; }
.class-powers td.column-2 { text-align: left !important; }
.class-powers td.column-3 { text-align: left !important; }

.class-powers-no-prereq th.column-1 { width: 16em; }
.class-powers-no-prereq td.column-1 { text-align: left !important; }
.class-powers-no-prereq td.column-2 { text-align: left !important; }

.class-magic th.column-1 { width: 4em; }
.class-magic th.column-2 { width: 13em; }
.class-magic th.column-3 { width: 4em; }
.class-magic th.column-4 { width: 4em; }
.class-magic th.column-5 { width: 4em; }
.class-magic td.column-6 { text-align: left !important; }
.class-magic th.column-7 { width: 4em; }
.class-magic th.column-8 { width: 4em; }

.class-bard th.column-1 { width: 4em; }
.class-bard th.column-2 { width: 13em; }
.class-bard th.column-3 { width: 4em; }
.class-bard th.column-4 { width: 4em; }
.class-bard th.column-5 { width: 4em; }
.class-bard td.column-6 { text-align: left !important; }
.class-bard th.column-7 { width: 4em; }
.class-bard th.column-8 { width: 4em; }
.class-bard th.column-9 { width: 4em; }
.class-bard th.column-10 { width: 4em; }

.beastmaster-companion th.column-1 { width: 3em; }
.beastmaster-companion th.column-2 { width: 3em; }
.beastmaster-companion th.column-3 { width: 3em; }
.beastmaster-companion th.column-4 { width: 3em; }
.beastmaster-companion th.column-5 { width: 3em; }
.beastmaster-companion th.column-6 { width: 3em; }
.beastmaster-companion th.column-7 { width: 3em; }
.beastmaster-companion th.column-8 { width: 3em; }
.beastmaster-companion th.column-9 { width: 8em; }
.beastmaster-companion th.column-10 { width: 4em; }
.beastmaster-companion th.column-11 { width: 4em; }
.beastmaster-companion td.column-12 { text-align: left !important; }

.spells th.column-1 { width: 12em; }
.spells td { text-align: left !important; }

.feats th.column-1, .feats th.column-2 { width: 12em; }
.feats td { text-align: left !important; }

.traits th.column-1 { width: 12em; }
.traits td { text-align: left !important; }

.alchemical-items th.column-1 { width: 12em; }
.alchemical-items th.column-2 { min-width: 16em; }
.alchemical-items th.column-3 { width: 9em; }
.alchemical-items th.column-4 { width: 8em; }
.alchemical-items th.column-5 { width: 18em; }
.alchemical-items th.column-6 { width: 4em; }
.alchemical-items th.column-7 { width: 11em; }

.magical-items th.column-1 { width: 12em; }
.magical-items th.column-3 { width: 8em; }
.magical-items th.column-5 { width: 4em; }

.materia th.column-1 { width: 12em; }
.materia th.column-3 { width: 7em; }
.materia th.column-4 { width: 7em; }
.materia th.column-5 { width: 7em; }

.cybertech th.column-2 { width: 8em; }
.cybertech th.column-3 { width: 8em; }
.cybertech th.column-4 { width: 9em; }

.firearms th.column-2 { width: 6em; }
.firearms th.column-3 { width: 8em; }
.firearms th.column-4 { width: 4em; }
.firearms th.column-5 { width: 6em; }
.firearms th.column-6 { width: 4em; }
.firearms th.column-7 { width: 6em; }
.firearms th.column-8 { width: 6em; }
.firearms th.column-9 { width: 6em; }
.firearms th.column-10 { width: 8em; }

.race-points {
	width: auto !important;
}

.race-points .column-1 { 
	background-color: var(--ffd20-section-color);
	white-space: nowrap;
	font-weight: 700;
}

.race-points td {
	text-align: left !important;
}

.race-points td.column-3 {
	text-align: center !important;
}

.gear th.column-2 { width: 6em; }
.gear th.column-3 { width: 4em; }
.gear th.column-4 { width: 8em; }

.nowrap td { white-space: nowrap; }

img.alignright { float: right; margin: 1em; }
img.alignleft { float: left; margin: 1em; }
.page table img.alignright { float: right; margin: 0 0 1em 1em; }
.page table img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.alignright { float: right; margin: 0 0 1em 1em;}
.alignleft { float: left; margin: 0 1em 1em 0;}
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; }
.floatleft { float: left; width: 50%; }
.center-column-1 td.column-1 { text-align: center !important; }
.center-column-2 td.column-2 { text-align: center !important; }
.center-column-3 td.column-3 { text-align: center !important; }
.center-column-4 td.column-4 { text-align: center !important; }
.center-column-5 td.column-5 { text-align: center !important; }

.flex-container {
	display: flex;
}

p + .flex-container {
	margin: 1.2em 0 1.2em 0;
}

.flex-left-section {
	flex: 1;
}

.flex-right-section {
	margin: 0 1em;
}

.flex-right-section h2.tablepress-table-name {
	margin: 0;
}

.visible {display: block;}

form.search {
	display: flex;
}

input.form-control {
	font-size: 16px;
	padding: 4px 6px;
	flex: 1;
	height: 100%;
}

input, textarea {
	font-size: 16px;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
  }

.themeswitch {
	position: relative;
	width: 90px;
	text-align: left;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select: none;
}

.themeswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.themeswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid #999999;
	border-radius: 20px;
}

.themeswitch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
}

.themeswitch-inner:before, .themeswitch-inner:after {
	display: block;
	float: left;
	width: 50%;
	height: 25px;
	padding: 0;
	line-height: 25px;
	font-size: 14px;
	color: white;
	font-family: Trebuchet, Arial, sans-serif;
	font-weight: bold;
    box-sizing: border-box;
}

.themeswitch-inner:before {
    content: "DARK";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}

.themeswitch-inner:after {
    content: "LIGHT";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

.themeswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid #999999; border-radius: 20px;
}

.themeswitch-checkbox:checked + .themeswitch-label .themeswitch-inner {
    margin-left: 0;
}

.themeswitch-checkbox:checked + .themeswitch-label .themeswitch-switch {
    right: 0px; 
}

.dataTables_paginate .paginate_button:not(.disabled) {
	color: var(--ffd20-main-text-color) !important;
}

.dataTables_paginate .paginate_button .disabled {
	color: var(--ffd20-border-color) !important;
}

.colSidebarColors {
	height: 29px;
}

.horizontal-scrolling {
	display: block !important;
	overflow-y: auto;
	width: 100%;
	margin: 1em 0;
}

.sticky-1st-column .column-1 {
	position: sticky;
	left: -1px;
	text-align: center !important;
	border: 1px solid var(--ffd20-border-color) !important;
	color: var(--ffd20-main-text-color) !important;
	background-color: var(--ffd20-section-color) !important;
	font-weight: bold;
	box-shadow: inset -1px 0 0 0 var(--ffd20-border-color), inset 1px 0 0 0 var(--ffd20-border-color);
}

.one-star {
    color: #ff0000;
    font-weight: bold;
    margin: 0px;
    padding-left: 1.25em;
    background-image: url('./img/one_star.png');
	background-image: url('./img/one_star.webp');
	background-image: url('./img/one_star.avif');
    background-repeat: no-repeat;
    background-size: 1em;
}

.two-star {
    color: #ff6600;
    font-weight: bold;
    margin: 0px;
    padding-left: 1.25em;
    background-image: url('./img/two_star.png');
	background-image: url('./img/two_star.webp');
	background-image: url('./img/two_star.avif');
    background-repeat: no-repeat;
    background-size: 1em;
}

.three-star {
    color: #008000;
    font-weight: bold;
    margin: 0px;
    padding-left: 1.25em;
    background-image: url('./img/three_star.png');
	background-image: url('./img/three_star.webp');
	background-image: url('./img/three_star.avif');
    background-repeat: no-repeat;
    background-size: 1em;
}

.four-star {
    color: #00ccff;
    font-weight: bold;
    margin: 0px;
    padding-left: 1.25em;
    background-image: url('./img/four_star.png');
	background-image: url('./img/four_star.webp');
	background-image: url('./img/four_star.avif');
    background-repeat: no-repeat;
    background-size: 1em;
}

@keyframes flash {
    0% {
        color: var(--ffd20-main-text-color);
    }
    50% {
		color: var(--ffd20-main-bg-color);
		background-color: var(--ffd20-link-color);
	}	
    100% {
        color: var(--ffd20-main-text-color);
    }
}

.flash {
	animation: flash 1s ease;
} 

.flash a {
	animation: inherit;
}

@media only screen and (max-width: 768px) {

	body.logged-in {
		margin-top: 0;
	}

	nav.page-descendants {
		display: none;
	}

	.page-content img {
		display: block;
		margin: 0 auto 20px auto;
		max-width: 100%;
		height: auto;
	}

	.page-content table img.alignleft,
	.page-content table img.alignright { 
		float: none;
		display: block;
		margin: 20px auto 20px auto; 
		max-width: 100%;
	}

	img.alignleft { float: none; }
	img.alignright { float: none; }
	.alignleft { float: none; }
	.alignright { float: none; }

	html,
	body {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		-webkit-overflow-scrolling: touch;
		font-size: 17px;
	}

	header, #header-container, #footer-container {
		padding: 0;
	}

	header img#banner-foreground {
		display: none;
	}

	#logo img {
		max-width: 100%;
		height: auto;
	}

	#content {
		padding: 1em 0;
	}

	div.container {
		padding: 0;
		top: 45px;
	}

	#sidebar {
		position: fixed;
		top: 45px;
		display: none;
		font-size: 20px;
		z-index: 98;
		width: 100%;
		height: calc(100% - 45px);
		overflow: auto;
	}

	#sidebar ul {
		padding: 0 0 0 25px;
	}

	#sidebar li {
		margin: 12px 0;
	}

	#sidebar .expandButton {
		width: 17px;
		height: 17px;
		margin-left: -26px;
		margin-top: 4px;
        background-size: 100%;
	}

	#main {
		margin-left: 0;
		width: 100%;
		padding: 0;
	}


	div.page {
		border-left: none;
		border-right: none;
		border-radius: 0;
		margin: 0 10px;
	}

	h2.tablepress-table-name {
		margin: 20px 0 0 0;
		font-size: 12px;
	}

	.table-container-right {
		float: none;
		width: 100%;
		margin: 0;
	}

	.table-container-left {
		float: none;
		width: 100%;
		margin: 0;
	}

	#main table {
		width: 100%;
	}

	.tablepress td {
		padding: 2px !important;
		font-size: 9px;
	}

	.tablepress th {
		padding: 2px !important;
		font-size: 8px;
	}

	#widget-area {
		position: fixed;
		top: 0;
		margin: 0;
		padding: 0 10px;
		right: 0;
		width: 100%;
		background-color: var(--ffd20-sidebar-color-1);
		height: 45px;
		z-index: 99;
	}

	p.page-ancestors {
		padding: 0;
		margin: 0 10px !important;
	}

	#hamburger { display: block; }

	footer {
		text-align: center;
		padding: 10px 0;
	}

	.flex-container {
		display: block;
	}

	.flex-right-section {
		margin: 0;
	}

	.flex-right-section h2.tablepress-table-name {
		margin: 20px 0 0 0;
	}

	.floatleft { float: none; width: 100%; }

	form.search {
		width: calc(100% - 50px);
		height: 45px;
	}

	input.form-control {
		font-size: 16px;
		padding: 4px 6px;
		flex: 1;
		height: 100%;
		background-color: transparent;
		color: white;
		border: none;
	}

	button.form-submit {
		font-size: 18px;
		padding: 4px 6px;
		width: 50px;
		height: 100%;
		background-color: transparent;
		color: var(--ffd20-sidebar-parent-color);
		border: none;
		border-right: 1px solid var(--ffd20-sidebar-parent-color);
		border-left: 1px solid var(--ffd20-sidebar-parent-color);
	}

	input.form-control::placeholder {
		color: var(--ffd20-sidebar-parent-color);
		opacity: 1;
	}

	#paginated-links a,
	#paginated-links span {
		display: inline-block;
		margin: 0 5px;
		font-size: 18px;
	}
	#latest-news { display: none; }

	#footer-left-section {
		position: static;
		justify-content: center;
		margin-top: 10px;
	}

}

@media only screen and (max-width: 1024px) {

	h1.page-title {
		margin: 20px 0;
	}

	.table-of-contents-wrapper {
		float: none;
		margin-bottom: 30px;
	}

	.table-of-contents-section {
		top: auto;
		width: 100%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

	.page-content img {
		display: block;
		margin: 0 auto 20px auto;
		max-width: 100%;
	}

	.page-content table img.alignleft,
	.page-content table img.alignright {
		float: none;
		display: block;
		margin: 20px auto 20px auto; 
		max-width: 100%;
	}

	.page-content img.alignleft { float: none; }
	.page-content img.alignright { float: none; }
	.page-content .alignleft { float: none; }
	.page-content .alignright { float: none; }

	html,
	body {
		font-size: 17px;
	}

	table.tablepress:not(.bestiary) td,
	table.tablepress:not(.bestiary) th {
		height: auto !important;
	}

	.tablepress td {
		font-size: 13px;
	}

	.tablepress th {
		font-size: 11px;
	}

	.flex-container {
		display: block;
	}

	.flex-right-section {
		margin: 1em 0 0 0;
	}
}

@media print {
	body {
		background-color: #FFF;
		color: #000;
	}

	p, li { font-size: 16px; }

	table td, table th { font-size: 14px; }

	.pagebreak {
		page-break-before: always;
	}

	div.page-content { padding: 0; }

	a:visited,
	a:link {
		text-decoration: none;
		color: #000 !important;
	}

    .no-print, .no-print * {
        display: none !important;
    }

	header {
		background-image: none;
	}

	#content {
		padding: 0;
	}

	#main {
		margin-left: 0;
		padding: 0;
	}

	img.alignright,
	img.alignleft {
		float: none;
		display: block;
		margin: 0 auto 10px auto;
	}

	h1.page-title {
		margin: 0 0 10px 0;
	}

	.flex-container {
		display: block;
	}

	.flex-right-section {
		margin: 0;
	}

	.flex-right-section h2.tablepress-table-name {
		margin: 20px 0 0 0;
	}

	#main h3,
	.tablepress th {
		background-color: #c9e1f7 !important;
	}

	.tablepress tr:nth-child(even) {
		background-color: #E8E8E8 !important;
	}

	.floatleft { float: none; width: 100%; }
	.alignleft, .alignright { float: none; }

	.tablepress td, .tablepress th { width: auto !important; }
	.tablepress td { font-size: 12px;}
	.tablepress th { font-size: 10px; height: auto;}
	caption { display: none; }
}