/* Classic SCP Foundation Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Forked From Shiny Theme by Gabrys
**/

/* ======== HEADER AREA ======== */
/* ==== SELECTION ==== */
 ::selection {
	color: var(--key-color);
	background: var(--highlight-color);
}

/* ==== COMMON ==== */
 :root {
	/* == COLOUR SCHEME == */
	--green-light-1:	hsl(127, 50%, 94%);
	--green-light-2:	hsl(120, 100%, 77%);
	--red-light:	hsl(0, 49%, 91%);
	--red-strong:	hsl(355, 100%, 37%);
	--red-dark-1:	hsl(0, 70%, 35%);
	--red-dark-2:	hsl(353, 100%, 30%);

	--off-white:	hsl(0, 0%, 99%);
	--gray-light-1:	hsl(0, 0%, 93%);
	--gray-light-2:	hsl(0, 0%, 87%);
	--gray-light-3:	hsl(0, 0%, 83%);
	--gray-medium:	hsl(0, 0%, 67%);
	--gray-dark-1:	hsl(0, 0%, 40%);
	--gray-dark-2:	hsl(0, 0%, 27%);
	--off-black:	hsla(0, 0%, 0%, .95);
}

 :root {
	/* == COLOUR DEFINITIONS == */
	--accent-color: var(--red-dark-2);
	--fill-bg: var(--off-white);
	--key-color: var(--off-black);

	--area-border: var(--gray-light-2);
	--banner-primary-color: var(--gray-light-1);
	--banner-secondary-color: var(--red-dark-2);
	--highlight-color: var(--gray-light-3);
	--interwiki-bg: var(--green-light-1);
	--nav-bar-border: var(--gray-dark-2);

	--credit-btn-color: var(--gray-light-1);
	--credit-btn-hover-color: var(--green-light-2);
	--info-bar-color: var(--gray-dark-2);
	--link-color: var(--red-strong);
	--rate-bar-bg: var(--gray-dark-1);
	--tab-bg: var(--red-dark-1);
	--tab-hover-bg: var(--red-light);

	--special-border: var(--gray-medium);
	--special-btn-color: var(--gray-light-1);
	--special-text-color: var(--gray-light-1);
}

 :root {
	/* == FONTS == */
	--header-font: "Trebuchet MS", "Trebuchet", var(--body-font);
	--body-font: "Verdana", "Arial", "Helvetica", sans-serif;
}

 body {
	accent-color: var(--accent-color);
	color: var(--key-color);

	font-family: var(--body-font);
	overflow-wrap: break-word;
}

/* ==== SITE BANNER ==== */
 div#container-wrap {
	background-image: url(/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%253Aclassic%2Fclassic_body_bg.png);
	background-repeat: repeat-x;
	background-size: auto;
}

 #header {
	background: 0;
}

 #header h1,
 #header h2 {
	margin: 0 0 0 -4px;
}

 #header h1 {
	max-height: 105px;
}

 #header h1 a,
 #header h2 span {
	color: transparent;
	text-shadow: none;
}

 #header h1 a {
	font-family: var(--header-font);
	letter-spacing: 0;
}

 #header h1 a::before,
 #header h2 span::before {
	text-shadow: none;
}

 #header h1 a::before {
	content: "The SCP Foundation";
	color: var(--banner-primary-color);
}

 #header h2 span::before {
	content: "To Secure, Contain, and Protect";
	color: var(--banner-secondary-color);
}

/* ==== SEARCH ==== */
 #search-top-box-form input[type="submit"] {
	color: var(--key-color);
	background: var(--special-btn-color);
	border: 1px solid var(--special-border);
	border-radius: 0;
	box-shadow: none;
	font-size: 100%;
	font-weight: normal;
}

 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus {
	color: var(--key-color);
	background: var(--highlight-color);
	border: 1px solid var(--special-border);
	box-shadow: none;
}

/* ==== TOP MENU ==== */
 #top-bar ul li,
 #top-bar ul li ul {
	box-shadow: none;
}

 #top-bar ul li ul {
	border-color: var(--nav-bar-border);
	border-style: solid;
	border-width: 0 1px 1px;
}

 #top-bar ul li a {
	border-color: var(--nav-bar-border);
	border-style: solid;
	border-width: 0 0 0 1px;
}

 #top-bar ul li a::before {
	content: "[";
}

 #top-bar ul li a::after {
	content: "]";
	position: relative;

 /* Top Menu has spaces after each bullet, which is why this is done: */
	left: -.3em;
}

 #top-bar ul li ul li a::before {
	content: unset;
}

 #top-bar ul li ul li a::after {
	content: unset;
}

 #top-bar ul li:nth-child(5) a::after {
	left: unset;
}

 #top-bar .top-bar > ul > li > a,
 #top-bar .mobile-top-bar > ul > li > a {
	font-weight: normal;
}

 #top-bar .top-bar > ul > li:hover > ul {
	margin-top: 1px;
}

 .mobile-top-bar {
	bottom: -.5px;
}

