MediaWiki:Vector.css

From Guild Wars 2 Wiki
Jump to navigationJump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/** -------- FONTS -------- **/
@font-face {
  font-family: "acumin-pro-condensed";
  src: url("https://use.typekit.net/af/4b28f4/00000000000000003b9acb08/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
      url("https://use.typekit.net/af/4b28f4/00000000000000003b9acb08/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
      url("https://use.typekit.net/af/4b28f4/00000000000000003b9acb08/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: auto;
}

/** -------- UI NOTICES -------- **/
/* Avoids the need to remember to set font color in the sitenotice */
.mw-dismissable-notice {
  color: black;
}

.mw-dismissable-notice a,
.mw-dismissable-notice a:visited {
  color: #002BB8; /* color scheme: boring blue */
}

/** -------- NON-CONTENT UI -------- **/
/** GENERAL **/
html,
body {
  min-height: 100%;
  height: auto;
}

body {
  font-size: 100%;
  line-height: 1.2em;
  background-color: transparent;
}

/* Tweak left and right navigation to match full width view */
.mw-content-container,
.vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container,
.vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-table-of-contents-container,
#mw-sidebar-checkbox:not(:checked) ~ .vector-sidebar-container-no-toc ~ .mw-content-container {
  max-width: unset;
}

div.mw-page-container,
div.mw-workspace-container {
  max-width: unset;
  margin-left: unset;
  margin-right: unset;
}

.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
  margin-left: 11.5em;
}

.mw-page-container {
  margin-top: 2.5em;
}

.mw-page-container {
  background-color: transparent; /* transparent to overwrite default white */
  border-color: transparent;
}

/* positions background image in top left */
/* including legacy version too */
body {
  background-image: url("/images/f/f4/Skin_body_background_gradient_(vector).png"), url("/images/7/78/Skin_header_stripe_vector_(Secrets_of_the_Obscure).jpg");
  background-position: top left, top left;
  background-repeat: repeat-x, repeat-x;
  background-size: auto 400px, auto;
  background-color: transparent; /* transparent to overwrite default white */
  width: 100%;
}

body.skin-vector-legacy {
  background-image: none;
}

body.skin-vector-legacy #mw-page-base {
  background-image: url("/images/f/f4/Skin_body_background_gradient_(vector).png"), url("/images/7/78/Skin_header_stripe_vector_(Secrets_of_the_Obscure).jpg");
  background-position: top left, top left;
  background-repeat: repeat-x, repeat-x;
  background-size: auto 400px, auto;
  background-color: transparent; /* transparent to overwrite default white */
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

/* determines where the top of the page content appears based on its height */
#mw-head-base {
  margin: 0 0 -1px 12em;
  height: 4.4em;
  padding: 2px 0 0 0;
  border-radius: 0.5em 0 0 0;
  background-image: none;
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 982px) {
  body.skin-vector-legacy div#content {
      padding: 1em 1.2em 1em;
  }

}

div#bodyContent,
#mw-head,
#mw-panel,
#footer,
input,
select,
#p-personal,
#p-personal-sticky-header {
  font-family: Arial, sans-serif;
  line-height: 1.538em;
}

#bodyContent {
  font-size: 0.8125em;
  padding-top: 0px;
}

body.skin-vector-legacy div#content {
  position: relative;
  border-radius: 0;
  z-index: 1;
  margin-left: 10em;
  background-image: none;
}

main.mw-body {
  padding: 1em;
}

div#mw-data-after-content {
  margin-left: 10em;
}

.mw-indicators {
  z-index: unset;
}

/** FOOTER **/
div.mw-footer-container {
  padding: 1.5em 0; /* over-ride native 50px top and 82px bottom margin */
}

footer#footer {
  margin: 0.5em 0 0; /* better compatibility with non-legacy mode vector versus old -7.5em margin*/
  padding: 0.5em 0em 0.5em 0em;
  position: relative;
  height: 7em;
}
body.skin-vector-legacy footer#footer {
  padding: 0.5em 0 0.5em 11.5em;
}

#footer ul li {
  padding: 0;
}

#footer #footer-info li,
#footer #footer-places li {
  line-height: 1.667em;
}

#footer #footer-places {
  margin-top: 0.833em;
}

#footer #footer-icons {
  position: absolute;
  right: 1em;
  z-index: 1;
  margin-top: 0.5em;
}

#footer #footer-icons ul li a {
  display: block;
  float: left;
}

#footer #footer-icons li a + a {
  margin-left: 0.75em;
}

#footer #footer-icons li#footer-copyrightico {
  position: relative;
  top: 0;
  margin: 0 5px 0 0;
}

#footer #footer-icons li#footer-copyrightico a {
  background-image: url("/images/0/07/ArenaNet_logo.png");
  background-repeat: no-repeat;
  width: 116px;
  height: 47px;
  display: block;
  margin-top: -1px;
}

#footer #footer-icons li#footer-copyrightico img {
  display: none;
}

/* Prevent footer from overflowing onto the "Privacy policy"... line at small page widths on short pages. */
@media screen and (max-width: 1000px) {
  .skin-vector-legacy #footer #footer-icons {
    position: relative;
    margin-top: 1em;
  }
}
@media screen and (max-width: 600px) {
  .skin-vector-legacy #footer-poweredbyico {
    display: none;
  }
}

#catlinks {
  padding-left: 10px;
}

#mw-hidden-catlinks {
  display: none; /* seems this pre-built rule was lost with the MW 1.36 upgrade */
}

#mw-normal-catlinks,
#mw-hidden-catlinks.mw-hidden-cats-user-shown {
  display: inline-block;
}

#mw-hidden-catlinks {
  padding-left: 1em;
}

/** PAGE TABS **/
/* position tabs above the page to allow no-border on the active tabs to be shown above the border of the top of the page */
.mw-article-toolbar-container {
  position: relative;
  z-index: 1;
}

/* tabs grouped on the left, e.g. page, talk) */
#left-navigation {
  margin-left: 0px;
}

body.skin-vector-legacy #left-navigation {
  top: 2.5em;
  left: 10em;
  margin: -1px 0 0;
  position: absolute;
}

/* tabs grouped on the right, e.g. move, search) */
body.skin-vector-legacy #right-navigation {
  top: 2.5em;
  margin-top: -1px;
  position: absolute;
  right: 0;
}

body.skin-vector-legacy #right-navigation,
body.skin-vector-legacy #left-navigation {
  padding: 1px 0 0;
  z-index: 3;
}

.vector-menu-tabs {
  padding: 0;
  height: unset;
}

#p-cactions-label {
  background-image: none;
}

.vector-menu-tabs li a {
  overflow: hidden;
  line-height: 2.5em;
  background: transparent;
}

#right-navigation .vector-menu-tabs {
  margin: 0px;
}

.vector-menu-tabs ul {
  background: none;
}

body.skin-vector-legacy .vector-menu-tabs ul li {
  background-image: none;
  height: 1.875em;
  line-height: 0;
  margin: 0px -1px 0px 0px;
  border-width: 1px;
  border-style: solid;
}

.vector-menu-tabs li.selected {
  border-bottom-width: 0 !important; /* " !important" required because we moved the border rule to the bottom for color scheming*/
  padding-bottom: 1px;
  margin: 8px -1px 0 0;
  border-width: 1px;
  border-style: solid;
}
body.skin-vector-legacy .vector-menu-tabs li.selected {
  margin: 0 -1px 0 0;
}

.vector-menu-tabs li a {
  height: 2.5em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-top: 0em;
  background-image: none;
}

.vector-menu-tabs .mw-list-item > a,
#right-navigation div.vector-menu-dropdown {
  padding: 0em 1em;
}

div.vector-menu-tabs .mw-list-item,
.mw-article-toolbar-container div.vector-menu-dropdown {
  margin: 0em 0.6em;
}

.vector-menu-tabs li.selected {
  margin: unset;
  border-width: 0px;
}

