Toggle search
Toggle menu
4.3K
7.7K
88
150.5K
Gensopedia
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
Created page with "→==This is for all the skins== Remember no preview: abbr.dtstart { border-bottom: none !important; } /* I copied some things over from Mediawiki:monobook.css that ..."
mNo edit summary
 
(862 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/*
/* CSS placed here will be applied to all skins */
==This is for all the skins==
Remember no preview
*/


abbr.dtstart {
@font-face {
border-bottom: none !important;
  font-family: 'AtkinsonHyperlegibleNext-Regular';
  src: url('/resources/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
      url('/resources/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
}


/*
@font-face {
I copied some things over from [[Mediawiki:monobook.css]] that should be in here
  font-family: 'subset-Karma-Regular';
*/
  src: url('/resources/assets/fonts/subset-Karma-Regular.woff2') format('woff2'),
div.no-bullet-list ul
      url('/resources/assets/fonts/subset-Karma-Regular.woff') format('woff');
{
  font-weight: 400;
    list-style-type: none;
  font-style: normal;
    list-style-image: none;
  font-display: swap;
}
}


div#siteNotice {text-align:center;
body {
  font-family: AtkinsonHyperlegibleNext-Regular, var(--font-family-base);
  font-variation-settings: 'GRAD' var(--font-grade);
  font-weight: var(--font-weight-normal);
}
}
/*rss icon. see [[template talk:latest news]] */


*.rss {
:root {
color: #FFFFFF; background-color: #FF5500; background-image: none !important; border-color: #FF5500; border-style: outset; text-decoration: none !important; padding-left: 0.2em; padding-right: 0.2em; border-width: 0.15em; font-size: 95%; line-height: 95%; font-family: verdana, sans-serif; font-weight: bold;
  /* common */
  --theme-header-color:#0077c0;
}
}


/*kill auto-underline in opera (hopefully) make cool hover effect. possibly change to :active for hover effect. [[user:bawolff|Bawolff]] ☺☻[[image:smile.png]] 04:59, 1 January 2006 (UTC). removed no underline, as Amgine didn't like it. [[user:bawolff|Bawolff]] ☺☻[[image:smile.png]] 05:04, 1 January 2006 (UTC) */
h1:after {
*.rss:hover {border-style:inset;
background:none repeat scroll 0 0 #0077c0;
bottom:-0;
content:"";
display:block;
height:2px;
position:relative;
width:100%
}
}


/****************************************/
/*******  Start DRUID CSS rules *********/
/****************************************/


div.no-bullet-list ul
.druid-container {
{
    /* These variables are designed to inherit from your wiki's color variables.
     list-style-type: none;
      If your wiki uses a different naming scheme, change the inner names to match yours.
     list-style-image: none;
      If your wiki doesn't use color variables you should consider doing so,
      otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
    --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
   
    --druid-secondary-background-color: var(--wiki-accent-color, #0077c0);
    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 0, 119, 192);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
   
    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
    --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
   
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
    --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
   
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
     --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
     --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}
}


/*Fix the space between the edit check boxes on editintros. See https://bugzilla.wikimedia.org/show_bug.cgi?id=9252 */
/* ---------------------------------  */
/*    Safe to edit ABOVE this line    */
/* ---------------------------------  */


.editOptions p {display:inline;}
/* ---------------------------------  */
/*    Do not edit below this line    */
/* ---------------------------------  */


.druid-container {
    border-image-source: url(/images/2/2c/Infobox_border.png);
    border-image-slice: 15;
    border-image-width: 13px;
    border-image-repeat: round;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 30px 30px;
    background: none;
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
width:100%;
max-width:22em;
    box-sizing: border-box;
    position: relative;
}


/*
.druid-container::after {
/* Interlining in titles. To prevent title overlap. Not sure if should be in monobook.css as this is diff in diff skins. yell at me if this breaks anything in any of the skins. */
    content: "";
    position: absolute;
h1.firstHeading { line-height: 1em; }
    bottom: 0;
    left: 50%;
    width: 25px;  /* adjust to ornament’s width */
    height: 15px; /* adjust to ornament’s height */
    background: url(/images/7/7f/Infobox_bottom.png) no-repeat center bottom;
    background-size: contain; /* keeps proportions */
    transform: translate(-50%, 3px); /* add vertical shift */
    pointer-events: none;
}


@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}


/*
.druid-main-images-file,
==Backgrounds==
.druid-main-image {
*/
    text-align:center;
div#football-bg-1 {  
    background: url(/images/0/07/Imagebox.webp) no-repeat center;
background-image: url('//upload.wikimedia.org/wikinews/en/5/5a/Badge_right_top.png');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}
}
/************************/
/*


==Dynamic hidden boxes==
.druid-infobox .druid-title,
Copied from [[w:Mediawiki:monobook.css]] (not common.css). rev: en.wikipedia.org/w/index.php?title=MediaWiki:Monobook.css&oldid=73496939 originally from german 'pedia apearently. note: proably under GFDL.
.druid-infobox .druid-section {
Might make work better*/
    border-image-source: url(/images/0/07/Title_border.png);
div.Boxmerge,
    border-image-slice: 12;
div.NavFrame {
    border-image-width: 12px;
        margin: 0px;
    border-image-repeat: repeat;
        padding: 2px;
    border-width: unset;
        border: 1px solid #aaaaaa;
    border-style: solid;
        text-align: center;
    border-radius: 0;
        border-collapse: collapse;
    background:rgba(var(--druid-secondary-background-color--rgb));
        font-size: 95%;
    color:var(--druid-secondary-background-label-color);
}
    text-align:center;
div.Boxmerge div.NavFrame {
    font-size:1.5em;
        border-style: none;
    padding:1px;
        border-style: hidden;
}
}
div.NavFrame + div.NavFrame {
        border-top-style: none;
        border-top-style: hidden;
}
div.NavPic {
        background-color: #ffffff;
        margin: 0px;
        padding: 2px;
        float: left;
}
div.NavFrame div.NavHead {
        height: 1.6em;
        font-weight: bold;
        font-size: 100%;
        background-color: #efefef;
        position:relative;
        padding-right:2em; /*Possibly should be in ch. stop down arrow from running together w/title */
        overflow:hidden; /*otherwise runs into text*/
}
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;
}
/*
===Ugly nav===
*/
div.UglyNav div.Boxmerge,
div.UglyNav div.NavFrame {
        margin: 0px;
        padding: 2px;
        border: none;
        text-align: left;
        border-collapse: inherit;
        font-size: 100%;
}


.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
    font-family:'subset-Karma-Regular', sans-serif
}


div.UglyNav div.NavPic {
.druid-label {
        background-color: transparent;
    font-weight:bold;
        margin: 0px;
    text-align: right;
        padding: 2px;
box-sizing: border-box;
        float: none;
}
}
div.UglyNav div.NavFrame div.NavHead {
        height: auto;
        font-weight: normal;
        font-size: medium;
        background-color: transparent;
        position:relative;
}
div.UglyNav div.NavFrame p {
        font-size: medium;
}
div.UglyNav div.NavFrame div.NavContent {
        font-size: medium;
}
div.UglyNav div.NavFrame div.NavContent p {
        font-size: medium;
}


/* Standard table formatting */
.druid-row > .druid-label {
/* <pre><nowiki> */
    width: 38%;
    flex-shrink: 0;
/* wikitable/prettytable class for skinning normal tables */
table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaaaaa solid;
  border-collapse: collapse;
}
}
 
table.wikitable th, table.wikitable td,
.druid-row > .druid-label,
table.prettytable th, table.prettytable td {
.druid-row > .druid-data {
  border: 1px #aaaaaa solid;
padding-inline: 0.3em;
  padding: 0.2em;
    font-size: 0.9em;
}
}
 
table.wikitable td,
.druid-data-Description {
table.prettytable td {
    font-size: 0.7em;
  background: #f9f9f9;
    font-style: italic;
    text-align: center;
}
}
 
table.wikitable th,
.druid-main-image,
table.prettytable th {
.druid-main-images {
  background: #f2f2f2;
    padding:5px;
  text-align: center;
}
}
 
table.wikitable caption,
.druid-main-image img,  
table.prettytable caption {
.druid-main-images img {
  margin-left: inherit;
    max-width:100%;
  margin-right: inherit;
    height:auto;
}
}


/*************************
.druid-main-images-labels {
** Score board styles  **
    display:flex;
************************* 
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}


Used to be at [[user:SportsBot/common.css]] */
.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}


table.sportsbotScoreboard {
.druid-main-images-label.focused {
  border: 1px solid #000;
    background:var(--druid-link-color);
  margin-bottom: 5px;
    color:var(--druid-link-label-color);
}
}
table.sportsbotScoreboard th {
 
  background-color: #7fa3b0;
.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
}
}
table.sportsbotScoreboard td {
 
  width: 30px;
.druid-toggleable-data:not(.focused),
  text-align: center;
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}
}
table.sportsbotScoreboard td.team {
 
  font-size: 90%;
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
  width: 150px !important;
    display:none;
  text-align: left !important;
}
}


.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}


.druid-grid {
    display:grid;
    gap: 0.3em;
padding: 0.35em;
}


/* == Standings table style == */
.druid-grid-item {
.standingstable {
    /* background:var(--druid-tertiary-background-color); */
     border: 1px solid #000000;
    padding:0.25em;
     font-size: 90%;
     border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
     border-radius: 2px;
}
}


.standingssection {
.druid-grid-item > .druid-label,
    font-size: 125%;
.druid-grid-item > .druid-data {
text-align: center;
}
}


.standingssubsection {
.druid-data-wide {
    vertical-align: middle;
width:100%;
    font-size: 110%;
    background-color: #b4b4b4;
}
}


.standingsheader {
.druid-section-container > .druid-collapsible {
    background-color: #c5c5c5;
display: flex;
    text-align:center;
justify-content: space-between;
    font-weight: bold;
align-items: center;
}
}


.standingsrow {
.druid-collapsed {
     background-color: #f7f7f7;
     display:none!important;
    text-align:center;
}
}


.standingsrow2 {
.druid-collapsible {
     background-color: #e6e6e6;
     cursor:pointer;
     text-align:center;
     position:relative;
}
}


.standingsrow .team, .standingsrow2 .team {
.druid-collapsible::after {
     width:200px;
     content:'\2013';
     text-align:left;
    display:block;
    position:absolute;
    right:10px;
    font-size:20px;
     font-weight:bold;
    color:var(--druid-secondary-background-label-color);
}
}


.nounderlines a {
.druid-collapsible-collapsed::after {
     text-decoration: none;
     content:'+';
}
}


