MediaWiki:Common.css

From One Lonely Outpost Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/***********************************************************************************************************
 * css reset for browser default rules and MediaWiki internal rules
 ***********************************************************************************************************/
*{
	outline: 0;
}
table{
	white-space: unset; /* set to `no-wrap` in MW internal css */
}
html{
	font-size: 16px; /* reset rem */
}
pre{
	margin: 0;
}
h1, h2, h3, h4, h5, h6{
	padding: 0;
	border: 0 solid transparent;
}
table{
	display: table;
	white-space: unset;
}
body{
	background: none;
}
/***********************************************************************************************************
 * css for wiki.gg top bar and footer bar
 ***********************************************************************************************************/

/*** wiki.gg site bars tweak ***/
div#p-personal ul{
	white-space: nowrap; /* for "log out" */
}
#p-personal .vector-menu-content #pt-anonuserpage,
#p-personal .vector-menu-content  #pt-userpage a{
	padding-top: 0;
	background-position: left center;
}
/*** responsive ***/
@media screen and (max-width: 720px){
	footer#wikigg-footer .footer-right{
		margin-left: 0;
	}
	footer#wikigg-footer .footer-left {
		margin-right: 0;
	}
}/* screen and (max-width:720px) */
@media screen and (max-width:600px) {
	footer#wikigg-footer{
		display: grid;
		grid-template-columns: 35px 1fr;
		grid-template-rows: auto auto;
		align-items: center;
		justify-items: start;
		padding: 3px 0 3px 10px;
	}
	footer#wikigg-footer .footer-middle{
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
	footer#wikigg-footer .footer-right{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		margin: 0;
	}
	footer#wikigg-footer .footer-left{
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		margin: 0;
	}
}/* screen and (max-width:600px) */


/* custom font: take from www.onelonelyoutpost.com */
@font-face {
	font-display: block;
	font-family: "Helvetica-W01-Roman";
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/ea95b44a-eab7-4bd1-861c-e73535e7f652.eot?#iefix");
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/ea95b44a-eab7-4bd1-861c-e73535e7f652.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/4021a3b9-f782-438b-aeb4-c008109a8b64.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/669f79ed-002c-4ff6-965c-9da453968504.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/d17bc040-9e8b-4397-8356-8153f4a64edf.svg#d17bc040-9e8b-4397-8356-8153f4a64edf") format("svg");
}
@font-face {
	font-display: block;
	font-family: "Helvetica-W02-Roman";
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e4bd4516-4480-43df-aa6e-4e9b9029f53e.eot?#iefix");
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e4bd4516-4480-43df-aa6e-4e9b9029f53e.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/b56b944e-bbe0-4450-a241-de2125d3e682.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/7da02f05-ae8b-43a1-aeb9-83b3c0527c06.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/66cac56e-d017-4544-9d0c-f7d978f0c5c2.svg#66cac56e-d017-4544-9d0c-f7d978f0c5c2") format("svg");
}
@font-face {
	font-display: block;
	font-family: "Helvetica-LT-W10-Roman";
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/686a6a06-e711-4bd2-b393-8504a497bb3c.eot?#iefix");
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/686a6a06-e711-4bd2-b393-8504a497bb3c.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/6f8d1983-4d34-4fa4-9110-988f6c495757.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/7903ee3f-e9ab-4bdc-b7d2-d232de2da580.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9c58e9ea-fdea-4b9c-b0f9-0a2157389ed0.svg#9c58e9ea-fdea-4b9c-b0f9-0a2157389ed0") format("svg");
}
@font-face {
	font-display: block;
	font-family: "Helvetica-W01-Bold";
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/f70da45a-a05c-490c-ad62-7db4894b012a.eot?#iefix");
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/f70da45a-a05c-490c-ad62-7db4894b012a.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/c5749443-93da-4592-b794-42f28d62ef72.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/73805f15-38e4-4fb7-8a08-d56bf29b483b.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/874bbc4a-0091-49f0-93ef-ea4e69c3cc7a.svg#874bbc4a-0091-49f0-93ef-ea4e69c3cc7a") format("svg");
}
@font-face {
	font-display: block;
	font-family: "Helvetica-W02-Bold";
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/8c0d8b0f-d7d6-4a72-a418-c2373e4cbf27.eot?#iefix");
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/8c0d8b0f-d7d6-4a72-a418-c2373e4cbf27.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/192dac76-a6d9-413d-bb74-22308f2e0cc5.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/47584448-98c4-436c-89b9-8d6fbeb2a776.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/375c70e5-6822-492b-8408-7cd350440af7.svg#375c70e5-6822-492b-8408-7cd350440af7") format("svg");
}
@font-face {
	font-display: block;
	font-family: "Helvetica-LT-W10-Bold";
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9fe262dc-5a55-4d75-91a4-aed76bd32190.eot?#iefix");
	src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9fe262dc-5a55-4d75-91a4-aed76bd32190.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/0a3939d0-3833-4db3-8b85-f64c2b3350d2.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/1b128d6d-126f-4c9c-8f87-3e7d30a1671c.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/b791c850-fde1-48b3-adf0-8998d55b0866.svg#b791c850-fde1-48b3-adf0-8998d55b0866") format("svg");
}
@font-face {
	font-display: block;
	font-family:"Trend-Sans-W00-Four";
	src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/392aa98f-a1bf-4dc4-9def-a5d27c73a0de.eot?#iefix");
	src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/392aa98f-a1bf-4dc4-9def-a5d27c73a0de.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/29c66f1e-5243-4f34-8a19-47405f72954c.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/c81cca03-5f1a-4252-9950-096e60e2bde9.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/569b48ce-f71b-4e2d-a80a-1920efbd7187.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/f284409f-3669-43df-bfe1-f9f9ee1bbc07.svg#f284409f-3669-43df-bfe1-f9f9ee1bbc07") format("svg");
}
@font-face {
	font-display: block;
	font-family:"Futura-LT-W01-Book";
	src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/cf053eae-ba1f-44f3-940c-a34b68ccbbdf.eot?#iefix");
	src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/cf053eae-ba1f-44f3-940c-a34b68ccbbdf.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/8bf38806-3423-4080-b38f-d08542f7e4ac.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e2b9cbeb-fa8e-41cd-8a6a-46044b29ba52.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/c2a69697-4f06-4764-abd4-625031a84e31.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/dc423cc1-bf86-415c-bc7d-ad7dde416a34.svg#dc423cc1-bf86-415c-bc7d-ad7dde416a34") format("svg");
}
@font-face {
	font-family: "Futura-LT-W05-Book";
	src: url("//static.parastorage.com/services/santa-resources/resources/viewer/user-site-fonts/fonts/Futura_Complete/v1/FuturaLTW05-Book.woff2") format("woff2");
}

