@charset "utf-8";
/* CSS Document */
@import "fonts.css";
@import "theme.css";
@import "media.css";

/* Tag Styles - For base tags (no IDs or Classes) ============================================================================================= */

html {
	font-family: var(--font-text);
	color: var(--color-primary);
}

body {
	margin: 0;
	line-height: 1.5rem;
	background: var(--background);
	color: var(--color-primary);
	font-family: var(--font-text);
	font-size: .9em;
	font-optical-sizing: auto;
}

.color_none {
	color: inherit !important;
	background: transparent !important;
	-webkit-text-fill-color: inherit !important;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--color-accent)
}

a:hover {
	color: var(--color-secondary);
}

p {
	margin-top: 0.2em;
}
section,
div.full {
	margin-top: 3em;
}

hr {
	width: 80%;
	margin: 3rem auto 3em auto;
	height: 4px !important;
	border: none;
	background: var(--div-fade)
}

hr.thin {
	width: 95%;
	margin: 2rem auto 1.5em auto;
	height: 2px !important;
	border: none;
	background: var(--div-fade)
}

hr.invisable {
	margin: 2rem auto 1.5em auto;
	height: 2px !important;
	border: none;
	background: transparent
}

hr.table-hr {
	width: 25%;
	margin: 2px auto;
	background: var(--color-accent);
	height: 2px !important;
}

/* Properties that make shit work ============================================================================================= */
#page-container {
	position: relative;
	min-height: 100vh;
	z-index: 0;
	-webkit-filter: none !important;
}

.wrapper,
header.top div,
nav>div {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1rem;
	align-items: center;
}

/*max(22%,290px)*/
.character-wrapper {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1rem;
	align-items: center;
}

.database-wrapper {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1rem;
	align-items: center;
}

div.character,
div.wiki-text {
	max-width: 70rem;
	margin: 0 auto;
	padding: 0 1rem;
	align-items: center;
}

.floatl {
	float: left;
}

.floatr {
	float: right;
}

.center-all {
	text-align: center;
}

section.full,
div.full {
	padding: 40px 0;
	background: #fff;
	margin-top: 1em;
}

section.unit-fix {
	margin-top: 0 !important;
}

.end_section {
	padding-bottom: 28rem;
}

section.timeline {
	overflow: unset;
}

.index_copyright {
	top: 275px;
	position: absolute;
	right: 30px;
	color: #999;
	text-transform: uppercase;
	font-size: .75em;
	font-family: var(--font-hand);
	z-index: 1;
}

.index_copyright.character {
	top: 195px;
}

.index_copyright.no-subnav {
	top: 240px;
}

span.color {
	display: initial !important;
	text-transform: initial !important;
}

.clear-fix2 {
	overflow: hidden;
}

.sticky {
	position: fixed !important;
	top: 2rem;
}

li a.active {
	font-weight: bold;
	color: var(--color-heading) !important;
	padding-left: 7px;
	margin-left: -10px;
	border-left: 4px solid var(--color-accent);
}

.sticky li.btt {
	display: block;
	margin-top: 20px;
	font-style: italic;
	font-size: .8em;
}

li.btt {
	display: none;
}

li.btt a:before {
	content: url("../images/arrow.png");
	margin-right: 3px;
}

li.btt a {
	color: var(--color-accent) !important
}

li.btt a:hover {
	color: var(--caption) !important
}

span.hideme,
td.hide {
	display: none !important;
}

img.cover {
	float: left;
	margin: 0 20px 0 0;
}

iframe {
	width: 75%;
	border: 2px solid #0003;
	height: 500px;
	margin: 0 auto;
	display: block;
}

.note,
.note2,
.notice,
.counts {
	margin: 2em;
	font-size: .9em;
	line-height: 1.4em;
	background: var(--box);
	padding: 1em;
	border: 1px solid var(--border);
	color: var(--color-link);
}
.counts {
  margin: 2em auto;
	display: table;
}

.note,
.note2 {
	display: table;
}

.note2,
.notice {
	text-align: center;
}

span#itemCount {
	margin-right: 3em;
}

.notice {
	font-style: italic;
}

.color-light {
	background: var(--color-light);
}

.color-dark {
	background: var(--color-dark);
}

.index-menu div h3 {
	text-align: center;
	vertical-align: middle;
	background: var(--fade2);
	padding: 20px 0;
	margin: 40px 0px;
	border: 1px solid var(--fade);
	color: white !important;
}

.terminology span,
.wiki-box li span,
.vt-body span {
	border: 1px solid var(--border);
	padding: 2px 6px;
	font-size: .7em;
	font-weight: normal;
	text-transform: uppercase;
	background: var(--box-fade);
	color: var(--caption);
}

.content-grid {
	display: grid;
}

.content-nav {
	width: 14rem;
	grid-area: 1;
}

.content-content {
	grid-area: 1;
}

.img-header {
	height: 1.82em !important;
	overflow: hidden;
	padding: 0em !important;
}

.img-header span {
	background: #000000ab;
	width: 100%;
	display: block;
	text-align: center;
	padding: .1em 0;
}

img.dimg-header {
	height: 55px;
	visibility: visible;
	vertical-align: middle;
	margin-right: .25em;
}

img.bimg-header {
	height: 55px;
	visibility: visible;
	vertical-align: middle;
	margin-right: .25em;
  margin-bottom: .1em;
}

li.menu-half {
	width: 48%;
	float: left;
	margin: 0 1%;
}

/* == Siteheader = */
.siteheader {
	background: var(--siteheader-grad), var(--siteheader-bk);
	background-size: var(--siteheader-size);
	background-position: var(--siteheader-position);
	height: 150px;
	position: relative;
	margin-bottom: 2em;
	padding: 1em 0;
}

.main>.siteheader {
	background: linear-gradient(to bottom, #00000000, #00000047, #000), var(--siteheader-bk);
	background-position: 0% 100%;
	height: 320px;
}

.siteheader h1 {
	margin-top: var(--site-header);
	display: block;
	color: var(--color-header-text) !important;
	font-size: var(--size-header);
	font-weight: var(--weight-heading-1);
}

.index.main>.siteheader h1 {
	margin-top: 10.4em;
}

.siteheader.char-header h1 {
	margin-top: var(--char-header);
	background: var(--background);
	padding-top: .4em;
	color: var(--color-secondary) !important;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: .1em;
  min-height: 1.5em;
}

.siteheader.main-header h1 {
	margin-top: var(--site-header) !important;
}

blockquote {
	font-style: italic;
}

blockquote span {
	font-style: normal;
	display: block;
	margin-top: 10px;
}

/*.siteheader h1:after {position: absolute;margin-left: 10px;margin-top: 1px;font-family: var(--font-theme);font-size:.75em;color:var(--color-accent)}*/
.siteheader header#sub-menu,
.siteheader header#sub-menu-serach {
	margin-top: 0;
}

