MediaWiki:Common.css: Difference between revisions

From Path of Exile Wiki
Jump to navigation Jump to search
(Trying something that should hopefully allow responsive tables to sit next to info boxes instead of getting pushed beneath them.)
(And then this should keep the vertical scrollbar from moving away from the table when the width of the scroll div is wider than the table.)
Line 2,018: Line 2,018:
}
}
.c-responsive-table__scroll {
.c-responsive-table__scroll {
     display: flow-root;
     display: block;
     overflow-y: auto;
     overflow-y: auto;
     overflow-x: auto;
     overflow-x: auto;
    max-width: fit-content;
     max-height: 50vh;
     max-height: 50vh;
}
}

Revision as of 01:11, 19 June 2020

abbr,
acronym {
    color: #DFCF99;
    text-decoration: underline white dotted !important;
}
abbr.nounderline,
acronym.nounderline {
    text-decoration: none !important;
}

/* Item hoverbox */
.c-item-hoverbox {
    display: inline-block;
}
.c-item-hoverbox__display {
    display: flex;
    align-items: flex-start;
    visibility: hidden;
    position: absolute;
    padding: 8px;
}
.c-item-hoverbox__display.is-visible {
    visibility: visible;
    z-index: 9999;
}
.c-item-hoverbox__display.is-left-of-activator .item-box,
.c-item-hoverbox__display.is-above-activator.is-right-side-of-viewport .item-box,
.c-item-hoverbox__display.is-below-activator.is-right-side-of-viewport .item-box {
    order: 1;
}
.c-item-hoverbox__activator {
    display: flex;
    align-items: baseline;
}
.c-item-hoverbox--large .c-item-hoverbox__activator {
    flex-direction: column;
    align-items: stretch;
}

/* Flex grid */
.o-flex-grid {
    display: flex;
    flex-wrap: wrap;
    clear: both;
    margin-left: -16px;
}
.o-flex-grid__item {
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex: 0 0 auto;
    margin-bottom: 16px;
    padding-left: 16px;
    width: 100%;
}
.o-flex-grid__inner {
    flex: 0 1 100%;
    margin: 0 !important;
}
@media screen and (min-width: 45em) {
    .o-flex-grid--c2\@sm > .o-flex-grid__item {
        width: 50%;
    }
}
@media screen and (min-width: 60em) {
    .o-flex-grid--c2\@md > .o-flex-grid__item {
        width: 50%;
    }
    .o-flex-grid--c3\@md > .o-flex-grid__item {
        width: 33.3%;
    }
    .o-flex-grid--c4\@md > .o-flex-grid__item {
        width: 25%;
    }
}
@media screen and (min-width: 80em) {
    .o-flex-grid--c3\@lg > .o-flex-grid__item {
        width: 33.3%;
    }
}
@media screen and (min-width: 100em) {
    .o-flex-grid--c2\@lg > .o-flex-grid__item {
        width: 50%;
    }
    .o-flex-grid--c4\@lg > .o-flex-grid__item {
        width: 25%;
    }
}

/* Content blocks */
.c-cblock {
    overflow: hidden;
    margin: 6px 0;
    border: 1px solid #2c2b2b;
    border-radius: 4px;
    padding: 8px 16px;
    background-color: #141414;
}
.c-cblock--violet {
    border-color: #585477;
    background-color: #151517;
}
.c-cblock--gold {
    border-color: #75693c;
    background-color: #1c1b19;
}
.c-cblock > *:first-child {
    margin-top: 0 !important;
}
.c-cblock hr {
    clear: both;
    margin: 16px 0;
    background-color: #2c2b2b !important;
}
.c-cblock--violet hr {
    background-color: #585477 !important;
}
.c-cblock--gold hr {
    background-color: #75693c !important;
}
.c-cblock h2,
.c-cblock h3,
.c-cblock h4,
.c-cblock h5,
.c-cblock h6 {
    border: none;
}

/* Modbox template style */
.modbox {
    float:right;
}
.modbox table {
    width: 100%;
    float: right;
    clear: both;
    margin: 0 0 0.8em 0;
}

/* Infobox template style */
.infobox {
    border: 1px solid #75511D;
    background-color: #141414;
    color: #A38D6D;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    /* @noflip */
    text-align: left;
    font-size: 88%;
    line-height: 1.5em;
}
.infobox caption {
    font-size: 125%;
    font-weight: bold;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}
.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}
.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    /* @noflip */
    border-right: 1px solid #aaa;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    /* @noflip */
    border-right: 1px solid #aaa;
}

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
    box-sizing: border-box;
    border: 1px solid #75511D;
    width: 100%;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
.navbox .navbox {
    margin-top: 0;            /* No top margin for nested navboxes */
}
.navbox + .navbox {
    margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
    width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em;      /* Title, group and above/below styles */
    line-height: 1.5em;
    text-align: center;
}
th.navbox-group {             /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}
.navbox,
.navbox-subgroup {
    background: #101010;      /* Background color */
}
.navbox-list {
    line-height: 1.5em;
    border-color: #101010;    /* Must match background color */
}
.navbox th,
.navbox-title {
    background: #141414;      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #101010;      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #141414;      /* Level 3 color */
}
.navbox-even {
    background: #101010;      /* Even row striping */
}
.navbox-odd {
    background: transparent;  /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}

/* Default styling for Navbar template */
.navbar {
    display: inline;
    font-size: 88%;
    font-weight: normal;
}
.navbar ul {
    display: inline;
    white-space: nowrap;
}
.mw-body-content .navbar ul {
    line-height: inherit;
}
.navbar li {
    word-spacing: -0.125em;
}
.navbar.mini li abbr[title] {
  font-variant: small-caps;
  border-bottom: none;
  text-decoration: none;
  cursor: inherit;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
    font-size: 100%;
}
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 6em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
    /* @noflip */
    float: right;
    font-weight: normal;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 6em;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}

/* Style for horizontal lists (separator following item).
   Note: hlist formatting will break if the resulting HTML lacks a breakable character
   between list items. This happens when the following conditions are true:
   1) The list is made using wiki markup (where HTML is built by parser.php)
   2) HTMLTidy is disabled or unavailable (such as on Special: pages)
   In such cases, building lists with .hlist using HTML instead of wiki markup
   will work around this problem. See also [[Bugzilla:39617]].
   IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
   Last updated: September 23, 2012
   @maintainer: [[User:Edokter]]
   @revision: 2.0
*/
.skin-vector .hlist dl {
    line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline and make them nowrap */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline and allow them to wrap */
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
    white-space: normal;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ":";
}
.hlist dd:after,
.hlist li:after {
    content: " ·";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: "(";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ")";
    font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
    content: ")";
    font-weight: normal;
}
/* Put numbers in front of ordered list items */
.hlist.hnum ol {
    counter-reset: list-item;
}
.hlist.hnum ol > li {
    counter-increment: list-item;
}
.hlist.hnum ol > li:before {
    content: counter(list-item) " ";
}
.hlist.hnum dd ol > li:first-child:before,
.hlist.hnum dt ol > li:first-child:before,
.hlist.hnum li ol > li:first-child:before {
    content: "(" counter(list-item) " ";
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}
.navbox .selflink {
color:#00B6FF;
}

