MediaWiki:Vector.css

From Primal Fear 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 placed here will affect users of the Vector skin */
/* This is largely based on ARK Wiki's (ark.wiki.gg) CSS, but may fall behind as templates may be out of date */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* #region Shared variables */
:root {
    /* wiki.gg */
    --netbar-height: 35px;
    /* Logo */
    --wiki-logo-height: 160px;
    --wiki-logo-width: 160px;
    /* Body */
    --page-background-image: url(https://primalfear.wiki.gg/images/8/80/Site-background.jpg) /*[[File:Site-background.jpg]]*/;
    /* Grid layout */
    --layout-content-top-offset: 40px;
    --layout-sidespace--left: 2px;
    --layout-sidespace--right: 18px;
    --layout-column-gap: 32px;
    /* Sidebar (mw-panel) */
    --sidebar-width: 168px;
    --sidebar-to-content-margin: 0;
    --sidebar-toggle-icon--open: url("https://commons.wiki.gg/images/4/42/Sidebar_toggle_open_black.svg");
    --sidebar-toggle-icon--collapsed: url("https://commons.wiki.gg/images/d/d4/Sidebar_toggle_collapsed_black.svg");
    /* Page content */
    --content-horizontal-margin: 1.5em;
    --content-body-top-margin: calc(var(--content-navigation-top-offset) + var(--content-navigation-height) - 10px);
    /* Page navigation (mw-head) */
    --content-navigation-height: 50px;
    --content-navigation-top-offset: 30px;
    --content-navigation-margin: 0 2em 0 var(--content-horizontal-margin);
}
@media screen and (max-width: 1330px) {
    :root {
        /* Grid layout */
        --layout-sidespace--left: 0px;
        --layout-sidespace--right: 16px;
        --layout-column-gap: 16px;
    }
}
@media screen and (max-width: 720px) {
    :root {
        /* wiki.gg */
        --netbar-height: 90px;
        /* Grid layout */
        --layout-content-top-offset: 150px;
        --layout-sidespace--left: 0;
        --layout-sidespace--right: 0;
        --layout-column-gap: 0;
        /* Search */
        --search-height: 35px;
        --search-spacing--bottom: 6px;
        /* Sidebar / toolbar */
        --toolbar-height: 38px;
        --sidebar-to-content-margin: 0;
        --sidebar-toggle-icon--open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m13.002 6.001-5 5.001-5-5.001z' fill='%23fff' /%3E%3C/svg%3E%0A");
        --sidebar-toggle-icon--collapsed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m6.001 2.998 5.001 5-5.001 5z' fill='%23fff'/%3E%3C/svg%3E%0A");
        /* Page content */
        --content-horizontal-margin: 0.6em;
        --content-top-margin: calc(var(--toolbar-height) + 5px);
        --content-body-top-margin: 85px;
        /* Page navigation (mw-head) */
        --content-navigation-top-offset: calc(var(--search-height) + 26px);
        --content-navigation-margin: calc(var(--search-height) + var(--search-spacing--bottom)) 0.5em 0;
    }
}
/* #endregion */


/* #region Theme variables */
/* Dark */
:root {
    --theme-accent-color: #2f79c8;
    --theme-accent-color--rgb: 13, 111, 112;
    --page-background-color: #0b1212;
    --page-background-color--rgb: 11, 18, 18;
    --content-background-color: #21272d;
    --content-background-color--rgb: 33, 39, 45;
    --content-text-color: #ebebeb;
    --content-header-color: #fff;
    --content-text-link-color: #57a0e1;
    --content-border-color: #346380;
    --content-border-color--rgb: 101, 138, 25;
    --content-default-link-color: #8ccef7;
    --content-default-link-color--rgb: 154, 205, 50;
    --topmenu-background-color--rgb: 49,50,50;
    --topmenu-border-color: #3c3e40;
    --code-background-color: #202020;
    --code-border-color: #525354;
    /* Assets */
    --list-bulletpoint-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22%3E %3Ccircle cx=%222.5%22 cy=%229%22 r=%222.5%22 fill=%22%23fff%22/%3E %3C/svg%3E");
    /* Sidebar */
    --sidenav-header-background: #e5e5e5;
    --sidenav-header-text-color: #202020;
    --sidenav-background-color: #3d3e3d50;
    /* Table of contents */
    --toc-background-color: #424442;
    --toc-number-color: #cecece;
    /* Tabbers */
    --tabber-shadow-color: var(--ark-arkitex-border-color);
    --tabber-shadow-active-color: var(--sidenav-header-text-color);
    --tabber-shadow-hover-color: #aa4141;
    --tabber-background-hover-color: #aa4141;
    --tabber-text-hover-color: #000;
    --tabber-background-active-color: #ad3536;
    /* Tables */
    --table-background-color: var(--content-background-color);
    --table-border-color: #3d555e;
    --table-heading-background-color: #2a454f;
    /* Frontpage */
    --fp-heading-text-color: var(--content-text-color);
    --fp-heading-border-color: #749ca4;
    --fp-box-background-color: #2e3640;
    --fp-box-border-color: #436186;
    /* OOUI buttons */
    --ooui-button-text-color--primary: #000;
    --ooui-button-text-color--secondary: var(--content-text-link-color);
    --ooui-button-background-color--primary: var(--content-default-link-color);
    --ooui-button-background-color--primary-hover: #98c63b;
    /* Ambox */
    --ark-ambox-background-color: #0000004D;
    /* Template:Navbox */
    --ark-navbox-title-text-color: var(--content-text-color);
    --ark-navbox-title-link-color: var(--content-default-link-color);
    --ark-navbox-title-background-color: var(--ark-arkitex-background-color);
    --ark-navboxgroup-title-background-color: #2c2c2c;
    --ark-navboxgroup-title-text-color: var(--content-text-color);
    --ark-navboxgroup-title-border-color: #03bafc;
    /* Arkitexure */
	--ark-arkitex-background-color: #535353;
    --ark-arkitex-border-color: var(--sidenav-header-background);
    --ark-arkitex-accent-color: lightgrey;
    --ark-arkitex-left-color: #3d3e3d;
    --ark-arkitex-right-color: #232821;
    /* PaintRegion */
    --ark-paintregion-background-color: #756f6f;
    --ark-paintregion-border-color: var(--content-border-color);
    /* Template:DossierText & Template:Quote */
    --ark-cite-quote-color: #2d74bed9;
    --ark-dossier-background-color: #6e92c036;
    --ark-dossier-border-color: #2d74bea6;
    --ark-dossier-text-color: #88E9FF;
    --ark-dossiernote-background-color: #1a3b4d;
    --ark-dossiernote-border-color: #2d74be;
    /* Module:LootTable */
    --ark-loottable-background-color: #021e289a;
    --ark-loottable-header-color: #0b58599a;
    /* Difficulty level colors */
    --ark-difficulty-gamma: #4edb17;
    --ark-difficulty-beta: #19cff9;
    --ark-difficulty-alpha: #f76450;
    --ark-difficulty-none: #BCEEFA;
    /* Template:Mission */
    --ark-mission-background-color: #003E4C;
    --ark-mission-text-color: #BCEEFA;
    /* Template:HoverNote */
    --ark-hovertext-text-color: #4FB5FF;
    /* Kibble tables */
    --ark-kibbletable-border-color: #2d74bea6;
    --ark-kibbletable-background-color: #6e92c036;
}
/* #endregion */


/* #region Vector grid layout */
html, body {
    height: auto;
    min-height: 100vh;
}
body {
    box-sizing: border-box;
    display: grid;
    grid-template-columns:
        [body-left] var(--layout-sidespace--left)
        [aside-left] var(--sidebar-width)
        [aside-right content-left] minmax(0,1fr)
        [content-right] var(--layout-sidespace--right)
        [body-right];
    grid-template-rows:
        [body-start] var(--netbar-height)
        [page-start logo-start] var(--layout-content-top-offset)
        [nav-start content-start] auto
        [content-end footer-start] 0fr
        [footer-end] auto
        [page-end] 0fr
        [body-end];
    column-gap: var(--layout-column-gap);
}
body > .content-wrapper, #mw-navigation {
    display: contents;
}
#mw-page-base {
    grid-column: content-left / content-right;
    grid-row: nav-start / footer-end;
    height: 100%;
}
#mw-head-base {
    grid-column: content-left/content-right;
    grid-row: page-start/nav-start;
	height: var(--wiki-logo-height);
    margin: 0;
}
#mw-head {
    grid-column: content-left/content-right;
    grid-row: nav-start/content-start;
    position: relative;
    top: var(--content-navigation-top-offset);
    height: max-content;
	z-index: 10;
    box-sizing: border-box;
    display: block;
    padding: var(--content-navigation-margin)
}
#mw-head #left-navigation,
#mw-head #right-navigation {
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: flex-end;
}
#mw-head #left-navigation {
    justify-content: flex-start;
}
#mw-head #right-navigation {
    justify-content: flex-end;
}
#mw-panel {
    grid-column: aside-left/aside-right;
    grid-row: nav-start/page-end;
    width: unset;
    position: relative;
	top: var(--sidebar-top-offset);
	z-index: 11;
}
div#content {
    grid-column: content-left/content-right;
    grid-row: nav-start/content-end;
    margin: 0;
    margin-top: var(--content-top-margin);
}
.content-body > main {
    display: grid;
    grid-template-columns:
        [content-left heading-left] minmax(0,1fr)
        [heading-right indicator-left] minmax(0,auto)
        [indicator-right interwikis-left] minmax(0,auto)
        [interwikis-right content-right];
    grid-template-rows:
        [sitenotice] auto
        [before-heading] auto
        [heading-start] auto
        [heading-end content-start] auto
        [content-end];
}
#siteNotice {
    grid-row: sitenotice;
    grid-column: content-left / content-right;
}
.mw-body .mw-indicators {
    grid-column: indicator-left / indicator-right;
    grid-row: heading-start / heading-end;
    display: flex;
    align-items: center;
    gap: 4px;
}
#p-lang-btn {
    grid-column: interwikis-left / interwikis-right;
    grid-row: heading-start / heading-end;
}
#firstHeading {
    grid-column: heading-left / heading-right;
    grid-row: heading-start / heading-end;
}
#bodyContent {
    grid-column: content-left / content-right;
    grid-row: content-start / content-end;
    display: flex;
    flex-direction: column;
}
#footer {
    grid-column: content-left/content-right;
    grid-row: footer-start/footer-end;
}
#wikigg-footer {
    grid-column: body-left/body-right;
    grid-row: page-end/body-end;
}

