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
mNo edit summary
mNo edit summary
 
(819 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


<pre><nowiki>
@font-face {
/* taken from http://www.grifkuba.org/main/wiki/index.php?title=MediaWiki:Common.css on Friday, February 26th, 2010 */
  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;
}


/***** BACKGROUND COLORS FOR NAMESPACES *****/
@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;
}


/* Colour of NS Manual + Manual_talk (light bluish violet) */
body {
  font-family: AtkinsonHyperlegibleNext-Regular, var(--font-family-base);
  font-variation-settings: 'GRAD' var(--font-grade);
  font-weight: var(--font-weight-normal);
}


:root {
.ns-100 #content, .ns-100 #p-cactions li, .ns-100 #p-cactions li a { background: #f3f3ff; }
  /* common */
.ns-100 div.thumb { border-color: #f3f3ff; }
  --theme-header-color:#0077c0;
}
.ns-101 #content, .ns-101 #p-cactions li, .ns-101 #p-cactions li a { background: #f3f3ff; }
.ns-101 div.thumb { border-color: #f3f3ff; }


.ns-100 #content  
h1:after {
{
background:none repeat scroll 0 0 #0077c0;
  border-style:solid;
bottom:-0;
  border-color:#ff0000 #0000ff;
content:"";
display:block;
height:2px;
position:relative;
width:100%
}
}
 
/***** BACKGROUND AND BORDER COLORS FOR CONTENT*****/
/****************************************/
/******* Start DRUID CSS rules *********/
/* Border colors */
/****************************************/
   
 
.borderc1 { border-color: #e9e9e9; border-width:thin; }/* light grey */
.druid-container {
    /* These variables are designed to inherit from your wiki's color variables.
.borderc2 { border-color: #aaaaaa; border-width:thin; }/* grey (as toc) */
      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,
.borderc3 { border-color: #777777; border-width:thin; }/* dark grey */
      otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
.borderc4 { border-color: #000000; border-width:thin; }/* black */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
    --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
.borderc5 { border-color: #c00000; border-width:thin; }/* red */
   
    --druid-secondary-background-color: var(--wiki-accent-color, #0077c0);
.borderc6 { border-color: #025e9d; border-width:thin; }/* blue */
    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 0, 119, 192);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
.borderc7 { border-color: #008040; border-width:thin; }/* green */
    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
   
.borderc8 { border-color: #ffcc00; border-width:thin; }/* yellow */
    --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);
/* Background colors */
   
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
.backgroundc1 { background-color: #ffffff; }/* white */
    --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
   
.backgroundc2 { background-color: #f9f9f9; }/* light grey (as toc)*/
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
.backgroundc3 { background-color: #eeeeee; }/* light grey (headers) */
    --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);
.backgroundc4 { background-color: #e0e0e0; }/* more grey */
.backgroundc5 { background-color: #d2d2d2; }/* more grey */
.backgroundc6 { background-color: #b7b7b7; }/* more grey */
.backgroundc7 { background-color: #a3a3a3; }/* darker grey */
/***** SOME OTHER SMALL THINGS *****/
/* Give a bit of space to the TOC */
#toc { margin: 1em 0; }
/* Marking redirects in Special:Allpages*/
.allpagesredirect { font-style: italic; }
.watchlistredir { font-style: italic; }
/* Bug 1583 Printing of thumbnails */
div.tright { clear: right; }
/* SideBoxes ([[:de:Wikipedia:TownBox|TB]]) */
div.sideBox {
position: relative;
float: right;
background: white;
margin-left: 1em;
border: 1px solid gray;
padding: 0.3em;
width: 200px;
overflow: hidden;
clear: right;
}
div.sideBox dl {
padding: 0;
margin: 0 0 0.3em 0;
font-size: 96%;
}
div.sideBox dl dt {
background: none;
margin: 0.4em 0 0 0;
}
div.sideBox dl dd {
margin: 0.1em 0 0 1.1em;
background-color: #f3f3f3;
}
/* Major warning - used on the main page template to warn against editing carelessly, but can be used elsewhere as well */
.majorwarning {
background: yellow;  
padding: 0.3em;  
text-align: center;  
font-size: 125%;
border: 2px solid red;
}
}
 
/******* MAIN PAGE STYLING **********/
/* ---------------------------------  */
/*   Safe to edit ABOVE this line    */
#mainpage_topbox {
/* ---------------------------------  */
background: #f9f9f9;  
 
padding: 0px;  
/* ---------------------------------  */
border: 1px solid #aaaaaa;  
/*     Do not edit below this line    */
margin: 0.2em 10px 10px;
/* ---------------------------------  */
 
.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;
}
}
 
.mainpage_boxtitle, .mainpage_hubtitle, #mainpage_pagetitle {
.druid-container::after {
font-size: 105%;  
    content: "";
padding: 0.4em;  
    position: absolute;
background-color: #eeeeee;  
    bottom: 0;
border-bottom: 1px solid #aaaaaa;  
    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;
}
}
 
.mainpage_boxtitle {
@media screen and (max-width: 720px) {
line-height: 120%;
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}
}
 
#mainpage_pagetitle {
.druid-main-images-file,
color: #cf7606;  
.druid-main-image {
font-size: 200% !important;
    text-align:center;
    background: url(/images/0/07/Imagebox.webp)  no-repeat center;
}
}
 
#mainpage_sitelinks {
.druid-infobox .druid-title,
padding: 0.2em;  
.druid-infobox .druid-section {
text-align: center;
    border-image-source: url(/images/0/07/Title_border.png);
background-color: white;
    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;
}
}
.mainpage_hubtitle {
 
text-align: center;
.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
    font-family:'subset-Karma-Regular', sans-serif
}
}
 
.mainpage_boxcontents, .mainpage_boxcontents_small {
.druid-label {
background: #000000;
    font-weight:bold;
padding:0.2em 0.4em;
    text-align: right;
box-sizing: border-box;
}
}
 
.mainpage_boxcontents_small {
.druid-row > .druid-label {
font-size: 95%;
    width: 38%;
    flex-shrink: 0;
}
}
 
.mainpage_hubbox, #mainpage_newscell, #mainpage_downloadcell {
.druid-row > .druid-label,
padding: 0;
.druid-row > .druid-data {
border: 1px solid #aaaaaa;
padding-inline: 0.3em;
    font-size: 0.9em;
}
}
 
.mainpage_hubbox {
.druid-data-Description {
margin-bottom: 0;
    font-size: 0.7em;
    font-style: italic;
    text-align: center;
}
}
 
#mainpage_newscell {
.druid-main-image,
margin-bottom: 15px;
.druid-main-images {
margin-top: 0 !important;
    padding:5px;
}
}
 
#mainpage_newscell .mainpage_boxtitle {
.druid-main-image img,
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Exquisite-khelpcenter.png/20px-Exquisite-khelpcenter.png);
.druid-main-images img {
background-repeat: no-repeat;
    max-width:100%;
background-position: 99% 0.3em;
    height:auto;
padding-right: 25px;
}
}
 
#mainpage_downloadcell {
.druid-main-images-labels {
width: 17em;  
    display:flex;
margin-bottom: 5px;  
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}
}
 
#mainpage_downloadcell .mainpage_boxtitle {
.druid-main-images-label {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_build.png/18px-Crystal_Clear_action_build.png);
    cursor:pointer;
background-repeat: no-repeat;
    flex:1 1 auto;
background-position: 96% 0.33em;
    text-align:center;
padding-right: 25px;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}
}
 
/* The words 'MediaWiki.org' in the title.*/
.druid-main-images-label.focused {
#mainpage_mwtitle {
    background:var(--druid-link-color);
color: #005288;
    color:var(--druid-link-label-color);
}
}
 
