MediaWiki:Common.css

From Mod of Redemption Wiki
Jump to navigation Jump to search

Note: After publishing, 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 / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/***********************************************************************************************************
 * css reset for browser default rules and MediaWiki internal rules
 ***********************************************************************************************************/
*{
	outline: 0;
}
table{
	white-space: normal; /* set to `no-wrap` in MW internal css */
}
html{
	font-size: 16px; /* reset rem */
}
pre{
	margin: 0;
}
h1, h2, h3, h4, h5, h6{
	padding: 0;
}
table{
	display: table;
	white-space: unset;
}

/**** base styles START ***********************************************************/

/** Font **/
html, body,
h1,h2,h3,h4,h5,h6,
.mw-body h1, .mw-body-content h1, .mw-body-content h2{
	font-family: Helvetica, Arial, sans-serif;
}
body,
body .vector-body{
	font-size: 14px;
}

.box {
    border: #D23A00 1px solid;
    border-radius: 5px;
    padding: 7px;
    margin: 0 1px 2px; /* since there is margin collapsing so can't use margin: 1px; */
}

.fit-20 a {
    width: 20px;
    text-align: center;
}

.fit-24 a {
    width: 24px;
    text-align: center;
}

/* Template:itemlist */
.itemlist > ul {
	list-style: none;
	margin: 0;
}
.itemlist > ul > li {
	width: 10em;
	margin: 0.25em 1em 0.25em auto;
	display: inline-block;
}

#p-logo{
	position: absolute;
	width: 100%;
	height: 178px;
	left: 0;
	top: 35px;
	background: url(/images/e/e6/Site-logo.png) center center / 466px auto no-repeat;
}
/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
 * I still don't know why, but move background to #p-logo can avoid this issue.
 */
#p-logo .mw-wiki-logo{
	width: 466px;
	height: 188px;
	margin: 0 auto;
	background: none; /* logo flicker fix */
}
input#searchInput {
    background: #302422;
    color: #e0e0e0
}

input#searchInput:focus {
    border-color: #d23a00;
    outline-color: transparent;
    box-shadow: none;
}

.searchButton[name=go] {
    background: no-repeat center/1.23076923em 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%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%09%3Ctitle%3E%0A%09%09search%0A%09%3C%2Ftitle%3E%0A%09%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23f25a20%22%20d%3D%22M12.2%2013.6a7%207%200%201%201%201.4-1.4l5.4%205.4-1.4%201.4-5.4-5.4zM13%208A5%205%200%201%201%203%208a5%205%200%200%201%2010%200z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
    opacity: .67;
}

.suggestions {
    border-radius: 4px 0px 4px 4px;
    border: 1px solid #d23a00;
}

.mw-searchSuggest-link .suggestions-result {
    color: #e0e0e0;
    background-color: #302422;
}

.mw-searchSuggest-link .suggestions-result:hover {
    color: #e0e0e0;
    background-color: #504442;
}

.suggestions-special {
    background-color: #302422;
    color: #e0e0e0;
}

.suggestions-special:hover {
    background-color: #504442;
    color: #e0e0e0;
}

.suggestions-special .special-label {
    color: #e0e0e0;
}

.infobox {
	display: table;
}

.suggestions-special .special-query {
    color: #d23a00;
}

.mw-datatable {
 border:1px solid #a2a9b1;
 border-collapse:collapse
}
.mw-datatable td,
.mw-datatable th {
 border:1px solid #d23a00;
 padding:.2em .4em
}
.mw-datatable th {
 background-color:#5e4f4b
}
.mw-datatable td {
 background-color:#302422
}
.mw-datatable tr:hover td {
 background-color:#1e1a17
}

.journey {
 color:#ff69c4;
 font-weight:700
}
abbr.journey {
 text-decoration:none
}

/* generic background color classes */
.background-1 {
	background-color: #1e1a17;
}

.heading-1 {
	background-color: #5e4f4b;
	color: #fff;
}

@media screen {
 div.thumbinner {
  border:none;
  background-color: #1e1a17;
  font-size:94%
 }
 .thumbimage {
  border:none;
 }
}

.thumb, li.gallerybox div.thumb {
  background: #1e1a17;
  border-radius: 5px;
  border-color: #a2a9b1;
}

.auto img,
.toolpower img,
.instrument img,
#dpl-table .note,
.postedit:after,
.oo-ui-indicatorElement-indicator.oo-ui-image-progressive,
.mw-collapsibleFieldsetLayout.mw-collapsible .mw-collapsible-toggle .oo-ui-iconElement-icon {
 filter:hue-rotate(180deg) invert(100%)
}

