Difference between revisions of "MediaWiki:Mobile.css"

Revision as of 19:55, 15 September 2021

/* CSS placed here will affect users of the mobile site */

/* new mobile CSS (after updating the wiki version */
mw-overlays-container{
  overflow:auto;
  
}

.overlay-header-container.position-fixed {
  top: 70px;
  
}

/* move search bar icon left */
nav.minerva-user-navigation {
  display: flex;
  justify-content: left;
}

/* eliminate horizontal scrollbar (not in use because we need the horizontal scrollbar in many instances */
/*
div#mw-mf-viewport{
   overflow-x: hidden;
}
*/

/* end of new mobile CSS (after updating the wiki version */

/* new main page */

.desktop-frontpage {
  display: none !important;
}

.mobile-frontpage {
  display: block !important;
}

.desktop-element {
  display: none !important;
}
.mobile-element {
  display: block !important;
}

@font-face {
  font-family: "EasonPro";
  src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.eot);
  src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.woff)
      format("woff"),
    url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.ttf)
      format("truetype"),
    url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-regular-webfont.svg#EasonProregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "EasonPro";
  src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.eot);
  src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.woff)
      format("woff"),
    url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.ttf)
      format("truetype"),
    url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-italic-webfont.svg#EasonProitalic")
      format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "EasonPro";
  src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.eot);
  src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.woff)
      format("woff"),
    url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.ttf)
      format("truetype"),
    url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/eason/v1/easonpro-bold-webfont.svg#EasonProBold")
      format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "CronosPro";
  src: url(https://d1h9a8s8eodvjz.cloudfront.net/fonts/cronos/v1/cronospro-regular-webfont.eot);
  src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/cronos/v1/cronospro-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url(https://d1h9a8s8eodvjz.cloudfront.net//fonts/cronos/v1/cronospro-regular-webfont.woff)
      format("woff"),
    url(https://d1h9a8s8eodvjz.cloudfront.net//fonts/cronos/v1/cronospro-regular-webfont.ttf)
      format("truetype"),
    url("https://d1h9a8s8eodvjz.cloudfront.net//fonts/cronos/v1/cronospro-regular-webfont.svg#CronosProregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

/************************************************************************************
RESPONSIVE STRUCTURE
*************************************************************************************/

#mobile-pagewrap {
  width: 960px;
  font-size: 95%;
  margin: 15px auto;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.75em;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #bbb),
    color-stop(0.02, #fff),
    color-stop(1, #eee)
  );
}

.mobile-column {
  min-height: 330px;
  width: 320px;
  float: left;
}

.mobile-first-column {
  width: 641px;
}

.mobile-box-content {
  padding: 5px 15px;
}

#mobile-bottom {
  clear: both;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
  #mobile-pagewrap {
    width: 94%;
  }

  .mobile-column {
    width: 50%;
  }

  .mobile-first-column {
    width: 70%;
  }

  .mobile-second-column {
    width: 30%;
  }

  .mobile-box-content {
    padding: 1% 4%;
  }

  .two-column-break {
    clear: both;
  }
}

/*for 820px or less*/
@media screen and (max-width: 820px) {
  .mobile-first-column .floatleft {
    float: none;
    text-align: center;
    width: 100%;
  }
}

/* for 600px or less */
@media screen and (max-width: 600px) {
  .mobile-column {
    width: auto;
    float: none;
  }

  .mobile-column {
    min-height: inherit;
  }
}

/************************************************************************************
FURTHER CUSTOMIZATION
*************************************************************************************/
.mobile-box-header {
  font-family: EasonPro, "Times New Roman", serif;
  font-size: 1.5em;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
  background-color: #444;
  background-image: url(/mediawiki/images/a/aa/Bg_gradient4.jpg) !important;
  font-weight: 400;
  text-align: center;
}

#mobile-pagewrap {
  border: 1px solid #ccc;
}

.mobile-column {
  border-right: 1px solid #ccc;
  margin-left: -1px;
}

.mobile-second-column {
  border-right: none;
}

/* fixes quotation template on mobile */
.quotation-box {
  margin-left: 0 !important;
}

/* From Valento */
/* General */

p img {
  margin: 0;
}

img {
  border: none;
  vertical-align: middle;
}

p,
ul,
ol,
dl {
  margin-top: 0.7692307692em;
  margin-bottom: 0.7692307692em;
  line-height: 1.5384615385em;
}

.infobox-n .clear,
.nav .clear,
.recipe-box .clear {
  height: 5px;
}

/* Infobox specific */

div.infobox-n {
  float: center;
  position: relative;
  width: 300px;
  background: #fff;
  font-size: 0.923em;
  border: 1px solid #aaa;
  margin: 0 0 1em 1em;
  padding: 0;
}

div.infobox-n,
div.nav .box {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffeeeeee);
  background-image: linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #fff),
    color-stop(1, #eee)
  );
}

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