/* #region 1290px */
@media screen and (max-width: 1290px) {
    .mw-body .mw-indicators {
        grid-column: heading-left / heading-right;
        grid-row: before-heading;
    }
    #firstHeading {
        grid-column: heading-left / content-right;
    }
}
/* #endregion */
/* #region 720px */
@media screen and (max-width: 720px) {
    body {
        grid-template-columns:
            [body-left aside-left content-left] auto
            [aside-right content-right body-right];
    }
    .mw-body #p-lang-btn {
        grid-row: before-heading;
        grid-column: indicator-left / interwikis-right;
    }
    .mw-body .mw-indicators + #p-lang-btn {
        grid-column: interwikis-left / interwikis-right;
    }
    #mw-head div#left-navigation,
    #mw-head div#right-navigation {
        position: static;
        box-sizing: border-box;
        padding: 0 0.5em;
    }
}
/* #endregion */
/* #endregion */

@media screen and (max-width: 720px) {
    #firstHeading {
        text-align: center;
    }
    #mw-content-text {
        padding-top: 1em;
    }
}

/* #region Vector skinning */
body {
	background: var(--page-background-image) no-repeat var(--page-background-color); 
	background-size: cover;
	background-attachment: fixed;
}
/* #region Typography */
body {
    font-family: Inter, Helvetica, Arial, sans-serif
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
    font-family: Inter, linux libertine, georgia, times, serif;
    letter-spacing: -0.6px;
}
/* #endregion */
/* #region Push down content area to make space for the frame border */
#mw-page-base {
	background: transparent;
}
/* #endregion */
/* #region Content area (& hex, frame border) */
div#content {
	position: relative;
	background-color: rgba(var(--content-background-color--rgb),0.96);
	color: var(--content-text-color);
	border: 1px solid #080808;
    box-shadow: 25px 20px 16px #0009, -20px 20px 17px #0009;
    min-height: 600px;
    border-color: #080808;
    border-image-slice: 630 600 5 600;
    border-image-width: 300px;
    border-image-outset: 15px;
    border-image-repeat: stretch;
    border-image-source: url(https://ark.wiki.gg/images/f/fd/Border_frame.png);
}
.content-body { padding: var(--content-body-top-margin) 5px 0 5px; }
@media screen and (max-width: 720px) {
    div#content {
        box-shadow: 0 10px 12px #0008;
    }
}
/* #endregion */
/* #region Footer */
#footer {
	margin: 0 0 2em 0;
	background-color: rgba(var(--content-background-color--rgb), 0.8);
	border-radius: 2px;
}
#footer ul li {
    color: var(--content-text-color);
}
@media screen and (max-width: 720px) {
    #footer {
        margin: 0;
        padding: 2em 0.75em 1em;
    }
}
/* #endregion */

/* #region Links */
a, a:visited,
div#footer a,
div#content a.extiw, div#content a.extiw:visited,
div#content a.external, div#content a.external:visited,
#mw-indicator-mw-helplink a,
.pseudo-link,
.jslink,
label.toctogglelabel {
	color: var(--content-text-link-color);
}
.jslink:hover {
    text-decoration: underline;
    cursor: pointer;
}
div#content a.new {
	color: #E51616;
}
/* #endregion */
/* #region Headings */
h1, h2, h3, h4, h5, h6 { color: var(--content-header-color); }
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4 {
  font-weight: 600;
}
.mw-body-content h2 {
  font-size: 24px;
  margin: 18px 0 10px;
  padding: 4px 0;
}
.mw-body-content h3 {
  font-size: 17px;
  margin: 8px 0 6px;
}
.mw-body-content h4 {
  font-size: 16px;
  margin: 6px 0 4px;
}

#firstHeading {
    font-size: 2.2em;
    /* Break words to prevent overflow. Vector doesn't do that by default. */
    overflow-wrap: break-word;
    word-break: break-word;
}
@media screen and (max-width: 970px) {
    #firstHeading {
        font-size: 2em;
    }
}
/* #endregion */

/* #region Sidebar */
div#mw-panel div.portal {
	background: var(--sidenav-background-color);
}
#mw-panel #p-logo + .portal {
    margin-top: 0;
}
#mw-panel #p-logo + .portal .vector-menu-heading {
    display: block;
    margin-top: 0;
}
#mw-navigation #mw-panel > div .vector-menu-heading {
    background-color: var(--sidenav-header-background);
    color: var(--sidenav-header-text-color);
    border-radius: 2px;
    margin: 0.5em 0.5em 0;
}
#mw-panel .portal .body {
    background-image: none;
}
div#mw-panel div.portal .vector-menu-heading,
#mw-panel.collapsible-nav .portal .vector-menu-heading a,
#mw-panel.collapsible-nav .portal .vector-menu-heading a:visited,
#mw-panel.collapsible-nav div.portal .vector-menu-heading a,
#mw-panel.collapsible-nav div.portal .vector-menu-heading a:visited,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading a,
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading a:visited {
	color: #ffffff;
	font-weight: bold;
}
#mw-panel .portal .vector-menu-heading {
	background-image: var(--sidebar-toggle-icon--open);
	background-position: left;
	background-repeat: no-repeat;
	background-size: 16px;
	padding-left: 1.5em;
	cursor: pointer;
    color: var(--content-header-color);
}
#mw-panel .portal.collapsed .vector-menu-heading {
	background-image: var(--sidebar-toggle-icon--collapsed);
}
div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:link,
div#mw-panel div.portal div.body ul li a:visited {
	color: #ffffff;
	font-weight: bold;
	text-shadow: -2px -2px 0px #0007, 0 0 1px #000;
}
div#mw-panel div.portal div.body ul li a:hover {
    color: var(--content-text-link-color);
    text-decoration: none;
}
/* #endregion */
/* #region Content navigation head */
.vectorTabs,
.vectorTabs ul,
.vectorTabs li,
.vectorTabs li.selected,
.vectorTabs span,
#mw-head .vectorMenu .vector-menu-heading,
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
	background: none;
}
.vectorMenu .vector-menu-heading span,
.vectorTabs li a ,
.vectorMenu .mw-list-item a {
	color: var(--content-text-color);
	text-transform: uppercase;
	text-decoration: none;
}
.vectorTabs li { position:relative; }
.vectorMenu:hover .vector-menu-heading span,
.vectorTabs li a:hover,
.vectorTabs li.selected a,
.vectorTabs li.selected a:visited,
.vectorMenu .mw-list-item a:hover,
.vectorMenu .mw-list-item.selected a,
.vectorMenu .mw-list-item.selected a:hover { 
    color: var(--content-default-link-color); 
}
.vectorTabs li:not(:last-child)::after {
	content: unset;
}

@keyframes tabHover {
	from {
		width: 0%;	
	}
	to {
		width: 95%;
	}
}
.vectorTabs li:hover::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	animation-duration: 1s;
	animation-name: tabHover;
	animation-fill-mode: forwards;
	border-bottom: 3px solid #228083;
}
.vectorTabs li.selected:hover::before {
	border-color: #9acd32;
}
.vectorMenu .menu,
.vector-menu-dropdown .vector-menu-content {
	background-color: rgba(var(--topmenu-background-color--rgb), .95);
	border-color: var(--topmenu-border-color);
    top: 100%;
}
.vectorMenu li a { color: var(--content-default-link-color); }
.vectorMenu .vector-menu-heading span:after,
.vector-menu-dropdown .vector-menu-heading:after {
	filter: invert(1);
}
/* #endregion */

/* #region Narrow width tweaks */
@media screen and (max-width:720px) {
	div#mw-navigation div#mw-panel {
    	border: 1px solid #7FE7FF;
    	border-left: 0;
        border-right: 0;
    	background-color: rgba(4,36,48,0.95);
    	box-shadow: inset 0 0 10px rgba(0,0,0,0.75);
	}
}
/* #endregion */

/* #region Responsive grid layout */
/* #region Body */
.mw-body {
    padding: 1.25em var(--content-horizontal-margin) 1.5em;
}
#mw-panel .portal {
    margin-left: 0;
    margin-right: 0;
}
/* #endregion */
/* #region Article title area (indicators, language switcher) */
#firstHeading {
    margin-bottom: 2px;
    border-bottom: none; /* Moved onto #mw-content-text, see below */
}
  
