MediaWiki:Common.css

/* Font drip */ @font-face { font-family: DTM-Mono; src: url(/resources/fonts/DTM-Mono.otf); } @font-face { font-family: DTM-Sans; src: url(/resources/fonts/DTM-Sans.otf); }

@font-face { font-family: Futura; src: url(/resources/fonts/Futura-CondensedLight.otf); }

.font-dtm-mono, .font-dtm-mono * { font-family: DTM-Mono; }

.font-dtm-sans, .font-dtm-sans * { font-family: DTM-Sans; } /* Root var colors */
 * root {

--theme-body-dynamic-color-1: #fff; --theme-body-dynamic-color-1--rgb: 255,255,255; --theme-body-dynamic-color-2: #e6e6e6; --theme-body-dynamic-color-2--rgb: 230,230,230; --theme-page-dynamic-color-1: #000; --theme-page-dynamic-color-1--rgb: 0,0,0; --theme-page-dynamic-color-1--inverted: #fff; --theme-page-dynamic-color-1--inverted--rgb: 255,255,255; --theme-page-dynamic-color-2: #3a3a3a; --theme-page-dynamic-color-2--rgb: 58,58,58; --theme-sticky-nav-dynamic-color-1: #fff; --theme-sticky-nav-dynamic-color-1--rgb: 255,255,255; --theme-sticky-nav-dynamic-color-2: #e6e6e6; --theme-sticky-nav-dynamic-color-2--rgb: 230,230,230; --theme-link-dynamic-color-1: #fff; --theme-link-dynamic-color-1--rgb: 255,255,255; --theme-link-dynamic-color-2: #e6e6e6; --theme-link-dynamic-color-2--rgb: 230,230,230; --theme-accent-dynamic-color-1: #fff; --theme-accent-dynamic-color-1--rgb: 255,255,255; --theme-accent-dynamic-color-2: #e6e6e6; --theme-accent-dynamic-color-2--rgb: 230,230,230; --theme-body-background-color: #090b0f; --theme-body-background-color--rgb: 9,11,15; --theme-body-text-color: #fff; --theme-body-text-color--rgb: 255,255,255; --theme-body-text-color--hover: #cccccc; --theme-sticky-nav-background-color: #182e44; --theme-sticky-nav-background-color--rgb: 24,46,68; --theme-sticky-nav-text-color: #fff; --theme-sticky-nav-text-color--hover: #cccccc; --theme-page-background-color: #feffff; --theme-page-background-color--rgb: 254,255,255; --theme-page-background-color--secondary: #f1f2f2; --theme-page-background-color--secondary--rgb: 241,242,242; --theme-page-text-color: #3a3a3a; --theme-page-text-color--rgb: 58,58,58; --theme-page-text-color--hover: #6d6d6d; --theme-page-text-mix-color: #9c9d9d; --theme-page-text-mix-color-95: #f4f5f5; --theme-page-accent-mix-color: #8f9598; --theme-page-headings-font: 'Work Sans'; --theme-link-color: #1764b7; --theme-link-color--rgb: 23,100,183; --theme-link-color--hover: #0b325c; --theme-link-label-color: #fff; --theme-accent-color: #202a30; --theme-accent-color--rgb: 32,42,48; --theme-accent-color--hover: #485f6d; --theme-accent-label-color: #fff; --theme-border-color: #cdcece; --theme-border-color--rgb: 205,206,206; --theme-alert-color: #bf0017; --theme-alert-color--rgb: 191,0,23; --theme-alert-color--hover: #59000a; --theme-alert-color--secondary: #bf0017; --theme-alert-label: #fff; --theme-warning-color: #cf721c; --theme-warning-color--rgb: 207,114,28; --theme-warning-color--secondary: #ce711b; --theme-warning-label: #000; --theme-success-color: #0c742f; --theme-success-color--rgb: 12,116,47; --theme-success-color--secondary: #0c742f; --theme-success-label: #fff; --theme-message-color: #753369; --theme-message-label: #fff; --theme-community-header-color: #ffffff; --theme-community-header-color--hover: #ffffff; --theme-background-image-opacity: 76%; --theme-page-text-opacity-factor: 0.85; --theme-body-text-opacity-factor: 0.7; --theme-link-color--visited: #33806f; --theme-link-color--external: #3366bb; --theme-page-background-color--secondary: #e6f4fa; --theme-page-background-color--tertiary: #bfd2df; --theme-page-background-color--quaternary: #e1f2f5; --theme-page-background-color--quinary: #95b4ca; --theme-page-background-color--light: #f9f9f9; --theme-page-background-color--gray: #ddd; --theme-border-color-alt: #818181; --ace-background-color: #e4f0f6; --ace-text-color: #2a2a2a; --ace-table-background-color: #f0f7f7; --ace-table-text-color: #000; --ace-table-heading-background-color: #e5cb69; } /* ################################################################ */ /* ###                                                         ### */ /* ###            ADD CODE TO THE APPROPRIATE SECTION. ### */ /* ###              SEE TABLE OF CONTENTS BELOW. ### */ /* ###                                                         ### */ /* ### CSS added to this file is applied to the entire site. ### */ /* ### Note that Kid Aces is the coolest. ### */ /* ###                                                         ### */ /* ################################################################ */

/* ############################################ */ /* ### OVERRIDE COLORS IN EDITOR NOTICE IN ### */ /* ### DARK MODE. Valid as of Mar 13 2022 ### */ /* ###    Edit a page. This is the help   ### */ /* ###        text box at the top          ### */ /* ###           User:Eckserah             ### */ /* ############################################ */ .smw-editpage-help { background: var(--theme-page-background-color--secondary); }

/* ############################################ */ /* ###      OVERRIDE SOME COLORS ON        ### */ /* ###      IMAGE PAGES IN DARK MODE. ### */ /* ###      Valid as of Mar 13 2022        ### */ /* ###           User:Eckserah             ### */ /* ############################################ */

background-color: var(--theme-page-background-color--secondary); }
 * 1) filetoc {

.mw_metadata th, .mw_metadata td { background-color: var(--theme-page-background-color--secondary); }

/* ############################################ */ /* ### OVERRIDE COLORS FOR INPUT ELEMENTS  ### */ /* ###            IN DARK MODE             ### */ /* ###      Valid as of Mar 13 2022        ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

/*#content input, background: var(--theme-page-background-color--secondary); color: var(--theme-page-text-color); border-color: var(--theme-border-color); }
 * 1) content select {

background: var(--theme-page-background-color--ternary); color: var(--theme-page-text-color); border-color: var(--theme-border-color); }
 * 1) content input:hover {

background: var(--theme-page-background-color--secondary); color: var(--theme-page-text-color); border-color: var(--theme-border-color); }*/
 * 1) content textarea {

/* ############################################ */ /* ### OVERRIDE CORRECT COLOR OF CARET IN  ### */ /* ### VISUAL EDITOR IN DARK MODE          ### */ /* ############################################ */

.CodeMirror-cursor { border-left-color: var(--theme-page-text-color); }

/* ########################################################################## */ /* ### BASE STYLE                                                        ### */ /* ### Style relating to basic MediaWiki elements. ### */ /* ########################################################################## */

/* ############################################ */ /* ### THEME COLORS                        ### */ /* ############################################ */

/* Shared colors */
 * root {

--theme-accent-dynamic-color-3: #e3df65; --theme-widget-background: none; }

/* Light theme */ .theme-fandomdesktop-light { /* Colors for hyperlinks */ --theme-link-color--visited: #5a3696; --theme-link-color--external: #3366bb;

/* Various shades of the page background color */ /* All background colors should support *black* text */ --theme-page-background-color--secondary: #e6f4fa; --theme-page-background-color--tertiary: #bfd2df; --theme-page-background-color--quaternary: #e1f2f5; --theme-page-background-color--quinary: #95b4ca;

/* Variants of the page background color */ --theme-page-background-color--light: #f9f9f9; --theme-page-background-color--gray: #ddd; --theme-border-color-alt: #818181; /* Used for ace content */ --ace-background-color: #e4f0f6; --ace-text-color: #2a2a2a; --ace-table-background-color: #f0f7f7; --ace-table-text-color: #000; --ace-table-heading-background-color: #e5cb69; }

/* Dark theme */ .theme-fandomdesktop-dark { /* Colors for hyperlinks */ --theme-link-color--visited: #84C4D5; --theme-link-color--external: #3366bb;

/* Various shades of the page background color */ /* All background colors should support *white* text */ --theme-page-background-color--secondary: #252629; /* overrides default */ --theme-page-background-color--tertiary: #343537; --theme-page-background-color--quaternary: #383f4e; --theme-page-background-color--quinary: #3f4e58;

/* Variants of the page background color */ --theme-page-background-color--light: #191919; --theme-page-background-color--gray: #262f30; --theme-border-color-alt: #4f4f51; /* Used for ace content */ --ace-background-color: var(--theme-page-text-mix-color-95); --ace-text-color:var(--theme-page-text-color); --ace-table-background-color: var(--theme-page-background-color--light); --ace-table-text-color: var(--theme-sticky-nav-dynamic-color-2); --ace-table-heading-background-color: var(--theme-sticky-nav-background-color); }

.theme-fandomdesktop-dark .invert-if-dark-theme { filter: invert(100%); }

/* ############################################ */ /* ### SITE SUB                            ### */ /* ### Added by: Satan                     ### */ /* ############################################ */

/* Display "From the Independent Fallout Wiki" in skins that support it, such as vector, monobook, timeless, modern */ #siteSub { display: block; }

/* ############################################ */ /* ### GENERAL TWANGERS                    ### */ /* ############################################ */

/* Smaller text for tag */ .references { font-size: 11px; line-height: 16px; }

/* Links */ /* Color transition does not work well on :visited links, so disable. */   transition: none; }   color: var(--theme-link-color--visited); }   color: var(--theme-link-color--external); }   color: var(--theme-alert-color); }   color: var(--theme-alert-color-hover); }
 * 1) content a {
 * 1) content a:visited {
 * 1) content .external {
 * 1) content .new {
 * 1) content .new:hover {

/* and, but not for source editor */ background-color: var(--theme-page-background-color--secondary); }   border: 1px dashed var(--theme-border-color); }
 * 1) content code:not(.CodeMirror-line),
 * 2) content pre:not(.CodeMirror-line) {
 * 1) content pre:not(.CodeMirror-line) {

/* No bullet points in table of contents */ .toc ul { list-style: none; margin-left: 0; }

/* Enforce bullet points in collapsibles */ .mw-collapsible ul > li, .va-table ul > li { list-style: disc; }

/* ############################################ */ /* ### TABLES                              ### */ /* ############################################ */

.va-table { background: var(--theme-page-background-color--secondary); border-collapse: collapse; empty-cells: show; font-size: 12px; line-height: 16.5px; margin-bottom: 5px; border-radius: 12px; }

.va-table td, .va-table th { border: 1px solid var(--theme-border-color); padding: 1px 2px; background: transparent; }

.va-table tr { background: var(--theme-page-background-color--secondary); }

.va-table th { background: var(--theme-page-background-color--quinary); color: var(--theme-page-text-color); font-weight: bold; }

.va-table-collapse .collapseButton { margin-left: 10px !important; position: absolute; color: var(--theme-accent-dynamic-color-3); }

.va-table > tr.va-table-highlight, .va-table > * > tr.va-table-highlight { background: var(--theme-page-background-color--tertiary); }

.va-table ul + p, .va-table ul + ol, .va-table ul + ul, .va-table ol + p, .va-table ol + ol, .va-table ol + ul, .va-table p + p, .va-table p + ol, .va-table p + ul { margin-top: 5px; }

/* Tables with specific vertical alignment for cells */ .va-table-top td { vertical-align: top; }

.va-table-middle td { vertical-align: middle; }

.va-table-bottom td { vertical-align: bottom; }

/* Tables with specific horizontal alignment for cells */ .va-table-center td { text-align: center; }

.va-table-left td { text-align: left; }

.va-table-right td { text-align: right; }

/* Tables which are full width in Oasis */ .va-table-full { width: 100%; }

/* Tables in which the first column starts with an icon */ .va-table-icon tr td:first-child { padding-left: 18px; text-indent: -18px; }

.va-table-full-ib, .va-table-full-infobox { width: 380px; }

.va-table-shaded tr:nth-child(even) { background-color: var(--theme-page-background-color--tertiary); }

/* Adapting lists & paragraphs to altered line-height */ .va-table ul, .va-table ol { margin: 0 0 0 20px; }

.va-table li { line-height: inherit; }

.va-table p { line-height: inherit; margin: 0; }

/* ########################################################################## */ /* ### REUSABLE ELEMENTS                                                 ### */ /* ### Style for classes that can be applied to divs without relying on  ### */ /* ### templates. ### */ /* ########################################################################## */

/* ############################################ */ /* ### DIALOGUE TABLE                      ### */ /* ### Used to display dialogue exports. ### */ /* ###                                     ### */ /* ### Used in: various dialogue pages      ### */ /* ############################################ */

. tr th:first-child { width: 165px; }

. tr th:first-child + th + th { width: 65px; }

/* ############################################ */ /* ### GENERIC BOX                         ### */ /* ### A generic box that has contents. ### */ /* ###                                     ### */ /* ### Used on: MediaWiki:Copyrightwarning  ### */ /* ###         MediaWiki:Recentchangestext ### */ /* ############################################ */

.va-genericbox { background: var(--theme-page-background-color); border: 1px solid var(--theme-border-color); border-radius: 15px; }

/* ############################################ */ /* ### TWO-COLUMN FLEX BOX                 ### */ /* ### Use this instead of a table if two  ### */ /* ### columns suffice. ### */ /* ###                                     ### */ /* ### Used in: very few pages              ### */ /* ############################################ */

.np-flex { width: 330px; display: inline-block; border: solid 1px var(--theme-border-color); }

.np-box { padding: 0 10px; width: auto; vertical-align: top; }

.np-box-top { font-weight: bold; }

.np-widebox { clear: right; float: right; margin: 0 0 0.5em 1.5em; border: 1px solid var(--theme-border-color); box-shadow: 2px 2px 2px var(--theme-border-color); display: inline-block; width: 290px; }

.np-widebox-title a:link, .np-widebox-title a:visited { color: var(--theme-accent-dynamic-color-3) !important; }

.np-widebox-title { font-size: 118%; font-weight: bold; background: var(--theme-accent-color) var(--theme-widget-background); border: 1px solid var(--theme-border-color); color: var(--theme-accent-dynamic-color-1); padding: 1px 2px; text-align: center; margin: 1px 1px 0px; }

.np-widebox-groups { display: table; border-spacing: 1px; margin: 0; width: 100%; }

.np-widebox-groups > div { display: table-row; }

.np-widebox-cell-left, .np-widebox-cell-right { display: table-cell; padding: 1px 2px; }

.np-widebox-cell-left { background: var(--theme-page-background-color--quinary); border: 1px solid var(--theme-border-color); text-align: center; font-size: 12px; font-weight: bold; vertical-align: middle; width: 33%; }

.np-widebox-cell-right { background: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color); font-size: 11px; line-height: 16px; vertical-align: top; }

