/** MAIN COLORS **/
#logo {
	background: var(--banner);
}

body {
	background-image: var(--banner);
}

a:link, a:visited {
	color: var(--accent);
	transition: 0.2s ease all;
}

a:hover, a:active {
	filter:brightness(120%);
	transition: 0.2s ease all;
}

#container {
	background-color: var(--bodybgfaded);
	padding: 20px 0;
}

.header_table, #content {
	background-color: var(--ddd);
}

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

.tcat a, .tcat a:visited {
  color: var(--ffftext ) !important;
}

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

.thead a:link, .thead a:visited {
	color: var(--ffftext);
}

.tfoot, .tfoot a:link, .tfoot a:visited {
	background-color: var(--meddark);
	color: var(--ffftext);
}

.ugspan { text-shadow: 0 0 1px var(--ugshade); }

/** Darken images on dark theme: **/
.has-background-image, img {
  filter: var(--darkenimg);
}

/** WRAPPERS **/
* {
	box-sizing: border-box;
}

body {
	background-color: var(--bodybg);
	background-attachment: fixed;
	background-size: cover;
}

.wrapper {
	box-shadow: 0 0 10px #0005;
}

#content {
	padding: 0 20px 20px 20px;
}

#container {
  backdrop-filter: blur(1em);
}

.navigation {
	color: var(--ffftext);
	padding: 10px 40px;
	background-color: var(--meddark);
	display:flex;
	flex-wrap:wrap;
	gap: 5px;
	justify-content: center;
	position: sticky;
	top: 53px;
	z-index:98;
	box-shadow: 0 2px 3px var(--bodybgfaded);
}

#navsep {
	position:relative;
	bottom:1.5px;
}


/** HEADER **/

#logo {
	height: 650px;
}

.header_sitename a {
	color: var(--ffftext) !important;
  	text-transform: uppercase;
  	letter-spacing: 3px;
	font-size:1.2em;
	letter-spacing:3px;
	transition: 0.2s ease all;
}

.header_sitename a:hover {
	transition: 0.2s ease all;
	text-shadow: 0 0 8px var(--light);
}

.header_nav {
	background-color: var(--dark);
	color: var(--ffftext);
	padding:15px 40px;
	justify-content:space-between;
	margin-top: 40px;
  	position: sticky;
  	top: -1px;
	z-index:99;
}

.mobilebutton {
	display: none;
}

ul.header_links {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.header_links li {
	margin: 0 7px;
	display: inline;
}

ul.header_links li a {
	color: var(--accent);
	text-transform:uppercase;
	transition: 0.2s ease all;
}

ul.header_links li a:hover {
	filter: brightness(130%);
  	text-shadow: 0 0 5px var(--meddark);
}

.mobilememblock, .mobilememblock_member, .mobilememblock_guest, .mobilememblock_av {
	display: none;
}

.membar, .guestbar {
  	display: flex;
  	gap: 20px;
  	justify-content: space-between;
  	width: 100%;
}

/** HEADER TABLE **/

#headertoggle {
  	position: absolute;
  	top: -40px;
  	background-color: var(--dark);
  	color: var(--ffftext);
  	padding: 10px;
  	border-radius: 100%;
  	right: -20px;
  	z-index: 99;
	cursor: pointer;
}

.header_table {
	padding:20px;
}

.userav {
	min-width: 200px;
	max-width: 200px;
	min-height: 300px;
	max-height: 300px;
	background-color: var(--eee);
	background-repeat: no-repeat;
  	background-position: center center;
}

.header_row.flex, .newsboxes {
	gap: 20px;
}

.oocnews, .icnews {
	flex-basis: 50%;
	background-color: var(--eee);
	position: relative;
}

.newspost {
	margin-bottom:10px;
	font-size: .8em
}

.newspost:first-child, .onewspost:first-child {
  font-size: .9em;
  opacity: 1;
}

.newsdate span {
  	text-transform: uppercase;
  	font-family: var(--sansfont);
  	letter-spacing: .5px;
  	border-bottom: 1px solid var(--accentfaded);
}

.addnewsbtn {
  	position: absolute;
  	top: -12px;
 	left: 20px;
	background: var(--eee);
  	color: var(--333);
  	padding: 4px 8px;
  	margin: 0;
  	font-size: .9em;
  	font-weight: 400;
  	text-transform: uppercase;
  	letter-spacing: 1px;
	font-family: var(--titlefont);
	border-top-left-radius: 6px;
  	border-top-right-radius: 6px;
	display:flex;
	gap: 5px;
}

.addnewsbtn a {
	color: var(--333);
}

.addnewsbtn a .material-symbols-outlined {
  	font-size: 1.2em;
}