/* Border below the title heading (as in this setup #firstHeading does not span for the entire length) */
#mw-content-text {
    border-top: 1px solid #a2a9b1;
    padding-top: 6px;
}
#contentSub:empty,
#contentSub2:empty {
    display: none;
}
/* Remove the title border from main page */
.rootpage-Primal_Fear #mw-content-text {
    border-top: none;
    padding-top: 0;
}

/* #endregion */
/* #region Toolbar (720px) */
@media screen and (max-width: 720px) {
    #p-logo {
        position: absolute;
        top: calc(var(--wiki-logo-height) * -1);
        left: calc(50% - var(--wiki-logo-width) / 2);
    }
    #mw-head #p-search {
        position: absolute;
        top: var(--search-top-offset);
        right: 0;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        position: absolute;
        top: 0;
        left: unset;
        right: 0;
        padding: 0 2em;
        z-index: 50;
        height: var(--search-height);
    }
    #p-search #searchform {
        margin: 0;
    }
    div#mw-navigation div#mw-panel {
        box-sizing: border-box;
        grid-column: aside-left/aside-right;
        grid-row: nav-start/content-end;
        display: flex;
        width: auto;
        height: var(--toolbar-height);
        overflow: visible;
        overflow-x: clip;
        margin-top: 0;
    }
    #mw-panel .portal, #mw-panel #p-logo + .portal {
        position: relative;
    }
    #mw-panel #p-logo + .portal .body, #mw-panel .portal .body {
        display: none;
        position: absolute;
        left: 0;
        top: calc(100% - 0.3em);
        z-index: 50;
        width: max-content;
        border-top: 0;
        min-width: 8em;
        background: rgba(4,36,48,0.95);
        margin: 0;
        font-size: 16px;
    }
    #mw-panel .portal .body ul {
        padding: 4px;
    }
    #mw-panel .portal .body ul a {
        padding: 6px 8px;
    }
    #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;
    }
    #mw-panel #p-logo + .portal .vector-menu-heading {
        display: block;
    }
    #mw-panel #p-logo + .portal .vector-menu-heading, #mw-navigation #mw-panel .portal .vector-menu-heading {
        font-size: 12px;
        font-weight: 400;
        padding: 6px;
        background-position: right;
        padding-right: 18px;
        background-color: transparent;
        color: #fff;
    }
    #mw-panel #p-logo + .portal .vector-menu-heading, #mw-navigation #mw-panel > div .vector-menu-heading {
        margin: 0;
    }
    #mw-panel .portal, #mw-panel #p-logo + .portal {
        margin: 0;
        margin-left: 0px;
    }
    #p-cactions .vector-menu-content.body {
        right: 0;
        left: unset;
    }
    #p-search div#simpleSearch {
        margin: 0 auto;
        width: 20em;
        padding: 0;
        height: auto;
        transition: none;
        display: grid;
        grid-template-columns: 1fr 0fr;
        grid-template-rows: 1fr;
        align-content: stretch;
        justify-content: stretch;
    }
    #simpleSearch #searchInput {
        width: 100%;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        font-size: 14px;
        line-height: 16px;
        text-align: left;
        padding: 3px 5px;
        word-wrap: break-word;
        appearance: none;
        -webkit-appearance: none;
    }
    .vectorTabs span,
    #right-navigation .vectorMenu .vector-menu-heading{
        font-size: 80%;
    }
    .vectorTabs ul {
        display: flex;
    }
}
/* #endregion */
/* #endregion */

/* #endregion */

/* #region Bulletpoint fixes */
ul {
    list-style-image: var(--list-bulletpoint-image);
}
/* #endregion */

/** For elements which only display in the mobile view **/
.mobileonly { display: none !important; }

/* #region [[ARK Survival Evolved Wiki:Community portal]] & Noticeboard */
.feature {
    background: rgba(200, 200, 200, 0.05);
    border: 1px solid rgba(200, 200, 200, 0.2);
    border-radius: 5px; padding: 10px;
}
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}
.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}
.adminlist-background{
	float: right;
	width: 300px;
	margin-left: 20px;
	margin-bottom: 20px;
	padding-right: 5px;
	padding-left: 5px;
	background: #0A130F;
	border: 1px solid #7FE7FF;
	font-family: Tahoma, Arial, sans-serif;
    font-size: 80%;
}
/* #endregion */

/* #region Template documentation styles */
.doc {
    margin: 0em auto 1em;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}
.doc-header {
    padding-bottom: 3px;
    border-bottom: 1px solid #BDCAC3;
    margin-bottom: 1ex;
}
.doc-footer {
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}
/* #endregion */

/** Align .number table cells to right **/
table .number { text-align: right; }

/** No external link icon for internal links **/
#content a.external[href^="http://ark.wiki.gg"], #content a.external[href^="https://ark.wiki.gg"], #content a.external[href^="//ark.wiki.gg"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding-right: 0;
}

/** Link spanner **/
.link-spanner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* #region Table of Contents, category list, file ToC */
#toc {
    max-width: 395px;
}
div#toc,
div.toc,
div.mw-warning {
	background-color: var(--toc-background-color);
	border-color: var(--content-border-color);
}
.tocnumber {
    color: var(--toc-number-color);
}
#catlinks,
ul#filetoc {
    background-color: var(--table-heading-background-color);
    color: #80E7FF;
    border: 1px solid var(--table-border-color);
}

/* Allow limiting of which header levels are shown in a TOC; <div class="toclimit-3">, for instance, will limit to showing
   ==headings== and ===headings=== but no further (as long as there are no =headings= on the page, which there shouldn't be
   according to the MoS). */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
    display: none;
}

/* [[Template:Tocright]] */
.tocright {
    float: right;
    padding-left: 1.4em;
}

/* Make ToCs float to the right on pages with no infobox */
#content .mw-parser-output > #toc { float: right; clear: right; margin-left: 1.4em; }
#content .mw-parser-output .info-framework ~ #toc,
#content .mw-parser-output .infobox-tabber ~ #toc { float: none; clear: none; margin-left: 0; }
/* #endregion */

/** Three-colored tables: red, green, gray **/
.yes-no-undef .yes { background-color: #9cee93; }
.yes-no-undef .no { background-color: #e3a4a4; }
.yes-no-undef .undef { background-color: #d3d3d3; }

/* #region [[Template:SpawningMap]] & [[MediaWiki:SpawnMaps.js]]: rarity colouring */
.spawningMap-very-common {
    fill: #0F0;
    background-color: #0F0;
}
.spawningMap-common {
    fill: #B2FF00;
    background-color: #B2FF00;
}
.spawningMap-uncommon {
    fill: #FF0;
    background-color: #FF0;
}
.spawningMap-very-uncommon {
    fill: #FC0;
    background-color: #FC0;
}
.spawningMap-rare {
    fill: #F60;
    background-color: #F60;
}
.spawningMap-very-rare {
    fill: #F00;
    background-color: #F00;
}
.spawning-map-point {
    stroke: black;
    stroke-width: 1;
}
.cr-region-map-very-common{
    filter: hue-rotate(120deg) brightness(400%);
}
.cr-region-map-common{
    filter: hue-rotate(78deg) brightness(400%);
}
.cr-region-map-uncommon{
    filter: hue-rotate(60deg) brightness(400%);
}
.cr-region-map-very-uncommon{
    filter: hue-rotate(48deg) brightness(400%);
}
.cr-region-map-rare{
    filter: hue-rotate(24deg) brightness(400%);
}
/* Marks spawning areas with untameable creatures */
.stripes {
    background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.3) 5px, rgba(0, 0, 0, 0.3) 10px);
}
/* #endregion */

/* #region [[Template:SpawningMap]] */
.spawningMap-legendBox {
    display: inline-block;
    border-radius: 2px;
    width: 1.3em;
    height: 1.3em;
    vertical-align: text-bottom;
    border: 1px solid gray;
}
.spawningMap-map {
    filter: sepia(60%) grayscale(30%);
}
.spawningMap-deuteranopia.spawningMap-map,
.spawningMap-tritanopia.spawningMap-map {
    filter: grayscale(90%) contrast(80%);
}
/* Deuteranopia */
.spawningMap-deuteranopia .spawningMap-very-common {
    fill: #FFE126;
    background-color: #FFE126;
}
.spawningMap-deuteranopia .spawningMap-common {
    fill: #F3D467;
    background-color: #F3D467;
}
.spawningMap-deuteranopia .spawningMap-uncommon {
    fill: #D7C58B;
    background-color: #D7C58B;
}
.spawningMap-deuteranopia .spawningMap-very-uncommon {
    fill: #9090F4;
    background-color: #9090F4;
}
.spawningMap-deuteranopia .spawningMap-rare {
    fill: #3F3FD4;
    background-color: #3F3FD4;
}
.spawningMap-deuteranopia .spawningMap-very-rare {
    fill: #2C2CD4;
    background-color: #2C2CD4;
}
/* Tritanopia */
.spawningMap-tritanopia .spawningMap-very-common {
    fill: #00FED9;
    background-color: #00FED9;
}
.spawningMap-tritanopia .spawningMap-common {
    fill: #008D9D;
    background-color: #008D9D;
}
.spawningMap-tritanopia .spawningMap-uncommon {
    fill: #2B5B7B;
    background-color: #2B5B7B;
}
.spawningMap-tritanopia .spawningMap-very-uncommon {
    fill: #7C4284;
    background-color: #7C4284;
}
.spawningMap-tritanopia .spawningMap-rare {
    fill: #FF3068;
    background-color: #FF3068;
}
.spawningMap-tritanopia .spawningMap-very-rare {
    fill: #FF0422;
    background-color: #FF0422;
}

/* Low widths */
.spawningMap { max-width: 100%; }
.info-arkitex .spawningMap-container { max-width: 100%; }
.info-arkitex .spawningMap-container img,
.info-arkitex .spawningMap-map,
.info-arkitex .svgCreatureMap {
    width: 100%;
    height: auto;
}
.info-spawn .tabber { width: 100%; }
/* #endregion */

/* #region Copy to clipboard */
.copy-clipboard button {
    padding: 0 0 0 1em;
    border: none;
    background: none;
    cursor: pointer;
    font-family: FontAwesome;
    color: #fff;
}
/* #endregion */

/* #region [[Template:Key]] */
.key {
    display: inline-block;
    white-space: nowrap;
}
.key kbd {
    padding: 0.1em 0.6em 0.1em 0.6em;
    margin-right: 2px;
    font-size: 85%;
    font-family: inherit;
    font-style: normal;
    border-radius: .2em;
}
/* Color variants */
.keysDark {
    color: black;
    border: 1px solid rgb(170, 170, 170);
    box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221);
    background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238));
    background-color: rgb(249, 249, 249);
}
.keysLight {
    color: white;
    border: 1px solid rgb(0, 0, 0);
    box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0);
    background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30));
    background-color: rgb(30, 30, 30);
}
/* #endregion */