/* ==== LOGIN ==== */
 #login-status ul a {
	background: var(--special-text-color);
}

/* ==== SIDE MENU ==== */
 #side-bar {
	clear: both;
	padding: .78em;
	padding-bottom: 0;
	border: 1px solid var(--area-border);
	border-radius: 0;
	box-shadow: none;
}

 #side-bar .side-block {
	margin-bottom: .78em;
	background: var(--fill-bg);
	border: none;
	border-radius: 0;
	box-shadow: none;
}

 #side-bar .heading {
	padding-left: 0;
	color: var(--key-color);
	border-bottom: 1px solid var(--special-border);
}

/* ==== INTERWIKI ==== */
 #interwiki body {
	overflow: hidden;
}

 #interwiki .side-block {
	background: var(--interwiki-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

 #interwiki .heading {
	margin: 0;
	padding-left: 0;

	color: var(--key-color);
	border-color: var(--special-border);
}

 #side-bar a:visited,
 #interwiki a:visited {
	color: var(--link-color);
}

/* ======== CONTENT AREA ======== */
/* ==== INFO BAR ==== */
 .info-container {
	--barColour: var(--info-bar-color);
	--linkColour: var(--credit-btn-color);
}

 .info-container:hover {
	--linkColour: var(--credit-btn-hover-color);
}

/* ==== PAGE RATING ==== */
 .page-rate-widget-box {
	margin-right: 0;
	border-radius: 0;
	box-shadow: none;
}

 div.page-rate-widget-box .rate-points {
	background-color: var(--rate-bar-bg);
	border: none;
	border-radius: 0;
}

 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown {
	background-color: var(--area-border);
	border: none;
	font-weight: normal;
}

 .page-rate-widget-box .cancel {
	background-color: var(--area-border);
	border: none;
	border-radius: 0;
}

 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a {
	color: var(--key-color);
}

 .page-rate-widget-box .cancel a {
	color: var(--key-color);
	text-transform: lowercase;
}

 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover {
	color: var(--key-color);
	background: var(--special-text-color);
	text-decoration: underline;
}

 .page-rate-widget-box .cancel a:hover {
	color: var(--key-color);
	background: var(--special-text-color);
	text-decoration: underline;
}

/* ==== INFO MODULE ==== */
 #page-content .creditRate {
	margin-right: 0;
}

 #page-content .rate-box-with-credit-button {
	background: var(--rate-bar-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

 #page-content .creditButton p a,
 #page-content .creditButtonStandalone p a {
	color: var(--special-btn-color);
	text-decoration: none;
}

 #page-content .creditButton p a {
	border-left: 0;
}

 #page-content .creditButtonStandalone p a {
	background: var(--rate-bar-bg);
	border-radius: 0;
	box-shadow: none;
}

 #page-content .rate-box-with-credit-button .fa-info:hover,
 #page-content .creditButtonStandalone p a:hover {
	color: var(--credit-btn-hover-color);
}

 #page-content .modalbox {
	border-radius: 0;
	box-shadow: none;
}

/* ==== FORMATTING | [GENERAL] ==== */
 h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font);
}

 h1 {
	color: var(--accent-color);
}

 hr {
	height: 0;
	margin: 1em 0;
	background: 0;
	border-top: 1px solid var(--special-border);
}

 *, a, span {
 /* No Line Breaks Mid-Word */
	word-break: normal;
}

 li, p {
	text-underline-offset: 30%;
}

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

/* ==== IMAGE BLOCK ==== */
/* == STANDARD == */
 .scp-image-block.block-right {
	margin: 0 0 1em 2em;
	box-shadow: none;
}

/* == CLASSIC == */
 .classic-image-block {
	float: right;
	width: 300px;
	margin: 0 0 1em 2em;
	text-align: center;
}

/* ==== TABLE STYLING ==== */
 table.wiki-content-table td {
	background-color: var(--fill-bg);
}

/* ==== YUI TABS ==== */
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a {
	/* ==== Tab Background Colour | [UNSELECTED] ==== */
	background-color: var(--fill-bg);
	/* ==== */
	background-image: none;
}

 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus {
	/* ==== Tab Background Colour | [HOVER] ==== */
	background-color: var(--tab-hover-bg);
	/* ==== */
	background-image: none;
}

 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:hover {
	/* ==== Tab Background Colour | [SELECTED] ==== */
	background-color: var(--tab-bg);
	/* ==== */
	background-image: none;
}

/* ======== MOBILE BREAKPOINT ======== */
 @media (max-width: 767px) {
	 #side-bar .side-block {
		background-color: var(--fill-bg);
	}

	 #header,
	 .mobile-top-bar {
		max-width: 95%;
	}

	 .mobile-top-bar {
		left: 0;
	}
}