MediaWiki:Common.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
mNo edit summary
Tag: Reverted
mNo edit summary
Tag: Reverted
Line 21: Line 21:
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:AceEditor.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:AceEditor.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CodeMirror.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CodeMirror.css");
/* --- GLOBAL VARIABLES & FONTS --- */
:root {
    /* Terraria Fonts */
    --font-family: Helvetica, Arial, sans-serif;
    --font-family-headings: Verdana, Helvetica, Arial, sans-serif;
    --font-family-mono: monospace, monospace;
    --font-size: 14px;
    --line-height: 1.5;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
}


:root body:not(.skin-vector-dark) { /* Light theme */
:root body:not(.skin-vector-dark) { /* Light theme */
Line 43: Line 31:
     --theme-page-background-color--secondary--rgb: 224, 247, 244;
     --theme-page-background-color--secondary--rgb: 224, 247, 244;
      
      
    /* Links */
/*Links*/
     --theme-link-color: #006d72;  
     --theme-link-color: #00796B; /* Richer, darker teal for readability */
     --theme-link-color--rgb: 0, 109, 114;
     --theme-link-color--rgb: 0, 121, 107;
     --theme-link-color--hover: #00474A;  
     --theme-link-color--hover: #004D40; /* Very dark teal on hover */
     --theme-link-label-color: #00474A;
     --theme-link-label-color: #004D40;
     --mw-head-link-color: #006d72;  
    --theme-link-visited: #5D4037; /* Earthy brown for visited links (Terraria vibe) */
    --theme-link-new: #D32F2F; /* Sharp red for missing pages */
     --mw-head-link-color: #00796B;r: #006d72;  
      
      
     /* Accents */
     /* Accents */
Line 126: Line 116:
      
      
     /* Links */
     /* Links */
     --theme-link-color: #4fd1c7;  
/* Links - Dark Mode (Bioluminescent Cyan) */
     --theme-link-color--rgb: 79, 209, 199;
     --theme-link-color: #4DB6AC; /* Softer, glowing teal (easier on eyes than neon) */
     --theme-link-color--hover: #81e6d9;
     --theme-link-color--rgb: 77, 182, 172;
     --theme-link-label-color: #e2e8f0;
     --theme-link-color--hover: #80CBC4; /* Brighter glow on hover */
     --mw-head-link-color: #4fd1c7;  
     --theme-link-label-color: #E0F2F1;
    --theme-link-visited: #A1887F; /* Muted earth tone for visited */
    --theme-link-new: #FF8A80; /* Soft coral red for missing pages */
     --mw-head-link-color: #4DB6AC; #4fd1c7;  
      
      
     /* Accents */
     /* Accents */
Line 199: Line 192:


:root { /* Universal styles */
:root { /* Universal styles */
/*Font Family */
    --font-family: Helvetica, Arial, sans-serif;
    --font-family-headings: Verdana, Helvetica, Arial, sans-serif;
    --font-family-mono: monospace, monospace;
    --font-size: 14px;
    --line-height: 1.5;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
     /* Gray scale */
     /* Gray scale */
     --gray-900: #1a202c;
     --gray-900: #1a202c;

Revision as of 05:32, 11 December 2025

.class { } /* needed for some reason for the @imports to work */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Imports caching */
/*@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Colors.css");*/
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Infobox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tables.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:MessageBox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CustomTabs.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Navbox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Icons.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Dialogue.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Cards.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tabbers.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Mobile.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Recipe.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Modal.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:AceEditor.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CodeMirror.css");

:root body:not(.skin-vector-dark) { /* Light theme */
    /* Base colors */
    --theme-page-text-color: #1a2a2a; 
    --theme-page-text-color--inverse: #ffffff;
    --theme-page-background-color: #f8fdfc; 
    --theme-page-background-color--rgb: 248, 253, 252;
    --theme-page-background-color--secondary: #e0f7f4; 
    --theme-page-background-color--secondary--rgb: 224, 247, 244;
    
/*Links*/
    --theme-link-color: #00796B; /* Richer, darker teal for readability */
    --theme-link-color--rgb: 0, 121, 107;
    --theme-link-color--hover: #004D40; /* Very dark teal on hover */
    --theme-link-label-color: #004D40;
    --theme-link-visited: #5D4037; /* Earthy brown for visited links (Terraria vibe) */
    --theme-link-new: #D32F2F; /* Sharp red for missing pages */
    --mw-head-link-color: #00796B;r: #006d72; 
    
    /* Accents */
    --theme-accent-color: #4fd1c7; 
    --theme-accent-color--rgb: 79, 209, 199;
    --theme-accent-color--hover: #38b2ac; 
    --theme-accent-label-color: #ffffff;
    
    /* Borders */
    --theme-border-color: #b2f5ea; 
    --theme-border-color--rgb: 178, 245, 234;
    
    /* Status colors */
    --theme-alert-color: #e53e3e; 
    --theme-alert-color--rgb: 229, 62, 62;
    --theme-alert-color--hover: #c53030;
    --theme-alert-color--secondary: #fed7d7;
    --theme-alert-label: #ffffff;
    
    --theme-warning-color: #dd6b20; 
    --theme-warning-color--rgb: 221, 107, 32;
    --theme-warning-color--secondary: #feebc8;
    --theme-warning-label: #1a202c;
    
    --theme-success-color: #38a169; 
    --theme-success-color--rgb: 56, 161, 105;
    --theme-success-color--secondary: #c6f6d5;
    --theme-success-label: #ffffff;
    
    --theme-message-color: #805ad5; 
    --theme-message-label: #ffffff;
    
    /* Alert highlight */
    --theme-alert-highlight: var(--theme-alert-color);
    --theme-alert-highlight--rgb: var(--theme-alert-color--rgb);
    --theme-alert-highlight--hover: var(--theme-alert-color--hover);
    
    /* Custom variables */
    --theme-alt-text: #ffffff;
    --theme-accent-bg: #e6fffa; 
    --theme-infobox-bg: #ffffff; 
    
    --theme-heading-color: #1a2a2a; /* Added for consistency */

    /* Your main light color */
    --color-player: #74f4e0; 
    --color-accent: #4fd1c7; 
    --color-npc: #b794f4; 
    
    /* Card backgrounds */
    --card-bg-main: #ffffff;
    --card-bg-sub: #e6fffa;
    
    /* Letter background */
    --letter-bg: #f0fff4;
    
    /* User highlights */
    --custom-admin-highlight: #dd6b20;
    --custom-contentmoderator-highlight: #805ad5;
    --custom-bot-color: #718096;
    --custom-bot-font-style: italic;
    
    /* Named accents */
    --accent: #4fd1c7;
    --player: #74f4e0;
    --npc: #b794f4;
}

:root .skin-vector-dark { /* Dark theme */
    /* Base colors */
    --theme-page-text-color: #e2e8f0; 
    --theme-page-text-color--inverse: #1a202c;
    --theme-page-background-color: rgb(26, 32, 44, 0.98); 
    --theme-page-background-color--rgb: 26, 32, 44;
    --theme-page-background-color--secondary: #2d3748; 
    --theme-page-background-color--secondary--rgb: 45, 55, 72;
    
    /* Links */
/* Links - Dark Mode (Bioluminescent Cyan) */
    --theme-link-color: #4DB6AC; /* Softer, glowing teal (easier on eyes than neon) */
    --theme-link-color--rgb: 77, 182, 172;
    --theme-link-color--hover: #80CBC4; /* Brighter glow on hover */
    --theme-link-label-color: #E0F2F1;
    --theme-link-visited: #A1887F; /* Muted earth tone for visited */
    --theme-link-new: #FF8A80; /* Soft coral red for missing pages */
    --mw-head-link-color: #4DB6AC; #4fd1c7; 
    
    /* Accents */
    --theme-accent-color: #4fd1c7; 
    --theme-accent-color--rgb: 79, 209, 199;
    --theme-accent-color--hover: #81e6d9; 
    --theme-accent-label-color: #1a202c;
    
    /* Borders */
    --theme-border-color: #4a5568; 
    --theme-border-color--rgb: 74, 85, 104;
    
    /* Status colors */
    --theme-alert-color: #fc8181; 
    --theme-alert-color--rgb: 252, 129, 129;
    --theme-alert-color--hover: #feb2b2;
    --theme-alert-color--secondary: #742a2a;
    --theme-alert-label: #ffffff;
    
    --theme-warning-color: #f6ad55; 
    --theme-warning-color--rgb: 246, 173, 85;
    --theme-warning-color--secondary: #744210;
    --theme-warning-label: #1a202c;
    
    --theme-success-color: #68d391; 
    --theme-success-color--rgb: 104, 211, 145;
    --theme-success-color--secondary: #22543d;
    --theme-success-label: #1a202c;
    
    --theme-message-color: #9f7aea; 
    --theme-message-label: #1a202c;
    
    /* Custom variables */
    --theme-alt-text: #2d3748;
    --theme-accent-bg: #2d3748;
    --theme-infobox-bg: #2d3748;
    
    --theme-heading-color: #e2e8f0; /* Added for consistency */

    /* Your main dark color */
    --color-player: #339193; 
    --color-accent: #4fd1c7; 
    --color-npc: #9f7aea; 
    
    /* Card backgrounds */
    --card-bg-main: #2d3748;
    --card-bg-sub: #4a5568;
    
    /* Letter background */
    --letter-bg: #1a202c;
    
    /* User highlights */
    --custom-admin-highlight: #f6ad55;
    --custom-contentmoderator-highlight: #9f7aea;
    --custom-bot-color: #a0aec0;
    --custom-bot-font-style: italic;
    
    /* Alert highlight */
    --theme-alert-highlight: #c53030;
    --theme-alert-highlight--rgb: 197, 48, 48;
    --theme-alert-highlight--hover: #e53e3e;
    
    /* Named accents */
    --accent: #4fd1c7;
    --player: #339193;
    --npc: #9f7aea;
}

:root { /* Universal styles */
/*Font Family */
    --font-family: Helvetica, Arial, sans-serif;
    --font-family-headings: Verdana, Helvetica, Arial, sans-serif;
    --font-family-mono: monospace, monospace;
    --font-size: 14px;
    --line-height: 1.5;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
    /* Gray scale */
    --gray-900: #1a202c;
    --gray-800: #2d3748;
    --gray-700: #4a5568;
    --gray-600: #718096;
    --gray-500: #a0aec0;
    --gray-400: #cbd5e0;
    --gray-300: #e2e8f0;
    --gray-200: #edf2f7;
    --gray-100: #f7fafc;
    --gray-050: #ffffff;
    
    /* Teal/brown scale */
    --teal-800: #234e52;
    --teal-500: #319795;
    --teal-400: #38b2ac;
    --teal-300: #4fd1c7;
    --teal-200: #81e6d9;
    --teal-100: #b2f5ea;
    --teal-050: #e6fffa;
    
    --light-blue: #bee3f8;
    --gold: #d69e2e;
    
    /* Border */
    --border-color: var(--theme-border-color);
}

/* Improved content styling */
#content.mw-body, .parsoid-body {
    background-color: var(--theme-page-background-color) !important;
    border: 1px solid var(--theme-border-color);
    color: var(--theme-page-text-color);
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label {
    color: var(--theme-page-text-color);
}
.vector-menu-heading-label {
    font-size: 0.8125em;
}

/* Footer and panels */
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
    background-color: var(--theme-page-background-color--secondary) !important;
    color: var(--theme-page-text-color);
}

/* Sidebar and lists */
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
    background-color: var(--theme-page-background-color--secondary) !important;
    color: var(--theme-page-text-color);
}

/* Notification improvements */
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
.skin-vector-dark .wds-table-td-alert {
    background-color: var(--theme-alert-highlight);
    color: var(--theme-alert-label);
}

.text-error {
    color: var(--theme-alert-highlight);
}

/* Revision diff styling */
.diff td.diff-addedline {
    background-color: var(--teal-050);
    border-color: var(--theme-success-color);
    border-width: 1px 1px 1px 4px;
    color: var(--theme-success-color);
}

.diff td.diff-addedline .diffchange {
    background-color: var(--theme-success-color);
    color: var(--theme-success-label);
    font-weight: normal;
}

.diff td.diff-deletedline {
    background-color: var(--theme-alert-color--secondary);
    border-color: var(--theme-alert-color);
    border-width: 1px 1px 1px 4px;
    color: var(--theme-alert-color);
}

.diff td.diff-deletedline .diffchange {
    background-color: var(--theme-alert-color);
    color: var(--theme-alert-label);
    font-weight: normal;
}

.diff td.diff-context {
    background: transparent;
    border-color: var(--theme-border-color);
    color: var(--theme-page-text-color);
}

/* CodeMirror improvements */
.CodeMirror .CodeMirror-scroll {
    background: var(--theme-page-background-color);
    color: var(--theme-page-text-color);
}

.CodeMirror .CodeMirror-linenumber, .CodeMirror .CodeMirror-gutters {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-page-text-color);
    border-right: 1px solid var(--theme-border-color);
}

/* Color template improvements */
.text-player, .text-player * { 
    color: var(--color-player);
    font-weight: 600;
}

.bg-player { 
    background-color: var(--color-player);
    color: var(--theme-page-text-color--inverse);
    padding: 2px 6px;
    border-radius: 3px;
}

.text-accent, .text-accent * { 
    color: var(--color-accent);
    font-weight: 600;
}

.bg-accent { 
    background-color: var(--color-accent);
    color: var(--theme-accent-label-color);
    padding: 2px 6px;
    border-radius: 3px;
}

/* User highlights */
a[href="https://mbwiki.stairwaygames.work/wiki/User:Ais"],
a[href="/wiki/User:Ais"],
a[href="/wiki/Special:Contributions/Ais"] {
    color: var(--custom-admin-highlight);
    font-weight: 600;
}

/* Bots */
a[href="https://coralisland.wiki/wiki/User:NoriBot"],
a[href="/wiki/User:NoriBot"],
a[href="/wiki/Special:Contributions/NoriBot"],
a[href="https://coralisland.wiki/wiki/User:VoirBot"],
a[href="/wiki/User:VoirBot"],
a[href="/wiki/Special:Contributions/VoirBot"] {
    color: var(--custom-bot-color);
    font-style: var(--custom-bot-font-style);
    opacity: 0.9;
}

/* Additional improvements for better readability */
.mw-body-content {
    line-height: 1.6;
}

/* Improve contrast for links */
a {
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: underline;
}

/* Improve table readability */
.mw-parser-output table {
    background-color: var(--theme-page-background-color);
    border: 1px solid var(--theme-border-color);
}

.mw-parser-output table th {
    background-color: var(--theme-page-background-color--secondary);
    color: var(--theme-page-text-color);
}

.mw-parser-output table td {
    border: 1px solid var(--theme-border-color);
}
body.skin-vector-dark {
    /*background: url("https://coralwiki.stairwaygames.com/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;*/
    background-color: #000000;
}

.mobileHide, .mobile-only, .no-desktop {
    display: none!important;
}

/* || FIXES */
.wikiEditor-ui-text > .ui-resizable {
    width: 100% !important;
    max-width: 100%;
}
ul {
    list-style: disc;
}


h2 .mw-headline,
h3 .mw-headline,
h4 .mw-headline {
    font-weight: 500;
}

.vector-body h3 , .vector-body h4 , .vector-body h5 , .vector-body h6 {
    margin-bottom: 4px;
}

a, a:visited, a:active,
.mw-parser-output a:is(.external, .external:visited, .external:active) {
    color: var(--theme-link-color);
}
#mw-head .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
    color: var(--mw-head-link-color, var(--theme-page-text-color));
}
#mw-panel .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
    color: var(--theme-link-color);
}