.newsdate {
	font-family: var(--titlefont);
  	font-size: 1.3em;
	letter-spacing: .2px;
}

.newsmsg, .onewsmsg {
	padding: 5px;
}

.oocbox, .icbox {
	display: flex;
	flex-direction: column;
	padding:20px;
	text-align:justify;
	letter-spacing: var(--darkspacing);
}

.oocquicklinks, .icseason {
	flex-direction: row;
  	display: flex;
	flex-wrap:wrap;
  	gap: 20px;
  	justify-content: center;
  	align-items: center;
  	text-transform: uppercase;
  	letter-spacing: 1px;
  	background-color: var(--e3);
  	padding: 10px 0;
}

.ooctext, .ictext {
	margin-top:20px;
	font-family: var(--seriffont);
	max-height: 200px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.icseason .material-symbols-outlined {
  	font-size: 1.3em;
}

.icseason .weather {
	display:flex;
	gap:5px;
}

.weatherevent {
  	background-color: var(--e9);
  	border-bottom: 1px solid var(--medfaded);
  	padding: 5px 10px;
  	font-size: 12px;
	text-align:center;
}

.weatherevent wev {
	text-transform: uppercase;
	font-weight:500;
}

.weatherevent a {
	display: inline-flex;
  	align-items: center;
  	text-transform: uppercase;
  	font-weight: 500;
  	letter-spacing: .5px;
  	padding: 0px 3px;
}

.weatherevent .material-symbols-outlined {
  font-size: 18px;
}

.recentposts, .factions, .otms {
  	min-height: 150px;
  	background-color: var(--eee);
  	margin-top: 20px;
}

.recentposts {
	flex-basis: 35%;
	padding: 10px;
	max-height: 187px;
  	overflow-y: auto;
  	scrollbar-width: thin;
	gap: 5px;
  	display: flex;
  	flex-direction: column;
}

#recentthreads {
  	display: flex;
  	flex-direction: column;
  	gap: 5px;
}

.rthreadbox {
  	padding: 5px;
  	background-color: var(--e3);
  	display: flex;
  	justify-content: space-between;
	align-items:center;
}

.threadbar b {
	font-weight: 500;
}

#rploc {
  	font-size: 0.9em;
  	font-style: italic;
}

.threadlp {
	font-size:0.9em;
	flex-basis: 35%;
  	text-align: right;
}

.threadlp strong {
	font-weight: 400;
}

.factions {
	flex-basis: 45%;
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	gap: 10px;
	padding: 10px 0;
}

.factions > .factionbar {
	flex-basis: 47.5%;
  	text-align: center;
  	background-color: var(--e3);
	padding: 10px;
	align-content: center;
}

.factionname {
  	text-transform: uppercase;
  	font-size: 18px;
  	letter-spacing: .5px;
  	border-bottom: 1px solid var(--b6);
  	margin-bottom: 5px;
	padding-bottom: 5px;
	text-shadow: 0 0 1px var(--ugshade);
}

.factionstats {
  	display: flex;
  	justify-content: space-around;
  	padding: 0 5px;
	gap:10px;
	font-size:13px;
}

.factionstats .material-symbols-outlined {
	font-size: 13px;
  	position: relative;
  	top: 2px;
}

.otms {
	flex-basis: 20%;
	display: flex;
  	flex-direction: column;
  	justify-content: space-evenly;
  	align-items: stretch;
	padding: 10px;
	gap:10px;
}

.otms .otmbar {
	background-color: var(--e3);
	padding:10px;
	text-transform: uppercase;
	text-align: center;
	display: flex;
  	flex-direction: column;
  	align-items: center;
}

#otmtitle {
  	font-size: 0.7em;
  	font-style: italic;
  	letter-spacing: 1px;
}

/** WELCOME BAR **/
#welcomebar {
	color: var(--ffftext);
	background-color: var(--dark);
	padding: 10px 40px;
	text-transform:uppercase;
	justify-content: space-between;
}

.userlinks {
	display:flex;
	gap: 15px;
}

#as_header_userbit {
	width: 640px;
	border-radius: 0;
	background-color: var(--e3);
}

#userbitname .ugspan {
  	text-shadow: 0 0 1px #fff2;
}

.as_header_userbit {
	cursor: pointer;
}

.as_modal_header {
 	padding: 10px;
  	background-color: var(--dark);
  	margin: 0;
  	color: var(--ffftext);
  	text-align: center;
	text-transform: uppercase;
  	font-family: var(--sansfont);
  	font-weight: 400;
  	letter-spacing: 1px;
  	border-bottom: 2px solid var(--accent);
}

