Common.css

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

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

.feature {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
}

/* 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 {
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

.fpbox2 {
    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: 2px solid #1B1823;
    font-size: 150%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    text-transform: uppercase;
}

.fpbox .heading {
    border-bottom: 1px solid #505050;
    font-size: 132%;
    font-variant: small-caps;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpbox .heading .smalllink {
    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 {
    display: table-cell;
    font-weight: bold;
    position: relative;
    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: 50%;
  }

  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 20%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 40%;
  }

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

  #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(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: #ECEFF6;
    width: 350px;
}

.infoboxname {
    background:#FF0000;
    color: #fff;
    font-size: 115%;
}

.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 #67676;
    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 */

/* Unreleased Content */
.unreleased-page {
    background:
    url("https://static.wikia.nocookie.net/commons_hydra/images/a/a0/Gacha_Corner_Top_Left.png") no-repeat scroll left top border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/8/88/Gacha_Corner_Top_Right.png") no-repeat scroll right top border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/9/90/Gacha_Corner_Bottom_Left.png") no-repeat scroll left bottom border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/0/00/Gacha_Corner_Bottom_Right.png") no-repeat scroll right bottom border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/f/f7/Gacha_Border_Top.png") repeat-x scroll right top border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/1/16/Gacha_Border_Left.png") repeat-y scroll left top border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/9/96/Gacha_Border_Right.png") repeat-y scroll right top border-box,
    url("https://static.wikia.nocookie.net/commons_hydra/images/2/27/Gacha_Border_Bottom.png") repeat-x scroll left bottom border-box, rgba(255,255,255,.9)
    url("https://static.wikia.nocookie.net/commons_hydra/images/6/61/Gacha_Background.png") left top repeat padding-box;
}

.mw-content-ltr > :not(.unreleased-page) .unreleased { display: none }


