MediaWiki:Monobook.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.
/** -------- NON-CONTENT UI -------- **/
html,
body {
  min-height: 100%;
  height: auto !important;
}

html {
  background-color: #F3F3F3;
  background-image: url("/images/3/3c/Skin_footer.png"),
      url("/images/b/b0/Skin_page_bg_gradient.png");
  background-repeat: repeat-x, repeat-x;
  background-position: left bottom -75px, left top;
}

body {
  font-size: 0.8125em;
  line-height: 1.538em;
  width: 100%;
  background: none !important;
}

body div#globalWrapper {
  font-size: 100%;
  background: none !important;
}

div#column-content {
  background-image: url("/images/4/43/Skin_header_(Secrets_of_the_Obscure).png");
  background-position: top left;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 100%;
  position: static;
  min-height: 249px;
}

div#content {
  margin-top: 5.2em !important;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em;
  border: 1px solid #CCC;
  border-radius: 0;
  padding: 1.2em 1.5em;
  border-right-width: 0;
}

#bodyContent {
  padding-top: 0.1em;
  position: relative;
}

/** FOOTER **/
#footer {
  background-color: transparent !important;
  margin-left: 12.2em !important;
  padding: 1em !important;
  border-width: 0 !important;
  text-align: left !important;
  font-size: 1em !important;
}

#footer #f-list {
  margin: 0 11em 0 0;
}

#footer li {
  display: block; /* for pages with a history, this prevents the "last edited" message flying about */
  font-size: 0.923em;
}

#footer #f-list #privacy,
#footer #f-list #about,
#footer #f-list #disclaimer,
#footer #f-list #mobileview {
  float: left;
  margin-right: 1em !important;
  margin-top: 0.833em !important;
}

#f-poweredbyico,
#f-copyrightico {
  margin: 30px 6px 0px !important;
}

#footer #f-copyrightico a {
  background-image: url("/images/0/07/ArenaNet_logo.png");
  height: 47px;
  width: 116px;
  display: block;
}

#footer #f-copyrightico img {
  display: none;
}

body:not(.skin--responsive) #f-copyrightico,
body.skin--responsive #f-copyrightico {
  float: right;
}

#f-poweredbyico a {
  margin-left: 0.5em;
}

div#globalWrapper,
input,
select {
  font-family: Arial, sans-serif;
  line-height: 1.538em;
}

input,
select {
  font-size: 1em;
}

div#content #toc {
  margin: 10px 0px;
}

.special li {
  line-height: 1.538em;
}

span.mw-editsection {
  font-family: Arial, sans-serif;
  font-size: 13px !important;
  vertical-align: middle;
}

/** PAGE TABS **/
body:not(.skin--responsive) #p-cactions,
body.skin--responsive #p-cactions {
  font-size: 1em;
  padding: 0;
  margin-left: 0.7em;
  margin-top: 1.7em;
  width: calc(100% - (11.5em + 0.7em)); /* fill page width instead of default 76% */
  z-index: 2; /* shadow for tabs */
}

/* Need to switch the above off in mobile view */
body.skin--responsive #p-cactions.mobile-menu-active {
  padding: unset;
  z-index: 10000;
}

body:not(.skin--responsive) #p-cactions .pBody,
body.skin--responsive #p-cactions .pBody {
  font-size: 0.923em;
  margin: 0;
}

#p-cactions ul {
  margin: 0 0 0 1px;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}

body:not(.skin--responsive) #p-cactions li.selected,
body:not(.skin--responsive) #p-cactions li,
body.skin--responsive #p-cactions li.selected,
body.skin--responsive #p-cactions li {
  padding: 0;
}

body:not(.skin--responsive) #p-cactions li,
body.skin--responsive #p-cactions li {
  border: 1px solid #AAA;
  border-bottom-color: #CCC;
  background-color: #EEE;
  display: block;
  float: left;
  height: 2.3em;
  line-height: 2.3em;
  margin: 0 0 0 -1px;
}

body:not(.skin--responsive) #p-cactions li#ca-talk,
body.skin--responsive #p-cactions li#ca-talk {
  margin-right: 1.7em;
}

body:not(.skin--responsive) #p-cactions li.selected,
body.skin--responsive #p-cactions li.selected {
  background-color: #FFF;
  background-image: none;
  border: 1px solid #CCC;
  border-bottom-width: 0px;
  font-weight: normal;
  margin: 0 0 0 -1px;
  padding-bottom: 1px !important;
  overflow: visible;
}

body:not(.skin--responsive) #p-cactions li.selected a,
body.skin--responsive #p-cactions li.selected a {
  color: #000;
}

body:not(.skin--responsive) #p-cactions li:hover,
body.skin--responsive #p-cactions li:hover {
  background-color: #F8F8F8;
}

body:not(.skin--responsive) #p-cactions li:first-child,
body:not(.skin--responsive) #p-cactions li#special-articlefeedback,
body:not(.skin--responsive) #p-cactions li:nth-child(4),
body.skin--responsive #p-cactions li:first-child,
body.skin--responsive #p-cactions li#special-articlefeedback,
body.skin--responsive #p-cactions li:nth-child(4) {
  border-top-left-radius: 0.7em;
}

body:not(.skin--responsive) #p-cactions li:nth-child(2),
body:not(.skin--responsive) #p-cactions li:last-child,
body.skin--responsive #p-cactions li:nth-child(2),
body.skin--responsive #p-cactions li:last-child {
  border-top-right-radius: 0.7em;
}

body:not(.skin--responsive) #p-cactions li a,
body:not(.skin--responsive) #p-cactions li a:hover,
body:not(.skin--responsive) #p-cactions li.istalk a,
body:not(.skin--responsive) #p-cactions #ca-addsection a,
body.skin--responsive #p-cactions li a,
body.skin--responsive #p-cactions li a:hover,
body.skin--responsive #p-cactions li.istalk a,
body.skin--responsive #p-cactions #ca-addsection a {
  padding: 0.6em 1em;
  background: none;
}

body:not(.skin--responsive) #p-cactions li.selected a,
body.skin--responsive #p-cactions li.selected a {
  background: none;
}

/** LEFT SIDEBAR **/
#p-logo {
  margin: 0;
}

#p-navigation {
  margin-top: 1.5em;
}

#p-navigation h3 {
  display: none;
}

body:not(.skin--responsive) .portlet,
body.skin--responsive .portlet {
  width: 11em;
  position: relative;
  font-size: 1em;
  margin: 0.833em 0.5em 0.833em;
}

body:not(.skin--responsive) .portlet h5,
body:not(.skin--responsive) .portlet h3,
body.skin--responsive .portlet h5,
body.skin--responsive .portlet h3 {
  color: #4D4D4D;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.333em;
  text-transform: none;
  display: block;
  margin: 0;
  padding: 0.2em 0.9em 0.5em;
  width: 9.2em;
}

body:not(.skin--responsive) .portlet .pBody,
body:not(.skin--responsive) #p-search .pBody,
body.skin--responsive .portlet .pBody,
body.skin--responsive #p-search .pBody {
  border: 0;
  background-color: transparent;
}

body:not(.skin--responsive) .portlet .pBody,
body.skin--responsive .portlet .pBody {
  margin: 0 0.5em;
  padding: 0;
}

.portlet ul {
  font-size: 1em;
  list-style-image: none;
  list-style-type: none;
  margin: 0em 0em 0em 0.5em;
}

.pBody ul {
  padding-inline-start: 0em;
}

.pBody li {
  line-height: 1.667em;
}

body:not(.skin--responsive) #searchInput,
body.skin--responsive #searchInput {
  font-size: 1em;
}

/** PERSONAL PORTLET **/
.pBody {
  font-size: 0.923em;
}

#p-personal {
  text-align: right;
}