/*** vars, for theming ***/
:root {
	--theme-hover-color: #f19f5e;

	--theme-text-color-placeholder: rgba(234,227,209,0.4);
	--theme-control-text-color: #000;
	--theme-control-text-color-hover: #fff;

	/* for wide table */
	--theme-wide-table-shadow-color: #999;

	/*** text color ***/
	--theme-text-color: #4F1E1F; /*rgb(79, 30, 31)*/
	--theme-text-color-note: rgb(133, 133, 133);
	--theme-text-color-em: rgb(205, 101, 18);
	--theme-heading-color: rgb(60,60,60);

	/*** link text color ***/
	--theme-link-color: #2864a3;
	--theme-link-color-hover: #4186B0;
	--theme-link-color-visited: #205493;
	--theme-link-color-redlink: #bf0017;

	/*** body background ***/
	--theme-site-background: #100a33 url(https://onelonelyoutpost.wiki.gg/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;

	/*** top site logo ***/
	--theme-site-logo-image: url(https://onelonelyoutpost.wiki.gg/images/e/e6/Site-logo.png);
	--theme-site-logo-width: calc(234px * 2);
	--theme-site-logo-height: calc(91px * 2);

	/* sidebar/content common */
	--theme-box-shadow: 0 0 13px 2px rgba(0, 0, 0, 0.43);
	--theme-box-background: #FFF;
	--theme-box-background-color: #FFF;
	--theme-box-border-color: rgb(205, 101, 18); /* #cd6512 */
	--theme-box-border-width: 2px;
	--theme-box-border-style: solid;

	/* common */
	--theme-border-color:rgba(79, 30, 31, 0.3);
	--theme-highlight-background: rgba(205, 101, 18, 0.25);
	--theme-button-background:  #f19f5e;
	--theme-button-border-color: #f19f5e;
	--theme-button-background-active: rgb(245,188,143);
	--theme-button-border-color-active: rgb(245,188,143);

	/*** sidebar ***/
	--theme-sidebar-box-background: var(--theme-box-background);
	--theme-sidebar-box-border-style: var(--theme-box-border-style);
	--theme-sidebar-box-border-width: var(--theme-box-border-width);
	--theme-sidebar-box-border-color: var(--theme-box-border-color);
	--theme-sidebar-box-shadow: var(--theme-box-shadow);
	--theme-sidebar-heading-text-color: var(--theme-heading-color);
	--theme-sidebar-heading-arrow-color: var(--theme-text-color);
	--theme-sidebar-heading-arrow-color-hover: var(--theme-hover-color);
	--theme-sidebar-heading-background: var(--theme-box-background);
	--theme-sidebar-heading-background-hover: var(--theme-sidebar-heading-background);
	/* following 3 values will affect the space between the heading and the list */
	--theme-sidebar-heading-border-bottom: 0;
	--theme-sidebar-list-border-top: 1px solid var(--theme-border-color); /* will be hidden when collapsed */
	--theme-sidebar-list-padding-top: 4px;
	--theme-sidebar-list-item-background: none;
	--theme-sidebar-list-item-hover-mask: var(--theme-highlight-background);
	--theme-sidebar-list-item-text-color: var(--theme-text-color);
	--theme-sidebar-list-item-text-color-hover: var(--theme-text-color);
	/* responsive */
	--theme-sidebar-box-background-2: var(--theme-box-background);
	--theme-sidebar-box-border-width-2: var(--theme-box-border-width);
	--theme-sidebar-box-border-style-2: var(--theme-box-border-style);
	--theme-sidebar-box-border-color-2: var(--theme-box-border-color);
	--theme-sidebar-dropdown-background: var(--theme-box-background);

	/*** navbar ***/
	--theme-navbar-background: linear-gradient(to top, rgba(0,0,0, 0.1), transparent 5px), rgba(255,255,255, 0.8);
	--theme-navbar-border-width: var(--theme-box-border-width) var(--theme-box-border-width) 1px;
	--theme-navbar-border-style: var(--theme-box-border-style);
	--theme-navbar-border-color: var(--theme-box-border-color) var(--theme-box-border-color) var(--theme-border-color);
	--theme-navbar-tab-background: linear-gradient(to top, rgba(0,0,0, 0.06), transparent 5px), var(--theme-box-background);
	--theme-navbar-tab-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
	--theme-navbar-tab-text-color: var(--theme-text-color);
	--theme-navbar-tab-icon-color: var(--theme-navbar-tab-text-color);
	--theme-navbar-tab-text-color-hover: var(--theme-navbar-tab-text-color);
	--theme-navbar-tab-icon-color-hover: var(--theme-navbar-tab-icon-color);
	--theme-navbar-tab-text-color-redlink: var(--theme-link-color-redlink);
	--theme-navbar-tab-icon-color-redlink: var(--theme-link-color-redlink);
	--theme-navbar-tab-border-color: var(--theme-border-color);
	--theme-navbar-tab-background-hover: var(--theme-box-background);
	--theme-navbar-tab-border-color-hover: var(--theme-navbar-tab-border-color);
	--theme-navbar-tab-selected-background: var(--theme-box-background);
	--theme-navbar-tab-selected-border-color: var(--theme-navbar-tab-border-color);
	--theme-navbar-tab-selected-border-bottom-corner-color: var(--theme-navbar-tab-border-color);
	--theme-navbar-tab-dropdown-arrow-color: var(--theme-text-color);
	--theme-navbar-tab-dropdown-arrow-color-hover: var(--theme-hover-color);
	--theme-navbar-tab-dropdown-background: var(--theme-box-background);
	--theme-navbar-tab-dropdown-border-color: var(--theme-border-color);
	--theme-navbar-tab-dropdown-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	--theme-navbar-tab-dropdown-hover-mask: var(--theme-highlight-background);
	--theme-navbar-search-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
	--theme-navbar-search-input-background: rgba(255,255,255);
	--theme-navbar-search-input-border-color: var(--theme-border-color);
	--theme-navbar-search-input-text-color: inherit;
	--theme-navbar-search-button-background: var(--theme-button-background);
	--theme-navbar-search-botton-border-color: var(--theme-border-color);
	--theme-navbar-search-botton-text-color: var(--theme-text-color);
	--theme-navbar-search-button-background-active: var(--theme-button-background-active);
	--theme-navbar-search-botton-border-color-active: var(--theme-navbar-search-botton-border-color);
	--theme-navbar-search-botton-text-color-active: var(--theme-navbar-search-botton-text-color);

	--theme-navbar-search-suggestions-background: var(--theme-box-background);
	--theme-navbar-search-suggestions-border-color: var(--theme-border-color);
	--theme-navbar-search-suggestions-text-color: var(--theme-text-color);
	--theme-navbar-search-suggestions-text-color-hover: var(--theme-text-color-em);
	--theme-navbar-search-suggestions-hover-mask: var(--theme-highlight-background);
	--theme-navbar-search-suggestions-results-border-bottom-color: var(--theme-border-color);
	--theme-navbar-search-suggestions-special-offset-top: -1px; /* margin-top offset, normally is -1px */
	--theme-navbar-search-suggestions-special-border-top-color: var(--theme-border-color);
	--theme-navbar-search-suggestions-special-label-text-color: var(--theme-text-color);
	--theme-navbar-search-suggestions-special-label-text-color-hover: var(--theme-text-color);
	/* responsive */
	--theme-navbar-search-background: var(--theme-box-background);

	/*** content box ***/
	--theme-content-background: var(--theme-box-background);
	--theme-content-border-width: 0px var(--theme-box-border-width);
	--theme-content-border-style: var(--theme-box-border-style);
	--theme-content-border-color: var(--theme-box-border-color);
	--theme-content-subpage-icon-color: rgba(0,0,0, 0.3); /* color for "<" */
	--theme-content-heading-rule-border-top: 1px solid var(--theme-border-color); /* border */
	--theme-content-heading-rule-border-bottom: 0;

	/** category: box **/
	--theme-content-category-background: none;
	--theme-content-category-border-style: solid;
	--theme-content-category-border-width: 2px;
	--theme-content-category-border-radius: 0;
	--theme-content-category-border-color: var(--theme-border-color);

	/*** #footer ***/
	--theme-footer-text-color: var(--theme-text-color);
	--theme-footer-background: rgba(255,255,255, 0.85);
	--theme-footer-border-style: var(--theme-box-border-style);
	--theme-footer-border-width: 1px var(--theme-box-border-width) var(--theme-box-border-width) var(--theme-box-border-width);
	--theme-footer-border-color: var(--theme-border-color) var(--theme-box-border-color) var(--theme-box-border-color) var(--theme-box-border-color);
	--theme-footer-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);

	/** notification **/
	--theme-notice-red-text-color: #bf0017;
	--theme-notice-orange-text-color: #cf721c;

	/******* "real" wiki content ********/

	--theme-widget-toc-arrow-color: var(--theme-text-color);
	--theme-widget-toc-arrow-color-hover: var(--theme-hover-color);
	--theme-widget-toc-item-hover-background: var(--theme-highlight-background);

	--theme-collapsible-toggle-icon-color: var(--theme-text-color);
	--theme-collapsible-toggle-icon-color-hover: var(--theme-hover-color);
}



/***********************************************************************************************************
 * base css styles for both interface and content box: font, color, etc.
 ***********************************************************************************************************/

/**** base styles START ***********************************************************/

/* always show scroll bar for short page.
 * By doing this page background size won't change when expand/collapse sidebar sections.
 */
html{
	overflow-y: scroll;
}

/** Font **/
html, body{
	font-family: Helvetica, Arial, sans-serif;
	/* font-family: futura-lt-w01-book, futura-lt-w05-book, sans-serif; a bit hard to read */
	color: var(--theme-text-color);
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2{
	font-family: trend-sans-w00-four, sans-serif;
	color: var(--theme-heading-color);
}

body{
	font-size: 14px;
}
.vector-body{
	font-size: unset;
}

/** link color **/

/* Self-links aren't real links, they're not clickable.
 * Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
 * We should not use :not(.selflink) since it increases the priority and make it is difficult to override
 * link styles for certain elements (e.g. in wiki.gg header).
 */
a,
a.selflink:hover, a.selflink:active{
	text-decoration: none;
	color: var(--theme-link-color);
}
a:visited{
	color: var(--theme-link-color-visited);
}
a:hover, a:active{
	text-decoration: underline;
	color: var(--theme-link-color-hover);
}

/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new, a.new:visited{
	color: var(--theme-link-color-redlink);
}

button, input[type=submit]{

}

/* -------------------------------------------------------- */
/* Characteristic "olo" styling */
/* -------------------------------------------------------- */

.olo {
	border: 1px var(--theme-border-color) solid;
	padding: 8px 12px;
	border-radius: 6px;
	min-height: 1.5em;
	position: relative;
	overflow: auto; /* for float box */
}

.olo > .heading,
.olo > .mw-collapsible-content > .heading {
	background: var(--theme-highlight-background);
	text-align: center;
	font-weight: bold;
	line-height: 2;
	min-height: 2em;
	padding: 3px 6px;
	font-size: inherit;
	margin: 8px -8px;
}
.olo > .heading:first-child,
.olo > .mw-collapsible-toggle:first-child + .mw-collapsible-content > .heading:first-child{
	margin-top: -4px;
}
.olo > .heading:nth-of-type(1),
.olo > .mw-collapsible-content > .heading:nth-of-type(1){
	margin-top: auto;
}
/* Here we do not need to add
   ".olo > .heading:last-child{ margin-bottom: auto; }"
   since there can be a text node after the :last-child element.
 */

/* collapsible-toggle in .olo box */
.olo > .mw-collapsible-toggle {
	position: absolute;
	line-height: 1;
	right: 12px;
	top: 12px;
	font-size: 12px;
}
.olo > .mw-collapsible-toggle > .mw-collapsible-bracket {
	display: none;
}
.olo > .mw-collapsible-toggle:before {
	content: "";
	vertical-align: middle;
	display: inline-block;
	width: 0;
	height: 0;
	border-color: var(--theme-collapsible-toggle-icon-color) transparent;
	border-style: solid;
	border-width: 0 0.4em 0.45em;
	margin-right: 0.2em;
}
.olo > .mw-collapsible-toggle:after{
	content: "";
}
.olo > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
	border-width: 0.45em 0.4em 0;
}
.olo:hover > .mw-collapsible-toggle:before{
	border-color: var(--theme-collapsible-toggle-icon-color-hover) transparent;
}


/* -------------------------------------------------------- */
/* Tables */
/* -------------------------------------------------------- */

table {
	/* fix 100% width table with border */
	box-sizing: border-box;
}

table.lined,
table.bordered,
table.cellborder{
	border-collapse: collapse;
	border-style: solid;
	border-color: var(--theme-border-color);
}
table.lined th,
table.lined td{
	border-width: 0 0 1px 0;
}

