MediaWiki:Common.css

From Calamity Mod Wiki
Jump to navigation Jump to search

CSS and Javascript changes must comply with the wiki design rules.

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Clear the cache in Tools → Preferences
/* CSS placed here will be applied to all skins */

@import url(https://calamitymod.wiki.gg/index.php?title=MediaWiki:Lernaean.css&action=raw&ctype=text/css);

.skin-vector {
	--template-background-color-1: #515151;
	--template-background-color-2: var(--theme-page-background-color);
	--template-background-color-3: #333;
	--template-heading-background-color-1: #373D40;
	--template-heading-background-color-2: #282828;
	--template-heading-text-color-1: #FFF;
	--template-accent-color:#8b221b;
	--note-color:#FFF;
	--theme-page-background-color: #202020;
	--theme-page-background-color--secondary: #414141;
	--theme-page-text-color: #E6E6E6;
	--theme-link-color: #5A93CC;
	--theme-border-color: #525252;
	--theme-page-redlink: #DD001A;
	--theme-page-green: #0D8134;
	--theme-diff-text: #FFF;
	--custom-template-journey-color: #E00B8F;
	
	/*** vars, for infocard ***/
	--theme-widget-shadow: 0px 0px 15px 0px rgba(10,10,10, 0.7);
	--theme-widget-border-color: rgba(255,255,255, 0.1) rgba(13, 4, 2, 0.2) rgba(13, 4, 2, 0.2) rgba(255,255,255, 0.1);
	--theme-box-border-color: #AAA;
	--theme-box-background: rgba(51,51,51,0.6);
}

#contentSub:empty {
    margin: 0 !important;
}

table.jquery-tablesorter th.headerSort {
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

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

/* DPL Tables */
#dpl-table {
        text-align: center;
}
#dpl-table td:first-child {
        text-align: left;
}
#dpl-table td:last-child {
        text-align: right;
}
#dpl-table th {
        line-height: 1.25;
}


/* ========================================================================== */
/* === New flex mainpage styles ============================================= */
/* ========================================================================== */
#mainpage-global-wrapper {
    min-width: 300px;
	background: var(--theme-page-background-color);
}

#mf-wikiheader {
	color:var(--theme-page-text-color);
	background: var(--theme-page-background-color);
	border: 7px solid var(--template-accent-color);
    margin: 1px 3px 5px;
    border-radius: 5px;
	box-shadow: 0 0 0 1px var(--template-accent-color);
    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: #202020;
    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 var(--template-accent-color);
    -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 var(--template-accent-color);
    -moz-border-radius: 5px;
    border-radius: 5px;
	background: var(--theme-page-background-color);
    padding: 0.5em;
    max-width: 25em;
    margin: auto;
}


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


/* For Template:Heading, mainly used in main page. */
div.heading {
    padding: 5px;
    margin-bottom: 0.5em;
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    position: relative;
	color:var(--theme-page-text-color);
	background:var(--template-heading-background-color-2);
}

div.heading > span.rightimg {
    position: absolute;
    right: 5px;
    top: 5px;
}

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

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

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

/* {{diagram}} */
table.diagram{
	border-spacing: 0;
	background: transparent;
}
table.diagram tr{
	height: 1px;
	text-align: center;
}
table.diagram td.l{
	border-style: none;
	border-width: 1px;
	border-color: #a0a0a0;	
	padding: 0.5em;
}
table.diagram td.n{
	padding: 0;
}
table.diagram td.db{
	border-bottom-style: dashed;
}
table.diagram td.dr{
	border-right-style: dashed;
}
table.diagram td.sb{
	border-bottom-style: solid;
}
table.diagram td.sr{
	border-right-style: solid;
}
table.diagram td.nb{
	border-bottom-style: solid;
	border-bottom-color: transparent;	
}
table.diagram td.nr{
	border-right-style: solid;
	border-right-color: transparent;	
}
/*center dot fix*/
table.diagram td.cf{
	position: relative;
}
table.diagram td.cf:after{
	content: "";
	display: block;
	position: absolute;
	width: 0.9px;
	height: 1px;
	border-bottom: 1px solid #a0a0a0;
	right: 0;
	bottom: 0;
}
.diagram-box{
	border-width: 2px;
	border-style: solid;
	border-color: #AFCFE2;	
	border-radius: 7px;
	padding: 0.25em 0.5em; 
}
table.diagram td.no-border{
	border: none;
}
table.diagram td.craft-station{
	border: none;
	padding: 2px 0;
}
.crafting-tree{
	overflow: auto;
	padding: 0.5em 0;
}
.crafting-tree .diagram{
	white-space: nowrap;
}

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


/* ================================================================== */
/* UCP fixes */
/* ================================================================== */


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

/* ======================================= */
/*         UI: Orange color to blue        */
/* ======================================= */