body:not(.skin--responsive) #p-personal .pBody,
body.skin--responsive #p-personal .pBody {
  width: auto;
  display: inline-block;
  padding-right: 0.75em;
  border-radius: 0 0 0 0.5em;
  background-color: #FFF;
  margin-left: 13.2em; /* 12em plus compensation for page padding */
}

/* With responsive mode, need to undo the margin otherwise the options in the "personal" menu are invisible */
body.skin--responsive #p-personal.mobile-menu-active .pBody {
  margin-left: unset;
}

body:not(.skin--responsive) #p-personal ul,
body.skin--responsive #p-personal ul {
  padding-left: 0;
  padding-right: 0;
  line-height: 1.667em;
  text-align: left;
}

#p-personal li {
  font-size: 1em;
  margin: 0.5em 0 0.5em 1em;
}

body:not(.skin--responsive) #p-personal li a,
body.skin--responsive #p-personal li a {
  color: #002BB8;
}

#p-personal li a:hover {
  /* padding: 0; -- not sure why */
  background-color: transparent;
}

body:not(.skin--responsive) li#pt-userpage,
body.skin--responsive li#pt-userpage {
  background: none;
  padding-left: 0px !important;
}

/* References */
ol.references > li:target,
sup.reference:target,
cite:target {
  background: #EEF;
}

/* Red cancel button when editing pages, and on Special:Preferences */
.editButtons span.oo-ui-buttonElement-frameless a,
#mw-prefs-restoreprefs a {
  height: 33px;
  border: 1px solid #CCC;
  background-image: linear-gradient(180deg, #FEE 0, #FFD6D6 100%);
}

.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button > span.oo-ui-labelElement-label {
  color: rgb(51, 51, 51);
}

.editButtons span.oo-ui-buttonElement-frameless a:hover {
  border-color: #B55;
}

/** MOBILE LAYOUTS **/
/* Priority 1. Hide SMW and MW icons */
@media screen and (max-width: 1000px) {
  #f-poweredbyico {
      display: none;
  }
}

/* Priority 2. Hide any special tabs */
@media screen and (max-width: 940px) {
  li#special-articlefeedback,
  li#special-diff {
      display: none;
  }
}

/* Priority 3. Hide watch and protect tabs, full width footer, and hide popups */
@media screen and (max-width: 770px) {
  body:not(.skin--responsive) li#ca-watch,
  body:not(.skin--responsive) li#ca-protect,
  body:not(.skin--responsive) li#pt-notifications-alert,
  body:not(.skin--responsive) li#pt-notifications-notice,
  body:not(.skin--responsive) li#pt-watchlist,
  body:not(.skin--responsive) li#utcdate,
  body.skin--responsive li#ca-watch,
  body.skin--responsive li#ca-protect,
  body.skin--responsive li#pt-notifications-alert,
  body.skin--responsive li#pt-notifications-notice,
  body.skin--responsive li#pt-watchlist,
  body.skin--responsive li#utcdate{
      display: none;
  }
}

/* Priority 4. Remove spacing between tabs, hide all page header notifications, convert to flex-box grid */
@media screen and (max-width: 670px) {
  body:not(.skin--responsive) #p-cactions li#ca-talk,
  body.skin--responsive #p-cactions li#ca-talk {
      margin-right: 0;
  }

  body:not(.skin--responsive) #p-cactions li:nth-child(2),
  body:not(.skin--responsive) #p-cactions li:last-child,
  body:not(.skin--responsive) #p-cactions li:first-child,
  body:not(.skin--responsive) #p-cactions li#special-articlefeedback,
  body:not(.skin--responsive) #p-cactions li:nth-child(4),
  body.skin--responsive #p-cactions li:nth-child(2),
  body.skin--responsive #p-cactions li:last-child,
  body.skin--responsive #p-cactions li:first-child,
  body.skin--responsive #p-cactions li#special-articlefeedback,
  body.skin--responsive #p-cactions li:nth-child(4) {
      border-radius: 0;
  }

  li#pt-mycontris,
  .mw-indicators {
      display: none;
  }
}

/* Priority 5. Move footer to left side */
@media screen and (max-width: 550px) {
  #footer {
      margin-left: 0 !important;
  }

  /* Fixes for the responsive mode popup menus */
  body.skin--responsive .portlet.mobile-menu-active,
  body.skin--responsive .portlet.mobile-menu-active#p-cactions,
  body.skin--responsive .mobile-menu-active#sidebar-mobilejs {
      width: unset;
      top: 0.5em;
      left: 0.5em;
      padding: 1em;
      margin: 0em;
  }
  
  body.skin--responsive .mobile-menu-active#sidebar-mobilejs {
      font-size: 1em;
  }
  
  body.skin--responsive .mobile-menu-active ul {
      padding-top: 0;
  }
  
  body.skin--responsive .portlet.mobile-menu-active li,
  body.skin--responsive .portlet.mobile-menu-active#p-personal li,
  body.skin--responsive .portlet.mobile-menu-active#p-cactions li,
  body.skin--responsive .portlet.mobile-menu-active#p-cactions li.selected,
  body.skin--responsive .mobile-menu-active#sidebar-mobilejs li {
      float: unset;
      margin: 5px;
      line-height: unset;
      border: 1px solid #AAA;
      background-color: #EEE;
      display: block;
      height: unset;
  }
  
  body.skin--responsive .portlet.mobile-menu-active .pBody,
  body.skin--responsive .portlet.mobile-menu-active#p-personal .pBody {
      margin: 0;
      padding: 0;
      display: block;
  }
  
  body.skin--responsive .portlet.mobile-menu-active ul,
  body.skin--responsive:not(.monobook-capitalize-all-nouns) .portlet.mobile-menu-active h3 {
      padding: 0;
      margin: 0;
  }
  
  body.skin--responsive:not(.monobook-capitalize-all-nouns) .portlet.mobile-menu-active h3,
  body.skin--responsive:not(.monobook-capitalize-all-nouns) .portlet.mobile-menu-active ul li a,
  body.skin--responsive:not(.monobook-capitalize-all-nouns) #p-personal.mobile-menu-active ul,
  body.skin--responsive:not(.monobook-capitalize-all-nouns) #p-cactions.mobile-menu-active ul li a,
  body.skin--responsive .mobile-menu-active#sidebar-mobilejs ul li a {
      padding: 0.6em 1em;
      text-transform: none;
      width: unset;
  }
}

/** -------- CONTENT GENERAL -------- **/
h1,
#bodyContent > h1 {
  font-family: "EasonPro", "Times New Roman", serif !important;
  font-size: 2.231em;
  font-weight: normal;
  line-height: 1.2em;
  margin-top: 0.724em;
  margin-bottom: 0.69em;
  padding: 0;
}

#firstHeading {
  font-size: 2.231em;
  margin-top: 0;
  padding: 0;
}

h2,
#bodyContent > h2 {
  font-family: "EasonPro", "Times New Roman", serif !important;
  font-weight: normal;
  font-size: 1.923em;
  line-height: 1.2em;
  margin-top: 1em;
  margin-bottom: 0.4em;
  padding: 0;
}

h3,
#bodyContent > h3 {
  font-family: Arial, sans-serif !important;
  font-weight: bold;
  font-size: 1.3077em;
  line-height: 1.15em;
  margin-top: 1.353em;
  margin-bottom: 0.588em;
  padding: 0;
}

h4,
#bodyContent > h4 {
  font-family: Arial, sans-serif !important;
  font-size: 1.154em;
  font-weight: bold;
  line-height: 1.1em;
  margin-top: 1em;
  margin-bottom: 0.667em;
  padding: 0;
}

h5,
#bodyContent > h5 {
  font-family: Arial, sans-serif !important;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.15em;
  margin-top: 1.308em;
  margin-bottom: 0.769em;
  padding: 0;
}

h6,
#bodyContent > h6 {
  font-family: Arial, sans-serif !important;
  font-size: 0.923em;
  font-weight: bold;
  line-height: 1em;
  margin-top: 1.5em;
  margin-bottom: 0.833em;
  padding: 0;
}

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

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