/* 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: #1e1a17;
}

div.crafts .wrap::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    background: #1e1a17;
    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: #1e1a17;
    position: absolute;
    top: 0;
    left: 0;
}

div.crafts caption {
    font-size: 1.17em;
    background: #5e4f4b;
    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: #5e4f4b;
    padding: 0.25em 0.5em;
    border-right: 1px solid #1e1a17;
    border-left: 1px solid #1e1a17;
}
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;
}

/* -------------------------------------------------------- */
/* Template:infocard */
/* -------------------------------------------------------- */

.infocard + .infocard {
	margin-top: 0.5em;
}
.infocard {
	padding: 0.5em;
	box-sizing: border-box;
	border: 1px solid rgb(210, 58, 0);
	border-radius: 6px;
	width: 100%;
	min-width: 300px;
	position: relative;
	background: #2F2422;
}
.infocard.compact {
	min-width: 240px;
}
.infocard > .intro {
	margin: 0.5em 0;
	min-width: 200px;
}

.infocard .heading {
	margin: 0.5em 0 calc(0.5em * 0.5);
	font-weight: bold;
}
.infocard .main-heading {
	border-right: 3em solid transparent;
	position: relative;
	line-height: 1;
	padding-left: 0.5em;
	margin: 0.5em calc(0.5em * -1) 0.5em;
	background: rgba(20,20,20, 0.25);
}
.infocard .main-heading .hgroup {
	display: inline-block;
	margin-left: 4px;
	padding: 0 0.5em;
	background: #4C332F;
}
.infocard .main-heading .hgroup > .main {
	font-size: 1.25em;
	color:  #FFE893;
}
.infocard .main-heading .hgroup > .main > .namenote {
	font-size: 62.5%;
	color: #C98A21;
}
.infocard .main-heading .icon.frame {
	border: 1px solid rgb(210, 58, 0);
	border-radius: 4px;
	background: rgba(210,58,0,0.03);
}
.infocard .main-heading .icon.frame.round {
	border-radius: 100%;
}

.infocard > .card {
	float: right;
	margin: -0.5em 0.5em 0.75em 0.75em;
	box-shadow: 0 0 6px rgba(0,0,0,0.05);
	position: relative;
	z-index: 5;
}
.infocard > .card .image {
	background: rgb(210, 58, 0);
	border-left: 1px solid rgb(210, 58, 0);
	border-right: 1px solid rgb(210, 58, 0);
	box-shadow: 0px 0px 6px 0px rgba(0,0,0, 0.1)
}
.infocard > .card .content {
	border: 1px solid rgb(210, 58, 0);
	border-top: 0;
	background: #4C332F;
	border-radius: 0 0 4px 4px;
	box-sizing: border-box;
	padding: 0 0.75em 0;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0, 0.1)
}
@media screen and (max-width: 450px) {
	.infocard > .card {
		float: none;
		margin: 0;
	}
	.infocard > .card > .content {
		width: 100% !important;
	}
	.infocard > .card > .image {
		width: 100% !important;
		text-align: center;
	}
	.infocard > .main-heading {
		padding-right: 0 !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: 0.5em;
	margin: 0.5em 0;
	background-color: rgba(76,51,47, 0.05);
	border: 1px solid;
	border-radius: 4px;
	border-color: rgba(210, 58, 0, 0.1) rgba(13, 4, 2, 0.5) rgb(13, 4, 2, 0.5) rgba(210, 58, 0, 0.1);
}
.infocard .box > .title {
	line-height: 1;
	display: inline-block;
	margin-left: calc(0.5em * -1);
	padding: 0 0.5em 0 calc(0.5em * 0.5);
	min-width: 5em;
	border-left: calc(0.5em * 0.5) solid transparent;
	border-left-color: transparent;
}
.infocard .box > .title > span {
	font-weight: lighter;
	font-size: 1.5em;
}
.infocard .box > .content {
	margin-top: 4px;
}

.infocard.biome .main-heading + div {
	display: flex;
	flex-wrap: wrap;
	margin: 0 calc(calc(0.5em * -1) * 0.5) calc(0.5em * -1);
}
.infocard.biome .main-heading + div > .box {
	margin: 0 calc(0.5em * 0.5) 0.5em;
	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;
}

/* -- "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: #1e1a17;
}
.terraria > .heading,
.terraria > .mw-collapsible-content > .heading {
    background: #5e4f4b;
    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;
}

/* -- item link ----------------------------------------------------- */
.i{
   white-space:nowrap;
   color: #E0E0E0;
   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: #fff;
   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;
}
/* ------------------------------------------------------------------ */

/********* [[Template:Sound]] *********/
/* All of these styles should only be applied if JavaScript is enabled (because
 * the functionality doesn't work otherwise); see also
 * https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
.client-js .sound {
  cursor: pointer;
}
.client-js .sound .sound-audio {
  /* hide the default HTML audio player */
  display: none;
}
.client-js .sound.iconlast .sound-title::after, .client-js .sound.iconfirst .sound-title::before {
  /* speaker icon */
  content: "";
  display: inline-block;
  width: 1.143em;
  height: 1.143em;
  vertical-align: text-top;
  background: url(https://commons.wiki.gg/images/3/36/Audio.svg);
  background-size: contain;
  filter: brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
}
.client-js .sound .sound-title::after {
  /* for sound.iconlast */
  margin-left: 2px;
}
.client-js .sound .sound-title::before {
  /* for sound.iconfirst */
  margin-right: 2px;
}
.client-js .sound.sound-playing .sound-title::after, .client-js .sound.sound-playing .sound-title::before {
  /* color the speaker icon in the "progressive" color */
  filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%);
}

