MediaWiki:Mobile.css

/**********************************************************************
 * from common.css
 **********************************************************************/


/* ========================================================================== */
/* mobile.css needs this part.       */
/* ========================================================================== */

/* common style */
a:visited {
    color: #0619aa;
}

.small {
    font-size: 85%;
}

.nowrap {
    white-space: nowrap;
}

/* "terraria" box style. */
.terraria{
    border: 1px #AFCFE2 solid;
    padding: 8px 12px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
}
.terraria > .heading,
.terraria > .mw-collapsible-content > .heading {
    background: #E4F0F7;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    min-height: 1em;
    margin: auto -4px;
    padding: 0;
    font-size: inherit;
    margin-top: 8px;
}
.terraria > .heading:first-child,
.terraria > .mw-collapsible-content > .heading:first-child,
.terraria > .heading:nth-of-type(1),
.terraria > .mw-collapsible-content > .heading:nth-of-type(1){
    margin-top: auto;
}
.terraria > .heading + *,
.terraria > .mw-collapsible-content > .heading + * {
    padding-top: 8px;
}

.terraria > .mw-collapsible-toggle {
    position: absolute;
    line-height: 1;
    right: 12px;
    top: 12px;
    font-size: 12px;
}
.terraria > .mw-collapsible-toggle > .mw-collapsible-bracket {
    display: none;
}
.terraria > .mw-collapsible-toggle:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
    position: relative;
    left: -3px;
    border-left: 2px solid #0645ad;
    border-top: 2px solid #0645ad;
    border-right: 0;
    border-bottom: 0;
    top: 1px;
}
.terraria > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
    border-left: 0;
    border-top: 0;
    border-right: 2px solid #0645ad;
    border-bottom: 2px solid #0645ad;
    top: -2px;
}

/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
    text-align: center;
}

/* pic box */
div.tright {
    margin: 0em 0 1em 1em;
}

/* clear fix for float block */
.clearfix {
    *zoom: 1;
}

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}


/* Hide page title on main page */
body.page-Terraria_Wiki h1.firstHeading {
    display: none;
}

/* Add diff accent to make even smaller changes visible */
.diffchange-inline {
    border: 1px #FF6666 dashed;
}

/* SoundManager2Button icon (It looks useless) */
a.sm2_button {
    background-color: #3399CC;
}

a.sm2_button:hover,
a.sm2_playing {
    background-color: #006A9F;
}

/* Recent changes reduce header spacing */
fieldset.rcoptions {
    margin-top: 0;
}

/* References smaller text than main */
.references {
    font-size: 90%;
}

/* Larger font for Module: code display (default is smaller than other code pages) */
pre.lua.source-lua {
    font-size: 14px !important;
}

/* Tweak vertical margins */
#content h1,
#content h2 {
    margin-top: 0.7em !important;
}

#content h1#firstHeading {
    margin-top: 0 !important;
}

#contentSub {
    margin-bottom: 0.5em !important;
}

#content h3 {
    padding-top: 0.4em !important;
}

#content p {
    margin-top: 0.25em !important;
}

table.terraria {
    margin-top: 0.4em !important;
}

#toc {
    margin-top: 10px !important;
}





/* Allows limiting TOCs to generate links for only header levels below a limit, for instance only level-3 (=== ===) and below. Use [[Template:Toc limit]] */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
    display: none !important;
}





/* Tables */
table {
    font-size: 100%;
    color: #000000;
    /* we don't want the bottom borders of <h2>s to be visible through
    * floated tables */
    background-color: #FCFCFC;
    /* fix 100% width table with border */
    box-sizing: border-box;
}

.mw-specialpages-table {
    margin-bottom: 0;
    margin-top: 0;
}


/* "terraria"-classed tables */
table.terraria {
    /* border style is defined in common .terraria */
    margin: 0.5em 0.5em 0.5em 0;
    padding: 2px;
}

.terraria th,
.terraria td {
    padding: 3px;
}

.terraria th {
    background: #E4F0F7;
    text-align: center;
}

.terraria caption {
    font-weight: bold;
    background: #E4F0F7;
    padding: 5px;
    margin: auto 2px;
}

.terraria > caption {
    padding: 3px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    margin: 1px 1px -4px;
    border: 4px solid #F9F9F9;
    border-bottom-width: 1px;
    box-shadow: 0 0 0 1px #AFCFE2;
    position: relative;
}

.terraria > caption:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #F9F9F9;
    position: absolute;
    left: -4px;
    bottom: -2px;
    border-left: 4px solid #f9f9f9;
    border-right: 4px solid #f9f9f9;
}




