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

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
mNo edit summary
mNo edit summary
 
(653 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


<pre><nowiki>
@font-face {
/* taken from http://www.grifkuba.org/main/wiki/index.php?title=MediaWiki:Common.css on Friday, February 26th, 2010 */
  font-family: 'AtkinsonHyperlegibleNext-Regular';
  src: url('/resources/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
      url('/resources/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 
@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);
}


table {color:@text !important;}
:root {
/* wikitable/prettytable class for skinning normal tables */
  /* common */
table.wikitable,
  --theme-header-color:#0077c0;
table.prettytable {
}
margin: 1em 1em 1em 0;
background: #fff;
/*border: 1px #aaa solid;*/
border-collapse: collapse;
empty-cells:show;
color: #777;


h1:after {
background:none repeat scroll 0 0 #0077c0;
bottom:-0;
content:"";
display:block;
height:2px;
position:relative;
width:100%
}
}
   
 
table.wikitable th, table.wikitable td,
/****************************************/
table.prettytable th, table.prettytable td {
/******* Start DRUID CSS rules *********/
/*border: 1px #aaa solid;*/
/****************************************/
padding: 0.2em 0.4em;
 
.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);
}
}
   
 
table.wikitable th, table.wikitable td.hl3, table.wikitable th.hl3,
/* ---------------------------------  */
table.prettytable th, table.prettytable td.hl3, table.wikitable th.hl3 {
/*    Safe to edit ABOVE this line    */
background: @blue;
/* ---------------------------------  */
color: @text;
 
text-align: center;
/* --------------------------------- */
/*    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;
}
}
   
 
table.wikitable td.hl1, table.wikitable th.hl1,
.druid-container::after {
table.prettytable td.hl1, table.wikitable th.hl1 {
    content: "";
background: #c5d8fc;
    position: absolute;
text-align: center;
    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;
}
}
 
table.wikitable td.hl2, table.wikitable th.hl2,
@media screen and (max-width: 720px) {
table.prettytable td.hl2, table.wikitable th.hl2 {
  .druid-container {
background: #a7c1f2;
    float: none;
text-align: center;
    margin: 0.5rem auto;
  }
}
}
   
 
table.wikitable caption,
.druid-main-images-file,
table.prettytable caption {
.druid-main-image {
margin-left: inherit;
    text-align:center;
margin-right: inherit;
    background: url(/images/0/07/Imagebox.webp) no-repeat center;
font-weight: bold;
}
 
.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,
/* make the list of references look smaller */
.ranger-navbox .ranger-subgroup{
ol.references {
  text-align: var(--navbox-group-text-align);
font-size: 100%;
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
}
}
.ranger-navbox.group-align-left .ranger-group,
.references-small { font-size: 90%;}
.ranger-navbox.group-align-left .ranger-subgroup,
.ranger-navbox .align-left{
/* prevent ugly horizontal page expansion */
  text-align: left;
pre { overflow: auto; }
/*** More whitespace on search page ***/
.page-Special_Search #search {
padding: 1em 0 2em 0;
}
}
.ranger-navbox.group-align-center .ranger-group,
.page-Special_Search #powersearch {
.ranger-navbox.group-align-center .ranger-subgroup,
border: 1px solid #CCCCCC;
.ranger-navbox .align-center{
padding: 0.5em 0.5em;
  text-align: center;
}
}
.ranger-navbox.group-align-right .ranger-group,
.page-Special_Search #powersearch-namespaces {
.ranger-navbox.group-align-right .ranger-subgroup,
padding-left: 1em;
.ranger-navbox .align-right{
margin: 0.7em 0;
  text-align: right;
}
}
 
.page-Special_Search #powersearch-namespaces label {
.ranger-navbox .ranger-listbox > .ranger-wrap{
white-space: nowrap;
  background: var(--navbox-list-background);
min-width: 8.4em;
  color: var(--navbox-list-color);
display: block;
  flex-grow: 1;
float: left;
}
}
.ranger-navbox .ranger-sublist{
/* Clear search button, but not check-boxes: */
  flex-grow: var(--count);
.page-Special_Search br {
clear: left;
}
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
/**
  grid-column-end: span 2;
* Cute little "tip" boxes
*/
div.tip {
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
min-height: 30px; /* IE users will hate this... */
}
}
div.tip-info {
.ranger-navbox .ranger-group,
border: 1px solid #CC9933;
.ranger-navbox .ranger-subgroup,
background-color: #CCCC99;
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
}
div.tip-gotcha {
.ranger-navbox.striped-even .ranger-even,
border: 1px solid #CC0000;
.ranger-navbox.striped-odd .ranger-odd{
background-color: #CC6666;
  background: var(--navbox-list-background--striped);
}
}
/* make links use full line height (larger click box)*/
.mw-viewprevnext {
.ranger-navbox .hlist a{
display: block;
display: inline-block;
border: 1px solid #CCCCCC;
background-color: #F9F9F2;
padding: 0.2em 0.4em;
}
}
 
