#game > div {
  position: absolute;
  left: 0;
  right: 0;
}

#them {
  top: 0;
  bottom: 75%;
}

#table {
  top: 25%;
  bottom: 25%;
}

#you {
  top: 75%;
  bottom: 0;
}

#game .card {
  background: url("/cards.jpg") no-repeat;
  background-size: 400% 1200%;
  display: inline-block;
  border-radius: 0.5em;
  border: 1px solid #555;
  width: 4.5em;
  height: 7em;
  float: left;
  margin: 0.5em;
}

#game .card.value0 {
  background-position-x: 0%;
}

#game .card.value1 {
  background-position-x: 33.3%;
}

#game .card.value2 {
  background-position-x: 66.7%;
}

#game .card.value3 {
  background-position-x: 100%;
}

#game .card.month0 {
  background-position-y: 0%;
}

#game .card.month1 {
  background-position-y: 9.1%;
}

#game .card.month2 {
  background-position-y: 18.2%;
}

#game .card.month3 {
  background-position-y: 27.3%;
}

#game .card.month4 {
  background-position-y: 36.4%;
}

#game .card.month5 {
  background-position-y: 45.5%;
}

#game .card.month6 {
  background-position-y: 54.5%;
}

#game .card.month7 {
  background-position-y: 63.6%;
}

#game .card.month8 {
  background-position-y: 72.7%;
}

#game .card.month9 {
  background-position-y: 81.8%;
}

#game .card.month10 {
  background-position-y: 90.9%;
}

#game .card.month11 {
  background-position-y: 100%;
}

#turned.hidden {
  display: none;
}

#river li.card.candidate, #you .hand.yourTurn li.card {
  cursor: pointer;
}

#river li.card.candidate {
  box-shadow: 0 0 0.5em 0.1em #fc0;
}

#you .hand li.card.selected {
  margin-top: -1em;
}

#game ul {
  display: inline-block;
  margin: 0 0 0 3.5em;
  padding: 0;
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#game ul#river {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#them .card, #you .card {
  margin-left: -3.5em;
}

#game #you .hand {
  margin-left: 0;
  float: left;
}

#you .hand .card {
  margin: 0.5em 0.1em;
}