@font-face {
	font-family: "WorldspannerX";
	src: url('WorldspannerX.otf') format('opentype'), url('WorldspannerX.ttf') format('truetype'), url('worldspannerx-webfont.woff') format('woff'), url('worldspannerx-webfont.woff2') format('woff2');
}

@font-face {
	font-family: "WorldspannerH";
	src: url('WorldspannerH-Regular.otf') format('opentype'), url('WorldspannerH-Regular.ttf') format('truetype'), url('worldspannerh-regular-webfont.woff') format('woff'), url('worldspannerh-regular-webfont.woff2') format('woff2');
}

@font-face {
	font-family: "WorldspannerT";
	src: url('WorldspannerT.otf') format('opentype'), url('WorldspannerT.ttf') format('truetype'), url('worldspannert-webfont.woff') format('woff'), url('worldspannert-webfont.woff2') format('woff2');
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: Verdana, sans-serif;
	overflow-x: hidden;
	box-sizing: border-box
}


*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font-size: 15px;
	line-height: 1.5;
	margin: 40px 0 0 0;
	min-height: 100vh;
	position: relative;
}

header {
	min-height: 45px;
}

footer {
	background: #0f2125;
	bottom: 0;
	height: 25px;
	padding: 1.875em 0;
	position: relative;
	text-align: center;
	width: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block
}

img {
	border: 0;
	margin: 0 auto;
	vertical-align: middle;
}

h1, h2, h3, h4, h5 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	margin-top: 1rem;
	text-align: left;
}

h1 {
	color: #5050AA;
	font-size: calc(1.8rem + 0.5vw);
	margin-bottom: .5rem;
	text-align: center;
}

h2 {
	color: #353570;
	font-size: calc(1.45rem + 0.5vw);
	margin-bottom: 0.3rem;
}

h3 {
	color: #202040;
	font-size: calc(1.2rem + 0.5vw);
	font-style: italic;
	font-weight: normal;
	margin-bottom: 0.1rem;
}

h4 {
	color: #005599;
	font-size: calc(0.9rem + 0.5vw);
	font-weight: normal;
	margin-bottom: 0rem;
}

h5 {
	font-size: calc(0.8rem + 0.5vw);
	font-weight: normal;
	margin-bottom: 0rem;
}

p {
	color: #000000;
	display: block;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.1rem;
	line-height: 1.4;
	margin-bottom: .5rem;
	margin-top: .5rem;
	text-align: left;
}

li {
	color: #000000;
	display: block;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1rem;
	text-align: left;
	line-height: 1.6;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	margin-bottom: .5rem;
	margin-top: .5rem;
}

.big-letters {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 1.3rem;
}

.giant-letters {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 1.8rem;
}

.text-dark-narrative {
	font-family: WorldspannerT, sans-serif;
	font-size: 1.6em;
	text-align: left;
	margin: 0px 5px 5px 10px;
	color: rgba(220, 210, 200, 1);
}
.text-dark-header {
	font-family: WorldspannerH, sans-serif;
	font-size: 2.5em;
	text-align: left;
	margin: 0px 5px 5px 10px;
	color: rgba(250, 230, 210, 1);
}
.text-dark-subheader {
	font-family: WorldspannerH, sans-serif;
	font-size: 2em;
	text-align: left;
	margin: 0px 5px 5px 10px;
	color: rgba(250, 230, 210, 1);
}


/* CSS */
.button-25 {
	background-color: #36A9AE;
	background-image: linear-gradient(#37ADB2, #329CA0);
	border: 1px solid #2A8387;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	font-family: -apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 17px;
	line-height: 100%;
	margin: 5px;
	outline: 0;
	padding: 5px;
	text-align: center;
	transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	width: 100%;
}

.button-25:hover {
	box-shadow: rgba(255, 255, 255, 0.3) 0 0 2px inset, rgba(0, 0, 0, 0.4) 0 1px 2px;
	text-decoration: none;
	transition-duration: .15s, .15s;
}

.button-25:active {
	box-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px inset, rgba(0, 0, 0, 0.4) 0 1px 1px;
}

.button-25:disabled {
	cursor: not-allowed;
	opacity: .6;
}

	.button-25:disabled:active {
		pointer-events: none;
	}

	.button-25:disabled:hover {
		box-shadow: none;
	}

/*[type=text] {
    width: 90%;
}
*/
textarea {
	overflow: auto;
	width: 90%;
}

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

.clear-float {
	clear: both;
}
.margin-buffer20 {
	margin-top: 20px;
}




/*** CORE LAYOUT AND STRUCTURE ***/
.row {
	display: flex;
	flex-wrap: wrap;
}

.row-listitem {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 10%;
}

.row-listtext {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 90%;
}

.row-item0 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 350px;
	border-style: solid;
	border-width: 2px;
	border-color: #AAAAAA;
	background-color: #DDDDDD;
}