/* Auto line separators for tables */
table.lined td {
    border-bottom: 1px #AFCFE2 solid;
}

table.lined tr:last-of-type td {
    border-bottom: 0;
}

table tr.bottomline td {
    border-bottom: 1px #AFCFE2 solid;
}

table tr.topline td {
    border-top: 1px #AFCFE2 solid;
}


/* Hack for using "border-collapse" and "border-radius" in the same table display by using one table nested within another */
table.outer {
    white-space: nowrap;
}

table.inner {
    border-collapse: collapse;
    background: inherit;
    width: 100%;
}

table.inner th {
    border: 2px solid #FCFCFC;
}

/* Other "plaincollapse" styling */

/* Removes brackets from collapse/expand links for collapsible elements with "plaincollapse" class specified*/
.plaincollapse .mw-collapsible-toggle {
    color: rgba(0, 0, 0, 0.0);
}

.plaincollapse .mw-collapsible-toggle a,
.plaincollapse .mw-collapsible-toggle a:link,
.plaincollapse .mw-collapsible-toggle a:visited,
.plaincollapse .mw-collapsible-toggle a:hover {
    font-weight: bold;
    color: #11688F;
}

/* Offset linked anchors */
.anchor {
    display: block;
    height: 0;
    position: relative;
    top: -100px;
    z-index: -9999;
    visibility: hidden;
}