/* Article message box template styles */
.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
table.ambox {
   display: none;
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
  background: #f8fcff;
  border: 1px solid #aaa;
   border-left: 15px solid #39f;       /* Default "notice" blue */
}
}
table.ambox th, table.ambox td {      /* The message body cell(s) */
 
  padding: 0.25em 0.5em;             /* 0.5em left/right */
/*****************************************
Div support
*****************************************/
 
div.druid-row {
    display:flex;
    margin-block: 1px;
    padding: 3px 0px;
    border-bottom: 1px solid #a2a9b1;
}
}
table.ambox td.ambox-image {         /* The left image cell */
 
  width: 52px;
div.druid-row + div.druid-row {
  padding: 2px 0px 2px 0.5em;        /* 0.5em left, 0px right */
margin-top: 0;
  text-align: center;  
}
}
table.ambox td.ambox-imageright {     /* The right image cell */
 
  width: 52px;  
div.druid-row > .druid-label {
  padding: 2px 0.5em 2px 0px;        /* 0px left, 0.5em right */
background: none;
  text-align: center;  
    color:rgba(var(--druid-secondary-background-color--rgb));
}
}
table.ambox-notice {
 
   border-left: 15px solid #39f;       /* Blue */
.druid-infobox .druid-title {
/* border-right: 10px solid #39f; */  /* If you want two blue bars */
   font-weight: 700;
  font-family:'subset-Karma-Regular', sans-serif
}
}
table.ambox-serious {
 
   border-left: 15px solid #c00;       /* Red */
div.druid-row:last-child {
   border-bottom: none;
  padding-bottom: 10px;
}
}
table.ambox-content {
 
  border-left: 15px solid #f63;       /* Orange */
.druid-infobox #toc {
    display:none;
}
}
table.ambox-style {
 
  border-left: 15px solid #fc3;      /* Yellow */
 
}
/********
table.ambox-merge {
Custom display classes
  border-left: 15px solid #95b;       /* Purple */
*********/
 
div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
    flex-direction: column;
}
}


/* rounded corners class for block elements */
.druid-stacked.druid-row > .druid-label,
.roundedCorners {
.druid-stacked .druid-row > .druid-label {
  -moz-border-radius: 1em;
    text-align: left;
  -webkit-border-radius: 1em;
    width: 100%;
  border-radius: 1em;
    flex-basis:unset;
 
}
}


.semiblanking {
.druid-stacked.druid-row > .druid-data,
display: none;
.druid-stacked .druid-row > .druid-data {
    padding-left: .75em;
}
}


/*See [[MediaWiki:NavigationTabs.js]]. copied from wikibooks*/
/* ---------------------------------  */
.navtabs .tabs li { list-style:none; }
/*    Do not edit above this line    */
.navtabs .tabs a {
/* ---------------------------------  */
  text-decoration:none;
  text-transform:uppercase;
  outline-width:0px;
  font-size:x-small;
  font-weight:bold;
  color:black;
  }
.navtabs .tabs .inactive { background:#bbb; padding:1ex; }
.navtabs .tabs .selected { background:#999; padding:1.1ex; }
.navtabs .tabs .inactive:hover { background:#f75; }
.navtabs .contents { padding:1ex; border:3px solid #999; }


/* hide the Comments_talk namespace */
/* ---------------------------------  */
body.ns-102 #ca-talk {display:none;}
/* Local overrides go below this line */
body.ns-103 #ca-edit {display:none;}
/* --------------------------------- */
body.ns-103 #ca-addsection {display:none;}
body.ns-90 #ca-talk {display: none;} /*thread pseudo ns*/


/* Other comments/lqt stuff. (needs js) */


.lqt_start_discussion span.ui-button-text {font-size: medium;font-weight: bold; color:black}
/****************************************/
.lqt-talkpage-header { text-align: center }
/*******  End DRUID CSS rules  *********/
.lqt-talkpage-header {border: none}
/****************************************/
html body .lqt-edit-introduction {display: none}
html .lqt-post-wrapper {border-width: thin }
html .lqt-thread-topmost > .lqt-post-wrapper {border-width: thin }
.lqt_toc {margin-bottom: 2em;}
.lqt_threadlevel_commands {margin-top: 0.5em;}
.lqt_thread_heading {border-bottom: none }
.lqt_view_options {display: none }
html .lqt-thread-replies-interruption {border-left: thin solid silver }


.lqt-command-summarize {display: none !important}
/** as of Module:navbox version 1.1.1 **/
/* end other comments lqt stuff */


/*Ticker2 (animated ticker)*/
/*********************************************************************************************************************
ul.actualTicker li {list-style-type:none; list-style-image:none;}/*mostly for IE*/
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
ul.actualTicker li {display:inline;}
**********************************************************************************************************************/
ul.actualTicker span.tickerIntroduction {font-weight:bold;padding-right:0.5em;}
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}


div.isATicker, div#singleTickerForPage {display:none;}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}


/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
display: inline;
}


/*###################
/* Hide empty list items */
##Tabber stuff. See code in mediawiki:common.js
.hlist .mw-empty-li {
################*/
display: none;
}


/*===Wikinews specific==== */
/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
/* "space, Middle Dot, space"
We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
/* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space"
      There may (and likely) be an extra whitespace between <li>s,
      therefore we have to use a space character as last character of this sequence.
      By this way, the last space and the next whitespce will collapse as a single space,
      to make the whitespace on both sides of the middle dot the same width.
    */
content: "\20\A0\2022\A0\20";
font-weight: inherit;
}


/*horizTabBox*/
/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
content: "\20(";
font-weight: inherit;
}


div.horizTabBox ul.tabbernav li a {
.hlist dd ol::after,
background-color:#7ec9fd;
.hlist dd ul::after,
margin-left: 15px;
.hlist dd dl::after,
border-bottom: solid 1px #7ec9fd;
.hlist dt ol::after,
padding-left:0.8em;
.hlist dt ul::after,
padding-right:0.8em;
.hlist dt dl::after,
-moz-border-radius:1em 1em 0 0; /* this should be replaced with images for browsers that don't support it somehow*/
.hlist li ol::after,
/*webkit doesn't like too big radii or having it in the shorthand form. Make sure radi < 1.7em */
.hlist li ul::after,
-webkit-border-top-left-radius:1em;
.hlist li dl::after {
-webkit-border-top-right-radius:1em;
content: ")";
border-radius:1em 1em 0 0;
font-weight: inherit;
}
}


div.horizTabBox ul.tabbernav li.tabberactive a
/* Put ordinals in front of ordered list items */
{
.hlist ol {
background-color: #bce1ff;
counter-reset: listitem;
border-bottom: 3px solid #bce1ff;
margin-left:10px;
}
}
div.horizTabBox .tabbertab
 
{
.hlist ol > li {
border:solid 2px #7ec9fd;
counter-increment: listitem;
padding:0;
}
}
div.horizTabBox ul.tabbernav li a:hover
 
{
.hlist ol > li::before {
color: #000;
content: " " counter(listitem) ".\20";
background: #bce1ff;
border-bottom: 3px solid #bce1ff;
}
}


div.horizTabBox ul.tabbernav li.tabberactive a:hover
/********************************************
{
* End semantically-correct horizontal lists *
color: #000;
*********************************************/


/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: none; /* for entire navbox */
  --navbox-padding: 4px;
  --navbox-gap: 3px; /* when using zero-value, it must be 0px */
  --navbox-outer-border-color: var(--wiki-content-border-color--accent);
  --navbox-outer-border-width: 1px;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-title-color: var(--wiki-accent-label-color);
  --navbox-title-background: var(--wiki-accent-color);
  --navbox-title-icon-color: var(--wiki-accent-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--wiki-accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-cell-padding: 0.25em 0.5em;
  --navbox-above-background: rgba(var(--wiki-content-text-color--rgb), 0.15);
  --navbox-above-color: var(--wiki-content-text-color);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-text-color);
  --navbox-heading-color: var(--navbox-title-color);
  --navbox-heading-background: var(--navbox-title-background);
  --navbox-heading-icon-color: var(--navbox-title-icon-color);
  --navbox-heading-link-color: var(--navbox-title-link-color);
  --navbox-heading-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-heading-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-heading-redlink-color: var(--navbox-title-redlink-color);
  --navbox-heading-link-decoration: var(--navbox-title-link-decoration);
  --navbox-heading-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-list-background: rgba(var(--wiki-content-text-color--rgb), 0.05);
  --navbox-list-background--striped: rgba(var(--wiki-content-text-color--rgb), 0.08);
  --navbox-list-color: var(--wiki-content-text-color);
  /* --navbox-group-* also apply to .ranger-subgroup */
  --navbox-group-text-align: left;
  --navbox-group-background: rgba(var(--wiki-accent-color--rgb), 0.2);
  --navbox-group-color: var(--wiki-content-text-color);
  --navbox-tree-line-color: var(--navbox-group-background);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
}
}
div.horizTabBox {
.ranger-navbox.pill,
width:50%;
.ranger-navbox.pill-mobile{
text-align:left;
  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
margin-left:auto;
  --navbox-pill-gap: 0.3em;
margin-right:auto;
  --navbox-pill-padding: 0.25em 0.75em;
/*min-width:41em;
  --navbox-pill-border-radius: 3px;
max-width:47em;
  --navbox-pill-box-shadow: none;
*/
  --navbox-pill-background: rgba(var(--wiki-content-text-color--rgb), 0.05);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: var(--navbox-pill-background);
  /* remove list cell background */
  --navbox-list-background: none;
  --navbox-list-background--striped: rgba(var(--wiki-content-text-color--rgb), 0.03);
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--wiki-accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}
}


/* IMPORTANT: keep width:80% above or it will suck on IE*/
.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: calc(1em - 2px);
  margin: 0.5em auto;
  background: var(--navbox-background);
  line-height: 1.5;
}