object#main-badge {
    height: 36px;
    vertical-align: middle;
    margin-top: 4px;
}

/* Heading Styles ============================================================================================= */
h1 {
	margin: 5px 0 10px 0;
	color: var(--color-accent);
	font-weight: var(--weight-heading-1);
	font-family: var(--font-theme);
	font-size: var(--size-heading-1);
	padding-bottom: 8px;
}

h2 {
	margin: 30px 0 3px 0;
	color: var(--color-accent);
	font-weight: bold;
	font-size: 1.5em;
}

h3 {
	margin: 20px 0 3px 0;
	color: var(--color-secondary);
	font-weight: bold;
	font-size: 1.3em
}

h4 {
	font-weight: bold;
	text-align: left;
	font-size: 1.1em;
	margin-bottom: .1em;
}

h1.region-title {
	color: var(--color-secondary);
	text-align: center;
	font-size: 2.5em;
	border-bottom: 3px solid var(--fade);
}

button {
	background: var(--color-accent);
	border: none;
	padding: 1em 1.5em;
	color: var(--color-secondary);
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin: auto !important;
	display: block;
}

button:hover {
	cursor: pointer;
    background: var(--box-header);
    color: var(--color-link);
}

/* Timeline Menu Toggle */
section.timeline-nav {
	margin: 0 auto 5em auto;
	background: var(--box-fade);
}

.disabled {
	color: #aaa;
	display: none;
}

.timeline-menu {
	margin-bottom: .5em;
	display: flex;
	justify-content: center;
}

.timeline-menu label {
	display: block;
	margin-bottom: 5px;
	font-size: .9em;
}

.timeline-menu ul {
	list-style-type: none;
	padding-left: 0;
}

.timeline-menu li {
	padding: 5px 0;
}

.timeline-nav h2 {
	text-align: center;
	margin: 10px 0 0 0;
}

/* Header Styles ============================================================================================= */
header.top {
	background-color: #000;
	background-position: top;
	height: 3rem;
	border-bottom: 2px solid var(--color-accent-menu);
}

/*header.top div {width: 1050px;margin:0 auto 0 max(22%,290px);}*/
header.top img {
	width: 38px;
	margin-top: 5px;
}

header.top h1 {
	color: #fff;
	font-size: 1.4em;
	margin-top: 13px;
	display: inline-flex;
	font-family: var(--font-main);
	font-weight: var(--weight-header);
	border: none;
}

/* Header Styles ============================================================================================= */
header.top {
	background-color: var(--color-header);
	background-position: top;
	height: 3rem;
}

header.top h1 {
	display: inline-flex;
}

header.top img {
	width: 38px;
	margin-top: 5px;
}

header#sub-menu,
header#sub-menu-serach {
	overflow: hidden;
}

header#sub-menu ul,
header#sub-menu-serach ul {
	margin: 0;
	padding: 0;
  display: flex;
}

header#sub-menu ul li,
header#sub-menu-serach ul li {
	list-style: none;
	height: 45px;
}

header#sub-menu ul li {
	float: left;
}

header#sub-menu-serach ul li {
	float: right;
}

/* Nav Styles ============================================================================================= */
nav {
	z-index: 100;
	position: relative;
	background: var(--box-header);
}

nav a {
	color: var(--color-link);
}

nav a:hover {
	color: var(--color-accent);
}

nav ul {
	display: inline-block;
}

nav ul,
nav ul ul,
nav ul ul ul {
	width: 100%;
	margin: 0;
	padding: 0;
}

nav ul li {
	display: inline-block;
	position: relative;
	padding: 4px 40px 10px 0;
	color: var(--box-title);
}

nav ul li.home:last-child {
	float: right;
	padding: 5px 0 10px 0;
}

nav ul li>div {
	position: absolute;
	display: none;
	left: -20px;
	top: 100%;
	background: var(--box-header2);
	padding: 20px
}

nav li:hover div {
	display: block;
}

nav ul ul ul {
	margin: 0;
	padding: 0;
}

nav ul li div ul li {
	display: block;
	padding: 0;
}

nav li.dropdown>a:after {
	content: '';
	border: 4px solid transparent;
	border-top: 4px solid white;
	margin-left: 4px;
	margin-bottom: 6px;
	display: inline-block;
	vertical-align: bottom;
}

.dropmenu_5col {
	width: 1050px;
}

.dropmenu_4col {
	width: 800px;
}

.dropmenu_3col {
	width: 600px;
}

.dropmenu_2col {
	width: 400px;
}

.dropmenu_1col {
	width: 200px;
}

.dropdown-fix1 {
	left: -105px;
}

.dropdown-fix2 {
	left: -286px;
}

.dropdown-fix3 {
	left: -422px;
}

.dropdown-fix4 {
	left: -524px;
}

/* == Sub Nav Styles ================================== */
nav.subnav {
	background: var(--box-header3);
	z-index: 1;
	border-top: 1px solid var(--color-accent);
}

nav.subnav a {
	color: var(--color-accent-menu);
	filter: grayscale(.2);
}

nav.subnav a:hover {
	color: var(--color-header-text2);
}

nav.subnav ul li {
	padding: .37em .5em;
	font-size: .95em;
}

nav.subnav ul li:after {
	content: "|";
	margin-left: 1em;
	opacity: .25
}

nav.subnav ul li:first-child {
	padding: .5em 1em .5em 0
}

nav.subnav ul li:last-child:after {
	content: ""
}

nav.subnav ul li>div {
	padding: .5em 1em;
	top: 35px;
	width: 150px
}

nav.subnav ul li div ul li {
	padding: .1em .5em !important;
}

nav.subnav ul li div ul li:after {
	content: "";
}

.subnav span {
	font-weight: bold;
	color: var(--color-header-text2);
	opacity: .8;
	margin-right: .5em
}

/* == Dropdown Box Styles ================================== */
.image_menu {
	overflow: hidden;
}

.image_menu li div {
	position: relative;
	background-size: cover;
	height: 75px;
	margin: 1% 1%;
	background-position: top;
}

.narrow li div {
	height: 50px;
}

nav li.tall div {
	height: 125px;
}

nav li.xtall div {
	height: 155px;
}

nav li.ftall div {
	height: 255px;
}

div.ftall ul div {
	height: 225px;
}

.link_image2 em,
.link_image3 em {
	display: block;
	font-size: .7em;
	text-transform: none;
	font-style: normal;
	opacity: .6;
}

a.site-link {
	background: var(--box-fade);
	padding: 10px 20px;
	color: var(--color-secondary);
	border: 1px solid var(--fade)
}

a.site-link:hover {
	background: var(--gradient2);
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
}

.image_menu li div:hover {
	background-size: cover;
}

.narrow li div:hover {
	background-size: cover;
}

li.link_image2 {
	width: 50%;
	float: left;
}

li.link_imagel {
	width: 48%;
	float: left;
}

li.link_image1 {
	width: 98%;
	float: left;
}