/* Language template */
/* responsive */
   
@media screen and (max-width: 720px) {
.LanguageLinks {
  .ranger-navbox .ranger-section-body,
margin-top: 0.5em;
  .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 ****/
.LanguageLinks table {
/* remove middle dots betweem items */
clear: both;
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
border: 1px solid #aaaaaa;
.ranger-navbox.pill .hlist li:not(:last-child)::after{
border-collapse: collapse;
  display: none;
padding: 0.2em;
margin: 0;
font-size: 85%;
margin: 0 1px;
}
}
/* remove parentheses around nested lists*/
.LanguageLinks span {
.ranger-navbox.pill .hlist dd ol::before,
white-space: nowrap;
.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 */
/* Page headings used throughout the wiki (though not very much at the time of writing...) */
.ranger-navbox.pill .hlist ul,
.page-notice, .page-warning {
.ranger-navbox.pill .hlist ol,
border-width: 1px;
.ranger-navbox.pill .hlist dl{
border-style: solid;
  display: inline-flex;
  gap: var(--navbox-pill-gap);
padding: 0.3em 0.5em;
  flex-wrap: wrap;
margin-bottom: 1em;
width: 80%;
margin-left: auto;
margin-right: auto;  
text-align: center;
}
}
/* "pill" style for items */
/* Used to add informative notices to the top of pages - BLUE */
.ranger-navbox.pill .hlist li,
.page-notice {
.ranger-navbox.pill .hlist dt,
background-color: #f9f9f9;
.ranger-navbox.pill .hlist dd{
border-color: #025e9d;  
  padding: var(--navbox-pill-padding);
text-align: left;
  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 */
/* Used to add warning information to the top of pages - RED */
.ranger-navbox.pill .hlist dd:hover,
.page-warning {
.ranger-navbox.pill .hlist dd:focus,
background-color: #ffffff;
.ranger-navbox.pill .hlist dt:hover,
border-color: #c51919;
.ranger-navbox.pill .hlist dt:focus,
border-width: 2px;
.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 ****/
.pw-head {
@media screen and (max-width: 720px) {
color: #c51919;
/* remove middle dots betweem items */
font-weight: bold;
.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);
}
}
}
/*********************
/* Coloured watchlist / Special:Recentchanges numbers */
* End Template:Navbox*
.mw-plusminus-pos {
**********************/
color: #006400; /* darkgreen */
 
.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%;
}
}
 
/* .mw-plusminus-null currently at developer default */
.wikitable tr:nth-child(odd) {
    background: rgba(0, 119, 192, .1);
.mw-plusminus-neg {
color: #8B0000; /* darkred */
}
}
 
/* extra buttons for edit dialog */
.citizen-overflow-wrapper {
/* from commons:MediaWiki:Common.css */
    max-width:100%
.my-buttons {
padding: 0.5em;
}
.my-buttons a {
color: black;
background-color: #ccddee !important;
font-weight: bold;
font-size: 0.9em;
text-decoration: none;
border: thin #006699 outset;
padding: 0 0.1em 0.1em 0.1em;
}
.my-buttons a:hover, .my-buttons a:active {
background-color: #bbccdd;
border-style: inset;
}
/* from [[User:Splarka/Help:Linked images]] */
.imagelink_wikilogo a {
width:135px;
height:135px;
display:block;
text-decoration:none;
background-image: url("http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png")
}
}


.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/prettytable class for skinning normal tables */
.wikitable-nova {
table.ggs_table, table.overall_table, table.group_table, table.project_table, table.user_table, table.main_table
    border-image-source: url(/images/2/2c/Infobox_border.png);
{
    border-image-slice: 15;
/* margin: 1em 1em 1em 0; */
    border-image-width: 13px;
border: 1px #ffffff solid;
    border-image-repeat: round;
border-collapse: collapse;
    border-width: unset;
empty-cells:show;
    border-style: solid;
    border-radius: 0 0 30px 30px;
    border-collapse:separate;
    margin:1rem 0 1rem 0;
    flex:1 1 50%;
    max-width:48%;  
    box-sizing:border-box;
}
}




table.main_table
#mw-indicator-Japan {
{
filter:none
border: 1px #D8B1B1 solid;
}
 
#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
}


table.ggs_table, table.overall_table, table.group_table, table.project_table, table.user_table
.home-card {
{
border-radius:8px;
width:20%;
font-size:.875rem;
height:5.82rem;
position:relative
}
}


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


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


table.ggs_table th
.home-card__foreground {
{
position:absolute
background: rgb(232, 37, 25);
}
}


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


table.overall_table th
.home-card--button img {
{
transition:transform .2s ease
background: #FF0000;
}
}


table.game_table th
.home-card--button:hover img {
{
transform:scale(1.1)
background: #FF0000;
}
}


table.group_table th
.home-link {
{
display:grid;
background: #008800;
font-size:.875rem;
font-weight:500;
grid-gap:.375rem;
margin-top:.375rem;
text-align:center
}
}


table.project_table th
span.hidden,span.citizen-section-indicator.citizen-ui-icon.mw-ui-icon-wikimedia-collapse,div.citizen-typeahead__labelItem {
{
display:none
background: #0000FF;
}
}


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


table.project_table th
table.timeline tr {
{
display: flex;
background: #0000FF;
flex-direction: column;
padding-left: 20px
}
}


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


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


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


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


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


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


table.ggs_table td
.ranger-navbox .ranger-title-G2 {
{
  background: no-repeat url("images/8/87/Navbar_Genso_Suikogaiden_Vol.2.webp");
background-color:#000000;
  background-color: #cdccd9;
text-color:#AFE378;
font-family : Courier;
/*color: #0066CC;*/
}
}


table.main_table td
.ranger-navbox .ranger-title-CS {
{
  background: no-repeat url("images/c/ca/Navbar_Genso_Suikoden_Card_Stories.webp");
background-color:#00C45B;
  background-color: #cfbd90;
text-color:#C43A2C;
font-family : Courier;
}
}


table.overall_table td
.ranger-navbox .ranger-title-S12 {
{
  background: no-repeat url("images/d/d4/Navbar_Suikoden_I&II.png");
/*background-color:#000000;*/
  background-color: #0f1859;
text-color:#306EFF;
/*font-family : Courier;*/
}
}


table.group_table td
.ranger-navbox .ranger-title-S3 {
{
  background: no-repeat url("images/b/b8/Navbar_Suikoden_III.webp");
background-color:#000000;
  background-color: #bc1c23;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


table.project_table td
.ranger-navbox .ranger-title-S4 {
{
  background: no-repeat url("images/2/27/Navbar_Suikoden_IV.webp");
background-color:#000000;
  background-color: #006994;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


table.user_table td
.ranger-navbox .ranger-title-ST {
{
  background: no-repeat url("images/0/0e/Navbar_Suikoden_Tactics.webp");
background-color:#000000;
  background-color: #93ac8b;
text-color:#306EFF;
font-family : Courier;
color: #0066CC;
}
}


.center1
.ranger-navbox .ranger-title-S5 {
{  
  background: no-repeat url("images/a/af/Navbar_Suikoden_V.webp");
margin-left: auto;
  background-color: #ceb25e;
margin-right: auto;
}
}
 
.center2
.ranger-navbox .ranger-title-HS {
{
  background: no-repeat url("images/3/3b/Navbar_Genso_Suikoden_Tierkreis_Hoshikuzu_no_Shiro.webp");
text-align: center;
  background-color: #7b726b;
}
}


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


.center table
.ranger-navbox .ranger-title-PS {
{  
  background: no-repeat url("images/0/03/Navbar_Pachislot_Genso_Suikoden.webp");
margin-left: auto;
  background-color: #3d6b98;
margin-right: auto;
text-align: left;
}
}


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


div.centered table
.ranger-navbox .ranger-title-SL {
{
  background: no-repeat url("images/c/ce/Navbar_SL.png");
margin: 0 auto;  
  background-color: #046a9d;
text-align: center;
}
}


<!-- HELP CAME FROM:
.ranger-navbox .ranger-title-GS {
http://www.daniweb.com/forums/thread8193.html,
  background: no-repeat url("images/2/2d/Navbar_Genso_Suikoden.webp");
http://theodorakis.net/tablecentertest.html
  background-color: #00307c;
http://www.computerhope.com/htmcolor.htm
}
-->


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


table.outside, td.outside, th.outside, div.outside
#mp-welcome {
{
position:relative;
background:#000000;
display:flex;
text-align:center;
flex-flow:column nowrap;
align:center;
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;
}
}


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


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


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


td.general
#mp-banner img {
{
max-width:100%;
background:#000000;
height:auto;
color:#000000;
text-align:center;
}
}


table.article, div.article, td.article, span.article
@media (max-width: 768px) {
{
.wikitable-nova {
border: medium double #660000
  flex: 1 1 100%;
  max-width: 100%;
    }
}
}


table.file, div.file, td.file, span.file
.druid-data ul {
{
    margin: 0 0 0 1.6em;
border: medium double #006600
    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;}


table.category, div.category, td.category, span.category
@media (min-width: 1200px) {
{
#mp-container {
border: medium double #000066
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;
}


table.template, div.template, td.template, span.template
.mp-body {
{
height: 100%;
border: medium double #008080
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}
}


table.special, div.special, td.special
.mp-box.centered-content .mp-body {
{
height: 100%;
border: medium double #666666;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
}


table.newsletter
.mp-heading {
{
text-align:center;
border: medium double #666666;
font-size: 200%;
align: right;
font-family:Marcellus SC;
color:var(--wiki-heading-color);
padding: 0 0 5px 0;
width:auto;
}
}


div.newsletter td
.mp-body-columns ul {
{
  columns: 3;
border: medium single #666666;
  -webkit-columns: 3;
  -moz-columns: 3;
  list-style: none;
  padding: 0;
}
}


/* For positioning icons at top-right, used in Templates
/***********************
  "Spoken Article" and "Featured Article" */
* End main page layout *
div.topicon {
************************/
    position: absolute;
 
    top: -2em;
.games-grid {
    margin-right: -100px;
display:grid;
    display: block !important;
grid:auto-flow dense/repeat(auto-fit,minmax(22.375rem,1fr));
grid-auto-rows:minmax(3rem,auto);
grid-gap:.625rem
}
}
 
/* FR topicon position */
.games-card {
div.flaggedrevs_short {
border-radius:8px;
    position: absolute;
font-size:.775rem;
    top: -3em;
height:9.82rem;
    right: 0px;
position:relative
    z-index: 1;
    margin-left: 0;
    /* Because this is not yet a topicon, we emulate it's behavior,
      this ensure compatibility with edit lead section gadget. */
    margin-right: -10px;
}
}


/* Content in columns with CSS instead of tables [[Template:Columns]] */
#home-nav .games-card__background:after {
div.columns-2 div.column {
background:linear-gradient(to top,#000,transparent);
    float: left;
bottom:0;
    width: 50%;
content:"";
    min-width: 300px;
display:block;
    margin: 3px 0 3px 0;
left:0;
pointer-events:none;
position:absolute;
right:0;
top:0w
}
}


div.columns-3 div.column {
#home-nav .games-card__foreground {
    float: left;
align-items:flex-end;
    width: 33.3%;
color:#fff;
    min-width: 200px;
display:flex;
    margin: 3px 0 3px 0;
font-size:150%;
font-weight:500;
height:100%;
padding:0 .938rem;
pointer-events:none;
}
}


div.columns-4 div.column {
.games-card__foreground {
    float: left;
position:absolute
    width: 25%;
    min-width: 150px;
    margin: 3px 0 3px 0;
}
}


div.columns-5 div.column {
.games-card.games-card--button {
    float: left;
overflow:hidden;
    width: 20%;
padding:0
    min-width: 120px;
    margin: 3px 0 3px 0;
}
}


span.hidden { display:none;}
.games-card--button img {
transition:transform .2s ease
}


.skin-citizen-dark .mw-indicator, #mw-indicator-Japan {
.games-card--button:hover img {
    filter: none;
transform:scale(1.1)
}
}


table.wikitable tr th, table.wikitable tr td {
/* Enemy flex table */
    padding: 10px 20px 10px 5px;
 
    border: 0;
.table5>div,
    border-bottom: 1px solid var(--border-color-base);
        .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;
}
}


.infoboxcontainer {
.grid-box h3 {
float:right;
  margin-bottom: 10px;
width:20em;
max-width:20em;
border:2px solid #10a4b7;
margin:0.25em 0 0.25em 0.5em
}
}


.infoboxouter {
/* Grid container for all pairs */
width: 100%;
.grid {
align: center;
  display: grid;
display: table;  
  grid-template-columns: repeat(14, 1fr); /* default: 14 pairs per row */
background: rgb(2,0,36);  
  gap: 4px;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,73,121,1) 25%, rgba(16,164,183,1) 100%);
}
}


.infoboxinner {
.grid-10 {
color: #fff;
  grid-template-columns: repeat(10, 1fr); /* default: 14 pairs per row */
font-size: 95%;
border: #fff 1px solid;
text-align:left;
object-fit: fill;  
padding-left:5px
}
}


.infoboxlabel {
.grid-9 {
color: #fff;
  grid-template-columns: repeat(9, 1fr); /* default: 14 pairs per row */
font-size: 95%;
border: #fff 1px solid;
object-fit: fill;
padding-left:5px
text-align:right;
padding-right:3px;
width:30%;
background: rgb(2,0,36);  
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,73,121,1) 25%, rgba(16,164,183,1) 100%);
}
}