/* #region Front page */
.fpmain {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}
#fp-container, #fp-container * {
    box-sizing: border-box;
}
/* Grid layout */
#fp-container {
    display: grid;
    grid-template-areas: "a" "b" "c" "d";
    grid-template-columns: 1fr;
    column-gap: 16px;
}
@media screen and (min-width: 990px) {
    #fp-container {
        grid-template-areas: "a a" "c b" "c b" "d d";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (min-width: 1350px) {
    #fp-container {
        grid-template-areas: "a b c" "d b c";
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
#fp-1 { grid-area: a; }
#fp-2 { grid-area: b; }
#fp-3 { grid-area: c; }
#fp-4 { grid-area: d; }

.fp-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fp3col {
    display: flex;
    flex-flow: row wrap;
}
.fp3col > div {
    flex: 1 0 33%;
    min-width: 10em;
}

/* [[Template:FP heading] */
.fpheading {
    border-bottom: 2px solid var(--fp-box-border-color);
    text-align: center;
    color: var(--fp-heading-text-color);
    font-size: 130%;
    margin-bottom: 5px;
    padding: 2px;
}
/* Boxes */
.fpbox {
    width: 100%;
    border: 1px solid var(--fp-box-border-color);
    box-shadow: 0 0.25rem 0.5rem -0.25rem #0008;
    background: var(--fp-box-background-color);
    color: var(--content-text-color);
    margin: 0 0 16px;
    padding: 0.7em 1.6em 1.2em;
    border-radius: 2px;
    box-sizing: border-box;
}
.fpbox .tabber__header {
	justify-content: center;
}
.fpbox .tabber__section {
	border: 1px solid #a2a9b1;
	border-top: none;
}
.fpbox .tabber__panel {
  margin: 0.2em 0.4em;
}
.fp-section > .fpbox:last-child {
    flex-grow: 1;
}
.fpbox.plain {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 6px 10px;
}
.fpbox .mainheading {
    border: none;
    border-bottom: 1px solid #82a8af;
    color: #82a8af;
    font-size: 150%;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    overflow: auto;
}
.fpbox .heading {
    border: none;
    border-bottom: 1px solid #82a8af;
    color: #ffffff;
    font-size: 132%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    overflow: auto;
}
.fpmain .columns .leftcol {
    width: 100%;
    margin: 0;
    padding: 0;
}
.fpmain .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}
.fpbox .fpbody > ul {
    margin-left: 0;
}

/* Hero images */
.fpbox > .fpheading,
.fpbox > .fp-hero-image {
    border-bottom: 2px solid var(--fp-box-border-color);
}
.fpbox > .fp-hero-image {
    margin: -0.7em -1.6em 1.2em;
}
.fpbox .fp-hero-image img {
    width: 100%;
    height: auto;
}

/* Other */
#fpwelcome {
    padding: 6px 0;
}
#fpwelcome .mainheading {
    width: 100%;
}

.fpimagelist ul {
    list-style-type: none;
    list-style-image: none;
}

.fpvideos {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.fpvideo {
    display: inline-block;
    margin: 0 5px;
}

img.fpWideImage {
    max-width: 100%;
    height: auto;
}
/* Hide paragraphs with only a line break after a box */
.fpbox + p > br { display: none; }
/* Force minimum height for the Twitter feed */
#fptweets {
    min-height: calc(425px + 2.3em);
}
/* #endregion */

/* #region [[Template:Ambox]] */
.ambox {
    max-width: 80%;
    margin: 1em auto;
    border: 1px solid #999999;
    border-collapse: collapse;
    border-left-style: solid;
    border-left-width: 10px;
    background-color: var(--ark-ambox-background-color);
}
/* Remove top margin above first ambox in the article */
.mw-parser-output > .ambox:first-child {
    margin-top: 0;
}
.ambox-icon {
    width: 60px;
    padding: 2px 0 2px 0.5em;
    text-align: center;
}
.ambox-DLC-icon {
    width: 115px;
    padding: 2px 0 2px 0.5em;
    text-align: center;
}
.ambox-type {
    padding: 0.25em 0.5em;
}
.ambox-info {
    margin-top: 0.5em;
    font-size: smaller;
}
.ambox-blue {
    border-left-color: #0000aa;
}
.ambox-gray {
    border-left-color: #555555;
}
.ambox-green {
    border-left-color: #00aa06;
}
.ambox-purple {
    border-left-color: #a655b2;
}
.ambox-red {
    border-left-color: #aa0000;
}
.ambox-yellow {
    border-left-color: #aaaa00;
}
.ambox-cyan {
    border-left-color: #00ABA2;
}
.ambox-orange {
    border-left-color: #ffa500;
}
/* #endregion */