/* -- 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: #1e1a17;
   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 #1e1a17;
   width: 5em;
   vertical-align: middle;
}
.infobox table td{
   padding: 2px;
   vertical-align: middle;
}
.infobox .title{
   background-color: #5e4f4b;
   color: #fff;
   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: #5e4f4b;
   color: #fff;
   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: #5e4f4b;
   border: 1px solid #1e1a17;
}
.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{
   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 #aaa 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: #5e4f4b;
   color: #fff;
   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 #aaa solid;
   margin-top: 2px;
   line-height:1;
   text-align: center;
   color:#ffffff;
   font-size: 10.5px;
   background:#5e4f4b;
   padding-top: 5px;
   display: block;
}
.infobox .drops.items li.group_end{
   border-bottom:5px #aaa 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: #1e1a17;
}
/* 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;
}
/* ------------------------------------------------------------------ */

/* 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: #1e1a17;
}

/* 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(30, 26, 23, 1);
}

.navbox-list {
    border-color: rgba(30, 26, 23, 1); /* Must match background color */
}

/* Level 1 color */
.navbox-title,
table.navbox th {
    background: #5e4f4b;
    color: #fff;
}

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

/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: rgba(30, 26, 23, 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 */

.tocnumber {
  color:#fff;
 }

#mf-wikiheader {
    border-width: 5px;
    color: #E0E0E0;
    text-align: center;
    display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;
    -ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;flex-wrap:wrap;
    -webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;
    -webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;
}

#mf-wikiheader > div:first-child {
    -webkit-flex-basis:480px;-moz-flex-basis:480px;-ms-flex-preferred-size:480px;flex-basis:480px;
    -webkit-box-flex:1;-webkit-flex-grow:1;-moz-flex-grow:1;-ms-flex-positive:1;flex-grow:1;
    -webkit-flex-shrink:1;-moz-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;
}

#mf-wikiheader > div:first-child > span:first-child {
    font-size: 24px;
}

#mf-wikiheader > .ext-info {
    border: #D23A00 1px solid;
    -webkit-flex-basis:1000px;-moz-flex-basis:1000px;-ms-flex-preferred-size:1000px;flex-basis:1000px;
    -webkit-box-flex:3;-webkit-flex-grow:3;-moz-flex-grow:3;-ms-flex-positive:3;flex-grow:3;
    -webkit-flex-shrink:99;-moz-flex-shrink:99;-ms-flex-negative:99;flex-shrink:99;
    margin: 0.75em 0;
    padding: 10px 0;
}

#mf-wikiheader .links {
    display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;
    -ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;flex-wrap:wrap;
    -webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;
    -webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;
    margin-bottom: 0.75em;
}

#mf-wikiheader .links > * {
    margin: 0 1.5em;
    -webkit-box-flex:0;-webkit-flex-grow:0;-moz-flex-grow:0;-ms-flex-positive:0;flex-grow:0;
    -webkit-flex-shrink:1;-moz-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;
    -webkit-flex-basis:auto;-moz-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;
}

#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-enemies .content {
    max-height: 390px;
}

@media(max-width: 413px) {
    #mf-enemies .content {
        max-height: 3900px;
    }
}

.footer {
  text-align: center;
  line-height: 1;
}

.float-right { float: right; }
.float-left { float: left; }
.float-none { float: none; }
a: {
	color: #E4B322 !important;
}
a:visited{
	color: #CD8815 !important;
}
a.new, a.new:visited{
	color: #F9001C !important;
}
a:hover, a:active {
	color: #E2C74D !important;
}