sup,
sub {
  line-height: 0;
}

textarea,
pre,
xmp,
plaintext,
listing,
*.mw-editfont-monospace,
*.mw-editfont-sans-serif,
*.mw-editfont-serif {
} {
  font-size: 1.1em;
  font-family: monospace;
}

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

/** -------- EXTENSIONS -------- **/
/** EXTENSION:ECHO **/
.mw-echo-ui-overlay {
  font-size: 1.1em;
}

/** EXTENSION:ADVANCED SEARCH **/
/* Normalise borders and shadow between inputs as far as possible */
.mw-advancedSearch-container .oo-ui-textInputWidget .oo-ui-inputWidget-input,
.mw-advancedSearch-container .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
.mw-advancedSearch-container .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
  background-color: transparent;
}

.mw-advancedSearch-container .oo-ui-tagMultiselectWidget-handle {
  border-radius: 0px;
}

.mw-advancedSearch-container .oo-ui-textInputWidget-type-text input,
.mw-advancedSearch-container .oo-ui-tagMultiselectWidget-handle input,
.mw-advancedSearch-container .oo-ui-dropdownInputWidget {
  box-shadow: none;
}

.mw-advancedSearch-namespace-selection {
  border-color: #c8ccd1;
}

/** -------- SCRIPTS -------- **/
/* ArenaNet masthead, referenced by [[MediaWiki:Common.js]] */
#upperBar {
  position: absolute;
  top: 0;
  left: 12em;
  height: 30px;
  z-index: 4;
  font-size-adjust: 0.52;
}

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

#upperBar ul li {
  margin: 0;
  padding: 0px;
  display: inline-block;
  font-family: "EasonPro", "Times New Roman", "serif";
}

#upperBar ul li a {
  color: #422525;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  padding: 8px 10px;
  line-height: 2.6;
}

#upperBar ul li a:hover {
  text-decoration: none;
  color: #A22525;
}

#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) {
  #upperBar li:nth-child(3) {
      display: none;
  }
}
@media screen and (max-width:1040px) {
  #upperBar li:nth-child(2) {
      display: none;
  }
}
@media screen and (max-width:960px) {
  #upperBar li:nth-child(1) {
      display: none;
  }
}

/* Chat link search, for [[MediaWiki:ChatLinkSearch.js]] */
.gw2w-chat-link-search {
  background: #F3F3F3;
  border: 1px solid #C0C0C0;
}

/** -------- WIDGETS -------- **/
/** Generic widgets - Interactive maps with leaflet plugin **/
/* Overwrite default MW responsive skin rule which has the effect of hiding map tiles at low widths */
@media screen and (max-width: 550px) {
  body.skin--responsive .monobook-body .leaflet-container img {
      max-width: unset !important;
  }
}

/** -------- SPECIAL PAGES -------- **/
/* Special:Search */
.mw-search-exists {
  background-image: linear-gradient(to bottom, #F0FBE1 0%, #C3E59A 100%);
  border: 1px solid #B8D892;
}

/* action=history */
.mw-pager-body ul {
  margin-top: 0;
  margin-bottom: 0;
}
.mw-pager-body li {
  margin-top: 0.2em;
}

/** -------- INDIVIDUAL PAGES -------- **/
/** MAIN PAGE **/
.mainpage-background-wrapper {
  overflow-x: hidden;
  background: url("/images/8/84/Main_page_background_left_%28Secrets_of_the_Obscure%29.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,
      #FFF;
}

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(255, 255, 255, 0.85);
}

#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 rgba(172, 121, 105, 0.5);
  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/8/84/Main_page_background_left_%28Secrets_of_the_Obscure%29.png") top +50px left -30px/auto 600px no-repeat,
      #FFF;
  }

}

/* 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 templates */
.notice .background {
  background-color: #F7F7F7;
  border-color: silver;
}

.spoiler-notice {
  background-color: #F99;
  border-color: #F00;
}

/** -------- TEMPLATES: INFOBOXES -------- **/
div.infobox {
  float: right;
  position: relative;
  width: 250px;
  background: #FFF;
  font-size: 0.923em;
  border: 1px solid #AAA;
  margin: 0 0 1em 1em;
  padding: 0;
  background-image: linear-gradient(135deg,#fff 0%,#eee 100%);
}

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

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

.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 {
  text-align: center;
  color: #444;
  font-size: 9px !important;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.75em;
  line-height: 1em;
  margin: 0.25em -0.5em;
  padding: 2px;
}

div.infobox .heading {
  font-weight: 700;
  background-image: url("/images/c/cc/Infobox_header_overlay.png") !important;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
  position: relative;
  z-index: 1;
  margin: -1px -1px 5px !important;
}

div.infobox .heading {
  font-family: EasonPro, "Times New Roman", serif !important;
  font-size: 1.417em !important;
  color: #FFF !important;
  background-color: #444;
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
  line-height: 1.176em;
  font-size-adjust: 0.43;
  padding: 0.5em !important;
}

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: 2px solid #999;
  margin: 0 -2px 0 0;
  padding: 2px 8px 2px 3px;
}

div.infobox dd {
  float: left;
  width: 140px;
  font-weight: 400;
  border-left: 2px solid #999;
  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: -3px;
}

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

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

/* declare skill and trait infoboxes first because these colours are overwritten by professions */
div.infobox.skill .heading,
div.infobox.trait .heading {
  background-color: #444;
}

div.infobox.skill dd,
div.infobox.skill dt,
div.infobox.trait dd,
div.infobox.trait dt {
  border-color: #999;
}

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

div.infobox.guardian .heading {
  background-color: #066;
}

div.infobox.guardian dd,
div.infobox.guardian dt {
  border-color: #066;
}

div.infobox.revenant .heading {
  background-color: #861313;
}

div.infobox.revenant dd,
div.infobox.revenant dt {
  border-color: #861313;
}

div.infobox.warrior .heading {
  background-color: #C60;
}

div.infobox.warrior dd,
div.infobox.warrior dt {
  border-color: #C60;
}

div.infobox.engineer .heading {
  background-color: #630;
}

div.infobox.engineer dd,
div.infobox.engineer dt {
  border-color: #630;
}

div.infobox.ranger .heading {
  background-color: #360;
}

div.infobox.ranger dd,
div.infobox.ranger dt {
  border-color: #360;
}

div.infobox.thief .heading {
  background-color: #933;
}

div.infobox.thief dd,
div.infobox.thief dt {
  border-color: #933;
}

div.infobox.elementalist .heading {
  background-color: #C00;
}

div.infobox.elementalist dd,
div.infobox.elementalist dt {
  border-color: #C00;
}

div.infobox.mesmer .heading {
  background-color: #606;
}

div.infobox.mesmer dd,
div.infobox.mesmer dt {
  border-color: #606;
}

div.infobox.necromancer .heading {
  background-color: #063;
}

div.infobox.necromancer dd,
div.infobox.necromancer dt {
  border-color: #063;
}

div.infobox.asura .heading {
  background-color: #63C;
}

div.infobox.asura dd,
div.infobox.asura dt {
  border-color: #63C;
}

div.infobox.charr .heading {
  background-color: #900;
}

div.infobox.charr dd,
div.infobox.charr dt {
  border-color: #900;
}

div.infobox.human .heading {
  background-color: #C90;
}

div.infobox.human dd,
div.infobox.human dt {
  border-color: #C90;
}

div.infobox.norn .heading {
  background-color: #069;
}

div.infobox.norn dd,
div.infobox.norn dt {
  border-color: #069;
}

div.infobox.sylvari .heading {
  background-color: #060;
}

div.infobox.sylvari dd,
div.infobox.sylvari dt {
  border-color: #060;
}

div.infobox.boon .heading {
  background-color: #399;
}