/* Change the external link icon to an Adobe icon for all PDF files
   in browsers that support these CSS selectors, like Mozilla and Opera */
div#content a[href$=".pdf"].external,
div#content a[href*=".pdf?"].external,
div#content a[href*=".pdf#"].external,
div#content a[href$=".PDF"].external,
div#content a[href*=".PDF?"].external,
div#content a[href*=".PDF#"].external,
div#mw_content a[href$=".pdf"].external,
div#mw_content a[href*=".pdf?"].external,
div#mw_content a[href*=".pdf#"].external,
div#mw_content a[href$=".PDF"].external,
div#mw_content a[href*=".PDF?"].external,
div#mw_content a[href*=".PDF#"].external {
    background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif") no-repeat right;
    /* @noflip */
    padding-right: 18px;
}

/* Change the external link icon to an Adobe icon anywhere the PDFlink class
   is used (notably Template:PDFlink). This works in IE, unlike the above. */
div#content span.PDFlink a,
div#mw_content span.PDFlink a {
    background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif") no-repeat right;
    /* @noflip */
    padding-right: 18px;
}

/* ===== Hatnotes and disambiguation notices ===== */
.rellink,
.dablink {
    font-style: italic;
    /* @noflip */
    padding-left: 1.6em;
    margin-bottom: 0.5em;
}
.rellink i,
.dablink i {
    font-style: normal;
}

/* ===== Plainlist ===== */
.plainlist ul {
    line-height: inherit;
    list-style: none outside none;
    margin: 0;
}
.plainlist ul li {
    margin-bottom: 0;
}

/* ===== Multiple column layout for lists ===== */
.multicol-15 ul,
.multicol-15 ol {
    column-width: 15em;
}

/* ===== Message Box (Template:Mbox) ===== */
.mbox {
     display: table;
     background-color: #332f24;
     border-color: #474233 #403b2e #26231b;
     border-radius: 6px;
     border-style: solid;
     border-width: 2px 1px;
     margin: 6px 10%;
     padding: 2px;
}
.mbox-small {
     clear: right;
     float: right;
     font-size: 88%;
     line-height: 1.2;
    margin: 6px 0 6px 12px;
     width: 230px;
}
.mbox-small-left {
     clear: left;
     float: left;
     font-size: 88%;
     line-height: 1.2;
     margin: 6px 12px 6px 0;
     width: 230px;
}
.mbox-inner {
     display: table-row;
}
.mbox-image,
.mbox-text {
     display: table-cell;
     border-color: #1a1712;
     border-style: solid;
     border-width: 1px;
     border-radius: 6px;
     padding: 4px 1em;
     vertical-align: middle;
}
.mbox-image {
     border-right-width: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}
.mbox-text {
     width: 100%;
}
.mbox-image + .mbox-text {
     border-left-width: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     padding-left: 0;
}
.mbox-style .mbox-image,
.mbox-style .mbox-text {
     border-color: #a98a35;
}
.mbox-content .mbox-image,
.mbox-content .mbox-text {
     border-color: #a96427;
}
.mbox-delete .mbox-image,
.mbox-delete .mbox-text {
     border-color: #c62525;
}

/* ===== Fmbox ===== */
.fmbox {
    clear: both;
    margin: 6px 0;
    border: 1px solid #383636;
    padding: 6px 1em;
    background-color: #1a1b18;
}

/* ===== Stub Box ===== */
.stub {
    display: table;
    font-style: italic;
}
.stub-image,
.stub-text {
    display: table-cell;
    vertical-align: middle;
}

/* ===== Discussion Closed (Template:Dcbox) ===== */
.dcbox {
    margin: 6px 0;
    border: 1px solid #2c2b2b;
    border-radius: 4px;
    padding: 6px 1em;
    background-color: #141414;
}
.dcbox-top {
    margin-bottom: 12px;
    border-bottom: 1px solid #383636;
    padding-bottom: 4px;
}
.dcbox-status {
    font-size: 110%;
    font-weight: bold;
    text-transform: uppercase;
}
.dcbox-reminder {
    font-size: 90%;
    font-style: italic;
    color: #5e4f45;
}
.dcbox-bottom {
    margin-top: 12px;
    border-top: 1px solid #383636;
    padding-top: 4px;
}

/* ===== Issue Box (Template:Issue top) ===== */
.dcbox.issue-resolved {
    border-color: #678236;
    background-color: #1b1c19;
}
.dcbox.issue-moved {
    border-color: #585477;
    background-color: #151517;
}

/* ===== Blockquote (Template:Blockquote top) ===== */
.bqbox {
    margin: 6px 1em;
    border: 1px solid #293137;
    border-radius: 4px;
    padding: 6px 1em;
    background-color: #141517;
}

/* ===== Documentation Template ===== */
.template-documentation {
    clear: both;
    margin: 1em 0 0;
    border: 1px solid #383636;
    padding: 1em;
    background-color: #1a1b18;
}
.template-documentation-top {
    margin-bottom: 0.9em;
    border-bottom: 1px solid #383636;
    padding-bottom: 3px;
}
.template-documentation-header {
    font-size: 125%;
    font-weight: bold;
}
#documentation-meta-data {
    font-style: italic;
}

/* ===== References ===== */
ol.references,
div.reflist,
div.refbegin {
    font-size: 90%;
    margin-bottom: 0.5em;
}
div.refbegin-100 {
    font-size: 100%;
}
div.reflist ol.references {
    font-size: 100%;
    list-style-type: inherit;
}
ol.references li:target,
sup.reference:target,
span.citation:target {
    background-color: rgba(0, 182, 255, 0.1);
    border: 1px dotted #00b6ff;
    border-radius: 4px;
}
sup.reference {
    font-style: normal;
    font-weight: normal;
}
span.brokenref {
    display: none;
}
.citation {
    word-wrap: break-word;
}
.citation .printonly {
    display: none;
}

