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

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
Created page with "→CSS placed here will be applied to all skins: body.page-Main_Page h1.firstHeading, body.page-Main_Page #lastmod, body.page-Main_Page #siteSub { display:none; } #bodyC..."
mNo edit summary
 
(864 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 */


body.page-Main_Page h1.firstHeading, body.page-Main_Page #lastmod, body.page-Main_Page #siteSub {
@font-face {
display:none;
  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;
}
}


#bodyContent {
@font-face {
position: relative;
  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;
}
}


/* Image restrictions */
body {
div.userbox img { max-width:100%; width/**\*/:100%\9; height:auto !important; }
  font-family: AtkinsonHyperlegibleNext-Regular, var(--font-family-base);
table.talkbubble {
  font-variation-settings: 'GRAD' var(--font-grade);
table-layout/*\**/:fixed\9;
  font-weight: var(--font-weight-normal);
width/*\**/:100%\9;
}
}
table.talkbubble > tr > td:first-child, table.talkbubble > tbody > tr > td:first-child { text-align:center; width:90px; }
table.talkbubble td:first-child img { height:auto !important; max-width:90px; }


/* Float right */
:root {
.goright {
  /* common */
clear:right;
  --theme-header-color:#0077c0;
float:right;
}
}


/* Spacing */
h1:after {
#boxtop {
background:none repeat scroll 0 0 #0077c0;
height:20px;
bottom:-0;
clear:both;
content:"";
margin:0;
display:block;
height:2px;
position:relative;
width:100%
}
}


/* Reflist font size */
/****************************************/
.references-small { font-size:90%; }
/*******  Start DRUID CSS rules *********/
/****************************************/


/* Mark redirects in Special:Allpages and Special:Watchlist */
.druid-container {
.allpagesredirect, .watchlistredir { font-style: italic; }
    /* 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   •   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;
}


/* Infobox template style */
.wikitable-nova {
.infobox {
    border-image-source: url(/images/2/2c/Infobox_border.png);
border:1px solid #aaa;
    border-image-slice: 15;
background-color:#f9f9f9;
    border-image-width: 13px;
color:#000;
    border-image-repeat: round;
margin-bottom:0.5em;
    border-width: unset;
margin-left:1em;
    border-style: solid;
padding:0.2em;
    border-radius: 0 0 30px 30px;
float:right;
    border-collapse:separate;
clear:right;
    margin:1rem 0 1rem 0;
    flex:1 1 50%;
    max-width:48%;  
    box-sizing:border-box;
}
}
.infobox td, .infobox th {
 
vertical-align: top;
 
#mw-indicator-Japan {
filter:none
}
}
.infobox caption {
 
font-size: larger;
#home-nav {
margin-left: inherit;
margin-top:1rem
}
}
.infobox.bordered {
 
border-collapse: collapse;
#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
}
}
.infobox.bordered td, .infobox.bordered th {
 
border: 1px solid #aaa;
#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
}
}
.infobox.bordered .borderless td, .infobox.bordered .borderless th {
 
border: 0;
.home-card--button img {
transition:transform .2s ease
}
}


/* Forum formatting (by -Algorithm & -Splaka) */
.home-card--button:hover img {
.forumheader {
transform:scale(1.1)
border:1px solid #aaa;
background-color:#f9f9f9;
margin-top:1em;
padding:12px;
}
}
.forumlist td.forum_edited a {
 
color:#000;
.home-link {
text-decoration:none;
display:grid;
font-size:.875rem;
font-weight:500;
grid-gap:.375rem;
margin-top:.375rem;
text-align:center
}
}
.forumlist td.forum_title a {
 
padding-left:20px;
span.hidden,span.citizen-section-indicator.citizen-ui-icon.mw-ui-icon-wikimedia-collapse,div.citizen-typeahead__labelItem {
display:none
}
}
.forumlist td.forum_title a.forum_new {
 
font-weight:bold;
table.timeline {
background:url(/images/4/4e/Forum_new.gif) center left no-repeat;
display: table;
padding-left:20px;
border-bottom: 0;
background:transparent
}
}
.forumlist td.forum_title a.forum_new:visited {
 
font-weight:normal;
table.timeline tr {
background:none;
display: flex;
padding-left:20px;
flex-direction: column;
padding-left: 20px
}
}
.forumlist th.forum_title {
 
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
}
}