/********* Extension Infobox Styling ***********/
.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
.ext-infobox {
border: 2px solid #aaaaaa;
width: 272px;
float: right;
margin: 0 0 0.5em 0.5em;
border-collapse: collapse;
background-color: white;
}
}
 
.ext-infobox td {
.druid-toggleable-data:not(.focused),
border: 2px none #aaaaaa;
.druid-main-images-file:not(.focused),
padding: 0.2em 0.5em;
.druid-toggleable-heading:not(.focused) {
border-bottom: 1px solid #f0f0f0 !important;
    display:none;
}
}
 
.ext-header {
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
background-color: #aaaaaa;
    display:none;
color: white;
text-align: left;
}
}
.ext-header td {
 
padding-top: 0.5em;
.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}
}
 
.ext-header img {
.druid-grid {
padding: 0 0.2em 0 0.5em;
    display:grid;
    gap: 0.3em;
padding: 0.35em;
}
}
 
.ext-status-unstable, .ext-status-unstable td {
.druid-grid-item {
border-color: #990000;
    /* background:var(--druid-tertiary-background-color); */
    padding:0.25em;
    border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
    border-radius: 2px;
}
}
.ext-status-unstable .ext-header {
 
background-color: #990000;
.druid-grid-item > .druid-label,
color: #ffff00;
.druid-grid-item > .druid-data {
text-align: center;
}
}
 
.ext-status-experimental, .ext-status-experimental td {
.druid-data-wide {
border-color: #CC6600;
width:100%;
}
}
.ext-status-experimental .ext-header {
 
background-color: #CC6600;
.druid-section-container > .druid-collapsible {
display: flex;
justify-content: space-between;
align-items: center;
}
}
 
.ext-status-beta, .ext-status-beta td {
.druid-collapsed {
border-color: #000099;
    display:none!important;
}
}
.ext-status-beta .ext-header {
 
background-color: #000099;
.druid-collapsible {
    cursor:pointer;
    position:relative;
}
}
 
.ext-status-stable, .ext-status-stable td{
.druid-collapsible::after {
border-color: #009900;
    content:'\2013';
    display:block;
    position:absolute;
    right:10px;
    font-size:20px;
    font-weight:bold;
    color:var(--druid-secondary-background-label-color);
}
}
.ext-status-stable .ext-header {
 
background-color: #009900;
.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)) {
/**** prettify [[Extension Matrix]] ****/
  display: none;
.xm-table {
border: 1px solid #666666;
background-color: white;
}
}
 
.xm-table td, .xm-table th {
/*****************************************
vertical-align: top;
Div support
text-align: left;
*****************************************/
border: none;
 
background-color: #EEEEEE;
div.druid-row {
    display:flex;
    margin-block: 1px;
    padding: 3px 0px;
    border-bottom: 1px solid #a2a9b1;
}
}
 