/* ======================================= */
/*           Invisible checkboxes          */
/* ======================================= */

.oo-ui-image-invert.oo-ui-icon-check,
.mw-ui-icon-check-invert:before {
    -webkit-mask: none;
    mask: none;
}

.oo-ui-image-invert.oo-ui-icon-check,
.mw-ui-icon-check-invert::before {
    background-image: linear-gradient(transparent, transparent),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-icon-check,
.mw-ui-icon-check::before {
    background-image: linear-gradient(transparent, transparent),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/svg%3E");
}


/* ======================================= */
/*          Extension:TemplateData         */
/* ======================================= */

.oo-ui-icon-template-format-inline,
.oo-ui-icon-template-format-block,
.oo-ui-icon-parameter-set {
    background-color: inherit;
}

/* Template documentation */
.documentation {
    margin: 0em auto 1em;
    border: 1px solid #AAAAAA;
    padding: 1em;
    background: var(--template-background-color-3);
}

.documentation_title {
    padding-bottom: 3px; 
    border-bottom: 1px solid #AAAAAA; 
    margin-bottom: 1ex;
}

/* Expert */
.expert_value {
    color:#FFBA75; 
}

/* Revengeance */
.revengeance_value {
    color:#D32A2A; 
}

/* Death Mode */
.death_value {
    color:#C040DB;
}

/* Defiled */
.defiled_value {
    color:#DCFF84;
}

/* Malice */
.malice_value {
    color:#F08080;
}

/* Master */
.master_value {
    color:#44AD55;
}

/* Rev Master Why */
.revengeance_master_value {
    color:#7C99F2;
}

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

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

table.lined tr:nth-last-of-type(2) td[rowspan="2"] {
    border-bottom: 0;
}

table.lined tr:nth-last-of-type(3) td[rowspan="3"] {
    border-bottom: 0;
}

table.lined tr:nth-last-of-type(7) td[rowspan="7"] {
    border-bottom: 0;
}

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

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

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

table tr.bottomline:nth-last-of-type(2) td[rowspan="2"] {
    border-bottom: 0;
}

table tr.bottomline:nth-last-of-type(3) td[rowspan="3"] {
    border-bottom: 0;
}

table tr.bottomline:nth-last-of-type(7) td[rowspan="7"] {
    border-bottom: 0;
}

/* Crafts tables */
table.crafts{
   border: 1px solid #aaa;
   border-radius: 8px;
   padding: 6px;
   background-color: var(--template-background-color-1);
   color: white;
   margin: auto 0 0.5em;
}
table.crafts table.inner {
    border-collapse: collapse;
    background:inherit; 
    width:100%;
}
table.crafts table.inner th {
    border:2px solid var(--template-background-color-1); 
    background: var(--template-heading-background-color-1);
}

/* Main page */
.mainInner {
    background:#333;
    border:#FFB0B0 1px solid;
}

/* logo drop shadow */
.mw-wiki-logo {
    background-image: url(/images/e/e6/Site-logo.png);
}

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

/* Tabs */
#left-navigation {
    margin-top: 206px !important;
}

#right-navigation {
    margin-right: 0.5em;
    margin-top: 206px !important;
}

/* Logo */
#p-logo {
    height: 195px !important;
    padding: 0;
    position: absolute;
    width: 507px !important;
    z-index: 4;
    left: 50vw;
    margin-left: -244px;
    top: 50px;
}

#p-logo a {
    height: 186px !important;
    width: 552px !important;
}
 
/* Hide main page header */
body.page-Calamity_Mod_Wiki h1.firstHeading {
    display:none;
}

/* for "edit this page" tab and "discussion" tab etc */
.pagetab {
     border-style: solid solid none;
     border-width: thin;
     border-color: #808080;
     padding: 0.25ex 1ex 0ex;
     font-size: 95%;
}

.ambox {
    background-color: #282828;
    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 #bba;
}

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

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

/* -- item link ----------------------------------------------------- */
.i{
   white-space:nowrap;
   color: var(--theme-page-text-color);
   display: inline-block;
}
.i > a, 
.i > img{ 
   display: inline-block;
   line-height: 0.1;
   vertical-align: middle;
   margin-left: 2px;
}
.i > span{
   display: inline-block;
   margin-left: 3px;
   text-align: left;
}
.i > a:first-child,
.i > img:first-child,
.i > span:first-child{
   margin-left: auto;
}
.i.multi-line > span,
.i.-w > span,
.i.break > span {
    line-height: 1.25;
    vertical-align: middle;
}
.i.break > span{
    white-space: normal;
}
.i .note{
   color: var(--note-color);
   font-size: 85.7142%; /*12px/14px*/
}
.i div.note{ /*note2*/
   font-size: 100%;
   line-height: 1;
}
.i span.note{
   margin-left: 3px;
}
.i.-w span.note:last-child{
   display: block;
   margin-left: auto;
   line-height: 1;
}
.i.boldname >span span:first-child{
   font-weight: bold;
}
.i.notecolor span.note{
   color: inherit;
}
.i.note2color div.note{
   color: inherit;
}
.i.block,
.i.block > span{
   display: block;
}
.i.notesize span.note{
   font-size: 100%;
}
.i.note2size div.note{
   font-size: 100%;
   font-size: 85.7142%; /*12px/14px*/
}
.i.alignleft{
   text-align: left;
}
.i.aligncenter{
   text-align: center;
}
.i.alignright{
   text-align: right;
}
.i.textleft>span{
   text-align: left;
}
.i.textcenter>span{
   text-align: center;
}
.i.textright>span{
   text-align: right;
}
/* ------------------------------------------------------------------ */


