MediaWiki:Fandomdesktop.css

/* [[de:MediaWiki:Fandomdesktop.css]] * [[es:MediaWiki:Fandomdesktop.css]] * [[fr:MediaWiki:Fandomdesktop.css]] * [[it:MediaWiki:Fandomdesktop.css]] * [[ja:MediaWiki:Fandomdesktop.css]] * [[pl:MediaWiki:Fandomdesktop.css]] * [[pt-br:MediaWiki:Fandomdesktop.css]] * [[ru:MediaWiki:Fandomdesktop.css]] * [[th:มีเดียวิกิ:Fandomdesktop.css]] */
/* CSS placed here will affect users of the FandomDesktop skin */
/* To find stuff specific to dark / light skin search for dark or light as they are further down the page */

/* Everything that affects both themes */
/* Import custom font that doesn't look ugly */
div#content {
    font-family: 'Montserrat', helvetica, arial, sans-serif;
    font-size: 14px;
}

/* Hex background on content */
main.page__main {
    background: rgba(var(--theme-page-background-color--rgb), 0.95);
}

main.page__main::before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    background: url(https://static.wikia.nocookie.net/arksurvivalevolved_gamepedia/images/b/b7/Hex_grid.png/revision/latest) repeat;
    /*[[File:Hex grid.png]]*/
    z-index: -1;
    opacity: 0.7;
}

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

