MediaWiki:Common.css

.class { }/* needed for some reason for the @imports to work */
/* 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; /* Darker for better readability */
    --theme-page-text-color--inverse: #ffffff;
    --theme-page-background-color: #f8fdfc; /* Very light cyan background */
    --theme-page-background-color--rgb: 248, 253, 252;
    --theme-page-background-color--secondary: #e0f7f4; /* Slightly darker cyan */
    --theme-page-background-color--secondary--rgb: 224, 247, 244;
    
    /* Links */
   --theme-link-color: #006d72; /* Darker, more readable teal (was #008489) */
    --theme-link-color--rgb: 0, 109, 114;
    --theme-link-color--hover: #00474A; 
    --theme-link-label-color: #00474A;
    --mw-head-link-color: #006d72; 
    
    /* Accents */
    --theme-accent-color: #4fd1c7; /* Vibrant teal accent */
    --theme-accent-color--rgb: 79, 209, 199;
    --theme-accent-color--hover: #38b2ac; /* Darker hover */
    --theme-accent-label-color: #ffffff;
    
    /* Borders */
    --theme-border-color: #b2f5ea; /* Light teal border */
    --theme-border-color--rgb: 178, 245, 234;
    
    /* Status colors - more readable */
    --theme-alert-color: #e53e3e; /* Softer red */
    --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; /* Softer orange */
    --theme-warning-color--rgb: 221, 107, 32;
    --theme-warning-color--secondary: #feebc8;
    --theme-warning-label: #1a202c;
    
    --theme-success-color: #38a169; /* Softer green */
    --theme-success-color--rgb: 56, 161, 105;
    --theme-success-color--secondary: #c6f6d5;
    --theme-success-label: #ffffff;
    
    --theme-message-color: #805ad5; /* Purple for messages */
    --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; /* Very light teal */
    --theme-infobox-bg: #ffffff; /* Pure white for contrast */
    
    /* Your main light color */
    --color-player: #74f4e0; /* Your specified light theme color */
    --color-accent: #4fd1c7; /* Complementary teal */
    --color-npc: #b794f4; /* Complementary purple */
    
    /* 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); /* Dark blue-gray */
    --theme-page-background-color--rgb: 26, 32, 44;
    --theme-page-background-color--secondary: #2d3748; /* Slightly lighter */
    --theme-page-background-color--secondary--rgb: 45, 55, 72;
    
    /* Links - using your dark theme color */
    --theme-link-color: #4fd1c7; 
    --theme-link-color--rgb: 79, 209, 199;
    --theme-link-color--hover: #81e6d9;
    --theme-link-label-color: #e2e8f0;
    --mw-head-link-color: #4fd1c7; 
    
    /* Accents */
    --theme-accent-color: #4fd1c7; /* Bright teal */
    --theme-accent-color--rgb: 79, 209, 199;
    --theme-accent-color--hover: #81e6d9; /* Lighter hover */
    --theme-accent-label-color: #1a202c;
    
    /* Borders */
    --theme-border-color: #4a5568; /* Dark gray border */
    --theme-border-color--rgb: 74, 85, 104;
    
    /* Status colors - dark theme optimized */
    --theme-alert-color: #fc8181; /* Softer red for dark mode */
    --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; /* Softer orange */
    --theme-warning-color--rgb: 246, 173, 85;
    --theme-warning-color--secondary: #744210;
    --theme-warning-label: #1a202c;
    
    --theme-success-color: #68d391; /* Softer green */
    --theme-success-color--rgb: 104, 211, 145;
    --theme-success-color--secondary: #22543d;
    --theme-success-label: #1a202c;
    
    --theme-message-color: #9f7aea; /* Softer purple */
    --theme-message-label: #1a202c;
    
    /* Custom variables */
    --theme-alt-text: #2d3748;
    --theme-accent-bg: #2d3748;
    --theme-infobox-bg: #2d3748;
    
    /* Your main dark color */
    --color-player: #339193; /* Your specified dark theme color */
    --color-accent: #4fd1c7; /* Complementary teal */
    --color-npc: #9f7aea; /* Complementary purple */
    
    /* 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 - darker for dark theme */
    --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 */
	    
    /*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;
    /* Gray scale - optimized for readability */
    --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 for complementary colors */
    --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 - improved contrast */
.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 - improved contrast */
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;
}