div.infobox.boon dd,
div.infobox.boon dt {
  border-color: #399;
}

div.infobox.condition .heading {
  background-color: #363;
}

div.infobox.condition dd,
div.infobox.condition dt {
  border-color: #363;
}

div.infobox.promo .heading {
  background-color: #6EA500;
}

div.infobox.promo dd,
div.infobox.promo dt {
  border-color: #6EA500;
}

div.infobox.item .heading {
  background-color: #C30;
}

div.infobox.item dd,
div.infobox.item dt {
  border-color: #C30;
}

div.infobox.skin .heading {
  background-color: #C4003E;
}

div.infobox.skin dd,
div.infobox.skin dt {
  border-color: #C4003E;
}

div.infobox.crafting .heading {
  background-color: #533610;
}

div.infobox.crafting dd,
div.infobox.crafting dt {
  border-color: #533610;
}

div.infobox.npc .heading {
  background-color: #390;
}

div.infobox.npc dd,
div.infobox.npc dt {
  border-color: #390;
}

div.infobox.pet .heading {
  background-color: #360;
}

div.infobox.pet dd,
div.infobox.pet dt {
  border-color: #360;
}

div.infobox.quest .heading {
  background-color: #F90;
}

div.infobox.quest dd,
div.infobox.quest dt {
  border-color: #F90;
}

div.infobox.area .heading {
  background-color: #306;
}

div.infobox.area dd,
div.infobox.area dt {
  border-color: #306;
}

div.infobox.rewardtrack .heading {
  background-color: #001434;
}

div.infobox.rewardtrack dd,
div.infobox.rewardtrack dt {
  border-color: #4C5A70;
}

/* 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;
  background: #FFF;
  border: 1px solid #AAA;
  padding: 0;
  background-image: linear-gradient(135deg,#fff 0%,#eee 100%);
}

div.recipe-box::after {
  /* from div.infobox: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 .subheading,
div.recipe-box .heading {
  text-align: center;
  background-color: #D3C0A8;
  padding: 2px;
  font-weight: bold;
  background-image: url("/images/c/cc/Infobox_header_overlay.png") !important;
  border: 1px solid rgba(0, 0, 0, 0.25);
  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: 2px solid #A99A86;
  margin: 0 -2px 0 0;
  padding: 2px 8px 2px 3px;
  line-height: 1.667em;
}

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

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

div.nav .box {
  background-image: linear-gradient(135deg,#fff 0%,#eee 100%);
  border: 1px solid #AAA;
  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 {
  background-color: #888;
  background-image: url("/images/c/cc/Infobox_header_overlay.png") !important;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
  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,
div.nav .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.nav .box::after,
div.nav .heading::after {
  bottom: -3px;
}

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;
  border-right: 2px solid #999;
  margin: 0 -2px 0 0;
  padding: 2px 8px 2px 0px;
  width: 25%;
}

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

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: 2px solid #888;
  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;
}

div.nav.guardian .heading {
  background-color: #39C;
}

div.nav.guardian dd,
div.nav.guardian dt,
div.nav.guardian table th,
div.nav table tr.guardian th {
  border-color: #39C;
}

div.nav.revenant .heading {
  background-color: #C23F3A;
}

div.nav.revenant dd,
div.nav.revenant dt,
div.nav.revenant table th,
div.nav table tr.revenant th {
  border-color: #C23F3A;
}

div.nav.warrior .heading {
  background-color: #F93;
}

div.nav.warrior dd,
div.nav.warrior dt,
div.nav.warrior table th,
div.nav table tr.warrior th {
  border-color: #F93;
}

div.nav.engineer .heading {
  background-color: #963;
}

div.nav.engineer dd,
div.nav.engineer dt,
div.nav.engineer table th,
div.nav table tr.engineer th {
  border-color: #963;
}

div.nav.ranger .heading {
  background-color: #6C3;
}

div.nav.ranger dd,
div.nav.ranger dt,
div.nav.ranger table th,
div.nav table tr.ranger th {
  border-color: #6C3;
}

div.nav.thief .heading {
  background-color: #C66;
}

div.nav.thief dd,
div.nav.thief dt,
div.nav.thief table th,
div.nav table tr.thief th {
  border-color: #C66;
}

div.nav.elementalist .heading {
  background-color: #EC5752;
}

div.nav.elementalist dd,
div.nav.elementalist dt,
div.nav.elementalist table th,
div.nav table tr.elementalist th {
  border-color: #EC5752;
}

div.nav.mesmer .heading {
  background-color: #939;
}

div.nav.mesmer dd,
div.nav.mesmer dt,
div.nav.mesmer table th,
div.nav table tr.mesmer th {
  border-color: #939;
}

div.nav.necromancer .heading {
  background-color: #396;
}

div.nav.necromancer dd,
div.nav.necromancer dt,
div.nav.necromancer table th,
div.nav table tr.necromancer th {
  border-color: #396;
}

div.nav.asura .heading {
  background-color: #96F;
}

div.nav.asura dd,
div.nav.asura dt,
div.nav.asura table th,
div.nav table tr.asura th {
  border-color: #96F;
}

div.nav.charr .heading {
  background-color: #D25D6B;
}

div.nav.charr dd,
div.nav.charr dt,
div.nav.charr table th,
div.nav table tr.charr th {
  border-color: #D25D6B;
}

div.nav.human .heading {
  background-color: #FC3;
}

div.nav.human dd,
div.nav.human dt,
div.nav.human table th,
div.nav table tr.human th {
  border-color: #FC3;
}

div.nav.norn .heading {
  background-color: #6CF;
}

div.nav.norn dd,
div.nav.norn dt,
div.nav.norn table th,
div.nav table tr.norn th {
  border-color: #6CF;
}

div.nav.sylvari .heading {
  background-color: #3C3;
}

div.nav.sylvari dd,
div.nav.sylvari dt,
div.nav.sylvari table th,
div.nav table tr.sylvari th {
  border-color: #3C3;
}

div.nav.npc .heading {
  background-color: #6C3;
}

div.nav.npc dd,
div.nav.npc dt,
div.nav.npc table th,
div.nav table tr.npc th {
  border-color: #6C3;
}

div.nav.pve .heading {
  background-color: #FC6;
}

div.nav.pve dd,
div.nav.pve dt,
div.nav.pve table th,
div.nav table tr.pve th {
  border-color: #FC6;
}

div.nav.equip .heading {
  background-color: #F96;
}

div.nav.equip dd,
div.nav.equip dt,
div.nav.equip table th,
div.nav table tr.equip th {
  border-color: #F96;
}

div.nav.mech1 .heading {
  background-color: #69C;
}

div.nav.mech1 dd,
div.nav.mech1 dt,
div.nav.mech1 table th,
div.nav table tr.mech1 th {
  border-color: #69C;
}

div.nav.mech2 .heading {
  background-color: #3CC;
}

div.nav.mech2 dd,
div.nav.mech2 dt,
div.nav.mech2 table th,
div.nav table tr.mech2 th {
  border-color: #3CC;
}

div.nav.location .heading {
  background-color: #96C;
}

div.nav.location dd,
div.nav.location dt,
div.nav.location table th,
div.nav table tr.location th {
  border-color: #96C;
}

div.nav.lore .heading {
  background-color: #C6C;
}

div.nav.lore dd,
div.nav.lore dt,
div.nav.lore table th,
div.nav table tr.lore th {
  border-color: #C6C;
}

div.nav.promo .heading {
  background-color: #9C3;
}

div.nav.promo dd,
div.nav.promo dt,
div.nav.promo table th,
div.nav table tr.promo th {
  border-color: #9C3;
}

div.nav.quest .heading {
  background-color: #F8B57D;
}

div.nav.quest dd,
div.nav.quest dt,
div.nav.quest table th,
div.nav table tr.quest th {
  border-color: #F8B57D;
}

div.nav.crafting .heading,
div.nav.recipe .heading {
  background-color: #963;
}

div.nav.crafting dd,
div.nav.crafting dt,
div.nav.crafting table th,
div.nav table tr.crafting th,
div.nav.recipe dd,
div.nav.recipe dt,
div.nav.recipe table th,
div.nav table tr.recipe th {
  border-color: #963;
}

/* Subheadings */
div.nav .subheading {
  background-color: #CCC;
  border-color: #AAA;
}