/* banner box */
.notice-banner {
    text-align: center;
    margin: 3px auto 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
.notice-banner > div {
    border: 1px solid #AFCFE2;
    background: #E4F0F7;
    color: #063B5E;
    padding: 6px 2em;
    margin: auto;
}

@media(max-width: 600px) {
    .notice-banner > div {
        padding: 6px;
    }
}





/* multi-column list */

/* correct webkit/chrome uneven margin on the first column*/
.responsive-columns ul,
.responsive-columns ol {
    margin-top: 0px;
}

.responsive-columns ul li:first-child,
.responsive-columns ol li:first-child {
    margin-top: 0px;
}



/* Ambox styles */
.ambox {
    background-color: #eeeeee;
    border-bottom-color: #383838;
    border-right-color: #383838;
    border-top-color: #383838;
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto;
}

.ambox + .ambox {
    margin-top: -2px;
}

.ambox-text {
    padding: 0.25em 0.5em;
}

.ambox-image {
    padding: 2px 0px 2px 0.5em;
    text-align: center;
    width: 60px;
}

.ambox-tiny .ambox-image {
    padding: 2px 0.5em;
    text-align: left;
    width: auto;
}


/* Ambox colors */
.ambox-blue {
    border-left: 10px solid #1e90ff;
}

.ambox-red {
    border-left: 10px solid #b22222;
}

.ambox-orange {
    border-left: 10px solid #f28500;
}

.ambox-yellow {
    border-left: 10px solid #f4c430;
}

.ambox-purple {
    border-left: 10px solid #9932cc;
}

.ambox-gray {
    border-left: 10px solid #bbbbaa;
}

.ambox-green {
    border-left: 10px solid #228b22;
}


/* Ambox small text */
.amsmalltext {
    font-size: smaller;
    margin-left: 0.8em;
    margin-top: 0.5em;
}


/* ------------------------------------------------------------------ */


/* ================================================================== */
/* Template-related styles */
/* ================================================================== */


/* ------------------------------------------------------------------ */



.feature,
.documentation {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
}

.documentation_header {
    padding-bottom: 3px;
    border-bottom: 1px solid #AAAAAA;
}



/* For Template:Heading, mainly used in main page. */
div.heading {
    background: #E4F0F7;
    padding: 5px;
    margin-bottom: 0.5em;
    font-weight: bold;
    text-align: center;
    color: #033251;
    font-size: 120%;
}

div.heading > span.rightimg {
    float: right;
}


/* For Template:achievement */
div.achievement a.mw-selflink{
    font-weight: inherit;
}


/* For Template:main */
div.main-article {
    padding: 0.5em 0 1em 1.5em;
    color: #666;
}



/* For Template:Key */
div.key {
    pointer-events: none;
}

div.key span {
    cursor: pointer;
    white-space: nowrap;
    pointer-events: all;
}

div.key a:-webkit-any-link {
    text-decoration: none;
}


/* For Template:Quotation*/
blockquote.quotation{
   position: relative;
   font-style: italic;
   padding: 0em 1em;
   margin: 1em auto;
   overflow: hidden;
}
blockquote.quotation:before{
   content: "“";
   display: block;
   font: bold 5em Times New Roman, Times, Georgie, serif;
   line-height: 0.8;
   color: silver;
   position: absolute;
   left: 0.2em;
   top: 0;
}
blockquote.quotation > div{
   padding: 0.25em 0 0 1em;
   margin-left: 3em;
   border-left: 1px solid silver;
}
blockquote.quotation > div > p:last-child{
   text-align: right;
   font-size: 0.9em;
   margin: 0;
}
@media(max-width: 550px){
   blockquote.quotation{
      clear: both;
   }
}


/* .eicons  Template:eicons, Template:item */
.eico {
    white-space: nowrap;
    position: relative;
    top: -0.1em;
    line-height: 1;
}



/* template:eil */
.eil {
    white-space: nowrap;
}

.eil .eico {
    margin-left: 3px;
}



/* note text, Template:note, Template:item, etc. */
.note-text {
    color: #666;
}



/* Expert */
.expert {
    color: #9B5700;
    cursor: pointer;
    font-weight: bold;
}




/* -- item link ----------------------------------------------------- */
.item-link {
    white-space: nowrap;
    display: inline-block;
}

.item-link > a,
.item-link > img {
    display: inline-block;
    line-height: 0.1;
    vertical-align: middle;
    margin-left: 2px;
}

.item-link > span {
    display: inline-block;
    margin-left: 3px;
    text-align: left;
}

.item-link > a:first-child,
.item-link > img:first-child,
.item-link > span:first-child {
    margin-left: auto;
}
.item-link.multi-line > span,
.item-link.-w > span {
    line-height: 1.25;
    vertical-align: middle;
}

.item-link > span > .eico {
    font-size: 0.75em;
    vertical-align: middle;
}

.item-link .note {
    color: #666;
    font-size: 85.7142%;
    /*12px/14px*/
}

.item-link > span > div.note {
    /*note2*/
    font-size: 100%;
    line-height: 1;
}

.item-link > span > .eico,
.item-link > span > span.note {
    margin-left: 3px;
}

.item-link.-w > span > .eico:last-child,
.item-link.-w > span > span.note:last-child {
    display: block;
    margin-left: auto;
}

.item-link.-w > span > span.note:last-child {
    line-height: 1;
}

.item-link .id {
    font-size: 71.4285%;
    /*10px/14px*/
    background-color: #E4F0F7;
    font-weight: bold;
    margin-top: 1px;
    padding: 0 2px;
}

.item-link.boldname > span span:first-child {
    font-weight: bold;
}

.item-link.notecolor span.note {
    color: inherit;
}

.item-link.note2color div.note {
    color: inherit;
}

.item-link.block,
.item-link.block > span:first-child,
.item-link.allblock,
.item-link.allblock > * {
    display: block;
}

.item-link.allblock > * {
    text-align: inherit;
}

.item-link.notesize span.note {
    font-size: 100%;
}

.item-link.note2size div.note {
    font-size: 85.7142%;
    /*12px/14px*/
}

.item-link.alignleft {
    text-align: left;
}

.item-link.aligncenter {
    text-align: center;
}

.item-link.alignright {
    text-align: right;
}

.item-link.textleft > span {
    text-align: left;
}

.item-link.textcenter > span {
    text-align: center;
}

.item-link.textright > span {
    text-align: right;
}


/* -- crafts table -------------------------------------------------- */
div.crafts {
    margin-bottom: 4px;
    line-height: 1.5;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

div.crafts .wrap {
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 6px 6px 2px;
    position: relative;
}

div.crafts .wrap::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    background: #fcfcfc;
    position: absolute;
    bottom: 2px;
    left: 6px;
    right: 6px;
}

div.crafts caption {
    font-size: 1.17em;
    background: #E4F0F7;
    padding: 0.25em;
    position: relative;
    margin-bottom: 2px;
    font-weight: bold;
}

div.crafts caption div._nav {
    position: absolute;
    left: 1em;
    top: 0.5em;
    font-size: 10px;
    font-weight: normal;
}

div.crafts caption div._nav s {
    text-decoration: none;
}

div.crafts th {
    background: #E4F0F7;
    padding: 0.25em 0.5em;
    border-right: 1px solid #f9f9f9;
    border-left: 1px solid #f9f9f9;
}

div.crafts th:first-child {
    border-left: 0;
}

div.crafts th:last-child {
    border-right: 0;
}

div.crafts td {
    padding: 0.25em 0.5em;
    border-bottom: 1px solid #ccc;
}

div.crafts td.station {
    border-left: 1px solid #ccc;
}

div.crafts.nostation th.station,
div.crafts.nostation td.station {
    display: none;
}

div.crafts table ul {
    margin: 0;
    list-style: none;
}

div.crafts table li {
    margin: 3px auto;
}




/* multi-column list */
.mclist > ul {
    list-style: none;
    margin-left: 0;
}




/* itemlist */
.itemlist > ul {
    list-style: none;
    margin: 0 0.25em -0.25em 0;
}

.itemlist > ul > li {
    width: 10em;
    /* default width */
    margin: auto 1em 0.5em auto;
    display: inline-block;
}




/* dot list */
.dotlist {
    margin: auto;
}

.dotlist > .title {
    font-weight: bold;
}

.dotlist.nobold > .title {
    font-weight: normal;
}

.dotlist > .title::after {
    content: " ";
}

.dotlist > ul {
    display: inline;
    list-style: none;
    margin: auto; /* please don't delete this line, we need it to remove default ul margin setting. */
}

.dotlist > ul > li {
    display: inline;
}

.dotlist > ul > li::after {
    content: " • ";
}

.dotlist > ul > li:last-child::after {
    display: none;
}

.dotlist.l > .title {
    margin-right: 5px;
}

.dotlist.l > ul > li::after {
    margin-left: 3px;
    margin-right: 3px;
}

.dotlist.xl > .title {
    margin-right: 10px;
}

.dotlist.xl > ul > li::after {
    margin-left: 6px;
    margin-right: 6px;
}

.dotlist.xxl > .title {
    margin-right: 15px;
}

.dotlist.xxl > ul > li::after {
    margin-left: 9px;
    margin-right: 9px;
}

.dotlist.xxxl > .title {
    margin-right: 20px;
}

.dotlist.xxxl > ul > li::after {
    margin-left: 12px;
    margin-right: 12px;
}

.dotlist.xxxxl > .title {
    margin-right: 25px;
}

.dotlist.xxxxl > ul > li::after {
    margin-left: 15px;
    margin-right: 15px;
}



/* navbox */
.navbox {
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 6px;
    margin: 0.5em auto;
    width: 100%;
    max-width: 1800px;
    box-sizing: border-box;
    position: relative;
    clear: both;
    line-height: 1.5;
}

.navbox > .header {
    background: #E4F0F7;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    padding: 4px 70px;
    min-height: 1em;
}

.navbox > .vde {
    position: absolute;
    left: 12px;
    top: 10px;
    font-size: 9px;
    line-height: 1;
    color: #999;
}

.navbox > .mw-collapsible-toggle {
    position: absolute;
    line-height: 1;
    right: 10px;
    top: 10px;
    font-size: 12px;
}

.navbox > .mw-collapsible-toggle > .mw-collapsible-bracket {
    display: none;
}

.navbox > .mw-collapsible-toggle:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
    position: relative;
    left: -3px;
    border-left: 2px solid #0645ad;
    border-top: 2px solid #0645ad;
    border-right: 0;
    border-bottom: 0;
    top: 1px;
}

