MediaWiki:Common.css

@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:InterlanguageFlags.css");

/* ################################################################ */ /* ###                                                         ### */ /* ###         ADD YOUR CODE TO THE APPROPRIATE SECTION. ### */ /* ###              SEE TABLE OF CONTENTS BELOW. ### */ /* ###                                                         ### */ /* ### CSS added to this file is applied to the entire site. ### */ /* ### Note that MediaWiki:Wikia.css should not be used. ### */ /* ###                                                         ### */ /* ### TABLE OF CONTENTS                                        ### */ /* ### * Temporary workarounds                                 ### */ /* ### * Nukapedia base style                                  ### */ /* ### * Reusable elements                                     ### */ /* ### * Extensions                                            ### */ /* ### * Templates                                             ### */ /* ### * Single use                                            ### */ /* ### * Historical                                            ### */ /* ################################################################ */

/* ########################################################################## */ /* ### TEMPORARY WORKAROUNDS                                             ### */ /* ### Workarounds for technical issues such as bugs. These should be    ### */ /* ### removed as soon as possible. ### */ /* ########################################################################## */

/* ############################################ */ /* ### OVERRIDE DIFF COLORS IN NEW THEME   ### */ /* ############################################ */ .page-content .diff-context { border-color: var(--theme-border-color); background: unset; color: unset; }

.page-content .diff-addedline { border-color: var(--theme-success-color); }

.page-content .diff-addedline .diffchange { background: var(--theme-success-color); color: var(--theme-success-label); }

.page-content .diff-deletedline { border-color: var(--theme-alert-color); }

.page-content .diff-deletedline .diffchange { background: var(--theme-alert-color); color: var(--theme-alert-label); }

/* ############################################ */ /* ### OVERRIDE COLORS IN EDITOR NOTICE IN ### */ /* ### DARK MODE                           ### */ /* ############################################ */ .smw-editpage-help { background: var(--theme-page-background-color--secondary); }

/* ############################################ */ /* ### OVERRIDE SOME COLORS ON IMAGE PAGES ### */ /* ### IN DARK MODE                        ### */ /* ############################################ */

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                        ### */ /* ############################################ */

background: var(--theme-page-background-color--secondary); color: var(--theme-page-text-color); border-color: var(--theme-border-color); }
 * 1) content input,
 * 2) 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); }

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

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