.vector-menu-tabs li.selected a span {
  margin-top: 0px;
}

body.skin-vector-legacy .vector-menu-tabs ul li:first-child {
  border-top-left-radius: 0.5em;
}

body.skin-vector-legacy div#left-navigation .vector-menu-tabs li.selected {
  border-radius: 0.5em 0 0 0;
}

body.skin-vector-legacy div#left-navigation .vector-menu-tabs li + li.selected {
  border-radius: 0;
}

body.skin-vector-legacy div#left-navigation .vector-menu-tabs ul li:last-child {
  border-top-right-radius: 0.5em;
}

.vector-menu-tabs .mw-watchlink.icon a::before {
  margin-top: 0.5em;
}
body.skin-vector-legacy .vector-menu-tabs .mw-watchlink.icon a::before {
  top: 0.5em;
  margin-top: 0em;
}

/* Dropdown vector menu */
body.skin-vector-legacy #right-navigation .vector-menu-dropdown {
  height: 1.875em;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
}

#right-navigation .vector-menu-dropdown ul {
  margin-left: -1px;
}

#right-navigation .vector-menu-dropdown li a {
  text-decoration: none;
  height: 1.4em;
  line-height: 1.538em;
}

body.skin-vector-legacy #right-navigation .vector-menu-dropdown .vector-menu-content {
  top: 1.92em; /* if equal to or greater than 2em, the menu will close before the mouse reaches it */
}
#right-navigation .vector-menu-dropdown .vector-menu-content {
  top: 2.4em;
}

#right-navigation .vector-menu-dropdown .vector-menu-heading {
  padding-top: 0.55em;
  height: 2.5em;
}

#right-navigation .vector-menu-dropdown .vector-menu-heading::after {
  top: 0em;
}

.vector-menu-tabs, .vector-menu-tabs a,
#mw-head #right-navigation .vector-menu-dropdown label {
  background-image: none;
}

/* Simple search */
div#simpleSearch {
  height: 1.875em;
  margin-top: 0px;
  border-width: 1px;
  border-style: solid;
}

#p-search {
  margin: 0px;
}
body.skin-vector-legacy #p-search {
  margin: 0 0 0 -1px;
}

#p-search form,
#p-search input {
  margin: 0;
}

div#simpleSearch input {
  height: 100%;
  padding: 0.2em 0px 0px 0.2em;
  border: none;
}

input:-moz-placeholder {
  font-style: italic;
}

input::-webkit-input-placeholder {
  font-style: italic;
}

#searchInput:focus,
#searchInput:hover {
  background-color: #d7d7d7; /* color scheme: offwhite inputs */
}

/* fix magnifying glass icon drifting weirdly upon page load */
#searchButton {
  left: unset;
  width: unset;
}

/* Dropdown search menu items */
button.wvui-button--framed:not([disabled]),
input.wvui-input__input:not([disabled]) {
  color: #EAEAEA; /* color scheme: font offwhite */
}

button.wvui-button--framed:not([disabled]),
input.wvui-input__input:not([disabled]),
ol.wvui-typeahead-search__suggestions {
  background-color: #36393F; /* color scheme: page gray */
}

/* Fix search label disappearing */
.wvui-typeahead-search__submit {
  opacity: 1;
}

ol.wvui-typeahead-search__suggestions,
a.wvui-typeahead-search__suggestions__footer,
button.wvui-button--framed:not([disabled]),
input.wvui-input__input:not([disabled]) {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

button.wvui-button--framed:not([disabled]):hover {
  background-color: #40434A; /* color scheme: inactive tabs */
  color: #EAEAEA; /* color scheme: font offwhite */
}

a.wvui-typeahead-suggestion--active,
a.wvui-typeahead-search__suggestions__footer--active {
  background-color: #40434A; /* color scheme: inactive tabs */
}

span.wvui-typeahead-suggestion__title,
a.wvui-typeahead-search__suggestions__footer {
  color: #77B4D2; /* color scheme: font link */
}

/* Few fixes for the legacy vector skin */
body.skin-vector-legacy .suggestions-results {
  background-color: #40434A; /* color scheme: inactive tabs */
  border-color: #5A5C5E; /* color scheme: gray page border */
}

body.skin-vector-legacy .suggestions-result,
body.skin-vector-legacy .suggestions a.mw-searchSuggest-link {
  color: #EAEAEA; /* color scheme: font offwhite */
}

body.skin-vector-legacy .suggestions-special {
  background-color: #36393F; /* color scheme: page gray */
  border-color: #5A5C5E; /* color scheme: gray page border */
}

body.skin-vector-legacy .suggestions-result-current {
  background-color: #2a4b8d;
}

/* Wikilove icons */
#p-views #ca-wikilove.icon a {
  padding: none;
}
body.skin-vector-legacy #p-views #ca-wikilove.icon a {
  padding: 8px 0px 0px 6px;
}

#ca-wikilove.icon a::before {
  background-position: 5px 35%;
}

#ca-wikilove.icon a:hover::before,
#ca-wikilove.icon a:focus::before {
  background-position: -19px 35%;
}

div#mw-notification-area {
  top: 1em;
}

.vector-sticky-header-enabled .mw-notification-area {
  z-index: 100;
}

.vector-sticky-header-context-bar-primary {
  overflow: unset;
}

/** LEFT SIDEBAR **/
body.skin-vector-legacy #p-logo a {
  width: 10em;
}

body.skin-vector-legacy #p-logo {
  width: 10em;
  background-color: transparent;
  margin-left: 0em;
  margin-bottom: 1em;
}

.mw-logo {
  margin-right: 2.5em;
}

a.mw-logo:hover {
  text-decoration: none;
}

.mw-logo-wordmark {
  color: transparent;
}

.mw-logo-container {
  background-image: url('/images/c/cb/Mobile_skin_header_logo.png');
  background-position-y: center;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 2.5em;
  opacity: 0.85;
  overflow: visible;
  width: 350px;
}

#mw-sidebar-button::before,
#vector-toc-collapsed-button::before {
  filter: invert(40);
}

#mw-sidebar-button {
  padding: 0.5em 0.75em;
}

div#mw-panel {
  background: unset; /* override insane white gradient background that appears when resizing screen horizontally */
  left: -0.5em; /* override default -1.8em */
  top: 0.5em;
  border-style: solid;
  border-width: 1px;
  padding: 2em 0.5em 0.5em 0.5em;
}
body.skin-vector-legacy div#mw-panel {
  background-color: transparent !important;
  border: none;
  z-index: 1; /* Any value is sufficient to make sure the sidebar is in front of the footer element on short pages. Without this set, cannot click on sidebar links on short pages. */
}

div#mw-panel .portal label {
  font-weight: bold;
}

.portal label,
.vector-menu-portal .vector-menu-heading {
  background-image: none;
}

div#mw-panel .portal .body ul {
  padding-top: 0;
}

/* Table of contents */
.mw-table-of-contents-container {
  padding: 0.25em 0em;
}

.sidebar-toc {
  padding: 12px 19px 12px 9px;
  margin-left: 0.75em;
}

.sidebar-toc .sidebar-toc-contents,
.sidebar-toc .sidebar-toc-header {
  margin-left: 1.25em;
}

.sidebar-toc .sidebar-toc-list-item a {
  font-size: 0.75em;
}

.sidebar-toc-text {
  line-height: 1.125em;
}

.vector-toc-not-collapsed .sidebar-toc::after {
  display: none;
}

#vector-toc-collapsed-button {
  background-color: transparent;
}

/** PERSONAL PANEL **/
body.skin-vector-legacy #p-search .mw-ui-icon-wikimedia-search,
body.skin-vector-legacy #p-personal-more,
body.skin-vector-legacy #p-personal {
  background-color: rgba(0,0,0,0.5);
}

body.skin-vector-legacy #p-personal {
  top: 0em;
}