.np-widebox-columns { font-size: 11px; width: 100%; list-style: none; text-align: center; }

.np-widebox-columns ul, .np-widebox-columns li { list-style: none; padding: 0; margin: 0; line-height: 16px; }

.np-widebox-columns td { background: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color); width: 50%; }

/* ########################################################################## */ /* ### EXTENSIONS                                                        ### */ /* ### Overrides for extensions. ### */ /* ########################################################################## */

/* ############################################ */ /* ### CATEGORYTREE                        ### */ /* ### Applies to: Extension:Categorytree  ### */ /* ############################################ */

.va-pagelist a.CategoryTreeLabelPage, .va-pagelist-hidefirst a.CategoryTreeLabelPage { font-style: normal; }

.va-pagelist div.CategoryTreeItem, .va-pagelist-hidefirst div.CategoryTreeItem { display: list-item; list-style-type: disc; list-style-position: outside; margin-left: 1.5em; }

.va-pagelist-hidefirst div.CategoryTreeSection:first-child { display: none; }

.CategoryTreeItem .CategoryTreePageBullet { border-left: 0px !important; }

/* ############################################ */ /* ### SLIDERS                             ### */ /* ### Applies to: Extension:PhotoGallery  ### */ /* ############################################ */

.np-portal-slider-envelope { margin: -3px -5px; }

