Common.css: Difference between revisions

Latest revision as of 20:41, 23 November 2025

/* The CSS added here will affect both desktop and mobile users. Before finishing, please ensure that the style works well on all devices.

This CSS page contains formatting for in-article elements like tables and images. If you're looking for formatting for the whole site, check https://grousehouse.wiki/MediaWiki:Foreground.css!

Table of Contents (you can search the page for these titles to jump straight there):
• Article warnings
    • Crowdsource warning
• Basic text tables and lists
    • Basic list
    • Basic list with inside borders
    • List with multiple items on each row
    • List with alternating color rows
    • Information table with alternating color rows
• Images and image grids
    • Large image grid
    • Small item grid
    • Image grid with alternating color cells
• Universal tables and tools
    • Explore encounter table
    • Crafting recipe table
    • Achievements box
    • Individual applicator preview boxes
    • NPC profile box
    • Spoiler button
    • Grouse tips
    • Storyline elements
    • Battle enemy tables
• Shop content
    • Shopkeeper table
    • Shop content boxes
• Lunar event-specific tables
    • Monthly lunar applicator tables
• Matchmaker event-specific tables
    • Dateable list box (not currently in use - intended for lists about who each gender is able to date)
    • Dateable profile box
• Fayre event-specific tables
    • Crop detail tables
• Decor preview modal
• Befriending tables
• Color scales
*/

/* Article warnings */

/* Crowdsourcing warning {{Crowdsourcing}} */

.crowdsource-warning {
background-color: #d4d4d4;
  width: 90%;
  margin: auto;
}

.warningtitle {
text-align: center;
  background-color: #b3b3b3;
  padding: 5px;
  font-weight: bold;
}

.warning-body {
    padding: 10px;
}

.grousetipimage {
  padding: 10px;
  width: 10%;
}

@media only screen and (max-width: 40em) {
.grousetipimage {
  padding: 10px;
  width: 20%;
}
}

/* Basic text tables and lists */

/* Basic list */

table.TB-basic-list {
    width: 100%;
    background-color: #c3c3c3;
    border: 1px solid black;
    border-collapse: collapse;
}

table.TB-basic-list th {
    background-color: black;
    color: white;
    padding: 5px;
}

table.TB-basic-list tr {
    border-top: 1px solid black;
}

table.TB-basic-list td {
    padding: 5px;
}

/* Basic list with inside borders */

table.TB-bordered-list {
    width: 40%;
    background-color: #c3c3c3;
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
}

table.TB-bordered-list th {
    background-color: black;
    color: white;
    padding: 5px;
}

table.TB-bordered-list td {
    padding: 5px;
    border: 1px solid black;
}

/* List with multiple items on each row */

table.rowlist {
    background-color: #d4d4d4;
    width: 100%;
}

table.rowlist th {
    background-color: #acacac;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

tr.rowlistsubheader {
    text-align: center;
    background-color: #c4c4c4 !important;
    font-weight: bold;
}

td.rowlistitems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.rowlistitem {
    margin-left: 1em;
    background-color: #c4c4c4;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* List with alternating color rows */

table.altlist {
    width: 60%;
    margin: auto;
    border: 1px solid gray;
}

.altlist tr:nth-of-type(odd) {
    background-color: #c6c6c6;
}

.altlist tr:nth-of-type(even) {
    background-color: #d4d4d4;
}

table.altlist td {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Information table with alternating color rows */

.infotable {
border: 1px solid black;
}

.infotable td {
padding: 5px;
}

.infotable td.infoheader {
background-color: black;
color: white;
}

.infotable tr:nth-of-type(even){
background-color: #f5f5f5;
}

.infotable tr:nth-of-type(odd){
background-color: #fff;
}

/*  Images and image grids */

/* Large image grid */

.imagegrid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gridimage {
    padding: 10px;
}

.gridimage img {
    height: 150px;
    width: auto;
    border-radius: 10px;
    border: 1px solid black;
}

/* Small item grid {{ItemGrid}} {{ItemGridItem}} */

div.itemgrid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    margin-right: auto;
}

@media only screen and (max-width: 40rem) {

div.griditem {
    width: 10em !important;
}

}

div.griditem {
    background: #d4d4d4;
    margin-right: 15px;
    border: 1px solid gray;
    border-radius: 10px;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 15em;
}

div.griditem.decoritem {
    background: #d4d4d4;
    margin-right: 10px;
    border: 1px solid gray;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 10em;
border-radius: 0;
}

div.griditem.decoritem div.item-name {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  height: 4em;
  font-size: 11px;
  width: 13em;
  display: table-cell;
  vertical-align: middle;
}

div.griditem.decoritem div.item-image {
background: white;
}

div.item-image {
    padding: 10px;
    width: auto;
cursor: pointer;
}

div.item-image img {
    max-width: 20vw;
    height: auto;
    width: auto;
}

/* Image grid with alternating color cells */

.altimagegrid {
border: none;
text-align: center;
}

.altimagegrid td {
padding: 5px;
border: 1px solid black;
}

.altimage1 {
background-color: #f5f5f5;
}

.altimage2 {
background-color: #fff;
}

/* Universal tables and tools */

/* Table Type A */

@media only screen and (max-width: 40rem) {
.tableA {
width: 100% !important;
font-size: 10px;
}
}

.tableA th {
padding: 10px;
font-weight: bold;
background: #648a9b;
color: white;
text-align: left;
}

.tableA td {
padding: 10px;
text-align: center;
}

.tableA tr {
border-bottom: 1px solid black;
}

.tableA tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableA tr:nth-of-type(even) {
    background-color: #fff;
}

.tableA tr:first-of-type th {
background: #3a5f70 !important;
text-align: center;
}

/* Table Type B */

@media only screen and (max-width: 40rem) {
.tableB {
width: 100% !important;
font-size: 10px;
}

.tableB li {
font-size: 10px;
}
}

.tableB {
text-align: center;
}

.tableB tr {
border-bottom: 1px solid black;
}

.tableB td {
padding: 10px;
}

.tableB th {
background:#3a5f70;
color: white;
text-align: center;
padding: 10px;
}

.tableB tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableB tr:nth-of-type(even) {
    background-color: #fff;
}

.tableB th.subheaderB {
background:#648a9b;
color: white;
text-align: center;
padding: 10px;
}

/* Table Type C */

@media only screen and (max-width: 40rem) {
.tableC {
width: 100% !important;
font-size: 10px;
}
}

.tableC td {
padding: 10px;
text-align: center;
}

.tableC tr {
border-bottom: 1px solid black;
}

.tableC tr:nth-of-type(even) td:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableC tr:nth-of-type(even) td:nth-of-type(even) {
    background-color: #fff;
}

.tableC tr:nth-of-type(odd) td:nth-of-type(odd) {
    background-color: #fff;
}

.tableC tr:nth-of-type(odd) td:nth-of-type(even) {
    background-color: #f4f4f4;
}

.tableC th {
background:#3a5f70;
color: white;
text-align: center;
padding: 10px;
}

.tableC th.subheaderC {
background:#648a9b;
color: white;
text-align: center;
padding: 10px;
}

/* Table Type D */

@media only screen and (max-width: 40rem) {
.tableD {
width: 100% !important;
font-size: 10px;
}
}

.tableD th {
padding: 10px;
font-weight: bold;
background: #d5d5d5;
color: black;
text-align: center;
}

.tableD td {
padding: 10px;
text-align: center;
}

.tableD tr {
border-bottom: 1px solid black;
}

.tableD tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableD tr:nth-of-type(even) {
    background-color: #fff;
}

.tableD tr:first-of-type th {
background: #3a5f70 !important;
text-align: center;
color: white;
}

/* Flex box table */

@media only screen and (max-width: 40rem) {
.flexTable {
width: 100% !important;
font-size: 10px;
}
}

.flexTable th {
padding: 10px;
font-weight: bold;
background: #3a5f70;
color: white;
text-align: center;
}

.flexTable td {
padding: 10px;
text-align: center;
}

.flexTable tr {
border-bottom: 1px solid black;
}

.flexSubheader {
padding: 10px;
font-weight: bold;
color: black;
text-align: center;
}

.flexGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.baseHeadshot {
  width: 150px;
  border: 1px solid black;
  margin: 0.5em;
}

.baseImage {
  margin-bottom: -1.2em !important;
}

.baseName {
  background-color: #d5d5d5;
  padding: 5px;
  font-weight: bold;
}

.baseObtention {
  position: relative;
  top: -0.5em;
  right: -7em;
  background: #fff;
  width: 75px !important;
  border-radius: 5px;
  border: 1px solid black;
  font-size: 10px;
}

/* Explore encounter table */

@media only screen and (max-width: 40rem) { 
table.explore_encounter {
    width: 100% !important;
}
}

table.explore_encounter {
    width: 90%;
    margin: auto;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
}

table.explore_encounter td {
    padding: 10px;
    border: 1px solid black;
}

tr.encounter_options td:first-of-type {
    background-color: #b4b4b4;
}

tr.encounter_options td {
    background-color: #d1d1d1;
}

button.b_encountertime {
    background: none;
    padding: 5px;
}

/* Achievement box */

table.achievement {
    background-color: #f4f4f4;
    width: 25vw;
    margin: 0.5em;
    height: 150px;
}

@media only screen and (max-width: 40em) {
table.achievement {
    background-color: #d4d4d4;
    width: 100%;
}
}

.achievement_icon {
    background-color: #648a9b;
text-align: center;
}

tr.achievement-text td {
    padding: 5px;
text-align: left;
}

.achievementName {
  background-color: #3a5f70;
  font-weight: bold;
  color: white;
  height: 50px;
padding-left: 1em;
}

/* Individual applicator preview boxes */

table.applicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.applicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

td#app_name {
    background: #9e9e9e;
}

td#app_genetics {
    background: #bcbcbc;
}