.mw-parser-output a.external {
    padding-right: 0;
    font-size: inherit;
}

.catlinks {
    border-color: var(--theme-border-color);
    border-radius: 6px;
    background-color: var(--gray-050);
}

.CodeMirror-lines span {
    font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace /* Source Editor */
}

.wikiEditor-ui .ace_editor * {
    font-size: 13px;
    font-family: monospace, monospace; /* Module */
}

.mw-input .mw-abusefilter-editor * {
    font-size: 13px;
    font-family: monospace, monospace;
}

/* Hide default TOOLBOX nav section on sidebar */
#mw-navigation > #mw-panel > #p-tb {
    display: none;
}

/* Column template fix */
.columntemplate ul,
.columntemplate ol {
    margin-top: 0;
}

/* RC */
.mw-changeslist table {
    width: unset;
}

.gift-table .icon-list-container {
    width: auto;
}

/* Quote template */
.quotetable {
    width: auto;
}

.Bug6200 {
    margin-bottom: 0.75em;
}

/* Code block */
code, pre {
    background-color: var(--theme-page-background-color--secondary);
    color: var(--theme-page-text-color);
    border: 1px solid var(--theme-border-color);
    border-radius: 2px;
    padding: 1px 4px;
    font-family: monospace, monospace; 
    font-size: 13px; 
}