/*** "olo"-classed tables ***/
table.olo {
	border: 2px solid transparent;
	margin: calc(0.5em + 5px) 5px;
	box-shadow: 0 0 0 2px var(--theme-content-background), 0 0 0 3px var(--theme-border-color);
	border-radius: 3px; /* (border radius of .olo box) - 3px */
}
table.olo.noborder {
	padding: 0;
	border: 0;
}
table.olo th,
table.olo td {
	padding: 3px 6px;
	border-color: var(--theme-border-color);
	border-style: solid;
	border-width: 0;
}
table.olo th{
	background: var(--theme-highlight-background);
	border-color: var(--theme-border-color);
	text-align: center;
}
table.olo caption {
	font-weight: bold;
	background: var(--theme-highlight-background);
	padding: 5px;
	margin: auto 2px;
}
table.olo > caption {
	padding: 3px;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	margin: 1px 1px -4px;
	border-bottom-width: 1px;
	box-shadow: 0 0 0 1px var(--theme-highlight-background);
	position: relative;
}
table.olo > caption:after {
	box-sizing: content-box;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--theme-highlight-background);
	position: absolute;
	left: -4px;
	bottom: -2px;
	border-left: 4px solid var(--theme-box-background-color);
	border-right: 4px solid var(--theme-box-background-color);
}
table.olo > caption.plaincaption {
	background: transparent;
	border: 0;
	box-shadow: 0 0 0 0;
	margin-bottom: 4px;
}
table.olo > caption.plaincaption:after {
	background: transparent;
	border: 0;
}
table tfoot:empty,
table thead:empty{
	display: none;
}
/* Auto line separators for tables */
table.olo.lined {
	padding-bottom: 0;
	/*display: inline-table;*/
}
table.olo.lined td {
	border-width: 0;
	border-bottom-width: 1px;
}
table.olo.lined::after {
	content: "";
	display: block;
	height: 3px;
	width: calc(100% - 6px);
	position: absolute;
	left: 3px;
	bottom: 3px;
	background-color: var(--theme-box-background-color);
}
table.lined td.noline, table.lined tr.noline td{
	border-bottom-width: 0;
}
table tr.bottomline td {
	border-bottom-width: 1px;
}
table tr.topline td {
	border-top-width: 1px;
}
table td.bottomline, table.lined tr.noline td.bottomline{
	border-bottom-width: 1px;
}
table td.topline {
	border-top-width: 1px;
}
table.olo.cellborder,
table.olo.border{
	border-spacing: 0;
	padding: 4px 4px 4px 3px;
	position: relative;
}
table.olo.cellborder::before,
table.olo.border::before{
	content: "";
	display: block;
	width: 1px;
	height: calc( 100% - 6px );
	background-color: var(--theme-box-background-color);
	position: absolute;
	left: 4px;
	top: 3px;
}
table.olo.cellborder td,
table.olo.border td{
	border-left-width: 1px;
	border-bottom-width: 1px;
}
table.olo.cellborder th,
table.olo.border th{
	border-left-width: 2px;
	border-top-width: 2px;
}
table.olo.cellborder tr:first-of-type th,
table.olo.border tr:first-of-type th{
	border-top: 0;
}
table.olo.cellborder::after,
table.olo.border::after{
	content: "";
	display: block;
	height: 1px;
	width: calc(100% - 6px);
	position: absolute;
	left: 3px;
	bottom: 5px;
	background-color: var(--theme-box-background-color);
}

/* Hack for using "border-collapse" and "border-radius" in the same table display by using one table nested within another */
table.outer {
	white-space: nowrap;
}
table.inner {
	border-collapse: collapse;
	background: inherit;
	width: 100%;
}
table.inner th {
	border: 2px solid var(--theme-box-background-color);
}

/* Fix for siderail overlapping some wide tables such as on Armor, Accessories, or NPCs */
@media screen and (max-width:1520px) and (min-width:1350px) {
	.with-siderail table.olo .i{
		white-space:normal;
	}
	.with-siderail table.olo th {
		font-size:90%;
	}

	.with-siderail table.olo td:not(.il1c) img {
		max-width:100%;
		height:auto;
	}
}
.olo th {
	border-bottom: 1px solid;
}

.wikitable,
.wikitable > tr > th,
.wikitable > * > tr > th {
	color: inherit;
	background: none;
}
/*
.jquery-tablesorter th.headerSort{
	border: 1px solid var(--theme-border-color);
}
*/

table.cargoTable.noMerge tr:nth-child(2n) {
	background: rgba(0, 0, 0, 0.25);
}
table.cargoTable.noMerge tr:nth-child(2n+1) {
	background: none;
}
table.olo caption {
	border-width: 1px;
	border-style: solid;
	border-top-color: rgb(255,255,255,0.1);
	border-right-color: rgb(13,4,2,0.5);
	border-bottom-color: rgb(13,4,2,0.5);
	border-left-color: rgb(255,255,255,0.1);
	border-radius: 8px;
}

table.olo {
	/*display: inherit;*/
	width: auto;
}
.olo.sortable.lined.align-center.jquery-tablesorter{
	/*width: min-content;*/
}
#possible-modifiers-table,
.olo.lined.sortable.jquery-tablesorter,
.olo.lined {
	width: auto;
}


/**** base styles END ***********************************************************/

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

input, button{
	color: var(--theme-control-text-color);
	caret-color: var(--theme-text-color);
}
input[type=submit]{
	color: var(--theme-control-text-color);
}
::placeholder {
	color: var(--theme-text-color-placeholder);
}

/* Removes VisualEdit button */
#ca-ve-edit {
	display: none;
}

/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	color: var(--theme-link-color);
}

/* Text color */
#content,
#firstHeading,
.infocard .main-heading .hgroup,
#footer ul li,
h1,
h2,
h3,
h4,
h5,
h6,
div.hat-note.t-main,
.npc.infobox .section.statistics .title,
.npc.infobox.c-expert .section .title,
.npc.infobox.c-master .section .title,
#contentSub, #contentSub2,
.search-types .current a,
.infobox > .title > span,
code,
.trw-toggleable.not-toggled.achievements .achievement b * {
	color: var(--theme-text-color);
}

.i .note,
.note-text{
	color: var(--theme-text-color-note);
}

.pixel img, .pixel,
#mw-imagepage-section-filehistory img {
	image-rendering: pixelated; /*for chrome*/
	image-rendering: crisp-edges; /*for firefox*/
}

.small {
	font-size: 85%;
}
.fullwidth, .full-width{
	width: 100%;
}
.nowrap {
	white-space: nowrap;
}

/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
	text-align: center;
}

.alignleft,
.align-left{
	text-align: left;
}

.alignright,
.align-right{
	text-align: right;
}

/* clear fix for float block */
.clearfix {
	*zoom: 1;
}
.clearfix::before,
.clearfix::after {
	content: " ";
	display: table;
}
.clearfix::after {
	clear: both;
}

/* References smaller text than main */
.references {
	font-size: 90%;
}

/* Larger font for Module: code display (default is smaller than other code pages) */
pre.lua.source-lua {
	font-size: 14px !important;
}

/* Facilitate inline scary transclusion */
.scary-transclusion p, .scary-transclusion .mw-parser-output {
	display: inline;
}

/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child{
	display: none;
}

/* Fix empty parameter descriptions on api.php having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
	content: '\00A0';
}

.block{
	display: block;
}
.inline{
	display: inline;
}
.inline-block{
	display: inline-block;
}

hr.space{
	height: 4px;
	background: none;
	border: 0;
}
.page-content .vertical-align-top *{
	vertical-align: top;
}
.page-content .vertical-align-bottom *{
	vertical-align: bottom;
}

/* Drowning Table No Border */
.drowning-table-no-border {
	border: none;
}

/* Gadget description length */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top>.oo-ui-fieldLayout-body>.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline>.oo-ui-fieldLayout-body {
	max-width: unset;
}

/* Box at the top of all pages when the user has a new message on their User_talk: page */
.usermessage {
	background-color: var(--theme-box-background-color);
	border-color: var(--theme-box-border-color);
	color: var(--theme-text-color);
}

/***********************************************************************************************************
 * interface layout and styles for widgets outside of content box
 ***********************************************************************************************************/
:root{
	--main-layout-topbar-height: 35px; /* height of wiki.gg topbar */
	--main-layout-sidebar-width: 160px; /* width of side navbar, without gap */
	--main-layout-sidespace: 24px; /* whitespace width on most left and most right */
	--main-layout-gap: 12px;
	--main-layout-logo-height: calc( var(--theme-site-logo-height) + 30px);
	--main-box-border-radius: 5px;
	--main-inner-box-border-radius: calc(var(--main-box-border-radius) - 2px);
	--main-box-padding: 12px;

	background: var(--theme-site-background);
	/* Removes second vertical scrollbar(mw 1.37 fix) */
	overflow-y: unset; /* must be unset or visible, can not be auto, or side ad will not be sticky */
}

/**** Main Layout START ***********************************************************/

/**
 * Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
 */

html, body{
	min-height: 100%;
}
html{
	height: 100%;
	scroll-padding-top: var(--main-layout-topbar-height);
}
body{
	height: auto;
}

/*** main grid container ***/
body{
	/* self */
	box-sizing: border-box;
	/* grid */
	display: grid;
	grid-template-columns: [body-left] var(--main-layout-sidespace) [aside-left] var(--main-layout-sidebar-width) [aside-right content-left] minmax(0,1fr) [content-right] var(--main-layout-sidespace) [body-right];
	grid-template-rows: [body-start] var(--main-layout-topbar-height) [page-start logo-start] var(--main-layout-logo-height) [logo-end nav-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [page-end] 0fr [body-end];
	gap: 0 var(--main-layout-gap);
}

/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
 * div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
 */
body > .content-wrapper,
#mw-navigation{
	display: contents;
}
/** unused, hide them **/
#mw-head-base,
#mw-navigation>h2{
	display: none;
}
/** side nav bar **/
#mw-panel{
	grid-column: aside-left / aside-right;
	grid-row: nav-start / page-end;
	margin-bottom: var(--main-layout-gap);
	float: none;
	width: unset;
	padding: 0;
}
/** nav **/
#mw-head{
	grid-column: content-left / content-right;
	grid-row: nav-start / nav-end;
}
/** content **/
.mw-body{
	grid-column: content-left / content-right;
	grid-row: content-start / content-end;
}
/* For some page such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child{
	grid-column: body-left / body-right;
	grid-row: page-start / page-end;
}
/** #footer: content footer **/
#footer{
	grid-column: content-left / content-right;
	grid-row: footer-start / footer-end;
	margin: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base{
	grid-column: content-left / content-right;
	grid-row: nav-start / footer-end;
	height: 100%;
	background: none;
}
/** wiki.gg footer bar **/
body > footer{
	grid-column: body-left / body-right;
	grid-row: page-end / body-end;
}

/*** logo block. It is absolute position ***/
#p-logo{
	position: absolute;
	width: 100%;
	height: var(--main-layout-logo-height);
	left: 0;
	top: var(--main-layout-topbar-height);
	background: var(--theme-site-logo-image) center center / var(--theme-site-logo-width) auto no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
 * I still don't know why, but move background to #p-logo can avoid this issue.
 */