li.link_image3 {
	width: 33.3%;
	float: left;
}

li.link_image4 {
	width: 25%;
	float: left;
	height: 75px;
}

li.link_imagel {
	height: 75px;
	margin: 1%;
	font-weight: 500;
}

li.link_image2 span,
li.link_image1 span,
li.link_image3 span,
li.link_image4 span {
	display: block;
	background: #000000ab;
	position: absolute;
	bottom: 0;
	color: #eee;
	padding: 6px 0;
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
}

li.link_image2 span,
li.link_image1 span,
li.link_image3 span,
li.link_image4 span {
	font-size: 16px;
}

li.link_image2 a:hover span,
li.link_image1 a:hover span {
	color: #cb9d46;
}

li.link_imagel a,
li.link_image3 a,
li.link_image4 a {
	display: block;
	line-height: 1.3em;
}

li.link_image4 a {
	font-size: .9em;
}

a.main-site {
	margin-left: 5px;
}

ul.image_menu li.link_image4:nth-child(2),
ul.image_menu li.link_image4:nth-child(4),
ul.image_menu li.link_image4:nth-child(6),
ul.image_menu li.link_image4:nth-child(8) {
	padding-top: 5px;
}

.submenu {
	background: var(--fade);
	margin: -10px 0;
	padding: 10px 10px 0 10px;
}

.image_thin li {
	height: 50px;
	overflow: hidden;
}

/* Footer Styles ============================================================================================= */
footer blockquote {
	color: #c2a574;
	font-family: var(--font-script);
	font-weight: normal;
	font-size: 2.2em;
	line-height: 1em;
	margin-top: -110px;
}

footer blockquote span.quote-author {
	display: block;
	font-size: .4em;
	float: right;
	opacity: .8;
	padding-top: 20px;
	position: inherit;
	font-weight: normal;
	text-transform: none;
	font-family: var(--font-text);
}

footer blockquote span:before {
	content: "-"
}

footer {
	bottom: 0 !important;
	position: absolute;
	width: 100%;
	background: #262829;
}

footer .wrapper p {
	text-align: center;
}

div#sitemap {
	padding: 30px 0 30px 0;
}

#sitemap div:after {
	content: "";
	display: block;
	clear: both;
}

#sitemap img {
	height: 200px;
	margin: 40px 0 0 0;
}

#sitemap ul {
	margin: 0;
	padding: 0;
}

#sitemap ul li {
	font-size: .85em;
	list-style: none;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #eee;
}

#sitemap a {
	color: #777;
	text-transform: uppercase;
}

#sitemap a:hover {
	color: #fff !important;
}

#sitemap ul li h3 {
	color: #fff;
	text-transform: uppercase;
	padding: 0;
	font-size: 1.1em
}

#sitemap strong {
	padding-top: 15px;
	color: #888
}

#copyright {
	background: rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.contact {
	font-size: .8em;
	position: absolute;
	right: 0;
	bottom: 0;
	padding-bottom: 15px;
	padding-right: 30px;
}

#copyright p {
	margin: 0;
	padding: 13px 5px 12px 0;
	color: #999;
	font-size: .8em;
	line-height: 1.3em;
}

.has-image-char img {
	content: var(--footer-image)
}

/* Tab Styles ============================================================================================= */
#tabs-top>ul {
	background: var(--box);
	border: 1px solid var(--border);
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#tabs-top>ul li {
	float: left;
	list-style: none;
	padding: 10px 20px;
}

#tabs-top>ul li a:hover,
.tab-menu li.ui-tabs-active.ui-state-active a {
	color: var(--color-primary) !important;
}

.tab-menu li.ui-tabs-active.ui-state-active {
	border-bottom: 2px solid var(--color-accent)
}

#tabs-top>div {
	margin-top: 30px;
}

#tab-mini {
	margin: 0;
}

#tab-mini ul {
	overflow: hidden;
	margin: -15px -7px 10px -7px;
	padding: 8px 6px;
	border-bottom: 2px solid var(--color-accent);
}

#tab-mini li {
	float: left;
	display: inline;
}

div#tab-mini ul li {
	float: left;
	display: block;
	text-indent: initial;
	margin-right: 5%;
	;
	font-size: .9em;
	text-align: center;
	margin-top: .5em;
}

div#tab-mini ul li.ui-tabs-active.ui-state-active a {
	color: var(--color-secondary) !important
}

#tab-classes ul li,
#tab-bonds ul li,
#tab-genetics ul li {
	text-align: left;
}

ul.classes li {
	margin-right: .25em;
}

#tab-classes ul,
#tab-bonds ul,
#tab-genetics ul {
	margin: 1em 0 .3em 0;
	padding: 0;
	text-align: center;
}
ul.genetic-list {
  margin:0 1em;
  padding:0;
}

td.tabs {
	padding: 0 !important;
}

ul.classes {
	margin-top: 0 !important;
}

.table2 {
	width: 100% !important
}

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

#tab-classes li,
#tab-bonds li,
#tab-genetics li {
	display: inline-flex;
	text-indent: 0;
	margin-right: 1em;
}
#tab-genetics {
  font-size:1.1em;
}
#tab-genetics .genetic-list li{
	display: flex;
}

span.lvl {
	float: right;
	font-weight: bold;
}

.table2 td {
	padding: 0
}

.table2 .heading {
	font-size: .85em
}

.classes li {
	display: block !important;
	padding-bottom: .3em
}

table tr:last-child,
.table2 tr:last-child {
	border-bottom: none !important;

}

.infobox table .table2 tr td {
	font-weight: normal;
	font-size: 1.05em;
	padding-right: 0;
}

/* Accordion Styles ============================================================================================= */
.theaccords h4 {
	margin: 10px 0 0 0;
}

.theaccords h4:hover {
	cursor: pointer;
}

.theaccords div {
	border: 1px solid var(--border);
	padding: 10px 0;
	border-top: 2px solid var(--color-accent);
	overflow: hidden;
}

span.ui-accordion-header-icon.ui-icon {
	background-image: url("../images/icon_accord_open.png");
	background-size: 12px 12px;
	position: relative;
	width: 12px;
	height: 12px;
	display: inline-block;
	margin: -16px 10px 0 10px;
	-webkit-filter: var(--hue-rotate);
	-o-filter: var(--hue-rotate);
	filter: var(--hue-rotate);
}

.ui-state-active span.ui-accordion-header-icon.ui-icon {
	background-image: url("../images/icon_accord_close.png");
}

.info-img {
	border: none !important;
}

.info-img img {
	width: 100%;
}

/* List Styles ============================================================================================= */
.col-4 {
	column-count: 4;
}

.col-3 {
	column-count: 3;
}

.col-2 {
	column-count: 2;
}

ul.story_nav {
	margin: 20px 0 10px;
	padding: 10px;
	overflow: hidden;
	background: var(--box);
	border: 1px solid var(--border);
}