/* Recent changes byte indicators */
table.timeline tr td {
.mw-plusminus-pos { color: #006500; }
border-bottom: 0
.mw-plusminus-neg { color: #8B0000; }
}
/* </pre> */


/* Forum formatting -Algorithm & -Splaka */
table.timeline tr td:last-child {
.forumheader { border: 1px solid #aaa; background-color: #f9f9f9; margin-top: 1em; padding: 12px; }
padding-top: 0.2rem;
.forumlist td.forum_edited a { color: black; text-decoration: none }
padding-left: 0;
.forumlist td.forum_title a { padding-left: 20px; }
padding-right: 0
.forumlist td.forum_title a.forum_new { font-weight: bold; background: url(/images/4/4e/Wiki.png)
}
center left no-repeat; padding-left: 20px; }
.forumlist td.forum_title a.forum_new:visited { font-weight: normal; background: none; padding-left: 20px; }
.forumlist th.forum_title { padding-left: 20px; }


/* default skin for navigation boxes */
.ranger-navbox .ranger-title {
table.navbox {
  color: #FFF;
background-color:#f9f9f9;
  font-size: 1rem;
border:1px solid #aaa;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
clear:both;
  border: 2px solid #fff;
font-size:90%;
margin:1em 0 0;
padding:2px;
text-align:center;
width:100%;
}
}


table.navbox th {
.ranger-navbox .ranger-title-S1 {
background-color:#ccf;
  background: no-repeat url("/images/5/58/Navbar_Suikoden.webp");
padding-left:1em;
  background-color: #008d7e;
padding-right:1em;
}
}


table.navbox tr:not(:first-child) th {
.ranger-navbox .ranger-title-S2 {
background-color:#ddf;
  background: no-repeat url("images/0/06/Navbar_Suikoden_II.webp");
  background-color: #427da7;
}
}


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


/* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at [[Wikipedia:NavFrame]]. */
.ranger-navbox .ranger-title-G2 {
div.Boxmerge, div.NavFrame {
  background: no-repeat url("images/8/87/Navbar_Genso_Suikogaiden_Vol.2.webp");
margin:0;
  background-color: #cdccd9;
padding:4px;
border:1px solid #aaa;
text-align:center;
border-collapse:collapse;
font-size:95%;
}
}
div.Boxmerge div.NavFrame {
 
border-style:none;
.ranger-navbox .ranger-title-CS {
border-style:hidden;
  background: no-repeat url("images/c/ca/Navbar_Genso_Suikoden_Card_Stories.webp");
  background-color: #cfbd90;
}
}
div.NavFrame + div.NavFrame {
 
border-top-style:none;
.ranger-navbox .ranger-title-S12 {
border-top-style:hidden;
  background: no-repeat url("images/d/d4/Navbar_Suikoden_I&II.png");
  background-color: #0f1859;
}
}
div.NavPic {
 
background-color:#fff;
.ranger-navbox .ranger-title-S3 {
margin:0px;
  background: no-repeat url("images/b/b8/Navbar_Suikoden_III.webp");
padding:2px;
  background-color: #bc1c23;
float:left;
}
}
div.NavFrame div.NavHead {
 
height:1.6em;
.ranger-navbox .ranger-title-S4 {
font-weight:bold;
  background: no-repeat url("images/2/27/Navbar_Suikoden_IV.webp");
background-color:#ccf;
  background-color: #006994;
position:relative;
}
}
div.NavFrame p {
 
font-size:100%;
.ranger-navbox .ranger-title-ST {
  background: no-repeat url("images/0/0e/Navbar_Suikoden_Tactics.webp");
  background-color: #93ac8b;
}
}
div.NavFrame div.NavContent {
 
font-size:100%;
.ranger-navbox .ranger-title-S5 {
  background: no-repeat url("images/a/af/Navbar_Suikoden_V.webp");
  background-color: #ceb25e;
}
}
div.NavFrame div.NavContent p {
 
font-size:100%;
.ranger-navbox .ranger-title-HS {
  background: no-repeat url("images/3/3b/Navbar_Genso_Suikoden_Tierkreis_Hoshikuzu_no_Shiro.webp");
  background-color: #7b726b;
}
}
div.NavEnd {
 
margin:0;
.ranger-navbox .ranger-title-TK {
padding:0;
  background: no-repeat url("images/4/47/Navbar_Suikoden_Tierkreis.webp");
line-height:1px;
  background-color: #6d5849;
clear:both;
}
}
a.NavToggle {
 
position:absolute;
.ranger-navbox .ranger-title-PS {
top:0;
  background: no-repeat url("images/0/03/Navbar_Pachislot_Genso_Suikoden.webp");
right:3px;
  background-color: #3d6b98;
font-weight:normal;
font-size:smaller;
}
}


/* Suite Tabs */
.ranger-navbox .ranger-title-HT {
.suite_tab {
  background: no-repeat url("images/4/43/Navbar_Genso_Suikoden_Tsumugareshi_Hyakunen_no_Toki.webp");
background:#fff;
  background-color: #008865;
background:linear-gradient(top,#eee,#fff);
background:-o-linear-gradient(top,#eee,#fff);
background:-ms-linear-gradient(top,#eee,#fff);
background:-moz-linear-gradient(top,#eee,#fff);
background:-webkit-linear-gradient(top,#eee,#fff);
box-shadow:2px 2px 4px #333;
display:inline;
}
}
.client-msie-8 .suite_tab, .client-msie-9 .suite_tab {
 
padding-bottom:3px !important;
.ranger-navbox .ranger-title-SL {
  background: no-repeat url("images/c/ce/Navbar_SL.png");
  background-color: #046a9d;
}
}


/*Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
.ranger-navbox .ranger-title-GS {
see http://www.barelyfitz.com/projects/tabber/
  background: no-repeat url("images/2/2d/Navbar_Genso_Suikoden.webp");
*/
  background-color: #00307c;
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
}


/*--------------------------------------------------
.ranger-navbox .ranger-title-RN {
REQUIRED to hide the non-active tab content.
  background: no-repeat url("images/0/01/Navbar_Runes.webp");
But do not hide them in the print stylesheet!
  background-color: #294b80;
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
}


/*--------------------------------------------------
#mp-banner-container {
.tabber = before the tabber interface is set up
position:relative;
.tabberlive = after the tabber interface is set up
border:1px solid #0077c0;
--------------------------------------------------*/
border-radius:5px;
.tabber {
height: 23em;
overflow:hidden;
}
}
.tabberlive {
 
margin-top:1em;
#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 {
ul.tabbernav = the tab navigation list
text-align:center;
li.tabberactive = the active tab
max-width:70%;
--------------------------------------------------*/
ul.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #CCC;
font: bold 12px Verdana, sans-serif;
}
}


ul.tabbernav li {
#mp-banner {
list-style: none;
position:relative;
margin: 5px 0 0;
width:100%;
display: inline-block !important;
height:100%;
top:-100%;
filter:blur(5px) brightness(50%);
z-index:1;
}
}


ul.tabbernav li a {
.skin-theme-clientpref-night #mp-banner {
padding:3px 0.5em;
background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
margin-left:3px;
background-size:cover;
border:1px solid #ccc;
background-repeat:no-repeat;
border-bottom:none;
background-position:top center;
background:#f2f7ff;
text-decoration:none;
}
}


ul.tabbernav li a:link { color:#448; }
.skin-theme-clientpref-day #mp-banner {
ul.tabbernav li a:visited { color:#667; }
    background: url(https://gensopedia.org/images/5/5e/Main_page_banner_light.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}


ul.tabbernav li a:hover {
.skin-theme-clientpref-os #mp-banner {
color:#000;
background:url(https://gensopedia.org/images/c/c0/Main_page_banner.jpg); /* [[File:Main_page_banner.jpg]] */
background:#fff9f2;
    background-size: cover;
border-color:#ccc;
    background-repeat: no-repeat;
    background-position: top center;
}
}


ul.tabbernav li.tabberactive a {
#mp-banner img {
background-color:#fff;
max-width:100%;
border-bottom:1px solid #fff;
height:auto;
}
}


ul.tabbernav li.tabberactive a:hover {
@media (max-width: 768px) {
color:#000;
.wikitable-nova {
background:#fff;
  flex: 1 1 100%;
border-bottom:1px solid #fff;
  max-width: 100%;
    }
}
}


/*--------------------------------------------------
.druid-data ul {
.tabbertab = the tab content
    margin: 0 0 0 1.6em;
Add style only after the tabber interface is set up (.tabberlive)
    padding: 0;
--------------------------------------------------*/
  }
.tabberlive .tabbertab {
 
padding:5px;
  .druid-subtitle {
border:1px solid #ccc;
    font-size: 45%;
border-top:0;
  }
border-left:none;
 
border-right:none;
  .patrollink {
border-bottom:none;
  display: none;
  }
 
  .stats-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
  }


/* If you don't want the tab size changing whenever a tab is changed
  .stats-title {
you can set a fixed height */
      flex-grow: 1;
/* height:200px; */
      flex-basis: calc(100% / 4); /* Default: Matches 4-column layout */
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #f0f0f0;
  }


/* If you set a fix height set overflow to auto and you will get a
  .stat-box {
scrollbar when necessary */
      flex-grow: 1;
/* overflow:auto; */
      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;
}
}


/* If desired, hide the heading since a heading is provided by the tab */
#mp-banner-container {grid-area:banner;}
.tabberlive .tabbertab h2 {
#mp-s1-box {grid-area:s1;}
display:none;
#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;
}
}
.tabberlive .tabbertab h3 {
display:none;
}
}