/* -- 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: var(--template-background-color-1);
   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 #515151;
   width: 5em;
   vertical-align: middle;
}
.infobox table td{
   padding: 2px;
   vertical-align: middle;
}
.infobox .title{
   background-color: var(--template-heading-background-color-1);
   color: var(--template-heading-text-color-1);
   font-weight: bold;
   text-align: center;
   padding: 2px 0;
}
.infobox > .title{
   font-size: 15px;
   padding: 8px 0;
   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 .variant{
   background-color: var(--template-heading-background-color-1);
   color: var(--template-heading-text-color-1);
   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 ul{
   list-style: none;
   margin: auto;
   text-align: center;
}
.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: var(--template-heading-background-color-1);
   border: 1px solid #515151;
}
.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;
}
.infobox .variant{
   margin-bottom: 2px;
   white-space: nowrap;
}
.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,
.infobox .section.resistances{
   margin-top: 6px;
   margin-bottom: 6px;
}
.infobox .drops.money{
   margin: 2px auto;
}
.npc.infobox .map{
   text-align: center;
   padding-top: 3px;
   margin-top: 6px;
   border-top: 1px solid #aaa;
}
.infobox .image2{
   text-align: center;
   padding-top: 3px;
   margin-top: 6px;
   border-top: 1px solid #aaa;
}
.infobox .proj,
.infobox .ib_sound,
.infobox .cooldown {
   text-align: center;
   padding-top: 3px;
   margin-top: 6px;
}
.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: var(--template-heading-background-color-1);
   color: var(--template-heading-text-color-1);
   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:last-child{
   border-bottom: none;
}

.infobox .drops.items li.caption{
   border-top:2px #AFCFE2 solid;
   margin-top: 2px;
   line-height:1;
   text-align: center;
   color:#ffffff;
   font-size: 10.5px;
   background:var(--template-heading-background-color-1);
   padding-top: 5px;
   display: block;
}
.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: var(--template-background-color-1);
}
/* for item infobox */
.item.infobox{
   width: 21em;
}
.item.infobox .images .auto, .infobox.item .images .stack{
   position: absolute;
   right: 3px;
}
.item.infobox .images .instrument {
   position: absolute;
   left: 3px;
}
.item.infobox .images .auto{
   top: 3px;
} 
.item.infobox .images .stack, .item.infobox .images .instrument{
   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;
}
.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;
}
/* ------------------------------------------------------------------ */


/* interwiki table bg fix for active entries */
.mw-interwikitable-local,
.mw-interwikitable-trans {
    text-shadow: 1px 1px 1px #000000;
}

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

/* Navbox template style */
table.navbox {
    border: 1px solid #aaa;
    clear: both;
    /*font-size: 12px;*/
    margin-top: 0.75em !important;
    /*text-align: center;*/
    width: 100%; 
    border-radius: 8px;
    padding: 6px;
    background-color: var(--template-background-color-1);
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
}

/* Base background */
.navbox, .navbox-subgroup {
    background: rgba(0, 0, 0, 0.1);
}

.navbox-list {
    border-color: rgba(0, 0, 0, 0.1); /* Must match background color */
}

/* ------------------------------------------------------------------ */
/* 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:Code */
.code-template {
	background: var(--template-heading-background-color-1);
	padding:2px;
}
/* ------------------------------------------------------------------ */

/* Level 1 color */
.navbox-title,
table.navbox th {
    background: var(--template-heading-background-color-1);
    color: var(--template-heading-text-color-1);
}

/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
}