/* Item Icons */
.item-icon {
  position: relative;
  display: inline-block;
  text-align: center;
}
div.item-icon {vertical-align: top;}
.item-icon > div {
  width: 100%;
}
.item-icon > .img {
  position: relative;
  background: url(https://static.wikia.nocookie.net/forwhomthealchemistexists_gamepedia_en/images/7/7f/Icon_frame_sprite.png/revision/latest) no-repeat;
  background-size: 700%;
}
.item-icon .item-count {
  position: absolute;
  pointer-events: none;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 1.25em;
  bottom: 2px;
  right: 5px;
}
.item-icon > .img {display: inline-block;}
.item-icon > span.img {vertical-align: middle;}
.item-icon > span.img img {vertical-align: unset;}
.item-icon > .img.x-1 {background-position-x: 16.667%;}
.item-icon > .img.x-2 {background-position-x: 33.333%;}
.item-icon > .img.x-3 {background-position-x: 50%;}
.item-icon > .img.x-4 {background-position-x: 66.667%;}
.item-icon > .img.x-5 {background-position-x: 83.333%;}
.item-icon > .img.x-6 {background-position-x: 100%;}
.item-icon > .img.y-1 {background-position-y: 25%;}
.item-icon > .img.y-2 {background-position-y: 50%;}
.item-icon > .img.y-3 {background-position-y: 75%;}
.item-icon > .img.y-4 {background-position-y: 100%;}

.background-gate {
  background: url(https://static.wikia.nocookie.net/forwhomthealchemistexists_gamepedia_en/images/6/6f/Game%2CAssets%2CUI%2CTobira%2CSprite%2Cui_Tobira_03.png/revision/latest) no-repeat;
  background-size: 309%;
}

/* Item List */
.item-list {display: flex; flex-wrap: wrap}

.memento-list {display: flex; width: 200px; font-size: 15px;}

/* Unit List */
.unit-tiny-list {
	display:inline-block;
	margin:0.35rem;
	position:relative;
	text-align: center;
	font-size: 90%;
	line-height: 1.3em;
}

.unit-tiny-list img {border-radius: 7px;}

.unit-tiny-icon {
	background: url(https://static.wikia.nocookie.net/forwhomthealchemistexists_gamepedia_en/images/f/fc/Unit_border.png/revision/latest?cb=20210814111504) no-repeat;
	background-size: 66px;
	padding: 3px;
}

/* Added by Rangedz */
.responsive-img img {
    max-width: 100%; 
    height: auto;
}
.wikiButton {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wikiButton > button {
    background-color: skyblue;
    border: solid 2px black;
    border-radius: 3px;
    padding: 10px 30px;
    max-width: 100%;
    font-size: 14pt;
    font-weight: bold;
}
/* End of Added by Rangedz */

/* Added by cdaveb for TAC News Posts */

.tac-news .table {
  width: 80%;
  border: 2px solid gray;
  text-align: center;
  margin: 0 auto; }
  .table th, .table td {
    border: 1px solid #333333;
    vertical-align: middle;
    height: 2.0em; }

.tac-news .table__cell--title {
  font-weight: bold;
  color: #0cb9f2; }

.tac-news article,
.tac-news aside,
.tac-news details,
.tac-news figcaption,
.tac-news figure,
.tac-news footer,
.tac-news header,
.tac-news hgroup,
.tac-news nav,
.tac-news section,
.tac-news summary {
  display: block; }

.tac-news audio,
.tac-news canvas,
.tac-news video {
  display: inline-block; }

.tac-news audio:not([controls]) {
  display: none;
  height: 0; }

.tac-news template {
  display: none; }

.tac-news a {
  background: transparent; }
.tac-news a:focus {
    outline: thin dotted; }
.tac-news a:hover, a:active {
    outline: 0; }

.tac-news h1 {
  font-size: 2em;
  margin: 0.67em 0; }

.tac-news h2 {
  font-size: 1.5em;
  margin: 0.83em 0; }

.tac-news h3 {
  font-size: 1.17em;
  margin: 1em 0; }

.tac-news h4 {
  font-size: 1em;
  margin: 1.33em 0; }

.tac-news h5 {
  font-size: 0.83em;
  margin: 1.67em 0; }

.tac-news h6 {
  font-size: 0.75em;
  margin: 2.33em 0; }

.tac-news abbr[title] {
  border-bottom: 1px dotted; }

.tac-news dfn {
  font-style: italic; }

.tac-news mark {
  background: #ff0;
  color: #000; }

.tac-news code,
.tac-news kbd,
.tac-news pre,
.tac-news samp {
  font-family: monospace, serif;
  font-size: 1em; }

.tac-news pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

.tac-news q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

.tac-news q:before, .tac-news q:after {
  content: '';
  content: none; }

.tac-news small {
  font-size: 80%; }

.tac-news sub,
.tac-news sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

.tac-news sup {
  top: -0.5em; }

.tac-news sub {
  bottom: -0.25em; }

.tac-news img {
  border: 0; }

.tac-news svg:not(:root) {
  overflow: hidden; }

.tac-news figure {
  margin: 0; }

.tac-news fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

.tac-news legend {
  border: 0;
  padding: 0;
  white-space: normal; }

.tac-news table {
  border-collapse: collapse;
  border-spacing: 0; }

.tac-news {
  padding: 20px;
  border: 1px solid white;
  border-radius: 10px;
  background: #222222;
  color: #ffffff; }

.tac-news a {
  color: #ffffff; }

.tac-news ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.tac-news .text-fuchsia {
  color: #ff99ff; }

.tac-news .text-cyan {
  color: #88ffff; }

.tac-news .text-silver {
  color: #999999; }

.tac-news .text-lemon {
  color: #ffff55; }

.tac-news .text-lime {
  color: #d6ff58; }

.tac-news .text-white {
  color: #fff; }

.tac-news .text-rainbow--ios {
  font-weight: bold;
  display: inline-block;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #f42d33), color-stop(14%, #f45bc6), color-stop(28%, #fd9c47), color-stop(42%, #fffd31), color-stop(56%, #58ef8d), color-stop(70%, #88f3ff), color-stop(84%, #1e81fd), color-stop(100%, #b949f7));
  -webkit-background-clip: text;
  color: transparent;
  -webkit-animation: rainbow 10s linear infinite alternate; }

.tac-news .text-red {
  color: #ff3333; }

.tac-news .text-orange {
  color: #ff8800; }

.tac-news .text-yellow {
  color: #ffe200; }

.tac-news .text-green {
  color: #37ff0e; }

.tac-news .text-blue {
  color: #0cb9f2; }

.tac-news .text-pink {
  color: #ffabce; }

.tac-news .text-gray {
  color: #999999; }

.tac-news .text-left {
  text-align: left; }

.tac-news .text-center {
  text-align: center; }

.tac-news .text-right {
  text-align: right; }

.tac-news .text-fuchsia--light {
  color: #fff;
  text-shadow: -1px -1px 2px #ff99ff, 1px 1px 2px #ff99ff, 0 0 5px #ffccff, 0 0 10px #ffccff; }

.tac-news .text-cyan--light {
  color: #fff;
  text-shadow: -1px -1px 2px #44FFFF, 1px 1px 2px #44FFFF, 0 0 5px #77ffff, 0 0 10px #77ffff; }

.tac-news .text-silver--light {
  color: #fff;
  text-shadow: -1px -1px 2px #999999, 1px 1px 2px #999999, 0 0 5px #b3b3b3, 0 0 10px #b3b3b3; }

.tac-news .text-lime--light {
  color: #fff;
  text-shadow: -1px -1px 2px #99CC33, 1px 1px 2px #99CC33, 0 0 5px #add65c, 0 0 10px #add65c; }

.tac-news .text-lemon--light {
  color: #fff;
  text-shadow: -1px -1px 2px #ffff00, 1px 1px 2px #ffff00, 0 0 5px #ffff33, 0 0 10px #ffff33; }

.tac-news .text-red--light {
  color: #fff;
  text-shadow: -1px -1px 2px #ff3333, 1px 1px 2px #ff3333, 0 0 5px #ff6666, 0 0 10px #ff6666; }

.tac-news .text-orange--light {
  color: #fff;
  text-shadow: -1px -1px 2px #ff8800, 1px 1px 2px #ff8800, 0 0 5px #ffa033, 0 0 10px #ffa033; }

.tac-news .text-yellow--light {
  color: #fff;
  text-shadow: -1px -1px 2px #FFD700, 1px 1px 2px #FFD700, 0 0 5px #ffdf33, 0 0 10px #ffdf33; }

.tac-news .text-green--light {
  color: #fff;
  text-shadow: -1px -1px 2px #37ff0e, 1px 1px 2px #37ff0e, 0 0 5px #61ff41, 0 0 10px #61ff41; }

.tac-news .text-blue--light {
  color: #fff;
  text-shadow: -1px -1px 2px #0cb9f2, 1px 1px 2px #0cb9f2, 0 0 5px #3cc7f5, 0 0 10px #3cc7f5; }

.tac-news .text-pink--light {
  color: #fff;
  text-shadow: -1px -1px 2px #ff99cc, 1px 1px 2px #ff99cc, 0 0 5px #ffcce6, 0 0 10px #ffcce6; }

.tac-news .text-violet--light {
  color: #fff;
  text-shadow: -1px -1px 2px #8A2BE2, 1px 1px 2px #8A2BE2, 0 0 5px #a358e8, 0 0 10px #a358e8; }

.tac-news .text-title {
  color: #fff;
  font-weight: 600;
  margin: 5px 0 2px;
  display: block;
  text-shadow: 0 0 5px #3cc7f5, 0 0 10px #3cc7f5; }

.tac-news .text-silver--light {
  color: #fff;
  display: block;
  text-shadow: -1px -1px 2px #999999, 1px 1px 2px #999999, 0 0 5px #3cc7f5, 0 0 10px #3cc7f5; }

.tac-news .anim-blink {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

.tac-news .anim-blink--half {
  animation-name: fadeInHalf;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

.tac-news .anim-pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

.tac-news .image-box {
  display: block;
  text-align: center;
  width: 100%;
  margin: 14px auto; }
  .image-box img {
    width: 300px;
    height: auto; }

.tac-news .line--silver {
  margin-top: 3px;
  margin-bottom: 10px;
  width: 88%;
  height: 1px;
  position: relative;
  background: -webkit-linear-gradient(left, rgba(179, 220, 237, 0) 0%, #29b8e5 17%, #29b8e5 30%, rgba(188, 224, 238, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */ }
  .line--silver:after {
    position: absolute;
    top: 1px;
    left: 0;
    height: 1px;
    width: 100%;
    background: -webkit-linear-gradient(left, rgba(210, 229, 237, 0) 0%, #b3dced 17%, #29b8e5 30%, rgba(188, 224, 238, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    content: ''; }

.tac-news .box-text {
  background-color: #2a2a2a;
  border: 1px solid #575756;
  border-radius: 10px;
  padding: 8px; }

.tac-news a {
  text-decoration: none; }

.tac-news .whatsnew {
  opacity: 0; }

.tac-news .shake {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: shake; }

.tac-news .shake--symmetry {
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: shake-symmetry; }

.tac-news .minibanner {
  width: 320px;
  margin: 5px auto;
  padding: 0;
  text-align: center; }

.tac-news .minibanner__item {
  display: inline-block; }

.tac-news .minibanner__link {
  display: block; }

.tac-news .minibanner__thumb {
  width: 100px;
  height: auto; }

.tac-news .notice {
  width: 443px;
  display: block;
  margin: 10px auto 6px; }

.tac-news .emergency {
  opacity: 0; }

/* End of added by cdaveb for TAC News Posts */

/* Added for stat table styling */
table.statmap td {
    text-align: right; }

/* Added to force site notice info boxes to format properly */
.ambox-text {
    text-align: left;
}

/* Cargo styling support */
.cargoTable th {
  color:#000;
}

/* Gear styling support */
div.statRarityContainer {
    width: 100%;
    height: auto;
    clear: both;
}

div.statRarityContainer div.statRaritySection {
    width: 20%;
    float: left;
    height: auto;
}

div.abilityContainer {
    height: auto;
    width: 100%;
    clear: both;
}

div.abilityContainer div.abilitySection {
    float: left;
    width: 45%;
    height: auto;
    padding-left: 3%;
}

table.jobEquipmentList td {
    vertical-align: top;
}

table.jobEquipmentList td:first-child {
    vertical-align: middle;
}

/* river's fp css */
#mf-home {
    display:flex;
}

#fptopsection {
    display:flex;
    flex-direction:column;
    align-self:baseline;
}

#about-outer {
    display:flex;
}

#about-outer > .fpmaybercol,
#about-outer > .fpmaybercol > *{
    height:100%;
}

#fpflexsection {
    overflow-y:auto;
}

/* Added for Featured Unit Support */
.featured-unit, .featured-memento, .featured-gear {
	text-align: center;
	font-size: 13px;
}

.featured-unit .featured-unit-name, .featured-memento .featured-memento-name, .featured-gear .featured-gear-name {
	font-size: 120%;
	font-weight: 700;
}

/* Added for general purpose clearing of floats */
.clear {
	clear: both;	
}

/* Adding classes for styling of update schedule list */
.update-schedule .item-icon {
    width: 64px;
    height: 64px;
    vertical-align: top;
}

.update-schedule .unit-upgrade-entry {
    width: 29px;
    height: 29px;
    padding: 3px 32px 32px 3px;
}

.update-schedule .generic-item-entry {
    width: 57px;
    height: 57px;
    padding: 3.5px;
}

.update-schedule .master-entry {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 21px;
    pointer-events: none;
}

.update-schedule .upgrade-name {
    font-size: 0.7em;
    overflow: hidden;
    right: 0;
    bottom: 4px;
    line-height: 10px;
}

.update-schedule .job-upgrade-entry {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 29px;
    pointer-events: none;
}

.update-schedule .background-gate {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 29px;
    height: 29px;
    pointer-events: none;
}

.background-gate-pos-1 {
    background-position: 47.5% 0%;
}

.background-gate-pos-2 {
    background-position: 95% 0%;
}

.background-gate-pos-3 {
    background-position: 0% 47.5%;
}

.background-gate-pos-4 {
    background-position: 47.5% 47.5%;
}

.background-gate-pos-5 {
    background-position: 95% 47.5%;
}

.background-gate-pos-6 {
    background-position: 0% 95%;
}

.background-gate-pos-7 {
    background-position: 47.5% 95%;
}

/* Generic Info Box Styles for pages like items, mementos, gear */
.infobox {
  font-size: 12px;
  border: 1px solid #aaa;
  float: right;
  background: #eee;
  margin-left: 15px;
  width: 300px;
}

.infobox .heading {
  line-height: 1.25em;
  font-weight: 700;
  font-size: 140%;
  text-align: center;
  min-height: 64px;
  display: flex;
  background: goldenrod;
  justify-items: flex-start;
  flex-direction: row;
}

.infobox .infobox-icon {
  padding: 0.25rem;
  flex: 0 0 64px;
}

.infobox .name {
  justify-content: center;
  text-align: center;
  padding: 0.25rem;
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  margin: 0;
}

.infobox .wrapper {
  overflow: hidden;
  flex: 1 1 100%;
}

.infobox dl {
  display: grid;
  grid-template-columns: 100px 1fr;
}

.infobox dt {
  grid-column-start: 1;
  text-align: right;
  padding: 2px 8px 2px 3px;
  margin: 0 -2px 0 0;
  border-right: 2px solid #aaa;
}

.infobox dd {
  grid-column-start: 2;
  padding: 2px 7px;
  margin: 0;
  border-left: 2px solid #aaa;
}

img.fullwidth {
  max-width: 100%;
  height: auto;
}

table.storyline {
  max-width: 800px;	
}

/* Readability fix for table menus */
.ve-ui-tableLineContext > .oo-ui-iconWidget.oo-ui-iconElement.oo-ui-iconElement-icon {
  background-color: #666;
}

ol.references, ul.references, ol ol, ul ol, dl ol {
    list-style: decimal;
}

ol ul, ul ul, dl ul {
    list-style: disc;
}

/* Tabber style */
.portable-infobox.pi-theme-tabber {
	float: none !important;
}

.page-content {
    overflow-x: unset;
}

.mw-parser-output {
    overflow-x: unset;
}

/* Prevent footer content from floating */
.page-footer {
	clear: both;	
}

/* Added by Vivilid */
.lore {
	background-color: #F1F1F1;
	color: #34515E;
	font-size: 16px;
	font-family: Ebrima, Roboto, sans-serif;
	line-height: 1.8;
}

.lore0 {
	font-family: Ebrima, Roboto, sans-serif;
	text-align: left;
	line-height: 1.8;
}

.lore1 {
	background-color: #F7F7F7;
	font-size: 18px;
	border-bottom: 1px solid silver;
	font-family: Ebrima, Roboto, sans-serif;
	text-align: center;
	line-height: 1.8;
}

.lore2 {
	background-color: #F7F7F7;
	font-size: 18px;
	font-family: Ebrima, Roboto, sans-serif;
	line-height: 1.8;
}

.lore3 {
	background-color: #F7F7F7;
	font-size: 16px;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	font-family: Ebrima, Roboto, sans-serif;
	line-height: 1.8;
}

.lore4 {
	background-color: #F1F1F1;
	font-size: 16px;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	font-family: Ebrima, Roboto, sans-serif;
	line-height: 1.8;
}

.lore-dialogue-header {
	background-color: #F7F7F7;
	color: #34515E;
	font-size: 18px;
	border-bottom: 2px solid silver;
	font-family: Ebrima, Roboto, sans-serif;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.8;
}

.lore-dialogue-subheader {
	background-color: #F1F1F1;
	font-size: 16px;
	font-family: Ebrima, Roboto, sans-serif;
	border-bottom: 1px solid silver;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.8;
}

.lore-scene {
	background-color: #F1F1F1;
	border-bottom: 1px solid silver;
}

.lore-dialogue {
	color: #34515E;
	font-size: 16px;
	font-family: Ebrima, Roboto, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.8;
}

.lore-dialogue1 {
	font-size: 16px;
	font-family: Ebrima, Roboto, sans-serif;
	background-color: #F1F1F1;
	border-bottom: 1px solid silver;
	padding: 10px;
	line-height: 1.8;
}

.lore-dialogue2 {
	font-size: 16px;
	font-family: Ebrima, Roboto, sans-serif;
	background-color: #F1F1F1;
	border-bottom: 1px solid silver;
	padding: 20px;
	line-height: 1.8;
}

.lore-footer {
	background-color: #F7F7F7;
	border-top: 1px solid silver;
	border-bottom: 2px solid silver;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.8;
}