#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; }