/* Example of using an ID to set different styles for the tabs on the page */
@media (max-width: 1199px) {
.tabberlive#tab1 {
#mp-container {
display:grid;
grid-template-areas: "sl" "s1" "s2" "gates" "otd" "links";
gap:5px;
}
}
.tabberlive#tab2 {
}
}
.tabberlive#tab2 .tabbertab {
 
height:200px;
.mp-box {
overflow:auto;
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;
}
}
/* </nowiki></pre> */


#title-gameicons { display: none!important; visibility: hidden !important; }
.mp-box.centered-content .mp-body {
#title-linktabs {
height: 100%;
position:absolute;
display: flex;
right:0;
flex-flow: column nowrap;
top:-44px;
justify-content: space-evenly;
}
}


/* remove talk link from forum namespace -Splarka */
.mp-heading {
body.ns-100 #ca-talk, body.ns-100 #this_talk, body.ns-100 #page_tabs li+li { display: none; }
text-align:center;
font-size: 200%;
font-family:Marcellus SC;
color:var(--wiki-heading-color);
padding: 0 0 5px 0;
width:auto;
}


/* Allow limiting of which header levels are shown in a TOC through {{TOClimit}} */
.mp-body-columns ul {
.toclimit-2 .toclevel-2 {display:none;}
  columns: 3;
.toclimit-3 .toclevel-3 {display:none;}
  -webkit-columns: 3;
.toclimit-4 .toclevel-4 {display:none;}
  -moz-columns: 3;
.toclimit-5 .toclevel-5 {display:none;}
  list-style: none;
.toclimit-6 .toclevel-6 {display:none;}
  padding: 0;
.toclimit-7 .toclevel-7 {display:none;}
}