.row-item1 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 350px;
	border-style: solid;
	border-width: 2px;
	border-color: #AAAAAA;
	background-color: #FFEEDD;
}

.row-item2 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 350px;
	border-style: solid;
	border-width: 2px;
	border-color: #000000;
	background-color: #CCDDFF;
}

.row-item9 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 350px;
	background-color: #DDDDEE;
}


.row-panel0 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 300px;
	border-style: solid;
	border-width: 2px;
	border-color: #AAAACC;
	background-color: #CCCCDD;
}

.row-panel1 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 300px;
	border-style: solid;
	border-width: 2px;
	border-color: #AAAACC;
	background-color: #EEEEFF;
}

.row-panel2 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 300px;
	border-style: solid;
	border-width: 2px;
	border-color: #AAAACC;
	background-color: #CCDDFF;
}

.row-panel9 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 320px;
}

.row-panel-full {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 100%;
}


.container {
	width: 100%;
}

.weblink {
	color: blue;
	font-weight: bold
}

@media (min-width:601px) {
	.half {
		width: 49.99%;
	}

	.third {
		width: 33.33%;
	}

	.fourth {
		width: 25%;
	}

	.fifth {
		width: 20%;
	}
}

.mobiloid {
	width: 25%;
}

@media screen and (max-width: 1200px) {
	.mobiloid {
		width: 33.33%;
	}
}

@media screen and (max-width: 900px) {
	.mobiloid {
		width: 50%;
	}
}

@media screen and (max-width: 600px) {
	.mobiloid {
		width: 100%;
	}
}

/************************************/

/*** CORE ELEMENTS AND CONTROLS ***/

.button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}

	.button:hover {
		color: #000 !important;
		background-color: #0099CC !important;
	}

	.button:disabled {
		cursor: not-allowed;
		opacity: 0.3;
	}

/************************************/
/*** Feedbacker Colors ***/

.fbk-info {
	background-color: #008800;
	color: #FFFFFF
}
.fbk-warning {
	background-color: #660066;
	color: #FFFFFF
}
.fbk-error {
	background-color: #660000;
	color: #FFFFFF
} 

/************************************/
/*** Top Navigation with Hamburger Menu ***/
.topnav {
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9000;
}

	.topnav a {
		border: none;
		color: white;
		display: block;
		float: left;
		font-size: 14px;
		font-weight: bold;
		outline: 0;
		padding: 8px 8px 4px 8px;
		text-align: center;
		text-decoration: none;
		transition-duration: 0.3s;
		transition-property: background-color, color;
		white-space: normal;
		width: auto;
	}

		.topnav a:hover {
			color: #0099CC;
		}

	.topnav .icon {
		display: none;
	}

@media screen and (max-width: 700px) {
	.topnav a:not(.topnav-keepon) {
		display: none;
	}

	.topnav a.icon {
		float: right;
		display: block;
	}
}

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

	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}




/************************************/


/*** MISC COMPONENTS FOR OTHER SITE PLATFORM SECTIONS ***/

/*	Ajax Loader style.  
	To use, add this element to the page: <div id="loader"></div> 
*/
#loader {
	background: url("/images/Ajax_loader.gif") no-repeat center top #172531;
	position: fixed;
	height: 100%;
	width: 100%;
}

.keep-together {
	display: inline-bllock;
}

.frame {
	background-color: rgba(0, 0, 0, 0.8);
	height: 0;
	opacity: 0;
	overflow: scroll;
	position: fixed;
	transition: height ease 1s, opacity ease 1s;
	width: 100vw;
	z-index: 9500;
}

	.frame > .icon {
		color: white;
		font-size: 3em;
		left: 50%;
		line-height: normal;
		position: absolute;
		right: 50%;
		top: 0%;
	}

		.frame > .icon > i {
			background-color: #0099CC;
			border-radius: 50%;
			padding: 0px 7px 0px 8px;
			transition: background-color ease 0.2s, color ease 0.2s;
		}

			.frame > .icon > i:hover {
				background-color: white;
				color: #0099CC;
			}

