MediaWiki:Common.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');

.firstHeading { font-family:'Raleway', sans-serif }


 * root {

--color-surface-0:#edf8fb; }


 * root.skin-citizen-dark {

--color-surface-0:#0b1a20; }

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

table.wikitable tr th,table.wikitable tr td { padding:.625rem 1.25rem .625rem .313rem }

.wikitable sortable { display:block; font-size:185%; width:100% }

table.wikitable,table.prettytable { width: 100%; border-collapse:collapse; background: #FFF; color:#777; empty-cells:show; margin:1rem 0 1rem 0; border-bottom: 5px solid #0077c0 }

table.wikitable th,table.wikitable td.hl3,table.wikitable th.hl3,table.prettytable th,table.prettytable td.hl3,table.wikitable th.hl3 { background:@blue; color:@text; text-align:center }

table.wikitable caption,table.prettytable caption { font-weight:700; margin-left:inherit; margin-right:inherit }

table.wikitable tbody,table.prettytable tbody { display:table-row-group }

.cg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(21.875rem, 1fr)); }

filter:none }
 * 1) mw-indicator-Japan {

.infoboxbubble { background:var(--background-color-dp-00); border:1px solid #0077c0; color:var(--color-base); font-size:85%; object-fit:fill }

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

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

span.navbar a { font-size:1.56rem; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

span.navbar a,span.navbar-sub a { color:#fff }

.navbarS1,.navbarS2,.navbarS3,.navbarS4,.navbarS5,.navbarTK,.navbarST,.navbarG1,.navbarG2,.navbarHS,.navbarHT,.navbarCS,.navbarPS,.navbarGS,.navbarRN { background-repeat:no-repeat }

.navbarS1 { background-color:#b92a0a; background-image:url(images/5/58/Navbar_Suikoden.webp) }

.navbarS2 { background-color:#427da7; background-image:url(images/0/06/Navbar_Suikoden_II.webp) }

.navbarS3 { background-color:#92daa7; background-image:url(images/b/b8/Navbar_Suikoden_III.webp) }

.navbarS4 { background-color:#006994; background-image:url(images/2/27/Navbar_Suikoden_IV.webp) }

.navbarS5 { background-color:#ceb25e; background-image:url(images/a/af/Navbar_Suikoden_V.webp) }

.navbarTK { background-color:#6d5849; background-image:url(images/4/47/Navbar_Suikoden_Tierkreis.webp) }

.navbarST { background-color:#93ac8b; background-image:url(images/0/0e/Navbar_Suikoden_Tactics.webp) }

.navbarG1 { background-color:#cdccd9; background-image:url(images/a/a4/Navbar_Genso_Suikogaiden_Vol.1.webp) }

.navbarG2 { background-color:#cdccd9; background-image:url(images/8/87/Navbar_Genso_Suikogaiden_Vol.2.webp) }

.navbarHS { background-color:#7b726b; background-image:url(images/3/3b/Navbar_Genso_Suikoden_Tierkreis_Hoshikuzu_no_Shiro.webp) }

.navbarHT { background-color:#008865; background-image:url(images/4/43/Navbar_Genso_Suikoden_Tsumugareshi_Hyakunen_no_Toki.webp) }

.navbarCS { background-color:#cfbd90; background-image:url(images/c/ca/Navbar_Genso_Suikoden_Card_Stories.webp) }

.navbarPS { background-color:#3d6b98; background-image:url(images/0/03/Navbar_Pachislot_Genso_Suikoden.webp) }

.navbarGS { background-color:#10a4b7; background-image:url(images/2/2d/Navbar_Genso_Suikoden.webp) }

.navbarRN { background-color:#294b80; background-image:url(images/0/01/Navbar_Runes.webp) }

margin-top:1rem }
 * 1) home-nav {

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

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

.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%; 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; border-left: 1px solid; border-color: var( --border-color-base--darker ); 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 }

li::marker,td::marker { color:#0077c0 }

.frontbanner { background:url(images/8/84/Bannerbg.webp) no-repeat; background-size: contain; border-radius: 4px 4px 0 0 }

.containbox { border-radius: 4px; border:1px solid #0077c0; margin:.2rem 0 0 0; padding-bottom:.825rem; background:url(images/3/39/ContainboxBL.webp) bottom left no-repeat, url(images/0/00/ContainboxBR.webp) bottom right no-repeat, url(images/4/45/ContainboxBC.webp) bottom center no-repeat }

.infobox { display:table; float:right; clear:right; width:16.875rem; margin:.2rem .5rem 0 .5rem; font-size:90% }

.statbox { width:72%; margin:0.313rem auto; padding-bottom:.825rem }

.namebox { border-radius: 4px 4px 0 0; border: #fff 1px solid; padding-left: 5px; padding-bottom: 10px; background:url(images/7/7d/NameboxTL.webp) top left no-repeat, url(images/9/9c/NameboxTR.webp) top right no-repeat, url(images/e/e0/NameboxTC.webp) top center no-repeat, url(images/d/d8/NameboxBL.webp) bottom left no-repeat, url(images/9/9e/NameboxBR.webp) bottom right no-repeat, url(images/9/95/NameboxBC.webp) bottom center no-repeat; background-color:#0077c0; color:#fff; font-size: 120% }

.starbox { background:url(images/4/44/StarboxL.webp) left no-repeat, url(images/c/cb/StarboxR.webp) right no-repeat; font-size: 90% }

.headerbox { background:url(images/3/3d/HeaderboxBL.webp) bottom left no-repeat, url(images/1/15/HeaderboxBR.webp) bottom right no-repeat }

.tablebox { background:url(images/3/38/LabelboxL.webp) left no-repeat, url(images/2/2e/LabelboxR.webp) right no-repeat }

.starbox,.headerbox,.tablebox { background-color:#0077c0; border:#fff 1px solid; color:#fff }

.imagebox { width:100%; background:url(images/0/07/Imagebox.webp) center no-repeat; background-color:var(--background-color-dp-00); background-size:contain; margin-left:auto; margin-right:auto; font-size:75% }

.labelbox { width:35%; color:#0077c0; vertical-align:text-top; text-align:left }

.linebox { box-shadow: inset 0 -1px 0 0 #a2a9b1 }

.thumb.tright { clear: none }

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