body.skin-vector-legacy #p-personal ul {
  padding-left: 0em;
}

#pt-anonuserpage,
#pt-userpage a,
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a {
  background: none;
  padding-left: 0px !important;
}

#pt-userpage,
#pt-anonuserpage,
#pt-login {
  text-transform: none;
}

#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
  top: -3px;
}

/* Hide personal nav elements below certain screen widths to prevent interaction with tabs */
@media screen and (max-width:818px) {
  #utcdate,
  #pt-notifications-alert,
  #pt-notifications-notice {
      display: none;
  }
}
@media screen and (max-width:595px) {
  #pt-watchlist,
  #pt-mycontris {
      display: none;
  }
}

/** MAIN CONTENT **/
.mw-editsection {
  font-family: Arial, sans-serif;
  line-height: unset;
}

/* MediaWiki help link on every special page */
div#mw-indicator-mw-helplink a {
  background-image: none;
  font-weight: bold;
}

.mw-helplink::before {
  content: "[?] ";
  font-weight: normal;
  line-height: 1.5em;
  vertical-align: top;
}

/* Empty class appears to be bugged on Vector 2022 and is never removed (has a display:none rule in it) */
#p-lang-btn.mw-portlet-empty {
  display: block;
}
#p-lang-btn {
  float: right;
}

/** COLORS FOR GENERAL UI ELEMENTS **/
html {
  background-color: #363333; /* color scheme: darkest gray */
  background-image: url("/images/3/3c/Skin_footer.png");
  background-repeat: repeat-x;
  background-position: center bottom -75px;
}

.mw-body,
div#mw-panel,
div#simpleSearch,
.vector-menu-tabs .selected,
.vector-menu-tabs li:hover,
#right-navigation .vector-menu-dropdown:hover,
#right-navigation .vector-menu-dropdown ul li:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-popupWidget-popup,
.mw-prefs-buttons,
.sidebar-toc,
.mw-sidebar {
  background-color: #36393F; /* color scheme: page gray */
}

.vector-sticky-header {
  background-color: #1A1A1A; /* color scheme: super dark */
}

.mw-body,
#footer li,
.messagebox,
.errorbox,
.warningbox,
.successbox,
.diff-context,
#pagehistory li.selected,
.oo-ui-tabOptionWidget,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.editOptions,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-notification,
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link,
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited,
.vector-sticky-header {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited,
#mw-panel .portal label,
.vector-menu label span, {
  color: #B0B0B0; /* color scheme: font darker offwhite */
}

a,
a:visited,
#pt-userpage-2 a,
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.mw-ui-button.mw-ui-progressive.mw-ui-quiet,
.sidebar-toc .sidebar-toc-link,
.toctogglelabel,
.vector-menu li a,
.vector-menu-dropdown .mw-list-item a,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs li a,
.vector-toc-collapse-button, .vector-toc-uncollapse-button,
.vector-user-links .vector-user-menu .mw-list-item > a,
.vector-user-links .vector-user-menu .vector-menu-content-item,
.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
.vector-user-menu-create-account a,
.vector-user-menu-login a,
.vector-user-menu-logout a {
  color: #77B4D2; /* color scheme: font link */
}

a.new,
#p-personal a.new,
.vector-menu-tabs .new a,
.vector-menu-tabs .new a:visited {
  color: #E16B6B; /* color scheme: font red (new) link */
}

/* note: reverse tab highlighting scheme for legacy vs non-legacy */
nav.vector-menu-tabs li,
#right-navigation nav.vector-menu-dropdown,
.vector-menu-dropdown .vector-menu-content,
div.vector-menu-tabs li.selected,
.mw_metadata td,
.mw_metadata th,
.mw-warning,
#pagehistory li.selected,
.catlinks,
.editOptions,
.diff-context,
.oo-ui-tabSelectWidget-framed,
#mw-notification-area > *,
.messagebox,
.errorbox,
.warningbox,
.successbox {
  background-color: #40434A; /* color scheme: inactive tabs */
}

#p-personal-sticky-header.vector-menu-dropdown .vector-menu-content {
  background-color: #36393F; /* color scheme: page gray */
}

body.skin-vector-legacy div#content,
#right-navigation .vector-menu-dropdown li,
#right-navigation .vector-menu-dropdown,
.catlinks,
.diff-context,
.editOptions,
.mw-article-toolbar-container,
.mw-warning,
.mw_metadata td,
.mw_metadata th,
.oo-ui-panelLayout-framed,
.vector-menu-dropdown .vector-menu-content,
.vector-menu-portal .vector-menu-heading,
.vector-menu-tabs li.selected,
.vector-menu-tabs ul li,
.vector-sticky-header,
.vector-sticky-header-context-bar,
.wikiEditor-ui .wikiEditor-ui-view,
div#mw-panel,
div#simpleSearch,
.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
footer#footer,
main#content {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

main#content {
  box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em; /* color scheme: shadow page border */
  border-style: solid;
  border-width: 1px;
}
body.skin-vector-legacy div#content {
  box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em; /* color scheme: shadow page border */
}

#contentSub,
#contentSub2 {
  color: #95A8B7; /* "Redirected from ___" message beneath the page title */
}

.mw-wiki-logo {
  filter: brightness(90%);
}

/* Identical to the main theme versions but with fill="#77B4D2" at the end instead of black */

/* down arrow icon */
.vector-menu-dropdown .vector-menu-heading::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Ctitle%3E down arrow %3C/title%3E %3Cpath d=%22m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* bell notifications */
.oo-ui-icon-bell,
.mw-ui-icon-bell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E bell %3C/title%3E %3Cpath d=%22M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* notice notifications */
.oo-ui-icon-tray,
.mw-ui-icon-tray::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E tray %3C/title%3E %3Cpath d=%22M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* search */
.searchButton[name="go"],
.oo-ui-icon-wikimedia-search::before,
.mw-ui-icon-wikimedia-search::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E search %3C/title%3E %3Cpath d=%22M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM3 8a5 5 0 1 0 10 0A5 5 0 1 0 3 8z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* user icon */
.oo-ui-icon-wikimedia-userAvatar,
.mw-ui-icon-wikimedia-userAvatar:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E user avatar %3C/title%3E %3Cpath d=%22M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z%22 fill=%22%2377b4d2%22/%3E %3Ccircle cx=%2210%22 cy=%225.5%22 r=%224.5%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* discussion */
.mw-ui-icon-wikimedia-speechBubbles::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E discussion %3C/title%3E %3Cpath d=%22M17 4v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2zM6 10H0v6z%22 fill=%22%2377b4d2%22/%3E %3Crect width=%2216%22 height=%2212%22 rx=%222%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* history */
.mw-ui-icon-wikimedia-history::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E history %3C/title%3E %3Cpath d=%22M9 6v5h.06l2.48 2.47 1.41-1.41L11 10.11V6z%22 fill=%22%2377b4d2%22/%3E %3Cpath d=%22M10 1a9 9 0 0 0-7.85 13.35L.5 16H6v-5.5l-2.38 2.38A7 7 0 1 1 10 17v2a9 9 0 0 0 0-18z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* watchlist */
.oo-ui-icon-wikimedia-watchlist,
.mw-ui-icon-wikimedia-watchlist:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E watchlist %3C/title%3E %3Cpath d=%22M1 3h16v2H1V3Zm0 6h6v2H1V9Zm0 6h8v2H1v-2Zm8-4.24h3.85L14.5 7l1.65 3.76H20l-3 3.17.9 4.05-3.4-2.14L11.1 18l.9-4.05-3-3.19Z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* watch article (empty) */
.mw-ui-icon-wikimedia-star::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E star %3C/title%3E %3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* unwatch article (fill) */
.mw-ui-icon-wikimedia-unStar::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E unStar %3C/title%3E %3Cpath d=%22M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* user talk */
.mw-ui-icon-wikimedia-userTalk::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E userTalk %3C/title%3E %3Cpath d=%22M18 0H2a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-4 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 14 4zM6 4a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 6 4zm4 8c-2.61 0-4.83-.67-5.65-3h11.3c-.82 2.33-3.04 3-5.65 3z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* preferences */
.oo-ui-icon-settings, .mw-ui-icon-settings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E settings %3C/title%3E %3Cg transform=%22translate%2810 10%29%22%3E %3Cpath id=%22a%22 d=%22M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3%22 fill=%22%2377b4d2%22 /%3E %3Cuse xlink:href=%22%23a%22 transform=%22rotate%2845%29%22 fill=%22%2377b4d2%22 /%3E %3Cuse xlink:href=%22%23a%22 transform=%22rotate%2890%29%22 fill=%22%2377b4d2%22 /%3E %3Cuse xlink:href=%22%23a%22 transform=%22rotate%28135%29%22 fill=%22%2377b4d2%22 /%3E %3C/g%3E %3Cpath d=%22M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7%22 fill=%22%2377b4d2%22 /%3E %3C/svg%3E");
}