.navbox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
    border-left: 0;
    border-top: 0;
    border-right: 2px solid #0645ad;
    border-bottom: 2px solid #0645ad;
    top: -2px;
}

.navbox > .content {
    padding-top: 6px;
    text-align: center;
}

.navbox > .content .dotlist + .dotlist {
    margin-top: 0.5em;
}


/* nested navbox */
.navbox .navbox {
    border: 0;
    padding: 0;
    width: auto;
    margin: 0 0 6px;
}

.navbox .navbox:last-child {
    margin: 0;
}

.navbox .navbox > .header {
    font-size: 14px;
    padding: 0px 64px;
}

.navbox .navbox > .vde {
    left: 6px;
    top: 4px;
}

.navbox .navbox > .mw-collapsible-toggle {
    right: 4px;
    top: 4px;
    font-size: 10px;
}

.navbox .navbox > .mw-collapsible-toggle:before {
    width: 3px;
    height: 3px;
    border-left: 1px solid #0645ad;
    border-top: 1px solid #0645ad;
    border-right: 0;
    border-bottom: 0;
    top: 1px;
}

.navbox .navbox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #0645ad;
    border-bottom: 1px solid #0645ad;
    top: -1px;
}

.navbox .h1 {
    font-weight: bold;
    margin-top: 0.75em;
    margin-bottom: 0.25em;
    line-height: 1.5;
}

.navbox .h1::after {
    content: '';
    display: block;
    margin: auto;
    width: 5em;
    height: 0;
    border-bottom: 2px solid #ccc;
}

.navbox .h1:first-child {
    margin-top: auto;
}