/* Even row striping */
.navbox-even {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Odd row striping */
.navbox-odd {
    background: transparent;
}
 
.collapseButton {
    font-weight: normal;
    width: auto;
}

.navbox .collapseButton {
    width: 6em;
}
 
.navbar {
    font-size: 88%;
    font-weight: normal;
}

.navbox .navbar {
    font-size: 100%;
}
 
table.collapsed tr.collapsible {
    display: none;
}
/* End of new Navbox styling */

/* -- "terraria" box style. ------------------------------------------*/
.terraria{
    border: 1px #aaa solid;
    padding: 8px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
}
.terraria th{
    background: var(--theme-page-background-color--secondary);
}
.terraria > .heading,
.terraria > .mw-collapsible-content > .heading {
    background: var(--template-heading-background-color-1);
    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 {
    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 #aaa;
    border-top: 2px solid #aaa;
    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 #aaa;
    border-bottom: 2px solid #aaa;
    top: -2px;
}

#mw-page-base {
    background-position: top left !important;
}

#mw-panel {
    background-color: rgb(16, 16, 16, 0.7);
    border: 1px solid #FF9900;
}

div.vectorTabs li.selected, div.vectorTabs ul li {
    /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkAQAAAABvV2fNAAAADElEQVR4AWNoGB4QAInlMgFKeRKBAAAAAElFTkSuQmCC); */
    background-color: transparent !important;
}

/* Recipes tables */
div.crafts {
    margin-bottom: 4px;
    line-height: 1.5;
	display: table;/*float fix*/
    overflow: auto;
}

div.crafts.centered {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    justify-content:center;
}

div.crafts .wrap {
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 6px 6px 2px 5px;
    position: relative;
    background: var(--template-background-color-1);
}

div.crafts .wrap::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    background: var(--template-background-color-1);
    position: absolute;
    bottom: 2px;
    left: 6px;
    right: 6px;
}

div.crafts table {
    position: relative;
}

div.crafts table::after {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: var(--template-background-color-1);
    position: absolute;
    top: 0;
    left: 0;
}

div.crafts caption {
    font-size: 1.17em;
    background: var(--template-heading-background-color-1);
    padding: 0.25em;
    position: relative;
    margin-bottom: 2px;
    font-weight: bold;
}
div.crafts caption > i,div.crafts caption > b{
	vertical-align: middle;
}

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: var(--template-heading-background-color-1);
    padding: 0.25em 0.5em;
    border-right: 1px solid var(--template-background-color-1);
    border-left: 1px solid var(--template-background-color-1);
}
div.crafts th:first-child {
    border-left-width: 0px;
}

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

div.crafts td {
    padding: 0.25em 0.5em;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

div.crafts tr:first-child > td {
    border-top: 0;
}

div.crafts td.result {
    border-left: 0;
    white-space: nowrap;
}

div.crafts td.ingredients {
    white-space: nowrap;
}

div.crafts td.station {
    text-align: center;
}

div.crafts td.station span.water {
    display: inline-block;
    vertical-align: middle;
}

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

div.crafts table .ingredients ul,
.crafting-ingredients > ul {
    margin: 0;
    list-style: none;
}

div.crafts table .ingredients li,
.crafting-ingredients > ul > li {
    margin: 3px auto;
}
/* itemlink default as multiline */
div.crafts .i > span,
div.crafts .i > span,
div.crafts .note-text {
    line-height: 1.25;
    vertical-align: middle;
}

/* references CSS */
ol.references li:target, sup.reference:target{
	background-color: #121212;
}

/* generic background color classes */
.background-1 {
	background-color: var(--template-background-color-1);
}

.background-2 {
	background-color: var(--template-background-color-2);
}

.heading-1 {
	background-color: var(--template-heading-background-color-1);
	color: var(--template-heading-text-color-1);
}

.heading-2 {
	background-color: var(--template-heading-background-color-2);
}

/*
* Tabber styles ([[Template:Tabber]])
*/

.page-tabber {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow-x: auto;
	margin-bottom: 20px;
}

.page-tabber-tab {
	padding: .5em;
	border: solid #a6a6a6;
	white-space: nowrap;
	line-height: .95em;
}

.page-tabber-tab.active-tab {
	border-width: 2px 2px 0;
	font-weight: bold;
}

.page-tabber-tab.inactive-tab {
	border-width: 1px 1px 2px;
	background-color: #e6e6e6;
}

.page-tabber-separator {
	border-bottom: 2px solid #a6a6a6;
}

.page-tabber-separator.tail {
	width: 100%;
}
/* Tabber image overlap fix */
div.thumb,
div.thumbinner,
.thumbimage{
   max-width: 100%;
   box-sizing: border-box;
}

/*
* Transparent background
*/

#mw-head {
	top: 40px;
}

/* -- Links colouring -- */
a.new:visited,
.vectorTabs li.new a:visited
{
   color:#a63232
}

a.new,
.vectorTabs li.new a
{
	color: var(--theme-page-redlink);
}

.mw-parser-output a.extiw,
.mw-parser-output a.extiw:active {
	color: #36b !important;
}

#mw-panel .portal .body li a:visited,
a:visited,
a.external:visited,
.mw-parser-output a.external:visited,
a.extiw:visited,
.plaincollapse .mw-collapsible-toggle  a:visited,
.vectorMenu li a:visited {
   color:#666fff;
}
/* -- End visited links colouring -- */

