Common.css

/* For elements which only display in the mobile view */
.mobileonly {
    display: none;
}

/* CSS placed here will be applied to all skins */
@font-face {
  font-family: 'FontAwesome';
  src: local('FontAwesome'), local('FontAwesome'), url(/media/hydra/fonts/FontAwesome.otf) format('opentype');
}

/* copy to clipboard */
.copy-clipboard {
  background-color: white;
  font-family: Courier,monospace;
  padding: 0.2em;
}

.copy-clipboard button {
  padding: 0 0 0 1em;
  border: none;
  background: none;
  cursor: pointer;
  font-family: FontAwesome;
}

/* Infobox style */
.infobox {
  float: right;
  width: 23em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0.5em;
  padding: 2px;
  border: 1px solid #ffffff;
}

.infobox-table {
  width: 100%;
  padding: 0;
  border: 1px solid #ffffff;
}

.infobox-header {
  padding: 0.1em;
  font-size: 130%;
  text-align: center;
}

.infobox-centered {
  text-align: center;
}

.infobox-row {
  vertical-align: top;
}

.infobox-row-name {
  text-align: left;
  white-space: nowrap;
}

.infobox-spacer {
  height: 0.5em;
}

/* fake <h2> - looks identical but no edit link and doesn't show up in the ToC */
.fakeh2 {
  font-family: sans-serif;
  font-size: 1.5em;
  margin-top: 1em;
  line-height: 1.3;
  color: #000;
  font-weight: normal;
  margin-bottom: 0.25em;
  padding: 0;
  border-bottom: 1px solid #a2a9b1;
}

/* -------------------------- */
/* "ARKITEXURE"-STYLE INFOBOX */
/* Originally made by Sanctyl */
/* for Ark Wiki               */
/* -------------------------- */

/* arkitexure rounded borders */
.info-arkitex {
  border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -icab-border-radius: 10px; -o-border-radius: 10px; float:center;
}
.info-arkitex-left {
  border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; -khtml-border-radius: 10px 0 0 10px; -icab-border-radius: 10px 0 0 10px; -o-border-radius: 10px 0 0 10px; float:left;
}
.info-arkitex-right {
  border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -khtml-border-radius: 0 10px 10px 0; -icab-border-radius: 0 10px 10px 0; -o-border-radius: 0 10px 10px 0; float:right;
}

.info-unit-row {
  display:flex; flex-direction:row; align-items:top; min-width:402px; width:402px; max-width:402px; padding:0; margin:0; overflow:hidden;
}
.info-unit-comment { display:flex; align-items:left; font-size:11px !important; }
.info-unit-caption { text-align:center !important; padding:0 8px 0 8px !important; background:none !important; }

/* arkitexure cell, intended for one total column, 100% width */
.info-X1-100 {
  display:inline-block; min-width:396px; width:396px; max-width:396px; margin:1px; padding:5px 2px 5px 2px;
}
.info-masthead { display:flex !important; align-items:center; justify-content:center; min-height:38px; height:auto; font-size:24px; }
.info-column { display:flex !important; flex-direction:column; align-items:center; }
.info-sound-div { margin:5px 0 -5px 0; }

/* END "ARKITEXURE"-STYLE INFOBOX */

/* Display visual editor notice only in visual editor */
.oo-ui-popupWidget-popup div.ve-notice {
  display:block !important;
}
/* end Visualeditor notice */


/***************************
* Used by [[Template:Key]] *
****************************/
.key {
	display:inline-block;
	white-space:nowrap;
}

.key kbd {
  padding: 0.3em 0.5em; 
  margin-right:2px; 
  font-size:85%; 
  font-family:inherit; 
  font-style:normal;
  border-radius: .2em; 
}

/* Dark Wiki Variation */
.keysDark {
  color:black; 
  border: 1px solid rgb(170, 170, 170); 
  box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221); 
  background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238)); 
  background-color: rgb(249, 249, 249); 
}

/* Light Wiki Variation */
.keysLight {
  border:1px solid transparent;
  border-image:url(https://static.wikia.nocookie.net/pixark_gamepedia_en/images/5/52/Key.png/revision/latest); /*[[File:Key.png]]*/
  border-image-slice:15 fill;
  border-image-width:3px;
  background:none;
  box-shadow:none;
  text-shadow:none;
  color:#cefa0c;
}

/**************************
* End Template:Key styles *
***************************/

/* Allows the item ID table on [[Item IDs]] to fit with the siderail */
table.itemTable td:last-child {
  word-break:break-all;
}
/* end Item ID table */

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

#fptweets {
  min-height:calc(425px + 2.3em);
}

#fp-container {
	display: grid;
	grid-template-areas: "a" "b" "c" "d";
	grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
	#fp-container {
		grid-template-areas: "a a" "c b" "c b" "d d";
		grid-template-columns: 50% 50%;
	}
}
@media screen and (min-width:1350px) {
	#fp-container {
		grid-template-areas: "a b c" "d b c";
		grid-template-columns: 33.3% 33.3% 33.3%;
	}
}

.fp-section {
	display: flex;
	flex-wrap: wrap;
}

#fp-1 {
	grid-area: a;
}

#fp-2 {
	grid-area: b;
}

#fp-3 {
	grid-area: c;
}

#fp-4 {
	grid-area: d;
}

.fpbanner {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #505050;
    box-shadow: 0 2px 5px #505050;
    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;
}

.fpbox {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #505050;
    box-shadow: 0 2px 5px #505050;
    margin: 5px;
    padding: 5px;
    overflow: auto;
    width: calc(100% - 2px);
}

.fpbox .mainheading {
    border: none;
    border-bottom: 1px solid #505050;
    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 #505050;
    text-align: center;
    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;
}

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

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