#p-logo .mw-wiki-logo{
	width: var(--theme-site-logo-width);
	height: var(--theme-site-logo-height);
	margin: auto;
	background: none; /* logo flicker fix */
}

/**** Main Layout END ***********************************************************/

/**** side panel START ***********************************************************/
#mw-panel{
	font-size: 12px;
	line-height: 1.5;
	color: var(--theme-text-color);
}
#mw-panel a{
	text-decoration: none;
}
/* sections */
#mw-panel .portal,
#mw-panel #p-logo + .portal{
	margin: var(--main-layout-gap) 0 0 0;
	padding: 0;
	border-radius: var(--main-box-border-radius);
	box-shadow: var(--theme-sidebar-box-shadow);
	color: var(--theme-sidebar-heading-text-color);
	background: var(--theme-sidebar-box-background);
	border-width: var(--theme-sidebar-box-border-width);
	border-style: var(--theme-sidebar-box-border-style);
	border-color: var(--theme-sidebar-box-border-color);

}
#mw-panel #p-logo + .portal{
	margin-top: 0;
	position: relative;
}
/* secction heading */
#mw-panel #p-logo + .portal .vector-menu-heading,
#mw-panel .portal .vector-menu-heading{
	margin: 0;
	padding: 6px 12px;
	border-bottom: var(--theme-sidebar-heading-border-bottom);
	border-radius: var(--main-inner-box-border-radius) var(--main-inner-box-border-radius) 0 0;
	background: var(--theme-sidebar-heading-background);
	font-size: 15px;
	line-height: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--theme-text-color);
	font-family: trend-sans-w00-four, sans-serif;
}
/* arrow icon */
#mw-panel .portal .vector-menu-heading::after{
	content: "";
	display: inline-block;
	background: none;
	position: relative;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--theme-sidebar-heading-arrow-color) transparent;
	border-width: 0 5px 6px 5px;
	margin-top: 4px;
	vertical-align: middle;
	flex: 0 0 auto;
}
#mw-panel .portal .vector-menu-heading:hover::after{
	border-color: var(--theme-sidebar-heading-arrow-color-hover) transparent;
}
#mw-panel .portal.collapsed .vector-menu-heading{
	border-radius: var(--main-inner-box-border-radius);
}
#mw-panel .portal.collapsed .vector-menu-heading::after{
	border-width: 6px 5px 0 5px;
}
/* list */
#mw-panel #p-logo + .portal .body,
#mw-panel .portal .body{
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	border-top: var(--theme-sidebar-list-border-top);
}
#mw-panel .portal .body ul{
	padding: var(--theme-sidebar-list-padding-top) 4px 4px;
}
#mw-panel .portal .body li{
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	background: var(--theme-sidebar-list-item-background);
	border-radius: var(--main-inner-box-border-radius);
}
#mw-panel .portal .body li:hover{
	background: var(--theme-sidebar-list-item-hover-mask);
}
#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited{
	display: block;
	padding: 3px 8px;
	color: var(--theme-sidebar-list-item-text-color);
}
#mw-panel .portal .body li a:hover{
	color: var(--theme-sidebar-list-item-text-color-hover);
}
#mw-panel .portal .body li a.feedlink{ /* "Atom" RSS Feed */
	text-indent: 14px; /* the icon is 12x12px, so 12px + 2px */
	background-position: 8px center; /* align icon with other text */
}
#merch{
	margin: 1.5em auto auto 1em;
}

/**** side panel END ***********************************************************/

/**** main content box START ***********************************************************/

/**** box shadow for nav+content+#footer ****/
#mw-page-base{
	box-shadow: var(--theme-box-shadow);
	border-radius: var(--main-box-border-radius);
}

/**** navbar ****/
#mw-head{
	padding: 14px var(--main-box-padding) 0;
	box-sizing: border-box;
	background: var(--theme-navbar-background);
	border-width: var(--theme-navbar-border-width);
	border-style: var(--theme-navbar-border-style);
	border-color: var(--theme-navbar-border-color);
	border-radius: var(--main-box-border-radius) var(--main-box-border-radius) 0 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

}
#mw-head #left-navigation,
#mw-head #right-navigation{
	float: none;
	flex: 1 1 auto;
	margin: 0;
	display: flex;
	align-items: flex-end;
}
#mw-head #left-navigation{
	justify-content: flex-start;
}
#mw-head #right-navigation{
	justify-content: flex-end;
}
/* reset */
#p-search,
.vector-menu-dropdown,
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .vector-menu-heading span,
.vectorTabs,
.vectorTabs ul,
.vectorTabs span,
.vectorTabs li,
.vectorTabs li a,
.vectorTabs li.selected a,
.vectorTabs li.selected a:visited{
	background-image: none;
	float: none;
	height: auto;
	display: block;
}
#mw-head input{
	display: block;
	z-index: 1;
}
#mw-head input + .vector-menu-heading{
	z-index: 0;
}
.vectorMenuCheckbox:focus+.vector-menu-heading{
	outline: 0;
}
.vectorTabs ul{
	display: flex;
}
.vectorTabs ul li,
.vector-menu-dropdown{
	display: block;
	white-space: nowrap;
}
.vector-menu-dropdown.emptyPortlet{
	display: none;
}

/* override some mw css */
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited,
div.vectorTabs li a,
div.vector-menu-dropdown .vector-menu-heading span {
	color: var(--theme-navbar-tab-text-color);
	font-size: 14px;
	line-height: 24px;
	padding: 3px 12px;
	overflow: hidden;
}
.vector-menu-dropdown .vector-menu-heading:hover span {
	color: var(--theme-navbar-tab-text-color); /* reset */
	text-decoration: underline;
}
.vectorTabs li,
.vector-menu-dropdown{
	background: var(--theme-navbar-tab-background);
	border-style: solid;
	border-color: var(--theme-navbar-tab-border-color);
	border-width: 1px 1px 0 1px;
	border-radius: var(--main-box-border-radius) var(--main-box-border-radius) 0 0;
	box-shadow: var(--theme-navbar-tab-box-shadow);
	position: relative;
	margin-right: calc( var(--main-box-padding) / 2 );
}
div.vectorTabs li:hover,
div.vector-menu-dropdown:hover,
div.vector-menu-dropdown.open {
	color: var(--theme-navbar-tab-text-color-hover);
	border-color: var(--theme-navbar-tab-border-color-hover);
	background: var(--theme-navbar-tab-background-hover);
}
div.vectorTabs li.selected:hover a,
div.vectorTabs li.selected:hover a:visited,
div.vectorTabs li:hover a,
div.vector-menu-dropdown:hover .vector-menu-heading span,
div.vector-menu-dropdown.open .vector-menu-heading span{
	color: var(--theme-navbar-tab-text-color-hover);
}

.vectorTabs li.new a,
.vectorTabs li.new a:visited{
	color: var(--theme-navbar-tab-text-color-redlink);
}
.vectorTabs li.selected {
	background: var(--theme-navbar-tab-selected-background);
	border-color: var(--theme-navbar-tab-selected-border-color);
}
.vectorTabs li.selected:hover span{
	background: none;
}
/* cover border bottom */
.vectorTabs li.selected::after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--theme-navbar-tab-selected-background);
	border-width: 0 1px;
	border-style: solid;
	border-color: var(--theme-navbar-tab-selected-border-bottom-corner-color);
	position: absolute;
	bottom: -1px;
	left: -1px;
	z-index: 3;
}


/* watch/unwatch star */
.vectorTabs #ca-unwatch.icon a,
.vectorTabs #ca-watch.icon a,
.vectorTabs #ca-unwatch.icon a.loading,
.vectorTabs #ca-watch.icon a.loading{
	display: block;
	position: unset;
	width: 18px;
	height: 18px;
	padding: 6px 8px;
	box-sizing: content-box;
}
.vector-menu-tabs .mw-watchlink.icon a::before{
	height: 18px;
	width: 18px;
	display: inline-block;
	position: unset;
	margin-right: 20px;
}
.vector-menu-tabs #ca-unwatch.icon .loading::before,
.vector-menu-tabs #ca-watch.icon .loading::before{
	transform-origin: 50% 52%;
}


#mw-head .vector-menu-dropdown .vector-menu-heading{
	padding: 0;
	margin: 0;
}
.vector-menu-dropdown .vector-menu-heading::after{
	display: none;
}
.vector-menu-dropdown .vector-menu-heading span::after {
	content: "";
	display: inline-block;
	background: none;
	position: unset;
	width: 0;
	height: 0;
	border-color: var(--theme-navbar-tab-dropdown-arrow-color) transparent;
	border-style: solid;
	border-width: 6px 5px 0 5px;
	margin-left: 4px;
	vertical-align: middle;
}
.vector-menu-dropdown .vector-menu-checkbox:checked ~ .vector-menu-heading span::after,
.vector-menu-dropdown:hover .vector-menu-heading span::after{
	border-width: 0 5px 6px 5px;
	border-color: var(--theme-navbar-tab-dropdown-arrow-color-hover) transparent;
}
/* drop down menu */
.vector-menu-dropdown.open .menu{
	visibility: visible;
}
/* reset mw 1.37 css */
.vector-menu-dropdown:not(.vector-user-menu) li{
	font-size: 1em;
}
.vector-menu-dropdown .vector-menu-content,
.vector-menu-dropdown > .menu {
	font-size: 15px;
	background: var(--theme-navbar-tab-dropdown-background);
	margin: 0;
	border-radius: 0 0 var(--main-box-border-radius) var(--main-box-border-radius);
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-navbar-tab-dropdown-border-color);
	box-shadow: var(--theme-navbar-tab-dropdown-box-shadow);
	padding: 4px;
	top: 100%;
	left: -1px; /* 1px for border */
	min-width: 8em;
}
.vector-menu-dropdown .menu li a{
	text-decoration: none;
	padding: 10px 8px;
	border-radius: calc( var(--main-box-border-radius) - 2px );
	font-size: 1em;
	color: var(--theme-navbar-tab-text-color);
}
.vector-menu-dropdown .menu li a:hover{
	background-color: var(--theme-navbar-tab-dropdown-hover-mask);
	color: var(--theme-navbar-tab-text-color-hover);
}
.vector-menu-dropdown li.selected{
	display: none; /* just remove current selected (already displayed in header) */
}
/* search */
#p-search form,
#p-search input{
	margin: 0;
}
#mw-head #p-search{
	margin: 0 0 4px calc( var(--main-layout-gap) / 2 );
	box-shadow: var(--theme-navbar-tab-dropdown-box-shadow);
}
#simpleSearch{
	background: none;
	margin: 0;
	border: 0;
	color: var(--theme-text-color);
	width: 18em;
	padding: 0;
	height: auto;
	border-radius: 0;
	transition: none;
	display: grid;
	grid-template-columns: 1fr 0fr;
	grid-template-rows: 1fr;
	align-content: stretch;
	justify-content: stretch;
}
#simpleSearch #searchInput{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	font-size: 14px;
	line-height: 16px;
	text-align: left;
	padding: 3px 5px;
	background: var(--theme-navbar-search-input-background);
	border-radius: 2px 0 0 2px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-navbar-search-input-border-color);
	border-right: 0;
	word-wrap: break-word;
	appearance: none;
	-webkit-appearance: none;
	color: var(--theme-navbar-search-input-text-color);
	height: auto;
}