span.mw-history-suppressed {
	color: #DFDEDD;
}

/* -- These changes are made to help FD look more like Hydra -- */
/* Font changes */
:root {
	--theme-page-headings-font: Arial, sans-serif !important;
}

.mw-body {
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
    margin-left: 12.5em;
    padding-top: 3em;
    border: 1.5px solid;
}

.mw-body-content {
	font-size: 14px;
}

h1.firstHeading {
	font-family: var(--theme-page-headings-font);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: .25px;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
}

.mw-body-content h1 {
	font-family: var(--theme-page-headings-font);
	font-size: 36px;
	font-weight: 300;
}

.mw-body-content h2 {
	font-family: var(--theme-page-headings-font);
    font-size: 24px;
    font-weight: 500;
    overflow: hidden;
    padding: 6px 0;
}
.mw-body-content .mw-parser-output > h2{
	clear: left;
}

.mw-body-content h3 {
	font-size: 1.2em;
	font-weight: 700;
}

.mw-body-content h3 a {
	font-weight: 700;
}

.mw-body-content h4 {
	font-size: 100%;
	font-weight: 700;
}

.mw-body-content h4 a {
	font-weight: 700;
}

.mw-body-content h5 {
	font-size: 100%;
	font-weight: 700;
}

.mw-body-content h5 a {
	font-weight: 700;
}

th a {
	font-weight: 700 !important;
}

a.mw-selflink.selflink {
	font-weight: 700;
	color: inherit;
	text-decoration-color: inherit;
	text-decoration-line: none;
}

.mw-parser-output p {
	margin-block-start: 10px !important;
	margin-block-end: 10px !important;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.mw-parser-output b a {
	font-weight: bold;
}

/* Line underneath headers */
.page-header {
	margin-bottom: 6px;
}

.page-header__bottom {
	border-bottom: 1px solid var(--theme-border-color);
}
/* -- End Hydra-esque changes -- */

/* -- Tabber styles ([[Template: Tabber]]) -- */

.page-tabber-tab {
	border: solid #666666
}
.page-tabber-tab.inactive-tab {
	border-width: 1px 1px 2px;
	background-color: #2a2a2a 
}
.page-tabber-separator {
	border-bottom: 2px solid #666666 
}

.tabber__tab,
.tabber__tab:visited {
	color: var(--theme-page-text-color);
}

.tabber__tab--active {
	color: #36C !important;
}
/* -- End Tabber styles ([[Template: Tabber]]) -- */

/* ================================================================== */
/* Main page */
/* ================================================================== */

body.mainpage .page__main {
	padding-top: 12px;
}
body.mainpage .page-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 0;
}
body.mainpage .page-header__bottom {
	border-bottom: 0;
	justify-content: flex-end;
}
body.mainpage .page-header__title-wrapper {
	display: none;
}
body.mainpage .page-header__languages .wds-dropdown__toggle,
body.mainpage .page-header__variants .wds-dropdown__toggle {
	margin-bottom: 0;
}
body.mainpage .page-header__actions {
	margin-left: 3px;
	padding-top: 0;
}

body, .mw-body, #mw-page-base, .catlinks,
.vectorTabs ul li,
.vectorTabs li.selected
{
	--theme-page-background-color: rgba(32,32,32,0.9);
	background-color: var(--theme-page-background-color) !important;
}

p, h1, h2, h3, h4, h5, h6, li,
.mw-body,
.vectorTabs li.selected a,
.vectorTabs li.selected a:visited,
.vector-menu-dropdown .mw-list-item.selected a:visited
{
	color: var(--theme-page-text-color);
}

a,
#mw-panel .portal .body li a,
.vectorTabs li a,
.vectorMenu li a,
.vector-menu-dropdown .mw-list-item a
{
	color: var(--theme-link-color);
}

#mw-page-base,
#mw-head ul,
.vectorTabs li,
.vectorTabs li.selected,
.vectorTabs span,
.vectorTabs,
#p-namespaces,
#p-cactions-label,
#mw-head .vectorMenu .vector-menu-heading,
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading
{
	background-image: none;
}

.toc ul li a .tocnumber {
    color: rgba(224,224,224,.6);
}

.toc {
	background-color: var(--theme-page-background-color);
}

.diff td.diff-context {
    background: transparent;
    border-color: var(--theme-border-color);
    color: var(--theme-page-text-color);
}

.diff td.diff-deletedline {
    border-color: var(--theme-page-redlink);
    border-width: 1px 1px 1px 4px;
}

.diff td.diff-deletedline .diffchange {
    background-color: var(--theme-page-redlink);
    color: var(--theme-diff-text);
}

