Common.css: Difference between revisions

Revision as of 13:54, 25 March 2024

/* 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
• Decor preview modal
• Illness table
• Befriending tables
• Personality tables
*/

/* Article warnings */

/* Crowdsourcing warning {{Crowdsourcing}} */

.crowdsource-warning {
    background-color: #d4d4d4;
    width: 90%;
    margin: auto;
    border: 1px solid gray;
    border-radius: 20px;
}

.warningtitle {
    text-align: center;
    background-color: #b0b0b0;
    border-radius: 20px 20px 0 0;
    padding: 10px;
    font-weight: bold;
}

.warning-body {
    padding: 10px;
}

/* 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.item-name {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #acacac;
    border-radius: 10px 10px 0 0;
    padding: 10px 5px;
    min-height: 50px;
    height: 70px;
}

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

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

.tableA th {
padding: 5px;
font-weight: bold;
background: #3a5f70;
color: white;
text-align: left;
}

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

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

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

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

.table

.tableA tr:first-of-type th {
background: #252525 !immportant;
color: white;
text-align: center;
}

/* Explore encounter table */

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

/* Crafting recipe table {{CraftingRecipe}} */

table.crafting-recipe {
    width: 60%;
    margin: auto;
    background-color: #b0b0b0;
    border: 1px solid black;
    border-collapse: collapse;
}

tr.recipe-name td {
    padding: 10px;
}

td.recipe-thumb {
    background-color: #d4d4d4;
    text-align: center;
    width: 20%;
    padding: 10px;
}

td.recipe-ingredients {
    background: #d4d4d4;
    padding: 10px;
}

td.recipe-ingredients img {
    width: 40px;
    height: auto;
    padding: 5px;
}

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

td.recipe-preview {
    text-align: center;
    background-color: #d4d4d4;
}

/* Achievement box */

table.achievement {
    background-color: #d4d4d4;
    width: 80%;
    border: 1px solid black;
    border-collapse: collapse;
    margin: auto;
}

tr.achievement_icon {
    background-color: #b7b7b7;
}

tr.achievement_icon td {
    padding: 10px;
    font-weight: bold;
}

tr.achievement_icon td:first-of-type {
    text-align: center;
    width: 20%;
    font-weight: normal;
}

tr.achievement-text td {
    padding: 10px;
}

/* 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: 100%;
    margin: auto;
font-size: 14px;
}

table.npc .spoilerButton {
text-align: center;
}

table.npc td {
    border: 1px solid gray;
}

td.npc-name {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
border-right: none !important;
width: 40%;
}

td.npc-species {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
text-align:right;
border-left: none !important;
width: 60%;
}

td.npc-image {
    text-align: center;
    padding: 10px;
border-bottom: none !important;
}

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

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

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

td.grousetipimage {
    width: 30%;
    vertical-align: top;
}

/* Storyline Elements */

/* Page Boxes */

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

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

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

