MediaWiki:Common.css

/* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/*This CSS is for the portal icons on the main page */

.fp-portal-row { display: flex; flex-flow: row nowrap; margin: 0; align-items: self-start; justify-content: space-around; text-align: center; font-weight: bold; max-width: 100%; }

.fp-portal-row div { flex: 0 1 auto; margin: 4px; }

@media only screen and (max-width: 1000px) { .fp-portal-row { flex-flow: row wrap; }   .fp-portal-row > div { max-width: 100px; } }

.fp-portal-icon a img { width: 100%; min-width: 50px; max-width: 150px; height: auto; }

/* this CSS governs the responsive 2 column main page layout */

min-height: 500px; }
 * 1) fptweets {

display: grid; grid-template-areas: "a" "b" "c"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-2column.fp-container { grid-template-areas: "a b" "c c"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-2column.fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: auto 520px; } }
 * 1) fp-2column.fp-container {

grid-area: a; }
 * 1) fp-top {

grid-area: b; }
 * 1) fp-flex {

grid-area: c; }
 * 1) fp-bottom {

.fpmaybecols { overflow: hidden; margin: 0 0 0 0; }

.fpmaybecols + .fpmaybecols { margin: 0 0 0 0; }

.fpbox { background: rgba(255,255,255); color: #000; /* change for hydra (light) wikis */ margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: 1px solid #000000; border-radius: 4px; }

.fpbox2 { background: rgba(255,255,255); color: #000; /* change for hydra (light) wikis */ margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: 2px solid #DFC668; }

.fpboxcell { border: 2px solid #CDB88A; }

.fpplainbox { padding: 5px 8px 10px 8px; margin: 0 5px 10px 5px; vertical-align: top; }

.fpbox .welcome { border-bottom: 1px solid #1B1823; color: #000; /* change for hydra (light) wikis */ font-size: 150%; margin: 0 0 10px 0; padding: 0 0 5px 0; text-transform: uppercase; }

.fpbox .heading { text-align: center; border-bottom: 1px solid #505050; color: #000; /* change for hydra (light) wikis */ font-size: 132%; font-variant: small-caps; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading .smalllink { color: #000; /* change for hydra (light) wikis */ font-size: 75%; font-weight: bold; }

.fpbox hr { border: none; border-bottom: 2px solid #1B1823; }

div#content hr { background-color: #1B1823; color: #1B1823; }

.fplinks { margin: -5px; }

.fplinks .linkslabel { background: rgba(255,255,255,.75); border-bottom: 2px solid #1B1823; font-weight: bold; margin: 15px 5px 5px 5px; padding: 0 0 5px 0; }

.fplink { display: inline-block; vertical-align: middle; width: 100%; }

/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */ .fplink .box { border-collapse: separate; border-spacing: 5px; display: table; width: 100%; }

.fplink .box .row { display: table-row; }

.fplink .box .row .cell { background: rgba(255,255,255,.75); color: #000; /* change for hydra (light) wikis */ display: table-cell; font-weight: bold; position: relative; vertical-align: middle; }

.fplink.wide .box .row .cell { padding: 0 5px; }

.fp-section .fplink.image { height: 114px; width: 114px; }

.fplink.image .box .row .cell { height: 100px; width: 100px; vertical-align: bottom; }

.fplink.image .box .row .cell .image img { height: 100px; width: 100px; }

@media (min-width: 470px) { .fplink { width: 50%; }

.fplink.wide { width: 100%; } }

@media (min-width: 580px) { .fplink { width: 33.333%; }

.fplink.wide { width: 66.666%; } }

@media (min-width: 690px) { .fplink { width: 25%; }

.fplink.wide { width: 50%; } }

@media (min-width: 800px) { .fplink { width: 20%; }

.fplink.wide { width: 40%; } }

@media (min-width: 910px) { .fplink { width: 16.666%; }

.fplink.wide { width: 33.333%; } }

@media (min-width: 990px) { #fp-top .fplink, #fp-bottom .fplink { width: 50%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 100%; }

#fp-flex .fplink { width: 25%; }

#fp-flex .fplink.wide { width: 50%; } }

@media (min-width: 1100px) { #fp-top .fplink, #fp-bottom .fplink { width: 33.333%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 66.666%; } }

@media (min-width: 1210px) { #fp-top .fplink, #fp-bottom .fplink { width: 25%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 50%; } }

@media (min-width: 1320px) { #fp-top .fplink, #fp-bottom .fplink { width: 20%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 40%; } }

@media (min-width: 1430px) { #fp-top .fplink, #fp-bottom .fplink { width: 16.666%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 33.333%; }

.fplink a { padding: 3px 5px; } }

@media (min-width: 1540px) { #fp-top .fplink, #fp-bottom .fplink { width: 14.285%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 28.571%; }

#fp-top .fpmaybercol .fpbox, #fp-bottom .fpmaybercol .fpbox { background-image: none; }

.fpmaybelcol { float: left; width: 50%; }

#fp-top .fpmaybelcol .fplink, #fp-bottom .fpmaybelcol .fplink { width: 20%; }

#fp-top .fpmaybelcol .fplink.wide, #fp-bottom .fpmaybelcol .fplink.wide { width: 40%; }

.fpmaybercol { float: right; width: 50%; }

#fp-top .fpmaybercol .fplink, #fp-bottom .fpmaybercol .fplink { width: 50%; }

#fp-top .fpmaybercol .fplink.wide, #fp-bottom .fpmaybercol .fplink.wide { width: 100%; } }

@media (min-width: 1650px) { #fp-top .fplink, #fp-bottom .fplink { width: 12.5%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 25%; } }

@media (min-width: 1697px) { #fp-top .fpmaybelcol .fplink, #fp-bottom .fpmaybelcol .fplink { width: 16.666%; }

#fp-top .fpmaybelcol .fplink.wide, #fp-bottom .fpmaybelcol .fplink.wide { width: 33.333%; } }

@media (min-width: 1760px) { #fp-top .fplink, #fp-bottom .fplink { width: 11.111%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 22.222%; } }

@media (min-width: 1850px) { #fp-top .fpmaybelcol .fplink, #fp-bottom .fpmaybelcol .fplink { width: 14.285%; }

#fp-top .fpmaybelcol .fplink.wide, #fp-bottom .fpmaybelcol .fplink.wide { width: 28.571%; } }

@media (min-width: 1870px) { #fp-top .fplink, #fp-bottom .fplink { width: 10%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 20%; }

#fp-top .fplink.image, #fp-bottom .fplink.image { width: 134px; height: 134px; }

#fp-top .fplink.image .box .row .cell, #fp-bottom .fplink.image .box .row .cell { width: 120px; height: 120px; }

#fp-top .fplink.image .box .row .cell .image img, #fp-bottom .fplink.image .box .row .cell .image img { width: 120px; height: 120px; } }

@media (min-width: 1918px) { #fp-top .fpmaybercol .fplink, #fp-bottom .fpmaybercol .fplink { width: 33.333%; }

#fp-top .fpmaybercol .fplink.wide, #fp-bottom .fpmaybercol .fplink.wide { width: 66.666%; } }

@media (min-width: 1980px) { #fp-top .fplink, #fp-bottom .fplink { width: 9.09%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 18.181%; } }

@media (min-width: 2006px) { #fp-top .fpmaybelcol .fplink, #fp-bottom .fpmaybelcol .fplink { width: 12.5%; }

#fp-top .fpmaybelcol .fplink.wide, #fp-bottom .fpmaybelcol .fplink.wide { width: 25%; } }

@media (min-width: 2090px) { #fp-top .fplink, #fp-bottom .fplink { width: 8.33%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 16.666%; } }

@media (min-width: 2161px) { #fp-top .fpmaybelcol .fplink, #fp-bottom .fpmaybelcol .fplink { width: 11.111%; }

#fp-top .fpmaybelcol .fplink.wide, #fp-bottom .fpmaybelcol .fplink.wide { width: 22.222%; } }

@media (min-width: 2200px) { #fp-top .fplink, #fp-bottom .fplink { width: 7.692%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 15.384%; } }

@media (min-width: 2296px) { #fp-top .fpmaybercol .fplink, #fp-bottom .fpmaybercol .fplink { width: 25%; }

#fp-top .fpmaybercol .fplink.wide, #fp-bottom .fpmaybercol .fplink.wide { width: 50%; } }

@media (min-width: 2310px) { #fp-top .fplink, #fp-bottom .fplink { width: 7.142%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 14.285%; } }

@media (min-width: 2316px) { #fp-top .fpmaybelcol .fplink, #fp-bottom .fpmaybelcol .fplink { width: 10%; }

#fp-top .fpmaybelcol .fplink.wide, #fp-bottom .fpmaybelcol .fplink.wide { width: 20%; } }

@media (min-width: 2420px) { #fp-top .fplink, #fp-bottom .fplink { width: 6.666%; }

#fp-top .fplink.wide, #fp-bottom .fplink.wide { width: 13.333%; }

.fplink a { padding: 5px 5px; }

#fp-top .fplink.image, #fp-bottom .fplink.image { width: 164px; height: 164px; }

#fp-top .fplink.image .box .row .cell, #fp-bottom .fplink.image .box .row .cell { width: 150px; height: 150px; }

#fp-top .fplink.image .box .row .cell .image img, #fp-bottom .fplink.image .box .row .cell .image img { width: 150px; height: 150px; } }

.fplink.image .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 75%; z-index: 1; }

.fplink.image a { z-index: 2; }

.fplink a { display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; padding: 1px 5px; }

.fplink.image .image a { padding: 0; }

.fplink.image .link a { background: rgba(255,255,255,.75); border-top: 2px solid #505050; }

.fplink.wide a { margin: 0 -5px; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; }

.fpvideo { display: inline-block; margin: 0 5px; }

/* Infoboxes */

.infoboxtable { float: right; background:rgba(255,255,255,.75); border: 1px solid #000 ; border-radius:5px; width: 350px; }

.infoboxname { background:#1B1823; color: #fff; font-size: 115%; border: 1px solid #1B1823 ; border-radius:5px; }

.infoboxlabel { width: 50%; background:#1B1823; color: #000 ; border: 1px solid #1B1823; border-radius:5px; padding: 0.5px 7px; text-align: right;

}

.infoboxdetails { padding-right: 5px; }

/* Newer Navbox template style */ table.navbox { border: 1px solid #676767; clear: both; font-size: 88%; margin: auto; padding: 1px; text-align: center; width: 100%; }

/* Border between adjacent navboxes */ table.navbox + table.navbox { margin-top: -1px; }

.navbox-title, .navbox-abovebelow, table.navbox th { padding-left: 1em; padding-right: 1em; text-align: center; }

.navbox-group { font-weight: bold; padding-left: 1em; padding-right: 1em; white-space: nowrap; }

/* Base background */ .navbox, .navbox-subgroup { background: black; }

.navbox-list { border-color: black;  /* Must match background color */ }

/* Level 1 color */ .navbox-title, table.navbox th { background: #000; border: 1px solid #6C98BC; color: #fff; }

/* Level 2 styling */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #000; border: 1px solid #6C98BC; color: #fff; }

/* Level 3 styling */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #000; border: 1px solid #6C98BC; color: #fff; }

/* Even row striping */ .navbox-even { background: #202020; color: #fff; }

/* Odd row striping */ .navbox-odd { background: transparent; } .collapseButton { font-weight: normal; width: auto; }

.navbox .collapseButton { width: 6em; } .navbar { font-size: 88%; font-weight: normal; }

.navbox .navbar { font-size: 100%; } table.collapsed tr.collapsible { display: none; } /* End of new Navbox styling */

/* =============================================================================================================================================================================== */ /* Grand Summoners Wiki Custom CSS */ /* =============================================================================================================================================================================== */

.imgFit img { display: block; margin-left: auto; margin-right: auto; }

.center50 { width: 50%; margin: auto; }

.center60 { width: 60%; margin: auto; }

.clear { clear: both; }

.fleft { float: left; }

.textcenter { text-align: center; }

.w100 { width: 100%; }

float: left; margin-left: 7%; text-align: center; width: 35%; }
 * 1) statsCSS {

float: left; margin-left: 7%; text-align: center; width: 45%; }
 * 1) unitInfoCSS {

.adv-portrait { text-align: center; display: flex; flex-direction: column; justify-content: center; }

/* Panel */

.panel { border: 1px solid #5a5a5a; margin: 2px; max-width:850px; margin:auto; }

.panel-heading { position: relative; text-align: center; font-weight: bold; color: #1f4c1f; margin: 5px; font-size: 1.6em; font-variant: small-caps; }

.panel-body { position: relative; padding: 5px 15px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; overflow: hidden; }

/* TermDescription */

.dt-term { display: inline-block; width: 120px; text-align: right; padding: 3px 8px 3px 0; margin: 0 -6px 0 0; border-right: 3px #528e52 solid; font-weight: bold; vertical-align: top; }

.dd-description { display: inline-block; width: 150px; text-align: left; padding: 3px 0 3px 6px; border-left: 1px #528e52 solid; vertical-align: top; }

.ability-section { display: flex; flex-direction: row; flex-wrap: wrap; }

/* Tabber */

.tabberlive, .tabberlive .tabbertab, ul.tabbernav li.tabberactive { border: none !important; text-align:center; }

ul.tabbernav li a:hover { background-color: #e4e4e4 !important; }

ul.tabbernav { border-bottom: none !important; }

ul.tabbernav li a { border: 1px solid #e0e0e0 !important; }

/* Custom sprite player */ .spriteplayer { width: 128px; height: 42px; display: block; margin: auto; text-align: center; background-image: url("https://vignette.wikia.nocookie.net/gurasama/images/1/14/Stars_rank_animation_sprite.png/revision/latest?cb=20181127160030&format=original"); animation: sprite 3.06s steps(41) infinite; } @keyframes sprite { 49%, 100% {      background-position: -5248px; } }

/* Front Page Event CSS */

@media screen and (min-width: 550px) { .EventsMP img { width: 80%; height: auto; } }

@media screen and (max-width: 549px) { .EventsMP img { width: 80%; height: auto; } }

.event-display { text-align:center; padding-top:1em; }

.evoButton { width: 80px; height: 40px; margin: 10px 5px 5px 5px; background-color: #dedede; display: flex; cursor: pointer; transition: 0.2s; text-align: center; font-family: Helvetica, sans-serif; font-weight: bold; font-size: 1.2em; font-variant: small-caps; color: #212121; align-items:center; justify-content:center; border-radius: 4px; }

.evoButton:hover { background-color: #bababa; }

.evoButtonRow { display: flex; justify-content: center; width: 100%; }

.sectionHeader { margin:15px auto; border-bottom:1px solid; margin-bottom:15px; font-size:1.2em; font-variant: small-caps; font-weight:bold; font-family:Helvetica, sans-serif; }