.as_modal_userbits {
	justify-content: center;
  	align-items: center;
	gap:5px;
  	flex-wrap: wrap;
  	margin: 10px;
	position: relative;
}

.as_modal_userbits .userbitdiv {
  	position: relative;
  	width: 150px;
	height: 50px;
	overflow: hidden;
}

.as_modal_userbits img {
  	width: 100%;
  	position: relative;
  	z-index: 1;
    top: -80px;
}

#userbitname {
  	background-color: var(--darkfaded);
  	display: flex;
  	justify-content: center;
  	padding: 5px;
  	text-shadow: 0 0 5px #000;
}

.userbitdiv .switchlink {
  	background-color: var(--darkfaded);
  	text-align: center;
  	position: absolute;
	z-index: 2;
  	left: 0;
	right:0;
	top: 0;
	bottom: 0;
	align-content: center;
}

.jquery-modal.blocker.current {
  	backdrop-filter: blur(3px);
}

#logout, #wbusername {
	color: var(--accent) !important;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: var(--ffftext);
}

/** --- FORUM STYLES --- **/

/** OOC **/
#cat_3_e, #oocsubf {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 10px;
  	padding: 20px;
}

.oocforum {
  	background-color: var(--meddark);
  	color: var(--ffftext);
  	padding: 10px;
	flex: 1 1 30%;
	min-height:100px;
}

.oocfname {
  	font-size: 2em;
  	border-bottom: 1px solid var(--accentfaded);
  	display: flex;
  	justify-content: center;
  	margin-bottom: 5px;
	text-transform: uppercase;
	font-family: var(--titlefont);
	letter-spacing: 2px;
}

a.oocfname {
  	color: var(--ffftext);
}

.ooclpbar {
  	display: flex;
  	justify-content: space-between;
	align-items:center;
}

.oocsub {
  	display: flex;
  	gap: 10px;
  	justify-content: center;
  	margin-top: 10px;
  	text-transform: uppercase;
}

.oocsub a {
  	background-color: var(--darkfaded);
  	padding: 3px 5px;
  	font-size: small;
}

/** IC **/

.icforum_icbar, .oocbar {
	padding: 10px 20px;
  	font-size: 1.3em;
  	font-weight: 100;
	letter-spacing: 2px;
}

.icforum_areas {
  	padding: 20px 0;
  	display: flex;
  	flex-direction: column;
  	gap: 20px;
}

.icforum_block {
  	display: flex;
  	gap: 10px;
	justify-content:center;
	flex-basis:100%;
}

.icforum_land {
  	flex-basis: 30%;
  	text-align: center;
}

.icforum_name {
  	background-color: var(--meddark);
	padding:10px;
}

.icforum_name a {
	color: var(--ffftext);
	font-size: 18px;
	display:flex;
	justify-content:center;
}

.icforum_img {
  	min-height: 285px;
	max-height: 285px;
  	background-color: var(--eee);
	background-size: cover;
}

.icforum_subs {
  	flex-basis: 70%;
	display: flex;
  	gap: 10px;
  	align-items: flex-start;
	justify-content:center;
  	flex-wrap: wrap;
}

.icforum_subarea {
  	flex-basis: 45%;
  	background-color: var(--eee);
	flex-grow:1;
	background-size: cover;
  	background-position: center center;
	position: relative;
}

.icforum_subarea_name {
	background-color: var(--darkfaded);
}