/* 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: 2px solid black;
}

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

table.enemy td.enemyimage {
    text-align: center;
    width: 60%;
    border-right: 2px solid #6c6c6c;
    border-bottom: 2px solid #6c6c6c;
    background: white;
}

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

table.enemy td.icons {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #000000;
    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: 2px solid #6c6c6c;
    height: 3vh;
    padding-left: 10px;
    font-weight: bold;
    background: #a1a1a1;
    text-align: center;
}

table.enemy td.enemymodifiers {
    height: 15vh;
    border-bottom: 2px solid #6c6c6c;
}

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

table.enemy div.modifier {
    margin: 10px;
    background: darkgray;
    width: 75px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid #6c6c6c;
    height: 75px;
    padding-top: 10px;
}

table.enemy div.modifier.modifiernone {
    font-size: 0.8em;
    line-height: 2.8em;
}

table.enemy div.modifier img {
    height: 50%;
    width: auto;
}

table.enemy td.enemymoves {
    border-bottom: 2px solid #6c6c6c;
    padding-left: 10px;
    height: 15vh;
    vertical-align: top;
    padding-top: 10px;
}

table.enemy td.enemybiomes {
    border-right: 2px solid #6c6c6c;
    border-bottom: 2px solid #6c6c6c;
}

table.enemy td.enemybiomes div.biome {
    width: 8rem;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    border-radius: 10px;
    margin: 0.5em;
    border: 2px solid black;
}

table.enemy td.enemybiomes div.biome.grasslands  {
background: url(https://grousehouse.wiki/images/0/03/Explore_grasslands_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.deciduous  {
background: url(https://grousehouse.wiki/images/9/94/Explore_deciduous_summer_day.png);
background-position: center;
  background-size: 250%;
font-size: 0.8rem;
line-height: 1.4rem;
}

table.enemy td.enemybiomes div.biome.mountains  {
background: url(https://grousehouse.wiki/images/b/b4/Explore_mountains_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.riparian  {
background: url(https://grousehouse.wiki/images/2/28/Explore_riparian_summer_day.png);
background-position: center;
  background-size: 250%;
font-size: 0.8rem;
line-height: 1.4rem;
}

table.enemy td.enemybiomes div.biome.prairie  {
background: url(https://grousehouse.wiki/images/e/e5/Explore_prairie_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.coniferous  {
background: url(https://grousehouse.wiki/images/b/ba/Explore_coniferous_summer_day.png);
background-position: center;
  background-size: 250%;
font-size: 0.8rem;
line-height: 1.4rem;
}

table.enemy td.enemybiomes div.biome.taiga  {
background: url(https://grousehouse.wiki/images/3/3e/Explore_taiga_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.desert  {
background: url(https://grousehouse.wiki/images/b/b1/Explore_desert_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.swamp  {
background: url(https://grousehouse.wiki/images/f/f8/Explore_swamp_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.tundra  {
background: url(https://grousehouse.wiki/images/8/8f/Explore_tundra_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.glacier  {
background: url(https://grousehouse.wiki/images/a/ac/Explore_glacier_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.rainforest  {
background: url(https://grousehouse.wiki/images/0/0c/Explore_rainforest_summer_day.png);
background-position: center;
  background-size: 250%;
}

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

table.enemy td.enemystats div.stat {
    width: 8rem;
    text-align: center;
    border-radius: 10px;
    margin: 0.5em;
}

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

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

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

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

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

table.enemydrops {
    background-color: #d4d4d4;
    border: 2px solid black;
    border-top: 2px solid #6c6c6c;
    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: 2px solid #6c6c6c;
}

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

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: 2px solid #6c6c6c;
    border-bottom: 2px solid #000;
}

table.enemy.cryptid td.enemystats {
    border-bottom: 2px solid #000;
}

/* 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 div.modifier {
    margin: 5px;
    background: darkgray;
    width: 15vw;
    text-align: center;
    border-radius: 5px;
    border: 2px solid #6c6c6c;
    height: 15vw;
    padding-top: 10px;
    font-size: 0.7em;
}

table.enemy div.modifier.modifiernone {
    font-size: 0.6em;
    line-height: 2.5em;
}

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

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

table.enemydrops td.recipeheader {
    display: none;
}

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

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

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

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

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: 10px;
    margin: 0 auto;
    height: 70px;
    justify-content: center;
    align-items: center;
}

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: 40em) {

div.shop-item {
    width: 10em;
}

}

/* Lunar event-specific tables */

/* Monthly lunar applicator table */

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: #d4d4d4;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
}

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

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

}

table.dateablewolf .spoilerButton {
text-align: center;
}

table.dateablewolf td {
    border: 1px solid gray;
}

td.wolf-name {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
}

td.wolf-image {
    width: 33%;
border-right: none !important;
text-align:center;
}

td.wolf-intro {
    border-left: none !important;
}

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

td.wolf-requirements {
    padding: 5px;
}