/* #region Tweaks for infobox tabbers */
.mw-parser-output > .infobox-tabber {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
    max-width: 320px;
    border: 2px solid var(--ark-arkitex-border-color);
}
.infobox-tabber ul.tabbernav {
    padding: 0;
    padding-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.infobox-tabber ul.tabbernav li a {
    border: none;
}
.infobox-tabber .tabbertab {
    padding: 0;
    border: none;
}
.infobox-tabber .tabbertab .tabbernav {
    border-top: 1px solid var(--ark-arkitex-border-color);
}
.infobox-tabber .info-framework {
    border: none;
    margin: 0;
    border-top: 2px solid var(--ark-arkitex-border-color);
}
/* #endregion */

/* #region Tweaks for tables within tabbers */
.table-tabber {
    margin: 1em 0;
}
.table-tabber .tabbernav {
    border-bottom: 0;
    margin-bottom: 2px;
}
.table-tabber .tabbertab {
    padding: 0;
    border: 0;
}
.table-tabber .tabbertab > table {
    margin: 0;
}
.table-tabber .tabbertab > p:first-child,
.table-tabber .tabbertab > p:last-child {
    display: none;
}
/* #endregion */

/* #region [[Template:Color]] */
.color-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 10px;
    padding-top: 10px;
    margin: -1px;
}
.color-square {
    margin: 1px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-square span {
    font-size: 0.9em;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: contrast(400) grayscale(1) invert(1) contrast(400);
}
/* #endregion */

/* #region [[Template:CreatureTableHeader]] */
th span.long { display: initial; }
th.long, td.long { display: table-cell; }
th span.short { display: none; }
@media only screen and (max-width: 1700px) {
    table.cargo-creature-table th { font-size: 80%; }
}
@media only screen and (max-width: 1350px) {
    th span.long, th.long, td.long  { display: none; }
    th span.short { display: initial; }
    table.cargo-creature-table th { font-size: 60%; }
}
/* #endregion */

/** Vertical-align table cells **/
table.valign-table > * > tr > td { vertical-align: top !important; }

/** Link break behavior tweak to help Chrome/Safari with wrapping **/
.mw-parser-output a.external.free { word-break: break-all; }

/** [[Template:ItemList]]: Do not break items between columns (was an issue on Firefox, cause another browser does not seem to
    follow recommendations often) **/
.itemlist > li {
    break-inside: avoid;
}

/** [[Template:HoverText]] **/
.hover-text {
    cursor: help;
    border-bottom: 1px dotted var(--ark-hovertext-text-color);
}

/* #region [[Template:CreatureStats/attacks]] */
.attack {
    text-align: right;
    table-layout: fixed;
    width: 980px;
}
.attack .attack-name { word-wrap: break-word; }
.attack-container + .attack-container { margin-top:-15px; }
.attack-container {
    clear: both;
    position: relative;
    overflow-x: auto;
}
/* #endregion */

/** Fix for embedded videos not pushing the content below it down when it is pushed down **/
.embedvideowrap {
    overflow: hidden;
}

/* #region [[Color IDs]]: table-like overview for better visibility and responsiveness */
.color-ids-wrapper{
    column-count: auto;
    column-width: 28em;
}
.color-ids-wrapper li {
    list-style: none;
    background-color: #9d9d9d2b;
    border: 1px solid black;
    padding: 0.1em 1em 0.1em 1em;
    text-align: center;
    margin: 0;
}
.color-ids-wrapper ul {
    margin: 0 0 0 1.6em ;
}
/* #endregion */

/* #region [[Template:Tile]] */
.tile_container {
    margin: 4px 0px 8px 8px;
    padding: 0;
    position: relative;
    display: inline-block;
    width: 105px;
    height: 105px;
    vertical-align: middle;
    text-align: center;
    border-radius: 15px;
}
.tile_inner {
    position: relative;
    top: 6px;
    left: 0;
    font-size: 14px;
    font-weight: bold;
}
/* Image-specific tweak to get it to display with a height of 75px */
.tile_inner img[src*="PS.svg"] {
    height: 75px;
}
/* #endregion */

/* #region [[Template:PaintRegion]] */
.paintregion-container {
    display: flex;
    flex-flow: row wrap;
    max-width: 640px;
    text-align: center;
    max-width: 900px;
}
.paintregion {
    flex: 1 0 26%;
    min-width: calc(152px + 0.8em); /* image width + border + padding */
    padding: 0.9em 0.4em 0.2em 0.4em;
    background: var(--ark-paintregion-background-color);
    border: 0.3em inset var(--ark-paintregion-border-color);
}
.paintregion img[src*="PaintRegion"] {
    width: 100%;
    height: 100%;
    max-width: 256px;
    max-height: 256px;
}
/* Tweaks for within tabbers */
.paint-region-tabber { margin: 1em 0; }
.paint-region-tabber .tabbernav {
    border-bottom: 0;
    margin-bottom: -0.1px;
}
.paint-region-tabber .tabbertab {
    padding: 0;
    border: 0;
}
.paint-region-tabber .tabbertab > table {
    margin: 0;
}
.paint-region-tabber .tabbertab > p:first-child,
.paint-region-tabber .tabbertab > p:last-child {
    display: none;
}
/* #endregion */

/* #region [[Template:MapLocations]] */
.mapLocations {
    background-color: var(--content-background-color);
    border-collapse: collapse;
}
.mapLocations td {
    border: 1px solid var(--content-border-color);
    padding: 0.2em 0.4em;
}
/* #endregion */

/* #region [[Template:ResourceMap]] */
/* Notice */
.mw-parser-output > .map-notice {
    padding: 5px;
    border-radius: 15px;
    width: 1060px;
    max-width: 100%;
    overflow: auto;
    display: block;
}
body .map-notice {
    border:1px dashed #7FE7FF;
    background: linear-gradient(#6e92c06b,#828af38c);
}
.top-notice-image {
    position: relative;
    top: -100px;
    height: 0;
    z-index: 1;
}
.top-notice-text {
    vertical-align: middle;
    white-space: normal;
    font-size: 22px;
    padding-left: 10px;
}
.top-notice-text a { font-weight: bold; }
.map-notice {
    display: inline-block;
    margin-bottom: 10px;
    border: 1px solid #000;
    background: linear-gradient(white, lightyellow);
}
.map-legend-container .map-notice {
    padding: 10px;
    width: 210px;
}
/* Data map layout */
.data-map-container {
    display: inline-block;
    padding: 5px;
    border: 1px solid #000;
    background: var(--ark-dossier-background-color);
}
.data-map-container .data-map-needs-js { display: none; }
.data-map-container .resourcemap { width: 100%; height: 100%; }
.data-map-container .resourcemaptable { margin: 0 }
.map-legend-container {
    display: inline-block;
    padding-right: 10px;
    float: left;
    max-width: 225px;
}
.map-container { position: relative; }
/* Map legend */
.map-legend .legend {
    display: inline-block;
    position: relative;
    padding: 0;
    border-radius: 50%;
    margin-left: 3px;
}
.map-legend td:first-child {
    width: 25px;
    text-align: center;
}
.map-legend tr.no-icon td:first-child { text-align: left; width: auto; }
/* Map legend: checkboxes */
.map-legend input[type=checkbox] + label {
    margin-left: 0.3em;
}
.map-legend input[type=checkbox] + label {
    color: #b70303;
}
.map-legend input[type=checkbox]:checked + label {
    color: #05bb25;
}
/* Map legend: spawn map extension */
.map-legend-container > button, .map-legend-container > select { width: 100%; }
.map-legend-container .details-toggle { display: block; }
ul.groups-legend, ul.groups-legend ul { list-style: none; }
.map-legend-container .groups-legend { margin: 0; }
ul.groups-legend > li {
    border: 1px solid #222;
    margin-top: 0.3em;
}
ul.groups-legend > li:first-child { margin-top: 0; }
/* Markers */
.map-legend .dots {
    text-align: right;
    vertical-align: top;
}
.map-container > .dots {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0 100% 100% 0;
}
.map-container .dot, .map-container .dots > div {
    position: absolute;
    line-height: 0;
    padding: 0;
    border-radius: 50%;
    z-index: 5;
    box-sizing: border-box;
}
.map-container .square {
    position: absolute;
    background-color: rgba(255,0,0,0.7);
    border-radius: 5px;
    border: 2px solid black;
    z-index: 5;
    box-sizing: border-box;
}
.map-container .point {
    width: 7px;
    height: 7px;
    background-color: rgba(255,0,0,0.7);
    border: 1px solid black;
    z-index: 5;
    box-sizing: border-box;
}
/* Responsiveness */
@media only screen and (max-width: 1300px) {
    table.map-legend tr {
        display: inline-block;
        width: 13em;
    }
    .map-legend-container { max-width: unset; display: block; float: none; }
    .map-legend tr.no-icon { display: block; }
}
@media only screen and (min-height: 700px) {
    .resourcemaptable { position: sticky; top: 0; }
}
/* #endregion */

/* #region [[Template:ResourceMap]] manual marker styling */
.hide-cave .cave { display: none; }
.map-container .cave.dots > div {
    border-style: double;
    border-width: 2px;
}
.map-legend .legend, .map-container .dots > div {
    width: 7px;
    height: 7px;
    background-color: #666;
    border: 1px solid black;
}
 .map-legend .crate, .map-container .dots.crate > div,
.map-legend .crateCave, .map-container .dots.crateCave > div,
.map-legend .crateDungeon, .map-container .dots.crateDungeon > div,
.map-legend .crateSurface, .map-container .dots.crateSurface > div {
    background-color: unset;
    border: none;
    background-size: 100% 100%;
    border-radius: 0;
}
.map-legend .crate, .map-legend .crateSurface { background-image: url(//ark.wiki.gg/images/3/31/PieBPYR.svg); }
.map-legend .crateDungeon { background-image: url(//ark.wiki.gg/images/2/24/PieYR.svg); }
.map-legend .crateCave { background-image: url(//ark.wiki.gg/images/7/78/PiePYR.svg); }
/* [[MediaWiki:SpawnMaps.js]]: cave + untamability overlay */
.map-container .square.cave {
    border-width: 4px;
}
.map-container .square.untameable::after{
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    background: repeating-linear-gradient( 45deg, #000, #000 5px, transparent 5px, transparent 10px );
}
/* #endregion */

/* #region [[Template:Arkitexure]]: used for creature and other more custom infoboxes */
.info-arkitex {
    border-radius: 5px;
}
.info-framework, .info-framework * {
    box-sizing: border-box;
}

/* Full container */
.info-framework {
    float: right;
    width: 320px;
    max-width: 100%;
    margin: 0 0 8px 8px;
    padding: 5px 5px 0 5px;
    overflow: hidden;
    background: var(--ark-arkitex-background-color);
    border: 2px solid var(--ark-arkitex-border-color);
    font-size: 0.9em;
}

/* Individual module (sub-container) */
.info-module {
    display: block;
    padding: 7px 4px 1px 4px;
    width: 100%;
    text-align: right;
    margin: 0;
    overflow: hidden;
    border-bottom: 3px solid var(--ark-arkitex-accent-color);
	border-radius: 0px;
}
.info-module:first-child {
    padding-top: 3px;
}

/* Hide bottom separator if this is the last Arkitexure module */
.info-module:last-child {
    border-bottom: none;
}

/* Masthead */
.info-masthead {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    height: auto;
    font-size: 24px;
}

/* "Sub-module" component */
.info-unit {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.info-unit-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.info-unit-caption {
    text-align: center;
    padding: 0 8px 0 8px;
    background: none;
    font-weight: 500;
}
.info-unit-comment {
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
}

.info-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info-sound-div {
    margin: 5px 0 -5px 0;
}

/* Suppress list margins and list decoration for item lists inside cells */
.info-arkitex .info-unit-row ul.itemlist {
    margin: 0;
    list-style: none;
}

/* Cells, left and right */
.info-arkitex-left {
    border-radius: 2px 0 0 2px;
    float: left;
    display: block;
}
.info-arkitex-right {
    border-radius: 0 2px 2px 0;
    float: right;
    align-self: stretch;
    display: block;
}
.info-X2-25,
.info-X3-33.info-unit-caption,
.info-X2-40 {
    background: var(--ark-arkitex-left-color);
}
.info-X2-75,
.info-X2-60,
.info-X3-33,
.info-X4-25,
.info-X2-50 {
    background: var(--ark-arkitex-right-color);
}
/* Cell, 1 column, 100% width */
.info-X1-100 {
    width: 100%;
    margin: 1px;
    padding: 5px 2px 5px 2px;
}
/* Cell, 2 columns, 25% width */
.info-X2-25 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
}
/* Cell, 2 columns, 40% width */
.info-X2-40 {
    width: 40%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: right;
}
/* Cell, 2 columns, 50% width */
.info-X2-50 {
    width: 50%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: center;
}
/* Cell, 2 columns, 60% width */
.info-X2-60 {
    width: 60%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: left;
}
/* Cell, 2 columns, 75% width */
.info-X2-75 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    height: auto;
    font-size: 24px;
}
/* Cell, 3 columns, 33% width */
.info-X3-33 {
    width: 33.33%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: center;
    align-self: stretch;
}
.info-arkitex.info-X3-33:nth-child(2) {
    border-radius: 0;
}
/* Cell, 4 columns, 25% width */
.info-X4-25 {
    width: 25%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: center;
    align-self: stretch;
}

/* Infobox creature: lower line height on release dates */
@media only screen and (min-width:1500px) {
    .info-arkitex .info-X3-33 .mw-formatted-date {
        display: block;
        line-height: 1.5;
    }
}
/* Spawn map tabber */
.info-spawn>.tabber {
    display: inline-block;
}

/* Narrow width fixes */
@media screen and (max-width: 720px) {
    .info-framework {
        float: none;
        margin: 0 auto 1.5em;
    }
}
/* #endregion */

/* #region [[Template:Navbox]] */
table.navbox {
    clear: both;
    font-size: 88%;
    margin: 1em 0;
    padding: 1px;
    font-size: 90%;
    width: 100%;
}
.navbox-title a,
div#content .navbox-title a.external {
    color: var(--ark-navbox-title-link-color);
}

body .navbox-list {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    color: #88E9FF;
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 0.5em;
    white-space: nowrap;
    text-align: center;
}

.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background-color: var(--ark-navboxgroup-title-background-color);
    color: var(--ark-navboxgroup-title-text-color);
    border: 1px solid var(--ark-navboxgroup-title-border-color);
}

.navbox {
    border: 1px solid var(--theme-accent-color);
}

.navbox-list {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbox-subgroup>tbody>tr {
    display: flex;
    align-items: stretch;
}

.navbox-subgroup .navbox-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 11em;
    flex-grow: 1;
    flex-shrink: 0;
    white-space: normal;
}

/* Level 1 color */
.navbox-title,
table.navbox th {
    font-weight: bold;
    font-size: 120%;
    color: var(--ark-navbox-title-text-color);
    background: var(--ark-navbox-title-background-color);
}

table.navbox .navbox-title .mw-collapsible-toggle {
    font-weight: normal;
}

/* Level 2 styling */
.collapseButton {
    font-weight: normal;
    width: auto;
}

.navbox .collapseButton {
    width: 6em;
}

.navbar {
    font-size: 88%;
    font-weight: normal;
}

.navbox .navbar {
    font-size: 100%;
}

table.collapsed tr.collapsible {
    display: none;
}
/* #endregion */

/** [[Template:Navbar]] **/
.va-navbar {
    position: absolute;
    padding-left: .5em;
}

/* #region [[Template:DossierText]] */
.dossier-background {
    border-radius: 0.5em;
    border-left-width: 1em;
    margin-bottom: 1em;
    background: var(--ark-dossier-background-color);
    border: 2px solid var(--ark-dossier-border-color);
    color: var(--ark-dossier-text-color);
}
.dossier-text {
    display: flow-root;
    padding: 0.4em;
}
.dossier-text p {
    margin: 0 0 1em;
}
.dossier-text .dossier-cite-left + div {
    flex: 1;
}
.dossier-text-note {
    background: var(--ark-dossiernote-background-color);
    margin: -1.3em 0.3em 1em;
    padding: 0.3em 0.5em;
    border: 2px solid var(--ark-dossiernote-border-color);
    border-radius: 0.2em;
    width: 100%;
    box-shadow: 1px 2px 1px 1px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 1300px) {
    .dossier-text-note {
        float: right;
        max-width: 235px;
        margin-bottom: 0;
    }
}
/* #endregion */

/* #region [[Template:DossierText]] & [[Template:Quote]] cite */
.mw-parser-output > .quote:first-child {
    display: inline-block;
}
.dossier-cite-left,
.dossier-cite-right,
.quote-left,
.quote-right {
    font-size: 3.3em;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    padding: 4px 2px 2px;
    width: 0.5em;
    color: var(--ark-cite-quote-color);
}

.dossier-cite-left,
.quote-left {
    vertical-align: top;
}
.dossier-text .dossier-cite-left {
    margin-right: 0.2em;
}

.dossier-cite-right,
.quote-right {
    vertical-align: bottom;
}
/* #endregion */

/* #region [[Module:LootTable]] */
.loottable {
    background: var(--ark-loottable-background-color);
    border: 2px solid var(--ark-loottable-bar-color);
    border-radius: 2px;
    border-left-width: 6px;
    display: flex;
    align-items: stretch;
}

.loottable-leftbar {
    background: var(--ark-loottable-bar-color);
    padding: 2px;
}

.loottable > div:last-child {
    flex-grow: 1;
}

.loottable > div:last-child > dl:first-child,
.loottable > div:last-child > .tabber > .wds-tabs__wrapper {
    background: var(--ark-loottable-header-color);
}

.loottable > div:last-child > dl:first-child {
    padding: 1em 1em 0;
    margin: 0;
}

.loottable .wds-tab__content .wds-tab__content {
    padding: 0 1.5em 0 calc(1.5em - 5px);
}

.loottable .wds-tabber .wds-tabber .wds-tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: hidden;
}

.loottable .wds-tab__content > h3.with-separator {
    border-top: 3px solid var(--ark-arkitex-accent-color);
    padding: 1em 1em 0;
    margin: 0 -1em 0.5em;
}

.loottable-frame {
    border: 1px solid rgba(var(--theme-accent-color--rgb),0.5);
    padding: 0.25em 0.8em;
    margin: 0 0 0.2em;
    background: #ffffff10;
    border-radius: 2px;
}
/* #endregion */

/* #region [[Template:AttackInfo]] */
.dino-attack-info {
    width: 100%;
    margin: 0.25em;
    white-space: initial; /* workaround static sizes being ignored on table elements due to wiki.gg css */
}
.dino-attack-info th {
    width: 150px;
}
.dino-attack-info ul b {
    font-weight: 600;
}
.dino-attack-species-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 16px;
    margin: 4px 12px -4px;
}
.dino-attack-species-label > a:last-child {
    vertical-align: middle;
}
/* Grid layout (1 column on small screens, 2 on medium, 3 on high) */
.dino-attacks {
    display: flex;
    flex-wrap: wrap;
}
.dino-attacks > .dino-attack-info {
    flex: 1 1 100%;
}
@media screen and (min-width: 1350px) {
    .dino-attacks > .dino-attack-info {
        flex-basis: 49%;
    }
}
@media screen and (min-width: 1800px) {
    .dino-attacks > .dino-attack-info {
        flex-basis: 32.5%;
    }
}
/* #endregion */


.editOptions {
	background-color: transparent;
	color: inherit;
}



fieldset {
	border-color: var(--content-border-color);
}


#simpleSearch {
	background: none;
    border-color: #5a5a5a;
}
#simpleSearch:hover, #simpleSearch:active {
    border-color: var(--content-border-color);
}
#simpleSearch #searchInput{
	color: var(--content-text-color);
	background-color: transparent;
	border-color: #5a5a5a;
}
#simpleSearch #searchButton {
	background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMyI+IDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU0NTk1ZCIgc3Ryb2tlLXdpZHRoPSIyIj4gPHBhdGggZD0iTTExLjI5IDExLjcxbC00LTQiLz4gPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiLz4gPC9nPiA8L3N2Zz4=);
}

