Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
@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));
}
#mw-indicator-Japan {
filter:none
}
.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)
}
#home-nav {
margin-top:1rem
}
#home-nav .home-card__background:after {
background:linear-gradient(to right,#000,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%;
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
}