#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% 1300%;
  display: inline-block;
  border-radius: 0.5em;
  border: 1px solid #555;
  width: 4.5em;
  height: 7em;
  float: left;
  margin: 0.5em;
  background-position: 0% 100%; /* back of the card */
}

#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: 8.3%;
}

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

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

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

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

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

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

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

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

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

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

#game .card.slot {
	background: none;
	border: 1px solid transparent;
}

#game .card.moving {
	position: relative;
	transition-property: left, top;
	transition-duration: 1s;
}

#game #rest {
  margin: 0;
}

#rest.init, #rest.turn0 {
  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 6px 9px 0 0 #555;
}

#rest.turn2 {
  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5.5px 8.3px 0 0 #555;
}

#rest.turn4 {
  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5px 7.5px 0 0 #555;
}

#rest.turn6 {
  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 4.5px 6.8px 0 0 #555;
}

#rest.turn8 {
  box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555;
}

#rest.turn10 {
  box-shadow: 2px 3px 0 0 #555, 3.5px 5.3px 0 0 #555;
}

#rest.turn12 {
  box-shadow: 2px 3px 0 0 #555, 3px 4.5px 0 0 #555;
}

#rest.turn14 {
  box-shadow: 2px 3px 0 0 #555, 2.5px 3.8px 0 0 #555;
}

#rest.turn16 {
  box-shadow: 2px 3px 0 0 #555;
}

#game #turned {
  margin: -0.1em 0 0 -4.75em;
}

#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#deck {
  float: left;
}

#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 .hand {
  margin-left: 0;
  float: left;
}

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