Common.css

CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Clear the cache in Tools → Preferences
/* 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;
}

/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.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;
}

/*******************************
/* Responsive flex page layout *
/*******************************/
.rfpelements {
  display: flex;
  flex-flow: row wrap;
  margin: -5px;
}

.rfpshelf,
.rfpstack {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rfpblock {
  margin: 5px;
  padding: 3px 6px;
  flex: 0 0 calc( 100% - 10px );
  max-width: calc( 100% - 10px );
  text-align: center;
  box-sizing: border-box;
}

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

.rfpstack .rfpstack,
.rfpstack .rfpshelf,
.rfpshelf .rfpshelf,
.rfpshelf .rfpstack {
  flex: 1 0 auto;
  max-width: 100%;
}

.rfpstack .rfpblock,
.rfpshelf .rfpblock {
  flex: 1 0 auto;
  max-width: calc( 100% - 10px );
}

.rfpstack .rfpnoresize {
  flex: 0 0 auto;
}

@media (min-width: 820px) {
  .rfp100-50-67size,
  .rfp100-50-50size,
  .rfp100-50-33size {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .rfpblock.rfp100-50-67size,
  .rfpblock.rfp100-50-50size,
  .rfpblock.rfp100-50-33size {
    flex: 0 0 calc( 50% - 10px );
    max-width: calc( 50% - 10px );
  }
}

@media (min-width: 1440px) {
  .rfp100-100-67size,
  .rfp100-50-67size {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .rfpblock.rfp100-100-67size,
  .rfpblock.rfp100-50-67size {
    flex: 0 0 calc( 66.666667% - 10px );
    max-width: calc( 66.666667% - 10px );
  }

  .rfp100-100-50size,
  .rfp100-50-50size {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .rfpblock.rfp100-100-50size,
  .rfpblock.rfp100-50-50size {
    flex: 0 0 calc( 50% - 10px );
    max-width: calc( 50% - 10px );
  }

  .rfp100-100-33size,
  .rfp100-50-33size {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .rfpblock.rfp100-100-33size,
  .rfpblock.rfp100-50-33size {
    flex: 0 0 calc( 33.333333% - 10px );
    max-width: calc( 33.333333% - 10px );
  }

  .rfpshelf {
    flex-flow: row wrap;
  }

  .rfpshelf > .rfpstack {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .rfpshelf > .rfpblock {
    flex: 0 0 calc( 50% - 10px );
    max-width: calc( 50% - 10px );
  }

  .rfpshelf > .rfpstack.rfpkeepwide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .rfpshelf > .rfpblock.rfpkeepwide {
    flex: 0 0 calc( 100% - 10px );
    max-width: calc( 100% - 10px );
  }
}

/****************************
/* Responsive flex specials *
/****************************/
.rfptwitter {
  display: flex;
  flex-flow: column nowrap;
}

.rfptwitter .body,
.rfptwitter .body .twitter-timeline-wrapper {
  border: none;
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 410px;
}

.rfptwitter .body .twitter-timeline-wrapper iframe {
  border: none;
  width: auto !important;
  height: auto !important;
  flex: 0 0 400px;
}

@media (min-width: 820px) {
  .rfptwitter .body,
  .rfptwitter .body .twitter-timeline-wrapper,
  .rfptwitter .body .twitter-timeline-wrapper iframe {
    flex: 1 0 auto;
  }
}

.rfpblock div.slideboxlightshow, 
.rfpblock div.slideboxlightshow a {
  max-width: 100%;
  height: auto;
}

/******************************
/* Responsive flex appearance *
/******************************/
.rfpbox,
.rfpdesktopbox {
  border-radius: 3px;
  border: 1px solid #53a448;
  background: rgba(0, 0, 0, 0.5);
  color: #d5d5d5;
  margin: 5px;
  padding: 3px 6px;
}

.rfpblock .heading {
  border-bottom: 1px solid #53a448;
  color: #d5d5d5;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 132%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
}

/******************************************
/* Responsive flex documentation examples *
/******************************************/
.rfpdoclabel {
  border-radius: 3px;
  border: 1px solid #53a448;
  padding: 3px 6px;
  text-align: center;
}

.rfpdocexample {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  margin: 0 0 10px 0;
}

.rfpdocnarrow {
  border-radius: 3px;
  border: 1px solid #53a448;
  padding: 3px 0 0 0;
  width: 16.666667%;
  box-sizing: border-box;
}

.rfpdocmedium {
  border-radius: 3px;
  border: 1px solid #53a448;
  padding: 3px 0 0 0;
  width: 33.333333%;
  box-sizing: border-box;
}

.rfpdocwide {
  border-radius: 3px;
  border: 1px solid #53a448;
  padding: 3px 0 0 0;
  width: 50%;
  box-sizing: border-box;
}

.rfpdocelements {
  display: flex;
  flex-flow: row wrap;
}

.rfpdocshelf,
.rfpdocstack {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rfpdocblock {
  margin: 5px;
  padding: 3px 6px;
  flex: 0 0 calc( 100% - 10px );
  max-width: calc( 100% - 10px );
  text-align: center;
  box-sizing: border-box;
}

.rfpdocstack .rfpdocstack,
.rfpsdoctack .rfpdocshelf,
.rfpdocshelf .rfpdocshelf,
.rfpdocshelf .rfpdocstack {
  flex: 1 0 auto;
  max-width: 100%;
}

.rfpdocstack .rfpdocblock,
.rfpdocshelf .rfpdocblock {
  flex: 1 0 auto;
  max-width: calc( 100% - 10px );
}

.rfpdocstack .rfpdocnoresize {
  flex: 0 0 auto;
}

.rfpdocmedium .rfpdoc100-50-67size,
.rfpdocmedium .rfpdoc100-50-50size,
.rfpdocmedium .rfpdoc100-50-33size {
  flex: 0 0 50%;
  max-width: 50%;
}

.rfpdocmedium .rfpdocblock.rfpdoc100-50-67size,
.rfpdocmedium .rfpdocblock.rfpdoc100-50-50size,
.rfpdocmedium .rfpdocblock.rfpdoc100-50-33size {
  flex: 0 0 calc( 50% - 10px );
  max-width: calc( 50% - 10px );
}

.rfpdocwide .rfpdoc100-100-67size,
.rfpdocwide .rfpdoc100-50-67size {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.rfpdocwide .rfpdocblock.rfpdoc100-100-67size,
.rfpdocwide .rfpdocblock.rfpdoc100-50-67size {
  flex: 0 0 calc( 66.666667% - 10px );
  max-width: calc( 66.666667% - 10px );
}

.rfpdocwide .rfpdoc100-100-50size,
.rfpdocwide .rfpdoc100-50-50size {
  flex: 0 0 50%;
  max-width: 50%;
}

.rfpdocwide .rfpdocblock.rfpdoc100-100-50size,
.rfpdocwide .rfpdocblock.rfpdoc100-50-50size {
  flex: 0 0 calc( 50% - 10px );
  max-width: calc( 50% - 10px );
}

.rfpdocwide .rfpdoc100-100-33size,
.rfpdocwide .rfpdoc100-50-33size {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.rfpdocwide .rfpdocblock.rfpdoc100-100-33size,
.rfpdocwide .rfpdocblock.rfpdoc100-50-33size {
  flex: 0 0 calc( 33.333333% - 10px );
  max-width: calc( 33.333333% - 10px );
}

.rfpdocwide .rfpdocshelf {
  flex-flow: row wrap;
}

.rfpdocwide .rfpdocshelf > .rfpdocstack {
  flex: 0 0 50%;
  max-width: 50%;
}

.rfpdocwide .rfpdocshelf > .rfpdocblock {
  flex: 0 0 calc( 50% - 10px );
  max-width: calc( 50% - 10px );
}

.rfpdocwide .rfpdocshelf > .rfpdocstack.rfpdockeepwide {
  flex: 0 0 100%;
  max-width: 100%;
}

.rfpdocwide .rfpdocshelf > .rfpdocblock.rfpdockeepwide {
  flex: 0 0 calc( 100% - 10px );
  max-width: calc( 100% - 10px );
}

.InvisibleAlignmentBox{
/* Used for Creature_Infobox_2 */
	float:right;
	background-color: #00000000; 
	border: none; 
	padding: 0px;
	width: 275px;
}

.wds-tabs__wrapper.with-bottom-border {
  margin-bottom: -25px;
  margin-left: 5px;
}

.theme-fandomdesktop-light .fandom-community-header__background.cover { background-position-y: 35% }

.fandom-community-header__background.cover { background-position-y: 60% }

/* fixing noticebox height */
.page-content p {
  margin: unset;
}

/* update wikitable styles */
.wikitable div.floatright img {
  margin-left: -19px;
}

/* Popups styling */
.mwe-popups.mwe-popups-is-not-tall footer {
width: 100%;
}

/* fixing toc margin */
div.toc, div#toc {
    margin: 24px 0 24px 0;
}

/* sticky header link styles */
.fandom-sticky-header a:link{
  color: #ffffff;
}

.theme-fandomdesktop-light .white-image {
    filter: invert(1);
}