/* ===== Key Press Template ===== */
.keyboard-key {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
    border-width: 1px;
    border-style: solid;
    border-color: #756b4f #70664b #574f3a;
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-family: inherit;
    font-size: 0.85em;
    color: #1a1712;
    white-space: nowrap;
    background: #574f3a; /* Old browsers */
    background: -moz-linear-gradient(top,  #574f3a 0%, #756b4f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#574f3a), color-stop(100%,#756b4f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #574f3a 0%,#756b4f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #574f3a 0%,#756b4f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #574f3a 0%,#756b4f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #574f3a 0%,#756b4f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#574f3a', endColorstr='#756b4f',GradientType=0 ); /* IE6-9 */
}

/* ===== Text colors (Template:C) ===== */
/* Values from Metadata/UI/UISettings.xml */
.text-color.-default,
.tc.-default {
    color: rgb(127,127,127);
} 
.text-color.-valuedefault,
.tc.-valuedefault {
    color: rgb(255,255,255);
} 
.text-color.-pink,
.tc.-pink {
    color: rgb(255,192,203);
} 
.text-color.-dodgerblue,
.tc.-dodgerblue {
    color: rgb(30,144,255);
} 
.text-color.-fire,
.tc.-fire {
    color: rgb(150,0,0);
} 
.text-color.-cold,
.tc.-cold {
    color: rgb(54,100,146);
} 
.text-color.-lightning,
.tc.-lightning {
    color: rgb(255,215,0);
} 
.text-color.-chaos,
.tc.-chaos {
    color: rgb(208,32,144);
} 
.text-color.-augmented,
.tc.-augmented {
    color: rgb(136,136,255);
} 
.text-color.-crafted,
.tc.-crafted {
    color: rgb(184,218,242);
} 
.text-color.-enchanted,
.tc.-enchanted {
    color: rgb(184,218,242);
} 
.text-color.-unmet,
.tc.-unmet {
    color: rgb(210,0,0);
} 
.text-color.-uniqueitem,
.tc.-uniqueitem {
    color: rgb(175,96,37);
} 
.text-color.-unique,
.tc.-unique {
    color: rgb(175,96,37);
} 
.text-color.-rareitem,
.tc.-rareitem {
    color: rgb(255,255,119);
} 
.text-color.-rare,
.tc.-rare {
    color: rgb(255,255,119);
} 
.text-color.-magicitem,
.tc.-magicitem {
    color: rgb(136,136,255);
} 
.text-color.-magic,
.tc.-magic {
    color: rgb(136,136,255);
} 
.text-color.-whiteitem,
.tc.-whiteitem {
    color: rgb(200,200,200);
} 
.text-color.-normal,
.tc.-normal {
    color: rgb(200,200,200);
} 
.text-color.-gemitem,
.tc.-gemitem {
    color: rgb(27,162,155);
} 
.text-color.-gem,
.tc.-gem {
    color: rgb(27,162,155);
} 
.text-color.-currencyitem,
.tc.-currencyitem {
    color: rgb(170,158,130);
} 
.text-color.-currency,
.tc.-currency {
    color: rgb(170,158,130);
} 
.text-color.-questitem,
.tc.-questitem {
    color: rgb(74,230,58);
} 
.text-color.-quest,
.tc.-quest {
    color: rgb(74,230,58);
} 
.text-color.-nemesismod,
.tc.-nemesismod {
    color: rgb(255,200,0);
} 
.text-color.-nemesismodoutline,
.tc.-nemesismodoutline {
    color: rgb(220,255,40,0);
} 
.text-color.-talismanmod,
.tc.-talismanmod {
    color: rgb(141,241,79);
} 
.text-color.-talismanmodoutline,
.tc.-talismanmodoutline {
    color: rgb(220,0,0,0);
} 
.text-color.-title,
.tc.-title {
    color: rgb(231,180,120);
} 
.text-color.-corrupted,
.tc.-corrupted {
    color: rgb(210,0,0);
} 
.text-color.-favour,
.tc.-favour {
    color: rgb(170,158,130);
} 
.text-color.-supporterpacknewitem,
.tc.-supporterpacknewitem {
    color: rgb(180,96,0);
} 
.text-color.-supporterpackitem,
.tc.-supporterpackitem {
    color: rgb(163,141,109);
} 
.text-color.-bloodlinemod,
.tc.-bloodlinemod {
    color: rgb(210,0,220);
} 
.text-color.-bloodlinemodoutline,
.tc.-bloodlinemodoutline {
    color: rgb(200,74,0,160);
} 
.text-color.-tormentmod,
.tc.-tormentmod {
    color: rgb(50,230,100);
} 
.text-color.-tormentmodoutline,
.tc.-tormentmodoutline {
    color: rgb(200,0,100,150);
} 
.text-color.-canttradeormodify,
.tc.-canttradeormodify {
    color: rgb(210,0,0);
} 
.text-color.-lockedtoaccount,
.tc.-lockedtoaccount {
    color: rgb(210,0,0);
} 
.text-color.-divination,
.tc.-divination {
    color: rgb(14,186,255);
} 
.text-color.-prophecy,
.tc.-prophecy {
    color: rgb(181,75,255);
} 
.text-color.-essencemod,
.tc.-essencemod {
    color: rgb(164,210,255);
} 
.text-color.-essencemodoutline,
.tc.-essencemodoutline {
    color: rgb(210,0,50,100);
} 
.text-color.-premiumchat,
.tc.-premiumchat {
    color: rgb(253,242,126);
} 
.text-color.-premiumchatoutline,
.tc.-premiumchatoutline {
    color: rgb(209,46,46);
} 
.text-color.-uniquefoil,
.tc.-uniquefoil {
    color: rgb(130,173,106);
} 
.text-color.-legacy,
.tc.-legacy {
    color: rgb(212,145,63);
} 
.text-color.-bestiarymod,
.tc.-bestiarymod {
    color: rgb(255,255,255);
} 
.text-color.-bestiarymodoutline,
.tc.-bestiarymodoutline {
    color: rgb(220,255,40,0);
}

/* Other values & overrides */
 
.text-color,
.tc {
    font-style: normal;
}
.text-color.-mod,
.tc.-mod {
    font-family: "Fontin-SmallCaps", Verdana, Arial, Helvetica, sans-serif;
    font-variant-ligatures: none;
    color: #8888ff;
}
.text-color.-craft,
.tc.-craft {
    font-family: "Fontin-SmallCaps", Verdana, Arial, Helvetica, sans-serif;
    font-variant-ligatures: none;
    color: #b4b4ff;
}
.text-color.-help,
.tc.-help {
    color: #7f7f7f;
    font-style: italic;
}

.text-color.-stat,
.tc.-stat {
    color: #7f7f7f;
}
.text-color.-value,
.tc.-value {
    color: #ffffff;
}

.text-color.-cosmetic,
.tc.-cosmetic {
    color: #aa9e82;
}
.text-color.-flavour,
.tc.-flavour {
    color: #af6025;
    font-style: italic;
}
.text-color.-gemdesc,
.tc.-gemdesc {
    color: #1aa29b;
}
.text-color.-card,
.tc.-card,
.text-color.-divination,
.tc.-divination {
    color: #0ebaff;
}
.text-color.-corrupted,
.tc.-corrupted {
    color: #d20000;
}
.text-color.-nemesis,
.tc.-nemesis {
    color: #ffc800;
}
.text-color.-bloodline,
.tc.-bloodline {
    color: #d200dc;
}
.text-color.-torment,
.tc.-torment {
    color: #32e664;
}
.text-color a,
.tc a {
    color: inherit !important;
}
.text-color abbr,
.tc abbr {
    color: inherit;
}
em.tc {
    font-style:normal;
}
em.tc.-i {
    font-style:italic;
}

/* Something else? Not Template:C */

.text-diffnormal {
    color: #55aa22;
}
.text-diffcruel {
    color: #bbaa22;
}
.text-diffmerciless {
    color: #882222;
}
.text-life {
    color: rgb(184, 32, 45);
}
.text-mana {
    color: rgb(18, 87, 164);
}
.text-energy-shield {
    color: rgb(160, 206, 242);
}

/* ===== Item Box ===== */
.item-box {
    display: inline-block;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    padding: 2px;
    min-width: 220px;
    max-width: 440px;
    text-align: center;
    font-family: "Fontin-SmallCaps", Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    font-variant-ligatures: none;
    color: #7f7f7f;
    background-color: #000;
}
.item-box a {
    color: inherit;
}
.item-box.-normal {
    border-color: #c8c8c8;
}
.item-box.-magic {
    border-color: #8888ff;
}
.item-box.-rare {
    border-color: #ffff77;
}
.item-box.-unique {
    border-color: #af6025;
}
.item-box.-currency {
    border-color: #aa9e82;
}
.item-box.-gem {
    border-color: #1aa29b;
}
.item-box.-quest {
    border-color: #4ae63a;
}
.item-box.-prophecy {
    border-color: #b54bff;
}
.item-box.-relic {
    border-color: #82ad6a;
}
.item-box > .header {
    display: block;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    background-repeat: no-repeat, no-repeat, repeat-x;
}
.item-box > .header::before,
.item-box > .header::after {
    display: block;
    position: absolute;
    top: 0;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
}
.item-box > .header::before {
    left: 0;
}
.item-box > .header::after {
    right: 0;
}
.item-box.-shaper > .header::before,
.item-box.-shaper > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/5/55/Shaper-item-symbol.png");
}
.item-box.-elder > .header::before,
.item-box.-elder > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/1/1b/Elder-item-symbol.png");
}
.item-box.-crusader > .header::before,
.item-box.-crusader > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/d/d1/Crusader-item-symbol.png");
}
.item-box.-redeemer > .header::before,
.item-box.-redeemer > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/9/9c/Redeemer-item-symbol.png");
}
.item-box.-hunter > .header::before,
.item-box.-hunter > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/a/a8/Hunter-item-symbol.png");
}
.item-box.-warlord > .header::before,
.item-box.-warlord > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/f/f1/Warlord-item-symbol.png");
}
.item-box.-veiled > .header::before,
.item-box.-veiled > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/f/fd/Veiled-item-symbol.png");
}
.item-box.-fractured > .header::before,
.item-box.-fractured > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/9/97/Fractured-item-symbol.png");
}
.item-box.-synthesised > .header::before,
.item-box.-synthesised > .header::after {
    background-image: url("https://gamepedia.cursecdn.com/pathofexile_gamepedia/4/4c/Synthesised-item-symbol.png");
}
.item-box.-normal > .header {
    color: #c8c8c8;
}
.item-box.-magic > .header {
    color: #8888ff;
}
.item-box.-rare > .header {
    color: #ffff77;
}
.item-box.-unique > .header {
    color: #af6025;
}
.item-box.-currency > .header {
    color: #aa9e82;
}
.item-box.-gem > .header {
    color: #1aa29b;
}
.item-box.-quest > .header {
    color: #4ae63a;
}
.item-box.-prophecy > .header {
    color: #b54bff;
}
.item-box.-relic > .header {
    color: #82ad6a;
}
.item-box > .header.-single {
    background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/9/9b/Item-ui-header-single.png"), url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/9/9b/Item-ui-header-single.png"), url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/9/9b/Item-ui-header-single.png");
}
.item-box > .header.-single {
    padding: 3px 32px;
    height: 28px;
    line-height: 25px;
}
.item-box > .header.-single::before,
.item-box > .header.-single::after {
    width: 32px;
    height: 34px;
}
.item-box.-normal > .header.-single {
    background-position: left 0, right -68px, center -34px;
}
.item-box.-magic > .header.-single {
    background-position: left -102px, right -170px, center -136px;
}
.item-box.-currency > .header.-single {
    background-position: left -204px, right -272px, center -238px;
}
.item-box.-gem > .header.-single {
    background-position: left -306px, right -374px, center -340px;
}
.item-box.-quest > .header.-single {
    background-position: left -408px, right -476px, center -442px;
}
.item-box.-prophecy > .header.-single {
    background-position: left -510px, right -578px, center -544px;
}
.item-box > .header.-double {
    background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/e8/Item-ui-header-double.png"), url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/e8/Item-ui-header-double.png"), url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/e8/Item-ui-header-double.png");
}
.item-box > .header.-double {
    padding: 3px 44px;
    height: 48px;
    line-height: 22px;
}
.item-box > .header.-double::before,
.item-box > .header.-double::after {
    width: 32px;
    height: 54px;
}
.item-box.-rare > .header.-double {
    background-position: left 0, right -108px, center -54px;
}
.item-box.-unique > .header.-double {
    background-position: left -162px, right -270px, center -216px;
}
.item-box.-relic > .header.-double {
    background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/e1/Item-ui-header-relic.gif"), url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/e1/Item-ui-header-relic.gif"), url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/e1/Item-ui-header-relic.gif");
}
.item-box.-relic > .header.-double {
    background-position: left 0, right -108px, center -54px;
}
.item-box > .header > a,
.item-box > .header > .selflink {
    font-weight: normal;
    color: inherit !important;
}
.item-stats {
    display: block;
    padding: 7px 12px;
    margin: 0 auto;
}
.item-stats.-nopad {
    padding: 0;
}
.item-stats > .group {
    display: block;
    margin: 0 auto;
}
.item-stats > .group:nth-last-child(n+2)::after,
.item-stat-separator::before {
    display: block;
    margin: 5px auto;
    width: 221px;
    height: 2px;
    background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/e/ef/Item-ui-separators.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    content: "";
}
.item-box.-magic > .item-stats > .group::after,
.item-stat-separator.-magic::before {
    background-position: 0 -2px;
}
.item-box.-rare > .item-stats > .group::after,
.item-stat-separator.-rare::before {
    background-position: 0 -4px;
}
.item-box.-unique > .item-stats > .group::after,
.item-stat-separator.-unique::before  {
    background-position: 0 -6px;
}
.item-box.-currency > .item-stats > .group::after,
.item-stat-separator.-currency::before  {
    background-position: 0 -8px;
}
.item-box.-gem > .item-stats > .group::after,
.item-stat-separator.-gem::before  {
    background-position: 0 -10px;
}
.item-box.-quest > .item-stats > .group::after,
.item-stat-separator.-quest::before  {
    background-position: 0 -12px;
}
.item-box.-prophecy > .item-stats > .group::after,
.item-stat-separator.-prophecy::before  {
    background-position: 0 -14px;
}
.item-box.-relic > .item-stats > .group::after,
.item-stat-separator.-relic::before  {
    background-position: 0 -16px;
}
.item-box > .image {
    display: block;
    padding: 7px 12px;
}