code.code-block-table {
    display: table;
    line-height: 21px;
    padding:8px;
}

.code-block-table * {
    font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
}

.code-block {
    display: inline-block;
    line-height: 21px;
}

/* || MAIN PAGE */
/*banner links*/
.banner-links a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    font-weight: 600 !important;
}
/* mp-banner */
#mp-banner {
    position: absolute;
    width: 100%;
    height: 10%;
    filter: blur(0px);
    z-index: -1;
/* background: url(filepath://Funguys_Swarm_Banner.png) top center/cover no-repeat;*/
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
body.page-Main_Page.action-view .main-page-top {
/* background-image: url(https://coralwiki.stairwaygames.com/w/images/c/c2/441Cover_image_only.png); */
    background-color: var(--theme-page-background-color--secondary, #000000);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fffff;
    text-align: center;
    align-items: center;
}


/* ||TABLE OF CONTENTS */
.toc {
    padding: 8px 12px;
    border-radius: 4px;
    background-color: var(--theme-page-background-color--secondary);
    border: 1px solid var(--theme-border-color);
    margin-top: 16px;
}
.toctogglelabel {
    color: var(--theme-link-color);
}
.tocnumber {
    color: var(--theme-page-text-color);
}

.vector-body .toc h2 {
    font-family: var(--font-family-headings);
    font-weight: bold;
}

/* TOC hide headings */
.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;
}