td#app_obtention {
    background: #bcbcbc;
}

td#markingapp_preview img {
    width: 100%;
    height: auto;
}

table.markingapplicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.markingapplicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

table.clawleathersapplicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.clawleathersapplicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

table.clawleathersapplicatorpreview td#app_preview img {
    width: 100%;
    height: auto;
}

table.applicatorpreview td#app_preview img {
    width: 100%;
    height: auto;
}

td#app_explorepreview {
    border-top: none;
}

/* NPC Profile Box */

table.npc {
background-color: #d4d4d4;
  border-collapse: collapse;
  width: 75%;
  margin: auto;
}

table.npc p {
  font-size: 14px;
}

@media only screen and (max-width: 40em) {
table.npc {
width: 100%;
}

table.npc td.npc-bio div {
    font-size: 12px !important;
  }

table.npc p {
font-size: 12px;
}

.npc-bio div {
  height: 150px !important;
  overflow-y: auto;
}

.npc-gallery div {
  height: 150px !important;
  overflow-y: auto;
}
}

td.npc-name {
background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  border-right: none !important;
  width: 40%;
  color: white;
text-align: center;
}

td.npc-image {
text-align: center;
  padding: 10px;
  border-bottom: none !important;
  background: #b7b7b7;
width: 40%;
}

tr.npc-pronouns td {
    text-align: center;
    padding: 5px;
font-style: italic;
border-top: none !important;
background: #919191;
width: 20%;
}

.npc-bio div {
  height: 350px;
  overflow-y: auto;
}

td.npc-bio {
padding: 10px;
}

.npc-imagegallery {
  border-top: 5px solid #3a5f70;
}

.npc-gallery {
  background: #dfdfdf;
}

.npc-gallery div {
  text-align: center;
  height: 300px;
  overflow-y: auto;
}

.npc-gallery div img {
  margin: 0.5em;
}

/* Spoiler button */

.spoilerButton p {
    background-color: #acacac;
    width: 40%;
    margin: 5px auto;
    padding: 10px;
    border-radius: 10px;
}

.spoilerButton p:hover {
    background-color: #929292;
cursor: pointer;
}

.spoilerContent {
    padding: 10px;
}

/* Grouse Tips */

table.grousetip {
    width: 100%;
    background: #f0f0f0;
    border: 1px solid gray;
    border-collapse: collapse;
}

table.grousetip td {
    padding: 10px;
}

td.grousetipheader {
    background-color: #c7c7c7;
}

/* Storyline Elements */

/* Page Boxes */

.storylinel {
    width: 100%;
    background: #d4d4d4;
    display: inline-block;
margin-bottom: 0px;
}

.storyliner {
    width: 100%;
    background: #d4d4d4;
    display: inline-block;
margin-bottom: 0px;
}

.storylinel span[typeof="mw:File"] {
    float: left;
    margin-right: 1.5em;
}

.storyliner span[typeof="mw:File"] {
    float: right;
    margin-left: 1.5em;
}

.storylinel .text {
    padding: 2em;
}

.storyliner .text {
    padding: 2em;
}

@media only screen and (max-width: 56.25rem) {

.storylinel span[typeof="mw:File"] {
width: 50%;
}

.storyliner span[typeof="mw:File"] {
width: 50%;
}

.storylinel .text {
    font-size: 10px;
}

.storyliner .text {
    font-size: 10px;
}

.storylinel .text p {
    font-size: 10px;
}

.storyliner .text p {
    font-size: 10px;
}

.storybluebutton {
font-size: 10px;
}

.storygreenbutton {
font-size: 10px;
}
}

/* Storyline Buttons */

.storybluebutton {
background:#057cb3;
padding: 0.5em;
    color: #fff;
    width: auto;
    text-align: center;
font-weight: bold;
    margin-right: 1em;
margin-top: 1em;
}

.storygreenbutton {
background:#78a64b;
padding: 0.5em;
    color: #fff;
    width: auto;
    text-align: center;
font-weight: bold;
    margin-right: 1em;
margin-top: 1em;
}

/* Battle enemy tables */

table.enemy {
    background-color: #d4d4d4;
    border: 1px solid gray;
font-size: 12px;
}

table.enemy td.enemyname {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid gray;
font-size: 12px;
}

table.enemy td.enemyimage {
    text-align: center;
    width: 60%;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background: white;
}

table.enemy td.enemyimage .encTimeParamters {
top: -1rem;
}

table.enemy.lunarenemy img[src*="night"] {
    margin-bottom: 1em;
}

table.enemy td.icons {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid gray;
    text-align: right;
}

table.enemy td.icons img {
    max-height: 2em;
    margin-left: 0.5em;
}

table.enemy td.icons img.openimage {
cursor: pointer;
}

table.enemy td.icons img.opponenttype {
cursor: help;
}

table.enemy td.enemylevels {
    border-bottom: 1px solid gray;
    height: 3vh;
    padding-left: 10px;
    font-weight: bold;
    background: #a1a1a1;
    text-align: center;
font-size: 12px;
}

table.enemy td.enemymodifiers, table.enemydrops td.enemymodifiers {
  height: 100%;
font-size: 12px;
}