/* Divination card item box */
.item-box.-divicard {
    border-color: #0ebaff;
}
.item-box.-divicard:first-child {
    border: none;
    padding: 0;
    background: none;
}
.divicard-wrapper {
    display: block;
    position: relative;
    width: 440px;
    height: 668px;
}
.divicard-art {
    display: block;
    position: absolute;
    top: 56px;
    left: 26px;
    background-color: #000;
}
.divicard-art img {
    width: 390px;
    height: 280px;
}
.divicard-frame {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.divicard-frame img {
    width: 100%;
    height: 100%;
}
.divicard-header {
    display: block;
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    font-size: 20px;
    line-height: 44px;
    color: #030301;
}
.divicard-header a,
.divicard-header .selflink {
    font-weight: normal;
}
.divicard-stack {
    display: block;
    position: absolute;
    top: 309px;
    left: 42px;
    width: 70px;
    font-size: 16px;
    line-height: 38px;
    color: #fff;
}
.divicard-reward {
    display: table;
    position: absolute;
    top: 334px;
    left: 35px;
    font-size: 16px;
}
.divicard-reward > span {
    display: table-cell;
    vertical-align: middle;
    width: 374px;
    height: 110px;
}
.divicard-flavour {
    display: table;
    position: absolute;
    top: 452px;
    left: 35px;
    font-size: 16px;
}
.divicard-flavour > span {
    display: table-cell;
    vertical-align: middle;
    width: 374px;
    height: 184px;
}

/* for Module:Item (old item module) */
.item-box.-floatright { 
    float: right;
    clear: right;
    margin-left: 14px;
    margin-bottom: 14px;
}
.itemboxhover,
.itemboxhovericon {
    position: absolute;
    z-index: 10000000; /* Needs to be on top always */
}
.itemboxhoverhide {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
}
.itemboxhovernojs {
    display: none !important;
}
.itemboxhover {
    background-color: rgba(0,0,0,0.85);
}
.itemboxhovericon {
    display: block;
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); /* W3C */
}
.itemhover {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

/* for Module:Item2 */
.inline-infobox-hover {
    display:none;
    position: absolute;
    z-index: 10000000;
}
.inline-infobox-hover .item-box {
    float: left;
    display: inline-block;
}
.inline-infobox-hover .image {
    padding: 7px 12px;
}
.inline-infobox-container > a:first-child > img {
    height: 16px;
    width: auto;
}
.inline-infobox-container > a:last-child > img {
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}
.inline-infobox-container:hover > .inline-infobox-hover {
    display: inline-block;
    font-weight: normal;
    font-style: normal;
}
.infobox-page-container {
    display: flex;
    flex-direction: column;
    float: right;
    clear: right;
    margin-left: 14px;
}
.infobox-page-container > .item-box {
    margin-bottom: 1em;
}
.infobox-page-container em.header {
    font-style: normal;
    font-weight: bold;
    font-size: 1.3em;
    display: inline-block;
    margin-bottom: 0.5em;
}
.infobox-disabled-drop {
    color: red;
    font-weight: bold;
}

/* Module:Item acquisition | Template:Item acquisition */
.upgraded-from-set:not(:first-child) td {
  border-top-style: dashed !important;
  border-top-width: 3px !important;
  border-top-color: #111 !important;
}

/* ===== Skill (Module:Skill) ==== */

/* Template:Skill */

.skill-box-page-container {
  float: right;
}

/* resize skill screenshot accordingly */
.skill-box-page-container img {
  max-width: 400px;
  height: auto;
}

.skill-box-table {
  max-width: 400px;
}

/* force the header section to be as small as possible */
.skill-box-table th {
  width: 1%;
}

.skill-box-table th,.skill-box-table td{
  font-size: 12px;
}

.skill-box-table td[colspan="2"]{
  font-size: inherit;
}

/* Template:Skill progression */
.skill-progression-table {
    width: auto;
    text-align: center;
}
.item-table {
    text-align: center;
    max-width: 100%;
}

/* ===== Infocard (Template:Infocard) ==== */
.infocard {
    float: right;
    clear: right;
    margin-left: 14px;
    margin-bottom: 14px;
    border-style: solid;
    border-width: 2px 1px;
    border-color: #474233 #403b2e #1a1812;
    border-radius: 6px;
    padding: 2px 3px;
    width: 292px;
    text-align: center;
    background-color: #332f24;
}
.infocard > .topbar {
    margin-bottom: 2px;
    display: table;
    width: 100%;
}
.infocard > .topbar > .left,
.infocard > .topbar > .middle,
.infocard > .topbar > .right {
    display: table-cell;
    vertical-align: middle;
}
.infocard > .topbar > .middle > .header {
    font-size: 20px;
    line-height: 1.5;
    color: #dfcf99;
}
.infocard > .topbar > .middle > .subheader {
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 1.0;
    font-weight: bold;
}
.infocard > .inner {
    margin: 0;
    border-style: solid;
    border-width: 2px 1px;
    border-color: #1a1812 #1f1c15 #474233;
    border-radius: 6px;
    background-color: #26231b;
}
.infocard > .inner > .block {
    margin: 0;
    padding: 0.5em 1.0em;
    list-style: none;
}
.infocard > .inner > .block:first-child {
    padding-top: 1.0em;
}
.infocard > .inner > .block:last-child {
    padding-bottom: 1.0em;
}

/* ===== Status Infocard (Template:Status) ===== */
.status-icon {
    height: 96px;
}
.status-icon .image,
.status-icon .frame {
    height: 100%;
}
.status-icon .image img {
    margin-top: 16px;
    width: 64px;
    height: 64px;
}
.status-icon .frame {
    margin-top: -96px;
}
.status-icon .frame img {
    width: 98px;
    height: 96px;
}

/* ===== Area Infocard (Template:Area) ==== */
.infocard.area > .topbar > .left,
.infocard.area > .topbar > .right {
    width: 27px;
}

/* ===== Sidebar ===== */
.sidebar {
    float: right;
    margin-left: 14px;
    margin-bottom: 14px;
    border-style: solid;
    border-width: 2px 1px;
    border-color: #474233 #403b2e #1a1812;
    border-radius: 6px;
    padding: 2px 3px;
    background-color: #332F24;
    width: 292px;
}
.sidebar-inner {
    border-style: solid;
    border-width: 2px 1px;
    border-color: #1a1812 #1f1c15 #474233;
    border-radius: 6px;
    padding: 8px 1em;
    background-color: #26231b;
}
.sidebar-header {
    margin-bottom: 2px;
    text-align: center;
    font-size: 20px;
    line-height: 1.5em;
    color: #dfcf99;
}

/* ===== Module:Passive skill ===== */

.passive-line {
  display: block;
}

.passive-hover {
  display: none;
  position: relative;
}

.passive-hover:hover {
  display: inline;
}

.passive-line:hover .passive-hover {
  display: inline;
}

.passive-icon-container {
  position: relative;
  margin: 0px auto;
}

.passive-icon-frame {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.passive-icon-container a {
  position: absolute;
  z-index: 0;
}

/* sizes of icons have been adjusted to look similar to ingame placement */
.passive-icon-type__basic {
  width: 60px;
  height: 60px;
}

.passive-icon-type__basic .passive-icon-frame {
  width: 60px;
  height: 60px;
  background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/a/a1/Basic_passive_frame.png");
  background-repeat: round;
}

.passive-icon-type__basic a, .passive-icon-type__basic img{
  left: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
}

.passive-icon-type__notable {
  width: 100px;
  height: 100px;
}

.passive-icon-type__notable .passive-icon-frame {
  width: 100px;
  height: 100px;
  background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/5/50/Notable_passive_frame.png");
  background-repeat: round;
}

.passive-icon-type__notable a, .passive-icon-type__notable img{
  left: 14px;
  top: 14px;
  width: 72px;
  height: 72px;
}

.passive-icon-type__keystone {
  width: 175px;
  height: 175px;
}

.passive-icon-type__keystone .passive-icon-frame {
  width: 175px;
  height: 175px;
  background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/5/5a/Keystone_passive_frame.png");
  background-repeat: round;
}

.passive-icon-type__keystone a, .passive-icon-type__keystone img{
  left: 36px;
  top: 36px;
  height: 100px;
  width: 100px;
}

.passive-icon-type__ascendancy_basic {
  width: 60px;
  height: 60px;
}

.passive-icon-type__ascendancy_basic .passive-icon-frame {
  width: 60px;
  height: 60px;
  background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/f/fa/Ascendancy_basic_passive_frame.png");
  background-repeat: round;
}

.passive-icon-type__ascendancy_basic a, .passive-icon-type__ascendancy_basic img{
  left: 10px;
  top: 10px;
  width: 39px;
  height: 40px;
}

.passive-icon-type__ascendancy_notable {
  width: 100px;
  height: 100px;
}

.passive-icon-type__ascendancy_notable .passive-icon-frame {
  width: 100px;
  height: 100px;
  background-image: url("https://pathofexile.gamepedia.com/media/pathofexile.gamepedia.com/2/26/Ascendancy_notable_passive_frame.png");
  background-repeat: round;
}

.passive-icon-type__ascendancy_notable a, .passive-icon-type__ascendancy_notable img{
  left: 16px;
  top: 16px;
  width: 68px;
  height: 68px;
}

/* ===== Gem Infobox ===== */
.GemInfoboxContainer {
    width: 300px;
    float: right;
    padding: 0px;
    margin: 0px 0px 5px 5px;
    border-collapse: collapse;
    background-color: #1a1812;
    font-size:12px;
    line-height:16px;
    color: #bfbfbf;
}
.GemInfoboxInfo         { width: 100%; border-collapse:separate; border-spacing:2px; }
.GemInfoboxInfo td      { background-color: #26231b; color: #ffffff; padding:5px; }
.GemInfoboxInfo td:first-child  { background-color: #332f24; color: #bfbfbf; }
.GemInfoboxHeader       { padding: 2px 2px 0px 2px; }
.GemInfoboxHeader>table     { border-collapse:collapse; }
.GemInfoboxHeader td:first-child {
    width: 100%;
    padding: 5px 5px 5px 5px;
    text-align: left;
    font-size: 11px;
}
.GemInfoboxHeaderName {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    color: #1ba29b;
}
.GemInfoboxFooter   { text-align: center; margin: 0px 2px 2px 2px; }
.GemInfoboxFooter img   { width: 100%; height: auto; }
.GemInfoboxDescription  { color: #1ba29b; }
.GemInfoboxModifier { color: #8888ff; }
.GemInfoboxDescription, .GemInfoboxModifier {
    padding: 5px;
    margin: 0px 2px 2px 2px;
    background-color: #26231b;
    text-align: center;
}

/* ===== Support Gem ID template (Template:Id) ===== */
.support-gem-id-red, .support-gem-id-green, .support-gem-id-blue {
    width: 1em;
    color: white !important;
    background-color:#c51e1e;
    display: inline-block;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.support-gem-id-red { background-color:#c51e1e; }
.support-gem-id-green   { background-color:#08a842; }
.support-gem-id-blue    { background-color:#4163c9; }

/* ===== Succession Box ===== */
table.successionbox {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ===== bottom footer ads ===== */
.btflb{
    display: block;
    height: 90px !important;
    margin: 0 auto;
    padding: 5px 0;
    width:728px !important;
}

/* ===== Module:Util ===== */

.module-error {
    color: red;
    font-weight: bold;
    border: 1px solid red;
    padding: 2px 3px 2px 2px;
}

/* ===== Module:Quest & Template:Quest ===== */

.quest-table {
    width:300px; 
    color: #bfbfbf; 
    float:right; 
    padding:0.1em; 
    background-color:#1a1812; 
    margin: 0px 0px 5px 5px;
}

.quest-table td.quest-table-iconbox {
    text-align:center;
    font-size:20px;
    font-weight:bold;
}

.quest-table td.quest-table-iconbox img {
    width: 100px;
    height: 100px;
}

.quest-table th {
    text-align: right; 
    font-weight: bold; 
    background-color: #332f24;
}

.quest-table td {
    text-align: center; 
    background-color: #26231b;
}

.quest-table td img {
    max-width: 200px;
    height: auto;
}

/* ===== Legacy Variant Tables (Template:Legacy variant table row) ===== */
.legacy-stats {
    font-family: "Fontin-SmallCaps", Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.857em;
    font-variant-ligatures: none;
    color: #55548c;
}
.legacy-stats .text-color.-mod {
    font-size: 1.167em;
    color: #8888ff;
}
.legacy-stats .text-color.-not {
    font-size: 1.167em;
    text-decoration: line-through;
    color: #7f7f7f;
}

/* ===== Template:SMQ query mods (from Module:SMW query) ===== */

.mod-table {
    width: 100%;
    margin: 0px !important;
}
.mod-table-header {
    width: 100%;
}
.mod-table-header .mw-collapsible-toggle {

}
.mod-table-header-container {
    display: table;
}
.mod-table-header-stat {
    display: table-cell;
    vector-effect: middle;
    text-align: left;
    width: 100%;
}
.mod-table-header-modgroup {
    display: table-cell;
    vector-effect: middle;
    text-align: right;
    padding-right: 1em;
}
.mod-table-cell-name {
    width: 9em;
    min-width: 9em;
    max-width: 9em;
}
.mod-table-cell-level {
    width: 1.4em;
    min-width: 1.4em;
    max-width: 1.4em;
}
.mod-table-cell-stat {
    width: 32em;
    min-width: 32em;
    max-width: 32em;
}
.mod-table-cell-tags {
    width: 100%;
}

/* ===== Generic table formatting ===== */
.table-yes > span {
  color: #0f0;
}

.table-no > span {
  color: #f00;
}

.table-cell-coloured {
    color: #000;
    text-align: left;
}
.table-cell-coloured a {
    color: #666;
}
.table-cell-coloured .reference a {
    margin-left: 2px;
}
.table-cell-yes {
    background-color: #080 !important;
}
.table-cell-major {
    background-color: #8C0 !important;
}
.table-cell-partial {
    background-color: #EE0 !important;
}
.table-cell-minor {
    background-color: #D80 !important;
}
.table-cell-no {
    background-color: #E00 !important;
}
.table-cell-unknown {
    background-color: #888 !important;
}

.table-cell-checkmark {
    color:lime; 
    text-align: center; 
    font-weight: bold;
}

.table-cell-xmark {
    color:red; 
    text-align: center; 
    font-weight: bold;
}

/* for table cells representing items*/

.table-cell-dex {
    color: rgb(0, 255, 0);
}
.table-cell-int {
    color: rgb(90, 90, 255);
}
.table-cell-str {
    color: rgb(255, 0, 0);
}
.table-cell-str {
    color: rgb(255, 0, 0);
}
.table-cell-prismatic {
    color: rgb(255, 255, 255);
}

/* Responsive tables */
.c-responsive-table {
    margin: 20px 0;
}
.c-responsive-table__toolbar {
    margin-bottom: 2px;
}
.c-responsive-table__toolbar-button {
    display: inline-block;
    margin-right: 0.4em;
    border: none;
    font-size: 12px;
    color: #7c8489;
    background: #27292a;
}
.c-responsive-table__toolbar-button:hover,
.c-responsive-table__toolbar-button:focus {
    color: #a5b2bb;
    text-shadow: none;
    background: #343738;
}
.c-responsive-table__toolbar-button svg {
    display: inline-block;
    margin-right: 0.2em;
    vertical-align: -.125em;
    width: 1em;
    height: 1em;
}
.c-responsive-table__scroll {
    display: block;
    overflow-y: auto;
    overflow-x: auto;
    max-width: fit-content;
    max-height: 50vh;
}
@media screen and (min-height: 600px) {
    .c-responsive-table__scroll {
        max-height: 25vh;
    }
}
.c-responsive-table.is-expanded .c-responsive-table__scroll {
    max-height: none !important;
    overflow-y: visible;
}
.c-responsive-table__table {
    margin: 0 !important;
}
.c-responsive-table__table tr:first-of-type th {
    position: sticky;
    top: 0px;
}
/* Needs to be set to -1px or a row of pixels is visible above the header on chrome */
html.browser-chrome .c-responsive-table__table tr:first-of-type th {
    top: -1px;
}

/* Pull quotes */
.pull-quote {
    display: table;
    margin: 1em auto;
    min-width: 25%;
}
.pull-quote > .quotation {
    margin: 0 auto;
    font-size: 1.15em;
    font-style: italic;
    color: #736551;
}
.pull-quote > .citation {
    margin: 0 auto;
    text-align: right;
    font-size: 0.85em;
    font-style: normal;
}
.pull-quote.-aligncenter > .quotation,
.pull-quote.-aligncenter > .citation {
    text-align: center;
}
.pull-quote > .citation > cite {
    font-style: inherit;
}
.pull-quote > .citation::before {
    content: "— ";
}
@media all and (min-width: 50em) {
    .pull-quote.-aligncenter > .quotation,
    .pull-quote.-aligncenter > .citation {
        width: 75%;
    }
    .pull-quote.-alignleft {
        float: left;
        margin: 0 1.75em 1em 0;
        border-right: 3px solid #51453d;
        padding-right: .75em;
    }
    .pull-quote.-alignright {
        float: right;
        margin: 0 0 1em 1.75em;
        border-left: 3px solid #51453d;
        padding-left: .75em;
    }
    .pull-quote.-alignleft,
    .pull-quote.-alignright {
        width: 33.3%;
    }
}
@media all and (min-width: 73em) {
    .pull-quote.-alignnone > .quotation,
    .pull-quote.-alignnone > .citation {
        width: 80%;
    }
    .pull-quote.-aligncenter > .quotation,
    .pull-quote.-aligncenter > .citation {
        width: 50%;
    }
    .pull-quote.-alignleft,
    .pull-quote.-alignright {
        width: 25%;
    }
}

/* Tooltip (Template:Tooltip) */
.tooltip-activator {
    position: relative;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: initial;
    cursor: help;
}
.tooltip-activator > .tooltip-content {
    box-sizing: border-box;
    position: absolute;
    display: block;
    visibility: hidden;
    opacity: 0;
    bottom: 100%;
    left: 50%;
    z-index: 1;
    margin-left: -150px;
    border: 1px solid #7f7f7f;
    padding: 8px 12px;
    width: 300px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    font-weight: normal;
    color: #7f7f7f;
    background-color: #000;
    transition: opacity 0.5s;
}
.tooltip-activator:hover > .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Mainpage Styles */
.page-Path_of_Exile_Wiki .firstHeading {
    display: none !important;
}
.mainpage-header {
    margin-bottom: 32px;
    text-align: center;
}
.mainpage-header h1 {
    margin-bottom: 20px;
    border: none;
    line-height: 1.1 !important;
    color: #ffaf46 !important;
    text-shadow: 0px 0px 10px rgba(209, 28, 0, 1);
}
.mainpage-header .h1-1,
.mainpage-header .h1-2 {
    background: radial-gradient(ellipse at center, rgba(154,2,0,0.9) 0%,rgba(154,2,0,0) 65%,rgba(154,2,0,0) 100%);
}
.mainpage-header .h1-1  {
    font-size: 26px;
    letter-spacing: 0.07em;
}
.mainpage-header .h1-2 {
    padding: 0 0.2em;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 0.01em;
}
.mainpage-version {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.mainpage-version > div {
    display: table-cell;
    vertical-align: middle;
}
.mainpage-version > div:first-child {
    width: 100%;
}
.mainpage-version > div:last-child {
    text-align: center;
}
.mainpage-news {
    margin: -12px -0.7em;
}
.mainpage-news > div {
    display: table;
    border-collapse: separate;
    border-spacing: 12px 0.7em;
}
.mainpage-news > div > div {
    display: table-row;
}
.mainpage-news .date,
.mainpage-news .title {
    display: table-cell;
    vertical-align: middle;
}
.mainpage-news .date > div {
    border-radius: 6px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 122%;
    line-height: 1.1;
    background-color: #332f24;
}
.mainpage-skills {
    width: 100%;
    text-align: center;
}
.mainpage-skills tr + tr td {
    padding-top: 12px;
}
.mainpage-equipment {
    width: 100%;
    text-align: center;
}
.mainpage-equipment tr + tr td {
    padding-top: 12px;
}
.mainpage-acts {
    width: 100%;
}
.mainpage-acts td {
    vertical-align: top;
}
.mainpage-mechanics {
    width: 100%;
}
.mainpage-mechanics td {
    vertical-align: top;
}

/* Helpers */
.u-truncate-line {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 
Atlas of Worlds 
Template:Atlas of Worlds
Widget:Atlas of Worlds
*/

.atlas_of_worlds {
  position: relative;
}

.atlas_of_worlds .atlas_table {
  display: none;
}

canvas#atlas_of_worlds {
  background-image: url('https://gamepedia.cursecdn.com/pathofexile_gamepedia/b/b8/Atlas_of_Worlds_background.jpg');
}

.atlas_of_worlds .region_button {
  position: absolute;
  width: max-content;
}

.atlas_of_worlds .map_container {
  position: absolute;
}

.atlas_of_worlds .map_name, .atlas_of_worlds .map_tier, .atlas_of_worlds .map_drop {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  text-align: center;
}

.atlas_of_worlds .map_name, .atlas_of_worlds .map_tier {
  font-weight: bold;
  position: absolute;
}

.atlas_of_worlds .map_name {
  top: -37px;
  width: 200px;
  left: -80px;
}

.atlas_of_worlds .map_tier {
  top: 18px;
  /* horizontal align works better with 38px instead of 39 */
  width: 38px;
}

.atlas_of_worlds .map_icon {
  background-image: url('https://gamepedia.cursecdn.com/pathofexile_gamepedia/9/98/Map_base_icon.png');
  background-size: cover;
  top: -18px;
  position:absolute;
}

.atlas_of_worlds .map_icon, .atlas_of_worlds .map_icon img {
  width: 39px;
  height: 39px;
}

.atlas_of_worlds .map_drop_container {
  width: max-content;
  height: max-content;
}

.atlas_of_worlds .map_drop img {
  display: block;
}

.atlas_of_worlds .map_drop {
  display: none;
  z-index: 2;
}

.atlas_of_worlds .map_container:hover .map_drop {
  display: block;
  position: relative;
  float: right;
  top: 38px;
  left: -50%;
}

.atlas_of_worlds .low_tier {
  color: rgb(255, 255, 255);
}

.atlas_of_worlds .mid_tier {
  color: rgb(255, 210, 100);
}

.atlas_of_worlds .high_tier {
  color: rgb(240, 30, 10);
}

.low_tier .map_icon img:not(.low_tier) {
  display: none;
}

.mid_tier .map_icon img:not(.mid_tier) {
  display: none;
}

.high_tier .map_icon img:not(.high_tier) {
  display: none;
}

/* 
Monster Javascript infobox styles

Template:Monster
Widget:Monster
*/

/*
Layout is nested in multiple tables

table.monster_container
- tr.monster (one each per monster)
-- table.monster_info_container
--- tr.monster_name 
--- tr.controls
---- table.controls
--- tr.monster_table
---- table.monster_table
--- tr.monster_stats
---- table.monster_stts
*/

table.monster_container {
  width: 800px !important;
  float: right;
}

tr.monster td {
  width: 800px;
}

.monster_info_container {
  border-collapse: collapse;
}

.monster_info_container > tbody > tr > td, .monster_info_container > tbody > tr > th {
  padding: 0px;
}

tr.monster_name {
  border: solid white 1px;
}

tr.monster_name th {
}


.monster_info_container table {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

.controls th {
  min-width: max-content; 
}

.controls td {
  width: 100%;
}

.controls input:not([type="checkbox"]), select {
  width: 100%;
}

/* 
Module:Minimap
*/

.minimap_icon {
  background-image: url(https://gamepedia.cursecdn.com/pathofexile_gamepedia/1/18/Minimap_icons.png);
  background-repeat: no-repeat;
  background-position: top left;
  display: inline-block;
}

.minimap_icon.minimap_grid {
  display: grid;
}

/* Used by both inline boxes and grid cells in the overall display */
.minimap_64 {
  width: 64px;
  height: 64px;
}

.minimap_32 {
  width: 32px;
  height: 32px;
}

.minimap_16 {
  width: 16px;
  height: 16px;
}

/* For the inline infoboxes */
.minimap_icon.minimap_64 {
  background-size: 896px auto;
}

.minimap_icon.minimap_32 {
  background-size: 448px auto;
}

.minimap_icon.minimap_16 {
  background-size: 224px auto;
}

.minimap_icon.tooltip-activator,.minimap_icon .tooltip-activator {
  border: none;
}
Retrieved from "https://www.poewiki.net/index.php?title=MediaWiki:Common.css&oldid=891410"