.diff td.diff-addedline {
    border-color: var(--theme-page-green);
    border-width: 1px 1px 1px 4px;
}

.diff td.diff-addedline .diffchange {
    background-color: var(--theme-page-green);
    color: var(--theme-diff-text);
}

.diff-addedline,
.diff-deletedline,
.diff-context {
	font-size: 88%;
}

.diff-editfont-monospace .diff-addedline,
.diff-editfont-monospace .diff-deletedline,
.diff-editfont-monospace .diff-context {
	font-family: Arial, sans-serif;
}

#pagehistory li {
	border: none;
}

#pagehistory li.selected {
    color: var(--theme-page-text-color);
    background-color: var(--theme-page-background-color--secondary);
}

.mw-plusminus-neg {
	color: var(--theme-page-redlink);
}

.mw-plusminus-pos {
	color: var(--theme-page-green);
}

.not-patrolled,
#wpDestFile-warning,
.mw-destfile-warning {
    background-color: var(--theme-page-background-color--secondary);
}

body {
  background: url(/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
}

#footer ul li {
	color: var(--theme-page-text-color);
}

#mw-head-base, #left-navigation, #footer {
    margin-left: 12em;
}

table {
  white-space: normal;
}

.main-container, .resizable-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
}

code {
	color: var(--theme-page-text-color);
	background-color: var(--template-heading-background-color-1);
	border: none;
	padding: none;
}

#filetoc {
	border: 1px solid;
	border-color: var(--theme-border-color);
	background-color: var(--theme-page-background-color--secondary);
}

ul {
	list-style-image: none;
}

table {
	display: table;
}

#footer-info {
	background-color: rgba(32,32,32,0.5);
}

.editOptions {
	background-color: var(--theme-page-background-color--secondary);
	color: var(--theme-page-text-color);
}

#wpSummaryLabel,
.editCheckboxes,
.vectorMenu .vector-menu-heading span,
.wikitable,
#mw-panel .portal  .vector-menu-heading {
	color: var(--theme-page-text-color);
}

div#mw-panel div.portal div.body { background: none; }

#mw-panel .portal .vector-menu-heading {
	background-image: linear-gradient(90deg,transparent,#F37F20,transparent);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

.codeEditor-status-worker {
	color: #222;
}

div.thumbinner {
	border: none;
	background-color: var(--theme-page-background-color);
	color: var(--theme-page-text-color);
}

html .thumbimage {
	border: none;
}

table.cargoTable.noMerge tr:nth-child(odd),
.wikitable,
.mw-datatable td,
#mw-searchoptions,
table.mw-abuselog-details {
	background-color: var(--theme-page-background-color);
}

table.cargoTable.noMerge tr:nth-child(even),
.mw-warning,
.warningbox,
.vectorMenu .menu,
.wikitable > tr > th,
.wikitable > * > tr > th,
.mw-datatable > tr > th,
.mw-datatable > * > tr > th,
table.mw-abuselog-details th {
	background-color: var(--theme-page-background-color--secondary);
}

div#content {
	border-color: #F37F20;
    margin-top: 165px;
    background-color: rgb(32, 32, 32, 0.9) !important;
}

.editOptions,
.warningbox {
	border-color: var(--theme-page-border-color);
}

body, .mw-body, #mw-head, #mw-page-base {
    background-color: transparent !important;
}

.infobox {
	display: table;
}

.mwe-math-fallback-image-inline {
    filter: invert(1);
    -webkit-filter: invert(1);
}

#catlinks {
    background-color: #181818;
    border-color: #444;
}

.vector-menu-dropdown .vector-menu-heading:after {
	filter: invert(100%);
}

.vector-menu-dropdown .vector-menu-content {
	background-color: #303030;
	border-color: #F37F20;
}

#searchInput { 
	background-color: transparent;
	border-color: #404040;
}
#simpleSearch #searchButton {
	background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMyI+IDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU0NTk1ZCIgc3Ryb2tlLXdpZHRoPSIyIj4gPHBhdGggZD0iTTExLjI5IDExLjcxbC00LTQiLz4gPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiLz4gPC9nPiA8L3N2Zz4=);
}

#contentSub,
#contentSub2,
.vector-body {
	font-size: inherit;
}

.errorbox p,
.errorbox li,
.mw-message-box p,
.mw-message-box li
{
	color: #000;
}

/* Cargo */
div.cargo-table-diagram { fill: var(--theme-page-text-color); }
div.drilldown-filters-wrapper { 
	background: none;
	color: var(--template-heading-text-color-1);
}
.mw-datatable th,
table.cargoTable.noMerge tr:nth-child(odd) { background: #202020; }
table.cargoTable.noMerge tr:nth-child(even) { background: unset; }
.mw-datatable th .oo-ui-iconWidget { filter: invert(1); }

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
	background-color: transparent;
}