.icforum_subarea_name a {
	color: var(--ffftext);
	font-size: 18px;
	font-weight: 300;
  	text-shadow: 0 0 3px var(--dark);
  	background: linear-gradient(to right, #0000, var(--darkfaded), var(--darkfaded), #0000);
  	padding: 10px;
  	display: flex;
  	justify-content: center;
}

.icforum_subarea_desc {
	text-align:justify;
	padding:10px;
  	min-height: 90px;
  	max-height: 90px;
  	overflow-y: auto;
  	scrollbar-width: thin;
  	background-color: var(--darkfaded);
  	color: var(--ffftext);
  	font-family: var(--seriffont);
	text-shadow: 0 0 3px #000;
}

.icforum_subarea_desc .rlvl-bg {
  	position: absolute;
  	top: 7px;
}

.icforum_subarea_desc .fdesc_crown {
  	text-shadow: 0 0 #fff2;
  	position: absolute;
  	right: 10px;
  	top: 6px;
  	font-size: 2.3em;
  	cursor: pointer;
}

.icforum_subarea_lastpost {
  	background-color: var(--dark);
  	padding: 5px 10px;
	display: flex;
  	justify-content: space-between;
	color: var(--ffftext);
}

.icforums_fdsub {
	display: flex;
  	flex-wrap: wrap;
  	gap: 20px;
  	flex-direction: column;
}

.icforums_fdsub_img {
  	height: 300px;
  	background-size: cover;
  	background-position: center center;
	display: flex;
  	align-items: flex-end;
  	justify-content: center;
	position:relative;
}

.viewimg {
  	position: absolute;
  	top: 20px;
  	right: 20px;
	display:flex;
}

.viewimg a {
  	padding: 10px;
  	background-color: var(--darkfaded);
  	border-radius: 100%;
  	color: var(--ffftext);
  	text-shadow: var(--dark);
}

.icforums_fdsub_img > .fname {
  	color: var(--ffftext);
  	flex-grow: 1;
  	text-align: center;
  	padding: 20px 0;
  	background-color: var(--darkfaded);
  	font-size: 20px;
  	letter-spacing: 2px;
  	backdrop-filter: blur(.1em);
  	text-shadow: 0 0 5px #000;
}

a.fcrown {
  	text-shadow: none !important;
  	position: relative;
  	top: 3.5px;
}

.icforums_fdsub_desc {
  	margin-bottom:20px;
  	background-color: var(--eee);
  	padding: 20px;
  	text-align: justify;
  	font-family: var(--seriffont);
}
	
.icforums_fdsub_desc .descdetails {
	display: flex;
	align-items: center;
	justify-content:space-between;
  	gap: 20px;
}

.icforums_fdsub_desc .archivenote {
	text-align: center;
  	background-color: var(--e3);
  	padding: 5px;
  	border: 1px solid var(--ddd);
	margin-bottom: 10px;
  	margin-top: -10px;
}

.icforums_fdsub_desc .forumrules {
	min-width: 300px;
  	max-width: 300px;
}

.icforums_fdsub_desc  .forumrules .thead {
  	background-color: var(--meddark);
  	font-family: var(--sansfont);
  	text-transform: uppercase;
  	letter-spacing: .5px;
	text-align: center;
}


.icforums_fdsub_desc  .forumrules .rulesinfo {
  	background-color: var(--e3);
  	padding: 10px;
	min-height:50px;
	max-height: 100px;
  	overflow-y: auto;
  	scrollbar-width: thin;
  	font-size: .9em;
}

.icforums_fdsub_inarea {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	gap: 20px;
}

#threadfields {
  	background-color: var(--eee);
  	padding: 10px;
  	display: flex;
	flex-wrap: wrap;
  	gap: 10px;
	border-left: 1px solid var(--dark);
 	border-right: 1px solid var(--dark);
}

#threadfields div {
	background-color: var(--fff);
	border: 1px solid var(--db);
	padding: 5px;
	display: flex;
	gap: 3px;
  	align-items: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	flex-grow: 1;
	justify-content: center;
}

#threadfields .material-symbols-outlined {
  	font-size: 1.5em;
	margin-right: 3px;
}

#threadfields div i {
  	margin-right: 5px;
}

#threadfields #tdesc {
	flex-basis: 100%;
	text-transform: unset !important;
	flex-wrap: wrap;
}

.factiontf {
  	background-color: var(--eee);
  	padding: 10px;
  	display: flex;
	flex-wrap: wrap;
  	gap: 10px;
	border-left: 1px solid var(--dark);
 	border-right: 1px solid var(--dark);
	border-top: 20px solid var(--dark);
}

.factiontf #summary, .factiontf #info {
	background-color: var(--fff);
	border: 1px solid var(--db);
	padding:10px;
	display: flex;
  	align-items: center;
	flex-grow: 1;
	justify-content: center;
	flex-wrap: wrap;
	flex-basis: 45%;
}

.factiontf #summary {
  	font-family: lora;
  	text-align: justify;
}

.factiontf #info #fleaders, .factiontf #info #flocation, .factiontf #info #ftotalmem {
	display:flex;
	align-items: center;
	justify-content:center;
	gap:5px;
}

.factiontf #info #fleaders, .factiontf #info #flocation {
	flex-grow: 1;
}

.factiontf #info #ftotalmem {
	flex-basis:30%;
}

.factiontf #info div {
	background-color: var(--eee8);
  	padding: 5px;
  	border: 1px solid var(--db);
}

.factiontf #info {
	gap:10px;
}

.fevent {
  	padding: 0 10px 10px 10px;
}

.fevent .factionevent {
  	background-color: var(--fff);
  	padding: 10px;
  	border: 1px solid var(--db);
}

.fevent #feventtag {
	font-weight: 500;
}

.factiontf #factionname {
  	flex-basis: 100%;
  	border: 0 !important;
  	font-size: 7em;
  	text-shadow: none;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--titlefont);
	letter-spacing: 3px;
	line-height: 0.9em;
	padding: 50px 0;
}