ul.story_nav.charts {
	margin: 0px;
}

ul.story_nav li {
	list-style: none;
	float: left;
	padding: 0px 12px;
	border-right: 1px solid var(--border);
}

ul.list,
ul.info {
	margin: 0;
	padding: 0;
}

ul.list li {
	list-style: none;
}

#abilities>ul.list li,
ul.info li {
	margin-bottom: 10px;
	list-style: none;
}

li.hidden-li {
	list-style: none;
}

li.list-head {
	list-style: none;
	margin-left: -20px;
	border-bottom: 1px solid var(--fade);
}

.wiki-header {
	background: var(--wiki-bar);
	padding: 4px 10px;
	margin-bottom: 0;
}

.wiki-image-right,
.wiki-image-left {
	width: 250px;
	font-size: 0.9em;
	text-align: center;
	border: 1px solid var(--border);
	background: var(--box);
	padding: .5%;
}

.wiki-image-right {
	float: right;
	margin: 0 0 1em 1em;
}

.wiki-image-left {
	float: left;
	margin: 1em 1em 0 0;
}

.wiki-image-left img,
.wiki-image-right img {
	width: 100%;
	height: auto;
}

.wiki-caption {
	padding: 0 5px 5px 5px;
	border-top: none;
	color: var(--caption);
	font-size: .85em;
}

.infobox-bottom a:after {
	content: url("../images/arrow.png");
	margin-right: 3px;
}

.charlist-box {
	border-top: 2px solid var(--stat-box);
	padding-top: 20px;
	margin-top: 5px;
}

ul.wing-list {
	margin: 0;
}

li.list-head:first-child {
	margin-top: -1.4em;
}

.grid_4.underdark {
	position: absolute;
	bottom: 20px;
	background: #ffffff1c;
	width: 30% !important;
	padding: 10px;
	text-align: center;
}

li.list-div {
	text-indent: initial !important;
	margin-left: -15px;
	font-style: italic;
	font-size: .9em;
	color: var(--color-accent);
}

.menu-sublist dl {
	margin: 0;
	height: 1.5em;
}

.menu-sublist dl dd {
	margin: 0;
	height: 1.5em;
}

.menu-title {
	font-weight: bold;
	font-size: 1.1em;
}

/* == Index Lists ============================================================ */
.charlist-box ul {
	margin: 0;
	padding: 0 1em;
}

.charlist-box ul li {
	list-style: none;
  opacity: .6;
}

.charlist-box ul li.list-head {
	margin: 1.667em 0 0 0;
}

.charlist-box ul li.list-head:first-child,
.charlist-box ul li.list-head:first-child h3 {
	margin-top: 0 !important;
}

.charlist-box ul li img {
	display: none;
}

.hidden img {
	display: inline-block !important;
}


.charlist-boxtable {
	border-top: 2px solid var(--stat-box);
	padding-top: 20px;
	margin-top: 5px;
	column-count: 8;
}

.charlist-boxtable ul {
	margin: 0;
	padding: 0;
}

.charlist-boxtable ul li {
	list-style: none;
}

.charlist-boxtable ul li.list-head {
	margin: 25px 0 0 0;
}

.charlist-boxtable ul li.list-head:first-child {
	margin: 0;
}

.charlist-boxtable ul li a {
	display: none;
}

.charlist-boxtable ul li img {
	width: 75px;
	z-index: 0;
}

.charlist-boxtable ul li:hover a {
	display: block;
	background: var(--fade2);
	width: 71px;
	margin-left: .3em;
	height: 73px;
	margin-top: -77px;
	z-index: 100;
	position: relative;
	padding: 2px;
	text-align: center;
	vertical-align: middle;
}


ul.pets {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.pets li {
	list-style: none;
	text-align: center;
	padding: .5%;
	background: var(--box);
	border: 1px solid var(--border);
	margin: 0px 1% 2% 1%;
	flex: 1 1 29.9%;
	max-width: 29.9%;
}

.pets img {
	width: 90%;
}

.pets p {
	margin: 0 !important;
	font-size: .9em;
	line-height: 1.5em;
}

p.pet_link {
	font-size: .8em;
	opacity: .8;
	padding-top: 1em;
	display: block;
}

.pets h3 {
	color: var(--color-accent);
}

p.pet_name {
	font-weight: bold;
}

p.pet_titles {
	font-style: italic;
	background: var(--table-fade);
	padding: 5px 0;
}

p.pet_parents {
	font-style: italic;
}

p.pet_desc {
	padding: .5em;
	font-size: .75em;
	line-height: 1.1em;
	color: var(--caption);
}
.age-unknown {
  font-style: italic;
  color: var(--color-accent); /* Optional: subtle tone for unknown */
}
.pets hr {
    margin: .3em auto;
}
/* == Record Lists ============================================================ */
.im-records {
	width: 100%;
	margin: 0 auto;
}

.im-records h2 {
	text-transform: none !important;
}

p.record-info {
	margin: 0;
	color: var(--color-secondary);
	background: var(--box);
	padding: 5px 8px;
	font-size: .9em;
	line-height: 1em;
}

.im-records dl,
dl.wing-list {
	margin-left: 10px;
	font-size: .95em;
	border-left: 3px solid var(--div-fade);
	padding-left: 10px;
}

.im-records dt,
dl.wing-list dt {
	font-weight: bold;
}

.im-records dd,
dl.wing-list dd {
	margin-left: 10px;
}

.im-records dd:before,
dl.wing-list dd:before {
	content: url("../images/arrow.png");
	margin-right: 3px;
}

dt.bonus {
	font-weight: normal;
	color: #999;
}

.im-records h1 {
	text-align: center;
	font-size: 1.6em !important;
	color: var(--color-primary);
	padding: 5px 0;
	width: 100%;
	margin: 0 auto;
}

.im-records h4 {
	margin: 10px 0 5px 0;
}

/*.record-info {display: inline-block;}*/
/* Gallery Styles */
.gallery {
	padding: 20px;
	border: 1px solid var(--border);
	background: var(--box);
	/* CHATGPT */
	column-count: 4;
	column-gap: .3rem;
	max-width: 1200px;
	margin: 0 auto;
}

.gallery figure {
	break-inside: avoid;
	margin: .25rem;
	background: #f9f9f9;
}

.gallery img {
	background: var(--box-header);
	border: 1px solid var(--border);
	/* CHATGPT */
	width: 100%;
	height: auto;
	display: block;
}

/*--span.caption {text-transform: uppercase;font-weight: bold;}*/
.unit-box {
	display: flex;
	flex-direction: column;
}

.unit-box h3 {
    text-align: center;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: .3em;
}

.unit-box div {
	display: flex !important;
  justify-content: space-evenly;
  margin-bottom: 1em;
}

.unit-box div div{
	background: var(--box);
	border: 1px solid var(--border);
}

.unit-box a {
	text-align: center;
}

.unit-box a span {
	display: block;
	padding: 10px;
}

.unit-box a img {
	position: relative
}

/* Table Styles ============================================================================================= */
table {
	width: -webkit-fill-available;
	border-collapse: collapse;
	font-size: .95em
}

tr:nth-child(even) {
	background: var(--table-fade)
}

table tbody {
	background: var(--box);
	border: 1px solid var(--border) !important;
}

th {
	text-align: left;
	line-height: 1.5em;
	padding: 0 12px;
	font-size: .95em;
}

td {
	padding: 5px 12px;
}

table tr {
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

#pedigree table,
#siblings table tbody,
#offspring table tbody {
	background: var(--box);
}

#siblings table,
#offspring table {
	margin-top: 15px;
}