.ranger-navbox * {
  border: 0;
}
.ranger-navbox,
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  padding:.5em calc(1.5em + 0.375rem); /* left and right padding equal to the size and position of the edit/collapse buttons */
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: 125%;
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-heading-color);
  background: var(--navbox-heading-background);
  font-size: 110%;
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-heading-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-heading-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-heading-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-heading-link-color--hover);
}
.ranger-navbox .ranger-meta{
  position: absolute;
  left: 0.375rem;
  top: 0.625em;
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: #FFF;
  box-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta .nv-view{
  --mask: var(--icon-metalinks);
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: 0.5em;
  top: 0.5em;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  right: 0.5em;
  top: 0.5em;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: #FFF;
  transform: scaleY(-1);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-heading-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-above,
.ranger-navbox .ranger-below,
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-list{
  padding: var(--navbox-cell-padding);
  width: unset;
}
.ranger-navbox .ranger-above,
.ranger-navbox .ranger-below{
  text-align: left; /* It's easy to center the content via <center></center> if needed. */
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
}


/* pict box */
.ranger-navbox .ranger-section-body,
.ranger-navbox .ranger-sublist{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
}
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup,
.ranger-navbox .align-left{
  text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup,
.ranger-navbox .align-center{
  text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup,
.ranger-navbox .align-right{
  text-align: right;
}


div.pictChanger ul.tabbernav {line-height: 2.4;}
.ranger-navbox .ranger-listbox > .ranger-wrap{
div.pictChanger ul.tabbernav li a {border: #CCC 1px solid}
  background: var(--navbox-list-background);
div.pictChanger {width:400px;}
  color: var(--navbox-list-color);
div.pictChanger div.tabbertab {text-align:left;}
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
display: inline-block;
}


div.tabberNoBorder div.tabbertab,  
/* responsive */
div.tabberNoBorder ul.tabbernav {
@media screen and (max-width: 720px) {
    border: none;
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: left;
    white-space: normal;
  }
 
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  } 
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
/* remove middle dots betweem items */
.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill-mobile .hlist dd ol::before,
.ranger-navbox.pill-mobile .hlist dd ul::before,
.ranger-navbox.pill-mobile .hlist dd dl::before,
.ranger-navbox.pill-mobile .hlist dt ol::before,
.ranger-navbox.pill-mobile .hlist dt ul::before,
.ranger-navbox.pill-mobile .hlist dt dl::before,
.ranger-navbox.pill-mobile .hlist li ol::before,
.ranger-navbox.pill-mobile .hlist li ul::before,
.ranger-navbox.pill-mobile .hlist li dl::before,
.ranger-navbox.pill-mobile .hlist dd ol::after,
.ranger-navbox.pill-mobile .hlist dd ul::after,
.ranger-navbox.pill-mobile .hlist dd dl::after,
.ranger-navbox.pill-mobile .hlist dt ol::after,
.ranger-navbox.pill-mobile .hlist dt ul::after,
.ranger-navbox.pill-mobile .hlist dt dl::after,
.ranger-navbox.pill-mobile .hlist li ol::after,
.ranger-navbox.pill-mobile .hlist li ul::after,
.ranger-navbox.pill-mobile .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill-mobile .hlist ul,
.ranger-navbox.pill-mobile .hlist ol,
.ranger-navbox.pill-mobile .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* further tweak to make text flow looks better for <li> in <ol> */
.ranger-navbox.pill-mobile .hlist li:not(:has(li,ul,ol)){
  display: inline-block;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill-mobile .hlist dd:hover,
.ranger-navbox.pill-mobile .hlist dd:focus,
.ranger-navbox.pill-mobile .hlist dt:hover,
.ranger-navbox.pill-mobile .hlist dt:focus,
.ranger-navbox.pill-mobile .hlist li:hover,
.ranger-navbox.pill-mobile .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
}
/*********************
* End Template:Navbox*
**********************/


/*
.wikitable {
===Generic defaults===
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    border-image-source: url(/images/2/2c/Infobox_border.png);
    border-image-slice: 15;
    border-image-width: 13px;
    border-image-repeat: round;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 30px 30px;
    border-collapse:separate;
    margin:1rem 0 1rem 0;
    max-width:100%;
}


Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
.wikitable tr:nth-child(odd) {
see http://www.barelyfitz.com/projects/tabber/
    background: rgba(0, 119, 192, .1);
*/
}
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */


/*--------------------------------------------------
.citizen-overflow-wrapper {
  REQUIRED to hide the non-active tab content.
    max-width:100%
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
}


/*--------------------------------------------------
.wikitable-title {
  .tabber = before the tabber interface is set up
    border-image-source: url(/images/0/07/Title_border.png);
  .tabberlive = after the tabber interface is set up
    border-image-slice: 12;
  --------------------------------------------------*/
    border-image-width: 12px;
.tabber {
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0;
    background:var(--theme-header-color);
    color:#FFF;
    text-align:center;
    font-size:1em;
    padding:1px;
}
}
.tabberlive {
 
margin-top:1em;
.headerSort {
    border-image-source: url(/images/0/07/Title_border.png);
    border-image-slice: 12;
    border-image-width: 12px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0;
    background:var(--theme-header-color);
    color:#FFF;
    text-align:center;
    font-size:1em;
    padding:1px;
}
}


/*--------------------------------------------------
.wikitable-nova {
  ul.tabbernav = the tab navigation list
    border-image-source: url(/images/2/2c/Infobox_border.png);
  li.tabberactive = the active tab
    border-image-slice: 15;
  --------------------------------------------------*/
    border-image-width: 13px;
ul.tabbernav
    border-image-repeat: round;
{
    border-width: unset;
margin:0;
    border-style: solid;
padding: 3px 0;
    border-radius: 0 0 30px 30px;
border-bottom: 1px solid #CCC;
    border-collapse:separate;
font: bold 12px Verdana, sans-serif;
    margin:1rem 0 1rem 0;
    flex:1 1 50%;  
    max-width:48%;  
    box-sizing:border-box;
}
}


ul.tabbernav li
 
{
#mw-indicator-Japan {
list-style: none;
filter:none
margin: 0;
display: inline;
}
}


ul.tabbernav li a
#home-nav {
{
margin-top:1rem
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #ccc;
border-bottom: none;
background: #f2f7ff;
text-decoration: none;
}
}


ul.tabbernav li a:link { color: #448; }
#home-nav .home-card__background:after {
ul.tabbernav li a:visited { color: #667; }
background:linear-gradient(to right,#000, 33%, transparent);
bottom:0;
content:"";
display:block;
left:0;
pointer-events:none;
position:absolute;
right:0;
top:0
}


ul.tabbernav li a:hover
#home-nav .home-card__foreground {
{
align-items:flex-end;
color: #000;
color:#fff;
background: #fff9f2;
display:flex;
border-color: #CCC;
font-size:150%;
font-weight:500;
height:100%;
padding:0 .938rem;
pointer-events:none;
}
}


ul.tabbernav li.tabberactive a
.home-grid {
{
display:grid;
background-color: #fff;
grid:auto-flow dense/repeat(auto-fit,minmax(15.375rem,1fr));
border-bottom: 1px solid #fff;
grid-auto-rows:minmax(3rem,auto);
grid-gap:.625rem
}
}


ul.tabbernav li.tabberactive a:hover
.home-card {
{
border-radius:8px;
color: #000;
font-size:.875rem;
background: white;
height:5.82rem;
border-bottom: 1px solid white;
position:relative
}
}


/*--------------------------------------------------
.home-card__background {
  .tabbertab = the tab content
background:#000;
  Add style only after the tabber interface is set up (.tabberlive)
border-radius:4px;
  --------------------------------------------------*/
bottom:0;
.tabberlive .tabbertab {
left:0;
padding:5px;
position:absolute;
border:1px solid #CCC;
right:0;
border-top:0;
top:0
}


/* If you don't want the tab size changing whenever a tab is changed
.home-card__background img {
    you can set a fixed height */
height:100%;
width:100%;
object-fit:cover;
}


/* height:200px; */
.home-card__foreground {
position:absolute
}


/* If you set a fix height set overflow to auto and you will get a
.home-card.home-card--button {
    scrollbar when necessary */
background:#242a31;
overflow:hidden;
padding:0
}


/* overflow:auto; */
.home-card--button img {
transition:transform .2s ease
}
}


/* If desired, hide the heading since a heading is provided by the tab */
.home-card--button:hover img {
.tabberlive .tabbertab h2 {
transform:scale(1.1)
display:none;
}
}
.tabberlive .tabbertab h3 {
 
display:none;
.home-link {
display:grid;
font-size:.875rem;
font-weight:500;
grid-gap:.375rem;
margin-top:.375rem;
text-align:center
}
}


/* Example of using an ID to set different styles for the tabs on the page */
span.hidden,span.citizen-section-indicator.citizen-ui-icon.mw-ui-icon-wikimedia-collapse,div.citizen-typeahead__labelItem {
.tabberlive#tab1 {
display:none
}
}
.tabberlive#tab2 {
 
table.timeline {
display: table;
border-bottom: 0;
background:transparent
}
}
.tabberlive#tab2 .tabbertab {
 
height:200px;
table.timeline tr {
overflow:auto;
display: flex;
flex-direction: column;
padding-left: 20px
}
}


/* Infobox templates */
table.timeline tr td:first-child {
.infobox {
padding-bottom: 0;
  border: 1px solid #aaa;
font-size: 1rem;
  background-color: #f9f9f9;
font-weight: bold;
  color: black;
display: list-item;
  margin-bottom: 0.5em;
margin-left: -7px;
  margin-left: 1em;
padding-left: 7px;
  padding: 0.2em;
padding-top: 0.8rem
  float: right;
  clear: right;
}
}
.infobox td,
 
.infobox th {
table.timeline tr td {
  vertical-align: middle;
border-bottom: 0
}
}
.infobox caption {
 
  font-size: larger;
table.timeline tr td:last-child {
  margin-left: inherit;
padding-top: 0.2rem;
padding-left: 0;
padding-right: 0
}
}
.infobox.bordered {
 
  border-collapse: collapse;
.ranger-navbox .ranger-title {
  color: #FFF;
  font-size: 1rem;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border: 2px solid #fff;
}
}
.infobox.bordered td,
 
.infobox.bordered th {
.ranger-navbox .ranger-title-S1 {
  border: 1px solid #aaa;
  background: no-repeat url("/images/5/58/Navbar_Suikoden.webp");
  background-color: #008d7e;
}
}
.infobox.bordered .borderless td,
 
.infobox.bordered .borderless th {
.ranger-navbox .ranger-title-S2 {
  border: 0 solid #aaa;
  background: no-repeat url("images/0/06/Navbar_Suikoden_II.webp");
  background-color: #427da7;
}
}
.infobox.sisterproject {
 
  width: 20em;
.ranger-navbox .ranger-title-G1 {
  font-size: 90%;
  background: no-repeat url("images/a/a4/Navbar_Genso_Suikogaiden_Vol.1.webp");
  background-color: #cdccd9;
}
}
 
.archive-box {
.ranger-navbox .ranger-title-G2 {
  border: 1px solid #aaf;
  background: no-repeat url("images/8/87/Navbar_Genso_Suikogaiden_Vol.2.webp");
  background-color: #f2f2f9;
  background-color: #cdccd9;
  color: #000;
  margin-bottom: 0.5em;
  margin-left: 1em;
  padding: 0.2em;
  float: right;
  clear: right;
  text-align: center;
}
}


.ranger-navbox .ranger-title-CS {
  background: no-repeat url("images/c/ca/Navbar_Genso_Suikoden_Card_Stories.webp");
  background-color: #cfbd90;
}


/* [[Template:Lead 2.0]] */
.ranger-navbox .ranger-title-S12 {
.l_table {
   background: no-repeat url("images/d/d4/Navbar_Suikoden_I&II.png");
   border: 0px;
   background-color: #0f1859;
  height: 100%;
}
   width: 100%;
}