table.enemy div.tableflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

table.enemy div.modifier, table.enemydrops div.modifier {
background: #b4b4b4;
  text-align: center;
  margin: 0.5em;
  margin-bottom: 0;
width: 8vw;
max-width: 85px;
min-width: 50px;
font-size: 12px;
}

table.enemy .modifierImg, table.enemy .modifierImg {
padding: 5px;
}

table.enemy div.modifier.modifiernone {
}

table.enemy div.modifier img, table.enemydrops div.modifier img {
width: 60px;
}

.modifierName {
  background: #a1a1a1;
font-size: 12px;
}

table.enemy td.enemymoves {
    border-bottom: 1px solid gray;
    padding-left: 10px;
    height: 15vh;
    vertical-align: top;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}

table.enemy td.enemymoves p {
font-size: 12px;
}

table.enemy td.enemybiomes {
    border-right: 1px solid gray;
    border-bottom: 5px solid #3a5f70;
}

table.enemy td.enemybiomes div.biome {
    width: 8rem;
    text-align: center;
    margin: 0.5em;
border-radius: 5px;
font-size: 0.8rem;
  padding: 0.2em;
}

table.enemy td.enemybiomes div.biome.grasslands  {
background: #9ba884;
}

table.enemy td.enemybiomes div.biome.deciduous  {
background: #6a8a57;
}

table.enemy td.enemybiomes div.biome.mountains  {
background: #778a93;
}

table.enemy td.enemybiomes div.biome.riparian  {
background: #6e9b95;
}

table.enemy td.enemybiomes div.biome.prairie  {
background: #bfad8c;
}

table.enemy td.enemybiomes div.biome.coniferous  {
background: #739168;
}

table.enemy td.enemybiomes div.biome.taiga  {
background: #8a8961;
}

table.enemy td.enemybiomes div.biome.desert  {
background: #c49380;
}

table.enemy td.enemybiomes div.biome.swamp  {
background: #909d60;
}

table.enemy td.enemybiomes div.biome.tundra  {
background: #6c7999;
}

table.enemy td.enemybiomes div.biome.glacier  {
background: #8bb2c4;
}

table.enemy td.enemybiomes div.biome.rainforest  {
background: #b7809c;
}

table.enemy td.enemystats {
border-bottom: 1px solid gray;
  height: 100%;
}

table.enemy td.enemystats div.stat {
    width: 8rem;
    text-align: center;
    margin: 0.5em;
border-radius: 5px;
font-size: 0.8rem;
  padding: 0.2em;
}

table.enemy td.enemystats div.stat.strength {
    color: #682323;
    background-color: #ca8282;
}

table.enemy td.enemystats div.stat.speed {
    color: #513f71;
    background-color: #9582b5;
}

table.enemy td.enemystats div.stat.agility {
    color: #625e2b;
    background-color: #c6bc5f;
}

table.enemy td.enemystats div.stat.wisdom {
    color: #235554;
    background-color: #63b3b0;
}

table.enemy td.enemystats div.stat.smarts {
    color: #255924;
    background-color: #65b363;
}

table.enemydrops {
    background-color: #d4d4d4;
    border: 1px solid gray;
    border-top: 5px solid #3a5f70;
    margin-top: -1.4em;
word-break: normal;
}

table.enemydrops div.tableflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

table.enemydrops td.trophies {
    padding: 10px;
    border-bottom: 1px solid gray;
}

table.enemydrops div.trophy {
    margin: 0.5em;
    width: 10%;
    text-align: center;
    background: #b4b4b4;
    padding: 0.5em;
    border-radius: 10px;
    min-width: 6em;
}

.trophy {
width: 10vw;
  background-color: #b4b4b4;
  text-align: center;
  margin: 0.25em;
  font-size: 12px;
  max-width: 80px;
min-width: 60px;
}

table.enemydrops td.recipeheader {
    width: 11%;
}

table.enemydrops td.recipeheader div.recipe {
    width: 100%;
    background: none !important;
}

table.enemydrops td.recipes {
    padding: 10px;
}