.frame-visible .icon > i {
	position: fixed;
}

.frame > div {
	background-color: azure;
	box-shadow: 2px 2px 6px black;
	margin: 4em calc(20vw - 70px) 3em calc(20vw - 70px);
	padding: calc(18px + 1vw);
}

.frame > img {
	box-shadow: 2px 2px 6px black;
	display: block;
	margin: 4em auto 3em auto;
}

.frame-visible {
	display: block;
	height: 100vh;
	opacity: 1;
}

.field-validation-error {
	color: red;
	font-weight: bolder;
}

.navbar-vertical-center {
	padding-top: 22px !important
}

.layer-back {
	position: relative;
	z-index: -1
}

.layer-front-right {
	position: absolute;
	top: 5%;
	right: 5%
}

.theme-color-ws1 {
	color: #6B4900 !important
}

.theme-color-ws2 {
	color: #AACC88 !important
}

.theme-color-dark-blue-light {
	color: #C6E6E9 !important
}

.theme-color-dark-blue-dark {
	color: #AACC88 !important
}

.ws-theme-dark {
	background-color: #000000 !important
}

.theme-dark {
	background-color: #172531 !important
}

.theme-lightest {
	background-color: #ffffff !important
}

.theme-light {
	background-color: #F0ECE2 !important
}

.text-light {
	color: #F0ECE2;
}

.ws-color-orange {
	color: #C86E05;
}

.ws-error {
	color: #FFCCCC;
	background-color: #FF8888;
	border-radius: 5px;
	border-width: 2px;
	border-color: #330000;
}

.ws-color-light-brown {
	color: #C8AA78;
}

.big-title {
	color: white;
	text-shadow: 2px 2px 2px #000000;
}

.excerpt {
	color: #592F2B;
	font-weight: bold;
}

.embed-youtube {
	aspect-ratio: 1920/1080;
	width: 100%;
}

.splash {
	background-color: black;
	overflow: hidden;
	position: relative;
}

	.splash > div {
		text-align: center;
		width: 100%;
		z-index: 100;
	}

		.splash > div h1 {
			animation-delay: 0.1s;
			animation-duration: 0.3s;
			animation-fill-mode: forwards;
			animation-name: splash-text;
			animation-timing-function: linear;
			color: white;
			margin: 1rem 0rem;
			opacity: 0.1;
		}

@media screen and (max-width: 600px) {
	.splash > div {
		background-color: azure;
		width: 100%;
	}

		.splash > div h1 {
			color: #5050AA;
			margin: unset;
		}
}