/* Subheadings - professions */
div.nav .subheading.guardian {
  background-color: #B9E0EC;
  border-color: #94B3BD;
}

div.nav .subheading.revenant {
  background-color: #E3B4AA;
  border-color: #BFA8A0;
}

div.nav .subheading.warrior {
  background-color: #FFE8B3;
  border-color: #CCBA8F;
}

div.nav .subheading.engineer {
  background-color: #E8BC84;
  border-color: #BA966A;
}

div.nav .subheading.ranger {
  background-color: #C7EFA2;
  border-color: #9FBF82;
}

div.nav .subheading.thief {
  background-color: #DEC6C9;
  border-color: #B29EA1;
}

div.nav .subheading.elementalist {
  background-color: #FBC5C3;
  border-color: #C99E9C;
}

div.nav .subheading.mesmer {
  background-color: #DBBCEA;
  border-color: #AF96BB;
}

div.nav .subheading.necromancer {
  background-color: #A9D3B7;
  border-color: #87A992;
}

/* Subheadings - races */
div.nav .subheading.asura {
  background-color: #D1BDF8;
  border-color: #A797C6;
}

div.nav .subheading.charr {
  background-color: #FFBCC3;
  border-color: #CC969C;
}

div.nav .subheading.human {
  background-color: #FFF2B3;
  border-color: #CCC28F;
}

div.nav .subheading.norn {
  background-color: #BADDFF;
  border-color: #95B1CC;
}

div.nav .subheading.sylvari {
  background-color: #B0F3B2;
  border-color: #8DC28E;
}

/* Subheadings - types */
div.nav .subheading.npc {
  background-color: #B3E699;
  border-color: #8FB87A;
}

div.nav .subheading.pve {
  background-color: #FFE6B3;
  border-color: #CCB88F;
}

div.nav .subheading.equip {
  background-color: #FFCCB3;
  border-color: #CCA38F;
}

div.nav .subheading.skin {
  background-color: #FFD4DF;
  border-color: #B3A1A5;
}

div.nav .subheading.mech1 {
  background-color: #B3CCE6;
  border-color: #8FA3B8;
}

div.nav .subheading.mech2 {
  background-color: #99E6E6;
  border-color: #7AB8B8;
}

div.nav .subheading.lore {
  background-color: #E6B3E6;
  border-color: #B88FB8;
}

div.nav .subheading.location {
  background-color: #CCB3E6;
  border-color: #A38FB8;
}

div.nav .subheading.promo {
  background-color: #CCE699;
  border-color: #A3B87A;
}

div.nav .subheading.crafting,
div.nav .subheading.recipe {
  background-color: #E6CCB3;
  border-color: #B8A38F;
}

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

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

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

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

.table tr {
  text-align: left;
  border-color: #AAA;
}

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

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

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

.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > * {
  background-image: url("/images/c/cc/Infobox_header_overlay.png");
  background-color: #EEE;
  border-color: #AAA;
  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 {
  background-color: #EEE;
  border: 1px solid #AAA !important;
}

.table > tbody > tr > th,
.table > tfoot > tr > th {
  background-color: #E7E7E7;
  border-color: #AAA;
}

.table > tbody > tr:nth-child(odd) {
  background-color: #F3F3F3;
  border-color: #AAA;
}

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

.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: 1px !important;
  border-bottom-style: solid;
}

.table .line-top {
  border-top-width: 1px !important;
  border-top-style: solid;
  border-top-color: #AAA;
}

.table .line-left {
  border-left-width: 1px !important;
  border-left-style: solid;
  border-left-color: #AAA;
}

.table .line-right {
  border-right-width: 1px !important;
  border-right-style: solid;
  border-right-color: #AAA;
}

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

/** STDT TABLE CLASSES **/
/* whole table */
/* any */
/* First row, or a row classed as heading, receives color border (applied to conventional cells) */
/* Cells within first row receive background colors */
/* Merged cells also require color border */
.table.any > :first-child > tr:first-child,
.table.any > :first-child > tr:first-child > *,
.table.any > * > tr.heading,
.table.any > * > tr.heading > * {
  background-color: #888 !important;
  border-color: #6D6D6D !important;
}

/* Any header cell gets a coloured background - less vivid than first row */
/* Border color required for merged cells */
.table.any > * > tr > th {
  background-color: #CCC;
  border-color: #AAA;
}

/* Alternating row colors. Off by one row for sortable tables, too many css lines to bother putting them back to odd. */
.table.any > tbody > tr:nth-child(odd) {
  background-color: #EEE;
}

/* guardian */
.table.guardian > :first-child > tr:first-child,
.table.guardian > :first-child > tr:first-child > *,
.table.guardian > * > tr.heading,
.table.guardian > * > tr.heading > * {
  background-color: #72C1D9 !important;
  border-color: #5B9AAE !important;
}
.table.guardian > * > tr > th {
  background-color: #B9E0EC;
  border-color: #94B3BD;
}
.table.guardian > tbody > tr:nth-child(odd) {
  background-color: #EAF6F9;
}

/* revenant */
.table.revenant > :first-child > tr:first-child,
.table.revenant > :first-child > tr:first-child > *,
.table.revenant > * > tr.heading,
.table.revenant > * > tr.heading > * {
  background-color: #B1574C !important;
  border-color: #A65747 !important;
}
.table.revenant > * > tr > th {
  background-color: #E3B4AA;
  border-color: #BFA8A0;
}
.table.revenant > tbody > tr:nth-child(odd) {
  background-color: #F6ECE9;
}

/* warrior */
.table.warrior > :first-child > tr:first-child,
.table.warrior > :first-child > tr:first-child > *,
.table.warrior > * > tr.heading,
.table.warrior > * > tr.heading > * {
  background-color: #FFD166 !important;
  border-color: #CCA752 !important;
}
.table.warrior > * > tr > th {
  background-color: #FFE8B3;
  border-color: #CCBA8F;
}
.table.warrior > tbody > tr:nth-child(odd) {
  background-color: #FFF8E8;
}

/* engineer */
.table.engineer > :first-child > tr:first-child,
.table.engineer > :first-child > tr:first-child > *,
.table.engineer > * > tr.heading,
.table.engineer > * > tr.heading > * {
  background-color: #D09C59 !important;
  border-color: #A67D47 !important;
}
.table.engineer > * > tr > th {
  background-color: #E8BC84;
  border-color: #BA966A;
}
.table.engineer > tbody > tr:nth-child(odd) {
  background-color: #F8EBDA;
}

/* ranger */
.table.ranger > :first-child > tr:first-child,
.table.ranger > :first-child > tr:first-child > *,
.table.ranger > * > tr.heading,
.table.ranger > * > tr.heading > * {
  background-color: #8EDF44 !important;
  border-color: #72B236 !important;
}
.table.ranger > * > tr > th {
  background-color: #C7EFA2;
  border-color: #9FBF82;
}
.table.ranger > tbody > tr:nth-child(odd) {
  background-color: #EEFAE3;
}

/* thief */
.table.thief > :first-child > tr:first-child,
.table.thief > :first-child > tr:first-child > *,
.table.thief > * > tr.heading,
.table.thief > * > tr.heading > * {
  background-color: #C08F95 !important;
  border-color: #9A7277 !important;
}
.table.thief > * > tr > th {
  background-color: #DEC6C9;
  border-color: #B29EA1;
}
.table.thief > tbody > tr:nth-child(odd) {
  background-color: #F5EEEF;
}