.np-portal-slider-envelope .wikiaPhotoGallery-slider-body { width: 664px; }

.np-portal-slider-envelope .wikiaPhotoGallery-slider-body div.nav { padding: 16px 0px 5px; }

.np-portal-slider-envelope .wikiaPhotoGallery-slider { margin-left: 0px !important; }

/* ########################################################################## */ /* ### TEMPLATES                                                         ### */ /* ### Styling that belongs to a template. Don't add CSS here if the     ### */ /* ### template also works with inline CSS. ### */ /* ########################################################################## */

/* ############################################ */ /* ### TITLE ICONS                         ### */ /* ### Used in: Template:Games             ### */ /* ############################################ */

position: relative; width: inherit; }
 * 1) va-titleicons-wrapper {

.va-titleicons, .va-titleicons-hover { font-size: 11px; position: absolute; padding-top: 7px !important; margin: 0; max-width: 275px; z-index: 3; }

.va-titleicons { background: transparent; right: 0; height: 25px; line-height: 25px; overflow: hidden; text-align: right; border: none; display: none; }

.va-titleicons-hover { background: var(--theme-page-background-color); right: -2px; height: auto; overflow: auto; text-align: center; border: 2px solid var(--theme-border-color); padding: 8px 5px; }

.va-titleicons-preview { text-align: right; }

.va-titleicons-fullsize, .va-titleicons-hover .va-titleicons-preview { display: none; }

.va-titleicons-hover .va-titleicons-fullsize { display: block; }

.va-titleicons-more { float: right; padding: 0 2px; line-height: 25px; }

.va-titleicons-chevron { vertical-align: middle; border-color: var(--theme-border-color) transparent transparent; border-style: solid; border-width: 3px; width: 0; }

/* Oasis */ .skin-oasis .va-titleicons { top: -30px; right: 10px; }

.skin-oasis .va-titleicons-hover { top: -32px; right: 10px; }

.skin-oasis.ns-0 .WikiaPageHeader, .skin-oasis.ns-4 .WikiaPageHeader, .skin-oasis.ns-110 .WikiaPageHeader, .skin-oasis.ns-502 .WikiaPageHeader { margin-bottom: 30px; }

.skin-oasis.mainpage .WikiaPageHeader { margin-bottom: 10px; }

/* ############################################ */ /* ### NAVBOXES                            ### */ /* ### Used in: Template:Navbox            ### */ /* ############################################ */

/* Outer table - widths, floats */ .va-navbox { width: 100%; font-size: 11px; line-height: 16px; border-radius: 15px; }

.va-navbox-bottom { width: 100%; clear: both; margin: 5px auto 0; }

.va-navbox-left { width: 200px; clear: left; float: left; margin: 0 1.5em 0.5em 10px; }

.va-navbox-right { width: 200px; clear: right; float: right; margin: 10px 0 0.5em 1.5em; }

/* Inner tables */ .va-navbox-brick { width: 100%; margin: 0; border-radius: 15px; }

/* Cellspacing */ .va-navbox, .va-navbox-border, .va-navbox-brickcont, .va-navbox-padding, .va-navbox-space-h, .va-navbox-space-v { background: transparent; }

.va-navbox-padding { padding: 1px; }

.va-navbox-space-h { width: 1px; }

.va-navbox-columncont .va-navbox-space-h { width: 0; border-right: 0px solid var(--theme-border-color); }

.va-navbox-space-v { height: 1px; font-size: 1pt; line-height: 0; }

/* Cell styles and widths */ /* Remember to update the column width calculations when changing widths */ .va-navbox-title { background: var(--theme-accent-color) var(--theme-widget-background); border: 0px solid var(--theme-border-color); font-weight: normal; color: var(--theme-accent-dynamic-color-1); padding: 4px 2px; border-radius: 15px; }

.va-navbox-headertext, .va-navbox-titletext { font-weight: bold; padding-left: 40px; padding-right: 40px; }

.va-navbox-maintitle .va-navbox-titletext { font-size: 120%; }

.va-navbox-editlink { float: left; width: 40px; text-align: left; margin-right: -100%; }

.va-navbox-cell, .va-navbox-colgroup, .va-navbox-column, .va-navbox-footer, .va-navbox-group, .va-navbox-header, .va-navbox-image, .va-navbox-subgroup { padding: 1px 2px; border-radius: 15px; }

.va-navbox-colgroup, .va-navbox-group, .va-navbox-subgroup { font-weight: bold; border-radius: 15px; }

.va-navbox-group, .va-navbox-subgroup { width: 15%; text-align: center; border-radius: 15px; }

.va-navbox-footer, .va-navbox-group, .va-navbox-header { background: var(--theme-page-background-color--quinary); border: 0px solid var(--theme-border-color); border-radius: 15px; }

.va-navbox-colgroup, .va-navbox-subgroup { background: var(--theme-page-background-color--quaternary); border: 0px solid var(--theme-border-color); border-radius: 15px; }

.va-navbox-cell, .va-navbox-column, .va-navbox-image { background: var(--theme-page-background-color--secondary); border: 0px solid var(--theme-border-color); border-radius: 15px; }

.va-navbox-cell-nogroups, .va-navbox-column, .va-navbox-colgroup, .va-navbox-footer, .va-navbox-image { text-align: center; }

.va-navbox-cell-withgroups { text-align: left; }

.va-navbox-column { vertical-align: top; }

.va-navbox-image { width: 8%; }

/* Lists in column rows */ .va-navbox-formatlist ul, .va-navbox-formatlist li { list-style: none; line-height: 16px; margin: 0.6em 0; padding: 0; }

.va-navbox-formatlist li li { font-size: 90%; }

.va-navbox-formatlist li ul { margin-top: -0.1em; margin-bottom: 0.5em; }

.va-navbox-formatlist li ul li { margin: 0; }

/* Nested */ .va-navbox .va-navbox-nested { font-size: 100%; }

.va-navbox-nested .va-navbox-title { background: var(--theme-page-background-color--quinary); color: var(--theme-page-text-color); border: 0px solid var(--theme-border-color); }

.va-navbox-nested .va-navbox-footer, .va-navbox-nested .va-navbox-group, .va-navbox-nested .va-navbox-header { background: var(--theme-page-background-color--quaternary); }

.va-navbox-nested .va-navbox-colgroup, .va-navbox-nested .va-navbox-subgroup { background: var(--theme-page-background-color--tertiary); }

/* Links (using #content to give higher priority) */ color: var(--theme-accent-dynamic-color-1); }
 * 1) content .va-navbox-editlink .va-navbar-item a,
 * 2) content .va-navbox-editlink .va-navbar-item a:link,
 * 3) content .va-navbox-editlink .va-navbar-item a:visited,
 * 4) content .va-navbox-editlink .va-navbar-item a:hover,
 * 5) content .va-navbox-editlink .va-navbar-item a:active {

white-space: nowrap; }
 * 1) content .va-navbox-nowraplinks .va-navbox-cell a,
 * 2) content .va-navbox-nowraplinks .va-navbox-column a {

color: var(--theme-accent-dynamic-color-3); }
 * 1) content .va-navbox-maintitle a,
 * 2) content .va-navbox-maintitle a:link,
 * 3) content .va-navbox-maintitle a:visited {

color: var(--theme-accent-dynamic-color-1); }
 * 1) content .va-navbox-maintitle a:hover,
 * 2) content .va-navbox-maintitle a:active {

/* Lowercase "Collapse" and "Expand" */ .mw-collapsible-text { text-transform: lowercase; }

/* Printing */ @media print { .va-navbox, .va-navbox-border { display: none; } }

/* ############################################ */ /* ### COPYRIGHT & SOURCE BOXES            ### */ /* ### Used in: Template:Copyrightbox      ### */ /* ###         Template:Sourcebox          ### */ /* ############################################ */

/* Template:Copyrightbox */ .va-copybox { color: var(--theme-page-text-color); background-color: #daefe8; clear: both; padding: 2px 5px; border-top: 4px solid #0959c1; font-size: 12px; line-height: 20px; width: 100%; border-radius: 9px; }

.va-copybox th { width: 40px; text-align: center; vertical-align: middle; padding: 2px 5px; }

.va-copybox td { padding: 1px 5px; width: 100%; }

.va-copybox + .va-copybox { margin-top: 2px; }

/* Template:Sourcebox */ .va-sourcebox { margin: 0; border-collapse: collapse; font-size: 12px; line-height: 16px; }

.va-sourcebox th { vertical-align: middle; text-align: center; padding: 0 5px; }

.va-sourcebox td { padding: 0; }

.va-sourcebox td span { border-top: 1px solid var(--theme-border-color); border-bottom: 1px solid var(--theme-border-color); display: block; padding: 2px 5px; float: left; }

/* Printing */ @media print { .va-copybox, .va-sourcebox { background: transparent none; } }

/* ############################################ */ /* ### DIRECTION / MESSAGE BOXES           ### */ /* ### Used in: Template:Directionbox      ### */ /* ###         Template:Mbox               ### */ /* ############################################ */

/* Template:Directionbox */ .va-dirbox { color: var(--theme-page-text-color); background-color: #c1cdc9; clear: left; padding: 2px 5px; border: 0px solid var(--theme-border-color); font-size: 11px; line-height: 12px; border-collapse: collapse; }

.va-dirbox + .va-dirbox { margin-top: -3px; }

.va-dirbox th { width: 40px; text-align: center; vertical-align: middle; padding: 1px 0 1px 5px; line-height: 15px; }

.va-dirbox td { padding: 1px 5px; width: 100%; }

/* Template:Mbox */ .va-mbox { color: var(--theme-page-text-color); background-color: var(--theme-page-background-color--gray); border: 1px solid var(--theme-border-color); padding: 0; margin: 0 0 10px; font-size: 11px; line-height: 16px; border-collapse: collapse; }

.va-mbox + .va-mbox { margin-top: -8px; }

.va-mbox th { width: 40px; text-align: center; vertical-align: middle; padding: 1px 0 1px 5px; }

.va-mbox td { padding-left: 5px; width: 100%; }

/* Printing */ @media print { .va-dirbox, .va-mbox { display: none; } }

/* ############################################ */ /* ### HATNOTES                            ### */ /* ### Used in: Template:Hatnote           ### */ /* ############################################ */

.va-hatnote { padding-left: 10px; font-style: italic; margin-bottom: 2px; margin-top: 1.5px; }

/* ############################################ */ /* ### INTRO                               ### */ /* ### Used in: Template:Intro             ### */ /* ############################################ */

.va-intro-box { background: transparent; margin: 0 auto 10px; padding: 1px; border: 1px solid var(--theme-border-color); box-shadow: 2px 2px 2px var(--theme-border-color); }

.va-intro-box .va-intro { background: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color); width: 100%; }

.va-intro-box .va-intro td, .va-intro-image { padding-left: 2px; padding-right: 2px; }

.va-intro-box .va-intro-firstrow { padding-top: 2px; }

.va-intro td { padding-bottom: 2px; }

.va-intro-header { font-size: 16px; font-weight: bold; }

.va-intro-bullets { font-size: 11px; line-height: 16px; vertical-align: top; }

/* ############################################ */ /* ### AUDIO SNIPPETS, QUOTES & TRANSCRIPTS ### */ /* ### Used in: Template:Quotation         ### */ /* ###         Template:Transcript         ### */ /* ############################################ */

/* Container */ .va-listen, .va-quotation, .va-transcript { line-height: 18px; padding: 10px 45px; }

.va-quotation { overflow: hidden; } table td .va-quotation { overflow: visible; } .va-quotation-body { display: block; }

.va-quotation-quote { display: block; position: relative; z-index: 1; }

.va-listen-left, .va-listen-right, .va-quotation-left, .va-quotation-right { border-bottom: 1px solid var(--theme-border-color); border-top: 1px solid var(--theme-border-color); width: 200px; }

.va-listen-left, .va-quotation-left { clear: left; float: left; margin: 10px 10px 10px 10px; }

.va-listen-right, .va-quotation-right { clear: right; float: right; margin: 10px 10px 10px 10px; }

.va-quotation-center { text-align: center; }

.va-quotation-center .va-quotation-body { display: inline-block; }

/* Quotation marks/icons */ .va-listen-icon, .va-newsquote-quot-l, .va-newsquote-quot-r, .va-quotation-quot-l, .va-quotation-quot-r { width: 40px; z-index: -1; }

.va-listen-icon, .va-newsquote-quot-l, .va-newsquote-quot-r, .va-transcript-icon { position: relative; }

.va-quotation-quot-l, .va-quotation-quot-r { position: absolute; }

.va-listen-icon, .va-transcript-icon { float: left; left: -30px; margin-right: -40px; top: -5px; }

.va-newsquote-quot-l, .va-newsquote-quot-r, .va-quotation-quot-l, .va-quotation-quot-r { color: var(--theme-page-background-color--quinary); font: bold 55px/40px serif; height: 18px; }

.va-newsquote-quot-l, .va-quotation-quot-l { left: -27px; text-align: left; }

.va-newsquote-quot-r, .va-quotation-quot-r { right: -27px; text-align: right; }

.va-newsquote-quot-l { float: left; margin-right: -40px; }

.va-newsquote-quot-r { float: right; margin-left: -40px; }

.va-quotation-quot-l { top: -2px; }

.va-quotation-quot-r { bottom: 2px; }

/* Quoted text/audio file desc */ .va-listen-item, .va-listen-item .ogg-player-options, .va-newsquote-text, .va-quotation-text { font-size: 12px; }

.va-inlinequote-text, .va-listen-text, .va-newsquote-text, .va-quotation-text { font-style: italic; }

.va-transcript-text { font-family: monospace !important; }

.va-quotation-text { display: block; margin-top: -0.4em; text-align: left; }

.va-quotation-text ol, .va-quotation-text p, .va-quotation-text ul { margin-bottom: 0; }

/* Source */ .va-newsquote-source, .va-quotation-source { padding: 5px 15px 0; text-align: right; }

.va-quotation-source { display: block; font-size: 10px; line-height: 15px; }

/* "Incomplete quote" dots */ .va-newsquote-dots { font-style: normal; padding: 3px 0; }

/* Audio file list */ .va-listen-item { margin: 0 auto; width: 180px; }

.va-listen-item audio { margin-bottom: 5px; width: 100%; }

.va-listen-item div { margin-bottom: 2px; }

.va-listen-item + .va-listen-item { border-top: 1px solid var(--theme-border-color); margin-top: 5px; }

.np-quote-snd-trigger { display: inline-block; position: absolute; top: auto; left: auto; padding: 0px 2px; }

.np-quote-snd-trigger:hover .np-quote-snd-player { visibility: visible; }

.np-quote-snd-player { visibility: hidden; position: absolute; top: -55px; left: 100%; z-index: 100 !important; width: 300px; overflow-x: hidden; margin: 0; padding: 5px 10px 10px 10px; border: 1px solid var(--theme-border-color); border-radius: 5px; box-shadow: var(--theme-border-color) 2px 2px 5px 0px; background-color: White; color: Black; text-align: left; font: normal normal normal 13px / normal Helvetica, Arial, sans-serif; }

.np-quote-snd-player-img { float: left; width: 50px; }

.np-quote-snd-player-title { width: 250px; height: 50px; display: table-cell; vertical-align: middle; }

.np-quote-snd-player-title span { font-size: 18px; }

/* ############################################ */ /* ### STAT TABLES                         ### */ /* ### Used in: Template:Stats creature    ### */ /* ############################################ */

.va-stats-creature-name { text-align: center; }

.va-stats-creature-icontable { margin: 0 auto; }

.va-stats-creature-icontable td { border: none; }

.va-stats-creature-icon { position: absolute; top: 0; left: 0; width: 20px; text-align: center; font-weight: bold; }

.va-stats-creature-item { position: relative; padding: 0 2px 0 22px; min-width: 10px; }

.va-stats-creature-item + .va-stats-creature-item { margin-top: 2px; }

.va-stats-creature-icontable-full, .va-stats-creature-layout-1 td { width: 100%; }

.va-stats-creature-layout-2 td { width: 50%; }

.va-stats-creature-layout-3 td { width: 33%; }

.va-stats-creature-layout-3 td:first-child { width: 34%; }

.va-stats-creature-layout-4 td { width: 25%; }

/* ################################################ */ /* ### CRAFTING TABLES                         ### */ /* ### Used in: Template:Crafting table        ### */ /* ### Used in: Template:Crafting table FO76   ### */ /* ################################################ */

.ace-crafting-table { font-size: 11px; line-height: 16px; margin-bottom: 5px; }

.ace-crafting-block { border: 1px solid var(--theme-border-color); margin: 0; padding: 1px 2px; background-color: var(--theme-page-background-color--secondary); }

.ace-crafting-block + .ace-crafting-block { margin-top: 3px; }

.ace-crafting-requirement { background-color: var(--theme-page-background-color--quaternary) !important; }

.ace-crafting-highlight { background-color: var(--theme-page-background-color--quinary) !important; }

.ace-crafting-table .selflink { font-weight: normal; }

/* ############################################ */ /* ### CONSOLE COMMANDS                    ### */ /* ### Used in: Template:Console           ### */ /* ############################################ */

.WikiaArticle .va-console, /* Old skin only */ .theme-fandomdesktop-light .va-console { background-color: #cfc; } .theme-fandomdesktop-dark .va-console { background-color: #07401e; } .va-console { font-family: monospace; }

.va-console-cmd { color: var(--theme-page-text-color); }

/* ############################################ */ /* ### ENGINE IDS                          ### */ /* ### Used in: Template:ID                ### */ /* ###         Template:DLC ID             ### */ /* ###         Template:Proto              ### */ /* ############################################ */

.va-formid, .va-protoid { font-family: monospace; }

/* ############################################ */ /* ### ITEM EFFECTS                        ### */ /* ### Used in: Template:Effect            ### */ /* ############################################ */ .WikiaArticle .va-effect-negative, /* This is for old skin only */ .WikiaArticle .va-effect-negative a, /* This is for old skin only */ .theme-fandomdesktop-light .va-effect-negative, .theme-fandomdesktop-light .va-effect-negative a { color: #820000 !important; } .theme-fandomdesktop-dark .va-effect-negative, .theme-fandomdesktop-dark .va-effect-negative a { color: #cf0000 !important; }

.WikiaArticle .va-effect-positive, /* This is for old skin only */ .WikiaArticle .va-effect-positive a, /* This is for old skin only */ .theme-fandomdesktop-light .va-effect-positive, .theme-fandomdesktop-light .va-effect-positive a { color: #008200 !important; } .theme-fandomdesktop-dark .va-effect-positive, .theme-fandomdesktop-dark .va-effect-positive a { color: #008200 !important; }

/* ############################################ */ /* ### TOCs                                ### */ /* ### Used in: Template:TOC               ### */ /* ###         Template:Document TOC       ### */ /* ############################################ */

.va-toclimit-2 .toclevel-1 ul, .va-toclimit-3 .toclevel-2 ul, .va-toclimit-4 .toclevel-3 ul, .va-toclimit-5 .toclevel-4 ul, .va-toclimit-6 .toclevel-5 ul, .va-toclimit-7 .toclevel-6 ul { display: none; }

.skin-oasis .va-documenttoc th h2 { font-size: 14px; font-weight: normal; border: 0; margin: 0; }

/* ############################################ */ /* ### SHORTCUTS                           ### */ /* ### Used in: Template:Shortcut          ### */ /* ############################################ */

.va-shortcut { margin: 0 0 5px 5px; padding: 3px 5px; text-align: center; float: right; font-size: 10px; line-height: 15px; }

/* ############################################ */ /* ### SPECIAL TAGS                  ### */ /* ### Used in: Template:Pre fake          ### */ /* ############################################ */

.va-pre-fake { background-color: var(--theme-page-background-color--light); overflow: auto; font-family: monospace; white-space: pre;

border: 1px dashed var(--theme-border-color); line-height: 14px; padding: 12px; }

/* ############################################ */ /* ### TEMPLATE DOCUMENTATION              ### */ /* ### Used in: Template:Docparam          ### */ /* ###         Template:Documentation      ### */ /* ############################################ */

/* Template:Docparam */ .va-docparam { padding: 0 2px 0 20px; text-indent: -20px; margin-bottom: 3px; background: var(--theme-page-background-color--light); border: 1px dotted var(--theme-border-color); overflow: auto; }

.va-docparam-icon { margin: 0; padding: 0; width: 20px; float: left; }

.va-docparam-default { float: right; font-size: 10px; }

.va-docparam-params { font-family: monospace; }

.va-docparam-desc { margin: 0; padding: 0 0 5px 20px; }

/* Template:Documentation */ .va-documentation, .va-documentation-bar-top, .va-documentation-bar-bottom { border-color: var(--theme-border-color); border-style: solid; clear: both; }

.va-documentation { border-width: 1px; margin: 10px 0; }

.va-documentation-bar-top, .va-documentation-bar-bottom { background: var(--theme-page-background-color--quaternary); padding: 5px; margin: 0; }

.va-documentation-bar-top { border-width: 0 0 1px 0; }

.va-documentation-bar-bottom { border-width: 1px 0 0 0; text-align: right; }

.va-documentation-links { float: right; text-align: right; }

.va-documentation-content { padding: 10px; margin: 0; }

.va-documentation-small { font-size: 10px; }

/* ############################################ */ /* ### NOTICES                             ### */ /* ### Used in: Template:Notice            ### */ /* ############################################ */

.va-notice { background: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color); margin: 1em; }

.va-notice-image { padding: 0 10px 0 5px; }

.va-notice-sig { text-align: right; }

/* ############################################ */ /* ### CHARTS                              ### */ /* ### Used in: Template:Chart             ### */ /* ############################################ */

.va-chart-quest { background: var(--theme-page-background-color--quinary); border: 1px solid var(--theme-border-color) !important; font-size: 11px; line-height: 16px; }

.va-chart-body { background: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color) !important; font-size: 11px; line-height: 16px; }

.WikiaArticle .va-chart-reward, .theme-fandomdesktop-light .va-chart-reward { background: #e8e8a2; } .theme-fandomdesktop-dark .va-chart-reward { background: #7d7d57; } .va-chart-reward { border: 1px solid var(--theme-border-color) !important; font-size: 11px; line-height: 16px; }

/* ############################################ */ /* ### NOTABLE CONTENT                     ### */ /* ### Used in: Template:Notable content   ### */ /* ############################################ */

.np-collapsible { overflow: hidden; }

width: 100%; text-align: center; background: var(--theme-accent-color) linear-gradient(to bottom, var(--theme-accent-color) 35%, var(--theme-page-accent-mix-color) 65%); color: white; cursor: pointer; margin: 0; border-radius: 5px; }
 * 1) np-helip {

.np-hidden { display: none; }

.np-visible { display: inherit; margin-top: -4px; }

/* ############################################ */ /* ### TICKER                              ### */ /* ### Used in: Template:Ticker            ### */ /* ############################################ */

display: inline; }
 * 1) ticker .CategoryTreeSection,
 * 2) ticker .CategoryTreeItem {

/* ############################################ */ /* ### COLUMNS                             ### */ /* ### Used in: Template:Columns           ### */ /* ############################################ */

.va-columns ul, .va-columns ul li { margin-top: 0; }

.va-columns ul li { margin-bottom: 6px; }

/* ############################################ */ /* ### FALLOUT 76 MAP                      ### */ /* ### Used in: Fallout 76 map             ### */ /* ############################################ */

.f76map { width: 55em; height: 55em; margin: auto; border: 0px solid #20a200; background-image: url(https://vignette.wikia.nocookie.net/fallout/images/5/56/Papermap_city_d.jpg/revision/latest?cb=20191004030323); background-size: 100%; background-repeat: no-repeat; position: relative; }

.f76map-box { width: 240px; height: 240px; margin: auto; border: 0px solid #20a200; background-image: url(https://vignette.wikia.nocookie.net/fallout/images/5/56/Papermap_city_d.jpg/revision/latest/scale-to-width-down/240?cb=20191004030323); background-size: 100%; background-repeat: no-repeat; position: relative; }

/* ############################################ */ /* ### ACE-TEC UNIVERSITY                  ### */ /* ### Used in: Fallout Wiki:Vault-Tec     ### */ /* ###             University              ### */ /* ###         and related articles        ### */ /* ############################################ */

/* Ace pages */ .ace-box { background: var(--ace-background-color); color: var(--ace-text-color); padding: 24px; font-family: "Rubik", Arial, sans-serif; margin: 24px 0 12px; font-size: 14px; line-height: 150%; display: flex; align-items: center; }

/* Ace table */ .ace-box .article-table-wrapper { background: none; }

.ace-table > * > tr > td { background-color: var(--ace-table-background-color); color: var(--ace-table-text-color); }

.ace-table > * > tr > th { background-color: var(--ace-table-heading-background-color); color: var(--ace-table-text-color); padding: 2px; }

.ace-table { font-size: 12px; }

/* ############################################ */ /* ###     Semantic mediawiki fact box     ### */ /* ### 	hide display unless enabled     ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.smw-factbox { display: none !important; }

.smw-factbox.smw-factbox-enabled { display: block !important; }

/* ############################################ */ /* ###            Userbox css              ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.va-userbox { margin: 2px; padding: 0; border-style: solid; border-radius: 14px; clear: none; float: left; height: 52px; width: 220px; border-width: 2px; border-color: #000000; }

.va-userbox .left-cell { text-align: center; vertical-align: middle; padding: 0; height: 50px; width: 50px; font-size: 14pt; }

.va-userbox .middle-cell { padding: 0 4px; vertical-align: middle; line-height: 125%; height: 50px; font-size: 8pt; }

.va-userbox .left-cell { text-align: center; vertical-align: middle; height: 50px; width: 50px; font-size: 14pt; }

/* ############################################ */ /* ### Slightly hacky fix for spacing in   ### */ /* ###    lists after paragraph tags       ### */ /* ###  Adds fix for columns after image   ### */ /* ###  Fix issue with list top margin     ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.page-content p+p+ul, .page-content p+p+ol, .page-content p+p+dl, .page-content p+.va-columns { margin-top: -18px; }

.page-content p.mw-empty-elt+ul, .page-content p.mw-empty-elt+ol { margin-top: 6px; }

.page-content figure+p.mw-empty-elt+.va-columns { margin-top:0px; }

/* ############################################ */ /* ###     Theme based icons switcher      ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.theme-fandomdesktop-light .darkicon { display: none; } .theme-fandomdesktop-dark .lighticon { display: none; }

/* ############################################ */ /* ###      Remove game icons header       ### */ /* ###    ToDo: Remove from Common.js      ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

div#va-titleicons-wrapper { display: none !important; }

/* ############################################ */ /* ### Fix category type selector colors   ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.category-layout-selector__item, .category-layout-selector { color: var(--theme-link-color) !important; }

.category-layout-selector__item.is-active { color: var(--theme-page-text-color--hover) !important; }

/* ############################################ */ /* ###      Fix missing image for          ### */ /* ###    audio files in categories        ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.category-page__members a[href$=".ogg"] img, .category-page__members a[href$=".odm"] img, .category-page__members a[href$=".mp3"] img, .category-page__members a[href$=".oga"] img, .category-page__members a[href$=".flac"] img, .category-page__members a[href$=".wav"] img, .category-page__members a[href$=".opus"] img { content:url("https://static.wikia.nocookie.net/fallout/images/8/8e/Icon_sound.png/revision/latest/scale-to-width-down/50"); }

.wikia-gallery-item a[href$=".ogg"], .wikia-gallery-item a[href$=".odm"], .wikia-gallery-item a[href$=".mp3"], .wikia-gallery-item a[href$=".oga"], .wikia-gallery-item a[href$=".flac"], .wikia-gallery-item a[href$=".wav"], .wikia-gallery-item a[href$=".opus"] { align-items: start; } .wikia-gallery-item a[href$=".ogg"]:after, .wikia-gallery-item a[href$=".odm"]:after, .wikia-gallery-item a[href$=".mp3"]:after, .wikia-gallery-item a[href$=".oga"]:after, .wikia-gallery-item a[href$=".flac"]:after, .wikia-gallery-item a[href$=".wav"]:after, .wikia-gallery-item a[href$=".opus"]:after { content: attr(title); vertical-align: text-bottom; width: 94%; position: absolute; bottom: 0px; line-height: 15px; padding: 0px 5px; word-break: break-word; font-size: 15px; }

.wikia-gallery-item a[href$=".ogg"] img, .wikia-gallery-item a[href$=".odm"] img, .wikia-gallery-item a[href$=".mp3"] img, .wikia-gallery-item a[href$=".oga"] img, .wikia-gallery-item a[href$=".flac"] img, .wikia-gallery-item a[href$=".wav"] img, .wikia-gallery-item a[href$=".opus"] img { content:url("https://fallout.fandom.com/resources-ucp/resources/assets/file-type-icons/fileicon-ogg.png"); height: 100px; vertical-align: top; object-fit: contain; margin-top: 5px; }

/* ############################################ */ /* ###     This style is applied to        ### */ /* ###          all infoboxes. ### */ /* ###     Used in: Template:Infobox       ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.pi-secondary-background { background-image: var(--theme-widget-background); }

/* ############################################ */ /* ###      Change visited link color      ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.theme-fandomdesktop-light .va-navbox-title { background-color: #226d5d; }

.theme-fandomdesktop-light { --theme-link-color--visited: #33806f; --theme-accent-dynamic-color-3: #c7ded3; }

.theme-fandomdesktop-dark { --theme-accent-dynamic-color-3: #b9e6e8; }

/* ############################################ */ /* ###     Positive and negative colors    ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.theme-fandomdesktop-light .positive { color: #005f00; }

.theme-fandomdesktop-light .negative { color: #a70000; }

.theme-fandomdesktop-dark .positive { color: #00cd00; }

.theme-fandomdesktop-dark .negative { color: #ff9393; }

/* ############################################ */ /* ###       Fix extra spacing after       ### */ /* ###         sourcebox contents          ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.div-sourceBox-start+ul, .div-sourceBox-start+p { margin-top: 6px; margin-bottom: 6px; }

/* ############################################ */ /* ###     Interactions table styles       ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.interactions-table { width: 530px; }

.interaction-table td { height: 65px; min-height: 65px; }

.interaction-table td:first-child { width: 65px; min-width: 65px; }

/* ############################################ */ /* ###      Table row highlight style      ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

tr.row-highlight, .ace-table tr.row-highlight, .ace-table tr.row-highlight td { background: var(--theme-page-background-color--tertiary) !important; }

tr.row-highlight td { border: 1px double var(--theme-border-color-alt) !important; }

/* ############################################ */ /* ###         Avatar highlights           ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.profile-info img, #profile-image img, .mwchat-item-avatar img { -webkit-filter: drop-shadow(0 0 4px black); filter: drop-shadow(0 0 4px black); }

.skin-citizen-dark .profile-info img, .skin-citizen-dark #profile-image img, .skin-citizen-dark  .mwchat-item-avatar img { -webkit-filter: drop-shadow(0 0 4px white); filter: drop-shadow(0 0 4px white); }

background: transparent !important; border: 0 !important; }
 * 1) profile-image img {

/* ############################################ */ /* ###      Chat fixes for citizen         ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.skin-citizen .mwchat-useritem { background: var(--color-surface-3) !important; }

.skin-citizen .mwchat-useritem-header { background: var(--color-surface-1) !important; }

.skin-citizen .mwchat-useritem-user { color: inherit !important; }

.skin-citizen .mwchat-useritem-content { border-color: var(--color-surface-4) !important; }

margin-top: 2em !important; }
 * 1) mwchat-options {

margin-left: 5px; }
 * 1) mwchat-options input {

min-height: 450px; }
 * 1) mwchat-content {

.visualClear { clear: both; }

/* ############################################ */ /* ###    Fix edit count table styles      ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.editCountTable, .editCountTable th, .editCountTable td { border: 1px #aaa solid; border-collapse: collapse; }

.editCountTable th, .editCountTable td { padding: 4px; }

/* ############################################ */ /* ###             Lead bio                ### */ /* ### 	      User:Kid Aces             ### */ /* ############################################ */

.lead-bio-container { flex: 1; border: 4px solid #1167b1; background-color: #e6f3f8; padding: 5px; padding-bottom: 35px; border-radius: 11px; width: 50%; flex-basis: 40%; position: relative; }

.lead-bio-footer { position: absolute; bottom: 5px; vertical-align: bottom; width: calc(100% - 10px); }

/* ############################################ */ /* ###            Hover buttons            ### */ /* ### 	    Bull bear bull bear         ### */ /* ############################################ */

.show-when-hovering { display: none; } .hover-container:hover .show-when-hovering { display: inline; } .hover-container:hover .hide-when-hovering { display: none; } .fadeout img:hover { opacity:0; transition:none !important; -webkit-transition: none !important; } .fadeout img:active { opacity:0; transition:none !important; -webkit-transition: none !important; } body:not(.editor) .fadeout-container.fadeout-hide-bottom > .fadein { visibility: hidden; }

body:not(.editor) .fadeout-container.fadeout-hide-bottom > .fadeout:hover + .fadein { visibility: visible; }

.hide { visibility: hidden; }

.visible { visibility: visible; }

.fadein img:hover { opacity:0; transition:none !important; -webkit-transition: none !important; }

.fadeout-container.img.lzyTrans { transition: none !important; -webkit-transition: none !important; }

/* ############################################ */ /* ###              JoJo Boxes             ### */ /* ###           Template:Jojobox          ### */ /* ############################################ */

.imgtile { transition: 0.4s ease-out; } .imgtile:hover { transform: scale(1.04); } .frontbuttons img { border-radius: 5px; }

.hoverButton img:hover { filter: grayscale(100%); }

/* ############################################ */ /* ### 8===D TO DELETE EVENTUALLY 8===D~! ### */ /* ############################################ */

/* ############################################ */ /* ### PORTALS                             ### */ /* ############################################ */

/* Main header */ .va-portal-mainheader { margin: 5px auto; padding: 0; background: transparent; text-align: center; }

.va-portal-mainheader td { padding: 2px; }

/* Content boxes */ .va-portal-section { width: 100%; background: transparent; margin-top: 0px; margin-bottom: 5px; box-shadow: 2px 2px 2px var(--theme-border-color); border-collapse: collapse; }

.va-portal-body { border: 1px solid var(--theme-border-color); background: var(--theme-page-background-color--secondary); padding: 3px 5px; vertical-align: top; }

.va-portal-header { background: var(--theme-accent-color) var(--theme-widget-background); border: 1px solid var(--theme-border-color); padding: 3px 5px; color: var(--theme-accent-dynamic-color-1); height: 25px; font-size: 100%; text-align: left; }

.va-portal-header-links { float: right; font-size: 80%; font-weight: normal; }

/* Header - links */ .va-portal-header a:link, .va-portal-header a:visited, .va-portal-header a:hover, .va-portal-header a:active { color: var(--theme-accent-dynamic-color-1) !important; }

/* Game logo */ .va-portal-logo { width: 100%; margin-bottom: 5px; margin-top: 5px; text-align: center; }

/* TOC */ .va-portal-toc { width: 100%; font-size: 95%; }

.va-portal-toc td { vertical-align: top; padding: 0 5px; }

.va-portal-toc p { font-weight: bold; border-bottom: 1px solid var(--theme-border-color); }

/* Featured articles */ .va-portal-featuredarticle-footer { border-top: 1px solid var(--theme-border-color); clear: both; margin-top: 10px; text-align: right; }

/* Intro - image buttons */ .va-portal-buttons { text-align: center; font-size: 95%; margin: 0 auto; width: 90%; }

.va-portal-buttons th, .va-portal-buttons td { width: 20%; }

.va-portal-buttons th { vertical-align: middle; font-weight: normal; padding-top: 3px; }

.va-portal-buttons td { vertical-align: top; padding-bottom: 3px; white-space: nowrap; }

/* Main footer */ .va-portal-mainfooter { background: transparent; margin: 10px auto; text-align: center; width: 1010px; padding: 0; border-collapse: collapse; }

.va-portal-mainfooter table { margin: 0 auto; }

.va-portal-mainfooter table th { font-variant: small-caps; font-weight: normal; padding: 0 5px; line-height: 16px; }

.va-portal-mainfooter table td { font-size: smaller; border-top: 1px solid var(--theme-border-color); padding: 0 5px; }

/* Did you know */ .va-portal-dyk p { margin: 0 !important; padding: 0 0 0 2em; text-indent: -2em; }

/* ############################################ */ /* ### Home page portal container css      ### */ /* ###                                     ### */ /* ############################################ */

.home-page-portal-container { padding:14px; margin:24px 0 12px; font-size:16px; line-height:150%; display:flex; align-items: center; border: 2px solid #698296; border-radius: 12px; }

.home-page-portal-container.flex-column { flex-direction: column; }

.home-page-portal-container.flex-center { justify-content: center }

/* ############################################ */ /* ###         Old General Fixes           ### */ /* ###     Commented out for possible      ### */ /* ###         later referencing           ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

/* Move background image from header to whole page */ /*.theme-fandomdesktop-light .fandom-community-header__background, .theme-fandomdesktop-light .fandom-community-header__background::before { background: none; } body.theme-fandomdesktop-light { // Use `body` because body does not span full height in source editor background-image: var(--theme-body-background-image); }*/

/* ############################################ */ /* ###       Welcome Template Styles       ### */ /* ### 	      User:Eckserah             ### */ /* ############################################ */

.welcome-container { background-color:rgba(37,150,190,0.15); padding:8px; margin:4px 0 12px; font-size:16px }

.welcome-header { border-bottom: 1px solid #AAA; font-size: 126%; margin-bottom: 0.5em; font-weight: bold; }

.welcome-column { margin:10px 0px 10px 0px; border: 0; float: left; width: 25%; white-space: nowrap; }

.welcome-column:first-of-type { width: 30%; }

.welcome-column p { font-size:18px; margin:0 5px 10px 5px; border-bottom:1px solid #555; }

.welcome-column ul { margin-top: 0px !important; }

.main-page-header { padding:24px; margin:24px 0 12px; font-size:16px; line-height:150%; display:flex; flex-direction: column; border: 0px solid #698296; border-radius: 12px; }

.main-page-header .sub-welcome { font-size: 135%; margin: 0; align-items: center; }

.main-page-header .sub-description { font-size: 85%; margin: 0; align-items: center; }

.main-page-header .sub-info { margin: 0.3em 0 0.5em; align-items: center; }

.main-page-header .sub-links { font-size: 85%; border-top: 1px solid #AAA; margin-bottom: 0; align-items: center; }

.anon-allowed-page .cosmos-header__local-navigation { visibility:hidden !important; }

.box img { width: 100%; height: 100%; }

.box1 img { object-fit: cover; }

/* ############################################ */ /* ###            Affiliate Box            ### */ /* ###  OG Strategy Wiki ♥ User:Kid Aces   ### */ /* ############################################ */

.affiliate_box { background: #e8ffff; border: 3px solid #2f3e46; padding: 2px; margin: 2px; overflow: hidden; border-radius: 15px; }

.affiliate_box p { text-align: center; margin-bottom: 0; }

@media all and (min-width:720px) { .affiliate_box { font-size: 120%; margin: 10px; padding: 10px; box-sizing: border-box; }

.affiliate_link { font-size: larger; font-style: italic; font-weight: bold; }

.affiliate_box div.floatleft { padding: 0; margin-right: 0; }

.affiliate_link { margin: 0; } }

/* ############################################ */ /* ###             Main Header             ### */ /* ###    OG JoJo Wiki ♥ User:Kid Aces     ### */ /* ############################################ */

.mainpage-header { display: flex; margin: 1em 1.75em 1.5em; }

.mainpage-header .header-intro { flex: 2; }

.mainpage-header .header-intro .mw-headline { font-family: Futura; }

.mainpage-header .header-intro h2 { font-size: 2em; border: none; margin: 0 0 0.15em; }

body.wgl-readermode .mainpage-header .header-intro h1 { font-size: 2.25em; }

.mainpage-header .header-intro p { font-size: 1.1em; line-height: 1.7em; }

.mainpage-header .header-stats { flex: 1; display: flex; justify-content: center; align-items: center; margin-top: -1em; }

.mainpage-header .header-stats ul { list-style: none; }

.mainpage-header .announcement { margin: 0.5em 0 1.5em; }

.mainpage-header .announcement a { background: #f9fafa; border: 1px solid #e4eaee; color: #5d6773; font-size: 0.9em; line-height: 1.25em; padding: 0.25em 0.75em; border-radius: 10em; transition: 0.25s ease; display: inline-flex; align-items: center; }

.mainpage-header .announcement a:hover { text-decoration: none; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); }

.mainpage-header .announcement .announcement-pill { background: #6bc71f; color: #ffffff; font-size: 0.85em; font-weight: bold; text-transform: uppercase; border-radius: 10em; padding: 0.1em 0.6em; margin: 0 0.5em 0 -0.5em; }

.mainpage-header .announcement .arrow.dark { margin-left: 0.5em; filter: invert(50%); }