/* For Template:Changelist */
.changelist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 88%;
    margin: 0.3em 0;
}

.changelist-content {
    overflow: auto;
    max-height: 384px;
    padding: 1em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -moz-border-radius-topleft: 0.5em;
    background: transparent;
    border-radius: 6px;
}

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


/* For Template:Chat */
.chat-wrapper {
    display: flex;
    flex-direction: column;
}

.chat-player,
.chat-npc {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.chat-player-speaker {
    white-space: nowrap;
    min-width: 70px;
    color: rgb(105, 172, 82);
}

.chat-npc-speaker {
    white-space: nowrap;
    min-width: 70px;
    color: rgb(237, 123, 103);
}

/* Hatnote */
.hatnote {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-top: 0.6rem;
    margin-bottom: 0.8rem;
    background-color: var( --color-surface-2 );
    border: 1px solid var( --border-color-base--darker );
    border-radius: var( --border-radius-base );
    color: var( --color-base--emphasized );
    font-size: 0.875rem;
    line-height: 1.4;
}

.hatnote-icon img {
    width: 14px;
    height: auto;
    margin-right: 10px;
    opacity: var( --opacity-icon-base );
}

.hatnote.hatnote-high {
    background-color: var( --background-color-destructive-subtle );
    border-color: var( --color-destructive );
}

.hatnote.hatnote-medium {
    background-color: var( --background-color-warning-subtle );
    border-color: var( --color-warning );
}

.hatnote.hatnote-low {
    background-color: var( --color-surface-2 );
}


/* Dark mode */
html.skin-citizen-dark .hatnote-icon img {
    filter: invert( 1 );
}


/* For [[Module:Formatting]] */
code.code-block {
    display: inline-block;
    line-height: 21px;
}
code.code-block-table {
    display: table;
    line-height: 21px;
}
span.variable {
    opacity: 0.65;
}
span.variable::after {
    opacity: 0.65;
    content: ">";
}
span.variable::before {
    opacity: 0.65;
    content: "<";
}

/* Quote */

.pull-quote {
    font-style: italic;
    margin: 0;
    padding: 0 30px 8px !important
}

.pull-quote::before {
    color: var(--accent);
    content: "“";
    display: block;
    font-size: 96px;
    font-style: normal;
    line-height: 72px;
    margin: 4px 0 -45px -5px;;
}

.pull-quote__source::before {
    content: "— ";
    margin-bottom:8px;
}

.pull-quote__text {
    margin-bottom:4px;
}

/* Gallery */
.gallerytext {
    text-align: center;
    font-size:100%;
}

/* Fix to Template Data */
.mw-templatedata-doc-params > * > tr > th {
    width: 150px;
}

.mw-templatedata-doc-params {
    width: auto;
    max-width: 100%;
}

/* Space sidebar arrows properly */
#mw-panel.collapsible-nav .portal:is(.collapsed, .expanded) .vector-menu-heading {
    background-position: 95% center;
}

/* Theme toggle */
.wds-icon {
    align-self: center;
    margin: 0 6px;
    pointer-events: none;
    fill: currentColor;
}
.wds-icon-small {
    height: 18px;
    min-width: 18px;
    width: 18px;
}
#p-personal .vector-menu-content-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em; 
    font-size: 0.875em; 
}
.cols {
    background-color: var(--theme-page-background-color--secondary);
}
#pagehistory li.selected {
  background-color: var(--theme-page-background-color--secondary);
  color: var(--theme-page-text-color);
  outline: 1px dashed var(--theme-border-color);
}

/* FIXME: Is specific .mw-body even needed? Does .mw-indicators exist outside? */
/* --- Global Font Settings --- */
html, body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
}

/* Verdana  */
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.vector-body h3,
.vector-body h4,
.vector-body h5,
.vector-body h6,
.mw-headline {
    font-family: var(--font-family-headings);
    color: var(--theme-heading-color);
    font-weight: normal; 
    line-height: 1.25;
    margin: 0;
}