/** FACTION PAGE **/

#factionsthead {
  	text-align: center;
  	text-transform: uppercase;
  	font-size: 3em;
  	font-weight: 100;
  	letter-spacing: 1px;
}

#factionsdesc {
  	text-align: center;
  	padding: 10px;
}

.factionboxes {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 20px;
	padding: 20px 0;
}

.factionbit {
  	flex-basis: 45%;
  	background-color: var(--fff);
  	flex-grow: 1;
	background-size: cover;
	align-content: center;
	padding: 20px;
}

.factionbit .factioninfo {
	padding: 20px;
	backdrop-filter: blur(0.3em);
	background-color: var(--eee8);
}

.factionbit .fname a:hover {
	filter: brightness(110%);
}

.factionbit .fname {
	text-align: center;
	text-transform: uppercase;
  	font-family: var(--titlefont);
  	font-size: 3em;
  	letter-spacing: 1px;
}

.fstats {
  	display: flex;
  	justify-content: center;
  	gap: 10px;
	flex-wrap: wrap;
}

.fstats div {
  	flex-grow: 1;
  	flex-basis: 45%;
  	background-color: var(--eee);
  	border: 1px solid var(--db);
	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 10px;
	padding: 5px 0;
}

.factionbit .fstats .material-symbols-outlined {
  	font-size: 1.5em;
}

.fstats #fsummary {
	flex-basis: 100%;
	padding:10px;
	text-align: justify;
	font-family: var(--seriffont);
	font-size: 0.9em;
}

/** THEME SWITCHER TOGGLE **/
.themebar {
  display: flex;
  justify-content: right;
}

#themeswitcher {
	align-self: center;
	margin-right: 20px;
}

.theme-switch {
  display: inline-block;
  height: 18px;
  position: relative;
  width: 30px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: var(--888);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
	border-radius:100px;
	height: 20px;
  width: 30px;
}

.slider:before {
  background-color: var(--555);
  bottom: 4px;
  content: "";
  height: 12px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 12px;
	border-radius:100px;
}

input:checked + .slider {
  background-color: var(--fff);
}

input:checked + .slider:before {
  transform: translateX(12px);
	background-color: var(--accent);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/** OTHER **/
strong {
	font-weight: 500;
}

/** GUIDEBOOK **/
.gbimg {
  	filter: none !important;
}

.gbtopbar {
  	background-color: var(--dark);
  	padding: 20px;
  	text-align: center;
  	color: var(--ffftext);
  	font-size: x-large;
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	margin-bottom: 5px;
  	border-bottom: 10px solid var(--meddark);
}

.gbwrapper {
	display:flex;
	gap:10px;
}

.gbmain {
	flex-grow: 1;
	flex-basis: 60%;
}

.gbmain .thead {
  	font-size: large;
  	text-transform: uppercase;
	display: flex;
  	justify-content: space-between;
	padding-left:20px;
}

.gblastedited {
  	align-self: center;
  	font-size: small;
  	color: var(--888);
  	opacity: 0.7;
}

.gbmobile-le {
	display: none;
}

.gbtextwrapper {
	background-color: var(--fff);
	padding: 10px;
}

.gbtext {
	background-color:var(--eee);
	padding:10px 20px 20px 20px;
	text-align: justify;
	font-family: var(--seriffont);
	letter-spacing: var(--darkspacing);
}

.gbtext h1, .h1text {
  	margin: -10px 0;
  	text-transform: uppercase;
  	font-family: var(--sansfont);
  	font-weight: 400;
  	letter-spacing: 1px;
	border-bottom: 2px solid var(--accent);
}

.gbtext h2, .h2text {  
	margin: -10px 0;
	font-size: 18px;
  	font-weight: 400;
  	font-family: var(--sansfont);
  	text-transform: uppercase;
  	letter-spacing: .5px;
}

.gbtext h2::before, .gbtext h2::after {
  	content: '';
  	border-top: 1px solid var(--accent);
  	padding: 10px;
  	position: relative;
  	top: 22px;
}

.gbtext h2::before {
	margin-right: 10px;
}

.gbtext h2::after {
  	margin-left: 10px;
}

.gbtext box {
  	display: block;
  	background-color: var(--e3);
  	padding: 10px;
	margin: 0 10px;
  	border-left: 5px solid var(--accent);
}

.ooc-rules, .ic-rules {
	display: flex;
  	flex-direction: column;
  	gap: 5px;
}

ol.ooc-rules, ol.ic-rules {
	list-style: none;
   counter-reset: item;
	margin-left: -40px;
}

ol.ooc-rules li, ol.ic-rules li {
   	counter-increment: item;
   	margin-bottom: 5px;
	background-color: var(--e3);
  	padding: 5px;
}

ol.ooc-rules li:before, ol.ic-rules li:before {
	margin-right: 10px;
  	content: counter(item);
  	background: var(--accentfaded);
  	border-radius: 100%;
  	color: var(--333);
  	width: 1.2em;
  	text-align: center;
  	display: inline-block;
  	padding: 5px;
  	font-family: var(--sansfont);
  	font-weight: 400;
}

.gbtext a.rlvl-bg {
  	float: right;
}

.gbfoot {
  	background-color: var(--meddark);
  	padding: 5px 10px 8px 10px;
  	color: var(--ffftext);
  	height: 30px;
}

.gbmenu {
	flex-basis: 20%;
  	background-color: var(--eee);
  	text-align: center;
	display: flex;
  	flex-direction: column;
}

.gbmenu .category {
  	background-color: var(--meddark);
  	padding: 8px;
  	font-size: large;
  	text-transform: uppercase;
  	color: var(--ffftext);
	border-bottom: 5px solid var(--light);
}

.catlinks {
  	display: flex;
  	justify-content: space-around;
  	gap: 5px;
	flex-wrap:wrap;
	padding: 5px;
}

.catlinks a {
  	background-color: var(--e3);
  	padding: 5px;
  	flex-grow: 1;
	color: var(--333);
	font-size: 15px;
}

.eyechart {
  	display: flex;
  	gap: 10px;
 	text-align: center;
}

/** GUIDEBOOK MOBILE MENU **/
.gbmobilebutton {
	display: none;
}

.gbmobilebutton div {
  	display: flex;
  	padding: 5px;
  	justify-content: center;
  	align-items: center;
  	gap: 10px;
}

.gbmobilebutton #menutitle {
  	text-transform: uppercase;
  	letter-spacing: 1px;
  	font-size: 30px;
}