.l_table tr {
.ranger-navbox .ranger-title-S3 {
   height: 100%;
   background: no-repeat url("images/b/b8/Navbar_Suikoden_III.webp");
}
  background-color: #bc1c23;
}


.l_table td {
.ranger-navbox .ranger-title-S4 {
   width: 100%;
   background: no-repeat url("images/2/27/Navbar_Suikoden_IV.webp");
}
  background-color: #006994;
}


.l_box {
.ranger-navbox .ranger-title-ST {
}
  background: no-repeat url("images/0/0e/Navbar_Suikoden_Tactics.webp");
  background-color: #93ac8b;
}


.l_image {
.ranger-navbox .ranger-title-S5 {
   vertical-align:top;
   background: no-repeat url("images/a/af/Navbar_Suikoden_V.webp");
  padding-bottom: 5px;
   background-color: #ceb25e;
   padding-right: 8px;
}
  float: left;
}


.l_title {
.ranger-navbox .ranger-title-HS {
   font-size: 150%;
   background: no-repeat url("images/3/3b/Navbar_Genso_Suikoden_Tierkreis_Hoshikuzu_no_Shiro.webp");
  font-style: bold;
   background-color: #7b726b;
  vertical-align: top;
}
   padding-bottom: 5px;
}


.l_title a:link {
.ranger-navbox .ranger-title-TK {
   color: #000000;
   background: no-repeat url("images/4/47/Navbar_Suikoden_Tierkreis.webp");
   text-decoration: none;
   background-color: #6d5849;
}
}
.l_title a:visited {
  color: #000000;
  text-decoration: none;
}


.l_title a:hover {
.ranger-navbox .ranger-title-PS {
   color: #000000;
   background: no-repeat url("images/0/03/Navbar_Pachislot_Genso_Suikoden.webp");
   text-decoration: underline;
   background-color: #3d6b98;
}
}


.l_title a:active {
.ranger-navbox .ranger-title-HT {
   color: #000000;
   background: no-repeat url("images/4/43/Navbar_Genso_Suikoden_Tsumugareshi_Hyakunen_no_Toki.webp");
   text-decoration: none;
   background-color: #008865;
}
}


.l_summary {
.ranger-navbox .ranger-title-SL {
   vertical-align: top;
   background: no-repeat url("images/c/ce/Navbar_SL.png");
   font-size: 100%;
   background-color: #046a9d;
}
}


.l_tail {
.ranger-navbox .ranger-title-GS {
   font-size: 90%;
   background: no-repeat url("images/2/2d/Navbar_Genso_Suikoden.webp");
   height:15px;
   background-color: #00307c;
}
}


.l_img_type {
.ranger-navbox .ranger-title-RN {
   /*float: left;*/
   background: no-repeat url("images/0/01/Navbar_Runes.webp");
   padding-bottom: 3px;
   background-color: #294b80;
}
}


#mp-banner-container {
position:relative;
border:1px solid #0077c0;
border-radius:5px;
height: 23em;
overflow:hidden;
}


.l_edit {
#mp-welcome {
  clear: left;
position:relative;
  float: right;
display:flex;
}
flex-flow:column nowrap;
/*end lead stuff */
align-items:center;
/* float in the title bar (Ex little FA icons in top-right corner) */
justify-content:center;
/*! important is to overide legacy inline stuff */
height:100%;
/*Vector.css overides this for vector! */
width:100%;
/*This assumes that the page body is not relatively positioned (aka in everything but vector)*/
filter:drop-shadow(0px 2px 5px #9D98FF);
.float_in_title { position: absolute; z-index: 100; right: 20px; top: 20px  !important;}
font-family:var(--wiki-heading-font-family);
font-size: 200%;
color:#fff;
text-shadow: 1px 1px 2px black;
z-index:2;
padding:1em 0;
box-sizing:border-box;
}


/* Temp for google News */
#mp-title {
.GoogleNews {
text-align:center;
  display:none;
max-width:70%;
  font-size: 50%;  
}
}


/* Remove Search box from LQT */
#mp-banner {
.lqt-talkpage-search{
position:relative;
display: none;
width:100%;
height:100%;
top:-100%;
filter:blur(5px) brightness(50%);
z-index:1;
}
}


/*Make js errors more noticeable (For EasyPeerReview) */
.skin-theme-clientpref-night #mp-banner {
#mw-js-message.mw-js-message-mwapi-error { border: thick red solid ; font-size:larger}
background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
background-size:cover;
background-repeat:no-repeat;
background-position:top center;
}


.skin-theme-clientpref-day #mp-banner {
    background: url(https://gensopedia.org/images/5/5e/Main_page_banner_light.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}


/* For main page, but used elsewhere so moved here */
.skin-theme-clientpref-os #mp-banner {
/* [[Template:Main page header]] */
background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
/* DO NOT USE common.css/Main Page */
    background-size: cover;
/* i got annoyed this only worked on main page - bawolff */
    background-repeat: no-repeat;
.mp_header {
    background-position: top center;
  background-image:url('//upload.wikimedia.org/wikipedia/commons/7/7d/Wikinews_banner_2.png');
}
  background-repeat: no-repeat;
  background-position: top right;
  width: 100%;
  clear: both;
  background-color: #F0F8FF;
  border: 1px solid #ccc;
  padding: 1px 10px 1px 10px;
}


.mp_header_left {
#mp-banner img {
  width: 50%;
max-width:100%;
  text-align: left;
height:auto;
  white-space: nowrap;
}
  vertical-align: middle;  
}


.welcome_to_wn {
@media (max-width: 768px) {
  font-size: 200%;
.wikitable-nova {
  font-weight: bold;
  flex: 1 1 100%;
  padding-top: 3px;
  max-width: 100%;
  padding-bottom: 8px;
    }
  letter-spacing: 1px;
}
}


.freenews {
.druid-data ul {
   font-size: 120%;
    margin: 0 0 0 1.6em;
}
    padding: 0;
  }
    
  .druid-subtitle {
    font-size: 45%;
  }
 
  .patrollink {
  display: none;
  }
 
  .stats-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
  }


.mp_header_center {
  .stats-title {
  width: 2px;
      flex-grow: 1;
  align: center;
      flex-basis: calc(100% / 4); /* Default: Matches 4-column layout */
  white-space: nowrap;
      display: flex;
}
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #f0f0f0;
  }


.mp_header_right {
  .stat-box {
  width: 50%;
      flex-grow: 1;
  text-align: right;
      flex-basis: calc(100% / 4); /* Default: 4 columns */
  white-space: nowrap;
      padding: 10px;
  vertical-align: top;
      margin: 2px;
}
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #ddd;
      min-height: 100px; /* Ensures they stretch evenly */
  }


.header_left_text {
  /* 4 Columns over 2 rows */
  font-size: 90%;
  @media (max-width: 900px) {
  margin-bottom: -4px;
      .stats-title, .stat-box {
}
        flex-basis: calc(100% / 4);
      }
  }


/* Stuff only for main page. Do not use common.css/Main_Page (Flash of unstyled content). */
  /* 2 Columns over 4 rows */
  @media (max-width: 600px) {
      .stats-title, .stat-box {
        flex-basis: calc(100% / 2);
      }
  }


body.page-Main_Page #firstHeading, #footer-info-lastmod {
  /* 1 Column over 8 rows */
  display: none;
  @media (max-width: 400px) {
}
      .stats-title, .stat-box {
        flex-basis: 100%;
      }
  }
 
  /* All CSS here will be loaded for users of the Vector skin */
/*********************
* Main page layout  *
* [[Gensopedia]]  *
**********************/


/*this is also in [[mediawiki:monobook.css]] for some reason... */
.responsive-image {
max-width:100%;
height:auto;
}


body.page-Main_Page #mw-revisiontag, #mw-fr-revisiontag {
#mp-banner-container {grid-area:banner;}
  display: none;
#mp-s1-box {grid-area:s1;}
}
#mp-s2-box {grid-area:s2;}
#mp-sl-box {grid-area:sl;}
#mp-gates-box {grid-area:gates;}
#mp-otd-box {grid-area:otd;}
#mp-links-box {grid-area:links;}


body.page-Main_Page #catlinks {
@media (min-width: 1200px) {
  display: none;
#mp-container {
}
display:grid;
grid-template-areas: "sl sl" "s1 s2" "gates gates" "otd links";
gap:5px;
}
}


/*edit links for leads that are semi-protected. The js for this only works on main page. */
@media (max-width: 1199px) {
body.notAutoconfirmed .hideFromNewbies {
#mp-container {
  visibility: hidden;
display:grid;
}
grid-template-areas: "sl" "s1" "s2" "gates" "otd" "links";
gap:5px;
}
}


/* [[Main Page]] */
.mp-box {
body.page-Main_Page .mw-js-message-readyArticles {
display:flex;
  display: none !important;
flex-flow:column nowrap;
}
width: calc(100% - 2px);
box-sizing: border-box;
background: var(--wiki-content-background-color);
padding:5px;
border-image-source: var(--theme-main-border, url(/images/2/2c/Infobox_border.png));
    border-image-slice: 52;
    border-image-width: 35px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 0 0;
}


.the_table {
.mp-body {
  width: 100%;
height: 100%;
  border:solid #EFEFF1;
display: flex;
  -border-radius: 6px;
padding:0.5em;
  background: white;
flex-flow: column nowrap;
  padding: 0px;
}
  vertical-align: top;
}


.lead_big {
.mp-box.centered-content .mp-body {
  padding: 3px 3px 3px 3px;
height: 100%;
  vertical-align: top;
display: flex;
  width: 66%;
flex-flow: column nowrap;
}
justify-content: space-evenly;
}


.lead_normal {
.mp-heading {
  padding: 3px 6px 3px 6px;
text-align:center;
  border-top: 1px solid #cfcfbf;
font-size: 200%;
  vertical-align: top;
font-family:Marcellus SC;
  width: 33%;
color:var(--wiki-heading-color);
}
padding: 0 0 5px 0;
width:auto;
}


.upper_lead {
.mp-body-columns ul {
   height: 100%; /* fixes stretching of table (in firefox anyways)*/
   columns: 3;
}
  -webkit-columns: 3;
  -moz-columns: 3;
  list-style: none;
  padding: 0;
}


.l_box {
/***********************
  vertical-align: top;
* End main page layout *
  }
************************/


.latest_news {
.games-grid {
  vertical-align: top;
display:grid;
  padding: 3px 3px 3px 3px;
grid:auto-flow dense/repeat(auto-fit,minmax(22.375rem,1fr));
  width: 33%;
grid-auto-rows:minmax(3rem,auto);
}
grid-gap:.625rem
}


.portals {
.games-card {
  padding: 5px 8px 5px 8px;
border-radius:8px;
}
font-size:.775rem;
height:9.82rem;
position:relative
}


.main_popular {
#home-nav .games-card__background:after {
  padding: 5px 8px 5px 8px;
background:linear-gradient(to top,#000,transparent);
  vertical-align: top;
bottom:0;
}
content:"";
display:block;
left:0;
pointer-events:none;
position:absolute;
right:0;
top:0w
}


.recent_interviews {
#home-nav .games-card__foreground {
  border-left: 1px solid #cfcfbf;
align-items:flex-end;
  border-right: 1px solid #cfcfbf;
color:#fff;
  padding: 5px 8px 5px 8px;
display:flex;
  vertical-align: top;
font-size:150%;
}
font-weight:500;
height:100%;
padding:0 .938rem;
pointer-events:none;
}