/* Light theme colors */
.theme-fandomdesktop-light {
    /* Ambox */
    --ark-ambox-background-color: #ddd;
    /* Table of Contents */
    --ark-toc-background-color: #fefeff50;
    /* Template:Navbox */
    --ark-navbox-title-text-color: #c4ded6;
    --ark-navbox-title-link-color: #70C0B6;
    --ark-navbox-title-background-color: #13473f;
    --ark-navboxgroup-title-background-color: #ffffffb0;
    --ark-navboxgroup-title-text-color: #222;
    --ark-navboxgroup-title-border-color: #a2a9b1;
    /* Legacy infobox */
    --ark-infobox-background-color: #111;
    --ark-infobox-border-color: #fff;
    /* Arkitexure */
    --ark-arkitex-background-color: #c0cfc9;
    --ark-arkitex-border-color: #44685e;
    --ark-arkitex-accent-color: #13473f;
    --ark-arkitex-left-color: #EDF3EB;
    --ark-arkitex-right-color: #fff;
    /* Template:PaintRegion */
    --ark-paintregion-background-color: #EDF3EB;
    --ark-paintregion-border-color: #C0CFC9;
    /* Template:DossierText & Template:Quote */
    --ark-cite-quote-color: #7d5f2a;
    --ark-dossier-background-color: #e1d8c494;
    --ark-dossier-border-color: #7d5f2a;
    --ark-dossier-text-color: #3c2a09;
    --ark-dossiernote-background-color: #f7eedf;
    --ark-dossiernote-border-color: #7d5f2a;
    /* Module:LootTable */
    --ark-loottable-background-color: #ced5d29a;
    --ark-loottable-header-color: #b3ccce80;
    --ark-loottable-bar-color: var(--theme-accent-color);
    /* Difficulty level colors */
    --ark-difficulty-gamma: #48BF15;
    --ark-difficulty-beta: #17B5D8;
    --ark-difficulty-alpha: #D85847;
    --ark-difficulty-none: #BCEEFA;
    /* Template:Mission */
    --ark-mission-background-color: #f8f9fa;
    /* Template:HoverNote */
    --ark-hovertext-text-color: var(--theme-accent-color);
    /* Kibble tables */
    --ark-kibbletable-border-color: #ccc;
    --ark-kibbletable-background-color: #fff;
    /* Scrollable background */
	--ark-header-background-image: url(https://static.wikia.nocookie.net/arksurvivalevolved_gamepedia/images/f/fd/Site-background-light-top.png/revision/latest);
}

/** Light theme background **/
/* Force the document to 100% height of the viewport at minimum,
   to fix background cut-off in editor and short pages */
body.theme-fandomdesktop-light, .theme-fandomdesktop-light .main-container {
	min-height: 100vh;
}
/* Custom scrolling body background & header font fixes */
.theme-fandomdesktop-light {
	background-image: var(--theme-body-background-image);
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.theme-fandomdesktop-light .main-container {
	position: relative;
}
.theme-fandomdesktop-light .fandom-community-header__background {
	background-image: var(--ark-header-background-image);
    position: absolute;
	inset: 0 0 0 -66px; /* negating global nav width */
	height: auto;
	width: auto;
    background-position: center 0;
    background-size: 2560px; /* image width */
	max-height: 4028px; /* image height */
}
.theme-fandomdesktop-light .fandom-community-header__background::before {
	display: none;
}
/* Header background for visibility on light theme */
.theme-fandomdesktop-light .fandom-community-header {
	background: linear-gradient(to bottom, rgba(var(--theme-page-background-color--rgb), 0.05), rgba(var(--theme-page-background-color--rgb), 0.8)),
				radial-gradient(farthest-side at left bottom, rgba(var(--theme-page-background-color--rgb), 0.90) 5%, rgba(var(--theme-page-background-color--rgb), 0.05)) 5%,
				radial-gradient(farthest-side at right bottom, rgba(var(--theme-page-background-color--rgb), 0.90) 5%, rgba(var(--theme-page-background-color--rgb), 0.05)) 5%;
	padding: 8px 10px 12px;
	border-radius: 3px 3px 0 0;
}
.theme-fandomdesktop-light .community-header-wrapper {
    height: 168px; /* 148px + 12px + 8px */
}
.theme-fandomdesktop-light .page {
    margin-top: 0;
}
.theme-fandomdesktop-light .community-header-wrapper.wds-is-hidden ~ .page,
.theme-fandomdesktop-light.ve-active .page {
    margin-top: 50px;
}
/** END Light theme background **/

/* Dark theme colors */
.theme-fandomdesktop-dark {
    /* Text color */
    --theme-page-text-color: #88E9FF;
    --theme-page-text-color--hover: #69B5C6;
    --theme-page-text-color--rgb: 136, 233, 255;
    /* Ambox */
    --ark-ambox-background-color: #0000004D;
    /* Table of Contents */
    --ark-toc-background-color: rgba(var(--theme-border-color--rgb), 0.2);
    /* Template:Navbox */
    --ark-navbox-title-text-color: #88E9FF;
    --ark-navbox-title-link-color: #7f9dff;
    --ark-navbox-title-background-color: #2768A5;
    --ark-navboxgroup-title-background-color: #000000C0;
    --ark-navboxgroup-title-text-color: #80E7FF;
    --ark-navboxgroup-title-border-color: #3F737F;
    /* Legacy infobox */
    --ark-infobox-background-color: #000;
    --ark-infobox-border-color: #7FE7FF;
    /* Arkitexure */
    --ark-arkitex-background-color: #021d31d6;
    --ark-arkitex-border-color: #7FE7FF;
    --ark-arkitex-accent-color: #235361;
    --ark-arkitex-left-color: #2d74bea6;
    --ark-arkitex-right-color: #6e92c036;
    /* PaintRegion */
    --ark-paintregion-background-color: #1D558C;
    --ark-paintregion-border-color: #4E99C1;
    /* 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;
}

/* FD dark bug: Ensure the community header image is always sized properly */
.fandom-community-header__background {
    background-position: 50%;
    background-size: cover;
}

/* Restore Hydra line height */
.page-content p,
.page-content section,
body {
    line-height: 1.6;
}

/* Restore pre-FD table header text centering */
.wikitable > tr > th,
.wikitable > * > tr > th {
    text-align: center;
}

/* Restore pre-FD Hydra/Vector table paddings. */
.article-table tr td,
.article-table tr th,
.wikitable tr td,
.wikitable tr th {
    padding: 0.2em 0.4em;
}

/* Fix issues with tables with spanning rows/columns */
.article-table tr td:first-child,
.article-table tr th:first-child,
.wikitable tr td:first-child,
.wikitable tr th:first-child {
    border: 1px solid var(--theme-border-color);
}

/* Make pseudo-heading padding closer to H4 */
.page-content dl {
    margin: 2px 0 6px;
}

/* Sane-ish paragraph margins after pseudo-headings */
.page-content dl+p {
    margin: 0 0 1.2em;
}

/* Reduce paragraph (and list) margins */
.mw-parser-output > p, .mw-parser-output p {
    margin: 0 0 14px;
}
.page-content p + ol, .page-content p + ul, .page-content section + ol, .page-content section + ul {
    margin-top: -7px;
}

/* Make ~12/08/2021 Fandom changes apply to code blocks */
.mw-parser-output p + pre {
	margin-top: -6px;
}
.mw-parser-output pre + p {
	margin-top: 14px;
}

/* Make self-links bold */
.mw-selflink.selflink {
    font-weight: bold;
    color: inherit;
}

/* Fix the "document contains errors" warning text color in dark theme */
.oo-ui-messageDialog-message {
    color: var(--theme-page-text-color);
}

/* Table of contents background */
#content #toc {
    background: var(--ark-toc-background-color);
}

/* Table of contents margins */
#content #toc {
	margin: 16px auto 16px 0
}

/* <pre> word line breaking */
.page-content pre {
    white-space: pre-wrap;
}

/* Used by Template:FP heading */
.fpheading {
    border: 3px solid #4F6D68;
    border-radius: 0.3em;
    text-align: center;
    color: var(--theme-page-text-color);
    font-size: 130%;
    margin-bottom: 5px;
    padding: 2px;
}

/* Front page font color (overiding Common.css) */
.fpbox {
    color: var(--theme-page-text-color);
}

/* Copy to clipboard */
.copy-clipboard {
    background-color: white;
    color: black;
    font-family: Courier, monospace;
    padding: 0.2em;
}

.copy-clipboard button {
    padding: 0 0 0 1em;
    border: none;
    background: none;
    cursor: pointer;
    font-family: FontAwesome;
}

/*Achievement styling*/
.achieve_container {
    width: 600px;
    padding-left: 10px;
    vertical-align: bottom;
    background: var(--ark-paintregion-background-color);
    border: 0.3em inset var(--ark-paintregion-border-color);
}

.achieve_container .achieve_name {
    display: inline-block;
    position: relative;
    top: 7px;
    font-size: 1.25em;
    color: var(--theme-page-text-color);
}

.achieve_icon {
    width: 64px;
    height: 64px;
    vertical-align: top;
}

.achieve_avail {
    display: inline-block;
    height: 0px;
    margin-right: 5px;
}

.achieve_unavail {
    display: inline-block;
    height: 0px;
    margin-right: 5px;
    overflow: wrap;
}

.gray_circle {
    display: block;
    position: relative;
    top: -19px;
    background: lightgray;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}


/* Hide mw-empty-elt in tabbers */
.tabber .mw-empty-elt {
    display: none;
}

/* Limit size of interactive region maps when not in narrow view */
.interactive-regionmap {
    max-width: 400px;
    max-height: 400px;
}

.is-content-expanded .interactive-regionmap {
    max-width: none;
    max-height: none;
}

/* .magnify for interactive region maps */
.mw-content-ltr .magnify {
    float: right;
    margin-left: 3px;
    margin-right: 0;
}

div.magnify a {
    display: block;
    background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2215%22 height=%2211%22 viewBox=%220 0 11 15%22%3E %3Cg id=%22magnify-clip%22 fill=%22%23fff%22 stroke=%22%23000%22%3E %3Cpath id=%22bigbox%22 d=%22M1.509 1.865h10.99v7.919H1.509z%22/%3E %3Cpath id=%22smallbox%22 d=%22M-1.499 6.868h5.943v4.904h-5.943z%22/%3E %3C/g%3E %3C/svg%3E");
    text-indent: 15px;
    white-space: nowrap;
    overflow: hidden;
    width: 15px;
    height: 11px;
}

/* Ambox style */
.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;
}