/* contributions */
.mw-ui-icon-wikimedia-userContributions::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E userContributions %3C/title%3E %3Ccircle cx=%2215.5%22 cy=%2210.5%22 r=%222.5%22 fill=%22%2377b4d2%22/%3E %3Cpath d=%22M1 15h8v2H1Zm0-6h10v2H1Zm0-6h16v2H1Zm14.5 10.6c-3.3 0-4.5 1.6-4.5 2.7V18h9v-1.7c0-1-1.2-2.7-4.5-2.7z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/* log out */
.mw-ui-icon-wikimedia-logOut::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E logout %3C/title%3E %3Cpath d=%22M3 3h8V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H3z%22 fill=%22%2377b4d2%22/%3E %3Cpath d=%22M13 5v4H5v2h8v4l6-5z%22 fill=%22%2377b4d2%22/%3E %3C/svg%3E");
}

/** -------- CONTENT GENERAL -------- **/
sup,
sub {
  line-height: 0;
}

pre,
xmp,
plaintext,
listing {
  white-space: pre-wrap;
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
  padding: 0;
}

.mw-body h1,
.mw-body h2 {
  font-family: "EasonPro", "Times New Roman", serif !important;
  font-weight: normal;
}

.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
  font-family: Arial, sans-serif !important;
  font-weight: bold;
}

.mw-body h1 {
  font-size: 2.231em;
  line-height: 1.25em;
  margin-top: 0.724em;
  margin-bottom: 0.69em;
}

/* note: this element is outside div.bodyContent so is actually the same displayed font size as h1 2.231em */
.mw-body #firstHeading {
  font-size: 1.8125em;
  margin-top: 0;
  margin-bottom: 0.2em;
}

.mw-body h2 {
  font-size: 1.923em;
  line-height: 1.2em;
  margin-top: 1em;
  margin-bottom: 0.4em;
}

.mw-body h3 {
  font-size: 1.308em;
  line-height: 1.15em;
  margin-top: 1.353em;
  margin-bottom: 0.588em;
}

.mw-body h4 {
  font-size: 1.154em;
  line-height: 1.1em;
  margin-top: 1em;
  margin-bottom: 0.667em;
  padding: 0;
}

.mw-body h5 {
  font-size: 1em;
  line-height: 1.15em;
  margin-top: 1.308em;
  margin-bottom: 0.769em;
}

.mw-body h6 {
  font-size: 0.923em;
  line-height: 1em;
  margin-top: 1.5em;
  margin-bottom: 0.833em;
}

.mw-body #toc {
  margin: 10px 0px;
}

.mw-body #toc h2,
.mw-body .toc h2 {
  font-size: inherit;
  font-family: sans-serif !important;
  font-weight: bold;
}

table.table th > h1,
table.table th > h2,
table.table th > h3,
table.table th > h4,
table.table th > h5,
table.table th > h6 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  border: none;
}

/** LISTS **/
p,
ul,
ol,
dl {
  margin-top: 0.769em;
  margin-bottom: 0.769em;
  line-height: 1.538em;
}

dd,
dt,
li {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.538em;
}

li > ul,
li > ol {
  margin-top: 0;
  margin-bottom: 0;
}

#content li > ul,
#content li > ol {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  list-style-type: square;
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22 viewBox=%220 0 1.323 3.44%22%3E %3Cpath fill=%22%23638c9c%22 d=%22M0 1.852v1.323h1.323V1.852z%22/%3E %3C/svg%3E");
}

hr {
  background-color: #5A5C5E; /* color scheme: gray page border - note hr looks like a line but actually only respects background-color */
}

h1,
h2,
h3,
h4,
h5,
h6,
.tocnumber,
.wikitable,
pre,
code,
.mw-code,
textarea {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.toc,
#filetoc,
.toccolours,
h1,
h2,
pre,
.mw-code,
code,
textarea,
div.thumbinner,
html .thumbimage,
li.gallerybox div.thumb,
.wikitable,
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background-color: #1A1A1A; /* color scheme: super dark */
}

.wikitable,
pre,
.mw-code,
code,
textarea,
.toc,
.toccolours,
#filetoc,
div.thumbinner,
html .thumbimage,
li.gallerybox div.thumb {
  background-color: #40434A; /* color scheme: inactive tabs */
}

/** -------- EXTENSIONS -------- **/
/** EXTENSION:SEMANTIC MEDIAWIKI **/
/* Gallery format with overlays enabled */
.srf-overlay li.gallerybox div.thumb {
  background-image: none;
  background-color: #40434A; /* color scheme: inactive tabs */
}

