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, Arial, Helvetica, sans-serif; }

.font-dtm-sans, .font-dtm-sans * { font-family: DTM-Sans, Arial, Helvetica, sans-serif; }

/* Root var colors */
 * root {

--theme-body-dynamic-color-1: #fff; --theme-body-dynamic-color-2: #e6e6e6; --theme-page-dynamic-color-1: #000; --theme-page-dynamic-color-1--inverted: #fff; --theme-page-dynamic-color-2: #3a3a3a; --theme-sticky-nav-dynamic-color-1: #fff; --theme-sticky-nav-dynamic-color-2: #e6e6e6; --theme-link-dynamic-color-1: #fff; --theme-link-dynamic-color-2: #e6e6e6; --theme-accent-dynamic-color-1: #fff; --theme-accent-dynamic-color-2: #e6e6e6; --theme-body-background-color: #090b0f; --theme-body-text-color: #fff; --theme-body-text-color--hover: #ccc; --theme-sticky-nav-background-color: #182e44; --theme-sticky-nav-text-color: #fff; --theme-sticky-nav-text-color--hover: #ccc; --theme-page-background-color: #feffff; --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--aceiary: #D1EBF2; --theme-page-background-color--light: #f9f9f9; --theme-page-background-color--gray: #ddd; --theme-page-text-color: #3a3a3a; --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--hover: #0b325c; --theme-link-label-color: #fff; --theme-accent-color: #202a30; --theme-accent-color--hover: #485f6d; --theme-accent-label-color: #fff; --theme-border-color: #cdcece; --theme-alert-color: #bf0017; --theme-alert-color--hover: #59000a; --theme-alert-color--secondary: #bf0017; --theme-alert-label: #fff; --theme-warning-color: #cf721c; --theme-warning-color--secondary: #ce711b; --theme-warning-label: #000; --theme-success-color: #0c742f; --theme-success-color--secondary: #0c742f; --theme-success-label: #fff; --theme-message-color: #753369; --theme-message-label: #fff; --theme-community-header-color: #fff; --theme-community-header-color--hover: #fff; --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: #36b; --theme-border-color-alt: #818181; --ace-background-color: #e4f0f6; --ace-text-color: #2a2a2a; --ace-table-background-color: #e6f4fa; --ace-table-text-color: #000; --ace-table-heading-background-color: #e5cb69; --theme-accent-dynamic-color-3: #e3df65; --theme-widget-background: none; --theme-horizontal-nav-background-color: #D1EEEE; --theme-source-text-border-top-color: #2B4563; --theme-source-text-background-color: #F8FFF5; }

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

/* 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; }
 * 1) content a {

color: var(--theme-link-color--visited); }
 * 1) content a:visited {

color: var(--theme-link-color--external); }
 * 1) content .external {

color: var(--theme-alert-color); }
 * 1) content .new {

color: var(--theme-alert-color-hover); }
 * 1) content .new:hover {

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

border: 1px dashed var(--theme-border-color); }
 * 1) content pre:not(.CodeMirror-line) {

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

/* ################################################# */ /* ### TABLES - DEPRECIATED PLEASE USE ACE-TABLE ### */ /* ################################################# */

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

/* 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 ul > li { line-height: inherit; }

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

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

/* ############################################ */ /* ###          ♠  ACE TABLE  ♠            ### */ /* ############################################ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: 0 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: 0 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-left: 10px; }

.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: 0 solid var(--theme-border-color); border-radius: 15px; }

.va-navbox-colgroup, .va-navbox-subgroup { background: var(--theme-page-background-color--quaternary); border: 0 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: 0 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: 0 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; }

/* ############################################ */ /* ### DIRECTION & SOURCE BOXES            ### */ /* ### Used in: Template:Directionbox      ### */ /* ###         Template:Sourcebox          ### */ /* ############################################ */

/* Template:Directionbox */ .ace-dirbox { 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; }

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

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

.ace-dirbox + .ace-dirbox { 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; }

.va-navbox, .va-navbox-border { display: none; }

.va-dirbox, .va-mbox { display: none; } }