/* Infobox style */
.infobox {
    float: right;
    width: 23em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0.5em;
    padding: 2px;
    background-color: var(--ark-infobox-background-color);
    border: 1px solid var(--ark-infobox-border-color);
}

.infobox-table {
    width: 100%;
    padding: 0;
    background-color: var(--ark-infobox-background-color);
    border: 1px solid var(--ark-infobox-background-color);
}

.infobox-header {
    padding: 0.1em;
    font-size: 130%;
    text-align: center;
}

.infobox-section {
    border-radius: 0.3em;
    text-align: center;
    margin-bottom: 5px;
    padding: 2px;
}

.infobox-centered {
    text-align: center;
}

.infobox-centered img {
    max-width: 100%;
    height: auto;
}

.infobox .slideboxlightshow {
    max-width: calc(23em - 4px);
    height: auto;
}

.infobox .slideboxlightshow a,
.infobox .slideboxlightshow img {
    max-width: 100%;
}

.infobox-row {
    vertical-align: top;
}

.infobox-row-name {
    text-align: left;
    white-space: nowrap;
    font-weight: bold;
}

.infobox-spacer {
    height: 0.5em;
}

/* Arkitexure and Infobox shared */
.infobox-header,
.infobox-section,
.info-module {
    border-bottom: 3px solid var(--ark-arkitex-accent-color);
    border-image: linear-gradient(to right, transparent 1%, var(--ark-arkitex-accent-color) 15%, var(--ark-arkitex-accent-color) 85%, transparent 99%) 1;
}

