MediaWiki:Common.css

MediaWiki interface page
Revision as of 15:29, 27 June 2022 by PrivateTarkus (talk | contribs) (Undo revision 289214 by PrivateTarkus (talk))

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.
/* CSS placed in this file will be applied to all skins */
#bodyContent h5 { font-size: 12px; }

/* workaround for a glitch in tabber where the hidden tabs are sometimes visible on the egde of the active tab
   remove these two lines when the tabberneue dev fixes the issue on their end
 */
.tabber__panel { display: none; }
.tabber__panel--active { display: block !important; }

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 999;
}

.tabber__header, .tabber__section, .tabber__tabs {
  scroll-behavior: auto;
}

.ForceInheritColor {color: inherit !important;}

/* Theory Box CSS Grid */
.TheoryBoxTitle { grid-area: TheoryBoxTitle; }
.TheoryBoxDifficulty { grid-area: TheoryBoxDifficulty; }
.TheoryBoxContent { grid-area: TheoryBoxContent; }
.TheoryBoxVidArea { grid-area: TheoryBoxVidArea; }

@media screen and (min-width: 900px) {
.TheoryBoxContainer {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  grid-template-areas:
    "TheoryBoxTitle TheoryBoxDifficulty"
    "TheoryBoxContent TheoryBoxVidArea";

  padding: 10px 10px 5px 15px;
  max-width: 1500px;
}
}
@media screen and (max-width: 899px) {
.TheoryBoxContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  grid-template-areas:
    "TheoryBoxTitle TheoryBoxDifficulty"
    "TheoryBoxVidArea TheoryBoxVidArea"
    "TheoryBoxContent TheoryBoxContent";

  padding: 10px;
  max-width: 1500px;
}
}

.TheoryBoxVideo {
  overflow: hidden;
  border-radius: 10px;
  line-height: 0px;
  text-align: center;
}


.MockCodeBlock {
  border: 1px solid #eaecf0;
  border-radius: 2px;
  margin: 10px 6px;
  padding: 1px 4px;
  background-color: #f8f9fa;
  font-family: monospace,monospace;
  width: fit-content;
}

.responsive-imagemap img { width: 100%; height: auto; }
.responsive-img img { width: 100%; height: auto; }
.responsiveImg2 img { width: auto; height: 100%; }

/* MoveData frameChart Toggle */
.frameChart-toggle-off,
.frameChart-toggle-on {
  border: 1px solid #000;
  width: 134px;
  height: 24px;
  cursor: pointer;
}

.charaLabel {
  display: inline;
}

.charaLabel > img {
    color: transparent!important;
    font-size: 0!important;
    line-height: 0!important;
    vertical-align: middle!important;
    white-space: nowrap!important;
    --width: 0;
    --height: 16px;
    --small-scale: 0.75;
    --gap: 0;
    --base-gap: 2px;
}

.frameChart-toggle-on {
  opacity: 1.0;
}

.frameChart-toggle-off {
  opacity: 0.5;
  display: none;
}

.frameChart {
  width: 100%;
  border-bottom: 1px solid grey;
  display: none;
}

/* End MoveData frameChart Toggle */


.frame-data-startup,
.frame-data-active,
.frame-data-inactive,
.frame-data-recovery,
.frame-data-specialRecovery {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 1px;
  margin-right: 1px;
  vertical-align: middle;
}

.frame-data-startup {
  background-color: #36B37E;
}

.frame-data-active {
  background-color: #FF5D5D;
}

.frame-data-inactive {
  background-color: gray;
}

.frame-data-recovery {
  background-color: #0069B6;
}
.frame-data-specialRecovery {
        background-color: #db69cf;
}

.spawn-projectile {
  width: 3px;
  height: 14px;
  display: inline-block;
  margin-left: -1px;
  margin-right: 1px;
  vertical-align: middle;
  background-color: red;
}

/* -----------------------------------------------------------------------------
                            Effect Classes
----------------------------------------------------------------------------- */

.round-corners {
  border-radius: 6px;
}
.responsiveImg img {
  max-width: 100%;
  height: auto;
  max-height: 450px;
}
/* -----------------------------------------------------------------------------
                            Cargo Rules
----------------------------------------------------------------------------- */

