paxpamirseconded.css

@charset "UTF-8";
/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * PaxPamirSecondEd implementation : © <Your name here> <Your email address here>
 *
 * This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
 * See http://en.boardgamearena.com/#!doc/Studio for more information.
 * -----
 *
 * paxpamirseconded.css
 *
 * PaxPamirSecondEd stylesheet
 *
 */
* {
  box-sizing: border-box;
}

.pax-pamir-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 1;
}

.layout-actions-wrapper {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #f0f0f0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.layout-action-button {
  padding: 6px 12px;
  border: 1px solid #305a72;
  border-radius: 6px;
  font-size: 14px;
  margin-right: 6px;
  background-color: #305a72;
  color: #f0f0f0;
  cursor: pointer;
}

.layout-action-button:hover {
  background-color: #6b6663;
  border-color: #6b6663;
  color: #f0f0f0;
  transition: all ease-in-out 0.3s;
}

.disabled-layout-action-button {
  background-color: #f0f0f0;
  border-color: #6b6663;
  color: #6b6663;
}

#paxpamir-summary,
#paxpamir-map,
#paxpamir-market,
#paxpamir-playerBoards {
  display: none;
}

#paxpamir-summary.section-visible,
#paxpamir-map.section-visible,
#paxpamir-market.section-visible,
#paxpamir-playerBoards.section-visible {
  display: flex;
}

.summary-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 20px 0;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3);
}

.map-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 0 20px 0;
  background-image: url("./img/mounted-map-4096.jpg");
  /* The following options make the background image resize when the viewport resizes. */
  /* From https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size */
  background-size: contain;
  background-repeat: no-repeat;
  --width: 100%;
  padding-top: calc(0.582 * var(--width));
  /* (img_height / img_width) * width% */
  width: var(--width);
  /* Don't resize below this width */
  min-width: 500px;
}

/* ------- MARKET START ------- */
#market-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.market-section {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 20px 0;
  background-image: url("./img/mounted-market-4096.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  --width: 87.5%;
  padding-top: calc(0.493 * var(--width));
  /* (img_height / img_width) * width% */
  width: var(--width);
  min-width: 500px;
}

.market-row {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
}

.market-row-spacer-left {
  width: 3.5%;
  height: 100%;
  z-index: 3;
}

.market-row-spacer {
  width: 2.5%;
  height: 100%;
  z-index: 3;
}

.market-row-spacer-right {
  width: 0.5%;
  height: 100%;
  z-index: 3;
}

#market-row-0 {
  top: 0;
  left: 0;
  align-items: flex-start;
  margin-top: 6%;
}

#market-row-1 {
  top: 0;
  left: 0;
  align-items: flex-end;
  margin-top: -1%;
}

#paxpamir-deck {
  background-image: url("./img/cards/back.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  --width: 12.5%;
  padding-top: calc(0.715 * var(--width));
  /* (img_height / img_width) * width% */
  width: var(--width);
  border-radius: 5%;
}

/* ------- MARKET END ------- */
.playerBoards-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 20px 0;
  min-width: 500px;
}

.playerBoard {
  margin: 5px 0;
  background-size: contain;
  background-repeat: no-repeat;
  --width: 70%;
  padding-top: calc(0.228 * var(--width));
  /* (img_height / img_width) * width% */
  width: var(--width);
  min-width: 300px;
  /* TODO add faction wheel in row */
}

.playerBoard-305a72 {
  background-image: url("./img/player-board-blue.png");
}

.playerBoard-cfa580 {
  background-image: url("./img/player-board-yellow.png");
}

.playerBoard-d30505 {
  background-image: url("./img/player-board-red.png");
}

.playerBoard-292623 {
  background-image: url("./img/player-board-black.png");
}

.playerBoard-6b6663 {
  background-image: url("./img/player-board-grey.png");
}

.font-baskerville {
  font-family: "Libre Baskerville", serif;
}

