×
Create a new article
Write your page title here:
We currently have 71,044 articles on Fallout Wiki. Type your article name above or click on one of the titles below and start writing!



Fallout Wiki
71,044Articles

Difference between revisions of "MediaWiki:Common.css"

Line 2,186: Line 2,186:
}
}


.mwe-popups-thumbnail.vb-image {
.mwe-popups-thumbnail {
outline: 0 !important;
outline: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
}



Revision as of 23:49, 11 July 2023

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

@font-face {
  font-family: DTM-Sans;--theme-page-background-color--secondary
  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: #000;
  --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; /* light blue */
  --theme-page-background-color--tertiary: #bfd2df; /* medium blue */
  --theme-page-background-color--quaternary: #e1f2f5; /* light blue */
  --theme-page-background-color--quinary: #95b4ca; /* dark blue */
  --theme-page-background-color--aceiary: #D1EBF2; /* medium teal blue */
  --theme-page-background-color--light: #f9f9f9; /* almost white */
  --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: #0645ad;
  --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;
  --theme-containerTem-background-color: #537d90;
  --theme-page-toc-background-color: #f8f9fa;
  --theme-page-containerTem-content-background-color: #FAFAFA;

}

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

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

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

/* ############################################ */
/* ###           Link colors                ### */
/* ###          User:Eckserah               ### */
/* ############################################ */

#mw-content a:not(.new){
	color: var(--theme-link-color);
}

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

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

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

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

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

/* ############################################ */
/* ### 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 <references> tag */
.references {
  font-size: 11px;
  line-height: 16px;
}

/* Links */
#content a {
  /* Color transition does not work well on :visited links, so disable. */
  transition: none;
}

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

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

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

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

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

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

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

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

/* ############################################ */
/* ###       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--aceiary) !important;
}

tr.row-highlight td {
  border: 1px double var(--theme-border-color-alt) !important;
}
/* ############################################ */
/* ###           ♠  ACE TABLE  ♠            ### */
/* ############################################ */

.ace-table {
  background: var(--ace-table-heading-background-color);
  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(--ace-table-background-color);
}

.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 > * > tr > td {
  background-color: var(--ace-table-background-color);
  color: var(--ace-table-text-color);
}
*/
.ace-table > * > tr > th {
  background-color: var(--ace-table-heading-background-color);
  color: var(--ace-table-text-color);
  padding: 2px;
}

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

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

/* ############################################ */
/* ### 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) */
#content .va-navbox-editlink .va-navbar-item a,
#content .va-navbox-editlink .va-navbar-item a:link,
#content .va-navbox-editlink .va-navbar-item a:visited,
#content .va-navbox-editlink .va-navbar-item a:hover,
#content .va-navbox-editlink .va-navbar-item a:active {
  color: var(--theme-accent-dynamic-color-1);
}

#content .va-navbox-nowraplinks .va-navbox-cell a,
#content .va-navbox-nowraplinks .va-navbox-column a {
  white-space: nowrap;
}

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

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

/* ############################################ */
/* ### 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 <pre> 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(--ace-table-heading-background-color);
  border: 1px solid var(--theme-border-color) !important;
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  line-height: 16px;
}

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

.va-chart-reward {
  background: var(--theme-page-background-color--tertiary);
  border: 1px solid var(--theme-border-color) !important;
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  line-height: 16px;
}

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

.ace-chart-quest {
  background: var(--ace-table-heading-background-color);
  border: 1px solid var(--theme-border-color) !important;
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  line-height: 16px;
  padding: 10px;
}

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

.ace-chart-reward {
  background: var(--theme-page-background-color--tertiary);
  border: 1px solid var(--theme-border-color) !important;
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  line-height: 16px;
  padding: 10px;
}

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

.np-collapsible {
  overflow: hidden;
}

#np-helip {
  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;
}

.np-hidden {
  display: none;
}

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

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

#ticker .CategoryTreeSection,
#ticker .CategoryTreeItem {
  display: inline;
}

/* ############################################ */
/* ### 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('[[File:Papermap_city_d.jpg]]');
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}

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

/* ############################################ */
/* ###      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('[[File:Icon_sound.png]]');
}

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

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

#profile-image img {
  background: transparent !important;
  border: 0 !important;
}

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

#mwchat-options {
  margin-top: 2em !important;
}

#mwchat-options input {
  margin-left: 5px;
}

#mwchat-content {
  min-height: 450px;
}

.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: var(--theme-containerTem-background-color);
  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: var(--theme-body-text-color);
  border-radius: 0 0 9px 9px;
  padding: 12px;
  background: var(--theme-page-containerTem-content-background-color);
  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(0 -1px 0 black) drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black);
}

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

.mwe-popups-thumbnail {
	outline: 0 !important;
}

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

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

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

/* ############################################ */
/* ###         Template:Source text base    ### */
/* ###         Users: Eckserah/Kid Aces     ### */
/* ############################################ */

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

/* ############################################ */
/* ###            Template:Nav              ### */
/* ###          Kid Aces/Eckserah           ### */
/* ############################################ */

.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: 5px;
}

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

/* ############################################ */
/* ###      Fix an issue with the file      ### */
/* ###     history thumbs being borked      ### */
/* ############################################ */

.filehistory .filehistory-thumb a img, #file img:hover {
	background: none;
}

.filehistory .filehistory-thumb, #file .filepage-thumbcontainer:hover {
	background: url('/resources/src/mediawiki.action/images/checker.svg?ff513') repeat !important;
}

.skin-cosmos .toc {
	background-color: var(--theme-page-toc-background-color);
}

/* ############################################ */
/* ###   Fix an issue with center captions  ### */
/* ############################################ */

.pickmans_gallery_image .thumbcaption {
	text-align: center;
}

/* ############################################ */
/* ### Template:Pagelist                    ### */
/* ### User:Kid-Aces                        ### */
/* ############################################ */

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

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

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

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

/* ############################################ */
/* ###        Template:Document start       ### */
/* ###               Kid Aces               ### */
/* ############################################ */

.doc-start-main {
	width: 100%; 
}

.doc-start-inner {
	--theme-doc-start-background-color: #ffffe0;
	--theme-doc-start-border-top-color: #405a55;
	border-top: 4px solid var(--theme-doc-start-border-top-color); 
	background-color: var(--theme-doc-start-background-color); 
	padding: 5px;
}

.doc-start-text {
	font-size: 13px;
	text-align: center;
}

/* ############################################ */
/* ###           Template:Divider           ### */
/* ###               Kid Aces               ### */
/* ############################################ */

.divider-main {
	width: 100%; 
}

.divider-inner {
	--theme-divider-background-color: #2C3E4C;
	background-color: var(--theme-divider-background-color); 
	padding: 5px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.divider-text {
	font-size: 14px;
	text-align: center;
    color: #ffffff;
    font-weight: bold;
}

/* ############################################ */
/* ###           Scrollable tables          ### */
/* ###               Eckserah               ### */
/* ############################################ */

.ace-table-content-scroll tbody {
	display: block;
	overflow: auto;
	max-height: 300px;
}

.ace-table-content-scroll tbody tr:first-child {
	position: sticky;
	top: -1px;
	left: 0;
}

/* ############################################ */
/* ###       Remove social profile tabs     ### */
/* ###               Eckserah               ### */
/* ############################################ */
.profile-tab-bar {
	display:none !important;
}