.original_stories {
.games-card__foreground {
  padding: 5px 8px 5px 8px;
position:absolute
  vertical-align: top;
}
}


.main_about {
.games-card.games-card--button {
  padding: 5px 8px 5px 8px;
overflow:hidden;
  vertical-align: top;
padding:0
  width: 33%;
}
  font-size: small;
}


.main_write {
.games-card--button img {
  border-left: 1px solid #cfcfbf;
transition:transform .2s ease
  border-right: 1px solid #cfcfbf;
}
  padding: 5px 8px 5px 8px;
  vertical-align: top;
  width: 33%;
  font-size:small;
}


.main_write input.createboxInput {
.games-card--button:hover img {
  width: 100%;
transform:scale(1.1)
}
}


.main_devel {
/* Enemy flex table */
  padding: 5px 8px 5px 8px;
  vertical-align: top;
  width: 33%;
}


.breaker {
.table5>div,
  padding: 5px 8px 5px 8px;
        .table4>div,
}
        .table3>div,
        .table2>div,
        .table1>div {
            display: flex;
        }


        .table1>div>div {
            /* you can remove the border */
            /* you can remove the height */
        }


/* [[Template:Main headlines]] */
        .table4>div>div,
.more_news {
        .table3>div>div,
  font-size: 125%;
        .table2>div>div {
  font-weight: bold;
            /* you can remove the border */
}
            justify-content: center;
            align-content: center;
            /* you can remove the height */
        }


.latest_news_text {
        .table5>div>div {
  text-align: left;
            /* you can remove the border */
  font-size: 90%;
  color: gray;
  padding-left: 0px;
  padding-right: 0px;
}


.latest_news_unchecked {
            /* you can remove the height */
  text-align: left;
        }
  font-size: 85%;
  color: #111111;
  padding-left: 0px;
  padding-right: 0px;
}


        .table6 {
            display: flex;
        }


        .table6>div {
            /* you can remove the border */


/* [[Template:Main about]] */
            /* you can remove the height */
.about_floater {
        }
  float: right;
  padding-left: 5px;
  padding-bottom: 5px;
  text-align: center;
  font-size: small;
  width: 75px;
}


/* This is for edit the templates, not the leads. */
        .table1 .row1 {
body.page-Main_Page .editor a {
        display: flex;
  background: none !important;
            width: 30%;
  padding: 0 !important;
            align-items: center;
  display: none;
            justify-content: center;
  /* To turn the edit links back on, add the following to your personal CSS:  
        }
  .editor a { display: inline !important; }
  */
}


.minihead {
        .table1 .row2 {
  font-size: 125%;
            width: 20%;
  font-weight: bold;
        }
}


.more {
        .table1 .row3 {
  font-size: 75%;
            width: 50%;
  float: right;
        }
}


/*Make a border when write an article is linked to */
        .table6 .row1,
body.page-Main_Page #writeAnArticleCell:target {border: black medium solid}
        .table5 .row1,
        .table4 .row1,
        .table3 .row1,
        .table2 .row1 {
        display: flex;
            width: 20%;
            align-items: center;
            justify-content: center;
        }


        .table5 .row2,
        .table4 .row2,
        .table3 .row2,
        .table2 .row2 {
            width: 80%;
            align-items: center;
            justify-content: center;
        }
       
        .table6 .row2 {
            width: 80%;
        }


        .table2 .row2,
        .table3 .row2,
        .table4 .row2 {
            display: flex;
        }


/* end stuff for main page only */
        .table2 .row2>div,
        .table3 .row2>div,
        .table4 .row2>div {
            width: 100%;
        }


/* Annoying flagged revs "you have unreviewed pages on your watchlist" */
        .table4 .row2 .col,
#mw-fr-watchlist-pending-notice { display: none }
        .table3 .row2 .col,
        .table2 .row2 .col,
        .table1 .row2 .col,
        .table1 .row3 .col {
            display: flex;
            align-items: center;
            justify-content: center;
            /* you can remove the height */
        }


/* Make the flagged box not be a PITA for non-js clients */
        .table4 .row2 .col>div,
        .table3 .row2 .col>div,
        .table2 .row2 .col>div,
        .table1 .row2 .col>div,
        .table1 .row3 .col>div {
            /* you can remove the border */
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
        }
           
            #enemy-flex {
            font-size: 1em;
            }


div#mw-fr-revisiondetails {position:static; border-top: none}
        @media(max-width: 768px) {
div#mw-fr-revisiontag { border: none}
div.flaggedrevs_short_basic { text-align:right; border: 1px solid #CCCCCC;padding:1px;}


/* Clean images' borders */
            .table2 .row2,
div.thumbinner { background:#FFFFFF; border:0; }
            .table3 .row2,
html body div.thumbcaption { font-size:90%; padding-left:0 !important; padding-right:0 !important; padding-top:0.5em !important; }
            .table4 .row2 {
div.magnify { display:none; }
                flex-direction: column;
            }
           
            #enemy-flex {
            font-size: 0.875em;
            }


/* make redirect categories appear as red links at bottom of the page */
            .table3>div>div,
#catlinks a.mw-redirect  {color: #BA0000}
            .table2>div>div {
                font-size: 0.875em;
                /* you can remove the height */
            }
        }
       
        .citizen-overflow-content-sticky-header {
        width:fit-content;
        }
       
.grid-box {
  text-align: center;
  margin: 20px auto;
  max-width: 1280px;
}


/* Content below blatantly copied from en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=414986853 - licensed under CC-BY-SA 3.0 , until specified */
.grid-box h3 {
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
  margin-bottom: 10px;
th.mbox-text, td.mbox-text {  /* The message body cell(s) */
    border: none;
    padding: 0.25em 0.9em;    /* 0.9em left/right */
    width: 100%;               /* Make all mboxes the same width regardless of text length */
}
}
td.mbox-image {                /* The left image cell */
 
    border: none;  
/* Grid container for all pairs */
    padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
.grid {
    text-align: center;  
  display: grid;
  grid-template-columns: repeat(14, 1fr); /* default: 14 pairs per row */
  gap: 4px;
}
}
td.mbox-imageright {           /* The right image cell */
 
    border: none;
.grid-10 {
    padding: 2px 0.9em 2px 0;  /* 0px left, 0.9em right */
  grid-template-columns: repeat(10, 1fr); /* default: 14 pairs per row */
    text-align: center;
}
}
td.mbox-empty-cell {          /* An empty narrow cell */
 
    border: none;
.grid-9 {
    padding: 0px;
  grid-template-columns: repeat(9, 1fr); /* default: 14 pairs per row */
    width: 1px;
}
}


/* Image message box styles */
.grid-6 {
table.imbox {
  grid-template-columns: repeat(6, 1fr); /* default: 14 pairs per row */
    margin: 4px 10%;
    border-collapse: collapse;
    border: 3px solid #1e90ff;   /* Default "notice" blue */
    background: #fbfbfb;
}
}
.imbox .mbox-text .imbox { /* For imboxes inside imbox-text cells. */
 
    margin: 0 -0.5em;      /* 0.9 - 0.5 = 0.4em left/right.        */
.grid-4 {
    display: block;         /* Fix for webkit to force 100% width.  */
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
}
}
.mbox-inside .imbox {       /* For imboxes inside other templates.  */
 
    margin: 4px;
.grid-2 {
  grid-template-columns: repeat(2, 1fr); /* default: 14 pairs per row */
}
}
 
table.imbox-notice {
.grid-1-2 {
    border: 3px solid #1e90ff;   /* Blue */
  grid-template-columns: 1fr 2fr; /* first column 1 part, second 2 parts */
}
}
table.imbox-speedy {
 
    border: 3px solid #b22222;    /* Red */
.grid-2-1 {
    background: #fee;             /* Pink */
  grid-template-columns: 2fr 1fr; /* first column 1 part, second 2 parts */
}
}
table.imbox-delete {
 
    border: 3px solid #b22222;   /* Red */
 
/* Each header/value column */
.pair {
  display: flex;
  flex-direction: column;
  border: 1px solid #0077c0;
}
}
table.imbox-content {
 
    border: 3px solid #f28500;   /* Orange */
.pair-row {
  display: flex;
  flex-direction: row;
  border: 1px solid #0077c0;
  margin: 2px;
}
}
table.imbox-style {
 
    border: 3px solid #f4c430;   /* Yellow */
/* Header and value styling */
.header {
  background:#7fbbdf;
  color:#000;
  font-weight: bold;
  padding: 6px;
  border: 1px solid #0077c0;
}
}
table.imbox-move {
 
    border: 3px solid #9932cc;   /* Purple */
.value {
  padding: 6px;
}
}
table.imbox-protection {
 
     border: 3px solid #bba;       /* Gray-gold */
/* --- Responsive breakpoints --- */
 
/* At 960px and below → 7 columns (2 groups of 7) */
@media (max-width: 960px) {
  .grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid-10 .grid-9 {
     grid-template-columns: repeat(5, 1fr);
  }
  .grid-4 {
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
  }
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
.grid-1-2 {
    grid-template-columns: repeat(2, 1fr);
}
}
table.imbox-license {
.grid-2-1 {
     border: 3px solid #88a;      /* Dark gray */
     grid-template-columns: repeat(1, 1fr);
    background: #f7f8ff;         /* Light gray */
}
}
table.imbox-featured {
    border: 3px solid #cba135;    /* Brown-gold */
}
}
 
/* Category message box styles */
/* At 520px and below → 4 columns (4 groups of 4) */
table.cmbox {
@media (max-width: 520px) {
     margin: 3px 10%;
  .grid {
     border-collapse: collapse;
     grid-template-columns: repeat(4, 1fr);
     border: 1px solid #aaa;  
  }
     background: #DFE8FF;   /* Default "notice" blue */
  .grid-10 .grid-9 .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
     grid-template-columns: repeat(3, 1fr);
  }
.grid-2 {
     grid-template-columns: repeat(1, 1fr);
  }
  .grid-1-2 {
     grid-template-columns: repeat(1, 1fr);
}
}
   
  .grid-2-1 {
table.cmbox-notice {
     grid-template-columns: repeat(1, 1fr);
     background: #D8E8FF;   /* Blue */
}
}
table.cmbox-speedy {
 
    margin-top: 4px;
  .attacktable-responsive{font-size:90%!important;}
    margin-bottom: 4px;
    border: 4px solid #b22222;    /* Red */
    background: #FFDBDB;         /* Pink */
}
}
table.cmbox-delete {
 
    background: #FFDBDB;    /* Red */
@media screen and (max-width:360px){
}
     .attacktable-responsive{font-size:80%!important;}
table.cmbox-content {
    background: #FFE7CE;    /* Orange */
}
table.cmbox-style {
    background: #FFF9DB;    /* Yellow */
}
table.cmbox-move {
    background: #E4D8FF;    /* Purple */
}
table.cmbox-protection {
    background: #EFEFE1;    /* Gray-gold */
}
/* Other pages message box styles */
table.ombox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #aaa;      /* Default "notice" gray */
    background: #f9f9f9;
}
table.ombox-notice {
    border: 1px solid #aaa;      /* Gray */
}
table.ombox-speedy {
    border: 2px solid #b22222;    /* Red */
    background: #fee;            /* Pink */
}
table.ombox-delete {
    border: 2px solid #b22222;    /* Red */
}
table.ombox-content {
    border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
    border: 1px solid #f4c430;    /* Yellow */
}
table.ombox-move {
    border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
    border: 2px solid #bba;      /* Gray-gold */
}
/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090;    /* Default "notice" gray-brown */
    background: #f8eaba;
}
.mediawiki .mbox-inside .tmbox { /* For tmboxes inside other templates. The "mediawiki" class ensures that */
    margin: 2px 0;              /* this declaration overrides other styles (including mbox-small above)  */
    width: 100%;                /* For Safari and Opera */
}
.mbox-inside .tmbox.mbox-small { /* "small" tmboxes should not be small when  */
    line-height: 1.5em;          /* also "nested", so reset styles that are  */ 
    font-size: 100%;            /* set in "mbox-small" above.                */
}
table.tmbox-speedy {
    border: 2px solid #b22222;    /* Red */
    background: #fee;            /* Pink */
}
table.tmbox-delete {
    border: 2px solid #b22222;    /* Red */
}
table.tmbox-content {
    border: 2px solid #f28500;    /* Orange */
}
table.tmbox-style {
    border: 2px solid #f4c430;    /* Yellow */
}
table.tmbox-move {
    border: 2px solid #9932cc;    /* Purple */
}
table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #c0c090;    /* Gray-brown */
}
/* Disambig and set index box styles */
table.dmbox {
    clear: both;
    margin: 0.9em 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: transparent;
}
/* Footer and header message box styles */
table.fmbox {
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #aaa;
    background: #f9f9f9;    /* Default "system" gray */
}
table.fmbox-system {
    background: #f9f9f9;
}
table.fmbox-warning {
    border: 1px solid #bb7070;  /* Dark pink */
    background: #ffdbdb;        /* Pink */
}
table.fmbox-editnotice {
     background: transparent;
}
/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
    background: #ffdbdb;
    padding: 0.25em 0.9em;
}
/* Div based "system" style fmbox messages.
  Used in [[MediaWiki:Readonly lag]]. */
