MediaWiki:Common.css

/***** CSS placed here will be applied to all skins on the entire site. *****/
@import url('/index.php?title=MediaWiki:Styles.css&action=raw&ctype=text/css');
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
/* main page elements */
.mpbutton {
   color: #ffffff;
   font-weight: bold;
   background: #5F110E;
   width: 180px;
   border-radius: 2px;
   text-align:center;
   margin: 5px;
   padding: 5px;
   font-size:100%;
   white-space: nowrap;
   display: inline-block;
   cursor: pointer;
}

.mpbutton:hover {
   background: #DC362B;
   color:#ffffff;
   text-decoration: none;
}

.mpbutton a,
.mpbutton a.external {
   color:#ffffff;
   text-decoration: none;
   display: block;
   width:100%;
   height: 100%;
   letter-spacing: 1px;
}

/* Tooltips */
.tooltip {
	position: relative;
	display: inline-block;
	text-decoration: underline #fff dotted;
	border-radius: 2px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width:max-content;
    background-color: #000;
    color: #FFFFFF;
    border: 1px solid #fff;
    text-align: center;
    padding: 5px 8px;
    position: absolute;
    z-index: 1;
    bottom: 95%;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-family: sans-serif;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltipsup {
	text-decoration: none;
}

.tooltip .tooltiptextsup {
	text-align:left;
	max-height:200px;
	overflow:auto;
}

.icon-tooltip .tooltip {
	text-decoration: none;
}

.icon-tooltip td {
    vertical-align: top;
}


/* Wiki */
html,
body {
	font-family: Hina Mincho, sans-serif;
	background-color: #000;
}

#firstHeading {
	font-family: Hina Mincho, sans-serif;
}

.mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5 {
    font-family: Hina Mincho, sans-serif;
}

 .mw-collapsible-toggle-default .mw-collapsible-text {
 	color: #888;
 }

/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect a {
    color: #888;
    font-style: italic;
}
.watchlistredir a {
    color: #888;
    font-style: italic;
}

/* Infobox template style */
.infobox {
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   border-radius: 20px;
   font-size: 11px;
   color: black;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
}
.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 solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}

/* Forum formatting (by -Algorithm & -Splaka) */
.forumheader {
     border: 1px solid #aaa;
     background-color: #f9f9f9; margin-top: 1em; padding: 12px;
}
.forumlist td.forum_edited a {
     color: black; text-decoration: none
}
.forumlist td.forum_title a {
     padding-left: 20px;
}
.forumlist td.forum_title a.forum_new {
     font-weight: bold; background: url(/images/4/4e/Forum_new.gif)
     center left no-repeat; padding-left: 20px;
}
.forumlist td.forum_title a.forum_new:visited {
     font-weight: normal; background: none; padding-left: 20px;
}
.forumlist th.forum_title {
     padding-left: 20px;
}

/* Colour the number of characters added/removed in the recent changes */
.mw-plusminus-pos {
  color: #006500;
}

.mw-plusminus-neg {
  color: #8B0000;
}

/* === Babel === */

div.babelbox {
   float: right;
   margin-left: 1em;
   margin-bottom: 0.5em;
   width: 246px;
   border: 1px solid #99B3FF;
   padding: 2px 0 2px 0;
}
.lang-blockN, .lang-block0, .lang-block1, .lang-block2, .lang-block3 {
   margin: 2px 4px 2px 4px; /* t, l, b, r */
   width:238px;
   border-collapse: collapse;
}
td.lang-codeN, td.lang-code0, td.lang-code1, td.lang-code2, td.lang-code3 {
   text-align:center;
   font-size:14pt;
   width:45px;
   height:45px;
}
td.lang-descriptionN, td.lang-description0, td.lang-description1,
td.lang-description2, td.lang-description3 {
  font-size:8pt;
  padding:4pt;
  line-height:1.25em
}

.lang-block0 {
   border:1px solid #FFB3B3;
}
td.lang-code0 {
  background-color: #FFB3B3;
  color: black;
}
td.lang-description0 {
  background-color: #FFE0E8;
  color: black;
}

.lang-block1,  .lang-block2, .lang-block3  {
   border:1px solid #99B3FF;
}
td.lang-code1, td.lang-code2, td.lang-code3 {
  background-color: #99B3FF;
  color: black;
}
td.lang-description1,  td.lang-description2, td.lang-description3 {
  background-color: #E0E8FF;
  color: black;
}