th {
	text-transform: uppercase;
	border-bottom: 2px solid var(--color-accent);
	padding-top: 10px;
	text-align: left;
	line-height: 1.5em;
	padding: 0 12px;
}

tr.record-heading td {
	text-align: center !important;
	background: var(--div-fade);
}

tr.record-heading td h1 {
	font-size: 1.2em !important;
	font-weight: bold;
	font-family: var(--font-text) !important;
	color: var(--color-accent);
	margin: 0;
	padding: 0;
}

tr.record-heading {
	display: table-row !important;
}

tr.rec-last td {
	background: var(--background) !important;
	border-left: 1px solid transparent !important;
	border-right: 1px solid transparent !important;
}

/* == Unit Tables ============================================================ */
.unit-list tr td {
	vertical-align: middle;
	line-height: 1.2em;
}

.unit-list tr td:first-child {
	font-weight: bold;
	max-width: 100px;
}

.unit-list tr th:first-child {
	text-align: right;
	max-width: 100px;
}

tr.rank-divider td {
	text-align: center;
	text-transform: uppercase;
	padding: 0.5em 0;
	font-size: 1.1em;
	display: table-cell;
}

.rank-divider span {
	color: var(--color-primary);
	text-transform: initial;
	font-weight: initial;
	padding: 3px 10px;
	font-size: .85em;
	width: 55%;
	margin: 0 auto;
}

tr.rank-divider-leader,
tr.rank-divider-second {
	height: 10px;
	background: none;
}

tr.rank-divider-leader td,
tr.rank-divider-second td {
	padding: 0;
}

tr.unit-empty>td {
	text-align: center;
	font-weight: normal !important;
	font-style: italic;
}

.unit-list tr td span {
	display: block;
}

.unit-list tr {
	line-height: 1em;
	text-align: left;
}

.unit-list tr.deceased {
	background: #ff00000a;
}

.unit-list tr.candidate {
	background: #153c5e0f;
}

.unit-list tr td.rank {
	text-transform: uppercase;
	padding: 0 .5rem;
	text-align: right;
}

.rank span {
	font-size: .8em !important;
	text-transform: uppercase;
	color: var(--color-accent);
}

span.sub-info {
	font-size: .95em !important;
}

.unit-list tr.table-header td {
	padding: 0 .5rem 0 0;
	font-size: .85em;
}

.unit_portrait,
.unit_icon {
	padding: 0.25rem 0 0 0 !important;
	text-align: center;
}

.unit_portrait img {
	width: 45px;
	background: var(--box-fade);
	border: 1px solid var(--border);
}
/* == Icon Sizing ================================================== */
.size-massive {
	width: 100px !important;
	height: 100px !important;
}

.size-very-large {
	width: 90px !important;
	height: 90px !important;
}

.size-large {
	width: 80px !important;
	height: 80px !important;
}

.size-medium {
	width: 70px !important;
	height: 70px !important;
}

.size-small {
	width: 60px !important;
	height: 60px !important;
}

.size-huge {
	width: 55px !important;
	height: 55px !important;
}

.size-gold {
	width: 50px !important;
	height: 50px !important;
}

.size-bronze {
	width: 45px !important;
	height: 45px !important;
}

.size-brown,
.wings tr td img.size-very-small {
	width: 40px !important;
	height: 40px !important;
}

.size-blue {
	width: 35px !important;
	height: 35px !important;
}

.size-green,
.wings tr td img.size-tiny {
	width: 30px !important;
	height: 30px !important;
}

.size-sport {
	width: 25px !important;
	height: 25px !important;
}

.size-tiny {
	width: 20px !important;
	height: 20px !important;
}
.unit-list tr.wing-ranked {
	background: var(--table-fade2);
}

/* == RP Progression Tables ============================================================ */
.progress-table tr td {
	vertical-align: middle;
}

.progress-table tr th {
	font-size: .85em
}

.progress-table tr td span {
	display: block;
	color: var(--color-accent);
	font-size: .8em;
	font-style: italic;
}

.progress-table tr {
	line-height: 1em;
	text-align: left;
}

.progress-table span.sub-info {
	font-size: .95em !important;
}

.progress-table tr.table-header td {
	padding: 0 .5rem 0 0;
	font-size: .85em;
}


/* == Sibling Tables ======================================================== */
.siblings table ul {
	margin: 0;
	padding: 0;
}

.siblings table ul li {
	list-style: none;
}

.siblings ul.list,
ul.info {
	margin: 0;
	padding: 0;
}

.siblings ul.list li,
ul.info li {
	list-style: none;
	line-height: 1.5em;
	margin-bottom: 0;
}

.info span {
	font-weight: bold;
	margin-right: 3px;
}

.info span.color {
	margin: inherit;
	font-weight: inherit;
}

td.none {
	text-align: center;
}


/* == Pedigree Tables ======================================================== */
#pedigree {
	font-size: .95em;
}

#pedigree tr td {
	line-height: 1.3em;
	width: 33%;
}

#pedigree strong {
	font-size: 1em;
}

#pedigree tr:nth-child(even) {
	background: none
}

td.sire {
	vertical-align: bottom;
}

td.dame {
	border-bottom: 1px solid var(--border);
}

td.left {
	border-left: 1px solid var(--border);
}

td.last {
	height: 50px;
}

td.dame.last {
	padding-bottom: 20px;
}

td.end {
	padding-bottom: 5px !important;
}

/* == Currency Tables ======================================================== */
table.currency {
	background: var(--border) !important;
	border-collapse: collapse
}

table.currency tr td {
	padding: 1px 4px !important;
	border-top: hidden !important;
	border-bottom: hidden !important;
}

table.currency tr td:first-child {
	width: 15px !important;
	border-right: 1px solid var(--color-accent);
	font-weight: normal !important;
}

/* == Shared Styles - Tables ======================================================== */
/*#pedigree {display: inline-block;} */
/* == Collapse Styles ===== */
#clutch-chart td,
#bond-chart td {
	text-align: left;
}

#clutch-chart tr td:first-child {
	width: 35px;
}

#clutch-chart tbody tr {
	display: none;
}

#clutch-chart tr.parent,
#clutch-chart tr.open {
	display: table-row;
}