/* "ARKITEXURE"-STYLE INFOBOX */
/* used for creature and other more custom infoboxes */
/* Arkitexure rounded borders */
.info-arkitex {
    border-radius: 2px;
    float: center;
}

.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-X2-50 {
    background: var(--ark-arkitex-right-color);
}

/* Arkitexure full container */
.info-framework {
    float: right;
    width: 410px;
    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);
}

/* Arkitexure individual module (sub-container) */
.info-module {
    display: inline-block;
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 4px 4px 0 4px;
    overflow: hidden;
}

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

/* Arkitexure "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-comment {
    display: flex;
    align-items: left;
    font-size: 11px;
}

/* Arkitexure cell, intended for one total column, 100% width */
.info-X1-100 {
    width: 100%;
    margin: 1px;
    padding: 5px 2px 5px 2px;
}

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

.info-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-sound-div {
    margin: 5px 0 -5px 0;
}

/* Arkitexure cell, intended for two total columns, 25% width */
.info-X2-25 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
}

/* Arkitexure cell, intended for two total 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;
}

/* Arkitexure cell, intended for two total columns, 40% width */
.info-X2-40 {
    width: 40%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: right;
}

/* Arkitexure cell, intended for two total columns, 60% width */
.info-X2-60 {
    width: 60%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: left;
}

/* Arkitexure cell, intended for three total columns, 33% width */
.info-X3-33 {
    width: 33.33%;
    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;
    }
}

/* Arkitexure cell, intended for two total columns, 50% width */
.info-X2-50 {
    width: 50%;
    margin: 1px;
    padding: 5px 8px 5px 8px;
    text-align: center;
}

.info-unit-caption {
    text-align: center;
    padding: 0 8px 0 8px;
    background: none;
    font-weight: 500;
}

/* Arkitexure spawn map tabber */
.info-spawn>.tabber {
    display: inline-block;
}

/* Reskinned compact-ish Template:SpawningMap, Template:LootTable and .structureSelector tabbers */
.spawningMap>.wds-tabber .wds-tabs,
.structureSelector .wds-tabber .wds-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: hidden;
}

.spawningMap>.wds-tabber .wds-tabs__tab-label,
.loottable .wds-tabber .wds-tabber .wds-tabs__tab-label,
.structureSelector .wds-tabber .wds-tabs__tab-label {
    height: 30px;
    letter-spacing: 0;
    margin: 0 8px;
    font-size: 13px;
}

/* Cleaner Template:SpawningMap tabber borders in Arkitex */
.info-spawn>.tabber,
.info-spawn>.spawningMap>.tabber {
    border: 2px solid var(--ark-arkitex-border-color);
}