.infoboxfield {
.grid-6 {
padding-left:3px;
  grid-template-columns: repeat(6, 1fr); /* default: 14 pairs per row */
font-size: 95%;
background: var( --background-color-dp-00 );
color: var( --color-base);
}
}


.infoboxbubble {
.grid-4 {
object-fit: fill;
  grid-template-columns: repeat(4, 1fr); /* default: 14 pairs per row */
color: var( --color-base);
border: 1px solid #10a4b7;
background: var( --background-color-dp-00 );
}
}


/* Gensopedia 2023 */
.grid-2 {
/* To make images responsive */
  grid-template-columns: repeat(2, 1fr); /* default: 14 pairs per row */
img {
max-width: 100%;
height: auto;
}
}


/* Ensures table contents stretch to fit container */
.grid-1-2 {
tbody{
  grid-template-columns: 1fr 2fr; /* first column 1 part, second 2 parts */
    width: 100%;
    display: table;
}
}


.newcontainer {
.grid-2-1 {
width: 96%;
  grid-template-columns: 2fr 1fr; /* first column 1 part, second 2 parts */
border:2px solid #10a4b7;
margin: auto; /* Centers the infobox */
}
}


.newheader {
 
color: #fff;
/* Each header/value column */
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,73,121,1) 25%, rgba(16,164,183,1) 100%);
.pair {
  display: flex;
  flex-direction: column;
  border: 1px solid #0077c0;
}
}


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