.lang-blockN {
   border:1px solid #6EF7A7;
}
td.lang-codeN {
  background-color: #6EF7A7;
  color: black;
}
td.lang-descriptionN {
  background-color: #C5FCDC;
  color: black;
}

/* Messagebox templates */
.messagebox {
   border: 1px solid #aaa;
   background-color: #f9f9f9;
   width: 80%;
   margin: 0 auto 1em auto;
   padding: .2em;
}
.messagebox.merge {
   border: 1px solid #c0b8cc;
   background-color: #f0e5ff;
   text-align: center;
}
.messagebox.cleanup {
   border: 1px solid #9f9fff;
   background-color: #efefff;
   text-align: center;
}
.messagebox.standard-talk {
   border: 1px solid #c0c090;
   background-color: #f8eaba;
}
.messagebox.nested-talk {
   border: 1px solid #c0c090;
   background-color: #f8eaba;
   width: 100%;
   margin: 2px 4px 2px 4px;
}
.messagebox.small {
   width: 238px;
   font-size: 85%;
   float: right;
   clear: both;
   margin: 0 0 1em 1em;
   line-height: 1.25em; 
}

/* default skin for navigation boxes */
table.navbox {
    background-color: #f9f9f9;
    border: 1px solid #aaa;
    clear: both;
    font-size: 90%;
    margin: 1em 0em 0em;
    padding: 2px;
    text-align: center;
    width: 100%;
}
 
table.navbox th {
    background-color: #ccf;
    padding-left: 1em;
    padding-right: 1em;
}
 
@media print {
    .navbox {
        display: none;
    }
}

/* Standard Navigationsleisten, aka box hiding thingy from .de.  Documentation at [[Wikipedia:NavFrame]]. */
 
div.Boxmerge,
div.NavFrame {
    margin: 0px;
    padding: 4px;
    border: 1px solid #aaa;
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.Boxmerge div.NavFrame {
    border-style: none;
    border-style: hidden;
}
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.NavPic {
    background-color: #fff;
    margin: 0px;
    padding: 2px;
    float: left;
}
div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: #ccf;
    position:relative;
}
div.NavFrame p {
    font-size: 100%;
}
div.NavFrame div.NavContent {
    font-size: 100%;
}
div.NavFrame div.NavContent p {
    font-size: 100%;
}
div.NavEnd {
    margin: 0px;
    padding: 0px;
    line-height: 1px;
    clear: both;
}
a.NavToggle {
    position:absolute;
    top:0px;
    right:3px;
    font-weight:normal;
    font-size:smaller;
}

/* Small reference list */
ol.references {
   font-size: 100%;
}
 
.references-small { font-size: 90%;}
/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */
/* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */
/* column-count is from the CSS3 module "CSS Multi-column Layout" */
/* Please ignore any validator errors caused by these two lines */
.references-2column {
  font-size: 90%;
  -moz-column-count:2;
  column-count:2;
}
 
.same-bg { background: none }
.fp-title {
	white-space: nowrap;
    border: 4px solid #fff;
    border-radius: .8rem;
    padding: .6rem;
    font-size: 1rem;
    text-align: center;
    margin: 0 auto .5rem auto;
    font-weight: 600;
    width: max-content;
}
.fp-main {
    display: grid;
    grid-gap: 1rem;
    grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e"
        "f"
        "g"
        "h"
        "i";
    grid-template-columns: 1fr;
}
@media screen and (min-width: 1290px) {
    .fp-main {
        grid-template-areas:
            "a a"
            "b d"
            "c e"
            "f g"
            "h i";
        grid-template-columns: 1fr 30%;
    }    
}
.mainpage-box {
    border: 2px solid #fff;
    border-radius: .4rem;
}

/* Social links */
#fpsociallinks {
    padding-right: 1em;
}
#fpsociallinks .fp-icon-flex {
    margin: 0 4px;
}
.fp-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1;
}
.fp-icon-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 7px 6px 0;
}
.fp-icon-flex * {
    vertical-align: middle;
}
.fp-icon-flex > div {
    margin-left: 4px;
}
.fp-icon-flex > div > * {
    display: block;
}
.fp-icon-flex a.external {
    background: none;
} 
.fp-icon-flex strong {
    margin-top: 3px;
    font-size: 1.125em;
}