.info-spawn>.tabber .spawningMap .wds-tabs {
    border-bottom: 2px solid var(--ark-arkitex-border-color);
}

.info-spawn>.tabber .spawningMap .wds-tabs__wrapper.with-bottom-border {
    border-bottom: none;
}

/* Center spawning maps in wikitables */
.wikitable .spawningMap-container {
    margin: 0 auto;
}

/* Navbox template style */
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);
}


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


/* Hide mw-empty-elt in navboxes (FD fix) */
.navbox .mw-empty-elt {
    display: none;
}

/* 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;
}

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

/* Nav Creatures */
/* Color settings can be found in the theme specific sections */
.navbox-creature-item {
    display: inline-block;
    margin: 2px;
    overflow: hidden;
    vertical-align: middle;
    width: 50px;
    text-align: center
}

/* Do not set any negative bottom margin on Nav creatures to avoid a scrollbar. */
.navbox.navbox-creature {
    margin-bottom: 0;
}

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

/* Template:Mission */
.mission {
    border: 1px solid var(--theme-accent-color);
    background: var(--ark-mission-background-color);
    color: var(--ark-mission-text-color, inherit);
}

.mission-dif-gamma {
    color: var(--ark-difficulty-gamma);
}

.mission-dif-beta {
    color: var(--ark-difficulty-beta);
}

.mission-dif-alpha {
    color: var(--ark-difficulty-alpha);
}

.mission-dif-none {
    color: var(--ark-difficulty-none);
}

/* Template:Photo */
.photo-nav,
.photo-nav a:link,
.photo-nav a:visited {
    font-weight: bold;
}

.photo-gallery,
.photo-gallery a:link,
.photo-gallery a:visited {
    color: #000 !important;
}

.photo-gallery img {
    opacity: .8;
}

.photo-gallery img:hover {
    opacity: 1;
}

.photo-nav li:hover img {
    filter: brightness(120%);
}

li.photo-bg {
    margin: 8px 6px;
    padding: 5px;
    position: relative;
    display: inline-block;
    min-height: 152px;
    vertical-align: top;
    text-align: center;
    /* For IE 7 */
    zoom: 1;
    *display: inline;
}

div.photo-text {
    position: relative;
    top: 4px;
    padding: 6px 0 6px 0;
    font-size: 16px;
}

/* Tiles (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;
}

/* Lower paragraph margins in patch notes on main page */
#fp-4 .fpbody .mw-collapsible + p {
    margin-top: 1em;
}

#fp-4 .fpbody p:first-child i {
    display: inline-block;
    margin-bottom: 0.6em;
}

#fp-4 .fpbody p {
    margin: 0.3em;
}

/* Restore pre-FD centered captions in FP Quick Game Basics */
#fpbasics .gallerybox .gallerytext {
    text-align: center;
}

/* [[Template:PaintRegions]] */
.paintregion {
    background: var(--ark-paintregion-background-color);
    border: 0.3em inset var(--ark-paintregion-border-color);
}

/* 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 .dossier-cite-left {
    margin-right: 0.2em;
}

.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);
}

body.is-content-expanded .dossier-text-note,
html.is-content-expanded .dossier-text-note {
    float: right;
    max-width: 235px;
    margin-bottom: 0;
}

/* Template:DossierText predictable paragraph margin */
.dossier-text p {
    margin: 0 0 1em;
}

/* Template:DossierText & Template:Quote cite signs */
.dossier-cite-left,
.quote-left,
.dossier-cite-right,
.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-cite-right,
.quote-right {
    vertical-align: bottom;
}

/* Template:Explorer Note */
.explorer-note {
    display: inline-block;
    vertical-align: top;
    width: 47%;
    margin: 1em;
}

.explorer-note-main {
    border-radius: 0.25em;
    border-left-width: 1em;
    background: var(--ark-dossier-background-color);
    border: 2px solid var(--ark-dossier-border-color);
}