.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
	background-color: var(--template-background-color-1);
	border-color: var(--theme-page-border-color);
}

.journey {
	color: var(--custom-template-journey-color);
	font-weight: bold;
}
abbr.journey {
	text-decoration: none;
}

/* Template:Quotation */
blockquote.quotation {
	--quotation-mark-color: var(--theme-page-text-color);
	position: relative;
	font-style: italic;
	padding: 0 1em;
	margin: 1em auto;
	overflow: hidden;
}
blockquote.quotation > div.m {
	display: block;
	font: bold 5em Times New Roman, Times, Georgie, serif;
	line-height: 0.8;
	color: var(--quotation-mark-color);
	position: absolute;
	left: 0.2em;
	top: 0;
}
blockquote.quotation > div.c {
	padding: 0.25em 0 0 1em;
	margin-left: 3em;
	display: inline-block;
}
blockquote.quotation > div.c > p:last-child {
	text-align: right;
	font-size: 0.9em;
	margin: 0;
}
@media (max-width: 640px) {
	blockquote.quotation {
		clear: both;
	}
}

/*********************
* Mobile adjustments *
**********************/
@media screen and (max-width:720px) {
	#left-navigation {
		margin-left: 0;
	}
}

/* History */
.history-collapsible .mw-collapsible-toggle {
    float:left;
}



/* Template:History & Template:Version History */
.mw-collapsible.history{
	display: flex;
	flex-direction: column;
}
.mw-collapsible.history .mw-collapsible-toggle{
	float: none;
	order: 2;
	align-self: flex-start;	
}
.mw-collapsible.history .mw-collapsible-toggle::before,
.mw-collapsible.history .mw-collapsible-toggle::after{
	display: none;
}
.history_section_hat_note{
	display: flex;
}
.history_section_hat_note .history_page_link{
	margin-left: 6px;
	order: 2;
	flex: 0 0 auto;
}
.history_section_hat_note .history_page_link::before{
	content: "[";
}
.history_section_hat_note .history_page_link::after{
	content: "]";
}
.history_section_hat_note .note-text{
	font-style: italic;
	flex: 1 1 auto;
}