.navbox .h2 {
    font-weight: bold;
    line-height: 1.5;
    margin-top: 0.25em;
    font-size: 12px;
}

.navbox .h1 + .h2 {
    margin-top: 0.5em;
}

.navbox .h3 {
    font-size: 10px;
    font-weight: bold;
    line-height: 1.5;
}

.navbox h2 + .h3 {
    margin-top: 0.5em;
}


/* ------------------------------------------------------------------ */
/* -- Infobox & infobox wrapper template style ---------------------- */
/* --------  some rules just kept for "old" template.  -------------- */
.infobox td,
.infobox th {
    vertical-align: top;
}

.infobox caption {
    font-size: larger;
    margin-left: inherit;
}

.infobox.bordered {
    border-collapse: collapse;
}

.infobox.bordered td,
.infobox.bordered th {
    border: 1px #AAA solid;
}

.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}


/* styles for latest template */
.infobox {
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 6px;
    float: right;
    font-size: 12px;
    background-color: #f9f9f9;
    margin: 0 0 0.5em 1em;
}

@media(max-width:450px) {
    .infobox {
        float: none;
    }
}

.infobox.float-right {
    float: right;
    margin: 0 0 0.5em 1em;
}

.infobox.float-left {
    float: left;
    margin: 0 1em 0.5em 0;
}

.infobox.float-none {
    float: none;
    margin: 0 1em 0.5em 0;
}

.infobox table {
    background-color: transparent;
    width: 100%;
    border-spacing: 0;
}

.infobox table th {
    white-space: nowrap;
    padding: 2px;
    text-align: right;
    border-right: 1px solid #f9f9f9;
    width: 5em;
    vertical-align: middle;
}

.infobox table td {
    padding: 2px;
    vertical-align: middle;
}

.infobox .title {
    background-color: #E4F0F7;
    color: #063B5E;
    font-weight: bold;
    text-align: center;
    padding: 2px 0;
}

.infobox > .title {
    font-size: 15px;
    padding: 6px 3px;
    line-height: 1.2;
}

.infobox > .title > span {
    display: block;
    font-size: 12px;
    color: slategray;
    font-style: italic;
}

.infobox > .title > span::before {
    content: "(";
    font-style: normal;
}

.infobox > .title > span::after {
    content: ")";
    font-style: normal;
}

.infobox .content-section {
    padding: 6px 3px;
}

.infobox .variant {
    background-color: #E4F0F7;
    color: #063B5E;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    padding: 4px 0;
    line-height: 1.2;
}

