html {
	margin:0;
	padding:0;
	min-height:100%;
	font-family:comma-base, serif;
	font-size:100%;
	background:#000;
}
body {
	margin:0;
	padding:0;
}
#back_all {
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:-1;
	box-shadow:0 0 50px 50px #000 inset;
	opacity:0.35;
}

a {
	outline:0;
}

/* HEADINGS */
h1 {
	font-family:var(--big-font);
	margin:0 15px;
	padding-top:10px;
}
h2 {
	font-family:var(--big-font);
	margin-top:0;
	padding-top:10px;
}
h3 {
	font-family:var(--big-font);
	margin-top:0;
	margin-bottom:5px;
	padding-top:10px;
}
h5 {
	font-family:var(--big-font);
	margin:2px;
	font-size:14pt;
	color:#300;
}

main {
	position:relative;
	background:rgba(235,235,235,0.9);
}

.big_font { font-family:var(--big-font); font-size:20pt; }

/* ACCESSIBLITY */
/*a:focus { box-shadow:0 0 3px #fff; }
a:active { outline:none; }*/
/* LOGO */
#logo {
	display:inline-block;
}
#logo *:hover {
	filter:drop-shadow(0 0 5px rgba(0,0,0,0.8));
}
#logo img {
	float:left;
}
/* NAVIGATION */	
nav {
	background:rgba(25,25,25,0.8);
}
nav a, nav form {
	padding:5px;
	display:inline-block;
	text-decoration:none;
	color:#3992ff;
	text-shadow:0 0 3px #000;
}
nav form a {
	height:35px;
	margin-top:-5px;
	vertical-align:top;
	padding-top:20px;
}
nav a img {
	width:27px;
	height:27px;
	vertical-align:-20px;
	margin-left:-3px;
	padding-right:5px;
}
/* FOOTER */
footer {
	width:100%;
	text-align:center;
	background:rgba(25,25,25,0.8);
	padding-bottom:20px;
}
footer small {
	color:#888;
}	
footer a {
	text-decoration:none;
	padding:5px;
	font-family:var(--big-font);
	color:#f33;
	vertical-align:-15px;
}
footer a:hover {
	color:#c00;
}
  
#content {
	position:relative;
	z-index:10;
	padding:0 10px 10px 10px;
}

#cookie {
	position:fixed;
	background:#000;
	color:#fff;
	bottom:0;
	z-index:1000;
	padding:10px;
}

