Common.css

/* CSS placed here will be applied to all skins */

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

.fpcontent {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.fpmaybecols {
    overflow: hidden;
    margin: -5px 0 -5px 0;
}

.fpmaybecols + .fpmaybecols {
    margin: 0 0 -5px 0;
}

.fpbox {
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid #DED7A4;
    box-shadow: 0 0 0 2px #505050 inset;
    margin: 5px 5px 8px 5px;
    padding: 5px 5px 5px 5px;
}

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

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

.fpbox .heading {
    border-bottom: 1px solid #505050;
    color: #e0e0e0; /* 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: #e0e0e0; /* change for hydra (light) wikis */
    font-size: 75%;
    font-weight: bold;
}

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

.fplinks {
    margin: -5px;
}

.fplinks .linkslabel {
    background: rgba(0, 0, 0, 0);
    border-bottom: 2px solid #505050;
    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: #efefef; 
    background-image: -moz-linear-gradient(center top, #efefef 0%, #c0c0c0 100%); 
    background-image: -webkit-gradient(linear, center top, left bottom, color-stop(0%,#efefef), color-stop(100%,#c0c0c0)); 
    background-image: -webkit-linear-gradient(top, #efefef 0%, #c0c0c0 100%); 
    background-image: -o-linear-gradient(top, #efefef 0%, #c0c0c0 100%); 
    background-image: -ms-linear-gradient(top, #efefef 0%, #c0c0c0 100%); 
    background-image: linear-gradient(to bottom, #efefef 0%, #c0c0c0 100%); 
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    color: #000000;
    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: auto; 
  }

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

@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;
  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(0, 0, 0, 0.1);
  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;
}

/* used by Template:Mana */
.mana {
 background: url("/media/stormboundkingdomwars.gamepedia.com/e/ed/Mana.png") center no-repeat;
 background-size:1.8em;
 padding:0.8em;
 padding-top:0.5em;
 color:#fff;
 margin:0px 0.2em;
}
/* end Template:Mana */

/* used by Template:Strength */
.strength-hero {
 background:url("media/stormboundkingdomwars.gamepedia.com/b/b2/Strength-Hero.png") center no-repeat;
 background-size:1.5em;
 padding:0.8em;
 padding-top:1em;
 color:#fff;
 margin:0px 0.2em
}

.strength-structure {
 background:url("media/stormboundkingdomwars.gamepedia.com/a/aa/Strength-Structure.png") center no-repeat;
 background-size:1.5em;
 padding:0.8em;
 padding-top:1em;
 color:#fff;
 margin:0px 0.2em
}

.strength-unit {
 background:url("media/stormboundkingdomwars.gamepedia.com/2/2a/Strength-Unit.png") center no-repeat;
 background-size:1.5em;
 padding:0.8em;
 padding-top:1em;
 color:#fff;
 margin:0px 0.2em
}
/* end Template:Strength */

/* used by Template:Movement */
.movement {
 background:url("/media/stormboundkingdomwars.gamepedia.com/b/b0/Movement.png") center no-repeat;
 background-size:1.5em;
 padding:0.8em;
 padding-top:0.7em;
 color:#fff;
 margin:0px 0.2em
}
/* end Template:Movement */

/* fp box tweaks */
.fplink .box .row .cell {
  background:
        url("/media/stormboundkingdomwars.gamepedia.com/a/ab/Box_decoration_left.png") no-repeat scroll left border-box,
        url("/media/stormboundkingdomwars.gamepedia.com/f/fb/Box_decoration_right.png") no-repeat scroll right border-box;
  background-size:contain;
  padding:4px 13px;
  text-align: center;
  color: #fff;
  text-transform:uppercase;
  border:0;
  font-weight:bold;
  margin-bottom:0;
}

.fplink .box .row .cell a{
  margin-left:0.5em;
  margin-right:0.5em;
  background-color:#DED7A4;
  color:#000 !important;
  text-shadow:none !important;
  padding:0px 5px;
}

.fplink .box .row .cell a:hover {
  text-decoration:none;
  background:#827E60;/*fallback if the browser does not support gradient */
  background:radial-gradient(#827E60, #DED7A4);
}

.fplink {
  margin-bottom:0.5em;
}
/* end fp box tweaks */

/* navbox tweaks */
table.navbox tbody tbody tr td,
table.navbox tbody tbody tr th {
  border: 1px solid #DED7A4;
}

table.navbox tr td .navbox-group {
  text-align:left;
}

table.navbox th.navbox-title span:nth-child(3) {
  text-transform:uppercase;
}

table.navbox th.navbox-title span:nth-child(3):before {
   background: url("/media/stormboundkingdomwars.gamepedia.com/d/da/Title_decoration_left.png");
   background-size: 0.8em 0.4em;
   display: inline-block;
   width: 0.8em; 
   height: 0.4em;
   content:"";
   vertical-align:middle;
   margin-right:0.4em;
   margin-bottom: 5px;
}

table.navbox th.navbox-title span:nth-child(3):after {
   background: url("/media/stormboundkingdomwars.gamepedia.com/8/8d/Title_decoration_right.png");
   background-size: 0.8em 0.4em;
   display: inline-block;
   width: 0.8em; 
   height: 0.4em;
   content:"";
   vertical-align:middle;
   margin-left:0.4em;
   margin-bottom: 5px;
}
/* end navbox tweaks */

/* Used for [[Template:Doc]] */
.doc {
    margin: 0em auto 1em;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}

.doc-header {
    padding-bottom: 3px;
    border-bottom: 1px solid #BDCAC3;
    margin-bottom: 1ex;
}

.doc-footer {
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}

/* tooltips */
.tooltip-loading {
   border: 2px solid #DED7A4;
   background: #213943;
   color: #DED7A4;
   width: 24.5em;
   max-width: 24.5em;
}

div.tooltip-hover {
  display:inline-block;
}

div.tooltip-content {
  position:absolute;
  display:none;
}

div.tooltip-hover:hover + div.tooltip-content {
  display:block;
  pointer-events:none;
}
/* end tooltips */

/* custom bullet image */
ul {
  list-style-image:url("/media/stormboundkingdomwars.gamepedia.com/7/7a/Bullet.png");
}
/* end custom bullet image */

/* Removes redundant purge button in menu */
div.menu li#ca-cargo-purge {
  display:none;
}

/* Used by [[Template:Card]] and [[Template:Deck]] */
table.card {
  text-align:center;
  border-radius:15px;
  padding:3px;
  padding-bottom:5px;
  margin:5px;
  border:3px ridge #DED7A4;
  display:inline-table;
  width:167px;
}

table.card.ironclad  {
  background-color:#824649;
}

table.card.ironclad.hero  {
  background-color:#26151F;
}

table.card.ironclad.spell  {
  background-color:#9F6569;
}

table.card.ironclad.structure  {
  background-color:#451F2E;
}

table.card.tribes  {
  background-color:#30655F;
}

table.card.tribes.hero  {
  background-color:#011A17;
}

table.card.tribes.spell  {
  background-color:#4C8A81;
}

table.card.tribes.structure  {
  background-color:#153E36;
}

table.card.swarm  {
  background-color:#62462F;
}

table.card.swarm.hero  {
  background-color:#1A1403;
}

table.card.swarm.spell  {
  background-color:#906F4E;
}

table.card.swarm.structure  {
  background-color:#362613;
}

table.card.winter  {
  background-color:#27364D;
}

table.card.winter.hero  {
  background-color:#001624;
}

table.card.winter.spell  {
  background-color:#425377;
}

table.card.winter.structure  {
  background-color:#16212F;
}

table.card.neutral  {
  background-color:#4D565B;
}

table.card.neutral.hero  {
  background-color:#121315;
}

table.card.neutral.spell  {
  background-color:#767E83;
}

table.card.neutral.structure  {
  background-color:#2D3739;
}



.card-name {
  text-transform:uppercase;
  color:#fff;
  font-size:85%;
  vertical-align:bottom;
}

.card-unit {
  color:#999;
  text-transform:uppercase;
  font-size:80%;
  height:1.6em;
  line-height:1.6em;
  vertical-align:top;
}

.card-description {
  font-size:90%;
  line-height:1em;
  height:5em;
  padding-bottom:5px;
}

.card-bottom {
  line-height:1.6em
}

.card-bottom td {
  width:33%;
}

.deck {
  display:flex;
  flex-direction:column;
}

.card.compressed {
  position:relative;
  width:16em;
  margin:2px 1.1em;
  border-width:2px;
}

.card.compressed .card-mana {
  position:absolute;
  left:-1.6em;
  top: calc(50% - 1.4em)
}

.card.compressed .card-name {
  vertical-align:middle;
  text-align:left;
  padding-left:1.5em;
}

.card.compressed .card-image {
  text-align:right;
}

/* end Template:Cards */