@charset "utf-8";

/* Load proflat's full phpBB 3.3.19 colour rules, then change its variables. */
@import url("../../proflat/theme/color_proflat.css?v=1.3.19");

html {
	--color01: var(--mushmoot-highlight);
	--color02: var(--mushmoot-highlight-hover);
	--color03: var(--mushmoot-highlight-hover);
	--color06: var(--mushmoot-section-background);
	--color07: var(--mushmoot-section-background);
	--color08: var(--mushmoot-section-hover);
}

html,
body {
	background-color: var(--mushmoot-page-background);
}

.headerbar,
.footerbar {
	background-color: transparent;
}

.wrap {
	background-color: var(--mushmoot-wrap-background);
	padding: 5px;
}

/* The three proflat navbars have stable structural locations, so no copied
   navbar templates or custom classes are needed. */
#page-header > .navbar {
	background-color: var(--mushmoot-wrap-background);
	opacity: 0.95;
}

#wrap > .navbar {
	background-color: var(--mushmoot-navbar-background);
}

#page-footer > .navbar {
	background-color: transparent;
}

#page-footer > .navbar,
#page-footer > .navbar a,
.footerbar,
.footerbar a {
	color: #fff;
}

#page-footer > .navbar a:hover,
#page-footer > .navbar a:focus,
#page-footer > .navbar a:active,
.footerbar a:hover,
.footerbar a:focus,
.footerbar a:active {
	color: #fff;
	text-decoration: underline;
}

h2,
a {
	color: var(--mushmoot-link);
}

h3 {
	color: var(--mushmoot-heading);
}

div.rules {
	background-color: var(--mushmoot-rules-background);
}

.site_logo {
	background-image: url("./images/logo.png");
}

.stat-block p,
fieldset.quick-login {
	background-color: var(--mushmoot-section-background);
	border-bottom-color: var(--mushmoot-section-hover);
}

.stat-block p:hover,
fieldset.quick-login:hover,
.bg1:hover,
.bg2:hover,
.bg3:hover,
.panel:hover {
	background-color: var(--mushmoot-section-hover);
}

/* Keep form controls distinct from the pale panels, including quick-login
   and search rules whose selectors are more specific in the parent. */
.inputbox,
fieldset.quick-login input.inputbox,
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
	background-color: #fff;
	border-style: solid;
	border-width: 1px;
	border-color: #8ba8bb;
	color: #223b4b;
}

.inputbox::placeholder {
	color: #657b89;
	opacity: 1;
}

.inputbox:hover,
fieldset.quick-login input.inputbox:hover {
	border-color: var(--mushmoot-highlight);
}

.inputbox:focus,
fieldset.quick-login input.inputbox:focus,
.search-box .inputbox:focus {
	border-color: var(--mushmoot-highlight);
	outline: 2px solid var(--mushmoot-highlight);
	outline-offset: 1px;
}

.inputbox:disabled {
	background-color: var(--mushmoot-section-background);
	color: #657b89;
}

.socialinks ul li:hover {
	background-color: transparent;
	border-color: transparent;
}

.socialinks ul li a {
	background-color: var(--mushmoot-highlight);
	border-color: var(--mushmoot-highlight);
	color: #fff;
}

.socialinks ul li a:hover,
.socialinks ul li a:focus {
	background-color: var(--mushmoot-highlight-hover);
	border-color: var(--mushmoot-highlight-hover);
	color: #fff;
}

.socialinks ul li a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.socialinks ul li a i:before {
	color: inherit;
}