/**
 * Styles for CSS Playing Cards
 *
 * Override em from cards.css
 */

/* card itself
********************************************************************/

.playingCards .card {
    width: 62px;
    height: 86.8px;
    -moz-border-radius: 4.8px;
    -webkit-border-radius: 4.8px;
    -khtml-border-radius: 4.8px;
    border-radius: 4.8px;
    padding: 4px;
    margin: 0 8px 8px 0;
    font-size: 19.2px; /* @change: adjust this value to make bigger or smaller cards */
    /*-moz-box-shadow: 3.2px 3.2px 8px #333;
    -webkit-box-shadow: 3.2px 3.2px 8px #333;
    box-shadow: 3.2px 3.2px 8px #333;*/
}

/* selected and hover state */
.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus,
.playingCards label.card:hover,
.playingCards strong .card {
    bottom: 16px;
}

/* suit colours
********************************************************************/


/* inner bits
********************************************************************/

/* top left main info (rank and suit) */

/* checkbox */
.playingCards .card input {
    margin-top: -0.8px;
}
.playingCards.simpleCards .card input,
.playingCards .card.rank-j input,
.playingCards .card.rank-q input,
.playingCards .card.rank-k input,
.playingCards .card.rank-a input {
    margin-top: 38.4px;
}

/* different rank letters for different languages */
.playingCards .card .rank:after,
.playingCards .card.joker .rank:before {
    top: 4px;
    left: 4px;
}

/* joker (top left symbol) */
.playingCards .card.joker .rank:before {
    top: 0;
    left: -2px;
}

/* inner multiple suits */
.playingCards .card .suit:after {
    margin-top: -12.8px;
    font-size: 20.8px;
    word-spacing: -0.8px;
}

/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
.playingCards .card.hearts .suit:after {
    word-spacing: -3.2px;
}
.playingCards .card.hearts.rank-10 .suit:after {
    word-spacing: -0.8px;
    letter-spacing: -1.6px;
}
.playingCards .card.clubs.rank-8 .suit:after,
.playingCards .card.clubs.rank-10 .suit:after {
    word-spacing: -4.0px;
}

/* 8, 9, 10 are the most crowded */
.playingCards .card.rank-8 .suit:after,
.playingCards .card.rank-9 .suit:after {
    letter-spacing: -1.8px;
}
.playingCards .card.rank-10 .suit:after {
    letter-spacing: -2.0px;
}
.playingCards .card.clubs .suit:after {
    letter-spacing: -2px;
}

/*____________ symbols in the middle (suits, full) ____________*/

.playingCards.faceImages .card.rank-j,
.playingCards.faceImages .card.rank-q,
.playingCards.faceImages .card.rank-k,
.playingCards.faceImages .card.joker {
    background-position: -16px 0;
}

/*____________ symbols in the middle (faces as dingbat symbols) ____________*/

.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-j .suit:after,
.playingCards .card.rank-q .suit:after,
.playingCards .card.rank-k .suit:after,
.playingCards .card.rank-a .suit:after,
.playingCards .card.joker .rank:after {
    font-size: 48px;
    right: 5.5px;
    bottom: 16px;
}
.playingCards .card.rank-j .suit:after {
    right: 4.5px;
}
.playingCards .card.joker .rank:after {
    top: 18px;
    left: 8px;
}

/* big suits in middle */
.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-a .suit:after {
    bottom: 18px;
}
.playingCards.simpleCards .card.diams .suit:after,
.playingCards .card.rank-a.diams .suit:after {
    right: 16px;
}
.playingCards.simpleCards .card.hearts .suit:after,
.playingCards .card.rank-a.hearts .suit:after {
    right: 16px;
}
.playingCards.simpleCards .card.spades .suit:after,
.playingCards .card.rank-a.spades .suit:after {
    right: 16px;
}
.playingCards.simpleCards .card.clubs .suit:after,
.playingCards .card.rank-a.clubs .suit:after {
    right: 15px;
}

/*____________ smaller cards for use inside text ____________*/

.playingCards.inText .card {
    font-size: 6.4px;
}
.playingCards.inText .card span.rank {
    font-size: 32px;
    margin-top: 3.2px;
}
.playingCards.inText .card span.suit {
    font-size: 40px;
}
.playingCards.inText .card .rank:after {
    left: 8px;
    padding: 0 1.6px;
}


/* hand (in your hand or on table or as a deck)
********************************************************************/

.playingCards ul.table,
.playingCards ul.hand,
.playingCards ul.deck {
    margin: 0 0 24px 0;
}
.playingCards ul.hand {
    margin-bottom: 56px;
}