/* Special:Ask */
.smw-ask-toplinks,
.options-parameter-list {
  border-width: 1px;
  border-style: solid;
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/* Box at the top and the popup SMW help menu */
.smw-ask-toplinks,
.smw-modal-content {
  background-color: #40434A; /* color scheme: inactive tabs */
}

/* SMW help menu close button */
.smw-modal-close {
  color: black;
  opacity: 1;
}

/* Callout info is used on Special:ProcessingErrorList and Special:ConstraintErrorList which is really still Special:Ask */
.smw-callout-info,
.smw-ask-options-row-odd,
.smw-ask-options-row-even {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.smw-ask-condition fieldset,
.options-parameter-list {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/* the little "+" sign by the fieldset toggles visibility of the rest of the table */
#options-toggle:not(:checked) + #options-list .options-parameter-list::after {
  background-image: linear-gradient(to bottom, transparent, rgba(54,57,63,0.85) 90%); /* #36393F in rgb with transparency */ /* color scheme: page gray */
}

.smw-ask-button,
.smw-tabs input.nav-tab:checked + label.nav-label {
  color: black;
}

/* Special:Browse */
.smwb-datasheet,
.smwb-factbox .smwb-cell,
.smwb-ifactbox .smwb-cell {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.smwb-datasheet {
  border-width: 1px;
  border-style: solid;
}

.smwb-theme-light .smwb-factbox,
.smwb-theme-light .smwb-ifactbox {
  border-color: #1A1A1A; /* color scheme: gray page border */
}

.smwb-bottom {
  border: none;
}

.smwb-propvalue,
.smwb-ipropvalue,
.smwb-theme-light .smwb-title,
.smwb-theme-light .smwb-center,
.smwb-theme-light .smwb-actions,
.smwb-theme-light .smwb-prophead,
.smwb-theme-light .smwb-propval {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.smwb-group .smwb-propval {
  background-color: #1A1A1A; /* color scheme: super dark */
}

/* seems to be empty all the time anyway */
.smwb-center {
  display: none;
}

.smwb-factbox .smwb-cell,
.smwb-ifactbox .smwb-cell {
  border-top-width: 1px;
}

.smwb-bottom {
  border-bottom-width: 2px;
}

/* Property pages */
.smw-property-page-results .value-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Semantic facts box beneath page previews */
.smw-factbox-view.skin-vector #mw-data-after-content .smw-factbox {
  margin-top: 0;
  padding-top: 1em;
  border-color: #5A5C5E; /* color scheme: gray page border */
  background-color: #36393F; /* color scheme: page gray */
}

.smw-factbox section,
.smw-factbox .smwfact {
  background-color: #40434A; /* color scheme: inactive tabs */
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.smw-factbox .smwfact,
.smw-ask-button, .smw-tabs input.nav-tab:checked + label.nav-label {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.smw-factbox img.thumbborder,
.smw-factbox input.nav-tab:checked + label.nav-label {
  border-color: #5A5C5E; /* color scheme: gray page border */
  background-color: #40434A; /* color scheme: inactive tabs */
}

.smwfact .smw-table-row:nth-child(2n),
.smwfact .smw-table-row:nth-child(2n+1) {
  background-color: inherit;
}

/* Special:CreateClass */
#createClassForm #mainTable th,
#createClassForm #mainTable td {
  background-color: #1A1A1A !important; /* color scheme: super dark */
  border-width: 1px;
  border-style: solid;
  border-color: #5A5C5E; /* color scheme: gray page border */
  padding: 0.5em;
}

/* Special:CreateTemplate */
.fieldBox {
  background-color: #40434A; /* color scheme: inactive tabs */
}

/** EXTENSION:PAGE FORMS **/
/* Special:MultiPageEdit */
.jexcel_content {
  color: black;
}

/** EXTENSION:POPUPS **/
div.mwe-popups,
div.mwe-popups .mwe-popups-container {
  background: none; /* remove default white */
  background-color: #40434A; /* color scheme: inactive tabs */
}

.mwe-popups.mwe-popups-no-image-pointer::after {
  border-bottom-color: #40434A; /* color scheme: inactive tabs - using it here on a border, popups triangle for the speech bubble arrow */
}

.mwe-popups .mwe-popups-extract {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
  background-image: none;
}

/** EXTENSION:CITE **/
div ol.references li:target, div sup.reference:target {
  background-color: #40434A; /* color scheme: inactive tabs */
}

/** EXTENSION:ECHO **/
a.mw-echo-alert {
  color: #1A1A1A; /* color scheme: super dark */
}

.mw-echo-ui-notificationItemWidget-unread,
.mw-echo-ui-notificationItemWidget-unread:hover {
  background-color: unset;
}

.mw-echo-ui-notificationItemWidget-initiallyUnseen {
  animation: none;
}

.mw-echo-ui-notificationItemWidget:hover {
  background-color: #36393F; /* color scheme: page gray */
}

.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-menuItemWidget > .oo-ui-labelElement-label {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.mw-echo-ui-notificationItemWidget {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.mw-echo-ui-notificationsInboxWidget-toolbarWrapper,
.mw-echo-ui-notificationItemWidget {
  background-color: #40434A; /* color scheme: inactive tabs */
}

/** EXTENSION:ADVANCED SEARCH **/
.mw-advancedSearch-fieldContainer,
.mw-advancedSearch-namespace-selection {
  background: unset;
  background-color: #40434A; /* color scheme: inactive tabs */
}
.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
  background: #40434A; /* color scheme: inactive tabs */
}

.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:hover {
  background-color: #36393F;
  color: inherit;
}

.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-advancedSearch-fieldContainer,
.mw-advancedSearch-fieldContainer fieldset,
.mw-advancedSearch-namespace-selection {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/* Namespace selection dropdown menu inherits colours from elsewhere */
.mw-advancedSearch-ui-itemMenuOptionWidget.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
  color: black;
}

/** EXTENSION:WIKIEDITOR //*
.wikiEditor-ui-toolbar {
  background-color: #36393F; /* color scheme: page gray */
}

.wikiEditor-ui-toolbar .page-characters div span {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.wikiEditor-ui-toolbar .tabs span.tab a {
  color: #77B4D2; /* color scheme: font link */
}

.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
  color: #B0B0B0; /* color scheme: font darker offwhite */
}

.wikiEditor-ui-toolbar .tabs span.tab a::before,
body.ltr .wikiEditor-ui-toolbar .tabs span.tab a.current::before,
body.ltr .wikiEditor-ui-toolbar .tabs span.tab a.current:visited::before,
body.rtl .wikiEditor-ui-toolbar .tabs span.tab a.current::before,
body.rtl .wikiEditor-ui-toolbar .tabs span.tab a.current:visited::before {
  filter: invert(90);
}

.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group,
.wikiEditor-ui-toolbar .sections .section,
.wikiEditor-ui .wikiEditor-ui-top {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/** -------- SCRIPTS -------- **/
/* ArenaNet masthead, referenced by [[MediaWiki:Common.js]] */
#upperBar {
  position: absolute;
  top: 0em;
  left: 0em;
  right: 0em;
  height: 2.5em;
  z-index: 10;
  background-color: #080808; /* color scheme: off-black top bar */
}
body.skin-vector-legacy #upperBar {
  height: 1.7em;
  z-index: 4;
}

#upperBar ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

#upperBar ul li {
  margin: 0;
  padding: 0px;
  display: inline-block;
  text-transform: uppercase;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 1em;
}

#upperBar ul li a {
  color: #F9F1E2;
  padding: 8px 10px;
  line-height: 2.5em;
}
body.skin-vector-legacy #upperBar ul li a {
  line-height: 1.7em;
}

#upperBar ul li a:hover {
  text-decoration: none;
  color: #E1251E; /* ArenaNet red */
}

#upperBar ul li a:hover {
  background: url(/images/c/c7/Masthead_hover_background.png) no-repeat 0 -30px;
}

#upperBar ul li:nth-child(1) a:hover {
  background-position: -121px -30px;
}

#upperBar ul li:nth-child(2) a:hover {
  background-position: -206px -30px;
}

#upperBar ul li:nth-child(3) a:hover {
  background-position: -274px -30px;
}

/* Hide ArenaNet upperbar elements below certain screen widths to prevent interaction with personal nav */
@media screen and (max-width:1120px) {
  body.skin-vector-legacy #upperBar li:nth-child(3) {
      display: none;
  }
}
@media screen and (max-width:1040px) {
  body.skin-vector-legacy #upperBar li:nth-child(2) {
      display: none;
  }
}
@media screen and (max-width:960px) {
  body.skin-vector-legacy #upperBar li:nth-child(1) {
      display: none;
  }
}

/* Chat link search, for [[MediaWiki:ChatLinkSearch.js]] */
.gw2w-chat-link-search {
  background-color: #40434A; /* color scheme: inactive tabs */
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/** -------- WIDGETS -------- **/
/** GENERIC BUTTON WIDGETS **/
/* Copy styling from mediawiki OOUI js */
fieldset {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

fieldset.widget input[type="button"].mw-ui-button,
fieldset.widget button.mw-ui-button {
  color: #EAEAEA; /* color scheme: font offwhite */
  background-color: #1A1A1A; /* color scheme: super dark */
}

fieldset.widget input[type="button"].mw-ui-button:hover,
fieldset.widget button.mw-ui-button:hover {
  background-color: #FFFFFF;
  color: #444444;
  border-color: #A2A9B1;
}

input[type="text"],
select[type="dropdown"] {
  background-color: #40434A; /* color scheme: inactive tabs */
  border-color: #5A5C5E; /* color scheme: gray page border */
  color: #EAEAEA; /* color scheme: font offwhite */
}

/** -------- SPECIAL PAGES -------- **/
/* Special:RecentChanges */
div.mw-changeslist-legend dt,
div.mw-changeslist-legend dd {
  line-height: 1.5em;
}

.mw-plusminus-pos {
  color: #62D562; /* color scheme: [[Special:RecentChanges]] bytecount positive green */
}

.mw-plusminus-neg {
  color: #F74444; /* color scheme: [[Special:RecentChanges]] bytecount negative red */
}

.mw-changeslist-line-watched .mw-title a {
  color: #adb000; /* color scheme: watchlist yellow */
}

/* Special:RecentChanges - when "Use non-JavaScript interface" is unticked */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-menuSelectWidget,
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.mw-rcfilters-ui-overlay,
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.mw-rcfilters-ui-filterMenuHeaderWidget-title,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label,
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-rcfilters-ui-datePopupWidget .mw-rcfilters-ui-valuePickerWidget-title {
  color: #EAEAEA; /* color scheme: font offwhite */
}

.mw-changeslist-legend,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
  background-color: unset;
}

.mw-rcfilters-ui-itemMenuOptionWidget:hover,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
  background-color: unset;
}