.infobox .images {
    position: relative;
    padding: 6px 0;
    min-height: 40px;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    /* direction=column, for IE11 */
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.infobox .images > img {
    margin-top: 0.5em;
}

.infobox ul {
    list-style: none;
    margin: auto;
    text-align: center;
}

.infobox .statistics .title {
    margin-bottom: 6px;
}
.infobox .statistics table th,
.infobox .statistics table td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.infobox .stat td > small {
    font-size: 10.5px;
    font-weight: bold;
}

.infobox .stat td > small::before {
    content: "(";
}

.infobox .stat td > small::after {
    content: ")";
}

.infobox tr.buff th,
.infobox tr.buff td {
    background-color: #E4F0F7;
    border: 1px solid #f9f9f9;
}

.infobox tr.buff th {
    border-left: 0;
}

.infobox tr.buff td {
    border-right: 0;
    padding-left: 3px;
}

.infobox tr.buff td b {
    font-weight: bold;
    white-space: nowrap;
}

.infobox .section.ids {
    margin-top: 3px;
    border-top: 1px solid #aaa;
    text-align: center;
    font-size: 10.5px;
    background-color: #E4F0F7;
    color: #063B5E;
}

.infobox .section.ids li {
    padding: 2px 0;
    border-bottom: 2px solid #f9f9f9;
    margin: 0;
    font-weight: bold;
}

.infobox .section.ids li:last-child {
    border-bottom: 0;
}

.infobox .variant {
    margin-bottom: 2px;
}

.infobox .drops td:first-child {
    text-align: left;
}

.infobox .drops td:last-child {
    text-align: right;
}

.infobox .drops th:first-child {
    text-align: left;
    border-right: 0;
}

.infobox .section.drops {
    margin-top: 6px;
    margin-bottom: 6px;
}

.infobox .drops.money {
    margin: 2px auto;
}

.infobox .drops.money table th {
    width: 1px;
}

.infobox .imageother {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #aaa;
}

.infobox .drops.items {
    margin-bottom: 1px;
}

.infobox .drops.items li {
    border-bottom: 1px #AFCFE2 solid;
    padding: 3px 0;
    margin-bottom: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.infobox .drops.items li:first-child {
    background-color: #E4F0F7;
    color: #063B5E;
    padding: 2px 3px 0;
}

.infobox .drops.items li > div {
    display: block;
}

.infobox .drops.items li > div:first-child {
    text-align: left;
}

.infobox .drops.items li > div:last-child {
    text-align: right;
}

.infobox .drops.items li.caption {
    border-top: 2px #AFCFE2 solid;
    margin-top: 2px;
    line-height: 1;
    text-align: center;
    color: #063B5E;
    font-size: 10.5px;
    background: #f0f7fb;
    padding-top: 5px;
    display: block;
}
.infobox .drops.items li.caption.group_end {
    padding-bottom: 5px;
}

.infobox .drops.items li.group_end {
    border-bottom: 5px #AFCFE2 solid;
    position: relative;
}

.infobox .drops.items li.group_end::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: #f9f9f9;
}


/* for item infobox */
.item.infobox {
    width: 21em;
}

.item.infobox .images .auto,
.infobox.item .images .stack {
    position: absolute;
    right: 3px;
}

.item.infobox .images .auto {
    top: 3px;
}

.item.infobox .images .stack {
    bottom: 3px;
}

.item.infobox .images ul.inline li {
    display: inline-block;
    padding: 0 8px 0 9px;
    margin: 2px auto;
    position: relative;
}

.item.infobox .images ul.inline li::before {
    content: "";
    display: block;
    width: 1px;
    background: #ccc;
    height: 80%;
    position: absolute;
    left: 0;
    top: 10%;
}

.item.infobox .images ul.inline li:first-child::before {
    display: none;
}

.item.infobox .images ul.block li {
    display: block;
    padding: 13px 0 0 0;
    margin: auto;
    position: relative;
}

.item.infobox .images ul.block li::before {
    content: "";
    display: block;
    height: 1px;
    background: #ccc;
    width: 80%;
    position: absolute;
    left: 10%;
    top: 6px;
}

.item.infobox .images ul.block li:first-child {
    padding-top: 0;
}

.item.infobox .images ul.block li:first-child::before {
    display: none;
}

.item.infobox ul.toolpower {
    padding: 6px 0;
    cursor: pointer;
}

.item.infobox ul.toolpower li {
    display: inline-block;
    padding: 0 0.5em;
}


/* for npc infobox */
.npc.infobox {
    width: 23em;
}
.npc.infobox .statistics table th {
    width: 6em;
}

/* infobox wrapper */
.infobox-wrapper.float-right {
    float: right;
    margin-left: 0.5em;
}

.infobox-wrapper.float-left {
    float: left;
    margin-right: 0.5em;
}

.infobox-wrapper.float-none {
    float: none;
}

@media(max-width:450px) {
    .infobox-wrapper.float-right {
        float: none;
        margin-left: auto;
    }

    .infobox-wrapper.float-left {
        float: none;
        margin-right: auto;
    }
}

.infobox-wrapper.float-right.direction-row .infobox,
.infobox-wrapper.float-right.direction-row-reverse .infobox,
.infobox-wrapper.float-right.direction-row .infobox.float-left,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-right.direction-row .infobox.float-right,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-right,
.infobox-wrapper.float-right.direction-row .infobox.float-none,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-none {
    float: none;
    margin: 0 0 0.5em 0.5em;
}

.infobox-wrapper.float-left.direction-row .infobox,
.infobox-wrapper.float-left.direction-row-reverse .infobox,
.infobox-wrapper.float-left.direction-row .infobox.float-left,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-left.direction-row .infobox.float-none,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-none,
.infobox-wrapper.float-left.direction-row .infobox.float-right,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-right,
.infobox-wrapper.float-none.direction-row .infobox,
.infobox-wrapper.float-none.direction-row-reverse .infobox,
.infobox-wrapper.float-none.direction-row .infobox.float-left,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-none.direction-row .infobox.float-none,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-none,
.infobox-wrapper.float-none.direction-row .infobox.float-right,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-right {
    float: none;
    margin: 0 0.5em 0.5em 0;
}

.infobox-wrapper.float-left.direction-column .infobox,
.infobox-wrapper.float-left.direction-column-reverse .infobox,
.infobox-wrapper.float-left.direction-column .infobox.float-left,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-left.direction-column .infobox.float-none,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-none,
.infobox-wrapper.float-left.direction-column .infobox.float-right,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-right {
    float: left;
    margin: 0 0.5em 0.5em 0;
}

.infobox-wrapper.float-none.direction-column .infobox,
.infobox-wrapper.float-none.direction-column-reverse .infobox,
.infobox-wrapper.float-none.direction-column .infobox.float-right,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-right {
    float: right;
    margin: 0 0 0.5em 0.5em;
}

.infobox-wrapper.float-none.direction-column .infobox.float-left,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-none.direction-column .infobox.float-none,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-none {
    float: left;
    margin: 0 0.5em 0.5em 0;
}

.infobox-wrapper.float-right.direction-column .infobox,
.infobox-wrapper.float-right.direction-column-reverse .infobox,
.infobox-wrapper.float-right.direction-column .infobox.float-left,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-right.direction-column .infobox.float-none,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-none,
.infobox-wrapper.float-right.direction-column .infobox.float-right,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-right {
    float: right;
    margin: 0 0 0.5em 0.5em;
}


/* ------------------------------------------------------------------ */
/* ======================== Extensions ===============================*/
/* -- This is the style for the tabs of the tabber extension. ------- */
body ul.tabbernav li a,
body ul.tabbernav li a:link,
body ul.tabbernav li a:visited,
body ul.tabbernav li a:hover {
    border-radius: .5em .5em 0 0;
}

/* -- Removes redundant Cargo extension "Purge cache" link ---------- */
div.menu li#ca-cargo-purge {
    display: none;
}