/* #region Tabbers */
.tabber.tabber--live {
    overflow-y: auto;
}

.tabbernav {
	border-color: var(--tabber-border-color);
}

.tabber__tab  a:link {
	font-size: 12px !important;
	color: var(--content-text-color);
	box-shadow: inset 0 -2px 0 0 var(--tabber-border-color);
}
.tabber__tab:hover,
.tabber__tab--active:hover {
	background: var(--tabber-background-hover-color);
	color: var(--tabber-text-hover-color) ;
	box-shadow: inset 0 -2px 0 0 var(--tabber-shadow-hover-color);
}
.tabber__tab--active, .tabber__tab--active:visited {
	color: var(--content-text-color);
    background: var(--tabber-background-active-color);
	box-shadow: inset 0 -2px 0 0 var(--tabber-shadow-active-color);
}

.tabber__tab:visited,
.tabber__tab {
	color: var(--content-text-color);
	box-shadow: inset 0 -2px 0 0 var(--tabber-border-color);
}

.tabber__header__prev:after, 
.tabber__header__next:after {
	filter: invert(1);
}
.tabber__header__next:after { right: 0; }

/* #endregion */

.pointer {
	cursor: pointer;
}

/* #region Special:History & diffs */
table.diff,
td.diff-otitle,
td.diff-ntitle {
    background-color:rgba(0,0,0,0.3)
}

.mw-plusminus-pos {
    color:#00A500;
}

.mw-plusminus-neg {
    color:#C60000;
}

td.diff-deletedline {
	background-color: #440000;
	border: none;
}

td.diff-deletedline .diffchange {
	background: none;
	color: #e62444;
}