table.enemydrops div.recipe {
    margin: 0.5em;
    width: 11.5%;
    text-align: center;
    background: #b4b4b4;
    padding: 0.5em;
    border-radius: 10px;
    min-width: 6em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.show {display:block;}

table.enemy div.modifier.modifiervenom {
    font-size: 0.7em;
    line-height: 2.6em;
}

.faction {
  padding: 5px;
  border-bottom: 1px solid black;
  font-weight: bold;
}

.faction.merged {
  background: #cd574d;
}

.faction.kinfolk {
  background: #7ea549;
}

.faction.independent {
  background: #eeaf4b;
}

table.enemy.cryptid td.enemybiomes {
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

table.enemy.cryptid td.enemystats {
    border-bottom: 1px solid gray;
}

.itemgrid.cryptidThumbnails div {
  background: #d7d7d7;
  margin: 0.5em;
  padding: 10px;
}

.cryptidThumbnails .cryptidBiomeKinfolk img {
  border-bottom: 10px solid #7ea549 !important;
}

.cryptidThumbnails .cryptidBiomeIndependent img {
  border-bottom: 10px solid #eeaf4b !important;
}

.cryptidThumbnails .cryptidBiomeMerged img {
  border-bottom: 10px solid #cd574d !important;
}

/* Battle Enemy Mobile Formatting */

@media only screen and (max-width: 40em) {

table.enemy {
    width: 100%;
    font-size: 0.7em;
}

select.variantDropdown {
    width: 90%;
}

table.enemy td.enemymoves p {
    font-size: 1em;
}

table.enemy td.enemybiomes {
    padding: 10px;
}

table.enemy td.enemybiomes div.biome {
    width: 23vw;
    font-size: 0.8em;
    margin: 0.2em;
}

table.enemy td.enemystats div.stat {
    width: 16vw;
    font-size: 0.8em;
    margin: 0.2em;
}

table.enemy td.enemystats {
  border-bottom: 2px solid #6c6c6c;
  height: 110px;
}

table.enemydrops div.trophy {
    margin: 0.2em;
    width: 15vw;
    min-width: 15vw;
    font-size: 0.7em;
}

.trophy {
  font-size: 9px;
}

table.enemydrops div.recipe {
    margin: 0.2em;
    width: 15vw;
    min-width: 15vw;
    font-size: 0.7em;
}

table.enemydrops td.recipes {
    border-right: 2px solid #6c6c6c;
}

table.enemy td.enemybiomes div.biome.deciduous {
  font-size: 0.6rem;
  line-height: 1.1rem;
}

table.enemy td.enemybiomes div.biome.riparian {
  font-size: 0.6rem;
  line-height: 1.1rem;
}

table.enemy td.enemybiomes div.biome.coniferous {
  font-size: 0.6rem;
  line-height: 1.1rem;
}

}

/* Shop content */

/* Shopkeeper table */

table.shopkeeper {
    border-collapse: collapse;
    margin: auto;
    background-color: #dedede;
    border: 1px solid black;
}

table.shopkeeper td {
    padding: 10px;
}

td.shopkeepername {
    width: 50%;
}

td.shopkeeperimage {
    text-align: center;
}

td.shopkeeperimage img {
    width: 100%;
}

.shopkeeper .gridimage img {
border: none;
}

/* Shop content boxes {{ShopContent}} {{_ShopItem}} */ 

div.shopcontent {
    display: flex;
    flex-direction: row;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

div.shop-title {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  height: 4em;
  font-size: 11px;
  width: 13em;
  display: table-cell;
  vertical-align: middle;
}

div.shop-item {
    background: #e6e6e6;
    margin-right: 10px;
    border: 1px solid gray;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 10em;
}

div.shop-item span a img {
    height: auto;
}

div.shop-item span a img[src*="preview"] {
}

div.shop-item i {
    font-size: 10px;
}

div.shop-text {
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
font-size: 13px;
background: #d4d4d4;
}

.shop-subtext {
  font-style: italic;
  text-align: center;
  font-size: 11px;
padding: 0.5em;
background: #e6e6e6;
}

.shop-subtext p {
  font-style: italic;
  text-align: center;
  font-size: 11px;
padding: 0.5em;
background: #e6e6e6;
}

.shop-text img {
  margin-right: 0.5em;

}

div.shop-cost {
    display: flex;
    padding: 10px;
    margin: 0 auto;
    height: 3em;
    justify-content: center;
    align-items: center;
}

div.shop-image {
    padding: 10px;
    background: white;
}

div.shop-preview {
    border-radius: 0 0 10px 10px;
    background: white;
    padding: 10px;
}

@media only screen and (max-width: 50.01em) {

div.shop-item {
    width: 7em !important;
}

div.shop-text {
font-size: 8px;
}

div.shop-title {
font-size: 8px;
}

.shop-subtext {
font-size: 8px;
}

.shop-image img {
  width: 70px;
}

.shop-text img {
  width: 15px;
}

}

/* Lunar event-specific tables */

/* Monthly lunar applicator table */

.lunarApplicators {
  border: 1px solid gray;
width: 45%;
  margin:
1em;
  font-size: 10px;
  min-width: 400px;
max-width: 600px;
}

.lunarApplicators th {
  background: #3a5f70;
  color: white;
  text-align: center;
  padding: 10px;
font-size: 12px !important;
}

.appPreview {
  padding: 10px;
  text-align: center;
}

.appNames td {
  background: #648a9b;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 10px;
  border: 1px solid #5b5b5b;
  height: 75px;
  border-bottom: none;
}

.appThumbs td {
  text-align: center;
  padding: 10px;
  border: 1px solid gray;
  border-bottom: none;
  border-top: none;
}

.appThumbs td:nth-of-type(2n+1) {
  background-color: #f4f4f4;
}

.appCosts td {
  background: #d4d4d4;
  text-align: center;
  padding: 5px;
  border: 1px solid gray;
  border-top: none;
font-size: 12px;
}

@media only screen and (max-width: 40em) {
.appNames td {
  font-size: 8px;
  height: 35px;
}

.appCosts td {
font-size: 8px;
}

.lunarApplicators {
width: 100% !important;
min-width: unset !important;
max-width: unset !important;
margin: 0 em !important;
}
}


table.lunar_applicators {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto;
}

table.lunar_applicators td {
    border: 1px solid black;
    padding: 10px;
}

table.lunar_applicators tr td span a img[src*="lunarapps" i] {
    width: auto;
    max-width: 60vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="base" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="markings" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="eyes" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="claw" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="skin" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="nose" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

/* Matchmaker event-specific tables */

/* Dateable list box */

.dateable1 {
    width: 50%;
    margin: auto;
    text-align: center;
    background: #d4d4d4;
    border-radius: 10px;
    border: 1px solid black;
}

.dateable1_title {
    background-color: #868686;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

.dateable1 div.spoilerContent div div {
    display: block;
    width: 13em;
    height: auto;
}

.dateable1 .dateablelistflex {
display:flex;
flex-direction:row;
flex-wrap:wrap;
text-align:center;
font-weight:bold;
justify-content:center;
}

/* Dateable profile box */

table.dateablewolf {
  background-color: #f4f4f4;
  border-collapse: collapse;
  width: 100%;
  margin: auto;
  font-size: 13px;
}

@media only screen and (max-width: 40em) {

table.dateablewolf {
    font-size: 0.7em;
}
}

td.wolf-name {
  background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
  font-size: 13px;
}

td.wolf-image {
    width: 33%;
text-align:center;
}

td.wolf-image img {
    max-width: 25vw;
    height: auto;
}

td.trait-header {
  width: 33.3%;
  background-color: #648a9b;
  padding: 10px;
  font-weight: bold;
  color: white;
}

td.trait-image {
    width: 7% !important;
    text-align:left;
}

td.trait {
    width: 26.3% !important;
    padding-left: 10px;
    padding-right: 5px;
}

@media only screen and (max-width: 40em) {

td.trait-header {
    padding: 5px;
}
td.trait {
    padding-left: 5px;
}
}

table.dateablewolf tr:nth-of-type(2n) {
  background: #f4f4f4;
}

table.dateablewolf tr:nth-of-type(2n+1) {
  background: white;
}

.wolf-requirements {
  padding: 10px;
}

tr.wolf-images {
    display:flex;
}

td.wolf-gallery {
  width: 40%;
  text-align: center;
  position: relative;
}

.wolf-gallery {
  margin:5px;
  margin-left:0px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

/* @media only screen and (max-width: 40em) {
.wolf-gallery {
height: 150px;
}
} */

.wolf-gallery img {
    width: 50%;
}

td.wolf-decor {
    text-align: center;
    width: 55%;
}

.dateablewolf.dateableimages {
  border-top: 2px solid #3a5f70;
}

.dateablescroll img {
  display: block;
  position: relative;
  left: 0;
}

table.dateableflavortext {
    width: 100%;
}

table.dateableflavortext td {
    padding: 5px;
}

tr.flavortext_title {
    background-color: ##f4f4f4;
}

.flavortextscroll {
  height: 180px;
  overflow: auto;
}

/* Fayre event-specific tables */
/* Crop detail tables */

.fayreCrop {
width: 100%;
}

.fayreCrop tr {
border-bottom: 1px solid black;
}

.cropHeader {
  background: #3a5f70;
  color: white;
}

.cropName {
  padding: 10px;
  font-weight: bold;
}

.cropStats {
  width: 20%;
  vertical-align: top;
  padding: 10px;
  background: #ebebeb;
}

.cropStat {
margin-bottom: 1em;
}

.cropVariantName {
  background: #648a9b;
  color: white;
  padding: 10px;
  font-weight: bold;
  width: 50%;
}

.cropVariantStats {
  width: 20%;
  padding: 10px;
}

.cropVariantStats div {
  margin-bottom: 0.5em;
}

.cropVariantImages div {
  margin-bottom: 0.5em;
}

.fayreCrop .imagegrid img {
   height: 100px;
   border: none;
}

@media only screen and (max-width: 40rem) {
.fayreCrop {
font-size: 10px;
}

.cropVariantStats div {
font-size: 10px;
}

.cropStat {
font-size: 10px;
}

.fayreCrop .imagegrid img {
height: 50px;
}

}



/* Illness table */

.illnessTable td {
border: 1px solid gray;
padding: 5px;
}

/* Befriending tables */

.befriendTable td {
border: 1px solid black;
padding: 5px;
}

.befriendHeader {
background-color: #3a5f70;
color: white;
font-weight: bold;
}

.befriendMove {
background-color: #3a5f70;
color: white;
font-weight: bold;
}

.befriendPositive {
background-color: #d9ead3;
}

.befriendNegative {
background-color: #f4cccc;
}

.befriendPositive2 {
background-color: #93c47d;
}

.befriendNegative2 {
background-color: #e06666;
}

@media only screen and (max-width: 40rem) {
.befriendTable {
font-size: 10px;
}
}

/* Color Scales */

.scaleA0 {
background-color: #e67c73;
}

.scaleA25 {
background-color: #f3a96c;
}

.scaleA50 {
background-color: #ffd666;
}

.scaleA75 {
background-color: #abc878;
}

.scaleA100 {
background-color: #57bb8a;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  background: #fff;
  padding: 5px 12px;
  border: solid 1px #ddd;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Marking Tables */

.markingBody {
    background: white;
    width: 250px;
    margin: 0.5em;
    border: 1px solid gray;
}

.markingName {
text-align: center;
  background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
}

.markingSource {
    text-align: center;
    background-color: #c4c4c4;
    padding: 10px;
}

.markingPreview {
    padding: 10px;
}

@media only screen and (max-width: 40em) {

.markingName {
    font-size: 12px;
}

.markingSource {
    font-size: 12px;
}

}

@media only screen and (max-width: 50em) {

.markingBody {
    background: white;
    width: 46%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 50.01em) {

.markingBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 65.626em) {

.markingBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 101.25em) {

.markingBody {
    background: white;
    width: 23%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

/* Base Tables */

.baseBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

.baseBody .baseName {
text-align: center;
  background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
}

.baseGenetics {
text-align: center;
  background-color: #d4d4d4;
  padding: 10px;
}

.basePreview {
padding: 20px;
  margin-top: 1em;
}

@media only screen and (max-width: 50em) {

.baseBody {
    background: white;
    width: 46%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 50.01em) {

.baseBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 75.01em) {

.baseBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

/* Biome Hunting Trail Tables */

.trailprey {
  margin-top: -5em;
}

.trailimage {
  background: transparent !important;
}

.trailimage img {
  width: 100%;
}

.trailnames {
  background: transparent !important;
  color: white;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;
}

@media only screen and (max-width: 40em) {

.trailprey tr td span a img {
  width: 70px;
}

}

/* Main page contributors */

#mainpagecontributors {
  width: 100%;
  height: auto;
  overflow: auto;
  background-color: #d4d4d4;
  margin: 0.5em;
}

#mainpageevents {
width: 60%;
}

#mainpageevents img {
width: 250px;
height: auto;
border-radius: 0px !important;
}

#currentevents {
justify-content: center;
}

@media only screen and (max-width: 74.125em) {

#mainpageevents {
width: 100%;
}

#mainpageevents img {
width: 150px;
height: auto;
}

}

#contributorstitle {
  background: #b0b0b0;
  margin-top: -0.8em;
}

#contributorstitle h3 {
border-bottom: 1px solid black;
  padding-bottom: ;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
}

#contributorsbody {
padding-left: 1em;
}

.contributor {
  width: 30%;
  background: #b0b0b0;
  padding: 0.5em;
  margin: 1em;
  margin-bottom: 2em;
text-align: left;
}

@media only screen and (max-width: 40em) {

.contributor {
  width: 100%;
  background: #b0b0b0;
  padding: 0.5em;
  margin: 1em;
  text-align: left;
  height: 150px;
  overflow: auto;
}

}

.contributorimage {
  float: left;
  padding-right: 0.5em;
  padding-top: 0.5em;
}

.contributorimage img {
  width: 75px;
}

.contributorbio {
  font-style: italic;
}

/* Cryptid Tables */

.cryptid {
  background: #e6e6e6;
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

.cryptidquick {
  background: #d4d4d4;
  border-collapse: collapse;
  width: 300px;
  margin: 0.5em;
max-width:100%;
}

.cryptidquick .cryptidcolor {
  padding: 0px !important;
}

.cryptidinformation img {
  width: 150px;
}

.cryptidinformation.cryptidnotes p {
  display: table-cell;
  vertical-align: middle;
}

.cryptidinformation.cryptidnotes div {
  height: 60px;
  font-size: 12px;
overflow-y: auto;
}

.cryptidinformation.cryptidnotes {
  background: #c6c6c6;
padding: 5px !important;
}

.cryptidinformation.cryptidnotes {
  height: 70px;
}

.cryptidinformation {
  height: 200px;
}

@media only screen and (min-width: 50.01em) {

.cryptidquick {
width: 100% !important;
font-size: 11px;
}

}

@media only screen and (min-width: 65.626em) {

.cryptidquick {
width: 48% !important;
}

}

@media only screen and (min-width: 101.25em) {

.cryptidquick {
width: 30% !important;
}

}

.cryptid td {
  border: 1px solid gray;
  padding: 15px;
}

.cryptid th {
  background-color: #9b9b9b;
  padding: 10px;
  font-weight: bold;
  border: 1px solid gray;
}

.cryptid th.sub {
  background-color: #b5b5b5;
  padding: 10px;
  font-weight: bold;
}

.cryptidname {
  border-right: none !important;
}

.cryptidfaction {
  border-left: none !important;
  text-align: right;
}

.cryptidcolor.kinfolk {
  background: #7ea549;
  height: 15px;
}

.cryptidcolor.merged {
  background: #cd574d;
  height: 15px;
}

.cryptidcolor.independent {
  background: #eeaf4b;
  height: 15px;
}

.cryptidinformation {
padding-bottom: 15px;
}

.cryptidportrait {
  width: 30%;
  float: left;
  text-align: center;
}

.cryptidintrotext {
  float: right;
  width: 70%;
  padding-left: 15px;
}

.cryptidThumbnails img {
width: 130px;
margin: 0.5em;
}

@media only screen and (max-width: 40em) {
.cryptidThumbnails img {
width: 100px;
}
}

/* Eye Color Tables */

@media only screen and (max-width: 40em) {
.eyeexplorepreview img {
  height: auto !important;
width: auto !important;
}

.eyecolorbox p {
font-size: 11px;
}

.eyename {
font-size: 11px;
}

.eyesource a {
font-size: 11px;
}

.eyesource {
font-size: 11px;
}
}

.eyecolorbox {
  width: 46%;
  max-width: 250px;
  border: 1px solid black;
  margin: 0.5em;
}

.eyename {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
}

.eyeinfo {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.eyepreview {
  width: 70%;
  margin-top: 1em;
  margin-left: 0em;
  text-align: left;
}

.eyefails {
  width: 50%;
  background-color: #f4f4f4;
  border-radius: 10px;
  border: 1px solid black;
  margin: 1em;
  height: 177px;
  overflow: scroll;
  overflow-x: hidden;
}

.failtitle {
  padding: 5px;
  background-color: #d5d5d5;
}

.eyeexplorepreview {
  text-align: center;
  height: 100px;
}

.eyesource {
  background-color: #d5d5d5;
  padding: 5px;
  text-align: center;
  margin-top: -2em;
}

.eyeexplorepreview img {
  height: 100px;
  width: auto;
  margin-top: -2em;
}

.exploreeyes {
  width: 300px;
  border: 1px solid black;
  margin: 0.5em;
  text-align: center;
}

.exploreeyebuttons {
  background-color: #c7c7c7;
height: 42px;
}

.exploreeyebuttons p {
  height: 30px;
  margin-top: -0.5em;
}

@media only screen and (max-width: 40em) {

.eyecolorbox {
  border: 1px solid black;
  margin: 0.5em;
font-size: 11px;
}
}


/* Accent Tables */

.accentBody {
    background: white;
    width: 300px;
    margin: 0.5em;
    border: 1px solid gray;
}

@media only screen and (max-width: 50em) {

.accentBody {
    background: white;
    width: 46%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 50.01em) {

.accentBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 65.626em) {

.accentBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 101.25em) {

.accentBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

/* Disaster Tables */

@media only screen and (max-width: 74.125em) {
.disaster {
    width: 100% !important;
}
}

.disaster {
    width: 46%;
    margin: 1em;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
border: 1px solid black;
}

.disasterImage {
  background-color: white;
}

.disasterImage div:first-of-type {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
}

div[id*="BiomeImage"] {
  margin-bottom: -0.4em;
}

.disasterName {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
}

.disasterCategory {
background-color: #b4b4b4;
padding: 5px;
font-weight: bold;
}

.disasterCategory img {
  width: 30px;
}

.disasterEvolutions {
background-color: #b4b4b4;
padding: 5px;
height: 80px;
width: 80%;
}

.disasterText {
background-color: #d1d1d1;
padding: 5px;
text-align: left;
}

.disasterText div {
  height: 200px;
  overflow: auto;
}

.disasterSubheader {
  height: 50px;
}

.pageButton {
width: 200px; 
margin: 1em; 
font-weight: bold; 
text-align: center;
}

.pageButton a {
color: white;
}

.pageButton a:hover {
color: white;
}

/* Mutation Tables */

@media only screen and (max-width: 74.125em) {
.mutation {
    width: 100% !important;
}
}

.mutation {
    width: 70%;
    margin: auto;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
border: 1px solid black;
}

.mutationName {
background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
text-align: center;
}

.mutationImage {
  background-color: white;
}

.mutationText {
background-color: #d1d1d1;
padding: 10px;
text-align: center;
width: 33%;
border: 1px solid black;
}

.mutationAge {
padding: 10px;
text-align: center;
width: 33%;
border: 1px solid black;
background-color: #b0b0b0;
}

.mutationPreviews {
    width: 70%;
    margin: auto;
    margin-top: -0.3em;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
border: 1px solid black;
}

@media only screen and (max-width: 74.125em) {
.mutationPreviews {
    width: 100% !important;
}
}


/* Decor preview modal */

#decorModalV1 {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#decorModalContent {
  position: fixed;
background: white;
border: 3px solid white;
  border-radius: 10px;
  height: calc(100vw * .80);
  max-height: 625px;
  min-height: 480px;
  width: 100vw;
  max-width: min(640px, 100vw);
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  z-index: 99000;
}

.modalheader {
background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
border-bottom: 3px solid white;
}

.decorname {
  font-weight: bold;
}

.modalclose {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalclose:hover,
.modalclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modalfooter {
  display: flex;
  flex-direction: row;
  background: #d4d4d4;
  padding: 10px;
  align-items: center;
  position: absolute;
  width: 100%;
border-top: 3px solid white;
bottom: 0;
}

#previewinput {
  display: none;
  width: 50%;
  text-align: right;
}

#previewoptions {
  width: 100%;
}

#checkboxesbutton {
  background: #acacac;
  height: auto;
  line-height: 2em;
  padding: 5px;
  border-radius: 0px;
  width: 6em;
  text-align: center;
  margin-right: 0.8em;
display: none;
}

#checkboxesbutton:hover {
background: #8c8c8c;
cursor: pointer;
}

#decorModalV1 #checkboxes {
  position: fixed;
  background: #bbb;
  padding: 10px;
  bottom: 76px;
  left: 0;
  width: 15em;
  transform: ;
  z-index: 99999;
  padding-top: 20px;
  padding-left: 20px;
  display: none;
}

/* Background Previews */

.background {
  width: 250px;
  margin: 0.5em;
margin-bottom: -3.5em;
}

.backround-header {
  background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  height: auto;
  width: 100%;
  border-bottom: 2px solid white;
height: 50px;
  align-content: center;
}

.background-thumb {
  position: relative;
  width: 25%;
  bottom: 5em;
  left: 0.75em;
}

.background-name {
  width: 100%;
  font-size: 10px;
}

#backgroundModal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#backgroundModalContent {
  position: fixed;
background: white;
border: 3px solid white;
  border-radius: 10px;
  height: calc(100vw * .80);
  max-height: 625px;
  min-height: 480px;
  width: 100vw;
  max-width: min(640px, 100vw);
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  z-index: 99000;
}

.bkgmodalheader {
  background-color: #3a5f70;
    padding: 10px;
    font-weight: bold;
    color: white;
  border-bottom: 3px solid white;
  }

.bkgname {
    font-weight: bold;
  }
  
  .bkgmodalclose {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .bkgmodalclose:hover,
  .bkgmodalclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  .bkgmodalfooter {
    display: flex;
    flex-direction: row;
    background: #d4d4d4;
    padding: 10px;
    align-items: center;
    position: absolute;
    width: 100%;
  border-top: 3px solid white;
  bottom: 0;
  }

  #bkgpreviewinput {
    display: none;
    width: 50%;
    text-align: right;
  }
  
  #bkgpreviewoptions {
    width: 100%;
  }
  
  #bkgcheckboxesbutton {
    background: #acacac;
    height: auto;
    line-height: 2em;
    padding: 5px;
    border-radius: 0px;
    width: 6em;
    text-align: center;
    margin-right: 0.8em;
  display: none;
  }
  
  #bkgcheckboxesbutton:hover {
  background: #8c8c8c;
  cursor: pointer;
  }