/* Remove breadcrumbs for specific articles */
/***********************
.page-Zero_One .subpages, .page-Zero_One .PageHeader h2 {display: none;}
* End main page layout *
.page-Oathkeeper_Oblivion.subpages, .page-Oathkeeper_Oblivion .PageHeader h2 {display: none;}
************************/
.page-Terra_Xehanort .subpages, .page-Terra_Xehanort .PageHeader h2 {display: none;}


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


.tt1_suite{
.games-card {
background-color:#ebebeb;
border-radius:8px;
border-color:#aaa;
font-size:.775rem;
border-style:solid;
height:9.82rem;
border-width:1px;
position:relative
display:table;
float:right;
margin:0 1em 0.5em 1em;
padding:2px 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
}


.tt1_suite:before{
#home-nav .games-card__background:after {
content:'article suite:';
background:linear-gradient(to top,#000,transparent);
font-size:70%;
bottom:0;
line-height:.7em;
content:"";
display:block;
left:0;
pointer-events:none;
position:absolute;
right:0;
top:0w
}
}


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


.tt1_suite li {
.games-card__foreground {
display:inline;
position:absolute
}
}


.tt1_suite li:before{
.games-card.games-card--button {
content:'| ';
overflow:hidden;
padding:0
}
}


.tt1_suite li:first-child:before{
.games-card--button img {
content:'';
transition:transform .2s ease
}
}
.tt1_disambig + .tt1_suite{
 
border-top:none;
.games-card--button:hover img {
-moz-border-radius-topleft:0;
transform:scale(1.1)
-moz-border-radius-topright:0;
-webkit-border-top-left-radius:0;
-webkit-border-top-right-radius:0;
}
}


.tt1_disambig + .tt1_suite:before{
/* Enemy flex table */
content:'';
 
font-size:inherit;
.table5>div,
line-height:inherit;
        .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;
}
}