tr.parent.multiple-clutches {
	background: var(--table-fade2);
	font-weight: bold;
}

tr.sub-clutch td {
	font-size: .95em !important;
	line-height: 1em;
	background: var(--box);
}

tr.no-records {
	opacity: .5;
}

/* Image Test Styles */
.test-table {
	wdith: auto
}

.test-table td {
	border: 1px solid var(--border);
	width: 100px;
	vertical-align: middle;
}

.test-table tr td:first-child {
	width: 200px
}

.test-table img {
	height: 75px;
	width: auto
}

.test-table span {
	display: block;
	font-size: .9em;
	font-weight: bold;
	color: var(--color-accent);
}
.test-table span.color {
  font-size:inherit;
}
/* Breadcrumb Styles */
.siteheader .breadcrumbs li {
	background: var(--box-header);
	color: var(--color-header-text2)
}

.breadcrumbs li.link:before,
.breadcrumbs li.current:before,
.listme:before {
	content: url("../images/arrow.png");
}

.breadcrumbs li.link:before,
.breadcrumbs li.current:before {
	margin-right: 10px;
}

.breadcrumbs li {
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-size: .95em;
	background: var(--box);
	padding-right: 12px
}

.breadcrumbs li:first-child {
	padding: 0 15px !important;
	content: none !important;
}

.breadcrumbs li:last-child {
	padding-right: 18px;
}

.breadcrumbs img {
	height: 32px;
	margin-top: 6px;
  filter: var(--kythar-hue)!important
}

.breadcrumbs2 li.link:before,
.breadcrumbs li.current:before {
	margin-right: 10px;
}

.breadcrumbs2 li {
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-size: .75em;
	background: var(--box);
}

.breadcrumbs2 li:first-child {
	padding: 0 5px 0 15px !important;
	content: none !important;
}

.breadcrumbs2 li:last-child {
	padding-right: 30px !important;
}

.breadcrumbs2 img {
	height: 35px;
	margin-top: 5px;
}

.breadcrumbs .link a,
.breadcrumbs .current span,
.breadcrumbs .link em {
	display: inline-block;
	margin: 0.75em 0.5em;
}

.breadcrumbs .link a {
	color: var(--color-accent-menu);
}

.breadcrumbs .current span,
.breadcrumbs .link em {
	color: var(--color-header-text2);
}

.breadcrumbs .link a:hover {
	color: var(--color-header-text);
}

.breadcrumbs li.link:nth-child(2):before {
	content: none !important
}
.breadcrumbs li.origin img path{
    fill: var(--color-accent);
}
.psudo-crumbs li {
	background: transparent !important;
}

/* Infobox Styles */
ul.infobox {
	width: 300px;
	margin: 0 0 10px 20px;
	padding: 0;
	float: right;
	background: var(--box);
	border: 1px solid var(--border);
}

ul.infobox li {
	list-style: none;
	text-indent: -1em;
}

.theme-dark ul.infobox li table td ul li>img.icon {
	filter: var(--contrast);
}

ul ul {
	margin: 0;
	padding: 0 0 0 1em;
}

li.past-unit {
	background: var(--fade);
	text-indent: 0 !important;
	opacity: .65;
	margin: .6em -1em 0 -1em;
	font-size: .75em;
	text-transform: uppercase;
}

/* == Infobox Status ================================================== */
.status-riftsnpc,
.status-deceased,
.status-pc,
.wiki-link {
	text-indent: unset !important;
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
}

.status-riftsnpc {
	background: var(--fade);
	color: var(--color-secondary);
}

.status-deceased {
	background: var(--color-fade-red);
}

.status-pc {
	background: var(--box-fade);
	color: #5a5a5a;
}

.wiki-link {
	background: var(--wiki-bar);
	color: var(--color-accent);
	font-size: .9em;
}

/* == Infobox Headings ================================================== */
.infobox h2,
.infobox h3 {
	text-align: center;
	margin: 0;
}

.infobox h2 {
	padding: .5em;
}

.infobox h3 {
	padding: .1em;
}

.infobox h2 {
	text-indent: initial;
	font-family: var(--font-theme);
	font-weight: var(--weight-heading-1);
	font-size: var(--size-heading-2);
}

.infobox h3 {
	font-size: 1.2em !important;
}

/* == Infobox Portraits ================================================== */
.infobox .portrait {
	padding: .5em .5em 0 .5em;
	text-align: center;
	text-indent: initial !important;
}

.infobox .portrait img {
	max-width: 100%;
}

.infobox .portrait.human img {
	padding: 0;
	background: var(--box-fade);
	border: 1px solid var(--border);
}

div.dragon-img-fix img {
	border: none !important;
	background: none !important;
}

.infobox .cover img {
	max-width: 98%;
	padding: 0 1%;
}

.infobox .portrait.badge img {
	width: auto;
}

.infobox .caption {
	text-align: center;
	font-size: .75em;
	color: var(--color-secondary);
	font-style: italic;
	text-indent: 0;
	padding: 0 5px;
}

.infobox .portrait span {
	font-size: .7em;
	color: var(--caption);
	display: block;
	padding: 0 0 .5em 0;
	border-bottom: 5px solid var(--table-fade2);
	line-height: 1.2em;
}

/* == Infobox Table ================================================== */
.infobox tbody {
	border: none !important;
}

.infobox table {
	width: 98%;
	border-collapse: collapse;
	line-height: 1.2em;
	margin: 0 auto;
	font-size: .9em
}

.infobox table tr.infobox-bottom td:first-child {
	font-weight: normal;
	line-height: 1.6em;
}

.infobox table tr td {
	padding: .3em .75em .3em 0;
	border-top: 1px solid var(--border);
}

.infobox table tr td:first-child,
 table.table2 tr td:first-child {
	text-align: right;
	padding: .3em .75em .3em .5em;
	font-weight: bold;
	min-width: 110px;
	max-width: 120px!important;
}

tr.infobox-bottom {
	border-top: 2px solid var(--color-accent);
}

.infobox-img td {
	text-align: center !important;
}

.infobox-img img {
	width: 55%;
}

tr.heading {
	background: var(--div-fade);
}

ul.alginment {
	margin: 0;
	padding: 0;
}

ul.alginment li {
	overflow: hidden;
	text-align: center;
}

ul.alginment li span {
	float: left;
	display: block;
	width: 20px;
	padding: 2px 0 2px 10px;
	border: 1px solid var(--border);
	margin: 2px;
}

span.yes {
	font-weight: bold;
	color: var(--color-accent);
	background: var(--box-fade);
}

span.no {
	color: var(--fade);
}

/* Wiki Nav Box *============================================================================================= */
ul#nav {
	width: 200px;
	padding: 0;
	background: var(--box);
	border: 1px solid var(--border);
	font-size: 1.1em;
	margin-top: 0;
}

ul#nav li {
	list-style: none;
	width: auto;
	padding: .2em .6em;
}