#backgroundModal #bkgcheckboxes {
  position: fixed;
  background: #bbb;
  padding: 10px;
  bottom: 76px;
  left: 0;
  width: 15em;
  transform: ;
  z-index: 99999;
  padding-top: 20px;
  padding-left: 20px;
  display: none;
}

@media only screen and (max-width: 40em) {

.background-thumb {
  position: relative;
  width: 25%;
  bottom: 3.5em;
  left: 0.5em;
}


.background {
  width: 150px;
  margin: 0.5em;
margin-bottom: -2.5em;
}

}

.lightCard {
background-color: #f9f9f9;
border: 1px solid #e2e2e2;
}

.lightCard .cardTitle {
padding: .75rem 1.25rem;
  margin-bottom: 0;
  color: inherit;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
}

.lightCard .cardBody {
padding: 1.25rem;
}

/* Raffle Stud Tables */

.rafflestud {
width: 80%;
margin: auto;
font-size: 12px;
margin-bottom: 3em;
}

.rafflestud td {
padding: 5px;
}

.studname {
background: #3a5f70;
  color: white;
  padding: 10px;
}

.studdate {
background: #3a5f70;
  color: white;
  padding: 10px;
text-align: right;
}

.studimage {
text-align: center;
}

.rafflesub {
background: #648a9b;
  color: white;
  text-align: center;
  padding: 5px;
}