.xm-table th {
div.druid-row + div.druid-row {
font-weight: bold;
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;
}
}
 
.xm-name { font-weight: bold; }
/* Display list items inline */
.hlist dd,
.xm-status-unknown { color:#888888; }
.hlist dt,
.xm-status-experimental { color:red; }
.hlist li {
.xm-status-beta { color:blue; }
/*
.xm-status-stable { color:green; }
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
.xm-type-unknown { color:#888888; }
* We also want to reset margin-right in Minerva
*/
.xm-name, .xm-status, .xm-type, .xm-version, .xm-updated { white-space: nowrap; }
margin: 0;  
display: inline;
.xm-updated { font-size:80%; }
.xm-alert { background-color: yellow; }
td.xm-blank { background-color: inherit; }
td.xm-updated { background-color: inherit; }
td.xm-description {
background-color: inherit;
font-style: italic;
}
}
 
th.xm-blank, th.xm-updated, th.xm-description {
/* Display requested top-level lists inline */
background-color: inherit;
.hlist.inline,
padding-bottom:0.6ex;
.hlist.inline dl,
border-bottom: 1px solid #666666;
.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;
}
}
 
th.xm-description {  
/* Hide empty list items */
font-style: italic;
.hlist .mw-empty-li {
display: none;
}
}
 
/** GENERAL PURPOSE PRETTY TABLES */
/* TODO: :not() can maybe be used here to remove the later rule. naive test
table.datatable {
* seems to work. more testing needed. like so: */
background-color: transparent;
.hlist dt:not(:last-child)::after {
        font-size: 14px;
content: ":\20";
}
}
table.datatable th, table.datatable td {
.hlist dd:not(:last-child)::after,
padding: 4px;
.hlist li:not(:last-child)::after {
        font-family: monospace;
/* "space, Middle Dot, space"
        width:25%
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;
}
}
table.datatable th {
 
text-align: left;
/* Add parentheses around nested lists */
background-color: #999999;
.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;
}
}
table.datatable tr {
 
background-color: #CCCCCC;
.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;
}
}
table.datatable tr:hover {
 
background-color: #FFFFCC;
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
 
.hlist ol > li {
counter-increment: listitem;
}
}
 
table.datatable td
.hlist ol > li::before {
{
content: " " counter(listitem) ".\20";
  text-align:right;
}
}