/* PATCH BORDER ON DOUBLE-DISAMBIGS */
.grid-box h3 {
  margin-bottom: 10px;
}


table.tt1_disambig{
/* Grid container for all pairs */
margin:0 1em;
.grid {
padding:.5em;
  display: grid;
background:#f7f8ff;
  grid-template-columns: repeat(14, 1fr); /* default: 14 pairs per row */
border:thin solid #aaa;
  gap: 4px;
display:block;
}
}


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


/* Transparent image preview checkerboard */
.grid-9 {
.fullImageLink img {
  grid-template-columns: repeat(9, 1fr); /* default: 14 pairs per row */
background:#fff url(http://img844.imageshack.us/img844/5714/transparentimg.png);
padding:3px;
}
}
.fullImageLink img:hover {
 
background:#bbb url(http://img844.imageshack.us/img844/5714/transparentimg.png);
.grid-6 {
  grid-template-columns: repeat(6, 1fr); /* default: 14 pairs per row */
}
}


/* Thumbnails */
.grid-4 {
div.thumb div.thumbinner div.magnify {
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
display:none !important;
}
}
div.thumb div.thumbinner div {
 
background:none !important;
.grid-2 {
border:none !important;
  grid-template-columns: repeat(2, 1fr); /* default: 14 pairs per row */
color:#fff;
}
}
div.thumb div.thumbinner a {
 
color:#ddd;
.grid-1-2 {
  grid-template-columns: 1fr 2fr; /* first column 1 part, second 2 parts */
}
}
div.thumb div.thumbinner a:visited {
 
color:#aaa;
.grid-2-1 {
  grid-template-columns: 2fr 1fr; /* first column 1 part, second 2 parts */
}
}
div.thumb div.thumbinner a:hover {
 
color:#fff;
 
/* Each header/value column */
.pair {
  display: flex;
  flex-direction: column;
  border: 1px solid #0077c0;
}
}
div.thumb div.thumbinner {
 
background:#282828;
.pair-row {
background:linear-gradient(top,#282828,#535353);
  display: flex;
background:-o-linear-gradient(top,#282828,#535353);
  flex-direction: row;
background:-ms-linear-gradient(top,#282828,#535353);
  border: 1px solid #0077c0;
background:-moz-linear-gradient(top,#282828,#535353);
  margin: 2px;
background:-webkit-linear-gradient(top,#282828,#535353);
border:none !important;
border-radius:5px;
box-shadow:2px 2px 6px #7f7f7f; /* This is needed for browser compatibility */
box-shadow:2px 2px 6px rgba(0,0,0,0.5);
padding:5px !important;
}
}
div.thumb .thumbimage {
 
border:none !important;
/* Header and value styling */
border-radius:5px;
.header {
  background:#7fbbdf;
  color:#000;
  font-weight: bold;
  padding: 6px;
  border: 1px solid #0077c0;
}
}
div.thumb .thumbimage:hover {
 
-moz-transform:scale(1.02);
.value {
-webkit-transform:scale(1.02);
  padding: 6px;
}
}


/* Input buttons */
/* --- Responsive breakpoints --- */
input[type='submit'], input[type='reset'], input[type='button'] {
 
padding:1px 6px 3px;
/* At 960px and below → 7 columns (2 groups of 7) */
border:3px double #aaa;
@media (max-width: 960px) {
border-radius:4px;
  .grid {
cursor:pointer;
    grid-template-columns: repeat(7, 1fr);
color:#222;
  }
background:#f7f7f7;
  .grid-10 .grid-9 {
background:linear-gradient(top,#f7f7f7,#e7e7e7);
    grid-template-columns: repeat(5, 1fr);
background:-o-linear-gradient(top,#f7f7f7,#e7e7e7);
  }
background:-ms-linear-gradient(top,#f7f7f7,#e7e7e7);
  .grid-4 {
background:-moz-linear-gradient(top,#f7f7f7,#e7e7e7);
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
  background:-webkit-linear-gradient(top,#f7f7f7,#e7e7e7);
  }
text-shadow:1px 1px 2px #aaa;
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-1-2 {
    grid-template-columns: repeat(2, 1fr);
}
}
input[type='submit']:hover, input[type='reset']:hover, input[type='button']:hover {
.grid-2-1 {
border-color:#282828;
    grid-template-columns: repeat(1, 1fr);
box-shadow:0 0 5px #640639;
}
}
input[type='submit']:active, input[type='reset']:active, input[type='button']:active {
padding:1px 5px 3px 7px;
}
}


/* Category Box */
/* At 520px and below → 4 columns (4 groups of 4) */
div.catlinks {
@media (max-width: 520px) {
background:#f9f9f9;
  .grid {
background:linear-gradient(top,#f9f9f9,#ddd);
    grid-template-columns: repeat(4, 1fr);
background:-o-linear-gradient(top,#f9f9f9,#ddd);
  }
background:-ms-linear-gradient(top,#f9f9f9,#ddd);
  .grid-10 .grid-9 .grid-6 {
  background:-moz-linear-gradient(top,#f9f9f9,#ddd);
    grid-template-columns: repeat(3, 1fr);
background:-webkit-linear-gradient(top,#f9f9f9,#ddd);
  }
border-radius:8px;
  .grid-4 {
padding:5px 11px !important;
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-1-2 {
    grid-template-columns: repeat(1, 1fr);
}
}
div.catlinks span {
.grid-2-1 {
padding:0 8px;
    grid-template-columns: repeat(1, 1fr);
}
}


/* Aspetto uguale ai link per il morph */
   .attacktable-responsive{font-size:90%!important;}
   .morphLink {
}
    color: #002BB8;
    display: inline-block;
    cursor: pointer;
}
  .morphLink:hover {
    text-decoration: underline;
}


  .toggleLink {
@media screen and (max-width:360px){
     color: #002BB8;
     .attacktable-responsive{font-size:80%!important;}
    display: inline-block;
}
    cursor: pointer;
}


/* Edit box */
/* Shop grid container */
.wikiEditor-ui textarea#wpTextbox1 {
.shop-grid {
line-height: 1.4em;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: center; /* center on mobile */
  margin: 1em 0;
}
}
#wpSummary, #wpSummaryLabel {
 
margin: 0.2em 0 0.4em 0 !important;
/* Each shop column (one table per div) */
.shop-col {
  flex: 1 1 400px;
  min-width: 300px;
}
}
input#wpSummary {
 
width: 85%;
/* Optional: narrower screens */
@media (max-width: 600px) {
  .shop-col {
    min-width: 100%;
  }
}
}

Latest revision as of 12:23, 25 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;}
}

/* Shop grid container */
.shop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: center; /* center on mobile */
  margin: 1em 0;
}

/* Each shop column (one table per div) */
.shop-col {
  flex: 1 1 400px;
  min-width: 300px;
}

/* Optional: narrower screens */
@media (max-width: 600px) {
  .shop-col {
    min-width: 100%;
  }
}
Retrieved from "https://gensopedia.org/index.php?title=MediaWiki:Common.css&oldid=154758"