Common.css

@font-face {
  font-family: 'FontAwesome';
  src: local('FontAwesome'), local('FontAwesome'), url(/media/hydra/fonts/FontAwesome.otf) format('opentype');
}

/* Hide main page header */
body.page-ARK_Survival_Evolved_Wiki h1.firstHeading {
    display:none;
}

/* 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;
}
/* end community portal sections */

table .number {
  text-align: right;
}

/* no external link icon for internal links */
#content a.external[href^="http://ark.gamepedia.com"], #content a.external[href^="https://ark.gamepedia.com"], #content a.external[href^="//ark.gamepedia.com"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding-right: 0;
}

/* Gamepedia fixes */
.ghost { color: #666666; }

/* link-spanner */
.link-spanner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

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

/* Creature Region Map */
.cr-region-map-map img{
  filter: sepia(60%) grayscale(30%);
}
.cr-region-map-marker{
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  border-radius: 2px;
}
.cr-region-map-markercave{
  border: 1px solid black;
}

.stripes {
 background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 5px,
  rgba(0, 0, 0, 0.3) 5px,
  rgba(0, 0, 0, 0.3) 10px
  );
}

.cr-region-map-very-common{
  filter: hue-rotate(120deg) brightness(400%);
}
.cr-region-map-common{
  filter: hue-rotate(78deg) brightness(400%);
}
.cr-region-map-uncommon{
  filter: hue-rotate(60deg) brightness(400%);
}
.cr-region-map-very-uncommon{
  filter: hue-rotate(48deg) brightness(400%);
}
.cr-region-map-rare{
  filter: hue-rotate(24deg) brightness(400%);
}

.cr-region-map-cl-very-common{
  background-color: hsl(120,100%,60%);
}
.cr-region-map-cl-common{
  background-color: hsl(78,100%,60%);
}
.cr-region-map-cl-uncommon{
  background-color: hsl(60,100%,63.3%);
}
.cr-region-map-cl-very-uncommon{
  background-color: hsl(48,100%,63.3%);
}
.cr-region-map-cl-rare{
  background-color: hsl(30,100%,56.7%);
}
.cr-region-map-cl-very-rare{
  background-color: hsl(0,100%,56.7%);
}
.cr-region-map-cl-unknown{
  background-color: #ccc;
}

/*** spawning-maps, svg ***/
.spawningMap-map {
  filter: sepia(60%) grayscale(30%);
}

.spawningMap-deuteranopia.spawningMap-map,
.spawningMap-tritanopia.spawningMap-map {
  filter: grayscale(90%) contrast(80%);
}

.spawningMap-very-common {
  fill: #0F0;
  background-color: #0F0;
}

.spawningMap-common {
  fill: #B2FF00;
  background-color: #B2FF00;
}

.spawningMap-uncommon {
  fill: #FF0;
  background-color: #FF0;
}

.spawningMap-very-uncommon {
  fill: #FC0;
  background-color: #FC0;
}

.spawningMap-rare {
  fill: #F60;
  background-color: #F60;
}

.spawningMap-very-rare {
  fill: #F00;
  background-color: #F00;
}

.spawningMap-deuteranopia .spawningMap-very-common {
  fill: #FFE126;
  background-color: #FFE126;
}

.spawningMap-deuteranopia .spawningMap-common {
  fill: #F3D467;
  background-color: #F3D467;
}

.spawningMap-deuteranopia .spawningMap-uncommon {
  fill: #D7C58B;
  background-color: #D7C58B;
}

.spawningMap-deuteranopia .spawningMap-very-uncommon {
  fill: #9090F4;
  background-color: #9090F4;
}

.spawningMap-deuteranopia .spawningMap-rare {
  fill: #3F3FD4;
  background-color: #3F3FD4;
}

.spawningMap-deuteranopia .spawningMap-very-rare {
  fill: #2C2CD4;
  background-color: #2C2CD4;
}

.spawningMap-tritanopia .spawningMap-very-common {
  fill: #00FED9;
  background-color: #00FED9;
}