table {color:#000 !important;}
/********************************************
/* wikitable/prettytable class for skinning normal tables */
* End semantically-correct horizontal lists *
table.wikitable,
*********************************************/
table.prettytable {
margin: 1em 1em 1em 0;
background: transparent;
/*border: 1px #aaa solid;*/
border-collapse: collapse;
empty-cells:show;


/**********************************************************
* 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;
}
}
 
table.wikitable th, table.wikitable td,
.ranger-navbox * {
table.prettytable th, table.prettytable td {
  border: 0;
/*border: 1px #aaa solid;*/
padding: 0.2em 0.4em;
}
}
.ranger-navbox,  
table.wikitable th, table.wikitable td.hl3, table.wikitable th.hl3,
.ranger-navbox .ranger-section,
table.prettytable th, table.prettytable td.hl3, table.wikitable th.hl3 {
.ranger-navbox .ranger-listbox{
background: #232855;
  display: flex;
text-align: center;
  flex-direction: column;
  gap: var(--navbox-gap);
}
}
.ranger-navbox .ranger-title,
table.wikitable td.hl1, table.wikitable th.hl1,
.ranger-navbox .ranger-header{
table.prettytable td.hl1, table.wikitable th.hl1 {
  text-align: center;
background: #c5d8fc;
  padding:.5em calc(1.5em + 0.375rem); /* left and right padding equal to the size and position of the edit/collapse buttons */
text-align: center;
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
}
.ranger-navbox .ranger-title{
table.wikitable td.hl2, table.wikitable th.hl2,
  color: var(--navbox-title-color);
table.prettytable td.hl2, table.wikitable th.hl2 {
  background: var(--navbox-title-background);
background: #a7c1f2;
  font-size: 125%;
text-align: center;
}
}
.ranger-navbox .ranger-title a,
table.wikitable caption,
.ranger-navbox .ranger-title a:visited,
table.prettytable caption {
.ranger-navbox .ranger-title a:hover,
margin-left: inherit;
.ranger-navbox .ranger-title a.external,
margin-right: inherit;
.ranger-navbox .ranger-title a.external:visited,
font-weight: bold;
.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 {
/** Sidebar External Links **/
text-decoration: var(--navbox-header-redlink-decoration);
#n-browse-cvs a, #n-phpdoc a, #n-Mailing-list a {
background: url(/skins-1.5/monobook/external.png) center right no-repeat;
padding-right: 13px;
color: #36b;
}
}
.ranger-navbox .ranger-header a,
/* make the list of references look smaller */
.ranger-navbox .ranger-header a.external,
ol.references {
.ranger-navbox .ranger-header a.external:visited {
font-size: 100%;
  color: var(--navbox-heading-link-color);
}
}
.ranger-navbox .ranger-header a:visited{
.references-small { font-size: 90%;}
  color: var(--navbox-heading-link-color--visited);
/* prevent ugly horizontal page expansion */
pre { overflow: auto; }
/**** Version box on [[Manual:Downloading MediaWiki]] ****/
#DownloadVersionBox {
border: 2px solid black;
border-collapse: collapse;
margin: auto;
width: 50%;
color: black;
}
}
.ranger-navbox .ranger-header a.new,
#DownloadVersionBox td {
.ranger-navbox .ranger-header a.new:visited{
border: 2px solid black;
    color:var(--navbox-heading-redlink-color);
padding: 20px;
}
}
.ranger-navbox .ranger-header a:hover,
/*** More whitespace on search page ***/
.ranger-navbox .ranger-header a:visited:hover,
.page-Special_Search #search {
.ranger-navbox .ranger-header a.external:hover,
padding: 1em 0 2em 0;
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-heading-link-color--hover);
}
}
.ranger-navbox .ranger-meta{
.page-Special_Search #powersearch {
  position: absolute;
border: 1px solid #CCCCCC;
  left: 0.375rem;
padding: 0.5em 0.5em;
  top: 0.625em;
  display: block;
}
}
.ranger-navbox .ranger-meta .nv{
.page-Special_Search #powersearch-namespaces {
  display: block;
padding-left: 1em;
  width: 1.25em;
margin: 0.7em 0;
  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{
.page-Special_Search #powersearch-namespaces label {
  display: block;
white-space: nowrap;
  width: 100%;
min-width: 8.4em;
  height: 100%;
display: block;
  opacity: 0;
float: left;
}
}
.ranger-navbox .ranger-meta .nv > a > span{
/* Clear search button, but not check-boxes: */
  display: block;
.page-Special_Search br {
  width: 100%;
clear: left;
  height: 100%;
  overflow: hidden;
}
}
.ranger-navbox .ranger-meta .nv-view{
/**
  --mask: var(--icon-metalinks);
* Cute little "tip" boxes
*/
div.tip {
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
min-height: 30px; /* IE users will hate this... */
}
}
div.tip-info {
.ranger-navbox,
border: 1px solid #CC9933;
.ranger-navbox .ranger-section{
background-color: #CCCC99;
  position: relative;
}
}
div.tip-gotcha {
.ranger .mw-collapsible-toggle-placeholder{
border: 1px solid #CC0000;
  display: none;
background-color: #CC6666;
}
}
.ranger-navbox .ranger-title > .ranger-title-text,
/* Some styling for special page navigation */
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
.sp-cached {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Clock%20and%20warning.svg/20px-Clock%20and%20warning.svg);
background-position: 5px 3px;
background-repeat: no-repeat;
padding: 4px 0 4px 30px;
font-style: italic;
color: #606000;
margin: 0.3em 0;
border: 1px solid #EEEE80;
background-color: #FFFFE0;
}
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.SpecialPageInfo {
.ranger-navbox .ranger-header > .ranger-header-text a{
background-color: #f9f9f9;
  pointer-events: auto;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Exquisite-khelpcenter.png/35px-Exquisite-khelpcenter.png);
background-position: 0.8em 0.5em;
background-repeat: no-repeat;
padding: 0.3em 0.5em 0.3em 5.0em;
border-color: #025e9d;
border-width: 1px;
border-style: solid;
border-bottom-width: medium;
margin-bottom: 1em;
}
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
#searchresulttext {
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Exquisite-kfind.png/45px-Exquisite-kfind.png);
  --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,
.mw-viewprevnext {
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
display: block;
  width: 1.5em;
border: 1px solid #CCCCCC;
  height: 1.5em;
background-color: #F9F9F2;
  right: 0.5em;
padding: 0.2em 0.4em;
  top: 0.5em;
}
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
/* Language template */
  right: 0.5em;
  top: 0.5em;
.LanguageLinks {
margin-top: 0.5em;
}
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.LanguageLinks table {
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
clear: both;
  content: "";
border: 1px solid #aaaaaa;
  display: block;
border-collapse: collapse;
  width: 1.5em;
padding: 0.2em;
  height: 1.5em;
margin: 0;
  position: absolute;
font-size: 85%;
  right: 0.5em;
margin: 0 1px;
  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,
.LanguageLinks span {
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
white-space: nowrap;
  top: 0;
  right: 0;
}
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
/* Page headings used throughout the wiki (though not very much at the time of writing...) */
  background-color: var(--navbox-heading-icon-color);
.page-notice, .page-warning {
border-width: 1px;
border-style: solid;
padding: 0.3em 0.5em;
margin-bottom: 1em;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
/* Used to add informative notices to the top of pages - BLUE */
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
.page-notice {
  transform: none;
background-color: #f9f9f9;
border-color: #025e9d;
text-align: left;
}
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
/* Used to add warning information to the top of pages - RED */
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.page-warning {
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
background-color: #ffffff;
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
border-color: #c51919;
  display: none;
border-width: 2px;
}
}
.ranger-navbox .ranger-above,
.pw-head {
.ranger-navbox .ranger-below,
color: #c51919;
.ranger-navbox .ranger-group,
font-weight: bold;
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-list{
  padding: var(--navbox-cell-padding);
  width: unset;
}
}
.ranger-navbox .ranger-above,
/* Coloured watchlist / Special:Recentchanges numbers */
.ranger-navbox .ranger-below{
.mw-plusminus-pos {
  text-align: left; /* It's easy to center the content via <center></center> if needed. */
color: #006400; /* darkgreen */
}
}
.ranger-navbox .ranger-above{
/* .mw-plusminus-null currently at developer default */
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
.mw-plusminus-neg {
color: #8B0000; /* darkred */
}
}
.ranger-navbox .ranger-below{
/* extra buttons for edit dialog */
  background: var(--navbox-below-background);
/* from commons:MediaWiki:Common.css */
  color: var(--navbox-below-color);
.my-buttons {
padding: 0.5em;
}
.my-buttons a {
color: black;
background-color: #ccddee !important;
font-weight: bold;
font-size: 0.9em;
text-decoration: none;
border: thin #006699 outset;
padding: 0 0.1em 0.1em 0.1em;
}
.my-buttons a:hover, .my-buttons a:active {
background-color: #bbccdd;
border-style: inset;
}
/* from [[User:Splarka/Help:Linked images]] */
.imagelink_wikilogo a {
width:135px;
height:135px;
display:block;
text-decoration:none;
background-image: url("http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png")
}
}


.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;
}