li.sub {
	font-size: .9em;
	overflow: auto;
	opacity: .55;
}

ul#nav li a {
	color: var(--color-secondary);
}

ul#nav li a:hover {
	color: var(--color-accent);
}

/* Boxed Content *============================================================================================= */
.menu_image {
	height: 210px;
	overflow: hidden;
}

.menu_image img {
	width: 100%;
}

.grid_6>.cover_image {
	overflow: hidden;
	height: 200px;
}

.grid_4>.cover_image {
	overflow: hidden;
	height: 150px;
}

.grid_3>.cover_image {
	overflow: hidden;
	height: 100px;
}

.cover_image img {
	width: 100%;
}

.display_image,
.char_image {
	text-align: center;
}

.display_image img,
.char_image img {
	max-width: 80%;
}

.news_box div {
	background: var(--box);
	margin-bottom: 2%;
}

.news_box h2,
.news_box p {
	padding: 0px 10px;
}

.news_box h2 {
	margin: 0;
}

.news_box p {
	margin: 5px 0;
	font-size: .9em;
}

.sub_stories>div {
	min-height: 300px;
}

.sub_stories p {
	line-height: 1.5em;
}

.cover_image {
	max-height: 150px;
	overflow: hidden;
}

.news_box {
	margin: 2em 0;
}

p.tags {
	font-size: .7em;
	margin: -8px 0 0 0;
	text-transform: uppercase;
}

.tags span {
	margin-right: 6px;
	margin-top: 10px;
	background: var(--box-fade);
	padding: 3px 8px;
	display: inline-block;
}

.site-cover .tags span>a {
	border: none !important;
	background: none;
	color: var(--color-accent);
	padding: 0;
}

.site-cover .tags span>a:hover {
	color: var(--color-primary)
}

.site-cover {
	color: var(--color-secondary);
	margin: 20px 0;
}

.site-cover h1 {
	color: var(--color-primary);
	font-weight: var(--weight-header);
}

.site-cover>div>div {
	width: 65%;
	clear: both;
	padding: 20px;
}

.site-cover img {
	float: left;
	height: 40px;
	margin-right: 6px;
	margin-top: -4px;
}

.site-cover.right>div>div {
	float: right;
	text-align: right;
}

.site-cover.right img {
	float: right;
	margin-left: 6px;
}

div.gradient {
	background: linear-gradient(to left, var(--gradient2), var(--gradient1));
	height: 100%;
	overflow: hidden;
}

.info-cover .gradient {
	margin: 0;
	padding: 0 20px;
}

.info h1 {
	margin-bottom: 1em;
}

.info div p {
	padding: 1em
}

div.gradient-v {
	background: linear-gradient(to bottom, var(--gradient1), var(--gradient2), var(--gradient1));
	height: 100%;
	overflow: hidden;
	margin-top: 0 !important
}

div.gradient-info {
	background: linear-gradient(to bottom, var(--gradient1), var(--gradient3), var(--gradient3), var(--gradient1));
	height: 100%;
	overflow: hidden;
	margin-top: 0 !important
}

.right div.gradient {
	background: linear-gradient(to right, var(--gradient2), var(--gradient1));
	height: 100%;
	overflow: hidden;
}

.button a:hover,
.site-cover a:hover {
	background: var(--gradient2);
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
}

.info-cover a,
.site-cover a {
	background: var(--box-fade);
	padding: 10px 20px;
	color: var(--color-secondary);
	border: 1px solid var(--fade)
}

.site-cover.header {
	height: 200px;
	position: relative;
}

.button-heading {
	text-align: center;
	font-size: 1.3em;
	margin: 40px 0 -20px 0;
	color: var(--color-accent)
}

.button {
	text-align: center;
	margin-top: 40px !important;
}

.button a {
	background: var(--box-fade);
	color: var(--color-secondary);
	padding: 5px 15px;
	margin: 3px 3px;
	display: inline-block;
	border: 1px solid var(--fade);
}

.learn-more {
	margin-top: 40px;
}

.learn-more>div>div {
	width: 100%;
	padding: 20px;
}

.learn-more p.button {
	margin: 50px 0;
}

.learn-more div.gradient {
	background: linear-gradient(to bottom, var(--gradient2), var(--gradient1));
}

.character-block {
	display: inline-flex;
}

.character-block div {
	background-size: cover;
	text-align: center;
	margin-bottom: 0;
	margin-top: 1em;
}

.character-block h2 {
	color: #000;
	background: var(--color-accent);
	margin: -1px 1px 0 1px;
	padding: 10px;
}

.character-block li {
	list-style: none;
	background: var(--box-fade);
	color: var(--color-primary);
	font-size: 1.2em;
	line-height: 1.9em;
}

.character-block ul {
	margin: 0;
	padding: 0;
}

.character-block a:hover h2 {
	color: #fff;
}

.character-block h2 a {
	color: black;
	opacity: .6;
}

.character-block a:hover {
	color: #fff;
}

.character-block div div div {
	border: 1px solid var(--border);
	background: var(--box);
	height: 25rem;
}


.info-block {
	display: inline-flex;
	flex-wrap: wrap;
}

.size3,
.size4 {
	margin: 0 1% 2% 1%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}

.size3 {
	width: 31.3%
}

.size4 {
	width: 23%
}

.info-block div {
	text-align: center;
}

.info-block h2 {
	color: #000;
	background: var(--color-accent);
	margin: -1px 1px 0 1px;
	padding: 10px;
}

.info-block li {
	list-style: none;
	background: var(--box-fade);
	color: var(--color-primary);
	font-size: 1.2em;
	line-height: 1.9em;
}

.info-block ul {
	margin: 0;
	padding: 0;
}

.info-block a:hover h2 {
	color: #fff;
}

.info-block h2 a {
	color: black;
	opacity: .6;
}

.info-block a:hover {
	color: #fff;
}

.info-block div div div {
	padding: 1em;
}

.char-box,
.char-box>.gradient-v {
	height: auto !important;
	margin-bottom: 0 !important;
}

.index-block div {
	background: var(--box);
	height: 100px;
	overflow: hidden;
	line-height: 80px;
	text-align: center;
	margin-bottom: 2em;
	border: 1px solid var(--border);
}

.index-block div:hover {
	background: var(--box-fade);
	border: 1px solid var(--color-accent);
}

.index-block a:hover h3 {
	color: var(--color-primary) !important;
}

.index-block a h3 {
	color: var(--color-accent) !important;
	margin: 10px 0;
}

.wiki-box ul li ul li {
	font-size: .9em;
}

.wiki-box li span {
	display: inline-block;
}

.wiki-box {
	background: var(--box);
	border: 1px solid var(--border);
	padding: 5px 20px;
}
.wiki-box li.list-head {
  border-bottom:none;
}
.wiki-box dt {
	font-weight: bold;
	margin-top: 20px;
}

.wiki-box dt:first-child {
	font-weight: bold;
	margin-top: 0px;
}