/* ############################################ */ /* ###         Template:Mbox               ### */ /* ############################################ */

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

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

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

.va-listen-right, .va-quotation-right { clear: right; float: right; margin: 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: 0 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; border: 1px solid var(--theme-border-color); border-radius: 5px; box-shadow: var(--theme-border-color) 2px 2px 5px 0; 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             ### */ /* ############################################ */

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

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

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

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

.va-documentation-bar-bottom { border-width: 1px 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; }

.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); background: 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: 0 solid #20a200; background-image: url(''); background-size: 100%; background-repeat: no-repeat; position: relative; }

.f76map-box { width: 240px; height: 240px; margin: auto; border: 0 solid #20a200; background-image: url(''); background-size: 100%; background-repeat: no-repeat; position: relative; }

/* ############################################ */ /* ###             ACE-TEC PAGES           ### */ /* ############################################ */

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

/* ############################################ */ /* ###     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: 200px; border-width: 2px; border-color: #000; }

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

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

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

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

.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: 0; line-height: 15px; padding: 0 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("/resources/assets/file-type-icons/fileicon-ogg.png"); height: 100px; vertical-align: top; object-fit: contain; margin-top: 5px; }

/* ############################################ */ /* ###       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 { 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 { 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: 85%; flex-basis: 40%; position: relative; }

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

/* ############################################ */ /* ###                 HOVER               ### */ /* ############################################ */

.show-when-hovering { display: none; }

.hover-container:hover .show-when-hovering { display: inline; }

.hover-container:hover .hide-when-hovering { display: none; }

.fadeout img:hover, .fadeout img:active, .fadein img:hover { opacity: 0; 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; }

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

/* ############################################ */ /* ###              JOJO BOXES             ### */ /* ############################################ */

.imgtile { transition: 0.4s ease-out; }

.imgtile:hover { transform: scale(1.04); }

.frontbuttons img { border-radius: 5px; }

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

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

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

.welcome-container { background-color: rgba(37 150 190 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 0; 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; border-bottom: 1px solid #555; }

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

.main-page-header { padding: 24px; margin: 24px 0 12px; font-size: 16px; line-height: 150%; display: flex; flex-direction: column; border: 0 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; }

/* ############################################ */ /* ###              CONTAINER              ### */ /* ###           From Halopedia           ### */ /* ############################################ */

.containerTem { margin: 0 auto 16px; padding: 0 2px 2px; border-radius: 9px; background: #537d90; box-shadow: 0 0 6px #666; width: 90%; }

.containerTem .containerTitle { color: #fff; text-align: center; font-weight: bold; font-size: 98%; }

.containerTem .containerContent { text-align: left; color: #000; border-radius: 0 0 9px 9px; padding: 12px; background: #FAFAFA; font-size: 92%; }

.clearBoth { clear: both; }

.containerTemD { margin: 0 auto 16px; padding: 0 2px 2px; border-radius: 9px; background: #070e17; box-shadow: 0 0 6px #666; width: 90%; }

.containerTemD .containerTitleD { color: #fff; text-align: center; font-weight: bold; font-size: 98%; }

.containerTemD .containerContentD { text-align: left; color: #fff; border-radius: 0 0 9px 9px; padding: 12px; background: #272727; font-size: 92%; }

/* ############################################ */ /* ###            OVERVIEW BOX             ### */ /* ###         KID ACES/ECKSERAH           ### */ /* ############################################ */

.overviewBox { float: right; clear: right; margin: 5px 10px; background-color: #f1f1f1; text-align: center; font-size: 82%; outline-style: dashed; outline-color: #002147; }

.overviewBoxTable { background-color: #f1f1f1; font-weight: bold; text-align: center; width: 13em; }

.overviewBox .overviewBoxLink { vertical-align: top; background-color: #b2c6c7; width: 95%; margin: 5px; padding: 0; border-radius: 10px; }

.overviewTable td { width: 20%; }

/* ############################################ */ /* ###     Floating announcement styles    ### */ /* ###            User:Eckserah            ### */ /* ############################################ */

.floating-announcement { position: fixed; overflow: visible; color: #FFF; font-weight: bold; font-size: 14px; text-align: center; border-radius: 18px; box-shadow: 0 0 20px #ccc; background: #2C3E4C; padding: 20px; margin-bottom: 10px; z-index: 1; }

/* ############################################ */ /* ###     Vault boy image outline stuff   ### */ /* ###            User:Eckserah            ### */ /* ############################################ */

.vb-image { filter: drop-shadow(0 0 0 white) drop-shadow(1px 1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(-1px 1px 0 black); }

/* ############################################ */ /* ###                  TOC                ### */ /* ###              Template:TOC           ### */ /* ###            User:kid aces            ### */ /* ############################################ */	.toc { border: 1px solid #9a85b7; background: transparent; min-width: 250px; border-radius: 10px; text-align: left; padding: 5px; }	.toctitle { text-transform: uppercase; font-family: 'Rubik',sans-serif; }	.toctogglelabel { color:#dfe0e1; text-transform: capitalize; }

.tocnumber, .toctext { font-size: 15px; }

.toc ul { list-style: none; margin-left: 0; }

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

/* ############################################ */ /* ###           GENERIC BOX               ### */ /* ###          User: Kid Aces             ### */ /* ### Used on: MediaWiki:Copyrightwarning ### */ /* ###         MediaWiki:Recentchangestext ### */ /* ############################################ */

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

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

.ace-console { font-family: monospace; }

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

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

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

/* ############################################ */ /* ###           Scrollable TOC            ### */ /* ###           User: Eckserah            ### */ /* ### Will allow the TOC to scroll instead ### */ /* ###      of the entire container        ### */ /* ############################################ */

.scrollableToc .toc > ul { height: 300px; overflow: auto; }

/* ############################################ */ /* ###               Banner                ### */ /* ###           User: Kid Aces            ### */ /* ###    Template:Banner, PhotoSlider     ### */ /* ############################################ */

.mainpage-shadowbox { color: white; background: rgb(16,16,16); background: rgba(0,0,0,0.3); border-radius: 4px; } .mainpage-shadowbox h2, .mainpage-shadowbox h3 { color: white; border:none; font-family: sans-serif; line-height: 1.2em; margin:0; padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */ } .mainpage-shadowbox a { color: white; font-weight: bold; }

.banner-image { position: relative; max-width: 1125px; height: auto; margin-bottom: .6em; } .banner-image img { max-width: 100%; height: auto; /* width: auto\9; */ /* ie8 */ } .banner-box-wide { width: 80% } .banner-box-left, .banner-box-right { padding: 8px 7px; background: rgb(16,16,16); background: rgba(0,0,0,0.3); border-radius: 4px; width: 40%; } .banner-box-left { text-align: left; } .banner-box-right { text-align: right; } .banner-box-2 { position: absolute; z-index: 2; min-width: 20em; }

@media screen and ( min-width: 720px ) { /* greater than or equal to */ .banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */ .banner-image span[typeof~='mw:File/Frameless'].nolink { display: none; } .mainpage-shadowbox h2 { font-size: 190%; }	.mainpage-shadowbox h3 { font-size: 150%; }	.banner-image { overflow: hidden; }	.banner-box-left { left: 3%; }	.banner-box-right { right: 3%; }	.banner-box-2 { margin-top: 2em; }	.banner-box-2 .quote { font-size: 80%; line-height: 1.2em; } } @media screen and ( max-width: 720px ) { .banner-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */ .banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */ .banner-image span[typeof~='mw:File/Frameless']:not(.nolink) { display: none; } .banner-image > .mainpage-shadowbox { width: inherit !important; min-height: 100%; margin-left: -150%; margin-right: 150%; opacity: 0; background: black; }	.mainpage-shadowbox .quote > a:after { content: '\ATap to learn more.'; white-space: pre; }	.jcarousel-item:hover .mainpage-shadowbox { margin: unset; opacity: 1; transition: margin 0.5s; bottom: 50%; }	.jcarousel-control-prev, .jcarousel-control-next { display: none;

} }

.mw-customtoggle, .mw-collapsible-toggle { margin-right: 10px; }

.fw-scrollbox > h3:first-child { margin-top: 4px; padding-top: 3px; }

/* ############################################ */ /* ###        Youtube lazy loading         ### */ /* ### Will allow youtube videos to preview ### */ /* ###      as images until clicked        ### */ /* ###           User: Eckserah            ### */ /* ############################################ */

.youtube { background-color: #000; position: relative; overflow: hidden; cursor: pointer; border:1px solid #000; }

.youtube img { width: 100%; left: 0; opacity: 0.5; }

.youtube .play-button { background: #a90000; border-radius: 50% / 10%; color: #FFFFFF; font-size: 15px; /* change this to change size */ height: 3em; padding: 0; text-align: center; text-indent: 0.1em; transition: all 150ms ease-out; width: 4em; opacity: 0.9; top: calc(50% - 1.5em); left: calc(50% - 2em); }

.youtube .play-button:hover { background: red; opacity: 0.95; }

.youtube .play-button::before { background: inherit; border-radius: 5% / 50%; bottom: 9%; content: ""; left: -5%; position: absolute; right: -5%; top: 9%; }

.youtube .play-button::after { border-style: solid; border-width: 1em 0 1em 1.732em; border-color: transparent transparent transparent rgba(255, 255, 255, 0.75); content: ' '; font-size: 0.75em; height: 0; margin: -1em 0 0 -0.75em; top: 50%; position: absolute; width: 0; }

.youtube img { cursor: pointer; }

.youtube img, .youtube iframe, .youtube .play-button { position: absolute; }

.youtube iframe { height: 100%; width: 100%; top: 0; }

.youtube .video-title { position: relative; padding: 10px 5px 10px 20px; color: #fff; font-weight: bold; width: auto; margin: 3px; font-size: 18px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; filter: drop-shadow(0 0 5px #000); }

.source-text-main { width: 100%; }

.source-text-inner { border-top: 4px solid var(--theme-source-text-border-top-color); background-color: var(--theme-source-text-background-color); padding: 5px 3px 3px 5px; text-align: center; }

.source-text-inner p { margin: 0; }

.source-text-links { font-size: 13px; }

.source-text-pub { --theme-source-text-border-top-color: #0062cc; --theme-source-text-background-color: #dbf0f9; }

.source-text-dev { --theme-source-text-border-top-color: #2B4563; --theme-source-text-background-color: #F8FFF5; }

.source-text-game { --theme-source-text-border-top-color: #180F67; --theme-source-text-background-color: #eeecee; }

.source-text-doc { --theme-source-text-border-top-color: #2B4563; --theme-source-text-background-color: #ecf1f6; }

/* ############################################ */ /* ###     HOME PAGE GIVE IT A SPIN! ### */ /* ############################################ */

.takekateforaspin img { transition: transform .8s ease-in-out; }

.takekateforaspin img:hover { transform: rotateY(180deg); }

/* ############################################ */ /* ###           Top nav styles            ### */ /* ############################################ */

.top-nav-main { width: 100%; }

.top-nav-inner { --theme-top-nav-background-color: #daefe8; --theme-top-nav-border-top-color: #303c4c; border-top: 4px solid var(--theme-top-nav-border-top-color); background-color: var(--theme-top-nav-background-color); padding: 10px; }

.top-nav-header { font-size: 16px; text-align: center; }

.top-nav-awards .top-nav-header { text-align: left; }

.top-nav-links { text-align: center; font-size: 14px; }

/* ############################################ */ /* ###         Template:Nav horiz          ### */ /* ############################################ */

.horiz-nav-main { background-color: var(--theme-horizontal-nav-background-color); padding: 6px; vertical-align: top; border-radius: 10px; }

.horiz-nav-inner { font-size: 13.6px; text-align: center; padding: 0 5px; }

/* ############################################ */ /* ### Image gallery center caption align  ### */ /* ############################################ */

.caption-align-center .gallerytext p { text-align: center; }