.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-menuSelectWidget,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-filterMenuSectionOptionWidget,
.mw-rcfilters-ui-menuSelectWidget-footer {
  background-color: #1A1A1A; /* color scheme: super dark */
}

/* Special:Search */
.mw-search-profile-tabs,
#mw-searchoptions,
.mw-search-exists {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.mw-search-profile-tabs,
#mw-searchoptions {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.mw-search-exists {
  background-color: #040; /* color scheme: [[Special:Search]] result found dark green */
}

/* Special:History (action) */
.diff-addedline .diffchange {
  background: #2E80CE; /* color scheme: show changes blue highlight */
}

.diff-deletedline .diffchange {
  background: #9B7E3A; /* color scheme: show changes gold highlight */
}

/* Special:Interwiki */
table.mw-interwikitable.body td.mw-interwikitable-local-yes {
  background-color: unset;
}

/* Special:AllMessages, Special:AbuseFilter, Special:ListFiles, Special:TrackingCategories, Special:Tags */
.mw-datatable th {
  background-color: #1A1A1A; /* color scheme: super dark */
}
.mw-datatable td,
.mw-datatable tr:hover td,
#mw-allmessagestable tbody:hover td {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.mw-datatable td,
.mw-datatable th {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

#mw-allmessagestable tbody:hover .am_default,
#mw-allmessagestable tbody:hover .am_actual {
  color: black; /* better contrast to change font color for highlighted rows of yellow and green */
}

/* Special:AbuseLog */
table.mw-abuselog-details {
  background-color: unset;
}

table.mw-abuselog-details th {
  background-color: #1A1A1A; /* color scheme: super dark */
}

/* Special:ApiSandbox */
.mw-apisandbox-container {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.mw-apisandbox-toolbar,
.mw-apisandbox-help-field,
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
  border-color: #5A5C5E; /* color scheme: gray page border */
  background-color: unset;
}

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
  background-color: #96c3ff;
}

/* Special:Preferences */
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
  background-color: #d7d7d7; /* color scheme: offwhite inputs */
}

.oo-ui-labelWidget.oo-ui-inline-help {
  color: #8e7561;
}

/* Special:Block */
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
  color: #EAEAEA; /* color scheme: font offwhite */
}

/** -------- INDIVIDUAL PAGES -------- **/
/** MAIN PAGE **/
.mainpage-background-wrapper {
overflow-x: hidden;
  background: url("/images/d/d2/Main_page_background_left_%28Secrets_of_the_Obscure%29_dark.png") top +50px left -30px/auto 600px no-repeat,
      url("/images/3/38/Main_page_background_right_%28Secrets_of_the_Obscure%29.png") bottom +0px right -375px/auto 600px no-repeat,
      #36393F; /* color scheme: page gray */
}

body.action-view.page-Main_Page #content,
body.action-view.page-Main_Page_editcopy #content {
  padding: 0em 0em 1.2em 0em;
}

.mainpage-banner > p {
  font-family: EasonPro, Helvetica, Arial, sans-serif;
  font-size: 1.8375em;
  text-align: center;
}

.mainpage-banner > p > span {
  position: relative;
  bottom: 2px;
}

.mainpage-banner,
.mainpage-cell,
#editcopylink {
  background: rgba(54,57,63,0.85); /* #36393F in rgb with transparency */ /* color scheme: page gray */
}

#mainpage-content {
  font-family: CronosPro, Arial, Helvetica, sans-serif;
  font-size: 1.225em;
}

.mainpage-cell-wrapper {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: wrap;
  justify-content: center;
  max-width: 96em;
  margin: 0 auto;
  padding-right: 0.5em;
}

.mainpage-cell {
  margin: 0.5em 0em 0em 0.5em;
  padding: 0.5em;
  width: 21em;
  border: 1px solid #5A5C5E; /* color scheme: gray page border */
  box-sizing: border-box;
}

.mainpage-cell.mainpage-cell-double {
  width: 42.5em;
}

.mainpage-cell h2 {
  line-height: 1.5em;
  font-size: 1.75em;
  margin: 0em 0em 0.5em;
}

.mainpage-cell a {
  white-space: nowrap;
}

.mainpage-cell a.external {
  white-space: normal;
}

.mainpage-cell dl {
  margin-top: 0;
  margin-bottom: 0;
}

.mainpage-featured-images {
  overflow-x: hidden;
}

#editcopylink {
  font-size: 0.8em;
  font-style: italic;
  text-align: right;
  margin-top: 1em;
}

#editcopylink span {
  margin-right: 2em;
}

/* Hide right background image if it would interfere with left image */
@media only screen and (max-width: 70em) {
  .mainpage-background-wrapper {
      background: url("/images/9/9b/Main_page_background_left_(End_of_Dragons)_copy.png") top +100px left 0px/auto 800px no-repeat,
          #36393F; /* color scheme: page gray */
  }
}

/* Hide featured images and set cells to full width if page width is less than two columns wide */
@media only screen and (max-width: 54.5em) {
  .mainpage-featured-images {
      display: none;
  }

  .mainpage-cell,
  .mainpage-cell:first-of-type {
      width: 100%;
  }
}

/** -------- TEMPLATES: NOTICES -------- **/
.notice .background {
  background-color: #40434A; /* color scheme: inactive tabs */
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/* [[Template:Spoiler]] and expandable [[Template:Spoilers]] */
.spoiler-notice {
  background-color: #530505;
  border-color: #F00;
}

/** -------- TEMPLATES: INFOBOXES -------- **/
/** INFOBOXES **/
div.infobox {
  float: right;
  position: relative;
  width: 250px;
  font-size: 0.923em;
  border-width: 1px;
  border-style: solid;
  margin: 0 0 1em 1em;
  padding: 0;
}

.infobox-icon {
  float: right;
  position: relative;
  z-index: 2;
  width: auto;
  margin: 5px;
}

.infobox.skill .infobox-icon > div {
  border: 2px solid #111;
}

/* Missing icons */
.infobox-icon a.new {
  color: transparent;
  display: inline-block;
  font-size: 0;
  overflow: hidden;
  vertical-align: middle;
  background-image: url("/images/thumb/7/74/Skill.png/40px-Skill.png");
  height: 40px;
  width: 40px;
}

.infobox.skill .infobox-icon a.new {
  background-image: url("/images/thumb/7/74/Skill.png/48px-Skill.png");
  height: 48px;
  width: 48px;
}

/* animation link beneath icon */
.infobox-icon p {
  font-size: 9px !important;
  line-height: 1em;
  margin: 0.25em -0.5em;
  padding: 2px;
}

div.infobox .heading {
  border-bottom-width: 0;
  font-family: EasonPro, "Times New Roman", serif !important;
  font-size-adjust: 0.43;
  font-size: 1.417em !important;
  font-weight: 700;
  line-height: 1.176em;
  margin: -1px -1px 5px !important;
  padding: 0.5em !important;
  position: relative;
  text-align: center;
  z-index: 1;
  border-width: 1px;
  border-style: solid;
}

div.infobox .statistics {
  text-align: center;
  margin: 0 8px;
}

div.infobox .image_wrapper {
  text-align: center;
  padding: 0;
  margin: 10px 0;
}

div.infobox .statistics span + span {
  margin-left: 5px;
}

div.infobox .wrapper {
  clear: both;
  padding: 0;
}

div.infobox dt {
  float: left;
  text-align: right;
  width: 78px;
  line-height: 1em;
  font-weight: 700;
  clear: left;
  border-right-width: 1px;
  border-right-style: solid;
  margin: 0 -1px 0 0;
  padding: 2px 8px 2px 3px;
}

div.infobox dd {
  float: left;
  width: 125px;
  font-weight: 400;
  border-left-width: 1px;
  border-left-style: solid;
  margin: 0;
  padding: 2px 7px;
}

div.infobox::after,
div.infobox .heading::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  height: 3px;
  background-image: url("/images/4/45/Shadow_after.png");
  background-size: 100% 3px;
}