/* Shared colors */
 * root {

--theme-accent-dynamic-color-3: #afa000; /*--theme-widget-background: url(https://images.wikia.nocookie.net/fallout/images/d/d1/WidgetBackground.jpg?1); /*Old image in case we need it for something*/ --theme-widget-background: none; }

/* Backwards compatibility with old skin */ /* TODO: Remove this once we migrated to the new skin */ .WikiaArticle { --theme-accent-dynamic-color-1: #fff; }

/* Light theme */ .WikiaArticle, /* TODO: Remove the `:root,` query after migrating to the new skin */ .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: #ecfffe; --theme-page-background-color--tertiary: #def0f9; --theme-page-background-color--quaternary: #d6dbc1; --theme-page-background-color--quinary: #95b4ca;

/* Variants of the page background color */ --theme-page-background-color--light: #f9f9f9; --theme-page-background-color--gray: #ddd; /* Used for TVA stuff */ --tva-background-color: #e4f0f6; --tva-text-color: #2a2a2a; --tva-table-background-color: #f0f7f7; --tva-table-text-color: #000; --tva-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: #2d311c; --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; /* Used for TVA stuff */ --tva-background-color: var(--theme-page-text-mix-color-95); --tva-text-color:var(--theme-page-text-color); --tva-table-background-color: var(--theme-page-background-color--light); --tva-table-text-color: var(--theme-sticky-nav-dynamic-color-2); --tva-table-heading-background-color: var(--theme-sticky-nav-background-color); }

.theme-fandomdesktop-light, .skin-oasis { }

.theme-fandomdesktop-dark { --tva-background-color: var(--theme-page-text-mix-color-95); --tva-text-color:var(--theme-page-text-color); --tva-table-background-color: var(--theme-page-background-color--light); --tva-table-text-color: var(--theme-sticky-nav-dynamic-color-2); --tva-table-heading-background-color: var(--theme-sticky-nav-background-color); }

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

/* ############################################ */ /* ### GENERAL FIXES                       ### */ /* ############################################ */

/* 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: 11px; line-height: 16px; margin-bottom: 5px; }

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

.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 td { background: transparent; }

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

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

/* ############################################ */ /* ### FORUMS                              ### */ /* ############################################ */

/* Overall style */ .va-forum-header, .va-forum-index, .va-forum-search { border: 1px solid var(--theme-border-color); box-shadow: 2px 2px 2px var(--theme-border-color); }

.va-forum-index th, .va-forum-search th { background: var(--theme-accent-color) var(--theme-widget-background); border: 1px solid var(--theme-border-color); color: var(--theme-accent-dynamic-color-1); }

.va-forum-header div, .va-forum-index td, .va-forum-search td { background-color: var(--theme-page-background-color--secondary); border: 1px solid var(--theme-border-color); vertical-align: top; }

/* Header */ .va-forum-header { margin: 10px 0; padding: 2px; }

.va-forum-header div { padding: 5px; }

/* Search */ .va-forum-search { float: right; margin: 0 0 8px 5px; text-align: center; }

.va-forum-search td { font-size: 11px; padding: 5px; }

/* Index */ .va-forum-index th.forum_title { padding-left: 9px; text-align: left; width: 70%; }

.va-forum-index th.forum_edited { width: 30%; }

.va-forum-index th.va-forum-subheader { background: var(--theme-page-background-color--quinary); border: 1px solid var(--theme-border-color); color: var(--theme-page-text-color); padding-left: 9px; text-align: left; }

.va-forum-index td { line-height: 16px; }

.va-forum-index td.forum_edited { font-size: 11px; text-align: center; }

.va-forum-index td.va-forum-footer { background: var(--theme-page-background-color--quinary); border: 1px solid var(--theme-border-color); }

.va-forum-index td.forum_title { padding: 1px 2px 1px 3px; }

.va-forum-index td.forum_title a { border-left: 3px solid var(--theme-page-background-color--secondary); display: inline-block; padding-left: 3px; }

.va-forum-index td.forum_title a.forum_new:link { border-left: 3px solid var(--theme-accent-color); }

.va-forum-index td.forum_title span.forum_author { display: block; font-size: 11px; padding-left: 17px; }

.va-forum-index td.forum_title span.forum_author a { border: none; padding: 0; }

.va-forum-index span.forum_editor { display: block; font-size: 11px; }

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

/* ########################################################################## */ /* ### 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      ### */ /* ############################################ */

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

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

/* ############################################ */ /* ### GENERIC BOX                         ### */ /* ### A generic box that has contents. ### */ /* ### Used all over the wiki in many      ### */ /* ### different places. ### */ /* ###                                     ### */ /* ### Used in: various minor templates     ### */ /* ###         various MediaWiki pages     ### */ /* ############################################ */

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

/* ############################################ */ /* ### 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 added to our wiki. ### */ /* ########################################################################## */

/* ############################################ */ /* ### BLOGS AND BLOG LISTINGS             ### */ /* ### Applies to: Extension:Blogs         ### */ /* ############################################ */

/* Reduce font size in community features sidebar, cf. Template:Community_messages */ .va-portal-section .blog-listing__title { font-size: 20px; }

/* ############################################ */ /* ### 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: square; list-style-position: outside; margin-left: 2.5em; }

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

/* ############################################ */ /* ### 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. Avoid adding CSS here if your ### */ /* ### 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 - border */ .va-navbox-border { border: 1px solid var(--theme-border-color); box-shadow: 2px 2px 2px var(--theme-border-color); }

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

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

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

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

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

/* 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: 1px 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: 1px solid var(--theme-border-color); font-weight: normal; color: var(--theme-accent-dynamic-color-1); padding: 1px 2px; }

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

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

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

.va-navbox-colgroup, .va-navbox-group, .va-navbox-subgroup { font-weight: bold; }

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

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

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

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

.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: 1px 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: var(--theme-page-background-color--secondary); clear: both; padding: 3px 5px; margin: 5px 0; border: 1px solid var(--theme-border-color); font-size: 11px; line-height: 16px; border-collapse: collapse; width: 100%; }

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

.va-copybox td { padding-left: 5px; }

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

/* Template:Sourcebox */ .va-sourcebox { margin: 0; border-collapse: collapse; font-size: 11px; 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: var(--theme-page-background-color--light); clear: left; padding: 2px 5px; margin: 5px 0; border: 1px solid var(--theme-border-color); font-size: 11px; line-height: 16px; 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: 20px; }

.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: 2em; font-style: italic; margin-bottom: 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:Listen            ### */ /* ###         Template:Newsquote          ### */ /* ###         Template:Quotation          ### */ /* ###         Template:Transcript         ### */ /* ############################################ */

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

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

.va-listen-right, .va-quotation-right { clear: right; float: right; margin: 10px 0 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: -25px; 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: -15px; text-align: left; }

.va-newsquote-quot-r, .va-quotation-quot-r { right: -15px; 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; }

.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    ### */ /* ############################################ */

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

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

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

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

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

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

/* ########################################################################## */ /* ### SINGLE USE                                                        ### */ /* ### Styling that applies only to a single page. Usually related to    ### */ /* ### experiments or "cutting-edge" features. ### */ /* ########################################################################## */

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

/* ############################################ */ /* ### VAULT ACADEMY                       ### */ /* ### Used in: Fallout Wiki:The Vault     ### */ /* ###             Academy                 ### */ /* ###         and related articles        ### */ /* ############################################ */

/* Big blue box for TVA pages */ .tva-box { background: var(--tva-background-color); color: var(--tva-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; }

/* Kdarrow's table for TVA pages */ .tva-box .article-table-wrapper { background: none; }

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

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

.tva-table { font-size: 11px; }

/* ########################################################################## */ /* ### HISTORICAL                                                        ### */ /* ### Old CSS that should no longer be added to new pages, but should be ### */ /* ### retained for historical purposes. Usually related to blogs. ### */ /* ########################################################################## */

/* ############################################ */ /* ### APPRENTICE                          ### */ /* ### Used in: many old blog posts        ### */ /* ############################################ */

.apprentice-header { height: auto; background: linear-gradient(to bottom, #097534 0%, #097534 35%, #044d22 65%, #044d22 100%); border-radius: 30px 0 30px 0; color: #ffffff; font-family: arial, serif; font-size: 16px; font-weight: bold; padding: 2px 1px 4px 1px; text-align: center; text-shadow: 0 2px 5px #000000; }

.apprentice-header a { display: inline-block; max-width: 95%; }

.apprentice-header a:link, .apprentice-header a:visited, .apprentice-header a:hover, .apprentice-header a:active { color: #ffffff !important; text-decoration: none !important; }

.apprentice-header-inline { background: linear-gradient(to bottom, #097534 0%, #097534 35%, #044d22 65%, #044d22 100%); color: #ffffff; font-family: arial, serif; font-size: 16px; font-weight: bold; margin-left: -5px; padding-bottom: 4px; padding-top: 2px; text-align: center; text-shadow: 0 2px 5px #000000; }

.apprentice-box { background-color: #e7eada; border-radius: 30px 0 30px 0; margin-top: 10px; width: 100%; }

.apprentice-content { padding-left: 5px; }

.apprentice-table { background: none !important; border: none !important; }

.apprentice-table th { background: #097534 !important; color: #ffffff; font-weight: bold; text-align: center; text-shadow: 0 2px 5px #000000; border-radius: 10px 10px 0px 0px; border: none !important; }

.apprentice-table td { background: none repeat scroll 0 0 #ededed !important; border: 1px solid #cccccc; }

/* ############################################ */ /* ### SPEECH BUBBLES                      ### */ /* ### Used in: many old blog posts        ### */ /* ############################################ */

.triangle-border { position: relative; padding: 15px; margin: 1em 0 3em; border: 5px solid black; color: #000; background: #fff; /* css3 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.triangle-border-red { border-color: red; }

/* Variant : for left positioned triangle */

.triangle-border.left { margin-left: 30px; }

/* Variant : for right positioned triangle*/

.triangle-border.right { margin-right: 30px; }

/* THE TRIANGLE */

.triangle-border:before { content: ""; position: absolute; bottom: -20px; /* value = - border-top-width - border-bottom-width */ left: 40px; /* controls horizontal position */ border-width: 20px 20px 0; border-style: solid; border-color: #000 transparent; /* reduce the damage in FF3.0 */ display: block; width: 0; }

.triangle-border-red:before { border-color: red transparent; }

/* creates the smaller triangle */ .triangle-border:after { content: ""; position: absolute; bottom: -13px; /* value = - border-top-width - border-bottom-width */ left: 47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ border-width: 13px 13px 0; border-style: solid; border-color: #fff transparent; /* reduce the damage in FF3.0 */ display: block; width: 0; }

/* Variant : top */

/* creates the larger triangle */ .triangle-border.top:before { top: -20px; /* value = - border-top-width - border-bottom-width */ bottom: auto; left: auto; right: 40px; /* controls horizontal position */ border-width: 0 20px 20px; }

/* creates the smaller triangle */ .triangle-border.top:after { top: -13px; /* value = - border-top-width - border-bottom-width */ bottom: auto; left: auto; right: 47px; /* value = (:before right) + (:before border-right) - (:after border-right) */ border-width: 0 13px 13px; }

/* Variant : left */

/* creates the larger triangle */ .triangle-border.left:before { top: 10px; /* controls vertical position */ bottom: auto; left: -30px; /* value = - border-left-width - border-right-width */ border-width: 15px 30px 15px 0; border-color: transparent #000; }

.triangle-border-red.left:before { border-color: transparent red; }

/* creates the smaller triangle */ .triangle-border.left:after { top: 16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ bottom: auto; left: -21px; /* value = - border-left-width - border-right-width */ border-width: 9px 21px 9px 0; border-color: transparent #fff; }

/* Variant : right */

/* creates the larger triangle */ .triangle-border.right:before { top: 10px; /* controls vertical position */ bottom: auto; left: auto; right: -30px; /* value = - border-left-width - border-right-width */ border-width: 15px 0 15px 30px; border-color: transparent #000; }

.triangle-border-red.right:before { border-color: transparent red; }

/* creates the smaller triangle */ .triangle-border.right:after { top: 16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ bottom: auto; left: auto; right: -21px; /* value = - border-left-width - border-right-width */ border-width: 9px 0 9px 21px; border-color: transparent #fff; } .va-quotation-body { max-width: 100%; }

/* Centering for audio players suggested by KPThug */ .mediaContainer, .PopUpMediaTransform { position: relative; display: flex; /*block*/ }

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

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

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