/* ------- FORM STUFF ------------- */
textarea {
	vertical-align:top;
}
label {
	cursor:pointer;
}
input:not(.inv_input):not(.slider):not(.name_input), textarea, select {
	margin:5px;
	padding:4px;
	font-size:16px;
	border:1px #666 solid;
	outline:none;
	background:#fff;
	font-family:var(--standard-font);
}
input[type="number"] {
	padding:2px; font-size:20px; font-family: var(--big-font);
}
input[type="number"]::before {
	content:"-";
}
button, .button, .red_button, .green_button, .blue_button {
	width:189px;
	height:58px;
	margin:0;
	padding:0;
	color:#fff;
	cursor:pointer; 
	font-family: var(--big-font);
	text-align:center;
	border:none;
	text-decoration:none;
	display:inline-block;
	position:relative;
}
button img, .button img, .red_button img{
	width:20px;
	height:20px;
	vertical-align:-4px;
	filter:drop-shadow(0 2px 2px #333);
}

input[type='checkbox'] {
	opacity:0;
	width:0;
	position:absolute;
	left:-100px;
	visibility:hidden;
}
input[type='checkbox'] + label, .checkbox {
	margin:0;
	clear:none;
	display:inline-block;
}
input[type='checkbox'] + label::before, .checkbox::before {
	content:"\2713";
	color:rgba(0,0,0,0.1);
	width:20px;
	height:20px;
	display:inline-block;
	box-shadow:0 0 3px #666 inset; 
	border:1px solid #777;
	margin-right:5px;
	padding:15px 10px;
	padding-top:0;
	vertical-align:middle;
	font-size:25px;
	font-weight:bold;
	text-align:center;
}
input[type='checkbox']:checked + label:before, .checkbox_checked::before {
	content:"\2713";
	color:#fff;
	background:#0072ff;
	font-weight:bold;
}
input:valid {
	border:1px solid green;
}

.small_check {
	height:auto !important;
}
.small_check::before {
	font-size:15px !important;
	padding:0 !important;
}

select {
	display:inline-block;
	font-family:var(--standard-font);
	font-weight:700;
	color:#222;
	line-height:1.3;
	font-size:15pt;
	padding:.1em 1.4em .1em .8em;
	box-sizing:border-box;
	margin:0;
	border:0;
	cursor:pointer;
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
	background-color:#e5e5e5;
	background-image:url(/img/arrow_down.png), linear-gradient(to bottom, #eee 0%,#e5e5e5 100%);
	background-repeat:no-repeat, repeat;
	background-position:right .7em top 50%, 0 0;
	background-size:.65em auto, 100%;
}
select::-ms-expand {
	display:none;
}
select:focus {
	color:#222;
}
select option {
	font-weight:normal;
}

input[type="file"] {
	font-size: 17px;
	color: #b8b8b8;
	background:#888 !important;
	cursor: pointer !important;
	padding:2px !important;
}

/* WYSIWYG EDITOR */
.trumbowyg-viewHTML-button, .trumbowyg-textual-button {
	color:#222;
}
.trumbowyg-editor {
	text-align: left;
}
.trumbowyg-box, .trumbowyg-editor {
	border:1px solid #333;
	background:#eee;
	min-height:160px !important;
}
		
.trumbowyg-linkItem-button {
	background:url(/img/icons/item.webp) no-repeat;
}

.trumbowyg-modal {
	overflow:auto !important;
	max-width:800px !important;
	min-height:450px !important;
}
.trumbowyg-modal-box {
	max-width:100% !important;
	width:100% !important;
}
.trumbowyg-modal-box label { display:inline-block !important; margin:0 !important; height:auto !important; }
.trumbowyg-modal-box label img, .imageGallery img { max-width:120px; max-height:120px; }
.trumbowyg-modal-box .trumbowyg-modal-title { margin:0 !important; }
.trumbowyg-box { max-height:500px !important; overflow: hidden !important; }
.trumbowyg-editor-box { max-height: 500px !important; overflow: auto !important; }

/* ------------ GENERAL SETTINGS --------------- */
.full_opacity {
	opacity:1;
}
.low_opacity {
	opacity:0.2;
}
.uppercase {
	text-transform:uppercase;
}
.center {
	text-align:center;
}

.invisible {
	visibility:hidden;
}
.text_left {
	text-align:left!important;
}
.bw {
	filter:saturate(0);
}
.left {
	float:left;
}
.right {
	float:right;
}
.clear_both {
	clear:both;
}

/* BUTTONS */
a.button {
	height:38px;
	padding:20px 0 0 0;
	vertical-align:top;
}

.blue_button {
	filter:hue-rotate(180deg) grayscale(40%);
}
.blue_button::after {
	content:"\2B9B";
}
.active_blue::after {
	content:"\2B99";
}
.green_button {
	filter:hue-rotate(90deg);
}
button.green_button, button.blue_button {
	height:58px;
	padding:0;
}

/* POPUP */
#black_back, #black_back2 {
	width:100%;
	height:100%;
	position:fixed;
	top:-0;
	left:0;
	text-align:center;
	overflow:auto;
	background:rgba(5,5,5,0.9);
	z-index:1000;
	& .top_div, & .top_div2 {
		display:inline-block;
		margin:40px auto 0 auto;
		min-height:100px;
		max-width:90%;
		background-size:100% auto;
		position:relative;
		text-align:left;
		& a:not(.green_button):not(.red_button):not(.blue_button):not(.newer_button):not(.red_ribbon) {
			color:#833;
			text-decoration: none;
			&:hover { color:#a33; }
		}
	}
	& hr {
		margin-top:0;
		color:#600;
		border-color:#600;
	}
	& h4 {
		color:#600;
		padding:3px;
		margin:0;
		font-size:16pt;
		background:rgba(200,150,100,0.4);
	}
}

#black_back2 {
	background:rgba(0,0,0,0.8);
	z-index:1500;
}

.hide_black_back, .hide_black_back2 {
	width:100%;
	height:100%;
	position:fixed;
	z-index:0;
	top:0;
	left:0;
	cursor:pointer;
	backdrop-filter: blur(4px);
}
				
.top_div .popup_head,.top_div .name_form > h3:first-of-type, .map_click h3:first-of-type, .circle_edit h3:first-of-type, .freeform_edit h3:first-of-type,.top_div2 .popup_head 
{
	position:relative;
	margin:-50px auto 15px auto;
	color:#eee;
	background:url(/img/RibbonCentre.png);
	background-size:54px auto; 
	max-width:650px; padding:10px;
	filter:drop-shadow(0 2px 3px #000);
	font-size:12pt;
	text-align:center;
}
.top_div .popup_head::before,.top_div .name_form > h3:first-of-type::before, .map_click h3:first-of-type::before , .circle_edit h3:first-of-type::before, .freeform_edit h3:first-of-type::before,.top_div2 .popup_head::before
{ 
	position:absolute;
	background:url(/img/RibbonSideL.png) no-repeat;
	display:inline-block;
	width:47px;
	height:100%;
	content:''; 
	left:-47px;
	top:0;
	background-size:47px;
}
.top_div .popup_head::after,.top_div .name_form > h3:first-of-type::after, .map_click h3:first-of-type::after, .circle_edit h3:first-of-type::after, .freeform_edit h3:first-of-type::after,.top_div2 .popup_head::after
{
	position:absolute;
	background:url(/img/RibbonSide.png) no-repeat;
	display:inline-block;
	width:47px;
	height:100%;
	content:''; 
	right:-47px;
	top:0;
	background-size:47px;
}
.desc_en h3, .trumbowyg-editor h3 {
	all:unset !important;
	font-family:var(--big-font) !important;
	margin:0 0 5px 0 !important;
	padding-top:10px;
}
.desc_en h3::after, .desc_en h3::before, .trumbowyg-editor h3::after, .trumbowyg-editor h3::before {
	all:unset !important;
}

.top_div2 h3:first-of-type {
	filter: drop-shadow(0 2px 3px #000) hue-rotate(190deg) !important;
}

.error {
	color:#c00;
	font-weight:bold;
	font-size:18pt;
}
.success {
	color:#0c0;
	font-weight:bold;
}

.yes, .no {
	border:1px solid #777;
	color:#fff;
	padding:7px;
	margin:15px;
	font-weight:bold;
	text-decoration:none;
	font-family:var(--big-font);
	display:inline-block;
	cursor:pointer;
}
.yes {
	background:linear-gradient(#00d400, #007c00);
}
.yes:hover {
	background:linear-gradient(#00e700, #009e00);
}
.yes::before {
	content:"\2713";
	font-size:30px;
	vertical-align:-4px;
}

.no {
	background:linear-gradient(#d40000, #7c0000);
}
.no:hover {
	background:linear-gradient(#f80000, #af0000);
}
.no::before {
	content:"\2716";
	font-size:30px;
	vertical-align:-4px;
}
	
.ok,.info {
	min-width:30px;
	min-height:30px;
	display:inline-block;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:22px;
	border-radius:50px;
	cursor:default;
	vertical-align:middle;
	position:relative;
}
.info {
	background:#0050aa;
	cursor:pointer;
}
.info::before {
	content:"?";
	position:absolute;
	left:8px;
}
.ok {
	background:#0f0;
}
.ok::before {
	content:"\2713";
}

.info_bubble {
	font-size:100%;
	padding:0 5px 0 30px;
	font-size:16px;
	font-weight:normal;
}

/* SETTINGS */
.active_form {
	background:rgba(255, 255, 255, 0.5);
	margin-left:5px;
	margin-top:-5px;
	padding:5px;
	box-shadow:1px 2px 4px #aaa;
}

/* TOOLTIPS */
.tooltip, .tutorial {
	position:relative;
	text-decoration:none;
	display:inline-block;

	& .tooltiptext {
		visibility:hidden;
		min-width:120px;
		background:black;
		color: #fff;
		text-align:center;
		padding: 5px 0;
		border-radius: 6px; 
		position:absolute;
		z-index:30;  
		bottom:100%;
		left:50%;
		margin-left:-60px;
	}
	& .tooltipLeft::after {
		left:30%;
	}
	& .tooltipRight::after {
		left:70%;
	}
}
.tooltip:hover .tooltiptext {
	visibility:visible;
}
.tooltip .tooltiptext::after, .tutorial .tutorialtext::after {
  content:" ";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-5px;
  border-width:5px;
  border-style:solid;
  border-color:black transparent transparent transparent;
}

input.name_input {
	width:350px;
	font-family:var(--standard-font);
	font-size:26pt;
	background:#ccc;
}
.tutorial .tutorialtext {
	visibility:visible;
	background:#cc2;
	color:#000;
	padding:6px;
	font-family:var(--standard-font);
	box-shadow:0 0 3px #222;
	&::after {
		border-color:#cc2 transparent transparent transparent;
		filter:drop-shadow(0 3px 3px #222);
	}
}

.medium_big_font, .medium_big_font input {
	font-size:16pt !important;
}
input.inv_input {
	background:none;
	border:0;
	outline:0;
	margin:0;
	padding:0;
	font-family: var(--standard-font);
}
input.inv_input:hover, input.inv_input:focus {
	outline:0;
	background:rgba(255,255,255,0.8);
}

.backy_grey {
	/*font-family:'Charm' !important;*/
	color:#111;
	font-size:17pt;
	line-height:17pt;
	text-decoration:none;
}

.ability {
	text-align:center;
	display:inline-block;
	vertical-align:top;
	position:relative;
	border-image-slice:28;
	border-image-width:28px;
	border-width:3px;
	border-image-outset:0;
	border-image-repeat:stretch;
	border-style:solid;
	border-image-source:url(/img/AbilityDarkNew.webp);
	width:166px;
	height:133px;
	font-family: var(--big-font);
	font-size:13pt;
	padding:0 1px 17px 0;
	filter:drop-shadow(1px 1px 3px #fff);
	background-clip:content-box;
	margin-bottom:5px;
}
.ability .big_font {
	font-size:20pt;
}
.ability a {
	text-decoration:none;
}
.top_div .ability, .top_div2 .ability, #creature_place .ability {
	width:106px;
	height:83px;
}

input[type='checkbox'].skill + label::before, input[type='checkbox'].save_throw + label::before {
	margin:0;
	padding:0;
	outline:0;
	color:transparent;
}
input[type='checkbox'].skill[disabled] + label::before, input[type='checkbox'].save_throw[disabled] + label::before{
	background:#ddd;
}
.save_throw, input[type='checkbox'].save_throw + label::before{
	width:18px;
	height:18px;
	border:4px solid #000;
	transform:rotate(45deg); 
	background:#fff;
	box-shadow:0 0 4px rgba(0,0,0,0.7) inset;
	position:absolute;
	left:calc(50% - 12px);
	bottom:-1px;
}
.prof_st {
	background:linear-gradient(#d40000, #7c0000);
}

input[type='checkbox'].skill + label::before, .death_save {
	background:#fff;
	width:24px;
	height:24px;
	border:4px solid #111;
	border-radius:50%;
	display:inline-block;
	box-shadow:0 0 4px rgba(0,0,0,0.7) inset;
	vertical-align:middle;
}
input[type='checkbox'].skill:checked + label:before,  input[type='checkbox'].save_throw:checked + label:before {
	background:linear-gradient(#d40000, #7c0000); background-clip:content-box;
}
input[type='checkbox'].skill_choose:checked + label:before {
	background:#c60;
}
input[type='checkbox'].skill:not(:checked):not(:disabled) + label:hover::before, input[type='checkbox'].save_throw:not(:checked):not(:disabled) + label:hover::before {
	background:#ccc;
}
input.skill + label {
	height:33px;
}
input[type='checkbox'].skill[disabled] + label, input[type='checkbox'].save_throw[disabled] + label {
	cursor:default;
}
input[type='checkbox'].skill[disabled]:not(:checked) + label, input[type='checkbox'].save_throw[disabled]:not(:checked) + label {
	cursor:default;
	/*opacity:.3;*/
}
button[disabled], .disabled {
	cursor:default;
	opacity:0.5;
}

.ds_active, .death_save:hover {
	background:linear-gradient(#d40000, #7c0000);
}

a.current {
	background:url(/img/ButtonRed.png) 0 -60px;
}

.race, .background, .class, .subclass, .feat, .subrace, .new_border_button { max-width:250px; padding:10px; background:#888; margin:2px; vertical-align:top; border-image-slice: 20;
	border-image-width: 20px;
	border-width:1px;
	border-image-outset:7px;
	border-image-repeat: stretch;
	border-style: solid;
	border-image-source: url(/img/corner_new_3.webp);
	margin:5px;
	border-radius:20px;
	background:rgba(200,200,200,.8) }
.class { width:100px; }
.class img  { max-height:80px; }
.race_back {
	filter:blur(3px) grayscale(70%);
	opacity:0.15;
	position:absolute;
	width:300px;
	height:calc(100% + 60px);
	left:0; }
.race_big_back {
	position:absolute;
	top:-10px;
	left:0;
	opacity:0.2;
	filter:blur(4px);
}
.race img {
	max-width:150px;
	max-height:200px;
}

#ac {
	background:url(/img/ac.png) no-repeat;
	background-size:110px;
	width:110px;
	height:100px;
	text-align:center;
	padding-top:25px;
	display:inline-block;
}
#my_char {
	background:rgba(170,170,170,0.3);
	padding-bottom:10px;
	min-height: 120px;
}

.medium_box_back {
	display:inline-block;
	border-image-slice: 28;
	border-image-width: 28px;
	border-width: 3px;
	border-image-outset: 0;
	border-image-repeat: stretch;
	border-style: solid;
	border-image-source: url(/img/corner_dark_new_1.webp);
	padding: 0 22px 17px 22px;
	text-align:center;
	vertical-align:top;
	min-width:70px;
	max-width:900px;
	position:relative;
	text-overflow:ellipsis;
	margin:0 5px 5px 0;
}
a.medium_box_back {
	background-image:linear-gradient(to top, rgba(250,250,250,0.2), rgba(0,0,0,0.2), rgba(250,250,250,0.2));
	background-origin:border-box;
	border-radius:25px;
}
a.medium_box_back:hover {
	background-image:linear-gradient(to top, rgba(250,250,250,0.2), rgba(250,0,0,0.2), rgba(250,250,250,0.2));
}

.magic_item {
	text-shadow:0 0 2px #00b;
}

.entry_inset { padding:5px; margin:10px; background:rgba(0,0,0,0.2); }

#page_changer {
	text-align:center;
	/*position:absolute;
	top:-150px;
	z-index:5;*/
	background:url(/img/RibbonCentreGrey.png);
	height:80px;
	filter:drop-shadow(0 2px 5px #000);
	display:inline-block;
	/*left:calc(50% - 350px);*/
	margin-bottom:3px;

	& a {
		min-width:120px;
		height:50px;
		color:#fff;
		text-decoration:none;
		display:inline-block;
		padding:30px 10px 0 10px;
		font-family:var(--big-font);
		font-size:17pt;
	}

	& a:hover, & a.active_page {
		text-shadow:0 0 3px #f00;
		background:url(/img/RibbonCentre.png);
		box-shadow:6px 6px 12px #353535 inset,-6px -6px 12px #353535 inset;
	}
	&::before , &::after {
		position:absolute;
		display:inline-block;
		width:86px;
		height:80px;
		content:'';
		top:0;
		background-size:86px;
	}
	&::before {
		background:url(/img/RibbonSideGreyL.png) no-repeat;
		left:-86px;
	}
	&::after {
		background:url(/img/RibbonSideGrey.png) no-repeat;
		right:-86px;
	}
	
}

#char_name {
	text-align:left;
	font-size:29pt;
}

.portrait_border,.mini_portrait_border {
	width:100px;
	height:100px;
	margin:7px;
	float:left;
	border-radius:50%;
	overflow:clip;
	border:7px solid transparent;
	background:linear-gradient(#333,#000);
	background-origin:border-box;
	filter:drop-shadow(1px 2px 3px #333); 
	& img, & img {
		border-radius:50%;
		width:100px;
		height:100px;
	}
}
.mini_portrait_border {
	width:60px;
	height:60px;
	& img {
		width:52px;
		height:52px;
		margin:4px;
	}
}

.dark_back {
	background:rgba(0,0,0,0.5);
	padding:8px;
}
.chooser,.chooserStyle {
	color:#000;
	text-decoration:none;
	text-align:center;
	font-family:var(--big-font);
	position:relative;
	display:inline-block;
	cursor:pointer;
	vertical-align: top;
}
.chooser input[type='radio'] {
	display:none;
	padding:5px;
}
#black_back .chooser {
	color:#000;
}
.race input[type='radio'] + label::before {
	content:"\2713";
	color:rgba(0,0,0,0);
	width:150px;
	height:200px;
	position:absolute;
}
.class_wrapper input[type='radio'] + label::before {
	content:"\2713";
	color:rgba(0,0,0,0);
	width:150px;
	height:184px;
	position:absolute;
}
.chooser input[type='radio']:before + label:before {
	background:rgba(255,255,255,0.5);
}

.not_active_race {
	opacity:0.3;
}
.chooser:hover,.chooserStyle:hover,.chooser:hover img, .chooser:hover span {
	opacity:1;
	filter:drop-shadow(0 0 3px #333);
	transition:all 0.3s ease;
}
.active_race, .chooser.active {
	box-shadow:0 0 30px #fff inset;
	opacity:1;
}

/*.subrace input[type='radio'] + label::before { content:"\2713"; color:rgba(0,0,0,0); position:absolute; }*/
.subrace input[type='radio']:before + label:before, .subclass input[type='radio']:before + label:before {
	background:rgba(255,255,255,0.5);
}

.nice_style	{
	font-family:var(--big-font);
	color:#000;
}
#black_back div .nice_style {
	color:#000;
}
a.nice_style {
	color:#000;
	text-shadow:0 0 4px #fdd;
	text-decoration:none;
}

.popper,.popper_id {
	cursor:pointer;
}

input.input_error {
	border:1px solid red;
	background:url(/img/cancel.png) no-repeat right 35px;
	box-shadow:0 0 8px #f00 inset;
}
.dice_result {
	font-size:60pt;
	vertical-align:middle;
}

/* DICE */
.dice, .dice_rolled {
	display:inline-block;
	color:#000;
	font-size:24pt;
	font-family:Charm;
	vertical-align:middle;
}
.d4 {
	background:url(/img/dice.webp) no-repeat -730px;
	font-size:30pt;
	padding-top:50px;
	text-align:center;
	height:80px;
	width:145px;
}
.d6 {
	background:url(/img/dice.webp) -560px;
	font-size:30pt; padding-top:45px;
	text-align:center;
	height:85px;
	width:160px;
}
.d8 {
	background:url(/img/dice.webp) -420px;
	padding-top:20px;
	text-align:center;
	height:120px;
	width:140px;
}
.d10, .d100 {
	background:url(/img/dice.webp) -275px;
	padding-top:20px;
	text-align:center;
	height:120px;
	width:140px; }
.d12 {
	background:url(/img/dice.webp) -138px;
	padding-top:45px;
	width:133px;
	height:94px;
	text-align:center;
}
.d20 {
	background:url(/img/dice.webp) no-repeat;
	padding-top:50px;
	text-align:center;
	width:128px;
	height:100px;
	font-size:28pt;
}

/* RIBBONS */
.red_ribbon {
	font-family:var(--big-font);
	text-decoration:none;
	position:relative;
	margin:5px 80px;
	color:#fff;
	background:url(/img/RibbonCentre.png);
	height:66px;
	vertical-align:middle;
	text-align:center;
	min-width:400px;
	max-width:650px;
	padding:7px;
	filter:drop-shadow(0 0 5px #000);
	display:inline-block;
	font-size:19pt;
	text-shadow:0 0 2px #111;

	&::before {
		position:absolute;
		background:url(/img/RibbonSideL.png) no-repeat;
		display:inline-block;
		width:86px;
		height:86px;
		content:''; 
		left:-86px;
		top:0;
		background-size:86px;
	}
	&::after {
		position:absolute;
		background:url(/img/RibbonSide.png) no-repeat;
		display:inline-block;
		width:86px;
		height:86px;
		content:''; 
		right:-86px;
		top:0;
		background-size:86px;
	}
	&:hover {
		filter:hue-rotate(40deg) drop-shadow(0 0 8px #000);
	}
}	

.blue_ribbon {
	filter:drop-shadow(0 0 5px #000) hue-rotate(200deg);
}
a.blue_ribbon:hover {
	filter:hue-rotate(260deg) drop-shadow(0 0 8px #000);
}
.green_ribbon {
filter:drop-shadow(0 0 5px #000) hue-rotate(90deg);
}
a.green_ribbon:hover {
	filter:hue-rotate(160deg) drop-shadow(0 0 8px #000);
}
.dark_ribbon {
filter:drop-shadow(0 0 5px #000) saturate(0) brightness(0.4);
}
a.dark_ribbon:hover {
	filter: drop-shadow(0 0 8px #000) saturate(0) brightness(0.7);
}

.mini_ribbon {
	position:relative;
	text-decoration:none;
	background:url(/img/RibbonCentre.png);
	background-size:contain;
	vertical-align:middle;
	filter:drop-shadow(0 0 5px #000); 
	text-shadow:0 0 2px #111;
	color:#fff;

	&:hover {
		filter:hue-rotate(40deg) drop-shadow(0 0 8px #000);
	}
	&::after {
		position:absolute;
		background:url(/img/RibbonSide.png) no-repeat;
		display:inline-block;
		width:56px;
		height:56px;
		content:''; 
		right:-56px;
		top:0;
		background-size:56px;
		z-index:-1;
	}
}

.char_pic {
	border-radius:50%;
	vertical-align:middle;
	width:80px;
	height:80px;
	margin-left:-40px;
}

.npc_back img {
	max-width:500px;
	max-height:300px;
	margin-right:20px;
	margin-bottom:5px;
	float:left;
}

.simple_link {
	color:#111;
	&:hover {
		color:#444;
	}
}

.red_link {
	color:#500;
	&:hover {
		color:#a00;
	}
}

.top_div table td, .top_div table th { border-right:1px solid black; border-bottom:1px solid black; }
	
.show_next_div, .show_next_block {
	cursor:pointer;
}

.expertise {
	filter:hue-rotate(90deg);
}

.tha_div h3 {
	display:none;
}

.adv {
	text-shadow:0 0 4px rgba(0,190,0,0.8);
	&::after{
		content:" ";
		background:url(/img/dice/d20_test.webp) repeat-x;
		width:30px;
		height:20px;
		background-size:15px;
		display:inline-block;
		vertical-align: middle;
		filter:hue-rotate(-100deg);
	}
}
.dadv {
	text-shadow:0 0 4px rgba(190,0,0,0.8);
	&::after{
		content:" ";
		background:url(/img/dice/d20_test.webp) repeat-x;
		width:30px;
		height:20px;
		background-size:15px;
		display:inline-block;
		vertical-align: middle;
		filter:hue-rotate(120deg);
	}
}

@keyframes blink {
  0% {text-shadow:0 0 5px #000;}
  50% {text-shadow:0 0 8px #f00;}
  100% {text-shadow:0 0 5px #000;}
}

a.blinking {
	animation-name:blink;
	animation-duration:1s;
	animation-iteration-count:infinite;
}

.hover_menu {
	position:relative;
	display:inline-block;
	z-index:20;
}
.hover_wrapper {
	position:absolute;
	padding:10px;
	background:#540a0c;
	top:52px;
	z-index:30;
	left:6px;
	width:156px;
	overflow:clip;
	& a {
		color:#fff;
		font-size:14pt;
		display:block;
		font-family:var(--big-font);
		&:hover {
			color:#f00;
		}
	}
	hr {
		color:#a00;
		border-color:#a00;
	}
}

tr.hover { background: rgba(255,255,255,0.3); cursor:pointer; }
tr.hover:hover { background:rgba(0,0,0,0.5); }
	
input.money {
	border:1px solid #aaa;
	font-size:14pt;
}
	
.grey_scroll {
	display:inline-block;
	width:500px;
	max-height:200px;
	overflow-y:auto;
	background:#aaa;
	border:1px solid #444;
	vertical-align:top;
}

.slidecontainer {
	width:300px;
}
.slider {
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	height:25px;
	background:#d3d3d3;
	outline:none;
	padding:2px;
  	opacity:0.7;
	-webkit-transition:.2s;
	transition:opacity .2s;
	cursor:pointer;
	box-shadow:0 0 4px #333 inset;
	&:hover {
		opacity:1;
	}
}
.slider::-webkit-slider-thumb {
	-webkit-appearance:none;
	appearance:none;
	width:25px;
	height:25px;
	background:#271d15;
}
.slider::-moz-range-thumb {
	width:25px;
	height:25px;
	background:#271d15;
}

.painting {
	cursor:url(/img/cursor/brush.png), auto;
}

@keyframes scale {
  0% {transform:scale(1);}
  100% {transform:scale(1.5);}
 }
.critical {
	animation-name:scale;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-direction:alternate;
	text-shadow:0 0 3px #fff;
}

.scroll_back {
	max-height:300px;
	overflow-y:auto;
	position:relative;
	background:rgba(255,255,255,0.2);
	margin-bottom:10px;
	padding:3px;
	width:100%;
	border:1px solid #600;
	scrollbar-width: thin;
	scrollbar-color: #633 #976;
}

/* ----- MAP ------ */
.map_wrapper {
	display:inline-block;
	position:relative;
	overflow:auto; 
	scrollbar-color: #271d15 #cdac8c;
}
.place {
	position:absolute;
	width:20px; height:20px;
	background:rgba(220,0,0,0.9);
	box-shadow:0 0 3px #333;
}
.map_wrapper::-webkit-scrollbar {
	background:#cdac8c!important;
}
.map_wrapper::-webkit-scrollbar-thumb {
	background:#271d15!important;
}

#creature_place {
	position:relative;
	max-width:750px; height:calc(100% - 4px); 
	overflow:auto;
	padding:2px 7px;
	background:#cdac8c;
	border-image-repeat:stretch;
	& h4 {
		color:#600;
		padding:3px;
		margin:0;
		font-size:16pt;
		background:rgba(200,150,100,0.4);
	}
	& a:not(.green_button):not(.red_button):not(.blue_button) {
		color:#833;
		text-decoration: none;
	}
}

.loc_round {
	border-radius:50%;
}
.loc_triangle {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.loc_triangle:hover {
	clip-path:none;
}
.map_click, .circle_edit, .freeform_edit, #distance {
	position:absolute;
	max-height:400px;
	top:0;
	left:0;
	text-align:center;
	z-index:20;
	background:#cdac8c;
	background-size:100% auto;
	background-clip:content-box;
	color:#111;
	border-image-slice:120 62 75 112;
	border-image-width: 20px;
	border-width:20px;
	border-image-outset:0;
	border-image-repeat:stretch;
	border-style:solid;
	border-image-source:url(/img/map_pergament.webp);
}

.map_wrapper:fullscreen, .map_wrapper:fullscreen select option {
	cursor:url(/img/cursor/arrow.cur), auto;
}
.map_wrapper:fullscreen a, .map_wrapper:fullscreen circle, .map_wrapper:fullscreen .no, .map_wrapper:fullscreen .hide_black_back,
.map_wrapper:fullscreen button, .map_wrapper:fullscreen input, .map_wrapper:fullscreen select, .map_wrapper:fullscreen label,
.map_wrapper:fullscreen .portrait_border, .map_wrapper:fullscreen path, .map_wrapper:fullscreen .show_next_div {
	cursor:url(/img/cursor/Link.cur), auto;
}

.backy {
	display:inline-block;
	background:url(/img/small_back_center.webp) repeat-x;
	margin:0 20px;
	padding:8px;
	height:24px;
	position:relative;

	&::before {
		position:absolute;
		background:url(/img/small_back_left.webp) no-repeat;
		display:inline-block;
		width:20px;
		height:40px;
		content:''; 
		left:-20px;
		top:0;
	}
	&::after {
		position:absolute;
		background:url(/img/small_back_right.webp) no-repeat;
		display:inline-block;
		width:20px;
		height:40px;
		content:''; 
		right:-20px;
		top:0;
	}
	&:hover {
		filter:drop-shadow(0 0 3px red);
	}
}

.white_back {
	background:rgba(225,225,225,0.3);
}

@-moz-document url-prefix() {
	.map_wrapper { max-width:100%;}
}

/*.map_click h3 {  }*/
.change_content {
	width:32px;
	height:32px;
	filter:drop-shadow(0 0 3px #000);
	background:url(/img/gear.png) no-repeat;
	float:right;
	background-size:32px;
	&:hover {
		-webkit-animation-name:roll_die;
		animation-name:roll_die;
		animation-duration:6s;
		animation-iteration-count:infinite;
		animation-timing-function:linear;
	}
}

.border_starter {
	width:15px;
	height:15px;
	border-radius:50%;
	background:#f00;
	position:absolute;
}

svg path {
	stroke-width:1;
	stroke-opacity:0.5;
}

@keyframes roll {
  0% {transform:translateX(-150px) scale(0.7); filter:hue-rotate(0deg);}
  50% {transform:translateX(0) scale(1.5); filter:hue-rotate(180deg);}
  100% {transform:translateX(150px) scale(0.7); filter:hue-rotate(360deg);}
}

/*.loading_parent::before {content:"\1F984"; width:460px; margin-left:calc(50% - 230px); }*/
.loading {
	animation-name:roll;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-direction:alternate;
	display:block;
	width:50px;
	height:50px;
	background:url(/img/loading.webp) no-repeat;
	background-size:50px;
	margin-left:calc(50% - 25px);
}
@keyframes roll_die {
  0% {transform:rotate(-900deg);}
  100% {transform:rotate(0deg);}
}

/* DICE ROLLING ANIMATION */
@keyframes roll_die {
  0% {transform:rotate(-900deg);}
  100% {transform:rotate(0deg);}
}
@keyframes move_die {
  0% {transform:translateY(-250px) translateX(-50px);}
  80% {transform:translateY(0) translateX(-50px);}
  100% {transform:translateY(0) translateX(0);}
}

.dice_wrapper {
	display:inline-block;
	-webkit-animation-name:move_die;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease-out;
	animation-name:move_die;
	animation-duration:1s;
	animation-iteration-count:1;
	position:relative;
	animation-timing-function:ease-out;
}
.dice_rolled {
	-webkit-animation-name:roll_die;
	animation-name:roll_die;
	animation-duration:1.2s;
	animation-iteration-count:1;
	position:relative;
	animation-timing-function:ease-out;
}

ul {
	text-align: left;
}
#news ul {
	list-style:none;
}
#news li:before {
	content:"\1F984";
	opacity:0.5;
	filter:saturate(0.5);
}

/* JUST A TEST */
@keyframes particles {
  0% {bottom:0}
  100% {bottom:calc(100% + 80px);}
}

.particle {
	border-radius:50%;
	width:10px;
	height:10px;
	position:absolute;
	bottom:0;
	display:inline-block;
	filter:blur(5px);
	background:rgba(250,250,50,0.8);
	animation-name:particles;
	animation-duration:4s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in;
}

/* ---------------------- PHONES; TABLETS; OLD PCs ----------------------------------- */
@media screen and (max-width: 650px) {
  .character {
    min-width:300px; font-size:16pt; max-width:100%; background:none; 
  }
  .character span { margin:0; }
  
  #page_changer { position: relative; top:0; left:0; }
  #page_changer::before { content:none; }
  #page_changer::after { content:none; }
  #page_changer a { min-width:70px; max-width:160px; font-size:13pt; margin:0; }
  
  input { max-width:250px; }
  
  .medium_box_back { max-width:400px; }
  
  .race_back { display:none; }
    
  input.name_input { max-width:250px; }
  .red_ribbon { min-width:200px; max-width:300px; margin-left:10px; }
  
  .hover_wrapper { display:none; visibility:hidden; }
  
  .grey_scroll { max-width:300px; }

  .npc_back { display:none; }
}

#search_all_result {
	background:#cdac8c;
	max-height:200px;
	min-width:180px;
	overflow-y:auto;
	position:absolute;
	z-index:20;
	top:60px;
	right:0;
	padding:5px;
	box-shadow:inset 0 7px 5px -5px #000;

	& hr {
		color:#500;
		border-color:#500;
	}
	& a {
		text-decoration:none;
	}
}

#top_bar {
	position:fixed;
	top:0;
	right:0;
	z-index:30;
	padding:5px;
	background:url(/img/RibbonCentreGrey.png) repeat-x;
	background-size:80px;
	filter:drop-shadow(2px 2px 4px #000);
	&::before {
		width:80px;
		height:60px;
		background:url(/img/RibbonSideGreyL.png) no-repeat;
		background-size:66px;
		position:absolute;
		left:-66px;
		top:0;
		content:" ";
	}
}

@keyframes show_opacity {
	0% {opacity:0;}
	100% {opacity:1;}
  }

.delete {
	background:url(/img/button_back.png) no-repeat;
	background-size:40px 40px;
	font-size:30px;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	font-family:var(--big-font);
	display: inline-block; 
	min-width:31px;
	height:40px;
	border-radius:3px;
	padding-left:9px;
	vertical-align:middle;
}
.delete:hover::after {
	content:" Delete";
	margin-left:10px;
	font-size:20px;
	animation-name:show_opacity;
	animation-duration:1s;
	animation-iteration-count:1;
	width:100px;
	background:url(/img/RibbonCentre.png) no-repeat,url(/img/RibbonSide.png) no-repeat right;
	background-size:55px 30px;
	display:inline-block;
	filter:drop-shadow(1px 1px 2px #333);
	padding-left:5px;
}

#targetIMG { max-height:340px; overflow: auto; padding: 5px; text-align:left; }
.imageGallery { 
	background:rgba(255,255,255,0.6);
	border:2px solid #666; 
	& div { text-align:left; }
	& label { margin:0 3px !important; line-height: normal !important; }
	& input[type='radio'] { display: none; }
	& input[type='radio']:checked + label { filter:drop-shadow(0 0 5px #000); opacity:1; z-index:99; }
	& input[type='radio']:checked + label::after { content:"\2705"; position: absolute; right:0; bottom:5px; }
	& input[type='radio'] + label:hover { filter:drop-shadow(0 0 5px #000); opacity:1; z-index:99; }
	& input[type='radio'] + label img { border:2px solid transparent; }
	& input[type='radio'] + label img:hover { border:2px solid #fff; }
	& h3 { 
		background:#999; border:1px solid #222;
		&::after { content:"\2B9B"; }
		& .active::after { content:"\2B99"; }
	}
}

.entry_card { position:relative; display:inline-block; width:150px; min-height:150px; background:#fff; text-align:center; vertical-align:top; margin:3px; }
.entry_card:hover { box-shadow:0 2px 4px #333; }
.entry_card img { max-width:120px; max-height:100px; padding:3px; }
.entry_card.public { box-shadow:0 0 5px green inset; }
.entry_card_bottom { width:100%; background:#aaa; position:absolute; bottom:0; left:0; }
.entry_card .popup { background:#996 url(/img/icons/popup.webp); box-shadow:-1px -1px 2px #333; width:20px; height:20px; background-size:20px; }
.entry_card .popup:hover { background-color:#cc7; box-shadow:-1px -1px 3px #000; }
.entry_card > a:first-of-type { display:inline-block; width:100%; height:100%; }
.img_popper { cursor: pointer; }

.delete_button { width:180px; height:20px; font-family:var(--big-font); background:#aaa; border:2px solid #444; overflow:clip; margin:5px 0; position:relative; text-align:right; padding:5px 0; }
.delete_handle { cursor:col-resize; display:inline-block; width:30px; height:30px; background:#800; box-shadow:rgb(170, 0, 0) -115px 0px 30px 100px,inset 0 0 1px 3px #400; 
			position:absolute; left:0; top:0; }
.mini_delete_button { width:50px; height:14px; padding:0; margin:0; font-size: 10px; }
	.mini_delete_button .delete_handle { width:14px; height:14px; }

.mini_button { width:100px !important; height:22px !important; font-size:12px !important; padding:8px 4px !important; background-size:107px 150px !important; border-radius:6px;}
.mini_button:hover { background-position-y:-37px !important; }
.mini_button.active_blue { background-position-y:-37px !important; }

.list_view, .card_view { background-color:#fff; width:32px; height:32px; background-size:32px; display:inline-block; }
.list_view.active, .card_view.active { background-color:rgb(255, 179, 179); box-shadow:0 0 3px #333; }
.list_view:hover, .card_view:hover { background-color:rgb(214, 97, 97); box-shadow:0 0 3px #000; }
.list_view { background-image:url(/img/icons/view-list.webp); }
.card_view { background-image:url(/img/icons/view-cards.webp); }
.list_entry { background:#ccc; padding:3px; border-radius:3px; margin:3px; }
.list_entry .popup { background:#996 url(/img/icons/popup.webp); box-shadow:-1px -1px 2px #333; width:22px; height:22px; background-size:22px; 
	display:inline-block; margin-bottom:-3px; margin-right:-5px; vertical-align:bottom; opacity:.5; }
.list_entry .popup:hover { opacity:1; }

.drop_header { background:#ccc; padding:2px; font-family:var(--big-font); display:block; }
	.drop_header img { width:26px; height:26px; vertical-align:middle; }

.timeline_line { position:relative; width:40px; height:1000px; margin:0 200px;
	background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgb(0, 0, 0) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%); }
.timeline_entry { position:absolute; width:40px; height:40px; color:#000; left:0; }
	.timeline_entry img { width:40px; height:40px; overflow: hidden; border-radius:40px; box-shadow:0 0 2px #000; background:#fff; }
.timeline_entry.small { width:20px; height:20px; }

.page_tab_changer,.small_page_tab_changer { margin-bottom:10px; min-width:400px; }
	.page_tab_changer a,.small_page_tab_changer a { background:none; padding:8px; text-decoration:none; color:#333; font-weight: bold; font-size:20px; display:inline-block;
		box-shadow:0 -6px 8px #333 inset; opacity:.6; font-family:var(--big-font); }
	.page_tab_changer a:hover, .page_tab_changer a.active, .small_page_tab_changer a:hover, .small_page_tab_changer a.active{ 
		text-shadow:0 0 3px #fff; background:none; box-shadow:0 -5px 8px #666; opacity:1; }
.small_page_tab_changer a { font-family:inherit; font-size:18px; }

/* FAMILY TREE */
.tree ul {
	padding-top: 20px; position: relative;	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	&::before, &::after{
		content: '';
		position: absolute; top: 0; right: 50%;
		border-top: 1px solid #ccc;
		width: 50%; height: 20px;
	}
	&::after{
		right: auto; left: 50%;
		border-left: 1px solid #ccc;
	}
	/*We need to remove left-right connectors from elements without 
	any siblings*/
	&:only-child::after, &:only-child::before {
		display: none;
	}

	& a{
		border: 1px solid #ccc;
		padding: 5px 10px;
		text-decoration: none;
		color: #666;
		font-family:var(--standard-font);
		font-size: 11px;
		display: inline-block;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
	}
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

/*Hover effects*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}

@keyframes TransitioningBackground {
	0% {	background-position: 99% 100%; }
	100% {	background-position: 30% 30%;	}
}

.newer_button {
	display: inline-block;
	border-image-slice: 20;
	border-image-width: 20px;
	border-width: 20px;
	border-image-outset: 0;
	border-image-repeat: stretch;
	border-style: solid;
	border-image-source: url(/img/corner_new_1.webp);
	background: rgba(0,0,0,0.8);
	font-family: var(--big-font);
	text-decoration: none;
	color: #a8998f;
	text-align: center;
	min-width: 100px;
	text-shadow: 0 2px 3px #111;
	vertical-align: top;
	&:not(.disabled):hover { color:#dfd1c8; background:linear-gradient(100deg,rgba(0,0,0,0.8),rgba(80,0,0,0.8),rgba(0,0,0,0.8)); animation:TransitioningBackground 1.5s; animation-iteration-count:1;
		background-size:2400% 2400%; background-position:30% 30%; }
	&.active { background:linear-gradient(100deg,rgba(0,0,0,0.8),rgba(0,0,70,0.8),rgba(0,0,0,0.8)); background-size:400% 400%; background-position:30% 30%; color:#efe5de; }
}
.checked { background: linear-gradient(100deg,rgba(0,0,0,0.8),rgba(0,20,0,0.8),rgba(0,0,0,0.8));
	background-size: 400% 400%;
	background-position: 30% 30%;
	&::after { content:" \2714"; }
}

.hide {
	display:none;
}

.disabled+label { cursor:unset; opacity:.5; }

.third_block { width:calc(33% - 6px); display:inline-block; vertical-align:top; padding:0 3px; }

.clicked { background:#fff; font-size:13pt; opacity:1; }

button.no_button { background:none; padding:0; width:auto; height:auto; font-family:var(--standard-font); color:#833; font-size:unset; }
form.no_form { display:inline; }

.entry_quote { font-family: 'Charm'; background:rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.5); padding:2px; margin:8px; display:inline-block; }