.newboxcontent {
/* Header and value styling */
background: var(--color-surface-0);
.header {
border: #10a4b7 1px solid;
  background:#7fbbdf;
color: var(--color-base);
  color:#000;
font-size: 95%;
  font-weight: bold;
  padding: 6px;
  border: 1px solid #0077c0;
}
}


.newlabel {
.value {
color: #fff;
  padding: 6px;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,73,121,1) 25%, rgba(16,164,183,1) 100%);
border: #fff 1px solid;
font-size: 95%;
}
}


.newboximage {
/* --- Responsive breakpoints --- */
font-size: 90%;
 
background: var( --background-color-dp-00 ); color: var( --color-base);
/* 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);
}
}
}


.charboxouter{
/* At 520px and below → 4 columns (4 groups of 4) */
        float:right;
@media (max-width: 520px) {
        width:22em;
  .grid {
        border:2px solid #10a4b7;
    grid-template-columns: repeat(4, 1fr);
        margin:0.25em 0 0.25em 0.5em
  }
  .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);
}
}


h1:after {
  .attacktable-responsive{font-size:90%!important;}
  background: none repeat scroll 0 0 #10a4b7;
  bottom: -0px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 100%;
}
}


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

Latest revision as of 02:12, 11 December 2025

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


#mw-indicator-Japan {
filter:none
}

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

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

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

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

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

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

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

.home-card__foreground {
position:absolute
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.games-card__foreground {
position:absolute
}

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

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

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

/* Enemy flex table */

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

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

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

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

            /* you can remove the height */
        }

        .table6 {
            display: flex;
        }

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

            /* you can remove the height */
        }

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

        .table1 .row2 {
            width: 20%;
        }

        .table1 .row3 {
            width: 50%;
        }

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

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

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

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

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

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

        @media(max-width: 768px) {

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.value {
  padding: 6px;
}

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

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

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

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

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