/* elementalist */
.table.elementalist > :first-child > tr:first-child,
.table.elementalist > :first-child > tr:first-child > *,
.table.elementalist > * > tr.heading,
.table.elementalist > * > tr.heading > * {
  background-color: #F68A87 !important;
  border-color: #C56E6C !important;
}
.table.elementalist > * > tr > th {
  background-color: #FBC5C3;
  border-color: #C99E9C;
}
.table.elementalist > tbody > tr:nth-child(odd) {
  background-color: #FEEEED;
}

/* mesmer */
.table.mesmer > :first-child > tr:first-child,
.table.mesmer > :first-child > tr:first-child > *,
.table.mesmer > * > tr.heading,
.table.mesmer > * > tr.heading > * {
  background-color: #B679D5 !important;
  border-color: #9261AA !important;
}
.table.mesmer > * > tr > th {
  background-color: #DBBCEA;
  border-color: #AF96BB;
}
.table.mesmer > tbody > tr:nth-child(odd) {
  background-color: #F4EBF9;
}

/* necromancer */
.table.necromancer > :first-child > tr:first-child,
.table.necromancer > :first-child > tr:first-child > *,
.table.necromancer > * > tr.heading,
.table.necromancer > * > tr.heading > * {
  background-color: #52A76F !important;
  border-color: #428659 !important;
}
.table.necromancer > * > tr > th {
  background-color: #A9D3B7;
  border-color: #87A992;
}
.table.necromancer > tbody > tr:nth-child(odd) {
  background-color: #E5F2EA;
}

/* asura */
.table.asura > :first-child > tr:first-child,
.table.asura > :first-child > tr:first-child > *,
.table.asura > * > tr.heading,
.table.asura > * > tr.heading > * {
  background-color: #A27BF1 !important;
  border-color: #8262C1 !important;
}
.table.asura > * > tr > th {
  background-color: #D1BDF8;
  border-color: #A797C6;
}
.table.asura > tbody > tr:nth-child(odd) {
  background-color: #F1EBFD;
}

/* charr */
.table.charr > :first-child > tr:first-child,
.table.charr > :first-child > tr:first-child > *,
.table.charr > * > tr.heading,
.table.charr > * > tr.heading > * {
  background-color: #FE7887 !important;
  border-color: #CB606C !important;
}
.table.charr > * > tr > th {
  background-color: #FFBCC3;
  border-color: #CC969C;
}
.table.charr > tbody > tr:nth-child(odd) {
  background-color: #FFEBED;
}

/* human */
.table.human > :first-child > tr:first-child,
.table.human > :first-child > tr:first-child > *,
.table.human > * > tr.heading,
.table.human > * > tr.heading > * {
  background-color: #FFE566 !important;
  border-color: #CCB752 !important;
}
.table.human > * > tr > th {
  background-color: #FFF2B3;
  border-color: #CCC28F;
}
.table.human > tbody > tr:nth-child(odd) {
  background-color: #FFFBE8;
}

/* norn */
.table.norn > :first-child > tr:first-child,
.table.norn > :first-child > tr:first-child > *,
.table.norn > * > tr.heading,
.table.norn > * > tr.heading > * {
  background-color: #75BAFF !important;
  border-color: #5E95CC !important;
}
.table.norn > * > tr > th {
  background-color: #BADDFF;
  border-color: #95B1CC;
}
.table.norn > tbody > tr:nth-child(odd) {
  background-color: #EAF5FF;
}

/* sylvari */
.table.sylvari > :first-child > tr:first-child,
.table.sylvari > :first-child > tr:first-child > *,
.table.sylvari > * > tr.heading,
.table.sylvari > * > tr.heading > * {
  background-color: #61E665 !important;
  border-color: #4EB851 !important;
}
.table.sylvari > * > tr > th {
  background-color: #B0F3B2;
  border-color: #8DC28E;
}
.table.sylvari > tbody > tr:nth-child(odd) {
  background-color: #E7FBE8;
}

/* npc */
.table.npc > :first-child > tr:first-child,
.table.npc > :first-child > tr:first-child > *,
.table.npc > * > tr.heading,
.table.npc > * > tr.heading > * {
  background-color: #6C3 !important;
  border-color: #52A329 !important;
}
.table.npc > * > tr > th {
  background-color: #B3E699;
  border-color: #8FB87A;
}
.table.npc > tbody > tr:nth-child(odd) {
  background-color: #E8F8E1;
}

/* pve */
.table.pve > :first-child > tr:first-child,
.table.pve > :first-child > tr:first-child > *,
.table.pve > * > tr.heading,
.table.pve > * > tr.heading > * {
  background-color: #FC6 !important;
  border-color: #CCA352 !important;
}
.table.pve > * > tr > th {
  background-color: #FFE6B3;
  border-color: #CCB88F;
}
.table.pve > tbody > tr:nth-child(odd) {
  background-color: #FFF8E8;
}

/* equip */
.table.equip > :first-child > tr:first-child,
.table.equip > :first-child > tr:first-child > *,
.table.equip > * > tr.heading,
.table.equip > * > tr.heading > * {
  background-color: #F96 !important;
  border-color: #CC7A52 !important;
}
.table.equip > * > tr > th {
  background-color: #FFCCB3;
  border-color: #CCA38F;
}
.table.equip > tbody > tr:nth-child(odd) {
  background-color: #FFF0E8;
}

/* item (same as equip), split for clarity */
.table.item > :first-child > tr:first-child,
.table.item > :first-child > tr:first-child > *,
.table.item > * > tr.heading,
.table.item > * > tr.heading > * {
  background-color: #F96 !important;
  border-color: #CC7A52 !important;
}
.table.item > * > tr > th {
  background-color: #FFCCB3;
  border-color: #CCA38F;
}
.table.item > tbody > tr:nth-child(odd) {
  background-color: #FFF0E8;
}

/* skin */
.table.skin > :first-child > tr:first-child,
.table.skin > :first-child > tr:first-child > *,
.table.skin > * > tr.heading,
.table.skin > * > tr.heading > * {
  background-color: #E07A98 !important;
  border-color: #996574 !important;
}
.table.skin > * > tr > th {
  background-color: #FFD4DF;
  border-color: #B3A1A5;
}
.table.skin > tbody > tr:nth-child(odd) {
  background-color: #FFEDF4;
}

/* mech1 */
.table.mech1 > :first-child > tr:first-child,
.table.mech1 > :first-child > tr:first-child > *,
.table.mech1 > * > tr.heading,
.table.mech1 > * > tr.heading > * {
  background-color: #69C !important;
  border-color: #527AA3 !important;
}
.table.mech1 > * > tr > th {
  background-color: #B3CCE6;
  border-color: #8FA3B8;
}
.table.mech1 > tbody > tr:nth-child(odd) {
  background-color: #E8F0F8;
}

/* mech2 */
.table.mech2 > :first-child > tr:first-child,
.table.mech2 > :first-child > tr:first-child > *,
.table.mech2 > * > tr.heading,
.table.mech2 > * > tr.heading > * {
  background-color: #3CC !important;
  border-color: #29A3A3 !important;
}
.table.mech2 > * > tr > th {
  background-color: #99E6E6;
  border-color: #7AB8B8;
}
.table.mech2 > tbody > tr:nth-child(odd) {
  background-color: #E1F8F8;
}

/* lore */
.table.lore > :first-child > tr:first-child,
.table.lore > :first-child > tr:first-child > *,
.table.lore > * > tr.heading,
.table.lore > * > tr.heading > * {
  background-color: #C6C !important;
  border-color: #A352A3 !important;
}
.table.lore > * > tr > th {
  background-color: #E6B3E6;
  border-color: #B88FB8;
}
.table.lore > tbody > tr:nth-child(odd) {
  background-color: #F8E8F8;
}