div.mw-lag-warn-normal,
div.fmbox-system {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #aaa;
    background: #f9f9f9;
    padding: 0.25em 0.9em;
}
/* These mbox-small classes must be placed after all other
  ambox/tmbox/ombox etc classes. "body.mediawiki" is so
  they override "table.ambox + table.ambox" above. */
body.mediawiki table.mbox-small {  /* For the "small=yes" option. */
    clear: right;
    float: right;
    margin: 4px 0 4px 1em;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}
body.mediawiki table.mbox-small-left {  /* For the "small=left" option. */
    margin: 4px 1em 4px 0;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em;
}
}
/* Content licensed as CC-BY-SA 3.0 ends here */

Latest revision as of 02:12, 11 December 2025

/* CSS placed here will be applied to all skins */

@font-face {
  font-family: 'AtkinsonHyperlegibleNext-Regular';
  src: url('/resources/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
       url('/resources/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'subset-Karma-Regular';
  src: url('/resources/assets/fonts/subset-Karma-Regular.woff2') format('woff2'),
       url('/resources/assets/fonts/subset-Karma-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: AtkinsonHyperlegibleNext-Regular, var(--font-family-base);
  font-variation-settings: 'GRAD' var(--font-grade);
  font-weight: var(--font-weight-normal);
}

:root {
  /* common */
  --theme-header-color:#0077c0;
}

h1:after {
background:none repeat scroll 0 0 #0077c0;
bottom:-0;
content:"";
display:block;
height:2px;
position:relative;
width:100%
}

/****************************************/
/*******  Start DRUID CSS rules *********/
/****************************************/

.druid-container {
    /* These variables are designed to inherit from your wiki's color variables.
       If your wiki uses a different naming scheme, change the inner names to match yours.
       If your wiki doesn't use color variables you should consider doing so,
       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
    --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
    
    --druid-secondary-background-color: var(--wiki-accent-color, #0077c0);
    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 0, 119, 192);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
    
    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
    --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
    
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
    --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
    
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
    --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
    --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}

/* ---------------------------------  */
/*    Safe to edit ABOVE this line    */
/* ---------------------------------  */

/* ---------------------------------  */
/*     Do not edit below this line    */
/* ---------------------------------  */

.druid-container {
    border-image-source: url(/images/2/2c/Infobox_border.png);
    border-image-slice: 15;
    border-image-width: 13px;
    border-image-repeat: round;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 30px 30px;
    background: none;
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
	width:100%;
	max-width:22em;
    box-sizing: border-box;
    position: relative;
}

.druid-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 25px;  /* adjust to ornament’s width */
    height: 15px; /* adjust to ornament’s height */
    background: url(/images/7/7f/Infobox_bottom.png) no-repeat center bottom;
    background-size: contain; /* keeps proportions */
    transform: translate(-50%, 3px); /* add vertical shift */
    pointer-events: none;
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
    background: url(/images/0/07/Imagebox.webp)  no-repeat center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
    border-image-source: url(/images/0/07/Title_border.png);
    border-image-slice: 12;
    border-image-width: 12px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0;
    background:rgba(var(--druid-secondary-background-color--rgb));
    color:var(--druid-secondary-background-label-color);
    text-align:center;
    font-size:1.5em;
    padding:1px;
}

.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
    font-family:'subset-Karma-Regular', sans-serif
}

.druid-label {
    font-weight:bold;
    text-align: right;
	box-sizing: border-box;
}

.druid-row > .druid-label {
    width: 38%;
    flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
	padding-inline: 0.3em;
    font-size: 0.9em;
}

.druid-data-Description {
    font-size: 0.7em;
    font-style: italic;
    text-align: center;
}

.druid-main-image,
.druid-main-images {
    padding:5px;
}

.druid-main-image img, 
.druid-main-images img {
    max-width:100%;
    height:auto;
}

.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}

.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}

.druid-grid {
    display:grid;
    gap: 0.3em;
	padding: 0.35em;
}

.druid-grid-item {
    /* background:var(--druid-tertiary-background-color); */
    padding:0.25em;
    border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
    border-radius: 2px;
}

.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
	text-align: center;
}

.druid-data-wide {
	width:100%;
}

.druid-section-container > .druid-collapsible {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.druid-collapsed {
    display:none!important;
}

.druid-collapsible {
    cursor:pointer;
    position:relative;
}

.druid-collapsible::after {
    content:'\2013';
    display:block;
    position:absolute;
    right:10px;
    font-size:20px;
    font-weight:bold;
    color:var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
    content:'+';
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
    display:flex;
    margin-block: 1px;
    padding: 3px 0px;
    border-bottom: 1px solid #a2a9b1;
}

div.druid-row + div.druid-row {
	margin-top: 0;
}

div.druid-row > .druid-label {
	background: none;
    color:rgba(var(--druid-secondary-background-color--rgb));
}

.druid-infobox .druid-title {
  font-weight: 700;
  font-family:'subset-Karma-Regular', sans-serif
}

div.druid-row:last-child {
  border-bottom: none;
  padding-bottom: 10px;
}

.druid-infobox #toc {
    display:none;
}


/********
Custom display classes
*********/

div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
    flex-direction: column;
}

.druid-stacked.druid-row > .druid-label,
.druid-stacked .druid-row > .druid-label {
    text-align: left;
    width: 100%;
    flex-basis:unset;
}

.druid-stacked.druid-row > .druid-data,
.druid-stacked .druid-row > .druid-data {
    padding-left: .75em;
}

/* ---------------------------------  */
/*    Do not edit above this line     */
/* ---------------------------------  */

/* ---------------------------------  */
/* Local overrides go below this line */
/* ---------------------------------  */


/****************************************/
/*******  End DRUID CSS rules   *********/
/****************************************/

/** as of Module:navbox version 1.1.1 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	/*
	 * don't trust the note that says margin doesn't work with inline
	 * removing margin: 0 makes dds have margins again
	 * We also want to reset margin-right in Minerva
	 */
	margin: 0; 
	display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
	content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	/* "space, Middle Dot, space" 
	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
	/* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space" 
       There may (and likely) be an extra whitespace between <li>s, 
       therefore we have to use a space character as last character of this sequence. 
       By this way, the last space and the next whitespce will collapse as a single space,
       to make the whitespace on both sides of the middle dot the same width.
    */
	content: "\20\A0\2022\A0\20"; 
	font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
	content: "\20(";
	font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
	content: ")";
	font-weight: inherit;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li::before {
	content: " " counter(listitem) ".\20";
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: none; /* for entire navbox */
  --navbox-padding: 4px;
  --navbox-gap: 3px; /* when using zero-value, it must be 0px */
  --navbox-outer-border-color: var(--wiki-content-border-color--accent);
  --navbox-outer-border-width: 1px;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-title-color: var(--wiki-accent-label-color);
  --navbox-title-background: var(--wiki-accent-color);
  --navbox-title-icon-color: var(--wiki-accent-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--wiki-accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-cell-padding: 0.25em 0.5em;
  --navbox-above-background: rgba(var(--wiki-content-text-color--rgb), 0.15);
  --navbox-above-color: var(--wiki-content-text-color);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-text-color);
  --navbox-heading-color: var(--navbox-title-color);
  --navbox-heading-background: var(--navbox-title-background);
  --navbox-heading-icon-color: var(--navbox-title-icon-color);
  --navbox-heading-link-color: var(--navbox-title-link-color);
  --navbox-heading-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-heading-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-heading-redlink-color: var(--navbox-title-redlink-color);
  --navbox-heading-link-decoration: var(--navbox-title-link-decoration);
  --navbox-heading-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-list-background: rgba(var(--wiki-content-text-color--rgb), 0.05);
  --navbox-list-background--striped: rgba(var(--wiki-content-text-color--rgb), 0.08); 
  --navbox-list-color: var(--wiki-content-text-color);
  /* --navbox-group-* also apply to .ranger-subgroup */
  --navbox-group-text-align: left;
  --navbox-group-background: rgba(var(--wiki-accent-color--rgb), 0.2);
  --navbox-group-color: var(--wiki-content-text-color);
  --navbox-tree-line-color: var(--navbox-group-background);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
}
.ranger-navbox.pill, 
.ranger-navbox.pill-mobile{
  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
  --navbox-pill-gap: 0.3em;
  --navbox-pill-padding: 0.25em 0.75em;
  --navbox-pill-border-radius: 3px;
  --navbox-pill-box-shadow: none;
  --navbox-pill-background: rgba(var(--wiki-content-text-color--rgb), 0.05);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: var(--navbox-pill-background);
  /* remove list cell background */
  --navbox-list-background: none;
  --navbox-list-background--striped: rgba(var(--wiki-content-text-color--rgb), 0.03); 
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--wiki-accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}