/* Styling for kibble tables */
.kibble-table,
.kibble-table-new {
    font-size: .9em;
    border-left-width: 0.5em;
    border-bottom-width: 0.5em;
    margin: 0 .5em .5em 0;
    border-left: solid var(--ark-kibbletable-border-color);
    border-bottom: solid var(--ark-kibbletable-border-color);
    background-color: var(--ark-kibbletable-background-color);
}

.kibble-table {
    text-align: center;
    float: left;
}

.kibble-table-new {
    text-align: left;
    padding: .5em;
}

/* Used by some templates for graying table cells */
.gray {
    background-color: #0000003A;
}

/* 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 > div:last-child > .tabber > .wds-tab__content .wds-tab__content {
    padding: 0 1em 0 calc(1em - 5px);
}

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

/* Admin list */
.adminlist-background {
    float: right;
    padding: 0.5em;
}

/*Map Template fixes*/
.full-container {
    background: var(--ark-dossier-background-color);
}

/* Tabbers with Arkitexure infoboxes */
.structureSelector .wds-tabs__wrapper.with-bottom-border,
.infobox-tabber .wds-tabs__wrapper.with-bottom-border,
.info-framework .wds-tabs__wrapper.with-bottom-border {
    background: var(--ark-arkitex-right-color);
    border-radius: 2px;
}

.structureSelector .wds-tabs__wrapper.with-bottom-border,
.infobox-tabber .wds-tabs__wrapper.with-bottom-border {
    border-top: 2px solid var(--ark-arkitex-border-color);
    border-left: 2px solid var(--ark-arkitex-border-color);
    border-right: 2px solid var(--ark-arkitex-border-color);
}

.structureSelector .wds-tabs__tab.wds-is-current,
.infobox-tabber .wds-tabs__tab.wds-is-current,
.info-framework .wds-tabs__tab.wds-is-current {
    background: var(--ark-arkitex-left-color);
}

/* Theme-specific */
/* Everything light theme specific below this line */
.theme-fandomdesktop-light .adminlist-background {
    background-color: #c0cfc9;
    border: black solid 1px;
}

/* Arkitexure specific theming */
.theme-fandomdesktop-light .infobox-header,
.theme-fandomdesktop-light .infobox-section {
    color: #000;
}

/* Light theme NavBox Creatures specific */
.theme-fandomdesktop-light .navbox-creature-item div {
    background-color: white;
    border-radius: 100px;
}

.theme-fandomdesktop-light .creature_roster li:hover>div {
    box-shadow: inset 0 0 3px rgba(170, 170, 204, 0.5), inset 0 0 4px rgba(17, 17, 17, 0.5);
}

.theme-fandomdesktop-light .navbox-creature-item .nav-white {
    background-color: white;
}

.theme-fandomdesktop-light .navbox-creature-item .nav-yellow {
    background-color: #fffbd1;
}

.theme-fandomdesktop-light .navbox-creature-item .nav-brown {
    background-color: #ffe6d1;
}

.theme-fandomdesktop-light .navbox-creature-item .nav-purple {
    background-color: #edd1ff;
}

.theme-fandomdesktop-light .navbox-creature-item .nav-orange {
    background-color: #ffe1b7;
}

.theme-fandomdesktop-light .navbox-creature-item .nav-grey {
    background-color: #d6d6d6
}

.theme-fandomdesktop-light .navbox-creature-item .nav-green {
    background-color: #cdffc9
}

.theme-fandomdesktop-light .navbox-creature-item .nav-cyan {
    background-color: #c2f6ff
}

.theme-fandomdesktop-light .navbox-creature-item .nav-pink {
    background-color: #ffc2f3
}

.theme-fandomdesktop-light .navbox-creature-item .nav-red {
    background-color: #ffd1d1
}

/* Light theme Template:Photo specific */
.theme-fandomdesktop-light .photo-nav,
.theme-fandomdesktop-light .photo-nav a:link,
.theme-fandomdesktop-light .photo-nav a:visited {
    color: #fff !important;
    text-shadow: 1px 1px 4px black, 0 0 1em teal, 0 0 0.2em black;
}

.theme-fandomdesktop-light li.photo-bg {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 8px #333;
}

.theme-fandomdesktop-light .redish-background {
    background-color: #d6baba;
}

