MediaWiki:Common.css

/* Load Google's Roboto font */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Disable Google Chrome's forced outline on intractable elements. */

outline: none; }
 * focus,
 * hover {
 * hover {

.imgContainer { display: inline-block; overflow: hidden; object-fit: cover; object-position: center; }

.round-corners { border-radius: 6px; }

/* -                           Global Rules - */

html { font-family: 'Roboto', sans-serif; scroll-behavior: smooth; }

a, a:visited { color: #1976d2; }

/* makes an image scale to fit container width */ .res-img img { max-width:100%; height:auto; }

/* -                           Mediawiki Specific Rules - */

/*mediawiki link colors*/

.mw-body-content a.external:visited, a.external { color: #1976d2; }

/* hide discussion on Main_Page */

.page-page-Main_Page #ca-talk { display: none !important; }

/* mediawiki main body */

.mw-body { color: #333333; background-color: #fbfbfb; }

/* establish a header via overriding mediawiki defualts */

body { background-image: url(images/background.png); background-repeat: no-repeat; }

background-image: none; background-color: rgba(0, 0, 0, 0); }
 * 1) mw-page-base {

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

div.vectorMenu h3 span { padding-top: 1em; }

div.vectorTabs { border-top: 1px solid #dceefb; height: 2.2em; }

div.vectorTabs li a { height: 1.95em; }

div.vectorTabs span a { padding-top: 0.8em; }

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

padding-left: 0; }
 * 1) p-personal ul {

padding-top: 8px; }
 * 1) p-logo {

div#content { 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); }

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

padding-top: 2.7em; }
 * 1) ca-unwatch.icon a,
 * 2) ca-watch.icon a {

margin-top: 2.75em; }
 * 1) left-navigation,
 * 2) right-navigation {

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

margin-bottom: 0.8em; }
 * 1) pt-anonuserpage {

/* Background Ends Here */

/* remove margin */

.gallery.mw-gallery-slideshow { margin: 0 !important; }

pre, .mw-code { background-color: white; }

table.wikitable { background-color: white; border-radius: 4px; }

table.wikitable>tr>th, table.wikitable>*>tr>th { background-color: #f9f9f9; }

.noborder td { border: none; }

/* move collapsible element indicator to the left */

.mw-collapsible span.mw-collapsible-toggle { float: left; margin-left: 0; margin-right: 1em; }

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

padding-left: 0; }
 * 1) p-personal ul {

padding-top: 8px; }
 * 1) p-logo {

div#content { 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); }

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

padding-top: 2.7em; }
 * 1) ca-unwatch.icon a,
 * 2) ca-watch.icon a {

margin-top: 2.75em; }
 * 1) left-navigation,
 * 2) right-navigation {

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

margin-bottom: 0.8em; }
 * 1) pt-anonuserpage {

/* Fix the `More` tab */ /*

margin: 1px 0 0 0.5em; padding: 0 0.5em; }
 * 1) p-search {

top: 2.2em; }
 * 1) p-cactions>.menu {

/* Background Ends Here */

/* Faster visible changes */

tr.hide { visibility: collapse; }

.hide:not(tr) { display: none; }

/* Faster visible changes ends here */

.tabs-label { border-radius: 0 0 0 0 !important; }

.tabs-container { border-radius: 0 0 0 0 !important; }

/* -                           Footer Nav Rules - */

.footNav { box-sizing: border-box; display: grid; grid-template-columns: 1fr; 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: 58px 1fr; grid-template-rows: repeat(4, 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; padding: 1em 2em; 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; }

/* -                           Table of Contents Rules - */

/* Allow limiting of which header levels are shown in a TOC; , 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 .toctitle toctoggle {}

.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; }

/* -                       Image Map Sizing Rules - */

/* GBVS Imagemap */

img[alt="GBVS CharSelect.png"] { transform-origin: center left; }

@media (max-width: 1800px) { img[alt="GBVS CharSelect.png"] { transform: scale(0.9); } }

@media (max-width: 1600px) { img[alt="GBVS CharSelect.png"] { transform: scale(0.8); } }

@media (max-width: 1366px) { img[alt="GBVS CharSelect.png"] { transform: scale(0.58); } }

@media (max-width: 1280px) { img[alt="GBVS CharSelect.png"] { transform: scale(0.5); } }

@media (max-width: 989px) { img[alt="GBVS CharSelect.png"] { transform: scale(0.72); } }

/* GGACR Imagemap */

img[alt="GGACR Roster.png"] { transform-origin: center left; }

@media (max-width: 1428px) { img[alt="GGACR Roster.png"] { transform: scale(0.9); } }

@media (max-width: 1366px) { img[alt="GGACR Roster.png"] { transform: scale(0.85); } }

@media (max-width: 1280px) { img[alt="GGACR Roster.png"] { transform: scale(0.75); } }

@media (max-width: 989px) { img[alt="GGACR Roster.png"] { transform: scale(0.9); } }

@media (max-width: 480px) { img[alt="GGACR Roster.png"] { transform: scale(0.63); } }

@media (max-width: 375px) { img[alt="GGACR Roster.png"] { transform: scale(0.475); } }

@media (max-width: 320px) { img[alt="GGACR Roster.png"] { transform: scale(0.39); } }

/* GGXRD-R2 Imagemap */

img[alt="GGXRD-R2_Roster.png"] { transform-origin: center left; }

@media (max-width: 1366px) { img[alt="GGXRD-R2_Roster.png"] { transform: scale(0.85); } }

@media (max-width: 1280px) { img[alt="GGXRD-R2_Roster.png"] { transform: scale(0.75); } }

/* -                 Alternating Table Row Colors Rules - */

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

table.stripe tr:nth-child(odd) { background-color: white; }

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

table.stripe tr:nth-child(even) { background-color: #f1f1f1; }

/* 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: white; }

/* 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: #f1f1f1; }

/* -                             Text colors  Tempalte Rules - */

.text-color--1 { color: #d96aca; }

/* Guilty Gear P button */

.text-color--2 { color: #1f8ccc; }

/* Guilty Gear K button */

.text-color--3 { color: #009e4e; }

/* Guilty Gear S button */

.text-color--4 { color: #de1616; }

/* Guilty Gear H button */

.text-color--5 { color: #e8982c; }

/* Guilty Gear D button */

.text-color--6 { color: #3197d3; }

/* very easy difficulty combo*/

.text-color--7 { color: #e49f48; }

/* medium difficulty combo*/

.text-color--8 { color: #b769c4; }

/* very hard difficulty combo*/

.text-color--added { background-color: LemonChiffon; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: -0.008em; padding: 2px; }

.text-color--new { background-color: PeachPuff; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: -0.008em; padding: 2px; }

.text-color--removed { background-color: Lavender; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: -0.008em; padding: 2px; }

.text-color--reworked { background-color: LightBlue; border-radius: 4px; font-weight: 600; letter-spacing: -0.008em; font-size: 12px; padding: 2px; }

.text-color--buff { background-color: DarkSeaGreen; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: -0.008em; padding: 2px; }

.text-color--nerf { background-color: LightPink; border-radius: 4px; font-weight: 600; font-size: 12px; padding: 2px; }

/* -                                 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-weight: 600; }

.fplink a { color: #f5f5f5; }

.fplink a.external { color: #f5f5f5; }

.fplink a.external:visited { color: #f5f5f5; }

.fplink a:visited { color: #f5f5f5; }

/* 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: #262626; background-image: -moz-linear-gradient(center top, #454545 0%, #2e2d2d 100%); background-image: -webkit-gradient(linear, center top, left bottom, color-stop(0%, #454545), color-stop(100%, #2e2d2d)); background-image: -webkit-linear-gradient(top, #454545 0%, #2e2d2d 100%); background-image: -o-linear-gradient(top, #454545 0%, #2e2d2d 100%); background-image: -ms-linear-gradient(top, #454545 0%, #2e2d2d 100%); background-image: linear-gradient(to bottom, #454545 0%, #2e2d2d 100%); border: 1px solid #2e2d2d; border-radius: 4px; color: #fff; display: table-cell; padding: 0 6px; position: relative; text-align: center; vertical-align: middle; }

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

height: 114px; width: 114px; }
 * 1) fptopsection .fplink.image,
 * 2) fpflexsection .fplink.image,
 * 3) fpbottomsection .fplink.image {

.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: #f5f5f5; } .fplink a:visited { color: #f5f5f5; } .fplink a:.external { color: #f5f5f5; } .fplink a.external:visited { color: #f5f5f5; } }

@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; }

/* - NVD3 styling - */

.nvtooltip { position: absolute; background-color: rgba(255, 255, 255, 1.0); color: rgba(0, 0, 0, 1.0); padding: 1px; border: 1px solid rgba(0, 0, 0, .2); z-index: 10000; display: block; text-align: left; pointer-events: none; white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.nvtooltip { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; }

/* Give tooltips that old fade in transition by  putting a "with-transitions" class on the container div. */

.nvtooltip.with-transitions, .with-transitions .nvtooltip { transition: opacity 50ms linear; -moz-transition: opacity 50ms linear; -webkit-transition: opacity 50ms linear; transition-delay: 200ms; -moz-transition-delay: 200ms; -webkit-transition-delay: 200ms; }

.nvtooltip.x-nvtooltip, .nvtooltip.y-nvtooltip { padding: 8px; }

.nvtooltip h3 { margin: 0; padding: 4px 14px; line-height: 18px; font-weight: normal; background-color: rgba(247, 247, 247, 0.75); color: rgba(0, 0, 0, 1.0); text-align: center; border-bottom: 1px solid #ebebeb; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }

.nvtooltip p { margin: 0; padding: 5px 14px; text-align: center; }

.nvtooltip span { display: inline-block; margin: 2px 0; }

.nvtooltip table { margin: 6px; border-spacing: 0; }

.nvtooltip table td { padding: 2px 9px 2px 0; vertical-align: middle; }

.nvtooltip table td.key { font-weight: normal; }

.nvtooltip table td.value { text-align: right; font-weight: bold; }

.nvtooltip table tr.highlight td { padding: 1px 9px 1px 0; border-bottom-style: solid; border-bottom-width: 1px; border-top-style: solid; border-top-width: 1px; }

.nvtooltip table td.legend-color-guide div { width: 8px; height: 8px; vertical-align: middle; }

.nvtooltip table td.legend-color-guide div { width: 12px; height: 12px; border: 1px solid #999; }

.nvtooltip .footer { padding: 3px; text-align: center; }

.nvtooltip-pending-removal { pointer-events: none; display: none; }

/* Interactive Layer */

.nvd3 .nv-interactiveGuideLine { pointer-events: none; }

.nvd3 line.nv-guideline { stroke: #ccc; }

.nvd3 .nv-groups path.nv-line { fill: none; }

.nvd3 .nv-groups path.nv-area { stroke: none; }

.nvd3 .nv-axis { pointer-events: none; opacity: 1; }

.nvd3 .nv-axis path { fill: none; stroke: #000; stroke-opacity: .75; shape-rendering: crispEdges; }

.nvd3 .nv-axis path.domain { stroke-opacity: .75; }

.nvd3 .nv-axis.nv-x path.domain { stroke-opacity: 0; }

.nvd3 .nv-axis line { fill: none; stroke: #e5e5e5; shape-rendering: crispEdges; }

.nvd3 .nv-axis .zero line,

/*this selector may not be necessary*/

.nvd3 .nv-axis line.zero { stroke-opacity: .75; }

.nvd3 .nv-axis .nv-axisMaxMin text { font-weight: bold; }

.nvd3 .x .nv-axis .nv-axisMaxMin text, .nvd3 .x2 .nv-axis .nv-axisMaxMin text, .nvd3 .x3 .nv-axis .nv-axisMaxMin text { text-anchor: middle }

.nvd3 .nv-axis.nv-disabled { opacity: 0; }

.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { fill-opacity: 0; stroke-opacity: 0; }

.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { fill-opacity: .5 !important; stroke-opacity: .5 !important; }

.with-transitions .nvd3 .nv-groups .nv-point { transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; }

.nvd3.nv-scatter .nv-groups .nv-point.hover, .nvd3 .nv-groups .nv-point.hover { stroke-width: 7px; fill-opacity: .95 !important; stroke-opacity: .95 !important; }

.nvd3 .nv-point-paths path { stroke: #aaa; stroke-opacity: 0; fill: #eee; fill-opacity: 0; }

.nvd3 .nv-indexLine { cursor: ew-resize; }

.lineChart svg { background-color: white; }

/* -                           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 - */ @media (min-width: 990px) { .attack-container { /* margin-right: 220px; */ width: auto; } .attack-gallery { float: left; width: 220px; } .attack-info { margin-left: 220px; margin-top: 0; } } span.input-badge { border: 1px solid #2e2d2d; border-radius: 4px; padding: 3px; 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; } div.attack-gallery>ul.gallery { margin: 0; } div.attack-gallery * .gallerytext p { margin: 0; text-align: center; } div.attack-data { border: none; background-color: white; border-collapse: collapse; margin-top: 0;

} div.attack-info>table.attack-data { width:100%; text-align:center; margin-top: 0; margin-left: 0; margin-bottom: 0.2em; } div.attack-info>p{ padding-left: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; } div.attack-info>dl{ padding-left: 0.5em; padding-right: 0.5em; } .attack-info h4 { padding: 0; margin: 0; }