@media only screen and (max-width: 46.875rem) {
.rafflestud {
width: 100%;
font-size: 10px;
margin-bottom: 3em;
}
}

/* Crafting recipe list {{CraftingList}} {{EndCraftingList}} */

div.craftinglist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* Crafting recipe tables {{CraftingRecipe}} */

table.craftingrecipe {
    width: 100%;
    margin: 5px;
    background-color: #b0b0b0;
    border: 1px solid gray;
    max-width: 380px;
}

tr.recipename td {
    background: #3a5f70;
    color: white;
    height: 15px;
    font-weight: bold;
    padding: 10px;
}

.recipename td img {
    width: 36px;
    margin-right: 0.5em;
}

td.recipethumb {
    vertical-align: top;
    padding: 10px;
    border-bottom: none !important;
    background: #b7b7b7;
    width: 23%;
}

td.recipeingredientsimg {
    background: #d4d4d4;
    width: 12%;
    vertical-align: top;
    font-weight: bold;
    padding: 5px;
    line-height: 40px;
    padding: 3px;
}

td.recipeingredientsimg p {
    line-height: 40px;
}

td.recipeingredientsimg img {
    height: 37px;
    line-height: 40px;
}

td.recipeingredientsnum {
    background: #d4d4d4;
    width: 8%;
    vertical-align: top;
    font-weight: bold;
    line-height: 40px;
    padding-top: 3px;
    padding-left: 3px;
}