/* Specific Header Sizes */
.mw-body h1, .mw-body-content h1 { font-size: var(--font-size-h1); }
.mw-body-content h2 { 
    font-size: var(--font-size-h2);
    border-bottom: 1px solid var(--theme-border-color); 
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.vector-body h3 { font-size: 1.4em; font-weight: bold; }
.vector-body h4 { font-size: 1.2em; font-weight: bold; }

.hidden {
  display: none;
}
body {
  /* background-color: @background-color-secondary; */
 /* background: url("https://mbwiki.stairwaygames.work/w/images/3/3d/384Web_background.png")*/
    no-repeat fixed center center / cover !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  overflow-y: scroll;
}
.mw-body, .parsoid-body{
  background-color: rgba(255, 255, 255, 0.98) !important;
}
/* ul{
   list-style: none;
 } */

.wikitable,  .scheduletable {
  table-layout: auto;
  width: 100%;

}

 .scheduletable {
  table-layout: auto;
  width: 30%;

}

.fishtable {
table-layout: auto;
 width: 100%;

}
.artisan-table{
  table-layout: auto;
  width: 60%;
  border-spacing: 0;
  max-width: 100%;
  margin: 15px 0
  /* border: 1px solid gray; */
}

.artisan-table > tr > th, .artisan-table > * > tr > th{
  background-color: #e7c361 !important;
  max-width: fit-content;
}
.artisan-table > tr > th, .artisan-table > tr > td, .artisan-table > * > tr > th, .artisan-table > * > tr > td{
  border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}
.quotetable{
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
}
.quotetable > caption {
  text-align: left;
}
.heart{
  margin-left: -7px;
  margin-bottom: 5px;
}
.quotetable > tbody > tr > td {
  padding: 0;
}
blockquote {
  margin: 0 10px;
}
.detail-list ul {
  list-style: none;
}
caption .mw-collapsible-toggle, .mw-content-ltr caption .mw-collapsible-toggle, .mw-content-rtl caption .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle, .mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle {
  float: right;
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
.ci-letter-wrapper{
  border-radius: 20px;
    padding: 20px;
    max-width: 35em;
    font-weight: 700;
    background: #faf3ea;
}
.ci-letter-header{
  padding-bottom: 28px;
}
.ci-letter-content{
  font-weight: 400;
}
.ci-letter-footer{
  display: flex;
    padding-top: 28px;
    justify-content: space-between;
    font-weight: 700;
    align-items: center;
}
.ci-letter-attachment{
  max-width: 70%;
}

.card-list-container{
  display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.custom-card{
  display: inline-block;
    position: relative;
    width: fit-content;
    align-self: baseline;
}
.custom-card-body{
  display: inline-block;
    position: relative;
    width: fit-content;
    align-self: baseline;
    background: #f6e6cf;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
}
.custom-card-image{
  width: 60px;
    height: 60px;
    padding: 4px;
}
.custom-card-amount{
  background: #e9cda2;
    text-align: center;
    border-radius: 0 0 5px 5px;
    padding: 4px 0;
    white-space: nowrap;
    line-height: 1;
    font-size: 12px;
    hyphens: auto;
    overflow-wrap: break-word;
}
.custom-card-caption{
  width: 56px;
    text-align: center;
    line-height: 1;
    font-size: 12px;
    hyphens: auto;
    overflow-wrap: break-word
}
.wikitable{
  background-color: transparent !important;
  /* min-width: -webkit-fill-available !important; */
  /* table-layout: fixed; */

}

.cost-template {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 0.2rem
}
.cost-detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem
}
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort{
  font-size: 10px;
    white-space: normal;
}
.wikitable > tr > th, .wikitable > * > tr > th{
  background-color: #e7c361 !important;
  max-width: fit-content;

  
}
.heart-event-table {
  width: 30%;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  /* -ms-word-break: break-all; */
  /* word-break: break-all; */
 
 
  /* -webkit-hyphens: auto; */
  /* -moz-hyphens: auto; */
  /* hyphens: auto; */
    width: 150px;
    white-space: break-space;
    margin-left: auto;
    margin-right: auto;
}

.artisan-table > tr > th, .artisan-table > tr > td, .artisan-table > * > tr > th, .artisan-table > * > tr > td:first-child {
  /* -ms-word-break: break-all; */
  /* word-break: break-all; */
 
 
  /* -webkit-hyphens: auto; */
  /* -moz-hyphens: auto; */
  /* hyphens: auto; */
  width: 150px;
    white-space: break-space;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td:first-child {
  /* -ms-word-break: break-all; */
  /* word-break: break-all; */
 
 
  /* -webkit-hyphens: auto; */
  /* -moz-hyphens: auto; */
  /* hyphens: auto; */
  width: min-content;
    white-space: break-space;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.scheduletable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  /* -ms-word-break: break-all; */
  /* word-break: break-all; */


  /* -webkit-hyphens: auto; */
  /* -moz-hyphens: auto; */
  /* hyphens: auto; */
}

.quotetable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
/* -ms-word-break: break-all; */
/* word-break: break-all; */

 
/* -webkit-hyphens: auto; */
/* -moz-hyphens: auto; */
/* hyphens: auto; */
}


.vector-menu-content {
  margin-left: 10px;
}
.vector-body p{
  /* -ms-word-break: break-all; */
  /* word-break: break-all; */

  /* Non standard for WebKit */


  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.mw-body,
.parsoid-body {
  /* General background/foreground color definition as one exception to the rule. */
  background-color: rgba(255, 255, 255, 0.9);
  color: @color-base;
  direction: ltr;
  padding: 1em;
}
.infobox {
  background: #e7c361 ;
  border: 1px solid #e7c361 ;
  float: right;
  margin: 0 0 1em 1em;
  padding: 1em;
  /* min-width: 25%; */
}
.infobox-title {
  font-size: 2em;
  text-align: center;
}

.infobox p {
  text-decoration: underline;
  font-size: 1.3em;
}
.infobox-image {
  text-align: center;
}
.infobox-table {
 width: 100%;
}
.infobox-table th {
  text-align: left;
  vertical-align: top;
  width: 120px;
}
.infobox-table td {
  vertical-align: top;
  text-align: right;
  /* color: white; */
}
.wikitable > caption{
  text-align: left;
}
.Bug6200 {
  font-style: italic;
  font-weight: normal;
  display: flex;
  flex-direction: row;
 align-items: center;
 white-space: normal;
}
.Bug6200 > img {
  width: 24px;
  height: 24px;
}

.scheduletable{
  text-align: center;
  margin: 10px 0;
  border-collapse: collapse;
}

.scheduletable > tbody > tr > td{
  border: 1px solid #a2a9b1;
  /* text-align: left; */
  /* padding: 0.2em 0.4em; */
}

/* .scheduletable > tbody > tr > td:first-child{ */
/* width: 70px; */
/* } */
.navbox-list{
  padding: 0 0 0 2px;
    font-size: 10pt;
}
.navbox{
  width: 100%;
    margin-top: 12px;
    border-spacing: 0;
}
.croptable > tbody > tr > td:first-child{
  width: 100px !important;
 }
 .navbox-title th {
  padding: 6px;
  border-radius: 4px;
  background:  #e7c361;
 }
 .navbox-group a{
  color:  black;

 }
 .alt .navbox-list {
  background-color: rgba(231, 195, 97, 0.35);
}
 .navbox-subgroup {
  margin: 0;
  border-spacing: 0;
}
 .navbox-subgroup .navbox-group{
  color:  black;
    background: rgba(231, 195, 97, 0.10);
    white-space: nowrap;
    text-align: left;
 }
 th.navbox-group{
  background-color: #e7c361;
  color:  black;

    font-size: 10pt;
    padding: 0.25em 1em;
 }
 .scheduletable > tbody > tr > td:first-child{
  width: 150px !important;
 }
/* td { */
/* width: 100px; */
/* } */
.scheduletable caption{
  background: #e7c361 ;
  border: 1px solid #e7c361;
  text-align: center;
  
}
.wikitable > caption > span{
  float: right !important;
}

.collapsible-header:before{
  float: right;
}
.ci-recipe-wrapper{
  display: flex;
    width: fit-content;
    position: relative;
    gap: 7px
}
.ci-recipe-timed{
  padding-bottom: 25px;
}
.ci-recipe-timed{
  border: 1px solid #e7c361;
  border-radius: 5px;
  position: relative;
  text-align: center;
  font-weight: 500;
  width: 100%;
  padding: 8px;
  max-width: 100px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ci-recipe-yield{
  border: 1px solid #e7c361;
    border-radius: 3px;
    padding: 8px;
    position: relative;
    width: 100%;
    text-align: center;

}
.ci-recipe-yield-amount {
  background: #e7c361;
  width: fit-content;
  border-radius: 3px;
  padding: 0 5px;
  position: absolute;
  bottom: 0;
  right: 0;
}
span.custom-icon {
  display: inline;
}
.ci-recipe-ingredient{
  border: 1px solid #e7c361;
    border-radius: 3px;
    padding: 5px;
    min-height: 100%;
}
.ci-recipe-medium::after{
  border: 1px solid #e7c361;
  background-color: #e7c361;
  border-radius: 3px;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
}

.gifted-item{
    background-color: rgba(231, 195, 97, 0.2);
}
.gifted-item > tbody > tr > th{
  background-color: rgba(231, 195, 97, 0.8);
  max-width: 100px;
}
.portable-infobox{
  margin: 0 0 15px 15px;
  max-width: 250px;
  width: 100%;
  border: 1px solid #e7c361;
  border-radius: 10px;
}
.portable-infobox .pi-header{
  padding: 0 5px;
  background: rgba(231, 195, 97, 0.2);
}
.portable-infobox .pi-title{
  background: #e7c361;
  padding: 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.portable-infobox .pi-data-label, .portable-infobox .pi-data-value {
  padding: 5px;
}
/* .bg-trans { */
/* background-color: transparent !important; */
/* } */
/* .portable-infobox { */
/* clear: both !important; */
/* float: none !important; */
/* border: 5px solid #e7c361; */
/* background-color: #e7c361; */
/* color: white; */
/* } */
/* .portable-infobox .pi-header{ */
/* font-size: 0.75rem ; */
/* } */

/* .portable-infobox .pi-data-label{ */
/* background-color: #e7c361 ; */
/* min-width: 50%; */
/* } */
/* .pi-smart-group .pi-smart-data-label{ */
/* font-size: 0.5rem; */
/* } */
/* .portable-infobox .pi-title { */
/* text-align: center; */
/* font-weight: bold; */
/* } */

.pi-image-thumbnail {
  max-width: 100%!important;
}

.content-table {
  background: transparent;
  padding: 10px 2%;
  width: 100%;
}

.content-table-basic {
  background: transparent;
  width: 100%;
}

.content-table-second {
  background: transparent;
  width: 100%;
}

.child-content-table {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-left: 4px;
}
#p-personal {
  position: absolute;
  top: @top-personal-tools;
  right: 0.75em;
  z-index: @z-index-personal;

  ul {
    padding-left: 10em; /* Keep from overlapping logo */
  }
}

.mw-body,
#mw-data-after-content {
  margin-left: 10em;
}

.mw-body {
  /* Merge the border below with tabs' one (in their background image). */
  margin-top: -@border-width-base;
  /* Border on top, left, and bottom side. */
  /* border: @border-width-base @border-style-base @border-color-content; */
  border: 10px solid azure;
  border-radius: 5px;
  /* border-right-width: 0; */

  .firstHeading {
    /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
    overflow: visible;
  }
}

.mw-indicators {
  z-index: @z-index-indicators;
}

.vector-body {
  position: relative;
  z-index: @z-index-base;
}

/* Head */
#mw-page-base {
  /* .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); */
  background: transparent;
  background-position: bottom left;
  height: 5em;
}

#mw-head-base {
  margin-top: -5em;
  margin-left: 10em;
  height: 5em;
  background: transparent;
}

/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
  position: absolute;
  top: -9999px;
}