/********* [[Template:Dotlist]] *********/
.dotlist {
  margin: auto;
}
.dotlist > .title {
  font-weight: bold;
}
.dotlist > .title::after {
  content: "";
  display: inline-block;
  width: 0.25em;
}
.dotlist.nobold > .title {
  font-weight: normal;
}
.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-block;
}
.dotlist > ul > li::after {
  content: "•";
  padding: 0 0.25em;
  word-break: break-all;
}
.dotlist > ul > li:last-child::after {
  display: none;
}
.dotlist.nodot > ul > li::after {
  content: "　";
  padding: 0;
  margin: 0;
}
.dotlist.inline {
  display: inline;
}
.dotlist.inline > ul > li {
  display: inline;
}
.dotlist.l > .title {
  margin-right: 0.4em;
}
.dotlist.l > ul > li::after {
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.dotlist.xl > .title {
  margin-right: 0.8em;
}
.dotlist.xl > ul > li::after {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.dotlist.xxl > .title {
  margin-right: 1.2em;
}
.dotlist.xxl > ul > li::after {
  margin-left: 0.75em;
  margin-right: 0.75em;
}
.dotlist.xxxl > .title {
  margin-right: 1.6em;
}
.dotlist.xxxl > ul > li::after {
  margin-left: 1em;
  margin-right: 1em;
}
.dotlist.xxxxl > .title {
  margin-right: 2em;
}
.dotlist.xxxxl > ul > li::after {
  margin-left: 1.25em;
  margin-right: 1.25em;
}

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

.clearfix::after {
  clear: both;
}


/********* [[Template:Infocard]] *********/
.infocard {
  --infocard-padding: 1em;
  --infocard-padding-negative: calc(var(--infocard-padding) * -1);
  --infocard-padding-half: calc(var(--infocard-padding) * 0.5);
  --infocard-padding-half-negative: calc(var(--infocard-padding-negative) * 0.5);
  --infocard-icon-right-offset: -2em;
  --infocard-box-title-font-size: 1.5em;
  --infocard-box-title-font-weight: lighter;
  --infocard-main-heading-font-size: 2em;
  padding: var(--infocard-padding);
  border: 1px solid var(--theme-box-border-color);
  border-radius: 6px;
  width: 100%;
  min-width: 300px;
  position: relative;
  background: var(--template-background-color-1);
}
.infocard + .infocard {
  /* gap between subsequent infocard elements */
  margin-top: 0.5em;
}
.infocard.compact {
  --infocard-padding: 0.5em;
  --infocard-icon-right-offset: -2.5em;
  --infocard-box-title-font-size: 100%;
  --infocard-box-title-font-weight: bold;
  --infocard-main-heading-font-size: 1.25em;
  min-width: 240px;
}
.infocard > .intro {
  margin: 1em 0;
  min-width: 200px;
}
@media screen and (max-width: 720px) {
  .infocard .outro .content {
    overflow-x: auto;
  }
}
.infocard .heading {
  margin: 1em 0 var(--infocard-padding-half);
  font-weight: bold;
}
.infocard .main-heading {
  border-right: 3em solid transparent;
  position: relative;
  line-height: 1;
  padding-left: var(--infocard-padding);
  margin: var(--infocard-padding) var(--infocard-padding-negative);
  background: var(--template-heading-background-color-1);
}
@media screen and (max-width: 450px) {
  .infocard .main-heading {
    padding-right: 0 !important;
  }
}
.infocard .main-heading .hgroup {
  display: inline-block;
  margin-left: 4px;
  padding: 0 var(--infocard-padding);
  background: var(--template-background-color-1);
}
.infocard .main-heading .hgroup > .main {
  font-size: var(--infocard-main-heading-font-size);
  color: var(--theme-text-color-highlight);
}
.infocard .main-heading .hgroup > .main > .namenote {
  font-size: 62.5%;
  color: var(--theme-text-color-note);
}
.infocard .main-heading .icon {
  position: absolute;
  right: var(--infocard-icon-right-offset);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: var(--iconsize);
  height: var(--iconsize);
}
.infocard .main-heading .icon.frame {
  border: 1px solid var(--theme-box-border-color);
  border-radius: 4px;
  background: var(--theme-page-background-color);
}
.infocard .main-heading .icon.frame.round {
  border-radius: 100%;
}
.infocard > .card {
  float: right;
  margin: -1em 1em 0.75em 0.75em;
  border: solid 1px var(--theme-box-border-color);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 450px) {
  .infocard > .card {
    float: none;
    margin: 0;
  }
}
.infocard > .card .image {
  background: var(--theme-box-border-color);
  box-shadow: var(--theme-widget-shadow);
}
@media screen and (max-width: 450px) {
  .infocard > .card .image {
    width: 100% !important;
    text-align: center;
  }
}
.infocard > .card .content {
  border: 1px solid var(--theme-box-border-color);
  border-top: 0;
  background: var(--template-background-color-1);
  border-radius: 0 0 4px 4px;
  padding: 0 0.75em;
  box-shadow: var(--theme-widget-shadow);
}
@media screen and (max-width: 450px) {
  .infocard > .card .content {
    width: 100% !important;
  }
}
.infocard > .card .content > .intro {
  margin-top: 0.75em;
}
.infocard > .card .content > dl {
  margin: 0.75em 0;
}
.infocard > .card .content dt {
  font-weight: bold;
  margin-top: 0.75em;
}
.infocard > .card .content dd {
  margin: 0;
}
.infocard > .card .content > .outro {
  margin-bottom: 0.75em;
}
.infocard .box {
  padding: var(--infocard-padding);
  margin: 1em 0;
  background-color: var(--theme-box-background);
  border: 1px solid var(--theme-widget-border-color);
  border-radius: 4px;
}
.infocard .box > .title {
  line-height: 1;
  display: inline-block;
  margin-left: var(--infocard-padding-negative);
  padding: 0 1em 0 var(--infocard-padding-half);
  min-width: 5em;
  border-left: var(--infocard-padding-half) solid transparent;
  border-left-color: transparent;
}
.infocard .box > .title > span {
  font-weight: var(--infocard-box-title-font-weight);
  font-size: var(--infocard-box-title-font-size);
}
.infocard .box > .content {
  margin-top: 4px;
}
.infocard.biome .main-heading + div {
  display: flex;
  flex-wrap: wrap;
  margin: 0 var(--infocard-padding-half-negative) var(--infocard-padding-negative);
}
.infocard.biome .main-heading + div > .box {
  margin: 0 var(--infocard-padding-half) var(--infocard-padding);
  flex: 1 1 auto;
}
.infocard.biome .main-heading + div > .box:last-child, .infocard.biome .main-heading + div > .box.last {
  flex: 10 10 auto;
}
.infocard.biome .main-heading + div > .box .dotlist {
  margin-top: -2px;
}
.infocard.biome .main-heading + div > .box .dotlist li {
  margin-top: 2px;
}

/* [[Template:Sound]] */
/* -- Make certain icons and logos more visible -- */
.sound-title::after {
	filter: hue-rotate(180deg) invert(100%);
	background-image: url(https://commons.wiki.gg/images/3/36/Audio.svg);
}

.sound-playing > .sound-title::after {
    mask: url(https://commons.wiki.gg/images/3/36/Audio.svg);
}
.client-js .sound audio {
	display: none;
}
Retrieved from "https://calamitymod.wiki.gg/index.php?title=MediaWiki:Common.css&oldid=243727"