/** FOOTER **/
.footer_table {
  	display: flex;
  	justify-content: stretch;
	border-top: 20px solid var(--medfaded);
  	padding: 10px;
	background-color: var(--ef);
  	gap: 10px;
}

#footer_table a:link, #footer_table a:visited, #footer_table a:active {
	color: var(--accent);
}

.footer_table .affs, .footer_table .credits {
	display: flex;
	flex-basis: 30%;
	background-color: var(--e3);
	padding: 10px;
}

.footer_table .affs {
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
}

.footer_table .credits {
  	flex-direction: column;
  	justify-content: center;
  	text-align: center;
  	gap: 10px;
}

.creditstext {
  	gap: 10px;
  	display: flex;
  	flex-direction: column;
}

.footer_table .onlinestats {
	flex-basis: 46%;
	background-color: var(--e3);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.onlinestats .onlinetop {
  	padding: 10px;
  	border-bottom: 1px solid var(--accent);
  	background-color: var(--meddark);
	color: var(--ffftext);
}

.whosonline .onlinemembers {
	display: flex; 
	gap: 10px;
	padding: 10px;
}

.whosonline .onlinenote {
  	text-align: center;
  	text-transform: uppercase;
  	font-size: .8em;
  	font-weight: 500;
  	letter-spacing: .5px;
  	color: var(--777);
  	font-style: italic;
}

.onlinestats .boardstats {
  	display: flex;
  	gap: 10px;
  	justify-content: space-around;
	background-color: var(--darkfaded);
  	padding: 5px;
  	color: var(--ffftext);
}

.boardstats div {
  	flex-grow: 1;
  	text-align: center;
}

.themedd {
  	padding: 10px;
  	background-color: var(--dark);
}

/** POSTBITS **/

#threadname {
  	font-size: 1.5em;
  	padding: 10px 15px;
  	border-bottom: 5px solid var(--lightfaded);
}

.post {
	border: 1px solid var(--dark);
	margin-bottom:10px;
}

#posts {
  	display: flex;
  	flex-direction: column;
}

.posttopbar {
  	background-color: var(--dark);
  	padding: 5px 10px;
  	text-align: right;
}

.postbits {
	display: flex;
	background-color: var(--fff);
}

.sidediv {
  	display: flex;
  	flex-direction: column;
	padding: 20px 20px 0 20px;
  	background-color: var(--eee);
}

.avdiv {
  	width: 200px;
	height: 300px;
  	text-align: center;
	align-items: center;
	justify-content:center;
  	display: flex;
}

.profdiv {
	background-color: var(--eee);
	flex-grow:1;
	justify-content: space-between;
  	display: flex;
  	flex-direction: column;
}

.profname {
  	text-align: center;
  	font-size: 1.5em;
  	padding: 5px 0px;
}