table.cargoDynamicTable td {
  text-align: center;
}
/* reduce the padding on DynamicTables generated with DataTables */

table.cargoDynamicTable thead th, table.cargoDynamicTable thead td {
  padding: 4px 17px 4px 4px
}
table.cargoDynamicTable tfoot th, table.cargoDynamicTable tfoot td {
  padding: 4px
}
table.cargoDynamicTable tbody th, table.cargoDynamicTable tbody td {
  padding: 4px
}
/* disable the tfoot which dupes thead */

table.cargoDynamicTable tfoot {
  display: none;
}

/* move images to start of line. else they will be at end of line when there are notes */
table.cargoDynamicTable div.tright {
  float: left;
}

/* Make the cargo standard table look more like the mediawiki table */

table.cargoTable {
  width: 100%;
}
.cargoTable table {
  width: 100%;
}
table.cargoTable tbody {
  text-align: center;
}
table.cargoTable tbody td {
  border: 1px solid #a2a9b1;
  text-align: center;
}
table.cargoTable thead th {
  background-color: #eaecf0;
  margin: 1em 0;
  padding: 0 2px;
  border: 1px solid #a2a9b1;
}

table.cargoTable.noMerge tr:nth-child(even) {
  background: #fafafa;
}


.MaterialTable { border-collapse: collapse; table-layout: fixed; }
.MaterialTable th td { font-weight: 500;}
.MaterialTable tr { border-bottom: 1px solid #a2a9b1; }
.MaterialTable tr:last-child { border-bottom: none; }
.MaterialTable tr td:nth-child(1), .MaterialTable tr td:nth-child(2), .MaterialTable tr td:nth-child(3) { 
   text-align: center;
}
.MaterialTable tr td:nth-last-child(1), .MaterialTable tr td:nth-last-child(2) {
  padding-left: 0.5em;
}
.MaterialTable th { border-right: 1px solid rgb(224, 224, 224); }
.MaterialTable th:last-child { border-right: none; }

/* -----------------------------------------------------------------------------
                            Global Rules
----------------------------------------------------------------------------- */
/* Collapsible elements. Toggle-link moved to left.
/* Margin around it adjusted. */
.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}
/* normalize link colors */

a, a:visited, a.external, a.external:visited {
  color: rgb(6, 95, 212);
}
body {
    background-image: url(images/background.png);
    background-repeat: no-repeat;
}
body.page-Guilty_Gear_XX_Accent_Core_Plus_R,body.rootpage-GGACR {
    background-image: url(images/ggacr-background.png);
    background-repeat: no-repeat;
}
body.page-Granblue_Fantasy_Versus,body.rootpage-GBVS {
    background-image: url(images/gbvs-background.png);
    background-repeat: no-repeat;
}
body.page-Dragon_Ball_FighterZ,body.rootpage-DBFZ {
    background-image: url(images/dbfz-background.png);
    background-repeat: no-repeat;
}
body.page-Persona_4_Arena_Ultimax_2_5,body.rootpage-P4U2_5 {
    background-image: url(images/p4u2-background.png);
    background-repeat: no-repeat;
}
body.page-BlazBlue_Central_Fiction,body.rootpage-BBCF {
    background-image: url(images/bbcf-background.png);
    background-repeat: no-repeat;
}
body.page-Guilty_Gear_The_Missing_Link,body.rootpage-GGML {
    background-image: url(images/ggml-background.png);
    background-repeat: no-repeat;
}
body.page-BlazBlue_Cross_Tag_Battle,body.rootpage-BBTag {
    background-image: url(images/bbtag-background.png);
    background-repeat: no-repeat;
}
body.page-Hokuto_no_Ken,body.rootpage-HNK {
    background-image: url(images/hnk-background.png);
    background-repeat: no-repeat;
}
body.page-DNF_Duel,body.rootpage-DNFD {
    background-image: url(images/dnfd-background.png);
    background-repeat: no-repeat;
}
#mw-page-base {
    background-image: none;
    background-color: rgba(0,0,0,0);
}

div#mw-head div.vectorMenu h3 {
   background-image: none;
}