.playingCards ul.hand,
.playingCards ul.deck {
    height: 128px;
}
.playingCards ul.hand li:nth-child(1)  { left: 0; }
.playingCards ul.hand li:nth-child(2)  { left: 17.6px; }
.playingCards ul.hand li:nth-child(3)  { left: 35.2px; }
.playingCards ul.hand li:nth-child(4)  { left: 52.8px; }
.playingCards ul.hand li:nth-child(5)  { left: 70.4px; }
.playingCards ul.hand li:nth-child(6)  { left: 88px; }
.playingCards ul.hand li:nth-child(7)  { left: 105.6px; }
.playingCards ul.hand li:nth-child(8)  { left: 123.2px; }
.playingCards ul.hand li:nth-child(9)  { left: 140.8px; }
.playingCards ul.hand li:nth-child(10) { left: 158.4px; }
.playingCards ul.hand li:nth-child(11) { left: 176px; }
.playingCards ul.hand li:nth-child(12) { left: 193.6px; }
.playingCards ul.hand li:nth-child(13) { left: 211.2px; }

.playingCards ul.hand li:nth-child(14) { left: 228.8px; }
.playingCards ul.hand li:nth-child(15) { left: 246.4px; }
.playingCards ul.hand li:nth-child(16) { left: 264px; }
.playingCards ul.hand li:nth-child(17) { left: 281.6px; }
.playingCards ul.hand li:nth-child(18) { left: 299.2px; }
.playingCards ul.hand li:nth-child(19) { left: 316.8px; }
.playingCards ul.hand li:nth-child(20) { left: 334.4px; }
.playingCards ul.hand li:nth-child(21) { left: 352px; }
.playingCards ul.hand li:nth-child(22) { left: 369.6px; }
.playingCards ul.hand li:nth-child(23) { left: 387.2px; }
.playingCards ul.hand li:nth-child(24) { left: 404.8px; }
.playingCards ul.hand li:nth-child(25) { left: 422.4px; }
.playingCards ul.hand li:nth-child(26) { left: 440px; }

/* rotate cards if rotateHand option is on */
.playingCards.rotateHand ul.hand li:nth-child(1) {
    -moz-transform: translate(30.4px, 14.4px) rotate(-42deg);
    -webkit-transform: translate(30.4px, 14.4px) rotate(-42deg);
    -o-transform: translate(30.4px, 14.4px) rotate(-42deg);
    transform: translate(30.4px, 14.4px) rotate(-42deg);
}
.playingCards.rotateHand ul.hand li:nth-child(2) {
    -moz-transform: translate(24px, 8px) rotate(-33deg);
    -webkit-transform: translate(24px, 8px) rotate(-33deg);
    -o-transform: translate(24px, 8px) rotate(-33deg);
    transform: translate(24px, 8px) rotate(-33deg);
}
.playingCards.rotateHand ul.hand li:nth-child(3) {
    -moz-transform: translate(17.6px, 4.8px) rotate(-24deg);
    -webkit-transform: translate(17.6px, 4.8px) rotate(-24deg);
    -o-transform: translate(17.6px, 4.8px) rotate(-24deg);
    transform: translate(17.6px, 4.8px) rotate(-24deg);
}
.playingCards.rotateHand ul.hand li:nth-child(4) {
    -moz-transform: translate(11.2px, 3.2px) rotate(-15deg);
    -webkit-transform: translate(11.2px, 3.2px) rotate(-15deg);
    -o-transform: translate(11.2px, 3.2px) rotate(-15deg);
    transform: translate(11.2px, 3.2px) rotate(-15deg);
}
.playingCards.rotateHand ul.hand li:nth-child(5) {
    -moz-transform: translate(4.8px, 1.6px) rotate(-6deg);
    -webkit-transform: translate(4.8px, 1.6px) rotate(-6deg);
    -o-transform: translate(4.8px, 1.6px) rotate(-6deg);
    transform: translate(4.8px, 1.6px) rotate(-6deg);
}
.playingCards.rotateHand ul.hand li:nth-child(6) {
    -moz-transform: translate(-1.6px, 1.6px) rotate(3deg);
    -webkit-transform: translate(-1.6px, 1.6px) rotate(3deg);
    -o-transform: translate(-1.6px, 1.6px) rotate(3deg);
    transform: translate(-1.6px, 1.6px) rotate(3deg);
}
.playingCards.rotateHand ul.hand li:nth-child(7) {
    -moz-transform: translate(-8px, 3.2px) rotate(12deg);
    -webkit-transform: translate(-8px, 3.2px) rotate(12deg);
    -o-transform: translate(-8px, 3.2px) rotate(12deg);
    transform: translate(-8px, 3.2px) rotate(12deg);
}
.playingCards.rotateHand ul.hand li:nth-child(8) {
    -moz-transform: translate(-14.4px, 4.8px) rotate(21deg);
    -webkit-transform: translate(-14.4px, 4.8px) rotate(21deg);
    -o-transform: translate(-14.4px, 4.8px) rotate(21deg);
    transform: translate(-14.4px, 4.8px) rotate(21deg);
}
.playingCards.rotateHand ul.hand li:nth-child(9) {
    -moz-transform: translate(-20.8px, 9.6px) rotate(30deg);
    -webkit-transform: translate(-20.8px, 9.6px) rotate(30deg);
    -o-transform: translate(-20.8px, 9.6px) rotate(30deg);
    transform: translate(-20.8px, 9.6px) rotate(30deg);
}
.playingCards.rotateHand ul.hand li:nth-child(10) {
    -moz-transform: translate(-27.2px, 16px) rotate(39deg);
    -webkit-transform: translate(-27.2px, 16px) rotate(39deg);
    -o-transform: translate(-27.2px, 16px) rotate(39deg);
    transform: translate(-27.2px, 16px) rotate(39deg);
}
.playingCards.rotateHand ul.hand li:nth-child(11) {
    -moz-transform: translate(-35.2px, 24px) rotate(48deg);
    -webkit-transform: translate(-35.2px, 24px) rotate(48deg);
    -o-transform: translate(-35.2px, 24px) rotate(48deg);
    transform: translate(-35.2px, 24px) rotate(48deg);
}
.playingCards.rotateHand ul.hand li:nth-child(12) {
    -moz-transform: translate(-44.8px, 33.6px) rotate(57deg);
    -webkit-transform: translate(-44.8px, 33.6px) rotate(57deg);
    -o-transform: translate(-44.8px, 33.6px) rotate(57deg);
    transform: translate(-44.8px, 33.6px) rotate(57deg);
}
.playingCards.rotateHand ul.hand li:nth-child(13) {
    -moz-transform: translate(-56px, 44.8px) rotate(66deg);
    -webkit-transform: translate(-56px, 44.8px) rotate(66deg);
    -o-transform: translate(-56px, 44.8px) rotate(66deg);
    transform: translate(-56px, 44.8px) rotate(66deg);
}