td.diff-addedline {
	background-color: #004400;
	border: none;
}

td.diff-addedline .diffchange {
	background: none;
	color: #bfd959;
}

#pagehistory li {
    background-color: transparent;
    border: none;
    padding: 3px;
}

#pagehistory li.selected {
    background-color: #01060c;
    background-image: none;
    color: var(--content-text-color);
    border: 1px dashed rgba(0, 0, 0, 0.6);
    padding: 3px;
}

td.diff-context {
	background-color: #6e92c036;
	color:#e0e0e0;
}

.updatedmarker {
    color: #000;
}
/* #endregion */

/* #region [[Special:Preferences]] */
.client-js div#preferences {
    background:rgba(0,0,0,0.2);
    border:1px solid #7f7f7f;
    margin-top:1px;
}
.mw-prefs-buttons {
    padding: 1em 1.2em;
    background: #1c1e1c;
}
/* #endregion */

/* tablepager styling */
.skin-vector table.TablePager td {
  border:1px solid #000;
}

.skin-vector table.TablePager tr th {
  background-color: rgba(0,0,0,0.75);
  color: #80E7FF;
  border:1px solid #3F737F;
}

.skin-vector table.TablePager tbody tr td {
  background-color:rgba(0,0,0,0.3)
}

.skin-vector table.TablePager tbody tr:hover td {
  background:rgba(75,75,75,0.2);
}
/* end tablepager styling */

/* #region Tables */
.wikitable,
table.mw-abuselog-details {
    border: 1px solid var(--table-border-color);
    background-color: var(--table-background-color);
    color: var(--content-text-color);
}
table.wikitable tbody tr th,
table.wikitable > tr > th,
table.wikitable > * > tr > th,
table.mw-abuselog-details th {
    background-color: var(--table-heading-background-color);
    border: 1px solid var(--table-border-color);
    color: inherit
}
table.wikitable tr td,
table.wikitable tr th,
table.mw-abuselog-details tr td,
table.mw-abuselog-details tr th {
    padding: 0.2em 0.5em;
}
table.wikitable tbody tr td,
table.mw-abuselog-details tr td {
    border: 1px solid var(--table-border-color);
}
.mw-datatable td {
    background-color: inherit;
}
.mw-datatable tr:hover td {
    background-color: #fff2;
}

/* Used for tables that are too wide, and slip under ads or offscreen */
.widetable {
    overflow-x: auto;
    margin-top: 1em;
}
.widetable > table {
    margin-top: 0;
}
/* Switch to widetable behaviour below 1280px */
@media screen and (max-width: 1280px) {
    #content table {
        display: block;
        overflow-x: auto;
    }
}
/* #endregion */

/* #region Special:Search */
div.mw-search-profile-tabs {
    background-color: var(--table-heading-background-color);
    color: #80E7FF;
    border: 1px solid var(--table-border-color);
}
fieldset#mw-searchoptions {
    border: 1px solid var(--table-border-color);
    background-color: var(--table-background-color);
}
.mw-search-profile-tabs .search-types {
    padding-left:0;
}
div#content .mw-search-profile-tabs .search-types ul li a {
    color:var(--content-text-color);
    border-right: 1px solid #7f7f7f;
}
div#content .mw-search-profile-tabs .search-types ul li:not(.current) a {
    color: var(--content-default-link-color);
}
.mw-search-profile-tabs ul li.current {
    background-color: rgba(64,64,64,0.1);
    text-shadow:none;
}
.mw-search-profile-tabs ul li:last-child {
    border-bottom:0;
}
/* #endregion */

/* thumnbail tweaks */
div.thumbinner {
  background-color:rgba(48,101,116,0.2);
  border:2px solid rgba(48,101,116,0.75);
  border-image:linear-gradient(-45deg, rgba(48,101,116,0.1), rgba(48,101,116,0.8)) 1;
}

li.gallerybox div.thumb {
  background-color:rgba(48,101,116,0.2);
  border:2px solid rgba(48,101,116,0.75);
  border-image:linear-gradient(-45deg, rgba(48,101,116,0.1), rgba(48,101,116,0.8)) 1;
}
/* end thumbnail tweaks */