.miniprof {
	flex-grow: 1;
}

.factiondiv {
	text-align: center;
	padding:5px;
  	background-color: var(--db);
}

.factiondiv .usergroupname {
  	text-transform: uppercase;
  	font-weight: 500;
  	letter-spacing: 1px;
	font-size: 1.1em;
}

.factiondiv .usertitle {
	font-style: italic;
}

#mpfield {
  display: flex;
  border-bottom: 1px solid var(--db);
  border-right: 1px solid var(--db);
}

#miniproftitle {
  	background-color: var(--db);
  	padding: 5px;
  	text-transform: uppercase;
  	font-size: 0.7em;
  	letter-spacing: .5px;
	flex-basis: 30%;
  	text-align: right;
}

#miniprofinfo {
	padding: 1px 3px;
	flex-grow:1;
}

.playerinfo {
  	display: flex;
  	flex-direction: column;
  	text-align: center;
  	background-color: var(--lightfaded);
  	padding: 5px;
  	border-top: 1px solid var(--darkfaded);
	width: 120%;
	margin-left: -20px;
	margin-top: 20px;
}

.playerinfo span a {
  	color: var(--ffftext);
}

.writerinfo {
  	padding: 5px 0 20px 0;
  	text-align: center;
	line-height:1.2em;
}

#posted {
  	font-size: 0.7em;
  	text-transform: uppercase;
  	letter-spacing: .5px;
  	margin-top: 3px;
}

.writerinfo #posted {
	display: flex;
  	flex-wrap: wrap;
  	gap: 5px;
  	justify-content: center;
	max-width:220px;
}

.writerinfo #posted div {
  	background-color: var(--e3);
  	padding: 3px 0;
  	flex-basis: 45%;
  	flex-grow: 1;
}

.postdiv {
	flex-basis: 100%;
	display:flex;
	flex-direction: column;
	border-left: 1px solid var(--db);
}

.playerdiv {
	padding: 10px;
	background-color: var(--eee);
	border-bottom:1px solid var(--db);
	text-align:right;
}

.flairimg {
	background-color: var(--eee);
}

.chardiv {
  	display: flex;
  	justify-content: space-between;
	padding: 10px;
	border-bottom:1px solid var(--db);
	backdrop-filter: blur(0.2em);
}

.chardiv > .charname {
	text-align: right;
	flex-grow: 1;
  	background-color: var(--eee8);
  	padding: 5px 10px;
}

.chardiv > .charname #charname, .playerdiv > #playername {
	font-size: 2em;
}

.charstats {
  	display: flex;
  	gap: 10px;
	align-items: center;
	background-color: var(--eee8);
  	padding: 5px 10px;
  	flex-grow: 1;
}

.charstats div {
  	background-color: var(--lightfaded);
  	padding: 3px 5px;
  	color: var(--ffftext);
  	text-transform: uppercase;
  	letter-spacing: .5px;
}

.msgdiv {
	padding: 20px;
	flex-grow:1;
	text-align: justify;
	font-family: var(--seriffont);
	font-size: 1em;
	letter-spacing: var(--darkspacing);
}

#userwidth {
	margin: auto auto;
}

.sigdiv {
  	padding: 10px;
  	text-align: center;
}

.postfooter {
  	background-color: var(--medfaded);
  	justify-content: space-between;
  	display: flex;
  	padding: 10px;
	flex-wrap: wrap;
	border-top: 1px solid var(--dark);
}

.postfooter .pbbtns {
	display: flex;
	flex-wrap: wrap;
	gap:5px;
}

.postfooter a span, .postfooter .as_changeauthor {
  	background-color: var(--meddark);
  	padding: 3px 5px;
  	text-transform: uppercase;
  	letter-spacing: .5px;
  	font-weight: 400;
  	color: var(--ffftext);
}

/** POST SCREEN (NEW THREAD/REPLY, EDIT POST) **/

#trchardiv {
	height: 80px;
}

.threadreview #trtitle {
  	background-color: var(--meddark);
  	color: var(--ffftext);
  	padding: 10px;
}

.postinp {
	display: flex;
	flex-wrap: wrap;
}

.postinp .thead, .postinp .tcat {
	flex-basis: 100%;
}

.postinp .trow2 {
	flex-grow: 1;
	flex-basis: 90%;
	padding: 10px;
}

.postinp .trow1 {
  	flex-grow: 1;
  	flex-basis: 10%;
  	padding: 10px;
}

.xthreads_inputrow.inp-weather {
  flex-basis: 20%;
}

.postinp .xthreads_inputrow {
  	flex-grow: 1;
}

.postinp .xthreadsinps {
  	display: flex;
  	gap: 10px;
  	flex-wrap: wrap;
}