/* -- Maximum image size for NPC images storing in Cargo table ------ */
.npcimg img{
    height: auto;
    width: auto;
    max-height: 100px;
    max-width: 100px;
}


/* ========================================================================== */
/* === New flex mainpage styles ============================================= */
/* ========================================================================== */
#mainpage-global-wrapper {
    min-width: 300px;
    background: #fcfcfc;
}

#mf-wikiheader {
    color: #033251;
    background: #fff;
    border: 7px solid #E4F0F7;
    margin: 1px 3px 5px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #AFCFE2;
    position: relative;
    padding: 5px;
    /* this value shouldn't be greater then "right" and/or "top" of #mf-wikiheader-toggle-link */
}

#mf-wikiheader * {
    transition: all 0.3s;
}

#mf-wikiheader-toggle-link {
    position: absolute;
    z-index: 50;
    line-height: 1;
    right: 5px;
    top: 5px;
    cursor: pointer;
    font-size: 10px;
    display: none;
}

#mf-wikiheader-toggle-link span:first-child::before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
    position: relative;
    left: -3px;
    border-left: 0;
    border-top: 0;
    border-right: 2px solid #0645ad;
    border-bottom: 2px solid #0645ad;
    top: -2px;
}

#mf-wikiheader-toggle-link span:last-child::before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
    position: relative;
    left: -3px;
    border-left: 2px solid #0645ad;
    border-top: 2px solid #0645ad;
    border-right: 0;
    border-bottom: 0;
    top: 1px;
}

#mf-wikiheader-toggle-link span:first-child {
    display: none;
}

#mf-wikiheader .main-title {
    text-align: center;
    position: relative;
    z-index: 10;
    padding-bottom: 8px;
}

#mf-wikiheader .related-info {
    position: relative;
    z-index: 100;
    background: #fff;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 12px;
}

#mf-wikiheader .related-info .i {
    margin: 0.25em 1em 1em;
    text-align: center;
}

#mf-wikiheader .related-info .i:first-child {
    margin-bottom: 0;
}

#latest-version {
    line-height: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
}

#latest-version * {
    vertical-align: middle;
}

#latest-version a:hover {
    text-decoration: none;
}

#latest-version a.external {
    padding: 0;
    background: none;
    color: #0645ad;
}

#latest-version ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
}

#latest-version ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    margin: 0.25em 0.5em;
}

#latest-version ul li > div {
    margin: auto auto auto 0.25em;
    text-align: left;
}

#latest-version ul li > div > * {
    display: block;
}

#latest-version ul li > div.pic > * {
    display: inline;
}

#latest-version ul li > div > span {
    font-size: 10px;
}

#latest-version ul li > div > strong {
    font-size: 16px;
}

#latest-version ul li > div > small {
    font-size: 10px;
    color: #999;
}

#latest-version div.pic {
    text-align: center;
}

#mf-wikiheader.collapsed #mf-wikiheader-toggle-link span:first-child {
    display: inline;
}

#mf-wikiheader.collapsed #mf-wikiheader-toggle-link span:last-child {
    display: none;
}

#mf-wikiheader.collapsed .related-info {
    display: none !important;
}