/* ------- CARD CSS START ------- */
.card {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  --width: 30%;
  padding-top: calc(0.69 * var(--width));
  /* approx (img_height / img_width) * width% */
  width: var(--width);
  border-radius: 5%;
  z-index: 3;
  cursor: pointer;
}
.card[card-id="1"] {
  background-image: url("img/cards/1.jpg");
}
.card[card-id="2"] {
  background-image: url("img/cards/2.jpg");
}
.card[card-id="3"] {
  background-image: url("img/cards/3.jpg");
}
.card[card-id="4"] {
  background-image: url("img/cards/4.jpg");
}
.card[card-id="5"] {
  background-image: url("img/cards/5.jpg");
}
.card[card-id="6"] {
  background-image: url("img/cards/6.jpg");
}
.card[card-id="7"] {
  background-image: url("img/cards/7.jpg");
}
.card[card-id="8"] {
  background-image: url("img/cards/8.jpg");
}
.card[card-id="9"] {
  background-image: url("img/cards/9.jpg");
}
.card[card-id="10"] {
  background-image: url("img/cards/10.jpg");
}
.card[card-id="11"] {
  background-image: url("img/cards/11.jpg");
}
.card[card-id="12"] {
  background-image: url("img/cards/12.jpg");
}
.card[card-id="13"] {
  background-image: url("img/cards/13.jpg");
}
.card[card-id="14"] {
  background-image: url("img/cards/14.jpg");
}
.card[card-id="15"] {
  background-image: url("img/cards/15.jpg");
}
.card[card-id="16"] {
  background-image: url("img/cards/16.jpg");
}
.card[card-id="17"] {
  background-image: url("img/cards/17.jpg");
}
.card[card-id="18"] {
  background-image: url("img/cards/18.jpg");
}
.card[card-id="19"] {
  background-image: url("img/cards/19.jpg");
}
.card[card-id="20"] {
  background-image: url("img/cards/20.jpg");
}
.card[card-id="21"] {
  background-image: url("img/cards/21.jpg");
}
.card[card-id="22"] {
  background-image: url("img/cards/22.jpg");
}
.card[card-id="23"] {
  background-image: url("img/cards/23.jpg");
}
.card[card-id="24"] {
  background-image: url("img/cards/24.jpg");
}
.card[card-id="25"] {
  background-image: url("img/cards/25.jpg");
}
.card[card-id="26"] {
  background-image: url("img/cards/26.jpg");
}
.card[card-id="27"] {
  background-image: url("img/cards/27.jpg");
}
.card[card-id="28"] {
  background-image: url("img/cards/28.jpg");
}
.card[card-id="29"] {
  background-image: url("img/cards/29.jpg");
}
.card[card-id="30"] {
  background-image: url("img/cards/30.jpg");
}
.card[card-id="31"] {
  background-image: url("img/cards/31.jpg");
}
.card[card-id="32"] {
  background-image: url("img/cards/32.jpg");
}
.card[card-id="33"] {
  background-image: url("img/cards/33.jpg");
}
.card[card-id="34"] {
  background-image: url("img/cards/34.jpg");
}
.card[card-id="35"] {
  background-image: url("img/cards/35.jpg");
}
.card[card-id="36"] {
  background-image: url("img/cards/36.jpg");
}
.card[card-id="37"] {
  background-image: url("img/cards/37.jpg");
}
.card[card-id="38"] {
  background-image: url("img/cards/38.jpg");
}
.card[card-id="39"] {
  background-image: url("img/cards/39.jpg");
}
.card[card-id="40"] {
  background-image: url("img/cards/40.jpg");
}
.card[card-id="41"] {
  background-image: url("img/cards/41.jpg");
}
.card[card-id="42"] {
  background-image: url("img/cards/42.jpg");
}
.card[card-id="43"] {
  background-image: url("img/cards/43.jpg");
}
.card[card-id="44"] {
  background-image: url("img/cards/44.jpg");
}
.card[card-id="45"] {
  background-image: url("img/cards/45.jpg");
}
.card[card-id="46"] {
  background-image: url("img/cards/46.jpg");
}
.card[card-id="47"] {
  background-image: url("img/cards/47.jpg");
}
.card[card-id="48"] {
  background-image: url("img/cards/48.jpg");
}
.card[card-id="49"] {
  background-image: url("img/cards/49.jpg");
}
.card[card-id="50"] {
  background-image: url("img/cards/50.jpg");
}
.card[card-id="51"] {
  background-image: url("img/cards/51.jpg");
}
.card[card-id="52"] {
  background-image: url("img/cards/52.jpg");
}
.card[card-id="53"] {
  background-image: url("img/cards/53.jpg");
}
.card[card-id="54"] {
  background-image: url("img/cards/54.jpg");
}
.card[card-id="55"] {
  background-image: url("img/cards/55.jpg");
}
.card[card-id="56"] {
  background-image: url("img/cards/56.jpg");
}
.card[card-id="57"] {
  background-image: url("img/cards/57.jpg");
}
.card[card-id="58"] {
  background-image: url("img/cards/58.jpg");
}
.card[card-id="59"] {
  background-image: url("img/cards/59.jpg");
}
.card[card-id="60"] {
  background-image: url("img/cards/60.jpg");
}
.card[card-id="61"] {
  background-image: url("img/cards/61.jpg");
}
.card[card-id="62"] {
  background-image: url("img/cards/62.jpg");
}
.card[card-id="63"] {
  background-image: url("img/cards/63.jpg");
}
.card[card-id="64"] {
  background-image: url("img/cards/64.jpg");
}
.card[card-id="65"] {
  background-image: url("img/cards/65.jpg");
}
.card[card-id="66"] {
  background-image: url("img/cards/66.jpg");
}
.card[card-id="67"] {
  background-image: url("img/cards/67.jpg");
}
.card[card-id="68"] {
  background-image: url("img/cards/68.jpg");
}
.card[card-id="69"] {
  background-image: url("img/cards/69.jpg");
}
.card[card-id="70"] {
  background-image: url("img/cards/70.jpg");
}
.card[card-id="71"] {
  background-image: url("img/cards/71.jpg");
}
.card[card-id="72"] {
  background-image: url("img/cards/72.jpg");
}
.card[card-id="73"] {
  background-image: url("img/cards/73.jpg");
}
.card[card-id="74"] {
  background-image: url("img/cards/74.jpg");
}
.card[card-id="75"] {
  background-image: url("img/cards/75.jpg");
}
.card[card-id="76"] {
  background-image: url("img/cards/76.jpg");
}
.card[card-id="77"] {
  background-image: url("img/cards/77.jpg");
}
.card[card-id="78"] {
  background-image: url("img/cards/78.jpg");
}
.card[card-id="79"] {
  background-image: url("img/cards/79.jpg");
}
.card[card-id="80"] {
  background-image: url("img/cards/80.jpg");
}
.card[card-id="81"] {
  background-image: url("img/cards/81.jpg");
}
.card[card-id="82"] {
  background-image: url("img/cards/82.jpg");
}
.card[card-id="83"] {
  background-image: url("img/cards/83.jpg");
}
.card[card-id="84"] {
  background-image: url("img/cards/84.jpg");
}
.card[card-id="85"] {
  background-image: url("img/cards/85.jpg");
}
.card[card-id="86"] {
  background-image: url("img/cards/86.jpg");
}
.card[card-id="87"] {
  background-image: url("img/cards/87.jpg");
}
.card[card-id="88"] {
  background-image: url("img/cards/88.jpg");
}
.card[card-id="89"] {
  background-image: url("img/cards/89.jpg");
}
.card[card-id="90"] {
  background-image: url("img/cards/90.jpg");
}
.card[card-id="91"] {
  background-image: url("img/cards/91.jpg");
}
.card[card-id="92"] {
  background-image: url("img/cards/92.jpg");
}
.card[card-id="93"] {
  background-image: url("img/cards/93.jpg");
}
.card[card-id="94"] {
  background-image: url("img/cards/94.jpg");
}
.card[card-id="95"] {
  background-image: url("img/cards/95.jpg");
}
.card[card-id="96"] {
  background-image: url("img/cards/96.jpg");
}
.card[card-id="97"] {
  background-image: url("img/cards/97.jpg");
}
.card[card-id="98"] {
  background-image: url("img/cards/98.jpg");
}
.card[card-id="99"] {
  background-image: url("img/cards/99.jpg");
}
.card[card-id="100"] {
  background-image: url("img/cards/100.jpg");
}
.card[card-id="101"] {
  background-image: url("img/cards/101.jpg");
}
.card[card-id="102"] {
  background-image: url("img/cards/102.jpg");
}
.card[card-id="103"] {
  background-image: url("img/cards/103.jpg");
}
.card[card-id="104"] {
  background-image: url("img/cards/104.jpg");
}
.card[card-id="105"] {
  background-image: url("img/cards/105.jpg");
}
.card[card-id="106"] {
  background-image: url("img/cards/106.jpg");
}
.card[card-id="107"] {
  background-image: url("img/cards/107.jpg");
}
.card[card-id="108"] {
  background-image: url("img/cards/108.jpg");
}
.card[card-id="109"] {
  background-image: url("img/cards/109.jpg");
}
.card[card-id="110"] {
  background-image: url("img/cards/110.jpg");
}
.card[card-id="111"] {
  background-image: url("img/cards/111.jpg");
}
.card[card-id="112"] {
  background-image: url("img/cards/112.jpg");
}
.card[card-id="113"] {
  background-image: url("img/cards/113.jpg");
}
.card[card-id="114"] {
  background-image: url("img/cards/114.jpg");
}
.card[card-id="115"] {
  background-image: url("img/cards/115.jpg");
}
.card[card-id="116"] {
  background-image: url("img/cards/116.jpg");
}
.card[card-id=back] {
  background-image: url("img/cards/back.jpg");
}

/* ------- CARD CSS END ------- */