#p-personal {
top: 0;
right: 0;
background-color: #fff;
padding-top: 0.25em;
padding-right: 0.75em;
border-radius: 0px 0px 0px 5px;
}

#p-personal ul {
padding-left: 0;
}

div#simpleSearch {
    margin-top: 0.35em;
}

#ca-unwatch.icon a,
#ca-watch.icon a {
    padding-top: 2.7em;
}

#p-personal {
    text-shadow: 0 0 2px #FEFEFE, 0 0 4px #FFF;
}

#pt-anonuserpage {
    margin-bottom: 0.8em;
}

/* Background Ends Here */

.vector-menu-tabs li {
  background: #f6f6f6;
}
.mw-body-content a.external:visited, a.external, a, a:visited {
  color: rgb(6, 95, 212);
}
.mw-body {
  background-color: #f9f9f9;
  box-shadow: rgba(0,0,0,0.15) 0 0.1em 0.75em;
}
.vector-menu-tabs li {
  background-image: none;
}
a:hover, a:focus {
  text-decoration: none;
}

/* Odd rows for any table with "stripe" class */

table.stripe tr:nth-child(even) {
  background-color: #FFF;
}
/* Even rows for any table with "stripe" class */

table.stripe tr:nth-child(odd) {
  background-color: #fafafa;
}
/* Odd set of 2 rows (for colors table) */

table.colors-table.stripe tr:nth-child(4n), table.colors-table.stripe tr:nth-child(4n-1) {
  background-color: #FFF;
}
/* Even set of 2 rows (for colors table) */

table.colors-table.stripe tr:nth-child(4n-2), table.colors-table.stripe tr:nth-child(4n-3) {
  background-color: #fafafa;
}
.dataTables_wrapper {
  background-color: #FFF;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  padding: 4px;
  border-radius: 4px;
}
/* -----------------------------------------------------------------------------
                            Editorial Rules
----------------------------------------------------------------------------- */

.imgContainer {
  display: inline-block;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}
.editorial-body {
  font-size: 14px;
  line-height: 27px;
  padding: 4px;
  margin: 0 auto;
  max-width: 1000px;
  color: #454545;
  font-weight: normal;
}
.editorial-author {
  font-size: 20px;
  color: #6B778C;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}
.editorial-title {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 32px;
  text-align: center;
}
.editorial-subtitle {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 24px;
  margin-top: 36px;
}
.editorial-sectiontitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 24px;
  margin-top: 36px;
}
/* -----------------------------------------------------------------------------
                            Footer Nav Rules
----------------------------------------------------------------------------- */

.footNav {
  box-sizing: border-box;
  display: grid;
  grid-auto-rows: auto;
  gap: 0px 0px;
  border-radius: 4px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  grid-template-areas: "." "." "." "." ".";
}
.footNavHeader {
  background-color: #F64236;
  text-align: center;
  color: white;
  margin: 8px;
  padding: 2px;
}
.footNavFlex {
  display: flex;
  flex: 1 1 0px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0.25em 1% 0px 1%;
  padding-bottom: 1em;
}
.footNavFlex div {
  margin: 4px 10px 4px 10px;
}
/* -----------------------------------------------------------------------------
                            Tier List Rules
----------------------------------------------------------------------------- */

.tierList {
  display: grid;
  grid-template-columns: minmax(58px, auto) 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  border-radius: 4px;
  font-size: 12px;
  background-color: #f4f4f2;
}
.tierHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  // padding: 1em 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 14px;
  font-weight: 600;
  border-right: 2px solid #1a1a17;
}
.tierGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.tierUnderline {
  border-bottom: 2px solid #1a1a17;
}
.generalUnderline {
  border-bottom: 1px solid rgba(160, 160, 160, .4);
}
.tierGroup>div {
  margin: 4px 10px;
}
.CharaInfoLabel {
  text-align: right;
  width: 50%;
}
/* -----------------------------------------------------------------------------
                            Table of Contents Rules
----------------------------------------------------------------------------- */

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).
 */

.toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul, .toclimit-6 .toclevel-5 ul, .toclimit-7 .toclevel-6 ul {
  display: none;
}
.overview_toc .toctitle {
  width: 103%;
  margin-left: -1.5%;
  border-bottom: 1px solid rgba(160, 160, 160, .4);
  font-weight: 600;
  font-size: 20px;
}
.overview_toc .toctogglespan {
  font-weight: 300 !important;
  font-size: 14px !important;
}
.overview_toc .toc ul {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  line-height: 1.6;
  padding: 10px 0px 0px 35px;
}
.overview_toc .toc {
  display: block;
  border: unset;
  background-color: unset;
  padding: -4px;
}

/* -----------------------------------------------------------------------------
                                  Tabber Rules
----------------------------------------------------------------------------- */

.tabber .tabbertab {
  border: none;
  padding: 0;
}
ul.tabbernav {
  margin: 0;
  padding: 3px 0;
  border: 0;
  font: bold 14px 'Roboto', sans-serif !important;
}
ul.tabbernav li a {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  padding: 3px .5em;
  margin-left: 3px;
  border: 1px solid #CCC;
  /* background: #F2F7FF; */
  text-decoration: none;
  line-height: 1;
}
ul.tabbernav li.tabberactive a {
  background-color: #FFF;
  border: 1px solid #7ec0ee !important;
}
ul.tabbernav li.tabberactive a:hover {
  color: #000;
  background: #FFF;
  border: 1px solid #7ec0ee !important;
}
/* Prevents tabber contents from showing up for a few frames before the script executes */

.tabber:not(.tabberlive)>.tabbertab:not(:first-child) {
  display: none;
}
/* -----------------------------------------------------------------------------
                          Tooltip CSS from gbf.wiki
----------------------------------------------------------------------------- */

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dashed black;
}
.tooltiptext {
  visibility: hidden;
  min-width: 250px;
  padding: 12px 14px;
  position: absolute;
  left: 50%;
  bottom: calc(20px + 100%);
  z-index: 99999;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #a2a9b1;
  border-radius: 2px;
  white-space: normal;
  font-weight: normal;
  font-style: initial;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}
.tooltiptext:after, .tooltiptext:before {
  content: '';
  position: absolute;
  left: 50%;
  border-style: solid;
}
.tooltiptext:after {
  top: 100%;
  bottom: auto;
  width: 20px;
  height: 20px;
  background: #fff;
  margin-top: -10px;
  margin-left: -10px;
  box-shadow: 1px 1px 0px #a2a9b1;
  transform: rotate(45deg);
  border-width: 0;
}
.tooltiptext:before {
  top: 100%;
  bottom: auto;
  border-width: 18px;
  margin-left: -18px;
  border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
  pointer-events: none;
}
.tooltip .tooltip .tooltiptext, .header-fixed-helper .tooltip .tooltiptext {
  bottom: auto;
  top: calc(20px + 100%);
}
.tooltip .tooltip .tooltiptext:after, .header-fixed-helper .tooltip .tooltiptext:after {
  top: auto;
  bottom: 100%;
  border-width: 15px;
  margin-left: -15px;
  border-color: transparent transparent white transparent;
  width: 0;
  height: 0;
  box-shadow: none;
  background: none;
  transform: none;
}
.tooltip .tooltip .tooltiptext:before, .header-fixed-helper .tooltip .tooltiptext:before {
  top: auto;
  bottom: 100%;
  border-width: 16px;
  margin-left: -16px;
  border-color: transparent transparent #888 transparent;
}
.tooltiptext span.hr {
  display: block;
  height: 1px;
  background-color: #a2a9b1;
}
.tooltiptext hr, .tooltiptext span.hr {
  margin: 10px 0 12px;
  position: relative;
  background: none;
}
.tooltiptext hr:after, .tooltiptext span.hr:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px !important;
  position: absolute;
  left: -14px;
  background: #a2a9b1;
  padding: 0 14px;
}
.tooltip:hover>.tooltiptext, .tooltip.hover>.tooltiptext {
  visibility: visible;
}
.tooltiptext {
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
  transform: translate(-50%, 8px);
}
.tooltip .tooltip .tooltiptext, .header-fixed-helper .tooltip .tooltiptext {
  transform: translate(-50%, -8px);
}
.tooltip:hover>.tooltiptext, .tooltip.hover>.tooltiptext {
  opacity: 1;
  transition-delay: 0s;
  transform: translate(-50%, 0);
}
.tooltiptext a {
  color: #0645ad;
  border-bottom: 0;
}
.tooltiptext a:visited {
  color: #0b0080;
}
.tooltiptext a:active {
  color: #faa700;
}
.tooltiptext a:hover, a:focus {
  text-decoration: underline;
}
.tooltiptext {
  color: #252525;
}
.tooltiptext a.new {
  color: #ba0000;
}
/* Remove .mw-body-content stacking context so the tooltip can
   overlap with elements outside content area and be shown properly */

