/* Advanced Tables */
.row2 {background-color: #CCCCFF;}
.table2 {border-collapse:collapse;}
.table2 td {padding: 1px 2px 1px 2px;}
.table2.border tr td, #table2-1 tr td {border: 1pt solid black;}
.table2.collapse tr td {padding: 0px;}
.table2.collapse tr td table tr td {padding: 1px 3px;}
.table2.orange tr {background-color: #F2E4BC;}
.table2.orange .row2 {background-color: #FDEEF4;}
.table2.rows tr > td {border-top: 1pt solid black;}
.table2 > thead {font-weight: bold;}
table.sortable thead:hover {text-decoration: underline; cursor: pointer;}
/* Replace classes with .table2[data-style~=value] ? */
/* "alternating" results in alternating row colors */
.table2.orange.alternating tr:nth-child(2n) > td {background-color: #FDEEF4;}


/* Spoilers */
div.spoilerheader a {
   font-family: sans-serif;
   font-size: 1.1em;
   font-weight: bold;
}
div.spoilerheader input  {
   background-color: #cececc;
   color: #3e3e33;
   font: 0.9em sans-serif;
}
div.spoilerbody  {
   color: #0f0f0f;
   border: 1px dotted gray;
   padding: 1em;
   margin: 1em;
}


/* PbP Maps */
.pbp-map-wrapper {position: relative; margin: 1rem 0; font-size: 90vh; font-size: 90vmin;} /* 90% of the viewport width or height, whichever is lower */
.pbp-map, .pbp-map-areas, .pbp-map-tokens {
  position: relative; top: 0; left: 0;
  font-size: 0.05em;
  width: 20em; height: 20em; box-sizing: border-box;
  border: 0.01em solid black;
  background: white;
  overflow: hidden;
}
.pbp-map:not([data-nogrid="true"]):before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; box-sizing: border-box;
  background: transparent;
  background-image: linear-gradient(transparent 0.4em, #888888 0.5em, transparent 0.6em), linear-gradient(90deg, transparent 0.4em, #888888 0.5em, transparent 0.6em);
  background-size: 1em 1em; background-position: 0.5em 0.5em;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}
.pbp-map:not([data-ready="true"]):after {
  content: "Loading...";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; box-sizing: border-box;
  padding: calc(50% - 1em) 0; text-align: center;
  background-color: rgba(255,255,255,0.5);
  color: black; font-size: 2em; font-weight: bold;
  cursor: default;
}
.pbp-map > *:not([data-ready="true"]), .pbp-map-tokens > *:not([data-ready="true"]) {display: none;}
.pbp-map > *, .pbp-map-tokens > * {
  display: block;
  position: absolute;
  padding: 0; margin: 0;
  width: 1em; height: 1em;
  box-sizing: content-box;
}
.pbp-map-areas, .pbp-map-tokens {z-index: 1; position: absolute; background: transparent; overflow: visible;}
.map-token > span { /* Split into new layer w/ separate div */
  transition-property: transform, opacity, box-shadow; transition-duration: 0.2s; transition-timing-function: ease;
  -ms-transform: scale(0.8); transform: scale(0.8);
  box-shadow: 0 0 0 0.125em rgba(128,128,128,0.2);
  display: block; width: 1em; height: 1em;
  background: transparent center/contain url("../images/expand.gif") no-repeat;
  cursor: pointer;
  z-index: 1;
}
.map-token > span:hover {
  -ms-transform: scale(1); transform: scale(1);
  box-shadow: none;
  opacity: 0.9;
  z-index: 2;
}
.map-token > span:hover + .map-hovertip:not(:empty), .map-hovertip:not(:empty):hover {display: block;}
.map-token[data-round="true"], .map-token[data-round="true"] > span {border-radius: 100%;}

.map-hovertip {
  display: none; min-width: 6em;
  position: absolute; top: calc(100% - 1em); left: 50%;
  background: #333333; border-radius: 1rem;
  padding: 0.5rem; margin-top: 2rem; margin-left: -2.5rem;
  font-size: 0.9rem; color: white; text-align: center;
  box-shadow: 0 0 1px white, 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
}
.map-hovertip:before {
  content: ""; display: block;
  position: absolute; top: 0;
  margin-top: -2rem;
  margin-left: 1rem;
  border: 1rem solid transparent; border-bottom-color: #333333;
  pointer-events: none;
}

.pbp-map[data-disable-tokens="true"] + * > .map-token {opacity: 0.5; pointer-events: none;}
.pbp-map[data-hide-tokens="true"] + * > .map-token {visibility: hidden; pointer-events: none;}

.map-block {border-radius: 0.1em;}
.map-line {
  height: 0; box-sizing: border-box;
  border: 0.1em solid black; border-radius: 0.1em;
  transform-origin: center left; margin-top: -0.15em; 
}

.map-block.grid {
  background-image: linear-gradient(transparent 0.2em, white 0.25em, transparent 0.3em), linear-gradient(90deg, transparent 0.2em, white 0.25em, transparent 0.3em);
  background-size: 0.5em 0.5em; background-position: 0.5em 0.5em;
}
.map-block.wave {background-image: repeating-radial-gradient(circle at -0.05em -0.05em, black, black 0.1em, white 0.1em, white 0.4em); background-size: 0.5em 0.5em; border-radius: 0;}
.map-block.circles-large {background-image: radial-gradient(black, black 0.25em, white 0.25em, white 1em); background-size: 0.5em 0.5em; border-radius: 0;}
.map-block.circles-small {background-image: radial-gradient(black, black 0.1em, black 0.15em, white 0.15em, white 1em); background-size: 0.25em 0.25em; border-radius: 0;}
.map-block.bubbles-small {background-image: radial-gradient(white, white 0.1em, black 0.15em, white 0.15em, white 1em); background-size: 0.25em 0.25em; border-radius: 0;}
.map-block.bubbles-large {background-image: radial-gradient(white, white 0.2em, black 0.25em, white 0.25em, white 1em); background-size: 0.5em 0.5em; border-radius: 0;}

.pbp-map-areas {overflow: hidden;}
.map-area {animation: 0.8s infinite alternate pulseOpacity;}
@keyframes pulseOpacity {from {opacity: 0.5;} to {opacity: 0.75;}}
.map-area:after {
  /* background: repeating-linear-gradient(rgba(255,255,255,0.5) 0%, transparent 100%);*/
  /* Make gradient part of svg instead */
}


.pbp-map-wrapper:not(*:root) { /* Detect Chrome and Safari - Chrome can't use ems below a certain value */
  font-size: 900vmin; height: 90vmin; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.1);
} .map-hovertip:not(*:root) {min-width: 0.6em; -webkit-transform-origin: top; -webkit-transform: scale(10); top: calc(100% + 10em);}