#mw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 3.125em; 
}

/* Navigation Containers */
#left-navigation {
  float: left;
  margin-left: 10em;
  margin-top: 2.5em;
  /* When right nav would overlap left nav, it's placed below it
(normal CSS floats behavior). This rule ensures that no empty space
is shown between them due to right nav's margin-top. Page layout
is still broken, but at least the nav overlaps only the page title
instead of half the content. */
  margin-bottom: -2.5em;
}

#right-navigation {
  float: right;
  margin-top: 2.5em;
}

/* Search */
.vector-search-box {
  float: left;
  margin-right: 0.5em;
  margin-left: 0.5em;

  /* FIXME: This selector requires knowledge of the internals of the search component */
  /* and should not be used here. */
  form {
    margin: 0.5em 0 0;
  }
}

/* Defined as `div`. */
/* Provide extra element for gadgets due to `form` already carrying an `id`. */
/* FIXME: This selector requires knowledge of the internals of the search component */
.vector-search-box-inner {
  min-width: 5em;
  /* Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-. */
  width: 13.2em;
  /* Support: Modern browsers, responsive width. */
  width: 20vw;
  max-width: 20em;
}

/* Sidebar */
#mw-panel {
  position: absolute;
  top: 0;
  width: 10em;
  left: 0;
}