div.infobox-n .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-n .wrapper {
  clear: both;
  padding: 0;
}

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

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

div.infobox-n .heading,
div.nav .heading {
  font-weight: 700;
  background-image: url(/mediawiki/images/b/b3/Box_overlay.png) !important;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
  position: relative;
  z-index: 1;
  font-size-adjust: 0.52;
  margin: -1px -1px 5px !important;
}

div.infobox-n .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.4em !important;
}

div.infobox-n .subheading,
div.nav .subheading {
  font-weight: 700;
  background-color: #888;
  background-image: url("/images/c/cc/Infobox_header_overlay.png") !important;
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  line-height: 100%;
  text-align: center;
  position: relative;
  margin: 0 -1px !important;
}

div.infobox-n .subheading {
  font-family: EasonPro, "Times New Roman", serif;
  font-size: 1.25em !important;
  color: #fff !important;
  background-color: #444;
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
  z-index: 1;
  line-height: 1.333em;
  font-size-adjust: 0.43;
  padding: 0.567em !important;
}

div.nav dl,
div.infobox-n dl {
  margin: 10px 0;
}

div.infobox-n dt {
  float: left;
  text-align: right;
  width: 95px;
  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-n dd {
  float: left;
  width: 175px;
  font-weight: 400;
  border-left: 2px solid #999;
  margin: 0;
  padding: 2px 7px;
}

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

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

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

div.infobox-n .heading::after,
div.nav .heading::after,
div.infobox-n .subheading::after,
div.nav .subheading::after,
.table::after {
  bottom: -3px;
}

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

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

div.infobox-n.healer-role dd,
div.infobox-n.healer-role dt {
  border-color: #3c6829 !important;
}

div.infobox-n.healer-role .heading,
div.infobox-n.healer-role .subheading {
  background-color: #3c6829 !important;
}

div.infobox-n.tanker-role dd,
div.infobox-n.tanker-role dt {
  border-color: #364496 !important;
}

div.infobox-n.tanker-role .heading,
div.infobox-n.tanker-role .subheading {
  background-color: #364496 !important;
}

div.infobox-n.dps-role dd,
div.infobox-n.dps-role dt {
  border-color: #683535 !important;
}

div.infobox-n.dps-role .heading,
div.infobox-n.dps-role .subheading {
  background-color: #913737 !important;
}

div.infobox-n.buff dd,
div.infobox-n.buff dt {
  border-color: #399 !important;
}

div.infobox-n.buff .heading,
div.infobox-n.buff .subheading {
  background-color: #399 !important;
}

div.infobox-n.debuff dd,
div.infobox-n.debuff dt {
  border-color: #363 !important;
}

div.infobox-n.debuff .heading,
div.infobox-n.debuff .subheading {
  background-color: #363 !important;
}

div.infobox-n.armor dd,
div.infobox-n.weapon dd,
div.infobox-n.item dd,
div.infobox-n.armor dt,
div.infobox-n.weapon dt,
div.infobox-n.item dt {
  border-color: #c30;
}

div.infobox-n.armor .heading,
div.infobox-n.weapon .heading,
div.infobox-n.item .heading,
div.infobox-n.armor .subheading,
div.infobox-n.weapon .subheading,
div.infobox-n.item .subheading {
  background: #c30;
}

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

div.infobox-n.skin .heading,
div.infobox-n.skin .subheading {
  background: #c4003e;
}

div.infobox-n.recipe {
  width: 250px;
  display: inline-block;
  float: none;
  clear: none;
  vertical-align: top;
  font-size: 1em;
  margin: 0 1em 1em 0;
}

div.infobox-n.recipe .heading,
div.infobox-n.recipe .subheading {
  font-size: 1.133em;
  background: #533610;
}

div.infobox-n.recipe .wrapper {
  padding: 0 10px;
}

div.infobox-n.crafting .heading,
div.infobox-n.crafting .subheading {
  background: #533610;
}

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

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

div.infobox-n.npc .heading,
div.infobox-n.npc .subheading {
  background: #390;
}

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

div.infobox-n.skill .heading,
div.infobox-n.skill .subheading {
  background: #444;
}

div.infobox-n.trait dd,
div.infobox-n.trait dt {
  border-color: #bb7639;
}

div.infobox-n.trait .heading,
div.infobox-n.trait .subheading {
  background: #ce8d54;
}

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

div.infobox-n.effect .condition {
  background: #363;
}

div.infobox-n.effect .boon {
  background: #399;
}

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

div.infobox-n.pet .heading,
div.infobox-n.pet .subheading {
  background: #360;
}

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

div.infobox-n.quest .heading,
div.infobox-n.quest .subheading {
  background: #f90;
}

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

div.infobox-n.area .heading,
div.infobox-n.area .subheading {
  background: #306;
}

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

div.infobox .heading,
div.infobox .subheading,
div.nav .heading,
div.nav .subheading {
  color: #000 !important;
  text-shadow: none !important;
  border-width: 0 !important;
}

/** NAV BARS **/
div.nav {
  position: relative;
  width: 500px;
  margin: auto;
}

div.nav .box {
  position: relative;
  font-size: 0.9230769231em;
  border-spacing: 0;
  overflow: visible;
  min-height: 60px;
  border: 1px solid #aaa;
  margin: 5px;
  padding: 0;
}

div.nav .heading {
  font-family: Arial, sans-serif !important;
  background-color: #888;
  font-size: 1.083em;
  line-height: 100%;
  margin: -1px -1px 0;
  padding: 0.769em 0;
}

div.nav .subheading {
  font-family: Arial, sans-serif;
  font-size: 1em;
  font-size-adjust: 0.52;
  padding: 0.833em 0;
}

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

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

div.nav .center {
  text-align: center;
  margin: 10px 0;
}

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

div.nav dt {
  float: left;
  text-align: right;
  width: 125px;
  clear: left;
  border-right: 2px solid #999;
  margin: 0 -2px 0 0;
  padding: 2px 8px;
}

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

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

div.nav table td a,
div.nav table td strong.selflink {
  white-space: nowrap;
}

div.nav.thin .box {
  width: 400px;
  margin-left: 50px;
}

div.nav.thin dt {
  width: 75px;
}

div.nav.thin dd {
  width: 290px;
}

div.nav.wide .box {
  width: 600px;
  margin-left: -50px;
}

div.nav.wide dt {
  width: 150px;
}

div.nav.wide dd {
  width: 400px;
}

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

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

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

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

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

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

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

div.nav.mech1 .heading {
  background-color: #9a66cc;
}

div.nav.mech1 dd,
div.nav.mech1 dt,
div.nav.mech1 table th {
  border-color: #9a66cc;
}

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

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

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

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

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

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

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

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

div.nav.debuff .heading {
  background-color: #51a651;
}

div.nav.debuff dd,
div.nav.debuff dt,
div.nav.debuff table th {
  border-color: #51a651;
}

div.nav.hom .heading {
  background-color: #c96;
}

div.nav.hom dd,
div.nav.hom dt,
div.nav.hom table th {
  border-color: #c96;
}

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

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

div.nav.guardian .heading,
div.nav.guardian .subheading {
  background-color: #39c;
}

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

/* FFXIV Wiki - Custom */

div.nav.class-nav table th.class-cell,
div.nav.class-nav table td.class-cell {
  text-align: left;
  font-weight: normal;
}

div.nav.class-nav table th {
  text-align: center;
}

div.nav.class-nav table th:last-child {
  border: none;
}

div.nav.class-nav {
  width: 840px;
}

/* Table */

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

/* make table captions bold */
.table > caption {
  font-weight: bold;
}

/* this is a hack to add borders to IE8- */
.table > thead,
.table > tbody {
  border: 0 solid #aaa\0/;
}

.table tr {
  border: 1px solid #aaa\0/;
  text-align: left;
  border-color: #aaa;
}

/* and this removes them for IE9+ */
:root .table tr {
  border-top-width: 0;
  border-bottom-width: 0;
}

.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 > *,
.table > caption {
  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 > 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;
}

/* any */
.table.any > :first-child > tr:first-child,
.table.any > tbody > tr.heading,
.table.any > :first-child > tr:first-child > *,
.table.any > tbody > tr.heading > * {
  background-color: #888 !important;
  border-color: #6d6d6d !important;
}
.table.any > tbody > tr > th,
.table.any > tfoot > tr > th,
.table.any > thead > tr > th,
table.table > tbody > tr.any > th {
  background-color: #ccc;
  border-color: #aaa;
}
.table.any > tbody > tr:nth-child(odd),
.table > tbody > tr.any:nth-child(odd) {
  background-color: #eee;
}

/*Important: Show only mobile ad code on mobile*/
.nomobile {
  display: none !important;
}

/* Recipe boxes that don't look like infoboxes */
div.recipe-box {
  /* from div.infobox-n.recipe */
  min-width: 300px;
  display: inline-block;
  float: none;
  clear: none;
  vertical-align: top;
  font-size: 1em;
  margin: 0 1em 0 0;
  /* from div.infobox-n*/
  position: relative;
  background: #fff;
  border: 1px solid #aaa;
  padding: 0;
  /* from div.infobox, div.nav .box */
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFFFF,EndColorStr=#FFEEEEEE);
  background-image: linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #fff),
    color-stop(1, #eee)
  );
}

div.recipe-box::after {
  /* from div.infobox:after */
  bottom: -4px;
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  height: 3px;
  background-image: url("/mediawiki/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("/mediawiki/images/b/b3/Box_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: 130px; /* CUSTOM (OLD: 112px) */
  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.4em; /* CUSTOM (OLD: 1.667em) */
}

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

/* For generic ingredient lists anywhere on the wiki */
div.ingredients dt {
  float: left;
  clear: left;
  text-align: right;
  font-weight: normal;
  width: 25px;
  margin: 0 -2px 0 0;
  padding: 2px 2px 2px 3px;
  line-height: 1.4em; /* CUSTOM (OLD: 1.667em) */
  border: none;
}

div.ingredients.wide dt {
  width: 50px;
}

div.ingredients dd {
  float: left;
  margin: 0;
  padding: 1px 4px; /* CUSTOM (OLD: 2px 7px) */
  border: none;
}

div.ingredients dl {
  margin: 2px 0;
}

.ingredients .standard-frame-icon a.external.text {
  background: none !important;
}

.ingredients .standard-frame-icon.small {
  display: inline-block !important;
}

/** STDT table classes **/
/* dps-role*/
.table.dps-role > :first-child > tr:first-child,
.table.dps-role > tbody > tr.heading,
.table.dps-role > :first-child > tr:first-child > *,
.table.dps-role > tbody > tr.heading > * {
  background-color: #bb6363 !important;
  border-color: #9a4848 !important;
}
.table.dps-role > tbody > tr > th,
.table.dps-role > tfoot > tr > th,
.table.dps-role > thead > tr > th,
table.table > tbody > tr.dps-role > th {
  background-color: #a9d3b7;
  border-color: #87a992;
}
.table.dps-role > tbody > tr:nth-child(odd),
.table > tbody > tr.dps-role:nth-child(odd) {
  background-color: #f2e8e5;
}

/* healer-role*/
.table.healer-role > :first-child > tr:first-child,
.table.healer-role > tbody > tr.heading,
.table.healer-role > :first-child > tr:first-child > *,
.table.healer-role > tbody > tr.heading > * {
  background-color: #3c6829 !important;
  border-color: #2a491d !important;
}
.table.healer-role > tbody > tr > th,
.table.healer-role > tfoot > tr > th,
.table.healer-role > thead > tr > th,
table.table > tbody > tr.healer-role > th {
  background-color: #a9d3b7;
  border-color: #87a992;
}
.table.healer-role > tbody > tr:nth-child(odd),
.table > tbody > tr.healer-role:nth-child(odd) {
  background-color: #e7f3e2;
}

/* tanker-role*/
.table.tanker-role > :first-child > tr:first-child,
.table.tanker-role > tbody > tr.heading,
.table.tanker-role > :first-child > tr:first-child > *,
.table.tanker-role > tbody > tr.heading > * {
  background-color: #5587c1 !important;
  border-color: #4871a0 !important;
}
.table.tanker-role > tbody > tr > th,
.table.tanker-role > tfoot > tr > th,
.table.tanker-role > thead > tr > th,
table.table > tbody > tr.tanker-role > th {
  background-color: #a9d3b7;
  border-color: #87a992;
}
.table.tanker-role > tbody > tr:nth-child(odd),
.table > tbody > tr.tanker-role:nth-child(odd) {
  background-color: #d2e3f7;
}

/* crafting-role*/
.table.crafting-role > :first-child > tr:first-child,
.table.crafting-role > tbody > tr.heading,
.table.crafting-role > :first-child > tr:first-child > *,
.table.crafting-role > tbody > tr.heading > * {
  background-color: #878eb5 !important;
  border-color: #777d9e !important;
}
.table.crafting-role > tbody > tr > th,
.table.crafting-role > tfoot > tr > th,
.table.crafting-role > thead > tr > th,
table.table > tbody > tr.crafting-role > th {
  background-color: #a9d3b7;
  border-color: #87a992;
}
.table.crafting-role > tbody > tr:nth-child(odd),
.table > tbody > tr.crafting-role:nth-child(odd) {
  background-color: #dfe1ec;
}

/* gathering-role*/
.table.gathering-role > :first-child > tr:first-child,
.table.gathering-role > tbody > tr.heading,
.table.gathering-role > :first-child > tr:first-child > *,
.table.gathering-role > tbody > tr.heading > * {
  background-color: #78a923 !important;
  border-color: #5a8019 !important;
}
.table.gathering-role > tbody > tr > th,
.table.gathering-role > tfoot > tr > th,
.table.gathering-role > thead > tr > th,
table.table > tbody > tr.gathering-role > th {
  background-color: #cbeb93;
  border-color: #87a992;
}
.table.gathering-role > tbody > tr:nth-child(odd),
.table > tbody > tr.gathering-role:nth-child(odd) {
  background-color: #eaf7d4;
}

/* pet-role*/
.table.pet-role > :first-child > tr:first-child,
.table.pet-role > tbody > tr.heading,
.table.pet-role > :first-child > tr:first-child > *,
.table.pet-role > tbody > tr.heading > * {
  background-color: #5fb7aa !important;
  border-color: #479e91 !important;
}
.table.pet-role > tbody > tr > th,
.table.pet-role > tfoot > tr > th,
.table.pet-role > thead > tr > th,
table.table > tbody > tr.pet-role > th {
  background-color: #a9d3b7;
  border-color: #87a992;
}
.table.pet-role > tbody > tr:nth-child(odd),
.table > tbody > tr.pet-role:nth-child(odd) {
  background-color: #edf7f6;
}

/* npc */
.table.npc > :first-child > tr:first-child,
.table.npc > tbody > tr.heading,
.table.npc > :first-child > tr:first-child > *,
.table.npc > tbody > tr.heading > * {
  background-color: #6c3 !important;
  border-color: #52a329 !important;
}
.table.npc > tbody > tr > th,
.table.npc > tfoot > tr > th,
.table.npc > thead > tr > th,
table.table > tbody > tr.npc > th {
  background-color: #b3e699;
  border-color: #8fb87a;
}
.table.npc > tbody > tr:nth-child(odd),
.table > tbody > tr.npc:nth-child(odd) {
  background-color: #e8f8e1;
}

/* pve */
.table.pve > :first-child > tr:first-child,
.table.pve > tbody > tr.heading,
.table.pve > :first-child > tr:first-child > *,
.table.pve > tbody > tr.heading > * {
  background-color: #fc6 !important;
  border-color: #cca352 !important;
}
.table.pve > tbody > tr > th,
.table.pve > tfoot > tr > th,
.table.pve > thead > tr > th,
table.table > tbody > tr.pve > th {
  background-color: #ffe6b3;
  border-color: #ccb88f;
}
.table.pve > tbody > tr:nth-child(odd),
.table > tbody > tr.pve:nth-child(odd) {
  background-color: #fff8e8;
}

/* equip or item*/
.table.equip > :first-child > tr:first-child,
.table.equip > tbody > tr.heading,
.table.equip > :first-child > tr:first-child > *,
.table.equip > tbody > tr.heading > *,
.table.item > :first-child > tr:first-child,
.table.item > tbody > tr.heading,
.table.item > :first-child > tr:first-child > *,
.table.item > tbody > tr.heading > * {
  background-color: #f96 !important;
  border-color: #cc7a52 !important;
}
.table.equip > tbody > tr > th,
.table.equip > tfoot > tr > th,
.table.equip > thead > tr > th,
table.table > tbody > tr.equip > th,
.table.item > tbody > tr > th,
.table.item > tfoot > tr > th,
.table.item > thead > tr > th,
table.table > tbody > tr.item > th {
  background-color: #ffccb3;
  border-color: #cca38f;
}
.table.equip > tbody > tr:nth-child(odd),
.table > tbody > tr.equip:nth-child(odd),
.table.item > tbody > tr:nth-child(odd),
.table > tbody > tr.item:nth-child(odd) {
  background-color: #fff0e8;
}

/* skin */
.table.skin > :first-child > tr:first-child,
.table.skin > tbody > tr.heading,
.table.skin > :first-child > tr:first-child > *,
.table.skin > tbody > tr.heading > * {
  background-color: #e07a98 !important;
  border-color: #996574 !important;
}
.table.skin > tbody > tr > th,
.table.skin > tfoot > tr > th,
.table.skin > thead > tr > th,
table.table > tbody > tr.skin > th {
  background-color: #ffd4df;
  border-color: #b3a1a5;
}
.table.skin > tbody > tr:nth-child(odd),
.table > tbody > tr.skin:nth-child(odd) {
  background-color: #ffedf4;
}

/* mech1 */
.table.mech1 > :first-child > tr:first-child,
.table.mech1 > tbody > tr.heading,
.table.mech1 > :first-child > tr:first-child > *,
.table.mech1 > tbody > tr.heading > * {
  background-color: #69c !important;
  border-color: #527aa3 !important;
}
.table.mech1 > tbody > tr > th,
.table.mech1 > tfoot > tr > th,
.table.mech1 > thead > tr > th,
table.table > tbody > tr.mech1 > th {
  background-color: #b3cce6;
  border-color: #8fa3b8;
}
.table.mech1 > tbody > tr:nth-child(odd),
.table > tbody > tr.mech1:nth-child(odd) {
  background-color: #e8f0f8;
}

/* mech2 */
.table.mech2 > :first-child > tr:first-child,
.table.mech2 > tbody > tr.heading,
.table.mech2 > :first-child > tr:first-child > *,
.table.mech2 > tbody > tr.heading > * {
  background-color: #3cc !important;
  border-color: #29a3a3 !important;
}
.table.mech2 > tbody > tr > th,
.table.mech2 > tfoot > tr > th,
.table.mech2 > thead > tr > th,
table.table > tbody > tr.mech2 > th {
  background-color: #99e6e6;
  border-color: #7ab8b8;
}
.table.mech2 > tbody > tr:nth-child(odd),
.table > tbody > tr.mech2:nth-child(odd) {
  background-color: #e1f8f8;
}

/* lore */
.table.lore > :first-child > tr:first-child,
.table.lore > tbody > tr.heading,
.table.lore > :first-child > tr:first-child > *,
.table.lore > tbody > tr.heading > * {
  background-color: #c6c !important;
  border-color: #a352a3 !important;
}
.table.lore > tbody > tr > th,
.table.lore > tfoot > tr > th,
.table.lore > thead > tr > th,
table.table > tbody > tr.lore > th {
  background-color: #e6b3e6;
  border-color: #b88fb8;
}
.table.lore > tbody > tr:nth-child(odd),
.table > tbody > tr.lore:nth-child(odd) {
  background-color: #f8e8f8;
}

/* location */
.table.location > :first-child > tr:first-child,
.table.location > tbody > tr.heading,
.table.location > :first-child > tr:first-child > *,
.table.location > tbody > tr.heading > * {
  background-color: #96c !important;
  border-color: #7a52a3 !important;
}
.table.location > tbody > tr > th,
.table.location > tfoot > tr > th,
.table.location > thead > tr > th,
table.table > tbody > tr.location > th {
  background-color: #ccb3e6;
  border-color: #a38fb8;
}
.table.location > tbody > tr:nth-child(odd),
.table > tbody > tr.location:nth-child(odd) {
  background-color: #f0e8f8;
}

/* promo */
.table.promo > :first-child > tr:first-child,
.table.promo > tbody > tr.heading,
.table.promo > :first-child > tr:first-child > *,
.table.promo > tbody > tr.heading > * {
  background-color: #9c3 !important;
  border-color: #7aa329 !important;
}
.table.promo > tbody > tr > th,
.table.promo > tfoot > tr > th,
.table.promo > thead > tr > th,
table.table > tbody > tr.promo > th {
  background-color: #cce699;
  border-color: #a3b87a;
}
.table.promo > tbody > tr:nth-child(odd),
.table > tbody > tr.promo:nth-child(odd) {
  background-color: #f0f8e1;
}

/* buff */
.table.buff > :first-child > tr:first-child,
.table.buff > tbody > tr.heading,
.table.buff > :first-child > tr:first-child > *,
.table.buff > tbody > tr.heading > * {
  background-color: #73d9d9 !important;
  border-color: #5caeae !important;
}
.table.buff > tbody > tr > th,
.table.buff > tfoot > tr > th,
.table.buff > thead > tr > th,
table.table > tbody > tr.buff > th {
  background-color: #b9ecec;
  border-color: #94bdbd;
}
.table.buff > tbody > tr:nth-child(odd),
.table > tbody > tr.buff:nth-child(odd) {
  background-color: #eaf9f9;
}

/* debuff */
.table.debuff > :first-child > tr:first-child,
.table.debuff > tbody > tr.heading,
.table.debuff > :first-child > tr:first-child > *,
.table.debuff > tbody > tr.heading > * {
  background-color: #51a651 !important;
  border-color: #418541 !important;
}

.table.debuff > tbody > tr > th,
.table.debuff > tfoot > tr > th,
.table.debuff > thead > tr > th,
table.table > tbody > tr.debuff > th {
  background-color: #a8d3a8;
  border-color: #86a986;
}

.table.debuff > tbody > tr:nth-child(odd),
.table > tbody > tr.debuff:nth-child(odd) {
  background-color: #e5f2e5;
}

/* crafting */
/* recipe */
.table.crafting > :first-child > tr:first-child,
.table.crafting > tbody > tr.heading,
.table.crafting > :first-child > tr:first-child > *,
.table.crafting > tbody > tr.heading > *,
.table.recipe > :first-child > tr:first-child,
.table.recipe > tbody > tr.heading,
.table.recipe > :first-child > tr:first-child > *,
.table.recipe > tbody > tr.heading > * {
  background-color: #a68151 !important;
  border-color: #856741 !important;
}

.table.crafting > tbody > tr > th,
.table.crafting > tfoot > tr > th,
.table.crafting > thead > tr > th,
table.table > tbody > tr.crafting > th,
.table.recipe > tbody > tr > th,
.table.recipe > tfoot > tr > th,
.table.recipe > thead > tr > th,
table.table > tbody > tr.recipe > th {
  background-color: #d3c0a8;
  border-color: #a99a86;
}

/* Action tables */
.table.actions,
.table.traits {
  width: 100%;
  max-width: 1000px;
  display: table;
}
.table.actions > :first-child > tr:first-child ~ tr th[colspan],
.table.traits > :first-child > tr:first-child ~ tr th[colspan] {
  text-align: left;
}
.table.actions
  > :first-child
  > tr:first-child
  ~ tr
  th[colspan]
  span.editsection,
.table.traits
  > :first-child
  > tr:first-child
  ~ tr
  th[colspan]
  span.editsection {
  display: none;
}
.table.actions > :first-child > tr:first-child ~ tr th[colspan] h4,
.table.traits > :first-child > tr:first-child ~ tr th[colspan] h4 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* Using : lists within tables */
/* no top/bottom margin in these 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;
}
/* 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;
}

.table .standard-frame-icon.small {
  display: inline-block !important;
}

.table .standard-frame-icon.small a.external.text {
  background: none !important;
}

.recipe div.ingredients dt {
  padding: 3px 15px 5px 0px !important;
}

.recipe div.ingredients dd {
  float: none !important;
}

/* TABLES */
/* quest */
.table.quest > :first-child > tr:first-child,
.table.quest > tbody > tr.heading,
.table.quest > :first-child > tr:first-child > *,
.table.quest > tbody > tr.heading > * {
  background-color: #efae4d !important;
  border-color: #e18f14 !important;
}

.table.quest > tbody > tr > th,
.table.quest > tfoot > tr > th,
.table.quest > thead > tr > th,
table.table > tbody > tr.quest > th {
  background-color: #efae4d;
  border-color: #e18f14;
}

.table.quest > tbody > tr:nth-child(odd),
.table > tbody > tr.quest:nth-child(odd) {
  background-color: #fff3d8;
}

/* Relic weapons nav */
div.nav.relic .pre-relic-label {
  width: 120px;
}

div.nav.relic .relic-list {
  padding-bottom: 6px;
}

div.nav.relic .role-subheading {
  padding: 0 8px;
  position: absolute;
}

div.nav.relic td.mw-collapsible div.mw-collapsible-content {
  padding-top: 0.6em;
}

div.nav.relic .first-role-job {
  width: 112px;
}

div.nav.relic .heading {
  background-color: #8d5bc2;
}

div.nav.relic dd,
div.nav.relic dt,
div.nav.relic table th {
  border-color: #8d5bc2;
}

.table.crafting > tbody > tr:nth-child(even),
.table > tbody > tr.crafting:nth-child(even),
.table.recipe > tbody > tr:nth-child(even),
.table > tbody > tr.recipe:nth-child(even) {
  background-color: #f2ece5 !important;
}

.table.crafting > tbody > tr:nth-child(odd),
.table > tbody > tr.crafting:nth-child(odd),
.table.recipe > tbody > tr:nth-child(odd),
.table > tbody > tr.recipe:nth-child(odd) {
  background-color: #fffffe !important;
}