Difference between revisions of "MediaWiki:Mobile.css"

From Final Fantasy XIV Online Wiki
Jump to navigation Jump to search
Line 1,407: Line 1,407:
div.nav.relic table th { border-color:#8d5bc2; }
div.nav.relic table th { border-color:#8d5bc2; }


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

Revision as of 10:07, 19 June 2021

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

/* 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 .75em;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(.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 .25em;
    background-color: #444;
    background-image: url(https://ffxiv.consolegameswiki.com/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:.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:.75em;
  line-height:1em;
  margin:.25em -.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(https://ffxiv.consolegameswiki.com/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:.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 .25em;
  line-height:1.176em;
  font-size-adjust:.43;
  padding:.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 .25em;
  z-index:1;
  line-height:1.333em;
  font-size-adjust:0.43;
  padding:.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(https://ffxiv.consolegameswiki.com/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:.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:.769em 0;
}

div.nav .subheading {
  font-family:Arial, sans-serif;
  font-size:1em;
  font-size-adjust:.52;
  padding:.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:.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:.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:.5em;
}

.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th {
  line-height:1.667em;
  padding:.25em .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; 
}

Retrieved from "https://ffxiv.consolegameswiki.com/mediawiki/index.php?title=MediaWiki:Mobile.css&oldid=296617"