#searchInput:focus,
#simpleSearch:hover #searchInput,
#simpleSearch:hover #searchInput:focus {
	border-color: var(--theme-navbar-search-input-border-color);
	box-shadow: none;
}
#simpleSearch #searchButton{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	box-sizing: border-box;
	position: static; /* reset css from mw internal */
	display: block;
	width: 28px;
	height: 100%;
	/* mw internal css override its button default styles, so override again  */
	background: var(--theme-navbar-search-button-background);
	border: 1px solid;
	border-color: var(--theme-navbar-search-botton-border-color);
	border-radius: 0 2px 2px 0;
	z-index: 0;
}
#simpleSearch #searchButton:hover,
#searchInput:hover ~ #searchButton,
#searchInput:focus ~ #searchButton{
	background: var(--theme-navbar-search-button-background-active);
	border-color: var(--theme-navbar-search-botton-border-color-active);
}
/* use ::before & ::after to draw search icon */
#simpleSearch::before,
#simpleSearch::after{
	content: '';
	display: block;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	z-index: 1;
	place-self: center;
	border-style: solid;
	border-color: var(--theme-navbar-search-botton-text-color);
	pointer-events: none;
}
#simpleSearch:hover::before,
#simpleSearch:hover::after {
	border-color: var(--theme-navbar-search-botton-text-color-active);
}
#simpleSearch::before{
	border-width: 2px;
	border-radius: 100%;
	width: 8px;
	height: 8px;
	margin: 0 0 1px 0;
	transform: translateX(-1px);
}
#simpleSearch::after{
	border-width: 1px;
	width: 3px;
	height: 0;
	transform: translate(4px, 4px) rotate(45deg);
}

/* search result suggestion */
.suggestions{
	background: var(--theme-navbar-search-suggestions-background);
	border: 1px solid;
	border-color: var(--theme-navbar-search-suggestions-border-color);
	transform: translateX(3px);/* self border 2px + input border 1px */
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
	background: none;
	border: 0;
}
.suggestions .suggestions-results {
	border-bottom: 1px solid;
	border-bottom-color: var(--theme-navbar-search-suggestions-results-border-bottom-color);
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-query,
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus{
	color: var(--theme-navbar-search-suggestions-text-color);
}
.suggestions .suggestions-result-current {
	background: var(--theme-navbar-search-suggestions-hover-mask);
	color: var(--theme-navbar-search-suggestions-text-color-hover);
}
.suggestions .suggestions-special{
	margin-top: var(--theme-navbar-search-suggestions-special-offset-top);
	border-top: 1px solid;
	border-top-color: var(--theme-navbar-search-suggestions-special-border-top-color);
}
.suggestions .suggestions-special .special-label{
	color: var(--theme-navbar-search-suggestions-special-label-text-color);
}
.suggestions .suggestions-result-current .special-label{
	color: var(--theme-navbar-search-suggestions-special-label-text-color-hover);
}

/**** main content box ****/
body .mw-body{
	color: var(--theme-text-color); /* override mw internal css */
	background: var(--theme-content-background);
	border-style: var(--theme-content-border-style);
	border-width: var(--theme-content-border-width);
	border-color: var(--theme-content-border-color);
	margin: 0;
	padding: 0;
	z-index: 1; /* cover #footer */
	display: flex;
	flex-direction: column;
}
.content-body{
	flex: 1 1 auto;
}
.content-body > main{
	align-self: stretch;
	padding: var(--main-box-padding);
}
#firstHeading{
	border: 0;
	margin: 0;
	overflow: hidden; /* override mw internal css, fix scroll-x issue for narrow width */
}

#contentSub, #contentSub2{
	margin: 0;
}
#contentSub .subpages{
	color: transparent;
	line-height: 1.5;
	font-size: 0;
}
#contentSub .subpages a{
	font-size: 12px;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	padding-left: 4px;
}
#contentSub .subpages a::before{
	content: "";
	display: inline-block;
	height: 4px;
	width: 4px;
	border-color: var(--theme-content-subpage-icon-color);
	border-style: solid;
	border-width: 0 0 2px 2px;
	margin: 0 2px 0 0;
	transform: rotate(45deg);
}
#bodyContent{
	display: flex;
	flex-direction: column;
}
#mw-content-text{
	flex: 1 1 auto;
	min-height: 35em;
}
#mw-content-text::before{
	content: "";
	display: block;
	height: 0;
	border-top: var(--theme-content-heading-rule-border-top);
	border-bottom: var(--theme-content-heading-rule-border-bottom);
	margin-top: 2px;
	margin-bottom: 1em; /* will collapse with margin-top of content's "top element" */
}

/* section edit link */
.mw-editsection{
	white-space: nowrap;
}

/* "category:" box */
#catlinks{
	background: var(--theme-content-category-background);
	border-width: var(--theme-content-category-border-width);
	border-style: var(--theme-content-category-border-style);
	border-color: var(--theme-content-category-border-color);
	border-radius: var(--theme-content-category-border-radius);
	margin: var(--main-layout-gap) 0 0 0;
	padding: calc( var(--main-box-padding) / 2 ) var(--main-box-padding);
}

/* ads */
div.games-showcase-header,
div.games-showcase-footer,
.content-body > .games-showcase-sidebar{
	margin: 0;
	padding: var(--main-box-padding);
}
div.games-showcase-header{
	padding-bottom: 0;
}
div.games-showcase-footer{
	padding-top: 0;
}
.games-showcase-header img,
.games-showcase-footer img {
	height: 100%;
	width: auto;
	object-fit: contain;
}
.content-body > .games-showcase-sidebar{
	padding-left: 0;
}
aside.games-showcase-sidebar div.sidebar-showcase{
	padding: 0 0 var(--main-box-padding) 0;
}
@media screen and (max-width: 1100px) {
	.games-showcase-header img,
	.games-showcase-footer img  {
		height: auto!important;
		width: 100%!important;
		object-fit: contain;
	}
}
@media screen and (max-width: 926px) {
	.games-showcase-header img,
	.games-showcase-footer img  {
		object-position: 50%;
		height: 105px!important;
		width: 100%!important;
		object-fit: none!important;
	}
}

/**** #footer (copyright info) ****/
#footer{
	/* self */
	color: var(--theme-footer-text-color);
	background: var(--theme-footer-background);
	padding: var(--main-box-padding);
	border-radius: 0 0 var(--main-box-border-radius) var(--main-box-border-radius);
	border-width: var(--theme-footer-border-width);
	border-style: var(--theme-footer-border-style);
	border-color: var(--theme-footer-border-color);
	box-shadow: var(--theme-footer-box-shadow);
	position: relative;
	/* grid */
	display: grid;
	grid-template-columns: [l] 1fr 0fr [r];
	grid-template-rows: [t] auto auto [b];
	z-index: 0; /* covered by content */
}
#footer-info{
	font-size: 11px;
	display: contents;
}
#footer ul li{
	font-size: inherit;
	line-height: 1.5;
	padding: 0;
}
#footer-icons{
	grid-column: span 1 / r;
	grid-row: t / b;
	place-self: end;
}
#footer #footer-info-lastmod{
	grid-column: l / span 1;
	grid-row: t / span 1;
	place-self: start;
	margin-bottom: 1em;
}
#footer #footer-info-copyright{
	grid-column: l / span 1;
	grid-row: span 1 / b;
	place-self: end stretch;
	position: relative;
	padding-right: 100px;
}
#footer-info-copyright img{
	position: absolute;
	right: 0;
	/* mediawiki logo is 31px height, and this image has a 1px black border,
	   a small tweak to make them visually matched on size and position */
	bottom: -1px;
	height: 33px;
	width: auto;
}
#footer-places,
#footer > div {
	display: none;
}

/**** main content box START ***********************************************************/

/****** responsive Layout ******/

@media screen and (max-width: 1800px){
	:root{
		--main-layout-sidespace: 0; /* whitespace width on most left and most right */

	}
}/* screen and (max-width: 1800px) */


@media screen and (max-width: 1365px){
:root{
	--main-layout-sidespace: 0;
	--main-layout-logo-height: calc( var(--theme-site-logo-height) * 0.75 + 20px);
}

/* re-style "sidebar" nav */
body{
	height: 100%;
	grid-template-columns: [body-left] 0 [aside-left content-left] minmax(0,1fr) [content-right aside-right] 0 [body-right];
	grid-template-rows: [body-start] var(--main-layout-topbar-height) [page-start logo-start] var(--main-layout-logo-height) [logo-end aside-start] auto [aside-end nav-start] 0fr [nav-end content-start] 1fr [content-end footer-start] 0fr [footer-end] auto [page-end] 0fr [body-end];
}

#p-logo{
	background-size: calc(var(--theme-site-logo-width) * 0.75) auto;
}
#p-logo .mw-wiki-logo {
	width: calc(var(--theme-site-logo-width) * 0.75);
	height: calc(var(--theme-site-logo-height) * 0.75);
}