/* For character and enemy stat tables */
.stat-table {
	border-spacing: 5px;
	border-radius: 20px;
	border: 2px solid #fff;
	background: #000;
	margin: auto;
	text-align: center;
    font-variant-numeric: tabular-nums;
}

.stat-table th a:not(.new):not(.mw-selflink):not(.mw-collapsible-text) {
	color: #fff;
}

.stat-table td, .stat-table th {
	padding: 3px;
}

.stat-table td td, .stat-table td th {
	background: #000;
	border: 2px solid #fff;
}

.stat-table caption {
	font-weight: bold;
}

/* For tables on the pages */
.wiztable {
	margin: auto;
	background-color: #fff;
	border-radius: 15px;
}
.wiztable th {
	background-color: #000;
}
.wiztable td {
	background-color: #000;
}

/* For member tables on the pages for groups and organizations */
.members {
	border-spacing: 1px;
	margin: auto;
	border-radius: 8px;
	background: #000;
	border: 2px solid #fff;
	text-align: center;
	font-weight: bold;
}

.members td, .members th {
	background: #000;
	padding: 2px;
}

.members tr:nth-child(odd) td {
	border: 2px solid #fff;
}

/*.pixel-art {
    image-rendering: pixelated;
}*/

rt {
    font-variant-east-asian: ruby;
}

/*A very common table styling, used by tables like the name charts*/
.basic {
	margin: auto;
	border-radius: 6px;
	border: 2px solid #000;
	border-spacing: 3px;
	background-color: #fff;
	text-align: center;
}

.basic th, .basic td {
	background-color: #000;
}

/*Tab*/
.tab_tab {
	border-radius: 7px 7px 0 0;
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 7px 7px 0 0;
	-khtml-border-radius: 7px 7px 0 0;
	-icab-border-radius: 7px 7px 0 0;
	-o-border-radius: 7px 7px 0 0;
	text-align: center;
	padding: 3px 5px;
	margin: 0px;
	border: 2px solid #fff;
	background-color: #222;
	white-space: nowrap;
	cursor: pointer;
}
span.tab_tab:hover, div.tab_tab:hover, td.tab_tab:hover {
	background-color: #000;
}
.tabselected {
	background-color: #000 !important;
	border-bottom: 2px solid #222;
	color: #d9d9d9;
}
.tabcontainer p {
	margin: 0;
}

/* Lazy cellpadding replacement */
.cellpadding-0 td, .cellpadding-0 th {
    padding: 0;
}

.cellpadding-1 td, .cellpadding-1 th {
    padding: 1px;
}

.cellpadding-2 td, .cellpadding-2 th {
    padding: 2px;
}

.cellpadding-3 td, .cellpadding-3 th {
    padding: 3px;
}

.cellpadding-4 td, .cellpadding-4 th {
    padding: 4px;
}

.cellpadding-5 td, .cellpadding-5 th {
    padding: 5px;
}

/*For item list templates, like WeaponStats or ItemData*/
.item-list {
	border: 2px solid #fff;
	background-color: #000;
	border-radius: 20px;
	text-align: center;
	border-spacing: 0px;
}

@media screen and (min-width: 851px){
table.item-list {
	overflow: hidden;
}
}
@media screen and (max-width: 850px){
table.item-list {
	overflow: auto;
}
}

.item-list tr:nth-child(even) {
	background-color: #000;
}

.item-list th a:not(.new):not(.mw-selflink):not(.mw-collapsible-text) {
	color: #fff;
}

/* For item locations, like ItemLoc  */
.location {
	border-spacing: 4px;
}

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

/* References */
ol.references li:target, sup.reference:target {
	background-color: #666;
	color: #d9d9d9;
}

/*Round*/
.round {
    border-radius: 15px;
}

.roundtl {
    border-top-left-radius: 15px;
}

.roundt {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.roundtr {
    border-top-right-radius: 15px;
}

.roundbl {
    border-bottom-left-radius: 15px;
}

.roundb {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.roundbr {
    border-bottom-right-radius: 15px;
}

.roundl {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.roundr {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}