/* wikitable/prettytable class for skinning normal tables */
/* responsive */
table.ggs_table, table.overall_table, table.group_table, table.project_table, table.user_table, table.main_table
@media screen and (max-width: 720px) {
{
  .ranger-navbox .ranger-section-body,
/* margin: 1em 1em 1em 0; */
  .ranger-navbox .ranger-sublist {
border: 1px #ffffff solid;
    display: flex;
border-collapse: collapse;
    flex-flow: column;
empty-cells:show;
  }
  .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%;
}


table.main_table
.wikitable tr:nth-child(odd) {
{
    background: rgba(0, 119, 192, .1);
border: 1px #D8B1B1 solid;
}


.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;
}


table.ggs_table, table.overall_table, table.group_table, table.project_table, table.user_table
.wikitable-nova {
{
    border-image-source: url(/images/2/2c/Infobox_border.png);
width:20%;
    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;
}
}


table.ggs_table
 
{
#mw-indicator-Japan {
width:45%;
filter:none
}
}


table.main_table
#home-nav {
{
margin-top:1rem
width:100%;
}
}


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


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


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


table.game_table th
.home-card {
{
border-radius:8px;
background: #FF0000;
font-size:.875rem;
height:5.82rem;
position:relative
}
}


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


table.project_table th
.home-card__background img {
{
height:100%;
background: #0000FF;
width:100%;
object-fit:cover;
}
}


.home-card__foreground {
position:absolute
}


table.project_table th
.home-card.home-card--button {
{
background:#242a31;
background: #0000FF;
overflow:hidden;
padding:0
}
}


table.user_table th
.home-card--button img {
{
transition:transform .2s ease
background: #800080;
}
}
td.ggs_td
 