td.recipeingredientsnum p {
    font-weight: bold;
    line-height: 40px;
}

td.recipeingredients {
    background: #d4d4d4;
    padding-top: 4px;
    padding-left: 3px;
    height: 100%;
    width: 54%;
    vertical-align: top;
    font-size: 12px;
    line-height: 40px;
}

td.recipeingredients p {
    font-size: 12px;
    line-height: 40px;
}

td.recipeingredients b {
    font-size: 14px;
}

td.recipeobtentionsource {
    padding: 10px;
    border-top: 5px solid #3a5f70;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

td.recipeobtention {
    height: 100%;
    padding: 10px;
    background: #d4d4d4;
    vertical-align: top;
}

@media only screen and (max-width: 40em) {

table.craftingrecipe {
    font-size: 13px;
}

td.recipeingredients {
    font-size: 11px;
}

td.recipeingredients p {
    font-size: 11px;
}

td.recipeingredientsnum {
    font-size: 13px;
}

td.recipeingredientsnum p {
    font-size: 13px;
}
}

/* Link list {{LinkList}} {{EndLinkList}} */

div.linklist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Hyperlinks {{Hyperlink|URL|Link Name}} */

div.hyperlink {
    padding: 10px;
    padding-bottom: 0px;
    font-size: 14px;
}

@media only screen and (max-width: 40em) {

div.hyperlink {
    padding: 6px;
    font-size: 13px;
}
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

div.hyperlink {
    padding: 5px;
    font-size: 12px;
}
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

div.hyperlink {
    padding: 5px;
    font-size: 12px;
}
}

/* iPad Testing */

/* @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

#sidebar {
    flex: 0 0 160px;
}

table.craftingrecipe {
    max-width: 305px;
    margin: 3px;
    font-size: 12px;
}

td.recipeingredientsimg {
    line-height: 36px;
}

td.recipeingredientsimg p {
    line-height: 36px;
}

td.recipeingredientsimg img {
    height: 33px;
    line-height: 36px;
}

td.recipeingredientsnum {
    line-height: 36px;
    font-size: 12px;
}

td.recipeingredientsnum p {
    line-height: 36px;
    font-size: 12px;
}

td.recipeingredients {
    line-height: 36px;
    font-size: 10px;
}

td.recipeingredients p {
    line-height: 36px;
    font-size: 10px;
}
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

#sidebar {
    flex: 0 0 150px;
}

table.craftingrecipe {
    max-width: 300px;
    margin: 3px;
    font-size: 12px;
}

td.recipeingredientsimg {
    line-height: 36px;
}

td.recipeingredientsimg p {
    line-height: 36px;
}

td.recipeingredientsimg img {
    height: 33px;
    line-height: 36px;
}

td.recipeingredientsnum {
    line-height: 36px;
    font-size: 12px;
}

td.recipeingredientsnum p {
    line-height: 36px;
    font-size: 12px;
}

td.recipeingredients {
    line-height: 36px;
    font-size: 10px;
}

td.recipeingredients p {
    line-height: 36px;
    font-size: 10px;
}
} */

/* Encounter Modal */

#encModal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#encModalContent {
  position: fixed;
background: white;
border: 3px solid white;
  border-radius: 10px;
  height: calc(100vw * .80);
  max-height: 625px;
  min-height: 480px;
  width: 100vw;
  max-width: min(640px, 100vw);
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  z-index: 99000;
}

.encModalHeader {
  background-color: #3a5f70;
    padding: 10px;
    font-weight: bold;
    color: white;
  border-bottom: 3px solid white;
  }
  
  .encModalClose {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .encModalClose:hover,
  .encModalClose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

.encModalItems {
  padding: 1em;
  height: calc(100vw * .80);
  max-height: 625px;
  min-height: 480px;
  overflow: auto;
}

.encModalItems .tableC tr {
  border-bottom: none;
}

.encModal #singleUseFood {
display: none;
}

.encPopupLink {
  color: #5388a0;
  cursor: pointer;
font-size: 0.9rem;
font-weight: normal;
line-height: 1.6;
}

/* Combo Base Table */

/* NPC Profile Box */

.comboBase {
  background-color: #d4d4d4;
  border-collapse: collapse;
  width: 100%;
  margin: auto;
  text-transform: capitalize;
}

.comboBase p {
  font-size: 14px;
}

@media only screen and (max-width: 40em) {
.comboBase p {
font-size: 12px;
}
}

.comboName {
background-color: #3a5f70;
  font-weight: bold;
  border-right: none !important;
  color: white;
text-align: center;
}

.comboName td {
  padding: 10px;
}

.comboResult {
  width: 30%;
  text-align: center;
  background-color: #b7b7b7;
}

.comboFactors {
  padding: 10px;
  background-color: #e8e8e8;
}

.comboImages {
text-align: center;
  padding: 10px;
  border-bottom: none !important;
  background: #b7b7b7;
width: 40%;
}

.comboFactors {
padding: 10px;
}

.comboBase img {
  height: auto;
  width: 150px;
}

.comboTitles {
  background: #648a9b !important;
  color: white;
  text-align: center;
}

.comboTitles td {
padding: 10px;
}

.comboReq {
  text-transform: initial;
padding: 10px;
}

.comboReq img {
  height: 20px;
  width: 20px;
  margin-right: 0.5em;
}

/* Interactive Story Pages */

.interactiveStory {
  width: 100%;
  background: #d4d4d4;
  margin-bottom: 0px;
  border: 1px solid black;
  max-width: 800px;
  margin: auto;
}

.interactiveStory .storylineimage {
  width: 40%;
  margin: 1em;
  margin-bottom: 0em;
}

.interactiveStory .storylinetext {
  width: 60%;
  margin: 1em;
  margin-left: 0em;
  margin-bottom: 0em;
  font-size: 14px;
}

.interactiveStory .storylinetext p {
  font-size: 14px;
}

.interactiveStory .storybluebutton {
  background: #057cb3;
  padding: 0.5em;
  color: #fff;
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin-right: 0em !important;
  cursor: pointer;
  font-size: 14px;
}

.interactiveStory .storygreenbutton {
  background: #78a64b;
  padding: 0.5em;
  color: #fff;
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin-right: 0em !important;
  cursor: pointer;
  font-size: 14px;
}

.storyOptions {
  background-color: #b5b5b5;
  text-align: left;
  margin-top: 1em;
}

.storyOptions button {
  background-color: transparent;
}

.storyPrevious {
  margin-left: -0.8em;
}

.storyOptions button img {
  width: 20px;
}

.storyPrevious::after {
  background: rgb(108, 108, 108);
  border-radius: 4px;
  color: #FFF;
  content: attr(aria-label);
  font-weight: bold;
  padding: 0.5em;
  position: absolute;
  left: 0.5em;
  top: 2.2em;
  white-space: nowrap;
  z-index: 9999;
  text-align: left;
  display: none;
  width: 155px;
  text-align: center;
  cursor: pointer;
}