/* deck */
.playingCards ul.deck li:nth-child(1)  { left: 0;    bottom: 0; }
.playingCards ul.deck li:nth-child(2)  { left: 2px;  bottom: 1px; }
.playingCards ul.deck li:nth-child(3)  { left: 4px;  bottom: 2px; }
.playingCards ul.deck li:nth-child(4)  { left: 6px;  bottom: 3px; }
.playingCards ul.deck li:nth-child(5)  { left: 8px;  bottom: 4px; }
.playingCards ul.deck li:nth-child(6)  { left: 10px; bottom: 5px; }
.playingCards ul.deck li:nth-child(7)  { left: 12px; bottom: 6px; }
.playingCards ul.deck li:nth-child(8)  { left: 14px; bottom: 7px; }
.playingCards ul.deck li:nth-child(9)  { left: 16px; bottom: 8px; }
.playingCards ul.deck li:nth-child(10) { left: 18px; bottom: 9px; }
.playingCards ul.deck li:nth-child(11) { left: 20px; bottom: 10px; }
.playingCards ul.deck li:nth-child(12) { left: 22px; bottom: 11px; }
.playingCards ul.deck li:nth-child(13) { left: 24px; bottom: 12px; }
.playingCards ul.deck li:nth-child(14) { left: 26px; bottom: 13px; }
.playingCards ul.deck li:nth-child(15) { left: 28px; bottom: 14px; }
.playingCards ul.deck li:nth-child(16) { left: 30px; bottom: 15px; }
.playingCards ul.deck li:nth-child(17) { left: 32px; bottom: 16px; }
.playingCards ul.deck li:nth-child(18) { left: 34px; bottom: 17px; }
.playingCards ul.deck li:nth-child(19) { left: 36px; bottom: 18px; }
.playingCards ul.deck li:nth-child(20) { left: 38px; bottom: 19px; }
.playingCards ul.deck li:nth-child(21) { left: 40px; bottom: 20px; }
.playingCards ul.deck li:nth-child(22) { left: 42px; bottom: 21px; }
.playingCards ul.deck li:nth-child(23) { left: 44px; bottom: 22px; }
.playingCards ul.deck li:nth-child(24) { left: 46px; bottom: 23px; }
.playingCards ul.deck li:nth-child(25) { left: 48px; bottom: 24px; }
.playingCards ul.deck li:nth-child(26) { left: 50px; bottom: 25px; }
.playingCards ul.deck li:nth-child(27) { left: 52px; bottom: 26px; }
.playingCards ul.deck li:nth-child(28) { left: 54px; bottom: 27px; }
.playingCards ul.deck li:nth-child(29) { left: 56px; bottom: 28px; }
.playingCards ul.deck li:nth-child(30) { left: 58px; bottom: 29px; }
.playingCards ul.deck li:nth-child(31) { left: 60px; bottom: 30px; }
.playingCards ul.deck li:nth-child(32) { left: 62px; bottom: 31px; }