/* hide the heading of the first menu */
#p-logo + .mw-portlet .vector-menu-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: white;
  color: black;
  font-weight: bold;
  padding: 0 5px;
  height: 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

/* ul {
   list-style-type: none !important
 } */

.vector-body blockquote{
  border: 0;
  padding: 0;
}

.vector-menu-portal .vector-menu-content li {
  padding: 5px;
}
.vector-menu-portal .vector-menu-content ul {
  background: rgba(255, 255, 255, 0.8);
}
.vector-menu-portal .vector-menu-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: white;
  color: black;
  font-weight: bold;
  padding: 0 5px;
  height: 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.mw-footer {
  margin-left: 10em;
  margin-top: 1%;
  margin-bottom: 1%;
  padding: 0.75em;
  background: white;
  min-height: 120px;
  border-radius: 5px;
}
.social {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: auto;
  background: #474747;
  padding: 1rem 3rem;
  & .iconname {
    max-width: 20%;
    & .external-text {
      font-size: 12px;
    }
    & .floatleft {
      display: flex;
      justify-content: space-between;
      align-items: center;
      & a {
        font-size: 12px;
      }
      img {
        max-width: 20px;
        max-height: 20px;
      }
    }
  }
}
div.floatleft,
table.floatleft {
  margin: 0;
}
big{
  color: white;
}

.jumbotron {
  /*background-image: url("https://mbwiki.stairwaygames.work/w/images/1/13/manabreak-hero.png");*/
  
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
body.page-Main_Page.action-view .main-page-top{
 background-color: #474747;
  padding: 1rem 0;
  background-image: url("https://mbwiki.stairwaygames.work/w/images/1/13/manabreak-hero.png") !important;
  height: 300px !important;
}
/* Vector screen styles for high definition displays. These rules cross the above components and are
 grouped together here only for the sake of the media query common to each. */
.mw-body,
#mw-head-base,
#left-navigation,
#mw-data-after-content,
.mw-footer {
  margin-left: 11em;
}

.mw-body {
  padding: 1.25em 1.5em 1.5em 1.5em;
}

.mw-footer {
  padding: 1.25em;
}

#mw-panel {
  padding-left: 0.5em;
}

.vector-search-box {
  margin-right: 1em;
}

#p-personal {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

/* Directionality styles previously provided by the deprecated `legacy` feature (T287410)
for HTML elements which do not carry dir HTML attributes.
These have been copied across to legacy Vector to minimize disruption caused by T287701.
If you are reading this comment in 2022, please consider checking usage in wikitext and
removing them both. */
.mw-content-ltr {
  /* @noflip */
  direction: ltr;
}

.mw-content-rtl {
  /* @noflip */
  direction: rtl;
}

.cols {
  text-align: left;
  word-break: break-all;
  /* padding: 1em 0; */
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  font-weight: 600;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
}

.forest {
  margin-top: -25px;
}

.forest2 {
  margin-top: 0;
}
/* grid styling - Connected to Module Variables */
.grid {
  display: grid !important;
  /* Desktop: Use module variable, fallback to 12 columns */
  grid-template-columns: var(--main-page-layout-columns--desktop, repeat(12, 1fr));
  margin: 10px 0;
  gap: 10px; /* Better than grid-gap (deprecated) */
}

/* Tablet */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(12, 1fr)));
  }
}

/* Mobile */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: var(--main-page-layout-columns--mobile, var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(1, 1fr))));
  }
}

/* Optional: Keep column classes as fallback when NOT using module */
.grid:not([data-has-module-layout]) .grid__col4 {
  grid-column: span 4;
}

/* Other styles can stay the same */
.specification-table {
  font-size: 10px;
  padding: 0 5%;
}

.content {
  padding: 10px;
  font-size: 12px;
}

.wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