#mf-wikiheader.collapsed .main-title .statistics {
    display: none;
}

@media(max-width: 600px) {
    #mf-wikiheader {
        padding: 15px;
    }
}

.fp-box {
    border: 1px solid #AFCFE2;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 7px;
    box-sizing: border-box;
    margin: 0 2px 4px;
}

.fake-bullet {
    padding: 1px 0;
    white-space: nowrap;
}

.fake-bullet::before {
    content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%2300528c%22%2F%3E%0A%3C%2Fsvg%3E%0A);
    padding-right: 5px;
}

#mainpage-global-wrapper .footer {
    text-align: center;
    margin: 0.5em 2px;
}

#mainpage-global-wrapper .footer > div {
    border: 1px solid #AFCFE2;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #E4F0F7;
    padding: 0.5em;
    max-width: 25em;
    margin: auto;
}


/* ========================================================================== */
/* === New flex mainpage styles end ========================================= */
/* ========================================================================== */



/* Geshi syntax highlighting */
.mw-highlight,
.mw-highlight pre {background: #282828 !important;}

.kw1 {color: #FFFFFF; font-weight: bold;}
.nf {color: aqua;}

/* Operators */
.mw-highlight .p,
.mw-highlight .o {color: #fff; font-weight: bold;}

/* Comments */
.mw-highlight .c {color: #8d9e6b; font-weight: bold;}

/* HTML Tags */
.mw-highlight .nt {color: #bfe431;}

/* IDs */
.mw-highlight .nn {color: #a8a8ff;}

/* Classes */
.mw-highlight .nc {color: #7676ff;}

/* Pseudo-classes */
.mw-highlight .nd {color: #cf82ff;}

/* Properties */
.mw-highlight .k, 
.mw-highlight .kp {color: #fff; font-weight: normal;}

/* Keywords */
.mw-highlight .nb {color: #ff5858;}

/* Text values, strings */
.mw-highlight .kc,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sx,
.mw-highlight .n {color: #00c6d2;}

/* Numeric values */
.mw-highlight .mi,
.mw-highlight .mf {color: #60feff; font-weight: bold;}

/* Units */
.mw-highlight .kt {color: #ff3f85; font-weight: bold;}

/* #Color values */
.mw-highlight .mh {color: #b2d241;}

/* !important */
.mw-highlight .cp {color: #F37F20;}

/* JS generic */
.mw-highlight .nx {color: #a8a8ff;}


/* curse video */
div.embedvideo.ev_right{
   margin-left: 1em;
}
div.embedvideo.ev_left{
   margin-right: 1em;
}
@media(max-width: 800px){
   div.embedvideo.ev_right{
      margin-left: auto;
   }
   div.embedvideo.ev_left{
      margin-right: auto;
   }
   div.embedvideo.ev_right,
   div.embedvideo.ev_left{
      float: none;
      text-align: center;
   }
   div.embedvideo.ev_right .embedvideowrap,
   div.embedvideo.ev_left .embedvideowrap{
      margin: auto;
   }
}



/**********************************************************************
 * Mobile.css Only
 **********************************************************************/
body {
   background-color: #012034;
   color: #000000;
}
#content_wrapper {
   background: #FCFCFC;
   color: #000000;
   border: 0px solid #bd912f;
   clear: both;
   margin: 0 8px;
}
h2 {
   border-bottom: 0px solid #AAAAAA;
}
.thumb {
   background: none repeat scroll 0 0 #FCFCFC;
   border: 1px solid #aaaaaa;
   margin-bottom: 10px;
}
table[style] {
   float: none !important;
   margin-left: 0 !important;
   width: 100%;
}
table {
   border: 0px solid #CCCCCC;
   border-collapse: collapse !important;
   border-spacing: 0 !important;
   margin: auto;
   margin-bottom: 15px;
   padding: 3px;
}

table td, table th {
   border: 0px solid #CCCCCC;
   padding: 3px;
}

table.infobox {
   background: none repeat scroll 0 0 #f9f9f9;
   border: 1px solid #aaaaaa;
   width: 21em !important;
   margin: auto;
}

/* fix table error in infobox. override rules in /extensions/MobileFrontend/resources/skins.minerva.content.styles/tables.less */
.infobox table,
table.infobox{
   display: table;
   border-collapse: separate !important;
   margin: auto;
}

/* for New flex mainpage styles */
#mainpage-global-wrapper {
   /*NOTE: We NEED -14px left & right margin to get enough space for "enemies" and "biomes" block to show as 2-col on iphone7+ (414px width).*/
   margin: auto -14px; 
}