#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;
  max-height: 10%;
  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, #hand.yourTurn li.card {
  cursor: pointer;
}

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

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

#opponent, #own {
  position: absolute;
  left: 0;
  right: 0;
}

#opponent {
  top: 0;
}

#own {
  bottom: 0;
}

#game ul {
  display: inline-block;
  margin-left: 3em;
  padding: 0;
  float: right;
}

#opponent .card, #own .card {
  margin-left: -3em;
}

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

#hand .card {
  margin-left: 0.5em;
}