#mw-panel{
	grid-column: aside-left / aside-right;
	grid-row: aside-start / aside-end;
	box-shadow: var(--theme-sidebar-box-shadow);
	background: var(--theme-sidebar-box-background-2);
	border-width: var(--theme-sidebar-box-border-width-2);
	border-style: var(--theme-sidebar-box-border-style-2);
	border-color: var(--theme-sidebar-box-border-color-2);
	border-radius: var(--main-box-border-radius);
	height: 35px;
	display: flex;
	align-items: flex-end;
	padding: 0 var(--main-layout-gap);
}
#mw-panel .portal,
#mw-panel #p-logo + .portal{
	background: none;
	box-shadow: none;
	border: 0;
	margin: 0;
	position: relative;
}
#mw-panel #p-logo + .portal .vector-menu-heading,
#mw-panel .portal .vector-menu-heading{
	padding: 9px 12px 8px;
	border: 0;
	border-radius: 0;
	background: none;
}
#mw-panel #p-logo + .portal.expanded .vector-menu-heading,
#mw-panel .portal.expanded .vector-menu-heading,
#mw-panel #p-logo + .portal:hover .vector-menu-heading,
#mw-panel .portal:hover .vector-menu-heading{
	background: var(--theme-sidebar-list-item-hover-mask);
	border-radius: 0;
}
#mw-navigation #mw-panel .portal .vector-menu-heading::after{
	margin-left: 4px;
}
#mw-panel div.portal .vector-menu-heading::after{
	border-width: 6px 5px 0 5px;
}
#mw-panel div.portal.expanded .vector-menu-heading::after,
#mw-panel div.portal:hover .vector-menu-heading::after{
	border-width: 0 5px 6px 5px;
}
#mw-panel #p-logo + .portal .body,
#mw-panel .portal .body{
	display: none !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
	position:absolute;
	left: 0;
	top: 100%;
	z-index: 50;
	width: max-content;
	border-top: 0;
	background: var(--theme-sidebar-dropdown-background);
	box-shadow: var(--theme-sidebar-box-shadow);
	border-radius: 0 0 var(--main-box-border-radius) var(--main-box-border-radius);
	min-width: 8em;
}
#mw-panel #p-logo + .portal.expanded .body,
#mw-panel .portal.expanded .body,
#mw-panel #p-logo + .portal:hover .body,
#mw-panel .portal:hover .body{
	display: block !important;
}
#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
	padding: 6px 8px;
}

/* search: move to sidebar nav box ("main nav bar") */
#mw-head #p-search{
	position: absolute;
	top: calc( 0px - var(--theme-sidebar-box-border-width-2) - 45px);
}

#mw-head #right-navigation #p-cactions {
	margin-right: 0;
}

/* "more" menu in #right-navigation causes horizontal scroll bar appear */
#right-navigation .vector-menu-dropdown .vector-menu-content{
	left: auto;
	right: -1px; /* 1px for border */
}

/* hide sidebar toggle */
#nav-content-size-toggle{
	display: none;
}

/* site footer */
body > footer{
	margin-top: var(--main-layout-gap);
}
}/* screen and (max-width: 1365px) */

@media screen and (max-width:900px) {
:root{
	--main-layout-logo-height: calc( var(--theme-site-logo-height) * 0.5 + 20px);
	--main-layout-gap: 6px;
	--main-box-padding: 6px;
}
body{
	grid-template-columns: [body-left aside-left content-left] minmax(0,1fr) [aside-right content-right body-right];
}

/** reset mw internal css **/
div#content{
	margin: 0;
}
#mw-head {
	position: relative !important;
	margin-top: 0;
	top: 0;
}
div#mw-navigation div#mw-panel {
	display: flex;
	position: static;
	width: auto;
	overflow: visible;
}
div#mw-navigation div#mw-panel .portal {
	width: auto;
}
body #footer {
	padding-top: 0.75em;
}
body #footer #footer-info-lastmod,
body #footer #footer-info-viewcount {
	display: block;
}
#mw-head div#left-navigation,
#mw-head div#right-navigation{
	position: static;
}
div#p-logo{
	display: block;
	/* move to left */
	margin: 0 var(--main-layout-gap);
	width: calc(var(--theme-site-logo-width) * 0.5);
	background-size: calc(var(--theme-site-logo-width) * 0.5) auto;
}
#p-logo .mw-wiki-logo {
	width: calc(var(--theme-site-logo-width) * 0.5);
	height: calc(var(--theme-site-logo-height) * 0.5);
}

div.mw-body {
	margin-top: 0;
}

#mw-head #p-search {
	background: var(--theme-navbar-search-background);
	padding: var(--main-box-padding);
	border-radius: var(--main-box-border-radius) 0 0 var(--main-box-border-radius);
	border-width: var(--theme-box-border-width) 0 var(--theme-box-border-width) var(--theme-box-border-width);
	border-color: var(--theme-box-border-color);
	border-style: var(--theme-box-border-style);
	top: -100px;
	right: 0;
	z-index: 50;
}

#mw-head,
#mw-panel,
.mw-body,
#footer,
#mw-page-base{
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

#mw-panel::before{
	left: 0;
	right: 0;
}
}/* screen and (max-width:900px) */

@media screen and (max-width: 720px){
:root{
	--main-layout-topbar-height: 35px; /* height of wiki.gg topbar */
}
/* reset */
div#p-namespaces, div#p-views, div#p-variants{
	top: 0;
}
div#mw-navigation div#mw-panel{
	font-size: 12px;
}

/* styles */
#mw-panel #p-logo + .portal .vector-menu-heading,
#mw-panel .portal .vector-menu-heading{
	font-size: 12px;
	padding: 8px 6px;
}
#mw-panel div.portal .vector-menu-heading::after,
#mw-panel .portal.collapsed .vector-menu-heading::after{
	border-width: 5px 4px 0;
	margin-top: 1px;
}
#mw-panel div.portal.expanded .vector-menu-heading::after,
#mw-panel div.portal:hover .vector-menu-heading::after {
	border-width: 0 4px 5px;
}
#mw-panel #p-logo + .portal{
	margin-left: calc( var(--main-layout-gap) - 6px );
}
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited,
div.vectorTabs li a,
div.vector-menu-dropdown .vector-menu-heading span {
	font-size: 12px;
	padding: 1px 8px;
}
.vectorTabs #ca-unwatch.icon a,
.vectorTabs #ca-watch.icon a,
.vectorTabs #ca-unwatch.icon a.loading,
.vectorTabs #ca-watch.icon a.loading {
	padding: 4px 8px;
}
}/* screen and (max-width:720px) */

@media screen and (max-width:600px) {
/* reset mw internal css */
#footer #footer-icons{
	float: none;
}
#footer #footer-info-copyright{
	padding-right: 0;
	padding-bottom: 40px;
	right: auto;
	left: 0;
}
#footer-info-copyright img{
	right: auto;
	left: 0;
}

div#p-logo{
	margin: auto;
	width: 100%;
}
#mw-panel{
	margin-top: 45px;
}
#mw-panel::before{
	transform: translateY(45px);
}
#mw-head #p-search {
	top: -95px;
	box-sizing: border-box;
	width: 100%;
	max-width: 20em;
	margin: 0;
	padding: var(--main-box-padding);
	box-shadow: none;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	border-radius: var(--main-box-border-radius);
	border-width: var(--theme-box-border-width);
}
div#simpleSearch{
	margin: auto;
	width: auto;
}