@supports (display: grid) {
  .mw-content-ltr ul,
  .mw-content-rtl .mw-content-ltr ul {
    /* margin: 0 !important; */
  }
  .social .iconname .floatleft {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .social {
    gap: 30px;
  }

  .croptable > tbody > tr >td > a > img{
    max-width: 40px;
    max-height: 40px;
  }

  .exceptable > tbody > tr >td > a > img{
    max-width: 70px;
    max-height: 70px;
  }
  .floatleft > a > img {
    /* width: 24px; */
    /* height: 24px; */
  }
  .iconname {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 5px;
  }

  .auto-grid > * {
    max-width: unset;
    list-style: none;
  }

  .auto-grid > * + * {
    margin-top: unset;
  }
  .auto-grid > li > ul {
    margin-left: 10px !important;
  }
  .auto-grid > li > ul > li {
    list-style: none;
    margin: 0;
    padding-left: 15px;
    list-style: none;
    background-image: url("https://www.svgrepo.com/show/165220/diamond.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 10px;
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}
.minus-ten {
margin-top:0;
}
.minus-fifty {
margin-top:-55%;
}
#footer-info li{
  color:white !important
}
@media (max-width: 1024px) {
  .minus-fifty {
margin-top:-5%;
}
.minus-ten {
margin-top:-10%;
}
  .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  font-size: 0.7em;
  }
  .scheduletable > tbody > tr > td:first-child{
    width: 40px;
   }
   .wikitable, .quotetable, .scheduletable {
    table-layout: fixed;
    width: 100%;
   
  }
  .croptable > tbody > tr >td > a > img{
    max-width: 24px;
    max-height: 24px;
  }
  .infobox{
    float: none;
    margin: 0
  }
  .forest2 {
    margin-top: -5px;
  }
  .content {
    font-size: 10px;
  }
  .social {
    flex-direction: column;
    padding: 1rem;
    & .iconname {
      max-width: 100%;
    }
  }

  .mw-parser-output a.external {
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  #mw-panel {
    width: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100px;
  }
  .vector-search-box {
    min-width: 90vw;
    margin-top: 0px;
  }
  .vector-search-box-input {
    width: 80vw;
  }
  #mw-content-text
    > div.mw-parser-output
    > div
    > div
    > div.content
    > table
    > tbody
    > tr
    > td
    > a {
    font-size: 8px;
  }
  #mw-content-text
    > div.mw-parser-output
    > div
    > div
    > div.content
    > table
    > tbody
    > tr
    > th
    > div
    > div
    > a
    > img {
    width: 16px;
    height: 16px;
  }
  #mw-content-text
    > div.mw-parser-output
    > div
    > div
    > div.content
    > table
    > tbody
    > tr
    > td
    > div
    > div
    > a
    > img {
    width: 16px;
    height: 16px;
  }
  #mw-content-text
    > div.mw-parser-output
    > table.jumbotron
    > tbody
    > tr
    > th
    > a
    > img {
    max-width: 100%;
    object-fit: contain;
  }
  footer,
  .vector-menu-content,
  #p-navigation,
  #p-tb {
    display: none;
  }
  #p-logo {
    display: block;
    justify-content: center;
  }
  #p-logo a {
    width: 5em;
  }

  table {
    width: 100%;
  }
  .mw-body,
  #mw-data-after-content {
    margin: 10% 10px;
  }
  .grid__col1 {
    grid-column: span 1;
  }
  .grid__col2 {
    grid-column: span 2;
  }
  .grid__col3 {
    grid-column: span 6;
  }
  .grid__colsm1 {
    grid-column: span 1;
  }
  .grid__colsm2 {
    grid-column: span 2;
  }
  .grid__colsm3 {
    grid-column: span 12;
  }
  .grid__colsm4 {
    grid-column: span 12;
  }
  .grid__colsm5 {
    grid-column: span 5;
  }
  .grid__colsm6 {
    grid-column: span 6;
  }
  .grid__colsm7 {
    grid-column: span 7;
  }
  .grid__colsm8 {
    grid-column: span 12;
  }
  .grid__colsm9 {
    grid-column: span 9;
  }
  .grid__colsm10 {
    grid-column: span 10;
  }
  .grid__colsm11 {
    grid-column: span 11;
  }
  .grid__colsm12 {
    grid-column: span 12;
  }

  .content-table-basic > tbody {
    display: grid;
  }
  .content-table-basic > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    width: fit-content;
  }
  .content-table-basic > tbody > tr > th {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45vw;
  }
    .content-table-basic > tbody > tr > th > .iconname > .floatleft > a > img{
width:14px;
height: 14px;
  }

  .forest {
    margin-top: 0;
  }

  .content-table-second {
    background: transparent;
    width: 100%;
  }
  .auto-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .mw-body,
  #mw-data-after-content {
    padding: 0;
  }
}
@media screen and (max-width: 1920px) {
  .mw-parser-output a.external {
    font-size: 14px;
  }
}

@media screen and (min-width: 2000px) {
  .mw-parser-output a.external {
    font-size: 20px;
    font-weight: 400;
  }
  .floatleft > a > img {
    width: 48px;
    height: 48px;
  }
}
.header-column > span > a > img{
 width: 14px;
    height: 14px;
}

.header-column >  a > img{
 width: 14px;
    height: 14px;
}

.heading-char{
  color:#deb76c !important
}

#footer {
	background: #fff;
	color: #000;
	margin-top: 1em;
	border-top: 1pt solid #aaa;
	padding-top: 5px;
	direction: ltr;
}

/* --- THE KILL SWITCH --- */
/* 1. Force Body Font */
html, body, .mw-body, #content {
    font-family: Helvetica, Arial, sans-serif !important;
}

/* 2. Force Headers */
h1, h2, h3, h4, h5, h6, .mw-headline, .firstHeading {
    font-family: Verdana, Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
}

/* 3. Force Monospace */
pre, code, .mw-code {
    font-family: monospace, monospace !important;
    font-size: 13px !important;
}

/* 4. Force Inheritance on everything else to override load.php's * selector */
* {
    font-family: inherit !important;
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Common.css&oldid=27497"