.mw-body-content {
  z-index: auto;
}
.flow-post .flow-post-content {
  overflow: visible;
}
/* -----------------------------------------------------------------------------
                               Flex Rules
----------------------------------------------------------------------------- */

.fp-button {
  border-radius: 4px;
  background: none;
  border: 2px solid #2e2d2d;
  cursor: pointer;
  padding: 0.5em 0.75em;
  font-weight: 700;
  font-size: 14px;
  color: white;
  display: inline-block;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.fp-button:hover {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.24);
}
.fpcontent {
  width: 100%;
  display: inline-block;
  overflow: visible !important;
  z-index: 1;
}
.fpbox {
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  margin: 0px 10px 20px 10px;
  padding: 2px;
  border-radius: 4px;
}
.fpbox .heading {
  border-bottom: 1px solid rgba(160, 160, 160, .4);
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  font-weight: 600;
  text-align: center;
  font-size: 22px;
}
.fpbox .heading .smalllink {
  font-weight: 500;
}
.fpbox hr {
  border: none;
  border-bottom: 1px solid rgba(160, 160, 160, .4);
}
.fplinks {
  margin: -5px;
}
.fpvideos {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
.fpvideo {
  display: inline-block;
  margin: 0 5px;
}
.fplinks .linkslabel {
  background: rgba(0, 0, 0, 0);
  border-bottom: 2px solid #454545;
  margin: 15px 5px 5px 5px;
  padding: 0 0 5px 0;
}
.fplink {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
.fplink a {
  color: black;
}
.fplink a.external {
  color: black;
}
.fplink a.external:visited {
  color: black;
}
.fplink a:visited {
  color: black;
}
/* 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-color: white;
  border: 1px solid #1976d2;
  color: black;
  border-radius: 4px;
  display: table-cell;
  padding: 0 6px;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
.fplink.wide .box .row .cell {
  padding: 0 5px;
}
#fptopsection .fplink.image, #fpflexsection .fplink.image, #fpbottomsection .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) {
  .fpcontent {
    padding-right: 520px;
    width: calc(100% - 530px);
  }
  #fptopsection {
    float: left;
    width: 100%;
  }
  #fpflexsection {
    float: right;
    width: 520px;
    margin-right: -520px;
  }
  #fpbottomsection {
    float: left;
    width: 100%;
    margin-top: -5px;
  }
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 50%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 100%;
  }
  #fpflexsection .fplink {
    width: 25%;
  }
  #fpflexsection .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 1100px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 33.333%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 66.666%;
  }
}
@media (min-width: 1210px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 25%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 1320px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 20%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 40%;
  }
}
@media (min-width: 1430px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 16.666%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 33.333%;
  }
  .fplink a {
    padding: 3px 5px;
    color: black;
  }
  .fplink a:visited {
    color: black;
  }
  .fplink a.external {
    color: black;
  }
  .fplink a.external:visited {
    color: black;
  }
}
@media (min-width: 1540px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 14.285%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 28.571%;
  }
  #fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
    background-image: none;
  }
  .fpmaybelcol {
    float: left;
    width: 70.886%;
  }
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 20%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 40%;
  }
  .fpmaybercol {
    float: right;
    width: 29.113%;
  }
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 50%;
  }
  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 100%;
  }
}
@media (min-width: 1650px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 12.5%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 25%;
  }
}
@media (min-width: 1697px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 16.666%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 33.333%;
  }
}
@media (min-width: 1760px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 11.111%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 22.222%;
  }
}
@media (min-width: 1850px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 14.285%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 28.571%;
  }
}
@media (min-width: 1870px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 10%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 20%;
  }
  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 134px;
    height: 134px;
  }
  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 120px;
    height: 120px;
  }
  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 1918px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 33.333%;
  }
  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 66.666%;
  }
}
@media (min-width: 1980px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 9.09%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 18.181%;
  }
}
@media (min-width: 2006px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 12.5%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 25%;
  }
}
@media (min-width: 2090px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 8.33%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 16.666%;
  }
}
@media (min-width: 2161px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 11.111%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 22.222%;
  }
}
@media (min-width: 2200px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.692%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 15.384%;
  }
}
@media (min-width: 2296px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 25%;
  }
  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 50%;
  }
}
@media (min-width: 2310px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.142%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 14.285%;
  }
}
@media (min-width: 2316px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 10%;
  }
  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 20%;
  }
}
@media (min-width: 2420px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 6.666%;
  }
  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 13.333%;
  }
  .fplink a {
    padding: 5px 5px;
  }
  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 164px;
    height: 164px;
  }
  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 150px;
    height: 150px;
  }
  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 150px;
    height: 150px;
  }
}
.fplink.image .image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  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: #f5f5f5;
  border-top: 2px solid #454545;
}
.fplink.wide a {
  margin: 0 -5px;
}
/* -----------------------------------------------------------------------------
                            ColumnList Specific Rules
----------------------------------------------------------------------------- */

.columns2 {
  -webkit-columns: 16em 2;
  -moz-columns: 16em 2;
  columns: 16em 2;
}
/* -----------------------------------------------------------------------------
                            MoveData Specific Rules
----------------------------------------------------------------------------- */

div.movedata {
  border-radius: 4px;
  border: none;
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  border-collapse: collapse;
  margin: 0em;
}
div.movedata>table.movedata {
  width: 100%;
  text-align: center;
  margin: 0.2em 0;
}
div.movedata>p {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}
div.movedata>dl {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
div.movedata>.thumb>.thumbinner>.image>.thumbimage {
  background-color: #f8f9fa;
}
/* -------------------------
Flex Attack Data styling
------------------------- */
/* Hide the sortable on attack-data tables */
.attack-info > table.cargoTable thead th {
  padding-right: 0px;
  background-image: none;
  cursor: initial;
}

.attack-info > table td { vertical-align: middle; }
.attack-data table { line-height: 1.1em; }
@media (min-width: 990px) {
  .attack-container {
    width: auto;
  }
  .attack-gallery {
    float: left;
    width: 220px;
  }
  .attack-info {
    margin-left: 220px;
    margin-top: 0;
  }
}
.input-badge {
  border: 1px solid #2e2d2d;
  border-radius: 4px;
  padding: 1px .35em;
  background-color: white;
}
.attack-container {
  width: 100%;
  display: inline-block;
  overflow: visible !important;
  z-index: 1;
  border-radius: 4px;
  border: none;
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  border-collapse: collapse;
}
.attack-gallery ul.gallery {
  margin: 0;
}
.attack-gallery * .gallerytext p {
  margin: 0;
  text-align: center;
}
.attack-data { width: 100%; text-align: center; margin: 0; }
.attack-data table {
  border: none;
  background-color: white;
  border-collapse: collapse;
  overflow: auto;
}
.attack-info p, attack-info dl {
  padding: 0 1em 0 0.5em;
}
.attack-info h4 { padding: 0; margin: 0; }
/* -----------------------------------------------------------------------------
                        Character Link Button styling
----------------------------------------------------------------------------- */

.char-btn {
  background-color: #e85a5a;
  color: white;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 4px 8px 4px;
  margin: 5px;
  min-width: 90px;
}
/* Remove external link icon from external links and adjust their padding
 Replace this styling with a more localized solution in the future */

a .external .text {
  background-image: none;
  padding-right: 0px;
}
.addShadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* -----------------------------------------------------------------------------
                        Cargo Based Move Boxes Styling
----------------------------------------------------------------------------- */

.grid-container {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-template-areas: "name data" "gallery description";
}
.move-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  border-radius: 4px;
  background-color: white;
}
.name {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  height: 1em;
  gap: 0px 0px;
  grid-template-areas: ".";
  grid-area: name;
  text-align: center;
}
#moveName {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.1em;
}
.gallery {
  grid-area: gallery;
  align-content: center;
  text-align: center;
  overflow: hidden;
}
.description {
  grid-area: description;
  padding: 0.25em 1em;
}
.data {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0px 0px;
  grid-template-areas: ". . . . . . . ." ". . . . . . . .";
  grid-area: data;
  text-align: center;
  border-bottom: 1px solid grey;
}
.data-cell {
  font-size: 20px;
}
#startup {
  color: #4caf50;
}
#active {
  color: #f44336;
}
#recovery {
  color: #2196f3;
}