@keyframes splash-text {
	0% {
		opacity: 0.2;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.home-splash-logo {
	max-width: 100%;
	padding: 1em 20%;
}

.hero-splash {
	position: absolute;
}

.flicker {
	animation-delay: 1s;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-name: flicker-entrance;
	animation-timing-function: ease-out;
	left: -20vw;
	filter: brightness(1.2);
	opacity: 0.1;
	top: 20vw;
	width: 20vw;
}

@keyframes flicker-entrance {
	0% {
		left: -20vw;
		top: 20vw;
	}

	100% {
		left: calc(5vw + 5px);
		opacity: 1;
		top: 0vw;
	}
}

.sanchez {
	animation-delay: 0.3s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-name: sanchez-entrance;
	animation-timing-function: ease-out;
	right: -20vw;
	top: 1vw;
	width: 20vw;
}

@keyframes sanchez-entrance {
	0% {
		filter: brightness(1);
		right: -20vw;
		top: 1vw;
	}

	50% {
		filter: brightness(1);
		right: -5vw;
	}

	75% {
		filter: brightness(15);
	}

	85% {
		filter: brightness(1);
	}

	100% {
		filter: brightness(1.2);
		right: calc(5vw - 15px);
		top: 0vw;
	}
}

/************************************/
.center-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.crowding-image-right {
	margin-left: 25%;
	margin-right: -25%
}

@media screen and (max-width: 600px) {
	.crowding-image-right {
		margin-left: 0%;
		margin-right: 0%
	}
}

.crowding-image-left {
	margin-left: -25%;
}


@media screen and (max-width: 600px) {
	.crowding-image-left {
		margin-left: 0%;
	}
}

.leftpic {
	margin: 20px 5px 5px 5px;
	text-align: left;
	float: left;
	vertical-align: top;
}

.rightpic {
	margin: 20px 5px 5px 5px;
	text-align: right;
	float: right;
	vertical-align: top;
}


.imagefull {
	max-width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 5px 5px 8px #222222;
}

.imageleft {
	max-width: 60%;
	margin: 5px 5px 5px 5px;
	text-align: left;
	float: left;
	vertical-align: top;
	box-shadow: 5px 5px 8px #222222;
}

.imageright {
	max-width: 60%;
	margin: 5px 5px 5px 5px;
	text-align: right;
	float: right;
	vertical-align: top;
	box-shadow: 5px 5px 8px #222222;
}

.imageright40  {
	max-width: 40%;
	margin: 5px 5px 5px 5px;
	text-align: right;
	float: right;
	vertical-align: top;
	box-shadow: 5px 5px 8px #222222;
}

.page-out {
	background-color: azure;
	box-shadow: 2px 2px 6px black;
	padding: calc(18px + 1vw);
}

@keyframes page-slide {
	from {
		transform: translateX(40vw);
	}

	to {
		transform: translateX(0vw);
	}
}

@media screen and (min-width: 600px) {
	.page-out {
		animation-delay: 0.25s;
		animation-duration: 0.7s;
		animation-fill-mode: forwards;
		animation-name: page-slide;
		animation-timing-function: ease-out;
		transform: translateX(40vw);
	}
}

/*** BUTTON AND LINK GRAPHICS ***/

.lobby-bar-a {
	cursor: pointer;
	border: none;
	vertical-align: middle;
	color: inherit;
	text-align: center;
	display: inline-block;
	width: 95%;
	margin: 0, 0, 0, 20px;
}



.icon-button-a {
	cursor: pointer;
	border: none;
	vertical-align: middle;
	color: inherit;
	text-align: center;
	display: inline-block;
	width: calc(90px + 5%);
}

.box-shadow {
	box-shadow: 5px 5px 8px #222222;
}

.drop-shadow {
	filter: drop-shadow(2px 2px 6px #000);
}

.obsolete-iba {
	cursor: pointer;
	border: none;
	vertical-align: middle;
	color: inherit;
	text-align: center;
	display: inline-block;
	width: calc(180px + 10%);
}

.icon-button-img, .obsolete-ibi, .lobby-bar-img {
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	width: 95%;
}

.image-button-a {
	cursor: pointer;
	border: none;
	vertical-align: middle;
	color: inherit;
	text-align: center;
	display: inline-block;
	margin: 10px;
}


.image-button-img {
	filter: drop-shadow(2px 2px 6px #000000);
	transition: filter 0.3s;
	max-width: 95%;
}
.image-button-img:hover {
	filter: drop-shadow(2px 2px 6px #FFFFFF);
}


.obsolete-iba:hover, .lobby-bar-a:hover, .icon-button-a:hover, .image-button-a:hover {
	filter: saturate(1.5);
}

}
.obsolete-iba:hover img, .lobby-bar-a:hover img, .icon-button-a:hover img, .image-button-a:hover img {
	filter: drop-shadow(2px 2px 12px #00CCFF);
}

.lobby-bar-text {
	color: #000000;
	font-weight: bold;
	line-height: 1;
	margin-top: 0px;
	margin-bottom: 20px;
	padding-left: 5%;
	padding-right: 15%;
	text-align: center;
}

/************************************/

/*** PANEL, QUOTE / NEWS ***/

.panel, .panel-news {
	background-color: #f1f1f1;
	border-left: 6px solid #ccc;
	margin-top: 16px;
	margin-bottom: 24px;
}

	.panel > div {
		padding: 5px 15px;
	}

.panel-news {
	border-left-color: #ccc;
	background-color: #D3E4E3;
}

	.panel-news > div {
		padding: 5px 5px;
	}

.quote-panel-inner {
	padding: 5px 15px;
	color: #000 !important;
	background-color: #f1f1f1 !important
}

.quote-text {
	font-size: 1.2rem;
	font-family: Georgia, serif;
	font-style: italic;
}

.signature-text {
	font-size: 1rem;
	font-family: Georgia, serif;
	padding-left: 20px;
	color: #444444;
}

.news-date-text {
	font-size: 1rem;
	padding-left: 20px;
	color: #444444;
	font-style: italic;
}

.news-image {
	width: calc(80px + 10%);
	margin: 5px 5px 5px 5px;
	text-align: right;
	float: right;
	vertical-align: top;
}

.shadowed-image {
	filter: drop-shadow(2px 2px 6px #000);
	transition: filter 0.3s;
	padding: 5px;
	margin: 5px;
}

/************************************/

/*** ANIMATED GALLERY ***/

.gallery {
	display: flex;
	height: calc(10vw + 100px);
	gap: calc(15vw);
	flex-flow: row-reverse;
	justify-content: center;
	margin: 2rem 0rem;
	width: 80%;
}

@media (min-width:601px) {
	.gallery {
		gap: calc(8vw);
	}
}

.gallery > div {
	position: relative;
}

	.gallery > div img {
		animation-name: gallery-flow;
		animation-direction: alternate;
		animation-duration: 1.75s;
		animation-iteration-count: infinite;
		cursor: zoom-in;
		position: absolute;
		height: calc(10vw + 100px);
		transition: all ease-in-out 0.3s;
	}

.gallery:hover > div > a:hover {
	filter: saturate(1.5);
}

.gallery:hover > div img:hover {
	filter: drop-shadow(2px 2px 12px #0099CC);
}

@keyframes gallery-flow {
	from {
		transform: translateY(-5px);
	}

	to {
		transform: translateY(5px);
	}
}

.gallery > div:nth-of-type(1) img {
	animation-delay: 1s;
}

.gallery > div:nth-of-type(2) img {
	animation-delay: 0.8s;
}

.gallery > div:nth-of-type(3) img {
	animation-delay: 0.6s;
}

.gallery > div:nth-of-type(4) img {
	animation-delay: 0.4s;
}

.gallery > div:nth-of-type(5) img {
	animation-delay: 0.2s;
}

/************************************/

/*** FACTIONS PAGE ***/

.game-gallery {
	height: calc(8vw + 50px);
	justify-content: space-between;
	width: 50%;
}

	.game-gallery > div img {
		height: calc(8vw + 50px);
	}


/************************************/

/*** DUSTIES PAGE ***/

.book-gallery {
	justify-content: center;
}

/************************************/




/************************************/

/*** CHARGEN ***/

.chargen-field {
	padding: 5px;
	background-color: #888888;
	border: 1px solid black;
	border-radius: 8px;
	margin: 5px;
	display: block;
}

.chargen-textbox {
	margin: 8px;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 8px;
	font-weight: bolder;
	font-size: 1.2rem;
	display: block;
	color: #003399
}

.chargen-textbox-textarea {
	margin: 8px;
	padding: 8px;
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 8px;
	font-weight: normal;
	font-size: 1.1rem;
	display: block;
	color: #003399;
}


.chargen-label {
	vertical-align: top;
	padding: 8px;
	border: none;
	font-weight: bolder;
	font-size: 1.2rem;
	display: block;
	color: #000000;
}

.chargen-entry-div {
	width: 95%;
	vertical-align: top;
	/*    border: double;
    border-radius: 3px;
    border-color: #000000;
*/ color: inherit;
	display: inline-block;
	margin: 5px 5px 5px 5px;
}

.chargen-comment {
	vertical-align: top;
	color: inherit;
	text-align: center;
	display: block;
	font-size: 1rem;
	line-height: 1.2;
	padding: 5px;
	color: #2200CC;
}

.chargen-tell {
	vertical-align: top;
	color: inherit;
	text-align: center;
	display: block;
	font-size: 1.2rem;
	font-weight: bolder;
	padding: 5px;
	color: #00CC22;
}

.chargen-key {
	vertical-align: top;
	color: inherit;
	text-align: center;
	display: block;
	font-size: 1.2rem;
	font-weight: bolder;
	padding: 5px;
	color: #002266;
}

.chargen-reax {
	vertical-align: top;
	color: inherit;
	text-align: center;
	display: block;
	max-height: 120px;
	padding: 5px;
}

.chargen-explain {
	vertical-align: top;
	color: inherit;
	text-align: left;
	display: block;
	font-size: .9rem;
	padding: 5px;
}

.chargen-explain-nl {
	vertical-align: top;
	color: inherit;
	text-align: left;
	display: block;
	font-size: .9rem;
	padding: 5px;
}

.chargen-text {
	color: inherit;
	text-align: left;
	display: block;
	font-size: 1rem;
	padding: 5px;
}

.plaque-header {
	text-align: center;
	vertical-align: top;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 5px;
	padding: 0px 0px;
	transition: filter 0.3s;
	height: 150px;
}

@media (max-width:380px) {
	.plaque-header {
		height: 100px;
	}
}

.plaque-button-img {
	vertical-align: top;
	cursor: pointer;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	height: 120px;
}

	.plaque-button-img:hover {
		filter: drop-shadow(2px 2px 12px #0099CC);
	}

.plaque-img {
	vertical-align: top;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	height: 120px;
}

.portrait-img {
	vertical-align: top;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	height: 240px;
}

.plaque-pers-img {
	vertical-align: top;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	height: 400px;
}

.chargen-img {
	vertical-align: top;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	width: 95%;
	max-width: 320px;
}

.chargen-header-img {
	vertical-align: top;
	filter: drop-shadow(2px 2px 6px #000);
	margin: 0;
	padding: 5px 0px;
	transition: filter 0.3s;
	width: 95%;
}

@media (max-width:380px) {
	.plaque-button-img, .plaque-img {
		height: 80px;
	}
}

.plaque-button-img:hover {
	filter: drop-shadow(2px 2px 12px #0099CC);
}

.plaque-button {
	cursor: pointer;
	border: none;
	vertical-align: middle;
	color: inherit;
	text-align: center;
	display: block;
	max-height: 150px;
}

	.plaque-button:hover {
		filter: saturate(1.5);
	}



/************************************/
/* MISC WEIRDOS */



.hero-fbk {
	cursor: pointer;
	filter: drop-shadow(2px 2px 6px #000);
	transition: filter 0.3s;
	height: 48px;
	position: fixed;
	top: 96px;
	right: 5px;
	z-index: 9901;
	width: 120px;
}



/************************************/
/* FLEXBAR MENU */

/* CSSTerm.com Flyout CSS menu */



.dyn-button {
	cursor: pointer;
	filter: drop-shadow(2px 2px 6px #000);
	height: 48px;
	position: fixed;
	right: 5px;
	top: 48px;
	transition: filter 0.3s, transform 0.3s;
	z-index: 9901;
}

	.dyn-button:hover {
		filter: drop-shadow(2px 2px 12px #CCFFCC);
	}

.dyn-button-open {
	filter: drop-shadow(-2px -2px 6px #000);
	transform: rotate(180deg);
}

	.dyn-button-open:hover {
		filter: drop-shadow(-2px -2px 12px #CCFFCC);
	}

.dyn-row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.dyn-row-item0 {
	border-color: #005500;
	background-color: #AAFFAA;
}

.dyn-row-item1 {
	border-color: #005500;
	background-color: #BBCCBB;
}

.dyn-row-item2 {
	border-color: #000000;
	background-color: #999999;
}

.dyn-row-item0, .dyn-row-item1, .dyn-row-item2 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0px;
	border-style: solid;
	border-width: 2px;
	display: inline-block;
	text-align: center;
	transition: filter 0.3s;
}

	.dyn-row-item0:hover, .dyn-row-item1:hover, .dyn-row-item2:hover {
		filter: brightness(0.75);
	}

.dyn-container {
	display: none;
	height: 40px;
	z-index: 9900;
	position: fixed;
	top: 48px;
	right: 90px;
}

.dyn-item {
	width: 100%;
	color: inherit;
	display: inline-block;
	margin: 5px 5px 5px 5px;
	padding-right: 5px;
	font-weight: bold;
	cursor: pointer;
}
.dyn-item:hover {
	filter: drop-shadow(2px 2px 12px #FFFFFF);
}


.dyn-text {
	width: 140px;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	height: 100%;
	padding: 5px 5px 5px 5px;
	text-decoration: none;
}
.dyn-text a:hover
{
	background-color: #6699CC;
}