/* location */
.table.location > :first-child > tr:first-child,
.table.location > :first-child > tr:first-child > *,
.table.location > * > tr.heading,
.table.location > * > tr.heading > * {
  background-color: #96C !important;
  border-color: #7A52A3 !important;
}
.table.location > * > tr > th {
  background-color: #CCB3E6;
  border-color: #A38FB8;
}
.table.location > tbody > tr:nth-child(odd) {
  background-color: #F0E8F8;
}

/* promo */
.table.promo > :first-child > tr:first-child,
.table.promo > :first-child > tr:first-child > *,
.table.promo > * > tr.heading,
.table.promo > * > tr.heading > * {
  background-color: #9C3 !important;
  border-color: #7AA329 !important;
}
.table.promo > * > tr > th {
  background-color: #CCE699;
  border-color: #A3B87A;
}
.table.promo > tbody > tr:nth-child(odd) {
  background-color: #F0F8E1;
}

/* hom */
.table.hom > :first-child > tr:first-child,
.table.hom > :first-child > tr:first-child > *,
.table.hom > * > tr.heading,
.table.hom > * > tr.heading > * {
  background-color: #C96 !important;
  border-color: #A37A52 !important;
}
.table.hom > * > tr > th {
  background-color: #E6CCB3;
  border-color: #B8A38F;
}
.table.hom > tbody > tr:nth-child(odd) {
  background-color: #F8F0E8;
}

/* boon */
.table.boon > :first-child > tr:first-child,
.table.boon > :first-child > tr:first-child > *,
.table.boon > * > tr.heading,
.table.boon > * > tr.heading > * {
  background-color: #73D9D9 !important;
  border-color: #5CAEAE !important;
}
.table.boon > * > tr > th {
  background-color: #B9ECEC;
  border-color: #94BDBD;
}
.table.boon > tbody > tr:nth-child(odd) {
  background-color: #EAF9F9;
}

/* condition */
.table.condition > :first-child > tr:first-child,
.table.condition > :first-child > tr:first-child > *,
.table.condition > * > tr.heading,
.table.condition > * > tr.heading > * {
  background-color: #51A651 !important;
  border-color: #418541 !important;
}
.table.condition > * > tr > th {
  background-color: #A8D3A8;
  border-color: #86A986;
}
.table.condition > tbody > tr:nth-child(odd) {
  background-color: #E5F2E5;
}

/* crafting (same as recipe), split for clarity */
.table.crafting > :first-child > tr:first-child,
.table.crafting > :first-child > tr:first-child > *,
.table.crafting > * > tr.heading,
.table.crafting > * > tr.heading > * {
  background-color: #A68151 !important;
  border-color: #856741 !important;
}
.table.crafting > * > tr > th {
  background-color: #D3C0A8;
  border-color: #A99A86;
}
.table.crafting > tbody > tr:nth-child(odd) {
  background-color: #F2ECE5;
}

/* recipe */
.table.recipe > :first-child > tr:first-child,
.table.recipe > :first-child > tr:first-child > *,
.table.recipe > * > tr.heading,
.table.recipe > * > tr.heading > * {
  background-color: #A68151 !important;
  border-color: #856741 !important;
}
.table.recipe > * > tr > th {
  background-color: #D3C0A8;
  border-color: #A99A86;
}
.table.recipe > tbody > tr:nth-child(odd) {
  background-color: #F2ECE5;
}

/* Rows with heading classes - declared separately to ensure table rules are overridden by row rules */
/* any */
.table > * > tr.any > th {
  background-color: #CCC;
  border-color: #AAA;
}
.table > tbody > tr.any:nth-child(odd) {
  background-color: #EEE;
}

/* guardian */
.table > * > tr.guardian > th {
  background-color: #B9E0EC;
  border-color: #94B3BD;
}
.table > tbody > tr.guardian:nth-child(odd) {
  background-color: #EAF6F9;
}

/* revenant */
.table > * > tr.revenant > th {
  background-color: #E3B4AA;
  border-color: #BFA8A0;
}
.table > tbody > tr.revenant:nth-child(odd) {
  background-color: #F6ECE9;
}

/* warrior */
.table > * > tr.warrior > th {
  background-color: #FFE8B3;
  border-color: #CCBA8F;
}
.table > tbody > tr.warrior:nth-child(odd) {
  background-color: #FFF8E8;
}

/* engineer */
.table > * > tr.engineer > th {
  background-color: #E8BC84;
  border-color: #BA966A;
}
.table > tbody > tr.engineer:nth-child(odd) {
  background-color: #F8EBDA;
}

/* ranger */
.table > * > tr.ranger > th {
  background-color: #C7EFA2;
  border-color: #9FBF82;
}
.table > tbody > tr.ranger:nth-child(odd) {
  background-color: #EEFAE3;
}

/* thief */
.table > * > tr.thief > th {
  background-color: #DEC6C9;
  border-color: #B29EA1;
}
.table > tbody > tr.thief:nth-child(odd) {
  background-color: #F5EEEF;
}

/* elementalist */
.table > * > tr.elementalist > th {
  background-color: #FBC5C3;
  border-color: #C99E9C;
}
.table > tbody > tr.elementalist:nth-child(odd) {
  background-color: #FEEEED;
}

/* mesmer */
.table > * > tr.mesmer > th {
  background-color: #DBBCEA;
  border-color: #AF96BB;
}
.table > tbody > tr.mesmer:nth-child(odd) {
  background-color: #F4EBF9;
}

/* necromancer */
.table > * > tr.necromancer > th {
  background-color: #A9D3B7;
  border-color: #87A992;
}
.table > tbody > tr.necromancer:nth-child(odd) {
  background-color: #E5F2EA;
}

/* asura */
.table > * > tr.asura > th {
  background-color: #D1BDF8;
  border-color: #A797C6;
}
.table > tbody > tr.asura:nth-child(odd) {
  background-color: #F1EBFD;
}

/* charr */
.table > * > tr.charr > th {
  background-color: #FFBCC3;
  border-color: #CC969C;
}
.table > tbody > tr.charr:nth-child(odd) {
  background-color: #FFEBED;
}

/* human */
.table > * > tr.human > th {
  background-color: #FFF2B3;
  border-color: #CCC28F;
}
.table > tbody > tr.human:nth-child(odd) {
  background-color: #FFFBE8;
}

/* norn */
.table > * > tr.norn > th {
  background-color: #BADDFF;
  border-color: #95B1CC;
}
.table > tbody > tr.norn:nth-child(odd) {
  background-color: #EAF5FF;
}

/* sylvari */
.table > * > tr.sylvari > th {
  background-color: #B0F3B2;
  border-color: #8DC28E;
}
.table > tbody > tr.sylvari:nth-child(odd) {
  background-color: #E7FBE8;
}

/* npc */
.table > * > tr.npc > th {
  background-color: #B3E699;
  border-color: #8FB87A;
}
.table > tbody > tr.npc:nth-child(odd) {
  background-color: #E8F8E1;
}

/* pve */
.table > * > tr.pve > th {
  background-color: #FFE6B3;
  border-color: #CCB88F;
}
.table > tbody > tr.pve:nth-child(odd) {
  background-color: #FFF8E8;
}

/* equip */
.table > * > tr.equip > th {
  background-color: #FFCCB3;
  border-color: #CCA38F;
}
.table > tbody > tr.equip:nth-child(odd) {
  background-color: #FFF0E8;
}

/* item */
.table > * > tr.item > th {
  background-color: #FFCCB3;
  border-color: #CCA38F;
}
.table > tbody > tr.item:nth-child(odd) {
  background-color: #FFF0E8;
}

/* skin */
.table > * > tr.skin > th {
  background-color: #FFD4DF;
  border-color: #B3A1A5;
}
.table > tbody > tr.skin:nth-child(odd) {
  background-color: #FFEDF4;
}