/* content nav to icons */
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited,
div.vectorTabs li a,
div.vector-menu-dropdown .vector-menu-heading span{
	width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 3px 6px;
	box-sizing: content-box;
}
div.vectorTabs li a::before,
div.vector-menu-dropdown .vector-menu-heading span::before {
	content: "";
	display: inline-block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	width: 20px;
	height: 0;
	border-bottom: 60px solid transparent;
	filter: drop-shadow(0 40px 0 var(--theme-navbar-tab-icon-color));
	margin: -40px 20px 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M4 2v16h4v-2H6V4h3.994v4H14v1h2V7.01L11 2z' /%3E%3Cpath d='M13.339 10a.641.641 0 0 0-.643.643v.418a3.536 3.536 0 0 0-1.064.44l-.291-.291a.64.64 0 0 0-.91 0l-.226.228a.641.641 0 0 0 0 .909l.293.293a3.536 3.536 0 0 0-.437 1.056h-.418A.641.641 0 0 0 9 14.34v.322c0 .356.286.643.643.643h.418a3.536 3.536 0 0 0 .44 1.064l-.296.297a.641.641 0 0 0 0 .91l.227.227a.642.642 0 0 0 .909 0l.3-.3a3.536 3.536 0 0 0 1.055.437v.418c0 .357.287.643.643.643h.322a.641.641 0 0 0 .643-.643v-.418a3.536 3.536 0 0 0 1.056-.436l.3.299a.642.642 0 0 0 .908 0l.228-.228a.641.641 0 0 0 0-.909l-.298-.299a3.536 3.536 0 0 0 .441-1.062h.418A.641.641 0 0 0 18 14.66v-.322a.641.641 0 0 0-.643-.643h-.418a3.536 3.536 0 0 0-.436-1.056l.293-.293a.641.641 0 0 0 0-.91l-.228-.227a.642.642 0 0 0-.909 0l-.292.292a3.536 3.536 0 0 0-1.063-.441v-.418A.641.641 0 0 0 13.66 10zm.161 2.5a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2z' /%3E%3C/svg%3E%0A");
}
div.vectorTabs li:hover a::before,
div.vector-menu-dropdown:hover .vector-menu-heading span::before,
div.vector-menu-dropdown.open .vector-menu-heading span::before{
	filter: drop-shadow(0 40px 0 var(--theme-navbar-tab-icon-color-hover));
}
.vectorTabs li.new a::before,
.vectorTabs li.new:hover a::before{
	filter: drop-shadow(0 40px 0 var(--theme-navbar-tab-icon-color-redlink));
}
#ca-edit a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='m12.879 2.165-9.465 9.471 4.95 4.95 9.465-9.471zm0 2.829L15 7.115l-6.636 6.643-2.121-2.122zM6.95 18H2v-4.95z'/%3E%3C/svg%3E%0A");
}
#ca-view a::before,
#ca-view-foreign a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M9.92 4.91c-2.78 0-5.42 1.77-7.53 4.95l-.371.555.371.555c2.12 3.17 4.76 4.95 7.53 4.95 2.78 0 5.42-1.77 7.53-4.95l.371-.555-.371-.555c-2.12-3.17-4.76-4.95-7.53-4.95zm0 2c1.75 0 3.6 1.19 5.34 3.5-1.74 2.31-3.59 3.5-5.34 3.5s-3.6-1.19-5.34-3.5c1.74-2.31 3.59-3.5 5.34-3.5z'/%3E%3Cpath d='M9.84 5.31C7.72 5.31 6 7.04 6 9.15c0 2.12 1.73 3.84 3.84 3.84 2.12 0 3.84-1.73 3.84-3.84 0-2.12-1.73-3.84-3.84-3.84zm0 1c1.58 0 2.84 1.27 2.84 2.84 0 1.58-1.27 2.84-2.84 2.84C8.26 11.99 7 10.72 7 9.15c0-1.58 1.27-2.84 2.84-2.84z'/%3E%3C/svg%3E");
}
#left-navigation li[id^='ca-nstab-'] a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M4 2v16h12V7.01L11 2zm2 2h3.994v4H14v8H6z'/%3E%3C/svg%3E%0A");
}
#ca-history a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 2a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z'/%3E%3Cpath d='M9.984 4.986A1 1 0 0 0 9 6v5h3a1 1 0 1 0 0-2h-1V6a1 1 0 0 0-1.016-1.014z'/%3E%3C/svg%3E%0A");
}
#ca-talk a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M5.391 15.575c.553 1.556-.098 2.537-.942 3.425 3.262-.731 3.243-2.134 3.77-3.425zm10.366-3.933c-.553 1.557.098 2.538.942 3.426-3.262-.732-3.242-2.134-3.769-3.426z'/%3E%3Cpath d='M7.768 7.146c-3.202 0-5.798 2.035-5.797 4.545 0 2.51 2.596 4.544 5.797 4.543 3.2 0 5.794-2.034 5.795-4.543 0-2.51-2.595-4.544-5.795-4.545zm-.022 2.247c2.01 0 3.64 1.034 3.639 2.308-.001 1.274-1.63 2.306-3.639 2.307-2.01 0-3.64-1.033-3.64-2.307-.001-1.275 1.629-2.309 3.64-2.308z'/%3E%3Cpath d='M12.473 2.727c-3.604 0-6.525 2.149-6.526 4.8l2.104-.017c.001-1.392 1.974-2.52 4.406-2.52 2.433 0 4.407 1.128 4.408 2.52 0 1.393-1.973 2.522-4.408 2.521l.016 2.3c3.603-.001 6.524-2.152 6.523-4.804 0-2.65-2.92-4.8-6.523-4.8z'/%3E%3C/svg%3E%0A");
}
#t-contributions a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M4 5v3.272A2 2 0 0 1 5 8a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-1-.27V15h10V5H4z'/%3E%3Ccircle cx='15.001' cy='10' r='2'/%3E%3Ccircle cx='9' cy='4' r='2'/%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3C/svg%3E");
}
#ca-addsection a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='2' height='12' x='9' y='4' ry='0'/%3E%3Crect width='12' height='2' x='4' y='9' ry='0'/%3E%3C/svg%3E%0A");
}
#ca-viewsource a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 4h3v1H5v11h1v1H3zm14 0v13h-3v-1h1V5h-1V4zM6.5 4H9v1H8v11h1v1H6.5zm7 0v13H11v-1h1V5h-1V4z'/%3E%3C/svg%3E%0A");
}
#p-variants .vector-menu-heading span::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 0 48 48' width='20'%3E%3Cpath d='M0 0h48v48h-48z' fill='none'/%3E%3Cpath d='M23.99 4c-11.05 0-19.99 8.95-19.99 20s8.94 20 19.99 20c11.05 0 20.01-8.95 20.01-20s-8.96-20-20.01-20zm13.85 12h-5.9c-.65-2.5-1.56-4.9-2.76-7.12 3.68 1.26 6.74 3.81 8.66 7.12zm-13.84-7.93c1.67 2.4 2.97 5.07 3.82 7.93h-7.64c.85-2.86 2.15-5.53 3.82-7.93zm-15.48 19.93c-.33-1.28-.52-2.62-.52-4s.19-2.72.52-4h6.75c-.16 1.31-.27 2.64-.27 4 0 1.36.11 2.69.28 4h-6.76zm1.63 4h5.9c.65 2.5 1.56 4.9 2.76 7.13-3.68-1.26-6.74-3.82-8.66-7.13zm5.9-16h-5.9c1.92-3.31 4.98-5.87 8.66-7.13-1.2 2.23-2.11 4.63-2.76 7.13zm7.95 23.93c-1.66-2.4-2.96-5.07-3.82-7.93h7.64c-.86 2.86-2.16 5.53-3.82 7.93zm4.68-11.93h-9.36c-.19-1.31-.32-2.64-.32-4 0-1.36.13-2.69.32-4h9.36c.19 1.31.32 2.64.32 4 0 1.36-.13 2.69-.32 4zm.51 11.12c1.2-2.23 2.11-4.62 2.76-7.12h5.9c-1.93 3.31-4.99 5.86-8.66 7.12zm3.53-11.12c.16-1.31.28-2.64.28-4 0-1.36-.11-2.69-.28-4h6.75c.33 1.28.53 2.62.53 4s-.19 2.72-.53 4h-6.75z'/%3E%3C/svg%3E");
}
#p-cactions .vector-menu-heading span::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 0 24 24' width='20'%3E%3Cpath d='M14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6Z'/%3E%3Cpath d='M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z'/%3E%3Cpath d='M14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18Z'/%3E%3C/svg%3E");
}
/* Except watch/unwatch star. It does not work under chrome. */
div.vectorTabs li.mw-watchlink a::before{
	border: 0;
	filter: none;
	margin: 0 20px 0 0;
}


}/* screen and (max-width:600px) */

@media screen and (max-width:450px) {
#mw-panel{
	padding-left: 6px;
	padding-right: 6px;
}
#mw-panel div.portal .vector-menu-heading::after{
	display: none;
}
#mw-panel #p-navigation #p-navigation-label,
#mw-panel #p-lang #p-lang-label{
	width: 18px;
	display: block;
	white-space: nowrap;
	padding: 8px;
}
#p-navigation-label::before,
#p-lang-label::before{
	content: "";
	display: inline-block;
	vertical-align: bottom;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	width: 18px;
	height: 0;
	border-bottom: 60px solid transparent;
	position: relative;
	filter: drop-shadow(0 42px 0 var(--theme-text-color));
	margin: -42px 20px 0 0;
}
#p-navigation-label::before{
	background-image: url("data:image/svg+xml,%3Csvg height='18' viewBox='0 0 200 200' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75,20H40A20.06,20.06,0,0,0,20,40V75A20.06,20.06,0,0,0,40,95H75A20.06,20.06,0,0,0,95,75V40A20.06,20.06,0,0,0,75,20Zm0,55H40V40H75Zm95-27.5a10,10,0,0,0-10,10V75H125V40h17.5a10,10,0,0,0,0-20H125a20.06,20.06,0,0,0-20,20V75a20.06,20.06,0,0,0,20,20h35a20.06,20.06,0,0,0,20-20V57.5A10,10,0,0,0,170,47.5ZM75,105H40a20.06,20.06,0,0,0-20,20v35a20.06,20.06,0,0,0,20,20H75a20.06,20.06,0,0,0,20-20V125A20.06,20.06,0,0,0,75,105Zm0,55H40V125H75Zm85-55H125a20.06,20.06,0,0,0-20,20v35a20.06,20.06,0,0,0,20,20h35a20.06,20.06,0,0,0,20-20V125A20.06,20.06,0,0,0,160,105Zm0,55H125V125h35Z'/%3E%3C/svg%3E");
}
#p-lang-label::before{
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 52 52' width='18' height='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39,18.67H35.42l-4.2,11.12A29,29,0,0,1,20.6,24.91a28.76,28.76,0,0,0,7.11-14.49h5.21a2,2,0,0,0,0-4H19.67V2a2,2,0,1,0-4,0V6.42H2.41a2,2,0,0,0,0,4H7.63a28.73,28.73,0,0,0,7.1,14.49A29.51,29.51,0,0,1,3.27,30a2,2,0,0,0,.43,4,1.61,1.61,0,0,0,.44-.05,32.56,32.56,0,0,0,13.53-6.25,32,32,0,0,0,12.13,5.9L22.83,52H28l2.7-7.76H43.64L46.37,52h5.22Zm-15.3-8.25a23.76,23.76,0,0,1-6,11.86,23.71,23.71,0,0,1-6-11.86Zm8.68,29.15,4.83-13.83L42,39.57Z'/%3E%3C/svg%3E");
}
#mw-navigation #mw-panel #p-lang{
	margin-left: auto;
	display: flex;
	justify-content: flex-end;
}
#mw-panel #p-lang .body{
	left: auto;
	right: 0;
}

div#simpleSearch{
	width: 90%;
}
}/* screen and (max-width:450px) */

/***** Notification *****/
.mw-notification {
	color: var(--theme-text-color);
	border: 1px solid;
	background: var(--theme-box-background);
	border-color: var(--theme-box-border-color);
	box-shadow: var(--theme-box-shadow);
	border-radius: var(--main-box-border-radius);
	transform: none;
}
/* postedit notification */
.postedit-container{
	top: 4em;
}

/* Notification boxes on the right, e.g. after patrolling an edit */
.mw-notification.mw-notification-type-error {
	color: var(--theme-notice-red-text-color);
	border-color: var(--theme-notice-red-text-color);
}
.mw-notification.mw-notification-type-warn {
	color: var(--theme-notice-orange-text-color);
	border-color: var(--theme-notice-orange-text-color);
}