/* Light theme Tiles (Template:Tiles) */
.theme-fandomdesktop-light .tile_container {
    background: linear-gradient(white, lightgray);
    border: 1px solid black;
}

.theme-fandomdesktop-light .tile_container:hover {
    background: #fff;
}

/* ExplorerNote changelog table fix */
.theme-fandomdesktop-light .explorernot-change-tableend {
    background: #dddddd !important;
}

/* Status effect styling */
.theme-fandomdesktop-light table.status-effect-backg {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    background: #EDF3EB;
    border: 0.3em inset #C0CFC9;
}

/* Patch Notes */
.theme-fandomdesktop-light .PN-normal {
    background: #f2f2f2;
    font-weight: bold;
    text-align: center;
    width: 35px;
}

/* Used by [[Table of Tekgrams]] and [[Template:CreatureTableRow]] */
.theme-fandomdesktop-light .cell-green {
    background-color: #90EE90 !important;
}

.theme-fandomdesktop-light .cell-yellow {
    background-color: #FFD700 !important;
}

.theme-fandomdesktop-light .cell-pink {
    background-color: #e3a4a4 !important;
}

.theme-fandomdesktop-light .cell-grey {
    background-color: #BDBDBD !important;
}

.theme-fandomdesktop-light .ctc-notice {
    display: inline-block;
    border: 1px solid black;
    background: lightgray;
    padding: 10px;
}

/* Used by [[Template:PurchaseTableRow]], [[Template:Infobox item section]], [[Template:Infobox item section mod]], and [[Template:Infobox purchase section]] */
.theme-fandomdesktop-light .text-white {
    color: #666
}

.theme-fandomdesktop-light .text-green {
    color: #060
}

.theme-fandomdesktop-light .text-blue {
    color: #006
}

.theme-fandomdesktop-light .text-purple {
    color: #606
}

.theme-fandomdesktop-light .text-yellow {
    color: #660
}

.theme-fandomdesktop-light .text-red {
    color: #600
}

.theme-fandomdesktop-light .text-cyan {
    color: #699
}

.theme-fandomdesktop-light .text-orange {
    color: #820
}

/* Everything dark theme specific below this line */
.theme-fandomdesktop-dark .adminlist-background {
    background-color: #021d31d6;
    border: 1px solid #7FE7FF;
}

/*Source Editor visual fixes*/
.theme-fandomdesktop-light .CodeMirror {
    background-color: whitesmoke;
    color: black;
}

/* Dark theme ambox */
/* Used on the community portal */
.theme-fandomdesktop-dark .feature {
    border: 1px solid rgba(200, 200, 200, 0.2);
    border-radius: 5px;
    padding: 10px;
}

.theme-fandomdesktop-dark .page {
    position: relative;
    border: 1px solid #7FE7FF;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75);
    color: #88E9FF;
}

/* End base framework */
/* Links */
.theme-fandomdesktop-dark .pseudo-link {
    color: var(--theme-link-color);
}

.theme-fandomdesktop-dark .pseudo-link:hover {
    color: var(--theme-link-color--hover);
    text-decoration: underline;
}

.theme-fandomdesktop-dark .jslink:hover {
    text-decoration: underline;
    cursor: pointer;
}

.theme-fandomdesktop-dark div#content a.new {
    color: #E51616;
}

/* End links */
/* Dark theme infobox */

.theme-fandomdesktop-dark .infobox-table {
    background-color: #021d31d6;
}

.theme-fandomdesktop-dark .infobox-header,
.theme-fandomdesktop-dark .infobox-section {
    color: #88E9FF;
}

.theme-fandomdesktop-dark .infobox-table {
    background-color: #021d31d6;
}

/* Dark theme [[Template:Nav Creatures]] */
.theme-fandomdesktop-dark .navbox-creature-item div {
    background-color: #2d74be;
}