/* mech1 */
.table > * > tr.mech1 > th {
  background-color: #B3CCE6;
  border-color: #8FA3B8;
}
.table > tbody > tr.mech1:nth-child(odd) {
  background-color: #E8F0F8;
}

/* mech2 */
.table > * > tr.mech2 > th {
  background-color: #99E6E6;
  border-color: #7AB8B8;
}
.table > tbody > tr.mech2:nth-child(odd) {
  background-color: #E1F8F8;
}

/* lore */
.table > * > tr.lore > th {
  background-color: #E6B3E6;
  border-color: #B88FB8;
}
.table > tbody > tr.lore:nth-child(odd) {
  background-color: #F8E8F8;
}

/* location */
.table > * > tr.location > th {
  background-color: #CCB3E6;
  border-color: #A38FB8;
}
.table > tbody > tr.location:nth-child(odd) {
  background-color: #F0E8F8;
}

/* promo */
.table > * > tr.promo > th {
  background-color: #CCE699;
  border-color: #A3B87A;
}
.table > tbody > tr.promo:nth-child(odd) {
  background-color: #F0F8E1;
}

/* hom */
.table > * > tr.hom > th {
  background-color: #E6CCB3;
  border-color: #B8A38F;
}
.table > tbody > tr.hom:nth-child(odd) {
  background-color: #F8F0E8;
}

/* boon */
.table > * > tr.boon > th {
  background-color: #B9ECEC;
  border-color: #94BDBD;
}
.table > tbody > tr.boon:nth-child(odd) {
  background-color: #EAF9F9;
}

/* condition */
.table > * > tr.condition > th {
  background-color: #A8D3A8;
  border-color: #86A986;
}
.table > tbody > tr.condition:nth-child(odd) {
  background-color: #E5F2E5;
}

/* crafting */
.table > * > tr.crafting > th {
  background-color: #D3C0A8;
  border-color: #A99A86;
}
.table > tbody > tr.crafting:nth-child(odd) {
  background-color: #F2ECE5;
}

/* recipe */
.table > * > tr.recipe > th {
  background-color: #D3C0A8;
  border-color: #A99A86;
}
.table > tbody > tr.recipe:nth-child(odd) {
  background-color: #F2ECE5;
}

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

/* 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 */
/* These are inserted as CSS background-image, which clashes with our fancy gradient overlays */
table.jquery-tablesorter th.headerSort {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTAyODcwMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTAyODZGMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAJAAACF4yPgMsJ2mJ4VDKKrd4GVz5lYPeMiVUAADs=);
  background-image: url(/resources/jquery/images/sort_both.png) !ie;
  padding: 0.5em;
  padding-right: 21px;
}

table.jquery-tablesorter th.headerSortDown {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhFNzNGQjI3MEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhFNzNGQjI2MEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAEAAACDYyPAcmtsJyDVDKKWQEAOw==);
  background-image: url(/resources/jquery/images/sort_down.png) !ie;
}

table.jquery-tablesorter th.headerSortUp {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAzODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTAyODc0MEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTAyODczMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDM4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAEAAACDYwfoAvoz9qbZ9FrJC0AOw==);
  background-image: url(/resources/jquery/images/sort_up.png) !ie;
}

/* And finally jquery overlays for tables that also use .table classes (two background images) */
table.table.jquery-tablesorter th.headerSort {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTAyODcwMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTAyODZGMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAJAAACF4yPgMsJ2mJ4VDKKrd4GVz5lYPeMiVUAADs=),
      url("/images/c/cc/Infobox_header_overlay.png");
  background-image: url(/resources/jquery/images/sort_both.png) !ie;
  background-repeat: no-repeat, repeat;
  background-position: 100% 50%, 0% 0%;
}

table.table.jquery-tablesorter th.headerSortDown {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhFNzNGQjI3MEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhFNzNGQjI2MEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAEAAACDYyPAcmtsJyDVDKKWQEAOw==),
      url("/images/c/cc/Infobox_header_overlay.png");
  background-image: url(/resources/jquery/images/sort_down.png) !ie;
  background-repeat: no-repeat, repeat;
  background-position: 100% 50%, 0% 0%;
}

table.table.jquery-tablesorter th.headerSortUp {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAzODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTAyODc0MEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTAyODczMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDM4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAEAAACDYwfoAvoz9qbZ9FrJC0AOw==),
      url("/images/c/cc/Infobox_header_overlay.png");
  background-image: url(/resources/jquery/images/sort_up.png) !ie;
  background-repeat: no-repeat, repeat;
  background-position: 100% 50%, 0% 0%;
}

/** -------- TEMPLATES: OTHER -------- **/
/* [[Template:Rarity]] */
.rarity-junk {
  color: #AAAAAA;
}

.rarity-basic {
  color: #000000;
}

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

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

.rarity-rare {
  color: #fcd00b;
}

.rarity-exotic {
  color: #ffa405;
}

.rarity-ascended {
  color: #fb3e8d;
}

.rarity-legendary {
  color: #4C139D;
}

/* Patch notes for skill history project */
.skill-history {
  border-color: #AAA;
  background-color: #F6F3E4;
}

/* [[Template:Archive-box]] and [[Template:Mail]] */
.archive-box {
  border-color: #EA3;
  background-color: #FFC;
}

.mail {
  border: 1px solid silver;
  background: #FFF8E8;
}

/* White rows for achievement tables where alternating light-dark rows don't work so well */
.white {
  background-color: #FFF;
}

.offwhite {
  background-color: #E8F0F8;
}

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

.color-filled-guardian       { text-shadow: 0 0 0 #72C1D9; }
.color-filled-revenant       { text-shadow: 0 0 0 #D16E5A; }
.color-filled-warrior        { text-shadow: 0 0 0 #FFD166; }
.color-filled-engineer       { text-shadow: 0 0 0 #D09C59; }
.color-filled-ranger         { text-shadow: 0 0 0 #8CDC82; }
.color-filled-thief          { text-shadow: 0 0 0 #C08F95; }
.color-filled-elementalist   { text-shadow: 0 0 0 #F68A87; }
.color-filled-mesmer         { text-shadow: 0 0 0 #B679D5; }
.color-filled-necromancer    { text-shadow: 0 0 0 #52A76F; }

.color-unfilled-guardian     { text-shadow: 0 0 0 #CFEEFD; }
.color-unfilled-revenant     { text-shadow: 0 0 0 #EBC9C2; }
.color-unfilled-warrior      { text-shadow: 0 0 0 #FFF5BB; }
.color-unfilled-engineer     { text-shadow: 0 0 0 #E8C89F; }
.color-unfilled-ranger       { text-shadow: 0 0 0 #E2F6D1; }
.color-unfilled-thief        { text-shadow: 0 0 0 #E6D5D7; }
.color-unfilled-elementalist { text-shadow: 0 0 0 #F6D2D1; }
.color-unfilled-mesmer       { text-shadow: 0 0 0 #D7B2EA; }
.color-unfilled-necromancer  { text-shadow: 0 0 0 #D5EDE1; }

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

.highlight-blue {
  background-color: lightblue !important;
}

/* "Guild Wars 2 Wiki" and "Help" namespace layouts */
.wiki-help,
.wiki-help .darkfill {
  border-color: #598CA0; /* darker blue */
}

.wiki-help .darkfill {
  background-color: #A1C2CF; /* heading blue */
}

.wiki-help .lightfill {
  background-color: #EFFBF5; /* content blue */
}

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

.wiki-gw2w .darkfill {
  background-color: #C3E0A6; /* heading green */
}

.wiki-gw2w .lightfill {
  background-color: #F4FDEA; /* content green */
}

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

.wiki-projects .darkfill {
  background-color: #F2E6CE; /* heading orange */
}

.wiki-projects .lightfill {
  background-color: #FFFCF5; /* content orange */
}

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

.wiki-nav {
  border-color: #66D; /* darker purple */
  background-color: #DDF; /* heading purple */
}