div.infobox::after,
div.infobox .heading::after {
  bottom: -4px;
}

div.infobox table {
  background-color: transparent;
}

div.infobox dt,
div.infobox dd {
  line-height: 1.667em;
}

/* Switch locator maps from black to white borders with orange areas, and also if using the locator subpage template */
.infobox.area a[href$="locator.svg"],
.infobox.area img[alt$="locator.svg"] {
  filter: invert(100%) hue-rotate(220deg) brightness(78%);
}

/* RECIPE BOXES */
div.recipe-box {
  min-width: 300px;
  display: inline-block;
  float: none;
  clear: none;
  vertical-align: top;
  font-size: 1em;
  margin: 0 1em 0 0;
  position: relative;
  border-width: 1px;
  border-style: solid;
  padding: 0;
}

/* same as div.infobox:after */
div.recipe-box::after {
  bottom: -4px;
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  height: 3px;
  background-image: url("/images/4/45/Shadow_after.png");
  background-size: 100% 3px;
}

div.recipe-box .heading,
div.recipe-box .subheading {
  text-align: center;
  padding: 2px;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  margin: -1px -1px 5px !important;
}

div.recipe-box .subheading {
  border-width: 0 1px;
}

div.recipe-box dl {
  margin: 10px 0;
}

div.recipe-box dt {
  float: left;
  text-align: right;
  width: 78px;
  line-height: 1em;
  font-weight: 700;
  clear: left;
  border-right-width: 1px;
  border-right-style: solid;
  margin: 0 -1px 0 0;
  padding: 2px 8px 2px 3px;
  line-height: 1.667em;
}

div.recipe-box dd {
  float: left;
  border-left-width: 1px;
  border-left-style: solid;
  margin: 0;
  padding: 2px 7px;
}

div.infobox,
div.recipe-box {
  background-color: #40434A; /* color scheme: inactive tabs */
}

div.infobox .heading,
div.recipe-box .heading,
div.recipe-box .subheading {
  background-color: #1A1A1A; /* color scheme: super dark */
}

div.infobox,
div.infobox .heading,
div.infobox dt,
div.infobox dd,
div.recipe-box,
div.recipe-box dt,
div.recipe-box dd,
div.recipe-box .heading,
div.recipe-box .subheading {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/** -------- TEMPLATES: NAVS -------- **/
/** NAVS **/
div.nav {
  position: relative;
}

div.nav .box {
  border-width: 1px;
  border-style: solid;
  border-spacing: 0;
  font-size: 0.9230769231em;
  min-height: 60px;
  position: relative;
  margin: auto;
}

div.nav .box {
  width: 42em;
}

div.nav.thin .box {
  width: 34em;
}

div.nav.wide .box {
  width: 50em;
}

div.nav.full .box {
  width: unset;
}

div.nav .heading {
  border-width: 1px;
  border-style: solid;
  font-family: Arial, sans-serif !important;
  font-size: 1.083em;
  font-size-adjust: 0.52;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
  margin: -1px -1px 0px;
  padding: 0.769em 0;
  position: relative;
  z-index: 1;
}

div.nav .clear {
  height: 0.667em;
}

div.nav .box::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  height: 3px;
  background-image: url("/images/4/45/Shadow_after.png");
  background-size: 100% 3px;
}

div.nav .box::after {
  bottom: -4px;
}

div.nav .wrapper {
  padding: 0px 8px;
}

div.nav dl,
div.nav .wrapper.hlist > ul {
  margin: 0.667em 0em;
}

div.nav dt {
  float: left;
  text-align: right;
  clear: left;
  margin: 0 -1px 0 0;
  padding: 2px 8px 2px 0px;
  width: 25%;
  border-right-width: 1px;
  border-right-style: solid;
}

div.nav dd {
  float: left;
  text-align: left;
  margin: 0;
  padding: 2px 0px 2px 8px;
  width: 67%;
  border-left-width: 1px;
  border-left-style: solid;
}

div.nav dt,
div.nav dd {
  line-height: 1.667em;
}

div.nav table {
  line-height: 1.667em;
  background-color: transparent;
  border-collapse: collapse;
  width: 100%;
  margin: 0.667em 0;
}

div.nav table th {
  text-align: right;
  border-right-width: 1px;
  border-right-style: solid;
  vertical-align: top;
  padding: 2px 8px;
}

div.nav table td {
  padding: 2px 8px;
}

.nav .wrapper p {
  margin-top: 0.667em;
  margin-bottom: 0.667em;
}

div.nav .selflink {
  font-weight: bold;
}

/* Hide and reduce margins of horizontal rules between multiple navs */
.nav ~ hr {
  background-color: transparent;
  margin: 0.5em 0 !important;
}

div.nav .box {
  background-color: #40434A; /* color scheme: inactive tabs */
}

div.nav .heading {
  background-color: #1A1A1A; /* color scheme: super dark */
}

div.nav .box,
div.nav .heading,
div.nav dt,
div.nav dd,
div.nav table th {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/* For navs where background colors are hardcoded and sufficiently complicated */
.black-text,
.black-text a {
  color: black;
}

/** -------- TEMPLATES: TABLES -------- **/
/** TABLE CLASSES **/
.table {
  border: 0 solid;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9230769231em;
  text-align: left;
  clear: none;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 10px 0;
  padding: 0;
  background-color: #36393F; /* color scheme: page gray */
}

.table::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  height: 3px;
  background-image: url("/images/4/45/Shadow_after.png");
  background-size: 100% 3px;
}

.table::after {
  bottom: -4px;
}

.table > caption {
  font-weight: bold;
}

.table tr {
  text-align: left;
}

.table > * > tr > :first-child {
  border-left-width: 1px;
  border-left-style: solid;
}

.table > * > tr > :last-child {
  border-right-width: 1px;
  border-right-style: solid;
}