/*
css for floating-scroll v3.2.0
https://amphiluke.github.io/floating-scroll/
(c) 2022 Amphiluke
*/
.fl-scrolls{overflow:auto;position:fixed}.fl-scrolls div{overflow:hidden;pointer-events:none}.fl-scrolls div:before{content:"\A0"}.fl-scrolls,.fl-scrolls div{font-size:1px;line-height:0;margin:0;padding:0}.fl-scrolls-hidden div:before{content:"\A0\A0"}.fl-scrolls-viewport{position:relative}.fl-scrolls-body{overflow:auto}.fl-scrolls-viewport .fl-scrolls{position:absolute}.fl-scrolls-hoverable .fl-scrolls{opacity:0;transition:opacity .5s .3s}.fl-scrolls-hoverable:hover .fl-scrolls{opacity:1}.fl-scrolls:not([data-orientation]),.fl-scrolls[data-orientation=horizontal]{bottom:0;min-height:17px}.fl-scrolls:not([data-orientation]) div,.fl-scrolls[data-orientation=horizontal] div{height:1px}.fl-scrolls-hidden.fl-scrolls:not([data-orientation]),.fl-scrolls-hidden.fl-scrolls[data-orientation=horizontal]{bottom:9999px}.fl-scrolls-viewport .fl-scrolls:not([data-orientation]),.fl-scrolls-viewport .fl-scrolls[data-orientation=horizontal]{left:0}.fl-scrolls[data-orientation=vertical]{right:0;min-width:17px}.fl-scrolls[data-orientation=vertical] div{width:1px}.fl-scrolls-hidden.fl-scrolls[data-orientation=vertical]{right:9999px}.fl-scrolls-viewport .fl-scrolls[data-orientation=vertical]{top:0}
/*css for wide table */
.table-wide {
	clear: both;
	position: relative;
}
.mw-parser-output > .table-width{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.table-wide-inner {
	overflow-x: auto;
}
.table-wide-inner > table {
	margin: 0 !important;
}
.table-wide:before {
	box-shadow: inset -15px 0 20px -15px var(--theme-wide-table-shadow-color);
	content: "";
	display: block;
	width: 20px;
	height: 100%;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 2;
}


/***********************************************************************************************************
 * Common styles for "real" wiki page content.
 ***********************************************************************************************************/


/* remove external link icon. */
.mw-parser-output a.external,
.link-https{
	padding-right: 0;
	background: none;
}

/** ToC **/
.toc {
	border-radius: 4px;
	border: 1px solid var(--theme-border-color);
	background: var(--theme-box-background);
	margin: 1em auto 1em 0;
	padding: 0;
	font-size: 1em;
	min-width: 12em;
}
.toc .toctitle h2{
	margin: 0;
	display: flex;
	align-items: center;
	padding: 0 0.5em;
}
.toc .toctitle h2::before{
	content: '';
	display: block;
	width: 12px;
	height: 0;
	border-bottom: 52px solid transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	filter: drop-shadow(0 40px 0 var(--theme-text-color));
	margin: -40px 6px 0 0;
}
.toc .toctitle{
	position: relative;
	overflow: hidden;
	text-align: left;
}
.toc .toctogglelabel{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	box-sizing: border-box;
	padding-right: 1em;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after{
	display: none;
}
.toc .toctogglelabel::after{
	display: none;
}
.toc .toctogglelabel::before{
	content: "";
	display: inline-block;
	background: none;
	position: relative;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--theme-widget-toc-arrow-color) transparent;
	border-width: 0 5px 6px 5px;
	vertical-align: middle;
	flex: 0 0 auto;
}
.toc .toctogglelabel:hover::before{
	border-color: var(--theme-widget-toc-arrow-color-hover) transparent;
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before{
	border-width: 6px 5px 0 5px;
}
/* Won't change ToC box width when toggle show/hide. */
.toctogglecheckbox:checked ~ ul{
	overflow: hidden;
	display: block;
	height: 0;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
}
/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl.toc ul ul{
	margin: 0 0 0 1em;
}
.toc a{
	color: var(--theme-text-color);
}
.toc .tocnumber{
	color: var(--theme-text-color-note);
}
.toc .tocnumber::after{
	content: '.';
}
.toc .toctitle,
.toc > ul{
	padding: 0.5em;
}
.toc > ul{
	border-top: 1px solid var(--theme-border-color);
	margin: 0;
}
.toc > ul a{
	display: block;
	padding: 2px 0.5em;
	border-radius: 4px;
	transition: background 0.1s;
}
.toc > ul a:hover {
	text-decoration: none;
	background: var(--theme-widget-toc-item-hover-background);
}
.toc h2{
	font-weight: normal;
}
.toc li{
	margin: 0;
}

/***********************************************************************************************************
 * common style for content box
 ***********************************************************************************************************/

.fullwidth, .full-width{
	width: 100%;
}
.nowrap {
	white-space: nowrap;
}


/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
	text-align: center;
}

.alignleft,
.align-left{
	text-align: left;
}

.alignright,
.align-right{
	text-align: right;
}

/* clear fix for float block */
.clearfix {
	*zoom: 1;
}
.clearfix::before,
.clearfix::after {
	content: " ";
	display: table;
}
.clearfix::after {
	clear: both;
}


/* Thumbnail background color */
html .thumbimage {
	background-color: #4d3a32;
}

/** gallery **/
.thumbinner{
	border-radius: 5px;
}
li.gallerybox div.thumb{
	border-radius: 5px;
}
.gallery *{
	box-sizing: initial;
}
.mw-gallery-traditional .thumb{
	display: flex;
}
.mw-gallery-traditional .thumb a{
	display: block;
}

/***********************************************************************************************************
 * css for specific pages
 ***********************************************************************************************************/

/*********** Main page  START ****************/

/* Hide page title on main page */
body.rootpage-One_Lonely_Outpost_Wiki.action-view h1.firstHeading,
body.rootpage-One_Lonely_Outpost_Wiki.action-view .mw-body .mw-indicators,
body.rootpage-One_Lonely_Outpost_Wiki.action-view #mw-content-text::before{
	display: none;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .footer {
	text-align: right;
	margin-top: 1em;
	font-size: 12px;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box{
	border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
	border-radius: var(--main-box-border-radius);
	padding: 1.5em;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box h2 {
	margin-top: 0;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box p{
	margin: 0;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap{
	display: flex;
	gap: 12px;
	align-items: stretch;
	justify-content: stretch;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap .l,
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap .r{
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
	justify-content: stretch;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap .l{
	flex: 0 0 500px;
	overflow: hidden;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap .r{
	flex: 2 2 auto;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box{
	flex: 1 0 auto;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.header{
	font-size: 12px;
	text-align: center;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.header h2 em{
	display: block;
	font-style: normal;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.header .links ul{
	margin: 1em auto auto;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.header .links li{
	list-style: none;
	display: inline-block;
	margin: 0 0.5em;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.about .video,
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.about .pic{
	margin-top: 0.5em;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.about .pic a,
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.about .pic img{
	display: block;
	max-width: 100%;
	height: auto;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature > div{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1.5em;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature > div > div{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature ul{
	columns: 2;
	margin: 0 0 0 1em;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature div.pic{
	margin-top: 0.5em;
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature div.pic img{
	width: 100% !important;
	height: auto !important;
}

body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.gallery ul{
	margin: 1em 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5em;
	list-style: none;
}
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.gallery ul a,
body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.gallery ul img{
	display: block;
	width: 100% !important;
	height: auto !important;
}

@media screen and (max-width: 1600px) and (min-width: 1025px), screen and (max-width:820px){
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature > div{
		grid-template-columns: 1fr 1fr;
	}
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature div.pic{
		display: none;
	}
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.gallery ul{
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 1024px){
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap .r {
		margin-top: 12px;
	}
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent  .content-wrap {
		display: block;
	}
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.header h2 em{
		display: inline-block;
	}
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.about .pic{
		display: none;
	}
}/* screen and (max-width: 1024px) */

@media screen and (max-width: 480px){
	body.rootpage-One_Lonely_Outpost_Wiki.action-view #bodyContent .box.feature > div{
		grid-template-columns: 1fr;
	}
}

/*********** Main page  END ****************/

/***********************************************************************************************************
 * css for specific templates
 ***********************************************************************************************************/

/*********** Omninac infobox style  START ****************/

.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default.pi-type-omninac {
  background-color: #212121;
  color: #ffffff;
  border: 5px solid #f29b07;
}
.portable-infobox.pi-type-omninac .pi-data-label.pi-secondary-font {
  color: #ffffff;
}
.portable-infobox.pi-type-omninac .pi-item.pi-item-spacing.pi-title {
  color: #ffffff;
  background-color: #12c7c7;
  font-weight: bold;
  text-align: center;
  border-radius: 0px;
  margin: 5px;
}
.portable-infobox.pi-type-omninac .pi-item.pi-media.pi-image {
  background: url(/images/e/e3/Omninac_Background.png) no-repeat center;
  height: 108px;
}
.portable-infobox.pi-type-omninac .pi-image-thumbnail {
  width: auto;
  image-rendering: pixelated;
  margin-top: 1.5em;
  height: 64px;
}

/*********** Omninac infobox style  END ****************/

/*********** Generic infobox style  START ****************/

.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default.pi-type-generic {
  background-color: #212121;
  color: #ffffff;
  border: 3px solid #f29b07;
}
.portable-infobox.pi-type-generic .pi-data-label.pi-secondary-font {
  color: #ffffff;
}
.portable-infobox.pi-type-generic .pi-item.pi-item-spacing.pi-title {
  color: #ffffff;
  font-weight: bold;
  border-radius: 0px;
}
.portable-infobox.pi-type-generic .pi-image-thumbnail {
  width: auto;
  image-rendering: pixelated;
  height: 64px;
}

/*********** Generic infobox style  END ****************/

/*********** Recipe table style  START ****************/

.recipetable {
  background-color: #04212a;
  width: 30em;
  border-radius: 5px;
  margin: 1em;
  padding: 1em;
  color: #fff;
}
.recipeitem {
  background-color: #0a2f3a;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 5px;
  margin: 5px;
}

/*********** Recipe table style  END ****************/

/** This commented section is to remove files used exclusively in css from the Special:UnusedFiles list **/
/* [[File:Site-logo.png]] */
/* [[File:Site-background.jpg]] */
/* [[File:Site-favicon.ico]] */
/* [[File:Omninac Background.png]] */
Retrieved from "https://onelonelyoutpost.wiki.gg/index.php?title=MediaWiki:Common.css&oldid=2300"