/* Movelist Toggles */
.movelist-toggles {
  display: flex;
  justify-content: center;
  box-shadow: rgb(72, 78, 81) 0px -1px 0px 0px inset;
  background: #f9f9f9;
}

.movelist-toggle-button {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    color: #54595d;
    font-weight: bold;
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.movelist-toggle-button:hover {
    box-shadow: inset 0 -2px 0 0 #447ff5;
    color: #447ff5;
}

.movelist-toggle-on {
  box-shadow: rgb(41, 82, 163) 0px -2px 0px 0px inset;
  color: rgb(92, 152, 214);
}
.movelist-toggle-on:hover {
  box-shadow: rgb(9, 59, 161) 0px -2px 0px 0px inset;
  color: rgb(76, 159, 245);
}

.note {
  background-position: left 7px top 50%;
  padding: 0.5em 0.5em 0.5em 40px;
  margin: 0.5em 0;
  overflow: hidden;
  background-color: #f8f9fa;
  background-repeat: no-repeat;
  border: 1px solid #ddd;
}
.note-inline {
  display: inline-block;
  vertical-align: middle;
}
.note-info {
  background-color: #f6efe5;
  /* [[File:OOjs_UI_icon_reference_20_ac6600.svg]] */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/OOjs_UI_icon_reference_20_ac6600.svg);
  background-size: 25px;
  border-color: #ac6600;
  padding-left: 40px;
  min-height: 28px;
}
.note-reminder {
  background-color: #fff9ea;
  /* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg);
  background-size: 25px;
  border-color: #fc3;
  min-height: 28px;
}
.note-warn {
  background-color: #fff9ea;
  /* [[File:OOjs_UI_icon_alert-warning.svg]] */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
  background-size: 25px;
  border-color: #fc3;
  min-height: 28px;
}