.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: calc(1em - 2px);
  margin: 0.5em auto;
  background: var(--navbox-background);
  line-height: 1.5;
}

.ranger-navbox * {
  border: 0;
}
.ranger-navbox, 
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  padding:.5em calc(1.5em + 0.375rem); /* left and right padding equal to the size and position of the edit/collapse buttons */
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: 125%;
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
	text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
	text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-heading-color);
  background: var(--navbox-heading-background);
  font-size: 110%;
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
	text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
	text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-heading-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-heading-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-heading-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-heading-link-color--hover);
}
.ranger-navbox .ranger-meta{
  position: absolute;
  left: 0.375rem;
  top: 0.625em;
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: #FFF;
  box-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta .nv-view{
  --mask: var(--icon-metalinks);
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: 0.5em;
  top: 0.5em;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  right: 0.5em;
  top: 0.5em;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: #FFF;
  transform: scaleY(-1);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-heading-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-above,
.ranger-navbox .ranger-below, 
.ranger-navbox .ranger-group, 
.ranger-navbox .ranger-subgroup, 
.ranger-navbox .ranger-list{
  padding: var(--navbox-cell-padding);
  width: unset;
}
.ranger-navbox .ranger-above,
.ranger-navbox .ranger-below{
  text-align: left; /* It's easy to center the content via <center></center> if needed. */
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
}

.ranger-navbox .ranger-section-body,
.ranger-navbox .ranger-sublist{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
}
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup,
.ranger-navbox .align-left{
  text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup,
.ranger-navbox .align-center{
  text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup,
.ranger-navbox .align-right{
  text-align: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
  background: var(--navbox-list-background);
  color: var(--navbox-list-color);
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
	display: inline-block;
}

/* responsive */
@media screen and (max-width: 720px) {
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: left;
    white-space: normal;
  }
  
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  }  
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap); 
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
	/* remove middle dots betweem items */
	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
	  display: none;
	}
	/* remove parentheses around nested lists*/
	.ranger-navbox.pill-mobile .hlist dd ol::before,
	.ranger-navbox.pill-mobile .hlist dd ul::before,
	.ranger-navbox.pill-mobile .hlist dd dl::before,
	.ranger-navbox.pill-mobile .hlist dt ol::before,
	.ranger-navbox.pill-mobile .hlist dt ul::before,
	.ranger-navbox.pill-mobile .hlist dt dl::before,
	.ranger-navbox.pill-mobile .hlist li ol::before,
	.ranger-navbox.pill-mobile .hlist li ul::before,
	.ranger-navbox.pill-mobile .hlist li dl::before,
	.ranger-navbox.pill-mobile .hlist dd ol::after,
	.ranger-navbox.pill-mobile .hlist dd ul::after,
	.ranger-navbox.pill-mobile .hlist dd dl::after,
	.ranger-navbox.pill-mobile .hlist dt ol::after,
	.ranger-navbox.pill-mobile .hlist dt ul::after,
	.ranger-navbox.pill-mobile .hlist dt dl::after,
	.ranger-navbox.pill-mobile .hlist li ol::after,
	.ranger-navbox.pill-mobile .hlist li ul::after,
	.ranger-navbox.pill-mobile .hlist li dl::after {
	  display: none;
	}
	/* make lists inline-flex */
	.ranger-navbox.pill-mobile .hlist ul,
	.ranger-navbox.pill-mobile .hlist ol,
	.ranger-navbox.pill-mobile .hlist dl{
	  display: inline-flex;
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* "pill" style for items */
	.ranger-navbox.pill-mobile .hlist li,
	.ranger-navbox.pill-mobile .hlist dt,
	.ranger-navbox.pill-mobile .hlist dd{
	  /* 100% height */
	  display: flex;
	  align-items: center;
	  /* for nested lists */
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* further tweak to make text flow looks better for <li> in <ol> */
	.ranger-navbox.pill-mobile .hlist li:not(:has(li,ul,ol)){
	  display: inline-block;
	}
	/* Add a hover / focus feedback style */
	.ranger-navbox.pill-mobile .hlist dd:hover,
	.ranger-navbox.pill-mobile .hlist dd:focus,
	.ranger-navbox.pill-mobile .hlist dt:hover,
	.ranger-navbox.pill-mobile .hlist dt:focus,
	.ranger-navbox.pill-mobile .hlist li:hover,
	.ranger-navbox.pill-mobile .hlist li:focus {
	  box-shadow: var(--navbox-pill-box-shadow--hover);
	  background: var(--navbox-pill-background--hover);
	}
}
/*********************
* End Template:Navbox*
**********************/

.wikitable {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    border-image-source: url(/images/2/2c/Infobox_border.png);
    border-image-slice: 15;
    border-image-width: 13px;
    border-image-repeat: round;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 30px 30px;
    border-collapse:separate;
    margin:1rem 0 1rem 0;
    max-width:100%;
}

.wikitable tr:nth-child(odd) {
    background: rgba(0, 119, 192, .1);
}

.citizen-overflow-wrapper {
    max-width:100%
}

.wikitable-title {
    border-image-source: url(/images/0/07/Title_border.png);
    border-image-slice: 12;
    border-image-width: 12px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0;
    background:var(--theme-header-color);
    color:#FFF;
    text-align:center;
    font-size:1em;
    padding:1px;
}

.headerSort {
    border-image-source: url(/images/0/07/Title_border.png);
    border-image-slice: 12;
    border-image-width: 12px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0;
    background:var(--theme-header-color);
    color:#FFF;
    text-align:center;
    font-size:1em;
    padding:1px;
}

.wikitable-nova {
    border-image-source: url(/images/2/2c/Infobox_border.png);
    border-image-slice: 15;
    border-image-width: 13px;
    border-image-repeat: round;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 30px 30px;
    border-collapse:separate;
    margin:1rem 0 1rem 0;
    flex:1 1 50%; 
    max-width:48%; 
    box-sizing:border-box;
}


#mw-indicator-Japan {
filter:none
}

#home-nav {
margin-top:1rem
}

#home-nav .home-card__background:after {
background:linear-gradient(to right,#000, 33%, transparent);
bottom:0;
content:"";
display:block;
left:0;
pointer-events:none;
position:absolute;
right:0;
top:0
}

#home-nav .home-card__foreground {
align-items:flex-end;
color:#fff;
display:flex;
font-size:150%;
font-weight:500;
height:100%;
padding:0 .938rem;
pointer-events:none;
}

.home-grid {
display:grid;
grid:auto-flow dense/repeat(auto-fit,minmax(15.375rem,1fr));
grid-auto-rows:minmax(3rem,auto);
grid-gap:.625rem
}

.home-card {
border-radius:8px;
font-size:.875rem;
height:5.82rem;
position:relative
}

.home-card__background {
background:#000;
border-radius:4px;
bottom:0;
left:0;
position:absolute;
right:0;
top:0
}

.home-card__background img {
height:100%;
width:100%;
object-fit:cover;
}

.home-card__foreground {
position:absolute
}

.home-card.home-card--button {
background:#242a31;
overflow:hidden;
padding:0
}

.home-card--button img {
transition:transform .2s ease
}

.home-card--button:hover img {
transform:scale(1.1)
}

.home-link {
display:grid;
font-size:.875rem;
font-weight:500;
grid-gap:.375rem;
margin-top:.375rem;
text-align:center
}

span.hidden,span.citizen-section-indicator.citizen-ui-icon.mw-ui-icon-wikimedia-collapse,div.citizen-typeahead__labelItem {
display:none
}

table.timeline {
display: table;
border-bottom: 0;
background:transparent
}

table.timeline tr {
display: flex;
flex-direction: column;
padding-left: 20px
}

table.timeline tr td:first-child {
padding-bottom: 0;
font-size: 1rem;
font-weight: bold;
display: list-item;
margin-left: -7px;
padding-left: 7px;
padding-top: 0.8rem
}

table.timeline tr td {
border-bottom: 0
}

table.timeline tr td:last-child {
padding-top: 0.2rem;
padding-left: 0;
padding-right: 0
}

.ranger-navbox .ranger-title {
  color: #FFF;
  font-size: 1rem;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border: 2px solid #fff;
}

.ranger-navbox .ranger-title-S1 {
  background: no-repeat url("/images/5/58/Navbar_Suikoden.webp");
  background-color: #008d7e;
}

.ranger-navbox .ranger-title-S2 {
  background: no-repeat url("images/0/06/Navbar_Suikoden_II.webp");
  background-color: #427da7;
}

.ranger-navbox .ranger-title-G1 {
  background: no-repeat url("images/a/a4/Navbar_Genso_Suikogaiden_Vol.1.webp");
  background-color: #cdccd9;
}

.ranger-navbox .ranger-title-G2 {
  background: no-repeat url("images/8/87/Navbar_Genso_Suikogaiden_Vol.2.webp");
  background-color: #cdccd9;
}

.ranger-navbox .ranger-title-CS {
  background: no-repeat url("images/c/ca/Navbar_Genso_Suikoden_Card_Stories.webp");
  background-color: #cfbd90;
}

.ranger-navbox .ranger-title-S12 {
  background: no-repeat url("images/d/d4/Navbar_Suikoden_I&II.png");
  background-color: #0f1859;
}

.ranger-navbox .ranger-title-S3 {
  background: no-repeat url("images/b/b8/Navbar_Suikoden_III.webp");
  background-color: #bc1c23;
}

.ranger-navbox .ranger-title-S4 {
  background: no-repeat url("images/2/27/Navbar_Suikoden_IV.webp");
  background-color: #006994;
}

.ranger-navbox .ranger-title-ST {
  background: no-repeat url("images/0/0e/Navbar_Suikoden_Tactics.webp");
  background-color: #93ac8b;
}

.ranger-navbox .ranger-title-S5 {
  background: no-repeat url("images/a/af/Navbar_Suikoden_V.webp");
  background-color: #ceb25e;
}