.postinp .xthreadsinps .xthreads_title {
  	background-color: var(--lightfaded);
  	padding: 5px;
  	text-align: center;
}

.postinp .xthreads_inp {
  	background-color: var(--e3);
  	padding: 5px;
	min-height: 110px;
}

.xthreads_inp .textbox, .xthreads_inp textarea, .xthreads_inp select {
  	flex-grow: 1;
  	width: 100% !important;
}

.inp-weather .xthreads_inp {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 5px;
}

.inp-weather .xthreads_inp label {
	flex-basis: 30%;
}

.inp-weather .xthreads_inp .material-symbols-outlined {
  	font-size: 1em;
}

.inp-time {
  	max-width: 30%;
}

.inp-time .xthreads_inp {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 8px;
}

.inp-time .xthreads_inp label {
  	flex-grow: 1;
	flex-basis:30%;
}

.trow2.postopts {
  	display: flex;
}

.trow2.postopts .trow2 {
  	display: flex;
	flex-direction:column;
}

.postopts-ds {
	width: 100%;
	cursor: pointer;
}

details.postopts-ds > summary {
  list-style: none;
}

details.postopts-ds > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details.postopts-ds > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

.postoptssep {
  	flex-basis: 100%;
  	background-color: var(--medfaded);
  	color: var(--ffftext);
  	padding: 5px;
  	text-align: center;
  	text-transform: uppercase;
  	letter-spacing: 2px;
}

.submitbtns {
  	background-color: var(--ef);
  	padding: 10px;
}

.submitbtns .button {
  	background-color: var(--lightfaded);
  	text-transform: uppercase;
  	font-family: var(--sansfont);
  	color: var(--ffftext);
  	letter-spacing: 1px;
  	padding: 5px 15px;
  	margin: 0 5px;
}

/** ACCOUNT SWITCHER MISC **/
.as_avdiv {
	width: 200px;
	height: 300px;
}

.as_changeauthor {
	cursor: pointer;
}

/** ACCOUNT SWITCHER -- MEMBER LIST **/
.memberlist {
  	display: flex;
  	flex-wrap: wrap;
	gap: 35px;
  	padding: 20px 0;
	justify-content:center;
}

.memlistav { 
	min-width: 200px;
  	min-height: 300px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.memlistname {
  	text-align: center;
  	background-color: var(--meddark);
  	padding: 5px 2px;
  	font-size: 1.5em;
}

.memlistname span {
  	font-weight: 500;
  	letter-spacing: .5px;
}

.memlistchars {
  	padding: 5px;
	max-width: 200px;
}

/** CHARACTER LIST **/
.thead.charlisttop {
  	display: flex;
  	justify-content: space-between;
}

.charlistcontent {
	display: flex;
  	flex-wrap: wrap;
	gap: 35px;
  	padding: 20px 0;
	justify-content:center;
}

.charcard {
	max-width: 200px;
}

.charlistav { 
	min-width: 200px;
  	min-height: 300px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.charlistlink {
  	text-align: center;
  	background-color: var(--meddark);
  	padding: 5px 2px;
  	font-size: 1.5em;
}

.charlistlink, .charlistinfo {
	text-align: center;
}

.charlistinfo {
	padding: 5px;
	line-height:1.5em;
}


/** OTHER MISC **/
#debug {
	display: none;
}

/** NEWPOINTS **/
.newpoints-mobile-menu {
	display:none;
}

/** MYCODE **/
.mycode_b {
  	font-weight: 600 !important;
}

.ug-bg { 
	color: var(--ffftext);
	padding: 3px 6px;
	border-radius:5px;
	text-shadow: 0 0 3px #000, 0 0 1px #000;
	font-size: 0.8em;
	font-family: var(--sansfont);
	font-weight:500;
	cursor: default;
}

a.rlvl-bg { 
	padding:3px 8px 3px 6px;
	border-radius:5px;
	font-size: 1.2em;
	font-family: var(--sansfont);
	font-weight:500;
	cursor: pointer;
	display: inline-flex;
  	gap: 2px;
  	align-items: center;
	color: var(--333);
}

.rlvl-bg.rlvl-0 {
	background-color: var(--alertgrey);	
}

.rlvl-bg.rlvl-1 {
	background-color: var(--alertblue);	
}

.rlvl-bg.rlvl-2 {
	background-color: var(--alertgreen);	
}

.rlvl-bg.rlvl-3 {
	background-color: var(--alertyellow);	
}

.rlvl-bg.rlvl-4 {
	background-color: var(--alertorange);	
}

.rlvl-bg.rlvl-5 {
	background-color: var(--alertred);	
}