User:Blackwolfe/common.css

/* Background Image */
#mw-content-container {
    background:  url('https://static.miraheze.org/idleonwiki/2/24/NightDesertBG.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Logo image border */
#p-logo {
    background: #f8f9fa;
    padding: 1px 1px 0.8em 1px;
    border: #f8f9fa;
    border-style: solid;
    border-width: 1px 1px 0.2em;
}

/* Main Page */

.mainpage-body {           
    display: flex;
    flex-flow: row;
}

.mainpage-left {
    flex: 2.721;
    display: flex;
    flex-flow: column;
    margin-right: 0.9rem;
}

.mainpage-left > * {
    margin: 0 0 0.9rem;
}

.mainpage-right {
    flex: 0.999;
    display: flex;
    flex-flow: column;
    }

.mainpage-right > * {
    margin: 0 0 0.9rem;
}
.main-box {                /* MAIN BOX - the yellow box, container of all*/
    display: flex;
    border: 1px solid #b0ad9b;
    background: #e6e6e6;            /* distance from page borders  - middle value is distance from sides */
}
.main-box h3 {             /* Header over tiles */
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    text-decoration: none;
    padding: 0px;
    margin-bottom: 0.5em;     /* distance from tiles */
    margin-top: -0.5em;       /* and top border */
}
.mainpage-skills ul {
	flex: 1 1 auto;
    columns: 3;
    margin: 0;                /* deletes default space that bullet list has */
}
.mainpage-skills li {
    display: flex;
    /*margin-right: -10px; ----- space after bullet points*/
    margin-bottom: 0.3em;     /* space between rows */
}
.mainpage-skills li:hover img {
    transform: scale(1.2);
    transition: 0.2s ease-out;
}
.mainpage-skills li a:first-child {
    border-radius: 3px;
    width: 48px;
    height: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainpage-skills li a:last-child {
    flex: 1 1 auto; /* makes tiles stretch as much as possible */
    display: flex; /* allows positioning of content inside tiles */
    align-items: center; /* centers content inside tile */
    color: #444e5a;
    font-size: 1.1em;
    font-weight: bold;
    padding-left: 0.7em;
    text-decoration: none;
}
.mainpage-skills li:hover a:first-child {
    border-radius: 3px 0 0 3px;
}
.mainpage-skills li:hover a:last-child {
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0 3px 3px 0;
}
.tile-top {                                   /* SUBMAIN BOX - directly with tiles */
    width: 100%;
    padding: 1.5em 1.5em 1em 1.5em;           /* distance from borders */
}
/* ----------------------------------------------------- MOBILE --- */
@media only screen and (max-width: 499px) {
	  .mainpage-left {
    margin-right: 0;
    }
    .mainpage-skills li a:first-child {
    border-radius: 3px;
    padding: 3px 2px 1px 2px;
    width: 40px;
    height: 40px;
    }
    .mainpage-skills li a:last-child {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    color: #444e5a;
    font-size: 0.9em;
    font-weight: bold;
    padding-left: 0.2em;
    text-decoration: none;
    }
    .mainpage-skills li:hover img {
    transform: scale(1);
    transition: 0;
    }
    .tile-top {
    width: 100%;
    padding: 1.5em 0.5em 1em 0.5em;           /* distance from borders */
    }
    .tile-halves {
    display: flex;
    flex-flow: row wrap;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
    }
}
/* ------------------------------------------- INDIVIDUAL SKILL COLORS --- */
.skill-mining a:first-child {
    background: #d2b244;
}
.skill-mining:hover a:last-child {
    background: #b69213;
}
.skill-choppin a:first-child {
    background: #748d36;
}
.skill-choppin:hover a:last-child {
    background: #4c6215;
}
.skill-smithing a:first-child {
    background: #878787;
}
.skill-smithing:hover a:last-child {
    background: #616161;
}
.skill-fishing a:first-child {
    background: #3e8e9a;
}
.skill-fishing:hover a:last-child {
    background: #1a6671;
}
.skill-catching a:first-child {
    background: #8d6a36;
}
.skill-catching:hover a:last-child {
    background: #624a15;
}
.skill-alchemy a:first-child {
    background: #6274ab;
}
.skill-alchemy:hover a:last-child {
    background: #304791;
}

/* World banners (couldn't make .banner-image work, using style instead) */
.banner-image {
  position: relative;
  border-radius: 0.4em;
  max-width: 100%;
  overflow: hidden;
  float: left;
  margin: 0 0 3px;
}

.banner-text {
  position: absolute;
  bottom: 10px;
  left: 20px;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 35px;
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
}

.header-text {
  position: absolute;
  bottom: 2px;
  left: 20px;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 18px;
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
}

/* Table Styling*/
/* Alchemy */

.bubble-table {
  border: 1px solid #000;
  border-radius: 0.7em;
  background-color: #f6f6f6;
  font-size: 120%;
  color: #000;
  width: 100%;
  margin: auto;
  overflow:hidden;
}

.bubble-table th.name {
	width: 15%;
	padding: 0 3px 0 3px;
	text-align: center;
	font-weight: bold;
}

.orange-cauldron tr:nth-child(odd){
  background-color: #ffefcc;
}

.green-cauldron tr:nth-child(odd){
  background-color: #ccffd0;
}

.purple-cauldron tr:nth-child(odd){
  background-color: #fcccff30;
}

.yellow-cauldron tr:nth-child(odd){
  background-color: #ffffcc;
}

/* Bestiary */

.bestiary-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.bestiary-cell {
  display: flex;
  align-items: center;
  float: left;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0.4em;
  min-height: 120px;
  margin: 1px;
}

.bestiary-cell:hover {
  border: 1px solid #000;
  background-color: #e6e6e6;
}

.bestiary-cell table {
	line-height: 0;
}

.bestiary-cell p {
  text-align: center;
}

/* -------------------------Infobox  */
.infobox {
    border: 1px solid #000;
    background: #e6e6e6;
    border-radius: 0.7em;
    font-size: 120%;
    color: #000;
    margin: 0 0 1em .5em;
    padding: 0.1em;
    float: right;
    clear: right;
    width: 30%;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th.header {
    background: #916699;
    color: #000;
    font-size: 120%;
    font-weight: bold;
    padding: 0.5em;
    border-radius: .4em .4em 0 0;
    text-align: center;
    width: 20em;
}
.infobox th.subheader {
	text-align: center;
    background: #916699;
    width: 20em;
    padding: 0.2em;
    font-weight: bold;
}
.infobox th {
    vertical-align: top;
    background: #c0b3cc;
    text-align: left;
    padding: 0.2em;
    padding-left: 0.4em;
    width: 7.5em;
}
.infobox td {
    vertical-align: top;
}

/*----------------------------Droptable */
.droptable{
	width: 60%;
}
.droptable th.header {
    background: #916699;
    color: #000;
    font-size: 120%;
    font-weight: bold;
    border-radius: .4em .4em 0 0;
    text-align: center;
}
.droptable th.subheader {
	text-align: center;
    background: #916699;
    font-weight: bold;
}

.droptable tr:nth-child(odd){
  background-color: lightgrey;
}

.navigation{
	width: 60%;
}
/* -------------------------------------------------- TOC */

.toc {
	float:right;
    background-color: #e6e6e6;
    border-radius: 10px 10px 10px 10px;
    border: 0.5px black solid;
    margin: 0 0 0 0;
	padding: 0.5em;
}

.toc .toctitle {    
	text-align: center; 
} 
.toc .toctitle h2 {
    font-weight: bold; 
} 

.tocnumber { display: none; }

/* End of TOC */

.classimg img {
width: auto;
height: 50px;
}

.transparent
{background: transparent;
}

.gameinfobox {
    border: 1px solid #000;
    background: #e6e6e6;
    border-radius: 0.7em;
    font-size: 100%;
    color: #000;
    margin: 0 0 1em .5em;
    padding: 0.1em;
    float: right;
    clear: right;
    width:30%;
}

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