.note-error {
  background-color: #fee7e6;
  /* [[File:OOjs_UI_icon_notice-destructive.svg]] */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
  background-size: 25px;
  border-color: #c33;
  min-height: 28px;
}

/* Clr Template to use HTML colors */
.colorful-text[data-color] { color: attr(data-color); }

/* Guilty Gear P button */
.colorful-text[data-color="1"], .text-color--1 { color: #d96aca; }

/* Guilty Gear K button */
.colorful-text[data-color="2"], .text-color--2 { color: #1f8ccc; }

/* Guilty Gear S button */
.colorful-text[data-color="3"], .text-color--3 { color: #009e4e; }

/* Guilty Gear H button */
.colorful-text[data-color="4"], .text-color--4 { color: #de1616; }

/* Guilty Gear D button */
.colorful-text[data-color="5"], .text-color--5 { color: #e8982c; }

/* very easy difficulty combo*/
.colorful-text[data-color="6"], .text-color--6 { color: #3197d3; }

/* medium difficulty combo*/
.colorful-text[data-color="7"], .text-color--7 { color: #e49f48; }

/* very hard difficulty combo*/
.colorful-text[data-color="8"], .text-color--8 { color: #b769c4; }


.colorful-text[data-color="added"], .text-color--added {
  background-color: LemonChiffon;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[data-color="new"], .text-color--new {
  background-color: PeachPuff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[data-color="removed"], .text-color--removed {
  background-color: Lavender;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[data-color="reworked"], .text-color--reworked {
  background-color: LightBlue;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: -0.008em;
  font-size: 12px;
  padding: 2px;
}
.colorful-text[data-color="buff"], .text-color--buff {
  background-color: DarkSeaGreen;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.008em;
  padding: 2px;
}
.colorful-text[data-color="nerf"], .text-color--nerf {
  background-color: LightPink;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  padding: 2px;
}