.wiki-box dd {
	margin-left: 5px;
}

.wiki-box dd:before {
	content: url("../images/arrow.png");
	margin-right: 3px;
}

/* Character Page Styles ============================================================================================= */
.character-page section {
	padding-bottom: 6em;
}

.character-info {
	width: auto;
	text-align: justify;
	/* display: flex;
    flex-wrap: nowrap;
    flex-direction: column;*/
}

.character-page p {
	margin: 0 0 10px 0;
}

/* Top Bar ================================================================= */
#bar {
	height: 3rem;
	width: 100%;
	top: 0;
	background-color: var(--color-header);
}

.logo-link {
	margin: 0 2% 0 0 !important;
}

.logo-link h1 {
	font-family: var(--font-main) !important;
	border: none;
	font-size: 1.4em;
	margin-top: 13px;
	color: var(--color-header-text);
	font-weight: var(--weight-header);
}

.logo-link img {
	float: left;
	width: 41px;
	margin-right: 0.6rem;
	margin-top: 0.2rem;
}

.bar-link {
	padding: 11px 0;
	height: 3rem;
	text-align: right;
	color: var(--color-header-text) !important;
	text-transform: uppercase;
}

.bar-link>a {
	padding: 7px 10px !important;
	font-size: 1em;
	margin: 37px 0 0 10px;
	display: inline-block;
	color: var(--color-header-text) !important;
}

.bar-link>a:hover {
	background: var(--color-text);
	color: var(--color-header-text) !important;
}

/* Code Translations ============================================================================================= */
dl.code {
	column-count: 2;
	column-gap: 20px;
	padding: 3px 8px;
	background: var(--box);
	border: 1px solid var(--border);
	font-size: .9em
}

.code dt {
	font-family: 'Courier Prime', monospace;
	font-weight: bold;
	color: var(--color-accent);
}

.code dd {
	margin: 0 0 0 10px;
	line-height: 1.4em;
	text-align: left;
}

p.code {
	font-family: var(--font-code);
	color: var(--color-accent);
	background: var(--box);
	border: 1px solid var(--border);
	padding: 5px 10px;
	font-weight: bold;
	text-align: left;
	display: flex;
}

dt.dna-layer {
	font-size: 1.2em;
	border-bottom: 1px solid var(--border);
	line-height: .8em;
	margin-top: 12px;
	text-align: center;
	color: var(--fade);
	font-weight: normal;
}

/* Pathfinder Stat Block ============================================================================================= */
.statblock {
	line-height: 1.5em;
	margin-top: 1em;
}

.statblock p {
	margin: 0;
	text-indent: -1em;
	padding-left: 1em;
	text-align: left;
}

.statblock h3 {
	padding: 5px 10px;
	text-transform: uppercase;
	margin-top: 0;
	background: var(--stat-box);
	color: var(--stat-font) !important;
	font-weight: 500;
	font-size: 1.2em;
}

.statblock h3 span {
	float: right;
}

.statblock h4 {
	text-transform: uppercase;
	line-height: 1.3em;
	margin: 10px 0 0 0;
	border-top: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	color: var(--color-primary) !important;
}

.statblock p.spell {
	margin: 0;
	padding-left: 2em;
}

.statblock p.description {
	padding-top: 1em;
	font-style: italic;
	text-indent: 0;
	padding-left: 0;
}

div.sp-ab {
	border: 0;
	padding: 0;
}

.statblock .sp-ab p {
	text-indent: 0;
	padding: 0;
}

.statblock .sp-ab h5 {
	font-size: 1em;
	background: var(--fade);
	margin-bottom: 0;
	padding: 1px 4px;
}

/* Image Styles ============================================================================================= */
.has-image-char {
	text-align: center;
}

.has-image-char img {
	height: 350px !important;
	margin: -55px !important;
}

.has-image-char span {
	color: #ffffff4d;
	font-family: 'Short Stack', cursive;
	position: absolute;
	left: -20px;
	bottom: -50px;
	font-size: .65em;
	line-height: 1em;
	text-transform: uppercase;
	text-align: left;
}

img.icon {
	height: 10px;
	width: 10px;
	margin: 0 2px;
	border: none;
	background: none;
}

img.icon2 {
	height: 24px;
	vertical-align: middle;
}

img.icon-location {
	width: 30px;
	vertical-align: middle;
}

.icon img {
	height: 40px;
	width: 40px;
	border: none !important;
	background: none !important;
}

img.icon-dragon {
	height: 40px;
}

img.list-portrait {
	width: 25px;
	vertical-align: middle;
	border: 1px solid var(--border);
	margin: 1px 3px;
	background: var(--box-fade);
}

img.list-icon {
	width: 25px;
	vertical-align: middle;
	margin: 1px 3px;
}

.deceased:before {
	content: url("../images/icon-grave.png");
	margin-left: -20px;
	margin-top: 3px;
	position: absolute;
}

.online {
  opacity:1!important;
}

.dnd {
	font-style: italic;
	padding-right: 40px;
}
.dnd:after {
	content: "";
	margin-left: 5px;
	margin-top: 6px;
	position: absolute;
	height: 12px;
	width: 12px;
	background-size: 12px 12px;
	background-image: url("../images/icon-dice.png";
}


img.menu-icon {
	width: 18px;
	float: left;
	margin: 0 5px 0 0
}

.external.e-link {
	margin-right: 18px;
}

.external:after {
	content: "";
	margin-left: 5px;
	margin-top: 5px;
	position: absolute;
	height: 10px;
	width: 10px;
	background-size: 10px 10px;
	background-image: url(../images/icon_external.png);
}

/* == Icon Thingies =============================================== */
.locked:after {
	content: "";
	margin-left: 5px;
	margin-top: 6px;
	position: absolute;
	height: 12px;
	width: 12px;
	background-size: 12px 12px;
	background-image: url(../images/icon-lock.png);
}

.wotc:after {
	content: "";
	margin-left: 5px;
	margin-top: 6px;
	position: absolute;
	height: 12px;
	width: 12px;
	background-size: 12px 12px;
	background-image: url(../images/icon-wotc.png);
}

.copyright:after {
	content: "";
	margin-left: 5px;
	margin-top: 6px;
	position: absolute;
	height: 12px;
	width: 12px;
	background-size: 12px 12px;
	background-image: url(../images/icon-copyright.png);
}

img.text-image {
	width: 25%;
	border: 1px solid var(--fade);
}

img.text-badge {
	width: 100px;
}

img.accrdhdr-badge {
	width: 18px;
}

.text_left {
	margin: .5%;
	float: left;
}

.text_right {
	margin: .5%;
	float: right;
}

/* Story Covers ============================================================================================= */
.story_cover_title {
	height: 100px;
}

.story_cover_minor h1 {
	margin: 8%;
	display: inline-block;
	color: var(--color-heading);
}

.storybox {
	padding: 20px;
}