td.trait-header {
    background-color: #9b9b9b;
    padding: 5px;
    font-weight: bold;
width: 33%;
}

td.trait-image {
    width: 7.5%;
text-align:center;
border-right: none !important;
}

td.trait {
    padding-left: 10px;
border-left: none !important;
}

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

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

.dateable_spoiler {
    background: #d4d4d4;
    width: 100%;
    margin: auto;
    font-size: 14px;
    padding: 1px;
    border: 1px solid gray;
    border-top: none;
}

.dateable_spoiler .spoilerButton {
text-align: center;
}

.dateable_spoiler .spoilerContent {
padding: 0px;
}

table.dateable_flavortext {
    width: 100%;
}

table.dateable_flavortext td {
    padding: 5px;
}

tr.flavortext_title {
    background-color: #9b9b9b;
}

/* Decor preview modal */

#decorModal {
  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 {
  background-color: #fefefe;
  margin: 5vh auto;
  border: 1px solid #888;
  width: 75%;
  height: 75vh;
}

.modalheader {
  background: #d4d4d4;
  padding: 10px;
}

.decorname {
  font-weight: bold;
}

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

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

.modalbody {
  height: 84.5%;
}

#decorinformation {
  display: block;
  padding: 10px;
}

#decorpreview {
  display: none;
}

#decorpreviewimg {
  position: fixed;
  z-index: 99902;
  top: 42%;
  left: 50%;
  width: 40vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

#behinddecorpreviewimg {
  position: fixed;
  z-index: 99900;
  top: 42%;
  left: 50%;
  width: 40vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

#previewbasewolf {
  position: fixed;
  z-index: 99901;
  top: 42%;
  left: 50%;
  width: 40vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

.modalfooter {
  display: flex;
  flex-direction: row;
  background: #d4d4d4;
  padding: 10px;
  align-items: center;
  margin-top: -0.2em;
}

#previewbutton {
  background: #acacac;
  height: auto;
  line-height: 2em;
  padding: 5px;
  border-radius: 5px;
}

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

#back {
  display: none;
  width: 50%;
}

#backbutton {
  background: #acacac;
  height: auto;
  line-height: 2em;
  padding: 5px;
  border-radius: 5px;
  width: 4em;
  text-align: center;
}

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

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

#previewoptions {
  width: 100%;
}

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

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

#checkboxes {
  position: fixed;
  background: #bbb;
  padding: 10px;
  text-align: center;
  top: 70%;
  left: 50%;
  width: 15em;
  max-width: 640px;
  transform: translate(-50%,-50%);
  z-index: 99999;
  padding-top: 20px;
  display: none;
}

#previewbackground {
  top: 42%;
  left: 50%;
  max-width: 640px;
  transform: translate(-50%,-50%);
  position: fixed;
  width: 40vw;
}

#obtentionheader {
  background: #d4d4d4;
  padding: 10px;
}

#decorinfo {
  display: flex;
  padding: 10px;
}

#decorobtention {
  padding: 10px;
}

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

#decorModalContent {
  background-color: #fefefe;
  margin: 5vh auto;
  border: 1px solid #888;
  width: 94%;
  height: 60vh;
}

.modalbody {
  height: 76.5%;
}

#decorpreviewimg {
  position: fixed;
  z-index: 99902;
  top: 36%;
  left: 50%;
  width: 90vw;
  max-width: 640px;
  transform: translate(-50%,-50%);
}

#previewbasewolf {
  position: fixed;
  z-index: 99901;
  top: 36%;
  left: 50%;
  width: 90vw;
  max-width: 640px;
  transform: translate(-50%,-50%);
}

#previewbackground {
  top: 36%;
  left: 50%;
  max-width: 640px;
  transform: translate(-50%,-50%);
  position: fixed;
  width: 90vw;
}

#checkboxes {
  top: 55%;
}

}

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

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

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

/* Personality Tables */

.personalityTable {
text-align: center;
}

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

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