/*status effect styling*/
table.status-effect-backg {
	text-align: left;
	margin-top:1em;
	margin-bottom:1em;
	border: 1px solid #7FE7FF;
	background: #6e92c06b;
	background: -webkit-linear-gradient(#6e92c06b, #828af38c);
	background: -o-linear-gradient(#6e92c06b, #828af38c);
	background: -moz-linear-gradient(#6e92c06b, #828af38c);
	background: linear-gradient(#6e92c06b, #828af38c);
	color: var(--content-text-color);
}

/* Patch Notes */
.PN-normal {
	font-weight: bold;
	text-align: center;
	width: 35px;
}

/* fake <h2> - looks identical but no edit link and doesn't show up in the ToC */
.fakeh2 {
  font-size: 1.5em;
  margin-top:1em;
  line-height:1.3;
  margin-bottom:0.25em;
  padding:0;
  color:#e0e0e0;
  border-bottom:1px solid #505050;
  overflow:hidden;
}


.ctc-notice {
    display: inline-block;
    border: 1px dashed yellow;
    background: #0000007a;
    padding: 10px;
}

/* Tweak for illegible css code highlighting */
.mw-highlight .nc,
.mw-highlight .nn {
    color: #8E8ECC;
}

/* #region Theme-aware coloring classes */
.gray {
    background-color: #262626;
}
.redish-background{
	background-color: #cf4c4c8a;
}
/* [[Template:PurchaseTableRow]], [[Template:Infobox item section]], [[Template:Infobox purchase section]] */
.text-white {
    color: #FFFFFF
}
.text-green {
    color: #0F0
}
.text-blue {
    color: #0059FF
}
.text-purple {
    color: #F0F
}
.text-yellow {
    color: #FF0
}
.text-red {
    color: #F00
}
.text-cyan {
    color: #0FF
}
.text-orange {
    color: #F90
}
/* [[Table of Tekgrams]], [[CreatureTableRow]] */
.cell-green {
    background-color: #004C07;
}
.cell-yellow {
    background-color: #7F6A00;
}
.cell-pink {
    background-color: #7F0000;
}
.cell-grey {
    background-color: #454545;
}
/* #endregion */

/** Styling for collapsible toggle **/
.mw-collapsible-toggle.mw-collapsible-toggle-expanded a,
.mw-collapsible-toggle.mw-collapsible-toggle-collapsed a {
    color: var(--content-default-link-color);
}

/* #region wiki.gg provided CSS fixes */
/* Upper advertisement overlaps with #mw-head */
div.games-showcase-header {
    position: relative;
    top: calc(var(--content-navigation-top-offset) + var(--content-navigation-height) - 1em);
    margin: 0.5em;
}
@media screen and (max-width: 720px) {
    div.games-showcase-header {
        margin-top: 0;
        margin-bottom: 1em;
    }
}
/* Tables are set to display as blocks on wiki.gg with no whitespace breaking */
table {
    display: table;
    white-space: initial;
}
/* #endregion */

/* #region [[Special:RecentChanges]] filters */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { background-color: transparent; }
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget { background-color: #fff; }
/* #endregion */
/* #region OOUI elements */
/* Buttons */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: var(--ooui-button-text-color--secondary);
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet {
    color: var(--ooui-button-background-color--primary);
}
input[type="checkbox"]:focus + .mw-ui-button.mw-ui-quiet,
input[type="checkbox"]:focus + .mw-ui-button.mw-ui-quiet.mw-ui-progressive,
input[type="checkbox"]:focus + .mw-ui-button.mw-ui-quiet.mw-ui-destructive,
.mw-ui-button.mw-ui-quiet:focus,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:focus,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:focus,
input[type="checkbox"]:hover + .mw-ui-button.mw-ui-progressive.mw-ui-quiet,
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:hover {
    background: rgba(var(--content-default-link-color--rgb),0.15);
    color: var(--ooui-button-background-color--primary-hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: var(--ooui-button-text-color--primary);
    border-color: var(--ooui-button-background-color--primary);
    background: var(--ooui-button-background-color--primary);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
    color: #000;
}
 
/* Tab layout */
.client-js div#preferences,
.mw-prefs-buttons,
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout option {
    border-color: var(--content-border-color);
}
.oo-ui-tabSelectWidget {
    background: rgba(var(--content-border-color--rgb), 0.4);
}
.oo-ui-tabOptionWidget {
    color: #ccc;
}
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background: var(--content-background-color);
    color: #fff;
}
/* Forms */
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(2n) td {
    background-color: #fff4;
}
/* #endregion */
/* #region Built-in MediaWiki and OOUI icons, dark mode */
#mw-indicator-mw-helplink a { 
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill='%23fff' viewBox=%220 0 20 20%22%3E %3Cpath d=%22M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm1 16H9v-2h2zm2.71-7.6a2.64 2.64 0 0 1-.33.74 3.16 3.16 0 0 1-.48.55l-.54.48c-.21.18-.41.35-.58.52a2.54 2.54 0 0 0-.47.56A2.3 2.3 0 0 0 11 12a3.79 3.79 0 0 0-.11 1H9.08a8.9 8.9 0 0 1 .07-1.25 3.28 3.28 0 0 1 .25-.9 2.79 2.79 0 0 1 .41-.67 4 4 0 0 1 .58-.58c.17-.16.34-.3.51-.44a3 3 0 0 0 .43-.44 1.83 1.83 0 0 0 .3-.55 2 2 0 0 0 .11-.72 2.06 2.06 0 0 0-.17-.86 1.71 1.71 0 0 0-1-.9 1.7 1.7 0 0 0-.5-.1 1.77 1.77 0 0 0-1.53.68 3 3 0 0 0-.5 1.82H6.16a4.74 4.74 0 0 1 .28-1.68 3.56 3.56 0 0 1 .8-1.29 3.88 3.88 0 0 1 1.28-.83A4.59 4.59 0 0 1 10.18 4a4.44 4.44 0 0 1 1.44.23 3.51 3.51 0 0 1 1.15.65 3.08 3.08 0 0 1 .78 1.06 3.54 3.54 0 0 1 .29 1.45 3.39 3.39 0 0 1-.13 1.01z%22/%3E %3C/svg%3E");
}
.oo-ui-indicator-down {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 fill='%23fff' viewBox=%220 0 12 12%22%3E%3Cpath d=%22M10.085 2.943L6.05 6.803l-3.947-3.86L1.05 3.996l5 5 5-5z%22/%3E%3C/svg%3E");
}
.mw-content-ltr .redirectText li:first-child {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2247%22 height=%2220%22 viewBox=%220 0 47 20%22%3E %3Cpath fill=%22none%22 stroke=%22%23fff%22 stroke-miterlimit=%2210%22 stroke-width=%222%22 d=%22M14.98 2.5V11c0 1.04 1.02 1.98 2.02 1.98h6l3 .02%22/%3E %3Cpath fill=%22%23fff%22 d=%22M23.48 9.5l.02 7L30 13z%22/%3E %3C/svg%3E");
}
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.jquery-tablesorter th.headerSort {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='9' viewBox='0 0 21 9'%3E%3Cpath d='m14.5 5-4 4-4-4zm0-1-4-4-4 4z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
/* #endregion */

/** <pre>, <code> **/
pre, .mw-code, code {
	color: var(--content-text-color);
    background-color: var(--code-background-color);
    border-color: var(--code-border-color);
}

/* #region Wikitext Editor */
.mw-editform #wpTextbox1,
.CodeMirror {
    background: rgba(var(--page-background-color--rgb), 0.5);
    color: var(--content-text-color);
}
.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid var(--content-text-color);
}
div.wikiEditor-ui .wikiEditor-ui-view,
.wikiEditor-ui .wikiEditor-ui-top {
    border-color: var(--content-border-color);
}
div.wikiEditor-ui-toolbar {
    background: var(--table-heading-background-color);
}
.wikiEditor-ui-toolbar .tool.oo-ui-iconElement {
    filter:invert(1);
}
.tool.oo-ui-buttonElement-frameless,
.wikiEditor-ui-toolbar .tab {
    padding: 0.3em;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
div.wikiEditor-ui-buttons {
    background-color: transparent;
    border-top:0;
    margin-right: 5px;
}
div.wikiEditor-ui-controls,
div.wikiEditor-ui-tabs {
    background-color: transparent;
    border:0;
    margin-bottom:0.5px;
}
div.wikiEditor-ui-tabs div {
    font-weight:bold;
    background-color: #0A130F;
    border: 1px solid #7FE7FF;
    border-bottom:0;
    margin-right:5px;
}
#content div.wikiEditor-ui-tabs div a {
    background-color:transparent;
    color: #B1F4F0;
    font-weight: bold;
    text-decoration: none;
}
div.wikiEditor-ui-tabs div:not(.current):hover {
    background-color:rgba(0,0,0,0.25);
}
div.wikiEditor-ui-tabs div.current {
    border-bottom:0;
    background-color:#1F5F73;
    padding-bottom:1px;
}
div.wikiEditor-ui-toolbar {
    background:rgba(0,0,0,0.25);
}
div.wikiEditor-ui-toolbar .group {
    border-right: 1px solid var(--content-border-color);
}
div.wikiEditor-ui-toolbar .group-search {
    border-left: 1px solid var(--content-border-color);
}
.tab {
   border-color: transparent;
}
div.wikiEditor-ui-toolbar .tabs span.tab a,
div.wikiEditor-ui-toolbar .tabs span.tab a:visited {
   color: #E0E0E0;
}
div.wikiEditor-ui-toolbar .tabs span.tab a.current,
div.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
   color: #ffffff;
}
#content div.wikiEditor-ui-toolbar .group .tool-select .label,
#content div.wikiEditor-ui-toolbar .menu .options a.option {
   color: #000000;
}
.wikiEditor-ui-toolbar .group .tool-select {
    height: 30px;
}
.wikiEditor-ui-toolbar .group .label {
    color: #ccc;
    height: 30px;
    line-height: 30px;
}
div.wikiEditor-ui-toolbar .sections .section {
    background:transparent;
    border-top: 1px solid var(--content-border-color);
}
div.wikiEditor-ui-toolbar .booklet .index div {
    color: #fff;
}
div.wikiEditor-ui-toolbar .booklet .index .current {
    background-color:rgba(64,64,64,0.5);
    color: #f7f7f7;
}
div.wikiEditor-ui-toolbar .booklet .pages {
  background-color:#0A130F;
}
div.wikiEditor-ui-toolbar .page-characters div span {
    border: 1px solid #3F737F;
    color: #e5e5e5;
    background:transparent;
}
div.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color:#3F737F;
}
div.wikiEditor-ui-toolbar .page-table td {
    border-top: 1px solid #7f7f7f;
    color: #e5e5e5;
}
div.wikiEditor-preview-contents,
div.wikiEditor-preview-loading,
div.wikiEditor-ui-toolbar div.oo-ui-widget {
    background-color: transparent;
}
div.editOptions { 
    background-color: transparent;
    border:none;
}

/* #region Syntax highlighting */
.cm-mw-template {
    color: #e7b8ff;
}
.cm-mw-template-argument-name,
.mw-highlight .nv {
    color: #aa6aca;
}
.cm-mw-template-bracket,
.cm-mw-template-name {
    color: #ce58f9;
}
.cm-mw-link-pagename {
    color: #6a93e6;
}
.cm-mw-parserfunction-name,
.cm-mw-parserfunction-bracket,
.mw-highlight .nf {
    color: #dd5858;
}
.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
    box-shadow: inset 2.75em 0 0 #0006;
}
.CodeMirror-gutters {
    background-color: #0006;
    border-right: none;
}
/* #endregion */

/* #endregion */

/**Metadata infobox on File pages**/
.mw_metadata{
    color: var(--sidenav-header-text-color);
    background: var(--sidenav-header-background)
}
.mw_metadata a{
    color: var(--sidenav-header-text-color)
}

/** Off-center icons **/
.vectorTabs #ca-watch.icon a { padding-top: 3.325em }
.vector-user-menu-legacy #pt-anonuserpage, .vector-user-menu-legacy #pt-userpage a { background-position: left 0.5em }

div.gallerytext {
    padding: 2px;
}

/* #region Mobile adjustments */
@media screen and (max-width: 950px) {
    /* Table of Contents */
    #content .mw-parser-output #toc {
        display: block;
        float: none;
        margin: 2em 0;
        padding: 9px;
    }
    #content .mw-parser-output .tocright {
        float: none;
        padding-left: 0;
    }
}
@media screen and (max-width: 720px) {
    /* Hide [[Template:Navbox]] like Wikipedia does; those tables would be a pain to fix right */
    #content .navbox {
        display: none;
    }

    /* Thumbnails */
    div.thumb, div.tright {
        margin: .5em calc(-1 * var(--content-horizontal-margin)) 1.3em;
    }
    .thumbinner {
        width: auto!important;
        max-width: max-content;
    }
    .thumbimage {
        width: auto !important;
        height: auto !important;
        max-width: 100%;
    }

    /* Floating thumbnails */
    div.tright {
        float: none;
    }
    div.tright .thumbinner {
        margin: 0 auto;
    }

    /* overflow breaks everything, i'm too drained to deal with this rn. */
    #mw-panel .portal .body li {
        padding: .55em 0;
    }
    div#mw-navigation div#mw-panel {
        overflow-x: clip;
    }
    #p-Technical_lists, #p-lang {
        display: none !important;
    }
    #right-navigation .vectorMenu .vector-menu-heading span {
        padding-top: 0.5em;
    }
    #right-navigation .vectorMenu .vector-menu-heading span::after {
        top: 0.5em;
    }
    #right-navigation .vectorMenu .vectorMenuCheckbox {
        z-index: 50;
    }
    #mw-portal #p-tb .body {
        right: 0;
        left: unset;
    }
}
/* #endregion */

/** [[Special:CreateAccount]] statistics **/
#bodyContent .mw-number-text h3 {
    color: #fff;
}
.mw-number-text {
    color: #cecece;
}

.oo-ui-icon-info { filter: invert(1); }

/* Cargo */
div.cargo-table-diagram { fill: var(--content-text-color); }
div.drilldown-filters-wrapper { 
	background: none;
	color: var(--content-header-color);
}
.mw-datatable th,
table.cargoTable.noMerge tr:nth-child(odd) { background-color: #202020; }
table.cargoTable.noMerge tr:nth-child(even) { background: unset; }
.mw-datatable th .oo-ui-iconWidget { filter: invert(1); }
Retrieved from "https://primalfear.wiki.gg/index.php?title=MediaWiki:Vector.css&oldid=67578"