{
.home-card--button:hover img {
background-color:#000000;
transform:scale(1.1)
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


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


td.division_td
span.hidden,span.citizen-section-indicator.citizen-ui-icon.mw-ui-icon-wikimedia-collapse,div.citizen-typeahead__labelItem {
{
display:none
background-color:#000000;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


td.project_td
table.timeline {
{
display: table;
background-color:#000000;
border-bottom: 0;
text-color:#306EFF;
background:transparent
font-family : Courier;
color: #0066CC;
}
}


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


td.user_td
table.timeline tr td:first-child {
{
padding-bottom: 0;
background-color:#000000;
font-size: 1rem;
text-color:#306EFF;
font-weight: bold;
font-family : Courier;
display: list-item;
color: #0066CC;
margin-left: -7px;
padding-left: 7px;
padding-top: 0.8rem
}
}


table.ggs_table td
table.timeline tr td {
{
border-bottom: 0
background-color:#000000;
text-color:#AFE378;
font-family : Courier;
/*color: #0066CC;*/
}
}


table.main_table td
table.timeline tr td:last-child {
{
padding-top: 0.2rem;
background-color:#00C45B;
padding-left: 0;
text-color:#C43A2C;
padding-right: 0
font-family : Courier;
}
}


table.overall_table td
.ranger-navbox .ranger-title {
{
  color: #FFF;
/*background-color:#000000;*/
  font-size: 1rem;
text-color:#306EFF;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
/*font-family : Courier;*/
  border: 2px solid #fff;
}
}


table.group_table td
.ranger-navbox .ranger-title-S1 {
{
  background: no-repeat url("/images/5/58/Navbar_Suikoden.webp");
background-color:#000000;
  background-color: #008d7e;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


table.project_table td
.ranger-navbox .ranger-title-S2 {
{
  background: no-repeat url("images/0/06/Navbar_Suikoden_II.webp");
background-color:#000000;
  background-color: #427da7;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


table.user_table td
.ranger-navbox .ranger-title-G1 {
{
  background: no-repeat url("images/a/a4/Navbar_Genso_Suikogaiden_Vol.1.webp");
background-color:#000000;
  background-color: #cdccd9;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


.center1
.ranger-navbox .ranger-title-G2 {
{  
  background: no-repeat url("images/8/87/Navbar_Genso_Suikogaiden_Vol.2.webp");
margin-left: auto;
  background-color: #cdccd9;
margin-right: auto;
}
}
 
.center2
.ranger-navbox .ranger-title-CS {
{
  background: no-repeat url("images/c/ca/Navbar_Genso_Suikoden_Card_Stories.webp");
text-align: center;
  background-color: #cfbd90;
}
}


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


.center table
.ranger-navbox .ranger-title-S3 {
{  
  background: no-repeat url("images/b/b8/Navbar_Suikoden_III.webp");
margin-left: auto;
  background-color: #bc1c23;
margin-right: auto;
text-align: left;
}
}


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


div.centered table
.ranger-navbox .ranger-title-ST {
{
  background: no-repeat url("images/0/0e/Navbar_Suikoden_Tactics.webp");
margin: 0 auto;  
  background-color: #93ac8b;
text-align: center;
}
}


<!-- HELP CAME FROM:
.ranger-navbox .ranger-title-S5 {
http://www.daniweb.com/forums/thread8193.html,
  background: no-repeat url("images/a/af/Navbar_Suikoden_V.webp");
http://theodorakis.net/tablecentertest.html
  background-color: #ceb25e;
http://www.computerhope.com/htmcolor.htm
}
-->


<!--http://www.homeandlearn.co.uk/CSS/css1p8.html, http://w3schools.com/css/css_examples.asp--!>
.ranger-navbox .ranger-title-HS {
/*this is for tages only*/
  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;
}


table.outside, td.outside, th.outside, div.outside
.ranger-navbox .ranger-title-PS {
{
  background: no-repeat url("images/0/03/Navbar_Pachislot_Genso_Suikoden.webp");
background:#000000;
  background-color: #3d6b98;
text-align:center;
}
align:center;


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


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


td.wikirelated
.ranger-navbox .ranger-title-GS {
{
  background: no-repeat url("images/2/2d/Navbar_Genso_Suikoden.webp");
background:#000000;
  background-color: #00307c;
color:#FF00FF;
text-align:center;
}
}


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


td.general
#mp-banner-container {
{
position:relative;
background:#000000;
border:1px solid #0077c0;
color:#000000;
border-radius:5px;
text-align:center;
height: 23em;
overflow:hidden;
}
}


table.article, div.article, td.article, span.article
#mp-welcome {
{
position:relative;
border: medium double #660000
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;
}
}


table.file, div.file, td.file, span.file
#mp-title {
{
text-align:center;
border: medium double #006600
max-width:70%;
}
}


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


table.category, div.category, td.category, span.category
.skin-theme-clientpref-night #mp-banner {
{
background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
border: medium double #000066
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;
}


table.template, div.template, td.template, span.template
.skin-theme-clientpref-os #mp-banner {
{
background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
border: medium double #008080
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
}


table.special, div.special, td.special
#mp-banner img {
{
max-width:100%;
border: medium double #666666;
height:auto;
}
}


table.newsletter
@media (max-width: 768px) {
{
.wikitable-nova {
border: medium double #666666;
  flex: 1 1 100%;
align: right;
  max-width: 100%;
    }
}
}


div.newsletter td
.druid-data ul {
{
    margin: 0 0 0 1.6em;
border: medium single #666666;
    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);
      }
  }


/* http://en.wikipedia.org/wiki/MediaWiki:Common.css - June 6th, 2009 */
  /* 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]]  *
**********************/


/* Default skin for navigation boxes */
.responsive-image {
table.navbox {/* Navbox container style */
max-width:100%;
border: 1px solid #aaa;
height:auto;
width: 100%;  
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
}
}
table.navbox + table.navbox {/* Single pixel border between adjacent navboxes */
 
margin-top: -1px;/* (doesn't work for IE6, but that's okay) */
#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;
}
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
text-align: center;/* Title and above/below styles */
padding-left: 1em;
padding-right: 1em;
}
}
.navbox-group {/* Group style */
 
white-space: nowrap;
@media (max-width: 1199px) {
text-align: right;
#mp-container {
font-weight: bold;
display:grid;
padding-left: 1em;
grid-template-areas: "sl" "s1" "s2" "gates" "otd" "links";
padding-right: 1em;
gap:5px;
}
}
.navbox, .navbox-subgroup {
background: #fdfdfd; /* Background color */
}
}
.navbox-list {
 
border-color: #fdfdfd; /* Must match background color */
.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;
}
}
.navbox-title,
 
table.navbox th {
.mp-body {
background: #ccccff; /* Level 1 color */
height: 100%;
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}
}
.navbox-abovebelow,
 
.navbox-group,
.mp-box.centered-content .mp-body {
.navbox-subgroup .navbox-title {
height: 100%;
background: #ddddff; /* Level 2 color */
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
 
background: #e6e6ff; /* Level 3 color */
.mp-heading {
}
text-align:center;
.navbox-even {
font-size: 200%;
background: #f7f7f7; /* Even row striping */
font-family:Marcellus SC;
}
color:var(--wiki-heading-color);
.navbox-odd {
padding: 0 0 5px 0;
background: transparent; /* Odd row striping */
width:auto;
}
.collapseButton {/* 'show'/'hide' buttons created dynamically */
float: right;/* by the CollapsibleTables javascript in*/
font-weight: normal; /* [[MediaWiki:Common.js]]are styled here*/
text-align: right; /* so they can be customised.*/
width: auto;
}
.navbox .collapseButton {/* In navboxes, the show/hide button balances */
width: 6em;/* the vde links from [[Template:Tnavbar]], */
}/* so they need to be the same width. */
/*
.subportal
{
border-style:medium dotted #ff00ff;
border-bottom:thick dotted #ffff00;
}
}


.c1
.mp-body-columns ul {
{
  columns: 3;
border-style:medium dotted #00ff00;
  -webkit-columns: 3;
border-bottom:thick dotted #ff0000;
  -moz-columns: 3;
  list-style: none;
  padding: 0;
}
}


.c2
/***********************
{
* 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
}
}
*/


table.subportal {
.games-card {
border-width: 2px 2px 2px 2px;
border-radius:8px;
border-spacing: 2px 2px 2px 2px;
font-size:.775rem;
border-style: solid solid solid solid;
height:9.82rem;
border-color: green green green green;
position:relative
border-collapse: separate;
background-color: rgb(255, 255, 240);
}
}


#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
}


tr.subportalheading th, tr.subportalheading td {
#home-nav .games-card__foreground {
border-width: 2px 2px 2px 2px;
align-items:flex-end;
padding: 0.2em 1em 0em 1em !important;
color:#fff;
border-color: blue blue blue blue;
display:flex;
background-color: rgb(250, 240, 230);
font-size:150%;
width:15%;
font-weight:500;
height:100%;
padding:0 .938rem;
pointer-events:none;
}
}


tr.subportalheading th {
.games-card__foreground {
border-style: solid solid solid solid;
position:absolute
-moz-border-radius: 3px 3px 3px 3px;
}
tr.subportalheading td{
border-style: dashed dashed dashed dashed;
text-align: center;
-moz-border-radius: 0px 0px 0px 0px;
}
}


td.subportalcell
.games-card.games-card--button {
{
overflow:hidden;
border-width: 0px 0px 0px 0px;
padding:0
border-style: dashed dashed dashed dashed;
border-color: blue blue blue blue;
background-color: rgb(250, 240, 230);
        padding: 0px 4px 4px 4px;
}
}


/* help came from http://www.w3schools.com/css/pr_border-bottom.asp, http://www.w3schools.com/html/html_tables.asp, http://www.somacon.com/p141.php, http://www.quackit.com/html/tags/html_div_tag.cfm*/
.games-card--button img {
 
transition:transform .2s ease
/* documentation colors inpried by kuler user greenredVendormate */
 
div.documentation
{
border:1px solid black;
border-color: rgb(161, 49, 0);
background-color: rgb(139, 169, 69);
text-align:center;
}
}


 
.games-card--button:hover img {
table.documentation th
transform:scale(1.1)
{
background-color: rgb(255, 121, 30);
}
}


table.documentation td
/* Enemy flex table */
{
text-align:left;
}
table.center
{
margin-left: auto;
margin-right: auto;
}


table.project_table th a, span.project a
.table5>div,
{
        .table4>div,
color:#FFD100;
        .table3>div,
font-family : Courier;
        .table2>div,
}
        .table1>div {
            display: flex;
        }


.project_table a:hover, .Project a:hover
        .table1>div>div {
{
            /* you can remove the border */
color:#FFD100;
            /* 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 */
        }


table.sidebar
        .table5>div>div {
{
            /* you can remove the border */
align:right;
width:25%;
}


.default-border-radius
            /* you can remove the height */
{
        }
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


.default-border-top
        .table6 {
{
            display: flex;
-moz-border-radius-topleft: 5px;
        }
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
}


.default-border-bottom
        .table6>div {
{
            /* you can remove the border */
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
}
/*
.portlet
{
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
}
*/


/*InterProject: gotten from http://en.wiktionary.org/wiki/MediaWiki:Common.css on 10/16/2010 */  
            /* you can remove the height */
.interProject
        }
{
    display:none;
    clear: both;
    border-top: 2px dotted #AAAAAA;
    margin-top: 2em;
}


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


/* Grabbed from WikiBound on 2/1/2011 */
        .table1 .row2 {
            width: 20%;
        }


.roundy { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -icab-border-radius: 20px; -o-border-radius: 20px; }
        .table1 .row3 {
            width: 50%;
        }


.roundytl { border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -o-border-top-left-radius: 20px; }
        .table6 .row1,
        .table5 .row1,
        .table4 .row1,
        .table3 .row1,
        .table2 .row1 {
        display: flex;
            width: 20%;
            align-items: center;
            justify-content: center;
        }


.roundytr { border-top-right-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-right-radius: 20px; }
        .table5 .row2,
        .table4 .row2,
        .table3 .row2,
        .table2 .row2 {
            width: 80%;
            align-items: center;
            justify-content: center;
        }
       
        .table6 .row2 {
            width: 80%;
        }


.roundybl { border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-bottom-left-radius: 20px; }
        .table2 .row2,
        .table3 .row2,
        .table4 .row2 {
            display: flex;
        }


.roundybr { border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-right-radius: 20px; }
        .table2 .row2>div,
        .table3 .row2>div,
        .table4 .row2>div {
            width: 100%;
        }


.roundybottom { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-left-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-left-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-left-radius: 20px; -o-border-bottom-right-radius: 20px; }
        .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 */
        }


.roundytop { border-top-left-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-left-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-left-radius: 20px; -o-border-top-right-radius: 20px; }
        .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;
            }


.roundyleft { border-top-left-radius: 20px; border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-top-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-top-left-radius: 20px; -o-border-bottom-left-radius: 20px; }
        @media(max-width: 768px) {


.roundyright { border-bottom-right-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-topright: 20px; -webkit-border-bottom-right-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-bottom-right-radius: 20px; -o-border-top-right-radius: 20px; }
            .table2 .row2,
            .table3 .row2,
            .table4 .row2 {
                flex-direction: column;
            }
           
            #enemy-flex {
            font-size: 0.875em;
            }


table.fetable td
            .table3>div>div,
{
            .table2>div>div {
   background:#D4C285;
                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;
}
}
table.column
 
{
.grid-box h3 {
height:100%;
  margin-bottom: 10px;
}
}


.mpgamelist a:link {color: #278514}
/* Grid container for all pairs */
.mpgamelist a:visited {color: #278514}
.grid {
.mpgamelist a:hover {color: #31a71a; text-decoration:none}
  display: grid;
  grid-template-columns: repeat(14, 1fr); /* default: 14 pairs per row */
  gap: 4px;
}


.bgimage {
.grid-10 {
   background-image: url('images/1/16/Falchion_transparent.png');
   grid-template-columns: repeat(10, 1fr); /* default: 14 pairs per row */
  background-position: center center;
  background-repeat: no-repeat;
}
}


.tab {
.grid-9 {
border-radius: 7px 7px 0 0;
  grid-template-columns: repeat(9, 1fr); /* default: 14 pairs per row */
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
-khtml-border-radius: 7px 7px 0 0;
-icab-border-radius: 7px 7px 0 0;
-o-border-radius: 7px 7px 0 0;
text-align:center;
padding: 3px 5px;
margin: 0px;
border: 2px solid #B0B0B0;
background-color: #232855;
white-space: nowrap;
cursor:pointer;
}
}


span.tab:hover, div.tab:hover, td.tab:hover {
.grid-6 {
background-color:#222222;
  grid-template-columns: repeat(6, 1fr); /* default: 14 pairs per row */
}
}


.tabselected {
.grid-4 {
background-color:#222 !important;
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
border-bottom: 2px solid #222;
color: #d9d9d9;
}
}


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


/* Revision differences */
.grid-1-2 {
.diff-deletedline, .diff-addedline {color:black;}
  grid-template-columns: 1fr 2fr; /* first column 1 part, second 2 parts */
}


pre {
.grid-2-1 {
background-color: #333;
  grid-template-columns: 2fr 1fr; /* first column 1 part, second 2 parts */
color: #D9D9D9;
}
}




/* Special:AllMessages */
/* Each header/value column */
.TablePager td {background-color: transparent;}
.pair {
.TablePager th {background-color: #555;}
  display: flex;
.TablePager tr:hover td {background-color: #333;}
  flex-direction: column;
 
  border: 1px solid #0077c0;
.am_default, .am_actual {color:black;}
 
.tab {
border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
-khtml-border-radius: 7px 7px 0 0;
-icab-border-radius: 7px 7px 0 0;
-o-border-radius: 7px 7px 0 0;
text-align:center;
padding: 3px 5px;
margin: 0px;
border: 2px solid #B0B0B0;
background-color: #232855;
white-space: nowrap;
cursor:pointer;
}
}


span.tab:hover, div.tab:hover, td.tab:hover {
.pair-row {
background-color:#222222;
  display: flex;
  flex-direction: row;
  border: 1px solid #0077c0;
  margin: 2px;
}
}


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


.tabcontainer p {
.value {
margin:0;
  padding: 6px;
}
}


/* Revision differences */
/* --- Responsive breakpoints --- */
.diff-deletedline, .diff-addedline {color:black;}


pre {
/* At 960px and below → 7 columns (2 groups of 7) */
background-color: #333;
@media (max-width: 960px) {
color: #d9d9d9;
  .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) */
/* Special:AllMessages */
@media (max-width: 520px) {
.TablePager td {background-color: transparent;}
  .grid {
.TablePager th {background-color: #555;}
    grid-template-columns: repeat(4, 1fr);
.TablePager tr:hover td {background-color: #333;}
  }
 
  .grid-10 .grid-9 .grid-6 {
.am_default, .am_actual {color:black;}
    grid-template-columns: repeat(3, 1fr);
 
  }
/* For positioning icons at top-right, used in Templates
  .grid-4 {
  "Spoken Article" and "Featured Article" */
    grid-template-columns: repeat(3, 1fr);
div.topicon {
  }
     position: absolute;
.grid-2 {
    top: -2em;
     grid-template-columns: repeat(1, 1fr);
     margin-right: -100px;
  }
    display: block !important;
  .grid-1-2 {
     grid-template-columns: repeat(1, 1fr);
}
}
   
  .grid-2-1 {
/* FR topicon position */
     grid-template-columns: repeat(1, 1fr);
div.flaggedrevs_short {
     position: absolute;
    top: -3em;
    right: 0px;
    z-index: 1;
    margin-left: 0;
    /* Because this is not yet a topicon, we emulate it's behavior,
      this ensure compatibility with edit lead section gadget. */
    margin-right: -10px;
}
}


div#mw-panel { width: 12em; }
  .attacktable-responsive{font-size:90%!important;}
div#footer, #mw-head-base, div#content { margin-left: 12em; }
}
#left-navigation { left: 12em; }


</nowiki></pre>
@media screen and (max-width:360px){
    .attacktable-responsive{font-size:80%!important;}
}

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"