.spawningMap-tritanopia .spawningMap-common {
  fill: #008D9D;
  background-color: #008D9D;
}

.spawningMap-tritanopia .spawningMap-uncommon {
  fill: #2B5B7B;
  background-color: #2B5B7B;
}

.spawningMap-tritanopia .spawningMap-very-uncommon {
  fill: #7C4284;
  background-color: #7C4284;
}

.spawningMap-tritanopia .spawningMap-rare {
  fill: #FF3068;
  background-color: #FF3068;
}

.spawningMap-tritanopia .spawningMap-very-rare {
  fill: #FF0422;
  background-color: #FF0422;
}

.spawningMap-legendBox {
  display: inline-block;
  border-radius: 2px;
  width: 1.3em;
  height: 1.3em;
  vertical-align: text-bottom;
  border: 1px solid gray;
}

/* Keyboard-Keys (Template:Key) */
kbd {
  font-family: monospace,Courier;
  color: black;
  background: linear-gradient(to right, #eaeaea 0%,#cecece 100%);
  border: 1px solid;
  border-color: #DDD #AAA #888 #CCC;
  border-radius: 2px;
  border-width: 1px 2px 3px 2px;
  padding: 0 .2em 0 .3em;
  text-shadow: 0 1px rgba(255,255,255,.5);
  white-space: nowrap;
}

kbd:after{
  content:"";
  border-right: 0.1em solid #eee;
  position: relative;
  right: -0.2em;
}

/* Survival of the Fittest */
.sotf-team {
  width: 20%;
  padding: 1em 1em 0 1em !important;
  background-color: #9cee93;
}

.sotf-team-left-dead,
.sotf-team-right-dead {
  background-color: #eeed93;
}

.sotf-team-both-dead {
  background-color: #e3a4a4;
}

.sotf-team-both-dead .sotf-image-left,
.sotf-team-both-dead .sotf-image-right,
.sotf-team-left-dead .sotf-image-left,
.sotf-team-right-dead .sotf-image-right {
  opacity: 0.3;
}

.sotf-team-both-dead a:first-child,
.sotf-team-both-dead a:last-child,
.sotf-team-left-dead a:first-child,
.sotf-team-right-dead a:last-child {
  text-decoration: line-through;
}

.sotf-image-left,
.sotf-image-right {
  display: inline-block;
  width: 74px;
  height: 74px;
  border: 1px solid #000000;
}

.sotf-image-left { background-position: left center; }
.sotf-image-right { background-position: right center; }

.tournamentlive {
background-color: #9cee93;
}

.tournamentdead {
background-color: #e3a4a4;
text-decoration: line-through;
}

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

/* Modifies interactive maps when siderail is present to prevent overlap. */
@media only screen and (min-width:1350px) and (max-width:1700px){
  body:not(.hide-ads) div.full-container > table {
    float:left !important;
    clear:both;
  }
  body:not(.hide-ads) div.legend-container {
    clear:both;
  }
}


/*for tabs on structure overview pages*/
.structureSelector{
    float:right;
 	max-width:28em;
    }
.structureSelector ul.tabbernav{
	width:100%;
    display: inline-block;
    margin:0 0 0 0;
    padding:3px 0;
    }


/*********************
/* Front page styles *
/*********************/
.fpmain {
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.fpbanner {
  border: 1px solid #82a8af;
  box-shadow: rgba(25, 35, 41, 1) 0 0.1em 0.5em;
  background: rgba( 0, 0, 0, .2 );
  color: #000000;
  margin: 0 5px 5px 5px;
  padding: 5px;
  min-height: 80px;
}

.fpbannertable {
  display: table;
  border: none;
  background: transparent;
  width: 100%; 
  min-height: 75px;
  margin: 0;
  padding: 5px;
}

.fpbannercell {
  display: table-cell; 
  text-align: center; 
  vertical-align: middle;
}

.fpbannerblock {
  border: none;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
  font-size: 132%;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
}

.fpmidsections {
  float: left;
  width: 100%;
  overflow: hidden;
}

.fpbox {
  border: 1px solid #82a8af;
  box-shadow: 0 2px 5px #687478;
  background: rgba(0, 0, 0, 0.10);
  color: #000000;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  overflow: auto;
}

.fpbox .mainheading {
  border: none;
  border-bottom: 1px solid #82a8af;
  color: #82a8af;
  font-size: 150%;
  font-weight: bold;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  overflow: auto;
}

.fpbox .heading {
  border: none;
  border-bottom: 1px solid #82a8af;
  color: #ffffff;
  font-size: 132%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  overflow: auto;
}

.fpmain .columns .leftcol {
  width: 100%;
  margin: 0;
  padding: 0;
}

.fpmain .columns .rightcol {
  width: 100%;
  margin: 0;
  padding: 0;
}

.fpsection1, .fpsection2, .fpsection3, .fpsection4 {
  float: left;
  clear: both; 
  width: 100%;
}

div.fp2columnonly, div.fp3columnonly {
  display: none; 
}

@media (min-width: 790px) {
  .fpsection1 {
    float: left;
    clear: none;
    width: 50%;
  }

  .fpmidsections {
    clear: none;
    float: right;
    width: 50%;
  }

  .fpsection4 {
    float: left;
    clear: none;
    width: 50%;
  }

  div.fp2columnonly {
    display: block; 
  }
}

@media (min-width: 990px) {
  .fpmain .columns .leftcol {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .fpmain .columns .rightcol {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 1390px) {
  .fpmidsections {
    clear: none;
    float: right;
    width: 66.667%;
  }

  .fpsection1 {
    clear: none;
    width: 33.333%;
  }

  .fpsection2 {
    clear: none;
    width: 50%;
  }

  .fpsection3 {
    clear: none;
    width: 50%;
  }
 
  .fpsection4 {
    clear: left;
    width: 33.333%;
  }

  div.fp2columnonly {
    display: none; 
  }

  div.fp3columnonly {
    display: block; 
  }
}

.fpbox.plain {
  border: none;
  box-shadow: none;
  background: transparent;
}

.fpimagelist ul {
  list-style-type: none;
  list-style-image: none;
}

.fpvideos {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

.fpvideo {
  display: inline-block;
  margin: 0 5px;
}

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

.fpbox + p > br {
  display:none;
}

/* Tweaks for infoboxes used withing tabbers */
.infobox-tabber {
  float:right;
}

.infobox-tabber .tabber {
  margin-left: 1em;
  margin-bottom: 0.5em;
}

.infobox-tabber .tabbertab {
  padding:0;
  border:0;
}

.infobox-tabber .infobox {
  margin:0;
}

.infobox-tabber .tabbertab > p:first-child,
.infobox-tabber .tabbertab > p:last-child{
  display:none;
}

.infobox-tabber .tabbernav {
  border-bottom:0;
}

/*  Tweaks for tables within tabbers */
.table-tabber {
  margin:1em 0;
}

.table-tabber .tabbernav {
  border-bottom:0;
  margin-bottom:2px;
}

.table-tabber .tabbertab {
  padding:0;
  border:0;
}

.table-tabber .tabbertab > table {
  margin:0;
}

.table-tabber .tabbertab > p:first-child,
.table-tabber .tabbertab > p:last-child{
  display:none;
}

/* Used by [[Template:CreatureTableHeader]] */
th span.long {
  display:initial;
}

th.long,
td.long {
  display:table-cell;
}

th span.short {
  display:none;
}

@media only screen and (max-width:1700px){
  body:not(.hide-ads) th span.long, 
  body:not(.hide-ads) th.long,
  body:not(.hide-ads) td.long {
    display:none;
  }
  body:not(.hide-ads) th span.short {
    display:initial;
  }
  table.cargo-creature-table th {
    font-size:80%;
  }

}

@media only screen and (max-width:1350px) {
  th span.long, 
  th.long,
  td.long  {
    display:none;
  }
  th span.short {
    display:initial;
  }
  table.cargo-creature-table th {
    font-size:60%;
  }
}