.table > tbody > tr:last-child,
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > * {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > * {
  padding: 0.5em;
}

.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th {
  line-height: 1.667em;
  padding: 0.25em 0.5em;
}

.table tr > th,
.table[class*="center"] tr {
  text-align: center;
}

.table[class*="left"] tr {
  text-align: left;
}

.table[class*="right"] tr {
  text-align: right;
}

.table[class*="middle"] tr {
  vertical-align: middle;
}

.table[class*="top"] tr {
  vertical-align: top;
}

.table[class*="bottom"] tr {
  vertical-align: bottom;
}

.table > :first-child > tr:first-child,
.table > tbody > tr.heading {
  border-width: 1px;
  border-style: solid;
}

.table > tbody > tr:nth-child(odd) {
  background-color: rgba(23, 23, 23, 0.15);
}

.table.no-odd-even > tbody > tr:nth-child(odd) {
  background-color: unset;
}

.table > tbody,
.table > tbody > tr.heading,
.table > thead > tr,
.table > tbody > tr > [rowspan],
.table > tbody > tr > [colspan] {
  border-width: 1px;
  border-style: solid;
}

.table > :first-child > tr:first-child + tr [rowspan],
.table > :first-child > tr:first-child + tr [colspan] {
  border-top-width: 0;
}

.table .line,
.table .line-bottom {
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.table .line-top {
  border-top-width: 2px;
  border-top-style: solid;
}

.table .line-left {
  border-left-width: 1px;
  border-left-style: solid;
}

.table .line-right {
  border-right-width: 1px;
  border-right-style: solid;
}

.table table {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

dl + table.table {
  margin-top: 0;
}

/* Remove after shadow for tables that have been centered, otherwise the shadow spans the entire page */
.table[class*="center"]::after,
.table.noshadowafter::after {
  background-image: none;
}

/* Skills tables */
.table.skills {
  width: 100%;
  max-width: 100em;
  display: table;
}

.table.skills > :first-child > tr:first-child ~ tr th[colspan] {
  text-align: left;
}

.table.skills > :first-child > tr:first-child ~ tr th[colspan] span.editsection {
  display: none;
}

.table.skills > :first-child > tr:first-child ~ tr th[colspan] h4 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.table.skills > * > tr > td,
.table.skills > * > tr > th {
  border-left-width: 0px;
  border-right-width: 0px;
}

.table.skills tr.elementalist th,
.table.skills tr.engineer th,
.table.skills tr.guardian th,
.table.skills tr.mesmer th,
.table.skills tr.necromancer th,
.table.skills tr.ranger th,
.table.skills tr.revenant th,
.table.skills tr.thief th,
.table.skills tr.warrior th,
.table.skills tr.asura th,
.table.skills tr.charr th,
.table.skills tr.human th,
.table.skills tr.norn th,
.table.skills tr.sylvari th {
  border-top-width: 2px;
  border-bottom-width: 2px;
}

/* Remove top/bottom margins from lists within fine/masterwork or craftvariants tables */
.table.fm dl,
.table.craftvariants dl {
  margin-top: 0;
  margin-bottom: 0;
}

/* No left margin when used purely for structure within these tables */
.table.locations dd,
.table.fm dd,
table.craftvariants dd {
  margin-left: 0;
}

/* but restore margin if it's actually being used as a definition list */
.table.locations dl > dt ~ dd {
  margin-left: 2em;
}

/* Using * lists within combo tables */
.table.combo ul {
  margin: 0.15em 0;
}

.table.combo li {
  display: block;
}

/* Restore sort icons for sortable table headers */
table.jquery-tablesorter th.headerSort {
  padding: 0.5em;
  padding-right: 21px;
}

.table.skills tr.elementalist th,
.table.skills tr.engineer th,
.table.skills tr.guardian th,
.table.skills tr.mesmer th,
.table.skills tr.necromancer th,
.table.skills tr.ranger th,
.table.skills tr.revenant th,
.table.skills tr.thief th,
.table.skills tr.warrior th,
.table.skills tr.asura th,
.table.skills tr.charr th,
.table.skills tr.human th,
.table.skills tr.norn th,
.table.skills tr.sylvari th {
  background-color: #1A1A1A;
}

.table > tbody > tr.heading,
.table > tbody > tr > th,
.table > tfoot > tr > th {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > *,
.table > :first-child > tr:first-child {
  background-color: #1A1A1A; /* color scheme: super dark */
}

.table tr,
.table > * > tr > :first-child,
.table > * > tr > :last-child,
.table > tbody > tr:last-child,
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > *,
.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > *,
.table > :first-child > tr:first-child,
.table > tbody > tr.heading,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > tbody > tr:nth-child(odd),
.table > tbody,
.table > tbody > tr.heading,
.table > thead > tr,
.table > tbody > tr > [rowspan],
.table > tbody > tr > [colspan],
.table .line,
.table .line-bottom,
.table .line-top,
.table .line-left,
.table .line-right {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

/** -------- TEMPLATES: OTHER -------- **/
/* [[Template:Rarity]] */
.rarity-junk {
  color: #828282; /* bit darker than in light skins, to contrast with plaintext */
}

.rarity-basic {
  color: #FFFFFF; /* unlike light skins, this can actually afford to be white instead of black. */
}

.rarity-fine {
  color: #62A4DA;
}

.rarity-masterwork {
  color: #1a9306;
}

.rarity-rare {
  color: #fcd00b;
}

.rarity-exotic {
  color: #ffa405;
}

.rarity-ascended {
  color: #fb3e8d;
}

.rarity-legendary {
  color: #974EFF; /* bit lighter than light themes, dark purple has poor contrast */
}

/* Patch notes for skill history project */
.skill-history {
  background-color: #40434A; /* color scheme: inactive tabs */
}

/* [[Template:Archive-box]] and [[Template:Mail]] */
.mail {
  border-width: 1px;
  border-style: solid;
}

.mail,
.archive-box {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.mail,
.archive-box {
  border-color: #5A5C5E; /* color scheme: gray page border */
}

.white {
  background-color: #36393F; /* color scheme: page gray */
}

.offwhite {
  background-color: #313439; /* color scheme: slightly darker than .white (page gray) above */
}

/* [[Template:Complexity dots]] */
.complexity-dot { color: transparent; }

.color-filled-guardian       { text-shadow: 0 0 0 #00B4FF; }
.color-filled-revenant       { text-shadow: 0 0 0 #FF0000; }
.color-filled-warrior        { text-shadow: 0 0 0 #FFA200; }
.color-filled-engineer       { text-shadow: 0 0 0 #FFDE00; }
.color-filled-ranger         { text-shadow: 0 0 0 #EAFF00; }
.color-filled-thief          { text-shadow: 0 0 0 #FF5400; }
.color-filled-elementalist   { text-shadow: 0 0 0 #FF0078; }
.color-filled-mesmer         { text-shadow: 0 0 0 #FE00EF; }
.color-filled-necromancer    { text-shadow: 0 0 0 #C0FF00; }

.color-unfilled-guardian     { text-shadow: 0 0 0 #004866; }
.color-unfilled-revenant     { text-shadow: 0 0 0 #660000; }
.color-unfilled-warrior      { text-shadow: 0 0 0 #664000; }
.color-unfilled-engineer     { text-shadow: 0 0 0 #000000; }
.color-unfilled-ranger       { text-shadow: 0 0 0 #5D6600; }
.color-unfilled-thief        { text-shadow: 0 0 0 #662100; }
.color-unfilled-elementalist { text-shadow: 0 0 0 #000000; }
.color-unfilled-mesmer       { text-shadow: 0 0 0 #660060; }
.color-unfilled-necromancer  { text-shadow: 0 0 0 #4C6600; }

/* Weekly/daily rotation data templates */
.highlight-yellow {
  background-color: #9D5A02 !important;
}

.highlight-blue {
  background-color: #1b728e !important;
}

/* "Guild Wars 2 Wiki" and "Help" namespace layouts */
.wiki-help,
.wiki-gw2w,
.wiki-projects {
  border-color: transparent;
}

.darkfill,
.wiki-nav {
  border-width: 2px;
  border-style: solid;
}

.darkfill h2 {
  margin: 0.2em auto 0.2em auto;
  border: 0;
  font-weight: bold;
}

.wiki-help .darkfill,
.wiki-gw2w .darkfill,
.wiki-projects .darkfill,
.wiki-nav {
  background-color: #40434A; /* color scheme: inactive tabs */
}

.wiki-help .darkfill {
  border-color: #598CA0; /* darker blue */
}

.wiki-gw2w .darkfill {
  border-color: #8EAB72; /* darker green */
}

.wiki-projects .darkfill {
  border-color: #B78048; /* darker orange */
}

.wiki-nav {
  border-color: #8282CA; /* darker purple */
}

/* Image license templates - too many unique colours to bother capturing as classes */
.imagelicense {
  color: black;
}

.imagelicense a,
.imagelicense a:visited,
.mw-parser-output .imagelicense a.external,
.mw-parser-output .imagelicense a.external:visited {
  color: #002BB8; /* color scheme: boring blue to avoid rewriting license templates to support CSS properly */
}