.theme-fandomdesktop-dark .creature_roster li:hover>div {
    box-shadow: inset 0 0 3px #aac, inset 0 0 4px #111;
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-white {
    background-color: #D5F2F2;
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-yellow {
    background-color: #E5DFAC;
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-brown {
    background-color: #e5c6ac;
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-purple {
    background-color: #CEACE5;
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-orange {
    background-color: #FAD6A5;
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-grey {
    background-color: #C4C4C4
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-green {
    background-color: #a6ffa9
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-cyan {
    background-color: #86e0f0
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-pink {
    background-color: #ffb0eb
}

.theme-fandomdesktop-dark .navbox-creature-item .nav-red {
    background-color: #e5acb1
}

/* Dark theme Template:Photo */
.theme-fandomdesktop-dark .photo-nav,
.theme-fandomdesktop-dark .photo-nav a:link,
.theme-fandomdesktop-dark .photo-nav a:visited {
    color: black !important;
    text-shadow: 1px 1px 4px #fff, 0 0 1em #fff, 0 0 0.2em #fff;
}

.theme-fandomdesktop-dark li.photo-bg {
    background: #c4c4c4;
    border: 1px solid #b7b7b7;
    box-shadow: 0 0 8px #333;
}

.theme-fandomdesktop-dark .redish-background {
    background-color: #cf4c4c8a;
}

/* Dark theme Tiles (Template:Tile) */
.theme-fandomdesktop-dark .tile_container {
    background: #021d31;
    color: #88E9FF;
    border: 1px solid #7FE7FF;
}

.theme-fandomdesktop-dark .tile_container:hover {
    background: #3191b9fc;
    color: #ddd;
    border-color: #7FE7FF;
}

/* ExplorerNote changelog table fix */
.theme-fandomdesktop-dark .explorernot-change-tableend {
    background: #262729ab !important;
    color: #88E9FF;
}

/* Status effect styling */
.theme-fandomdesktop-dark table.status-effect-backg {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    background: #1D558C;
    border: 0.3em inset #4E99C1;
}

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

/* Template:Explorer Note */
.theme-fandomdesktop-dark .explorer-note {
    color: #88E9FF !important;
}

/* Used by [[Table of Tekgrams]] and [[CreatureTableRow]] */
.theme-fandomdesktop-dark .cell-green {
    background-color: #004C07 !important;
}

.theme-fandomdesktop-dark .cell-yellow {
    background-color: #7F6A00 !important;
}

.theme-fandomdesktop-dark .cell-pink {
    background-color: #7F0000 !important;
}

.theme-fandomdesktop-dark .cell-grey {
    background-color: #454545 !important;
}

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

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

/* Used by [[Template:PurchaseTableRow]], [[Template:Infobox item section]], [[Template:Infobox item section mod]], and [[Template:Infobox purchase section]] */
.theme-fandomdesktop-dark .text-white {
    color: #FFF
}

.theme-fandomdesktop-dark .text-green {
    color: #0F0
}

.theme-fandomdesktop-dark .text-blue {
    color: #0059FF
}

.theme-fandomdesktop-dark .text-purple {
    color: #F0F
}

.theme-fandomdesktop-dark .text-yellow {
    color: #FF0
}

.theme-fandomdesktop-dark .text-red {
    color: #F00
}

.theme-fandomdesktop-dark .text-cyan {
    color: #0FF
}

.theme-fandomdesktop-dark .text-orange {
    color: #F90
}

/* Styling for collapsible toggle */
.theme-fandomdesktop-dark .mw-collapsible-toggle.mw-collapsible-toggle-expanded a,
.theme-fandomdesktop-dark .mw-collapsible-toggle.mw-collapsible-toggle-collapsed a {
    color: var(--ark-collapsible-text-color);
}

/* Invert [[File:PS.svg]] colors for better visibility */
.theme-fandomdesktop-dark img[src*="/PS.svg/"] {
    filter: invert(100%);
}

/* Source Editor visual fixes */
.theme-fandomdesktop-dark .CodeMirror {
    background-color: black;
    color: whitesmoke;
}

.theme-fandomdesktop-dark .cm-mw-ext3-ground {
    background-color: #c234c442;
}

/* Math fixes for dark theme */
.theme-fandomdesktop-dark img.mwe-math-fallback-image-inline {
    filter: invert(100%);
}