.storyRestart::after {
  background: rgb(108, 108, 108);
  border-radius: 4px;
  color: #FFF;
  content: attr(aria-label);
  font-weight: bold;
  padding: 0.5em;
  position: absolute;
  left: 0.5em;
  top: 2.2em;
  white-space: nowrap;
  z-index: 9999;
  text-align: left;
  display: none;
  width: 155px;
  text-align: center;
  cursor: pointer;
}

.storyPrevious:hover:after {
display: block;
}

.storyRestart:hover:after {
display: block;
}

@media only screen and (max-width: 40em) { 
.interactiveStory .storylinetext {
  font-size: 12px;
}

.interactiveStory .storylinetext p {
  font-size: 12px;
}

.interactiveStory .storybluebutton {
  font-size: 12px;
}

.storyExploreHeader {
  font-size: 12px !important;
}

.storyExploreHeader img {
  width: 25px !important;
}
}

.storyExploreHeader {
  background: #b5b5b5;
  padding: 0.5em;
  font-weight: bold;
  margin-bottom: 1em;
  font-size: 14px;
}

.storyExploreHeader img {
  width: 50px;
  height: auto;
  margin-right: 1em;
}

.interactiveStory .enc {
  border: 1px solid black;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0 !important;
}

.interactiveStory .enc .encImage {
  background-color: white;
}

/* Static Story Pages */

.storyStatic .storylineimage {
margin-bottom: 1em !important;
}

.storyStatic .enc {
margin-bottom: 1em !important;
}

.storyStatic .storybluebutton {
margin-bottom: 1em !important;
}

.storyStatic .storygreenbutton {
margin-bottom: 1em !important;
}

.pageNumber {
  text-align: right;
  font-size: 11px;
  font-style: italic;
}

/* New Encounter Tables */

.enc {
  border: 1px solid #3e3e3e;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  width: 100%;
  margin-bottom: 3em;
  border-collapse: collapse;
}

.encTimeParameters {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  display: flex;
}

.encStatusParameters {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  display: flex;
}

.timeParameter, .seasonParameter, .weatherParameter {
cursor: help;
  height: 24px;
  width: 24px;
  margin: .25rem;
text-align: center;
}

.encHeader p {
  font-weight: bold;
  color: white;
}

.encHeader {
  background-color: #3a5f70;
  padding: .5rem;
}

.encContainer {
position: relative;
min-height: 48px;
height: 100%;
text-align: center;
}

.encPrompt {
  padding: 0.5rem;
  background-color: #dbdbdb;
  border: 1px solid #3e3e3e;
}

.encPrompt p {
  font-weight: bold;
}

.encNote {
  padding: 0.5rem;
  background-color: #dbdbdb;
  border: 1px solid #3e3e3e;
}

.encOption {
  width: 20%;
  background-color: #bfbfbf;
  padding: 0.5rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #3e3e3e;
border-bottom: none;
height: 100px;
}

.encOption p {
  font-weight: bold;
}

.encResult {
width: 50%;
  padding: 0.5rem;
  vertical-align: middle;
  border: 1px solid #3e3e3e;
}

.encReward {
width: 30%;
  padding: 0.5rem;
  vertical-align: middle;
  border: 1px solid #3e3e3e;
}

.encReward img {
  max-width: 32px;
}

.timeParameter::after {
  background: rgba(0,0,0,0.75);
  position: absolute;
  left: 0;
  top: 2.5em;
  display: none;
  text-wrap: nowrap;
  z-index: 990;
  width: auto;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  content: attr(aria-label);
  padding: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.timeParameter:hover:after {
display: block;
}

.seasonParameter::after {
  background: rgba(0,0,0,0.75);
  position: absolute;
  right: 0;
  top: 2.5em;
  display: none;
  text-wrap: nowrap;
  z-index: 990;
  width: auto;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  content: attr(aria-label);
  padding: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.weatherParameter::after {
  background: rgba(0,0,0,0.75);
  position: absolute;
  right: 0;
  top: 2.5em;
  display: none;
  text-wrap: nowrap;
  z-index: 990;
  width: auto;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  content: attr(aria-label);
  padding: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.seasonParameter:hover:after {
display: block;
}

.weatherParameter:hover:after {
display: block;
}

.logContainer {
  position: relative;
cursor: help;
}

.optionLog {
  background-color: #bfbfbf;
  padding: 0rem 0rem 0rem 0.5rem;
  height: 0px;
  border-top: none;
  text-align: left;
  vertical-align: bottom;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.logButton {
  height: 0px;
}

.logButton img {
  width: 15px;
  position: relative;
  bottom: 0.5em;
cursor: help;
}

.logButton::after {
  background: rgba(0,0,0,0.75);
  position: absolute;
  left: 0;
  top: 0.5em;
  display: none;
  text-wrap: nowrap;
  z-index: 990;
  width: auto;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  content: attr(aria-label);
  padding: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}


.logButton:hover:after {
display: block;
}

@media only screen and (max-width: 40em) {
.enc p {
font-size: 11px;
}

.encPopupLink {
font-size: 11px;
}

.weatherParameter::after {
font-size: 11px;
}

.timeParameter::after {
font-size: 11px;
}

.seasonParameter::after {
font-size: 11px;
}

.logButton::after {
font-size: 11px;

}
}

.encDropdown {
margin-top: 0.5em;
width: 40%;
}

/* Springtide Page */

@media only screen and (max-width: 40em) {
#cropsByBiome {
display: none;
}

#cropsByBiomeMobile {
display: block !important;
}

#universalCrops {
display: none;
}

#universalCropsMobile {
display: block !important;
}
}

.fish td.npc-bio {
padding: 2px;
}

.fish td.npc-name {
padding: 2px;
}

@media only screen and (max-width: 40em) {
.fish {
width: 46% !important;
font-size: 11px;
height: 150px !important;
}

.fish b {
font-size: 11px;
}
}

.poll {
width: 60% !important;
margin-left: auto;
margin-right: auto;
}

@media only screen and (max-width: 40em) {
.poll {
width: 100% !important;
}
}

/* Preview Crafting */

table.previewcraftingrecipe {
    width: 100%;
    margin: 5px;
    background-color: #b0b0b0;
    border: 1px solid gray;
    max-width: 500px;
}

td.previewrecipe {
    vertical-align: top;
    height: 200px;
}

td.previewrecipeingredients {
    width: 50%;
    background: #d4d4d4;
    vertical-align: top;
    font-size: 12px;
    padding: 3px;
}

td.previewrecipeingredients img {
    width: 15%;
    padding: 2px;
}

td.previewrecipeingredients b {
    font-size: 14px;
}

.craftingbackground {
    width: auto;
    margin: 0.5em;
    margin-bottom: -4em;
}

.craftingbackground-thumb {
    position: relative;
    width: 25%;
    bottom: 1em;
    left: 1.25em;
}

@media only screen and (max-width: 825px) {

table.previewcraftingrecipe {
    max-width: 325px;
}

td.previewrecipe {
    display: block;
    width: 100%;
    height: 250px;
}

td.previewrecipeingredients {
    display: block;
    width: 100%;
}

td.previewrecipeingredients p {
    font-size: 14px;
}

td.previewrecipeingredients b {
    font-size: 15px;
}

td.previewrecipeingredients img {
    width: 13%;
}

.craftingbackground {
    width: auto;
    margin: 0.5em;
    margin-bottom: -5em;
}

.craftingbackground-thumb {
    position: relative;
    width: 22%;
    bottom: 1em;
    left: 1.5em;
}

}
MediaWiki

Common.css: Difference between revisions

From Grouse House Wiki

Latest revision as of 20:41, 23 November 2025