.ranger-navbox .ranger-title-HS {
  background: no-repeat url("images/3/3b/Navbar_Genso_Suikoden_Tierkreis_Hoshikuzu_no_Shiro.webp");
  background-color: #7b726b;
}

.ranger-navbox .ranger-title-TK {
  background: no-repeat url("images/4/47/Navbar_Suikoden_Tierkreis.webp");
  background-color: #6d5849;
}

.ranger-navbox .ranger-title-PS {
  background: no-repeat url("images/0/03/Navbar_Pachislot_Genso_Suikoden.webp");
  background-color: #3d6b98;
}

.ranger-navbox .ranger-title-HT {
  background: no-repeat url("images/4/43/Navbar_Genso_Suikoden_Tsumugareshi_Hyakunen_no_Toki.webp");
  background-color: #008865;
}

.ranger-navbox .ranger-title-SL {
  background: no-repeat url("images/c/ce/Navbar_SL.png");
  background-color: #046a9d;
}

.ranger-navbox .ranger-title-GS {
  background: no-repeat url("images/2/2d/Navbar_Genso_Suikoden.webp");
  background-color: #00307c;
}

.ranger-navbox .ranger-title-RN {
  background: no-repeat url("images/0/01/Navbar_Runes.webp");
  background-color: #294b80;
}

#mp-banner-container {
	position:relative;
	border:1px solid #0077c0;
	border-radius:5px;
	height: 23em;
	overflow:hidden;
}

#mp-welcome {
	position:relative;
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	justify-content:center;
	height:100%;
	width:100%;
	filter:drop-shadow(0px 2px 5px #9D98FF);
	font-family:var(--wiki-heading-font-family);
	font-size: 200%;
	color:#fff;
	text-shadow: 1px 1px 2px black;
	z-index:2;
	padding:1em 0;
	box-sizing:border-box;
}

#mp-title {
	text-align:center;
	max-width:70%;
}

#mp-banner {
	position:relative;
	width:100%;
	height:100%;
	top:-100%;
	filter:blur(5px) brightness(50%);
	z-index:1;
}

.skin-theme-clientpref-night #mp-banner {
	background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
}

.skin-theme-clientpref-day #mp-banner {
    background: url(https://gensopedia.org/images/5/5e/Main_page_banner_light.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.skin-theme-clientpref-os #mp-banner {
	background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

#mp-banner img {
	max-width:100%;
	height:auto;
}

@media (max-width: 768px) {
.wikitable-nova {
   flex: 1 1 100%;
   max-width: 100%;
    }
}

.druid-data ul {
    margin: 0 0 0 1.6em;
    padding: 0;
  }
  
  .druid-subtitle {
    font-size: 45%;
  }
  
  .patrollink {
  	display: none;
  }
  
   .stats-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
   }

   .stats-title {
      flex-grow: 1;
      flex-basis: calc(100% / 4); /* Default: Matches 4-column layout */
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #f0f0f0;
   }

   .stat-box {
      flex-grow: 1;
      flex-basis: calc(100% / 4); /* Default: 4 columns */
      padding: 10px;
      margin: 2px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #ddd;
      min-height: 100px; /* Ensures they stretch evenly */
   }

   /* 4 Columns over 2 rows */
   @media (max-width: 900px) {
      .stats-title, .stat-box {
         flex-basis: calc(100% / 4);
      }
   }

   /* 2 Columns over 4 rows */
   @media (max-width: 600px) {
      .stats-title, .stat-box {
         flex-basis: calc(100% / 2);
      }
   }

   /* 1 Column over 8 rows */
   @media (max-width: 400px) {
      .stats-title, .stat-box {
         flex-basis: 100%;
      }
   }
   
   /* All CSS here will be loaded for users of the Vector skin */
/*********************
* Main page layout   *
* [[Gensopedia]]   *
**********************/

.responsive-image {
	max-width:100%;
	height:auto;
}

#mp-banner-container {grid-area:banner;}
#mp-s1-box {grid-area:s1;}
#mp-s2-box {grid-area:s2;}
#mp-sl-box {grid-area:sl;}
#mp-gates-box {grid-area:gates;}
#mp-otd-box {grid-area:otd;}
#mp-links-box {grid-area:links;}

@media (min-width: 1200px) {
#mp-container {
	display:grid;
	grid-template-areas: "sl sl" "s1 s2" "gates gates" "otd links";
	gap:5px;
}
}

@media (max-width: 1199px) {
#mp-container {
	display:grid;
	grid-template-areas: "sl" "s1" "s2" "gates" "otd" "links";
	gap:5px;
}
}

.mp-box { 
	display:flex;
	flex-flow:column nowrap;
	width: calc(100% - 2px);
	box-sizing: border-box;
	background: var(--wiki-content-background-color);
	padding:5px;
	border-image-source: var(--theme-main-border, url(/images/2/2c/Infobox_border.png));
    border-image-slice: 52;
    border-image-width: 35px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 0 0;
}

.mp-body {
	height: 100%;
	display: flex;
	padding:0.5em;
	flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
}

.mp-heading {
	text-align:center;
	font-size: 200%;
	font-family:Marcellus SC;
	color:var(--wiki-heading-color);
	padding: 0 0 5px 0;
	width:auto;
}

.mp-body-columns ul {
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
  list-style: none;
  padding: 0;
}

/***********************
* End main page layout *
************************/

.games-grid {
display:grid;
grid:auto-flow dense/repeat(auto-fit,minmax(22.375rem,1fr));
grid-auto-rows:minmax(3rem,auto);
grid-gap:.625rem
}

.games-card {
border-radius:8px;
font-size:.775rem;
height:9.82rem;
position:relative
}

#home-nav .games-card__background:after {
background:linear-gradient(to top,#000,transparent);
bottom:0;
content:"";
display:block;
left:0;
pointer-events:none;
position:absolute;
right:0;
top:0w
}

#home-nav .games-card__foreground {
align-items:flex-end;
color:#fff;
display:flex;
font-size:150%;
font-weight:500;
height:100%;
padding:0 .938rem;
pointer-events:none;
}

.games-card__foreground {
position:absolute
}

.games-card.games-card--button {
overflow:hidden;
padding:0
}

.games-card--button img {
transition:transform .2s ease
}

.games-card--button:hover img {
transform:scale(1.1)
}

/* Enemy flex table */

.table5>div,
        .table4>div,
        .table3>div,
        .table2>div,
        .table1>div {
            display: flex;
        }

        .table1>div>div {
            /* you can remove the border */
            /* you can remove the height */
        }

        .table4>div>div,
        .table3>div>div,
        .table2>div>div {
            /* you can remove the border */
            justify-content: center;
            align-content: center;
            /* you can remove the height */
        }

        .table5>div>div {
            /* you can remove the border */

            /* you can remove the height */
        }

        .table6 {
            display: flex;
        }

        .table6>div {
            /* you can remove the border */

            /* you can remove the height */
        }

        .table1 .row1 {
        	display: flex;
            width: 30%;
            align-items: center;
            justify-content: center;
        }

        .table1 .row2 {
            width: 20%;
        }

        .table1 .row3 {
            width: 50%;
        }

        .table6 .row1,
        .table5 .row1,
        .table4 .row1,
        .table3 .row1,
        .table2 .row1 {
        	display: flex;
            width: 20%;
            align-items: center;
            justify-content: center;
        }

        .table5 .row2,
        .table4 .row2,
        .table3 .row2,
        .table2 .row2 {
            width: 80%;
            align-items: center;
            justify-content: center;
        }
        
        .table6 .row2 {
            width: 80%;
        }

        .table2 .row2,
        .table3 .row2,
        .table4 .row2 {
            display: flex;
        }

        .table2 .row2>div,
        .table3 .row2>div,
        .table4 .row2>div {
            width: 100%;
        }

        .table4 .row2 .col,
        .table3 .row2 .col,
        .table2 .row2 .col,
        .table1 .row2 .col,
        .table1 .row3 .col {
            display: flex;
            align-items: center;
            justify-content: center;
            /* you can remove the height */
        }

        .table4 .row2 .col>div,
        .table3 .row2 .col>div,
        .table2 .row2 .col>div,
        .table1 .row2 .col>div,
        .table1 .row3 .col>div {
            /* you can remove the border */
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
        }
            
            #enemy-flex {
            	font-size: 1em;
            }

        @media(max-width: 768px) {

            .table2 .row2,
            .table3 .row2,
            .table4 .row2 {
                flex-direction: column;
            }
            
            #enemy-flex {
            	font-size: 0.875em;
            }

            .table3>div>div,
            .table2>div>div {
                font-size: 0.875em;
                /* you can remove the height */
            }
        }
        
        .citizen-overflow-content-sticky-header {
        	width:fit-content;
        }
        
.grid-box {
  text-align: center;
  margin: 20px auto;
  max-width: 1280px;
}

.grid-box h3 {
  margin-bottom: 10px;
}

/* Grid container for all pairs */
.grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr); /* default: 14 pairs per row */
  gap: 4px;
}

.grid-10 {
  grid-template-columns: repeat(10, 1fr); /* default: 14 pairs per row */
}

.grid-9 {
  grid-template-columns: repeat(9, 1fr); /* default: 14 pairs per row */
}

.grid-6 {
  grid-template-columns: repeat(6, 1fr); /* default: 14 pairs per row */
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr); /* default: 14 pairs per row */
}

.grid-1-2 {
  grid-template-columns: 1fr 2fr; /* first column 1 part, second 2 parts */
}

.grid-2-1 {
  grid-template-columns: 2fr 1fr; /* first column 1 part, second 2 parts */
}


/* Each header/value column */
.pair {
  display: flex;
  flex-direction: column;
  border: 1px solid #0077c0;
}

.pair-row {
  display: flex;
  flex-direction: row;
  border: 1px solid #0077c0;
  margin: 2px;
}

/* Header and value styling */
.header {
  background:#7fbbdf; 
  color:#000;
  font-weight: bold;
  padding: 6px;
  border: 1px solid #0077c0;
}

.value {
  padding: 6px;
}

/* --- Responsive breakpoints --- */

/* At 960px and below → 7 columns (2 groups of 7) */
@media (max-width: 960px) {
  .grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid-10 .grid-9 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-4 {
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
  }
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
 .grid-1-2 {
    grid-template-columns: repeat(2, 1fr);
}
 .grid-2-1 {
    grid-template-columns: repeat(1, 1fr);
}
}

/* At 520px and below → 4 columns (4 groups of 4) */
@media (max-width: 520px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-10 .grid-9 .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
 .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-1-2 {
    grid-template-columns: repeat(1, 1fr);
}
 .grid-2-1 {
    grid-template-columns: repeat(1, 1fr);
}

  .attacktable-responsive{font-size:90%!important;}
}

@media screen and (max-width:360px){
    .attacktable-responsive{font-size:80%!important;}
}
Retrieved from "https://gensopedia.org/index.php?title=MediaWiki:Common.css&oldid=150459"