/**
 * Styles for CSS Playing Cards
 *
 * @author   Anika Henke <anika@selfthinker.org>
 * @license  CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
 * @version  2011-06-14
 * @link     http://selfthinker.github.com/CSS-Playing-Cards/
 */

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

.playingCards {
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: visibility 0s, opacity 0.2s, transform 0.3s;
    opacity: 1;
}

.playingCards.scale-fade-in {
    visibility: hidden;
    transform: translateY(-10px) scale(1.2);
    opacity: 0;
}

.playingCards.fade-in {
    visibility: hidden;
    opacity: 0;
}

.playingCards.fade-out {
    visibility: hidden;
    transform: translateY(0);
    transition: visibility 0.1s, opacity 0.05s;
    opacity: 0;
}

.playingCards .card {
    display: inline-block;
    width: 2.5em;
    height: 3.5em;
    border: 1px solid #666;
    border-radius: .3em;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    -khtml-border-radius: .3em;
    padding: .25em;
    margin: 0 .5em .5em 0;
    text-align: center;
    font-size: 1.5em; /* @change: adjust this value to make bigger or smaller cards */
    font-weight: normal;
    font-family: Arial, sans-serif, PingFangSC-Regular, sans-serif;
    position: relative;
    background-color: #fff;
    -moz-box-shadow: .2em .2em .5em #333;
    -webkit-box-shadow: .2em .2em .5em #333;
    box-shadow: .2em .2em .5em #333;
}

.playingCards a.card {
    text-decoration: none;
}

.playingCards.selectable label.card {
    cursor: pointer;
}

/* override orignal hover style */
.playingCards.selectable label.card:hover {
    bottom: 0;
}

/* .playingCards.selectable label.card:active::after {
    background-color: rgba(23, 146, 210, 0.5);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3em;
    height: 4em;
} */

.playingCards.selectable label.card.user-selecting::after {
    background-color: rgba(23, 146, 210, 0.5);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3em;
    height: 4em;
}

/* selected and hover state */
.playingCards a.card:hover, .playingCards a.card:active, .playingCards.selectable label.card.selected,
.playingCards label.card:hover,
.playingCards strong .card {
    bottom: 1em;
}
.playingCards label.card {
    cursor: pointer;
}

.playingCards .card.back {
    text-indent: -4000px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-image: url("./faces/pokerback.png"); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
    /* background-size: 100% 100%; */
    background-position: bottom;
    /*background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);*/
    /*background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));*/
    /* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */
}

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

.playingCards .card.diams {
    color: #f00 !important;
}
.playingCards.fourColours .card.diams {
    color: #00f !important;
}
[lang=de] .playingCards.fourColours .card.diams {
    color: #f60 !important;
}
.playingCards .card.hearts {
    color: #f00 !important;
}
.playingCards .card.spades {
    color: #000 !important;
}
[lang=de] .playingCards.fourColours .card.spades {
    color: #090 !important;
}
.playingCards .card.clubs {
    color: #000 !important;
}
.playingCards.fourColours .card.clubs {
    color: #090 !important;
}
[lang=de] .playingCards.fourColours .card.clubs {
    color: #000 !important;
}
.playingCards .card.joker {
    color: #000 !important;
}
.playingCards .card.joker.big {
    color: #f00 !important;
}

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

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

.playingCards .card .rank,
.playingCards .card .suit {
    display: block;
    line-height: 1;
    text-align: left;
}
.playingCards .card .rank {
}
.playingCards .card .suit {
    line-height: .7;
}

/* checkbox */
.playingCards .card input {
    margin-top: -.05em;
    font: inherit;
}
.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: 2.4em;
}
.playingCards.inText .card input {
    margin-top: 0;
}

/* different rank letters for different languages */
.playingCards .card .rank:after,
.playingCards .card.joker .rank:before {
    position: absolute;
    top: .25em;
    left: .25em;
    background: #fff;
}
[lang=de] .playingCards .card.rank-j .rank:after {
    content: "B";
}
[lang=fr] .playingCards .card.rank-j .rank:after {
    content: "V";
}
[lang=de] .playingCards .card.rank-q .rank:after,
[lang=fr] .playingCards .card.rank-q .rank:after {
    content: "D";
}
[lang=fr] .playingCards .card.rank-k .rank:after {
    content: "R";
}

/* joker (top left symbol) */
.playingCards .card.joker .rank {
    position: absolute;
}
.playingCards .card.joker .rank:before {
    content: "";
    top: 0;
    left: 0;
}
.playingCards .card.joker .suit {
    text-indent: -9999px;
}

/* inner multiple suits */
.playingCards .card:not(full-content) .suit:after {
    display: block;
    margin-top: -.2em;
    text-align: center;
    white-space: pre;
    line-height: .9;
    font-size: 2.5em;
    word-spacing: -.05em;
}

.playingCards .card.full-content .suit:after {
    display: block;
    margin-top: -.9em;
    text-align: center;
    white-space: pre;
    line-height: .9;
    font-size: 1.3em;
    word-spacing: -.05em;
}

/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
.playingCards .card.full-content.hearts .suit:after {
    word-spacing: -.15em;
}
.playingCards .card.full-content.hearts.rank-10 .suit:after {
    word-spacing: -.05em;
    letter-spacing: -.1em;
}
.playingCards .card.full-content.clubs.rank-10 .suit:after {
    word-spacing: -.15em;
}

/* 8, 9, 10 are the most crowded */
.playingCards .card.full-content.rank-8 .suit:after,
.playingCards .card.full-content.rank-9 .suit:after {
    letter-spacing: -.075em;
}
.playingCards .card.full-content.rank-10 .suit:after {
    letter-spacing: -.1em;
}
.playingCards .card.full-content.clubs .suit:after {
    letter-spacing: -.125em;
}

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

/* diamonds */
.playingCards .card.diams:not(full-content) .suit:after {
    content: "\2666";
}
.playingCards .card.rank-2.diams.full-content .suit:after {
    content: "\2666 \A\A\2666";
}
.playingCards .card.rank-3.diams.full-content .suit:after {
    content: "\2666 \A\2666 \A\2666";
}
.playingCards .card.rank-4.diams.full-content .suit:after {
    content: "\2666\00A0\00A0\00A0\2666 \A\A\2666\00A0\00A0\00A0\2666";
}
.playingCards .card.rank-5.diams.full-content .suit:after {
    content: "\2666\00A0\00A0\00A0\2666 \A\2666 \A\2666\00A0\00A0\00A0\2666";
}
.playingCards .card.rank-6.diams.full-content .suit:after {
    content: "\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666";
}
.playingCards .card.rank-7.diams.full-content .suit:after {
    content: "\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666";
}
.playingCards .card.rank-8.diams.full-content .suit:after {
    content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666";
}
.playingCards .card.rank-9.diams.full-content .suit:after {
    content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
}
.playingCards .card.rank-10.diams.full-content .suit:after {
    content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
}

/* hearts */
.playingCards .card.hearts:not(full-content) .suit:after {
    content: "\2665";
}
.playingCards .card.rank-2.hearts.full-content .suit:after {
    content: "\2665 \A\A\2665";
}
.playingCards .card.rank-3.hearts.full-content .suit:after {
    content: "\2665 \A\2665 \A\2665";
}
.playingCards .card.rank-4.hearts.full-content .suit:after {
    content: "\2665\00A0\00A0\00A0\2665 \A\A\2665\00A0\00A0\00A0\2665";
}
.playingCards .card.rank-5.hearts.full-content .suit:after {
    content: "\2665\00A0\00A0\00A0\2665 \A\2665 \A\2665\00A0\00A0\00A0\2665";
}
.playingCards .card.rank-6.hearts.full-content .suit:after {
    content: "\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665";
}
.playingCards .card.rank-7.hearts.full-content .suit:after {
    content: "\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665";
}
.playingCards .card.rank-8.hearts.full-content .suit:after {
    content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665";
}
.playingCards .card.rank-9.hearts.full-content .suit:after {
    content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665";
}
.playingCards .card.rank-10.hearts.full-content .suit:after {
    content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665";
}

/* spades */
.playingCards .card.spades:not(full-content) .suit:after {
    content: "\2660";
}
.playingCards .card.rank-2.spades.full-content .suit:after {
    content: "\2660 \A\A\2660";
}
.playingCards .card.rank-3.spades.full-content .suit:after {
    content: "\2660 \A\2660 \A\2660";
}
.playingCards .card.rank-4.spades.full-content .suit:after {
    content: "\2660\00A0\00A0\00A0\2660 \A\A\2660\00A0\00A0\00A0\2660";
}
.playingCards .card.rank-5.spades.full-content .suit:after {
    content: "\2660\00A0\00A0\00A0\2660 \A\2660 \A\2660\00A0\00A0\00A0\2660";
}
.playingCards .card.rank-6.spades.full-content .suit:after {
    content: "\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660";
}
.playingCards .card.rank-7.spades.full-content .suit:after {
    content: "\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660";
}
.playingCards .card.rank-8.spades.full-content .suit:after {
    content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660";
}
.playingCards .card.rank-9.spades.full-content .suit:after {
    content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660";
}
.playingCards .card.rank-10.spades.full-content .suit:after {
    content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660";
}

/* clubs */
.playingCards .card.clubs:not(full-content) .suit:after {
    content: "\2663";
}
.playingCards .card.rank-2.clubs.full-content .suit:after {
    content: "\2663 \A\A\2663";
}
.playingCards .card.rank-3.clubs.full-content .suit:after {
    content: "\2663 \A\2663 \A\2663";
}
.playingCards .card.rank-4.clubs.full-content .suit:after {
    content: "\2663\00A0\00A0\00A0\2663 \A\A\2663\00A0\00A0\00A0\2663";
}
.playingCards .card.rank-5.clubs.full-content .suit:after {
    content: "\2663\00A0\00A0\00A0\2663 \A\2663 \A\2663\00A0\00A0\00A0\2663";
}
.playingCards .card.rank-6.clubs.full-content .suit:after {
    content: "\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663";
}
.playingCards .card.rank-7.clubs.full-content .suit:after {
    content: "\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663";
}
.playingCards .card.rank-8.clubs.full-content .suit:after {
    content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663";
}
.playingCards .card.rank-9.clubs.full-content .suit:after {
    content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663";
}
.playingCards .card.rank-10.clubs.full-content .suit:after {
    content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663";
}

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

.playingCards.faceImages .card.rank-j.full-content .suit:after,
.playingCards.faceImages .card.rank-q.full-content .suit:after,
.playingCards.faceImages .card.rank-k.full-content .suit:after {
    content: '';
}
.playingCards.faceImages .card.rank-j.full-content,
.playingCards.faceImages .card.rank-q.full-content,
.playingCards.faceImages .card.rank-k.full-content,
.playingCards.faceImages .card.joker.full-content {
    background-repeat: no-repeat;
    background-position: -1em 0;
    /* @change: smaller cards: more negative distance from the left
       bigger cards: 0 or more positive distance from the left */

    /* for a centered full background image:
    background-position: .35em 0;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    -khtml-background-size: contain;
    background-size: contain;
    */
}

/*.playingCards.faceImages .card.rank-j.diams  { background-image: url(faces/JD.gif); }*/
/*.playingCards.faceImages .card.rank-j.hearts { background-image: url(faces/JH.gif); }*/
/*.playingCards.faceImages .card.rank-j.spades { background-image: url(faces/JS.gif); }*/
/*.playingCards.faceImages .card.rank-j.clubs  { background-image: url(faces/JC.gif); }*/

/*.playingCards.faceImages .card.rank-q.diams  { background-image: url(faces/QD.gif); }*/
/*.playingCards.faceImages .card.rank-q.hearts { background-image: url(faces/QH.gif); }*/
/*.playingCards.faceImages .card.rank-q.spades { background-image: url(faces/QS.gif); }*/
/*.playingCards.faceImages .card.rank-q.clubs  { background-image: url(faces/QC.gif); }*/

/*.playingCards.faceImages .card.rank-k.diams  { background-image: url(faces/KD.gif); }*/
/*.playingCards.faceImages .card.rank-k.hearts { background-image: url(faces/KH.gif); }*/
/*.playingCards.faceImages .card.rank-k.spades { background-image: url(faces/KS.gif); }*/
/*.playingCards.faceImages .card.rank-k.clubs  { background-image: url(faces/KC.gif); }*/

/*.playingCards.faceImages .card.joker         { background-image: url(faces/joker.gif); }*/
/*.playingCards.simpleCards .card.rank-j,*/
/*.playingCards.simpleCards .card.rank-q,*/
/*.playingCards.simpleCards .card.rank-k       { background-image: none !important; }*/


.playingCards .card { background-size: 108% 100%; background-position: center }
.playingCards .card span.rank { display: none; }
.playingCards .card span.suit { display: none; }
.playingCards .card.rank-a.diams   { background-image: url(faces/custom/Poker_DA.png); }
.playingCards .card.rank-a.hearts   { background-image: url(faces/custom/Poker_HA.png); }
.playingCards .card.rank-a.spades   { background-image: url(faces/custom/Poker_SA.png); }
.playingCards .card.rank-a.clubs   { background-image: url(faces/custom/Poker_CA.png); }
.playingCards .card.rank-2.diams   { background-image: url(faces/custom/Poker_D2.png); }
.playingCards .card.rank-2.hearts   { background-image: url(faces/custom/Poker_H2.png); }
.playingCards .card.rank-2.spades   { background-image: url(faces/custom/Poker_S2.png); }
.playingCards .card.rank-2.clubs   { background-image: url(faces/custom/Poker_C2.png); }
.playingCards .card.rank-3.diams   { background-image: url(faces/custom/Poker_D3.png); }
.playingCards .card.rank-3.hearts   { background-image: url(faces/custom/Poker_H3.png); }
.playingCards .card.rank-3.spades   { background-image: url(faces/custom/Poker_S3.png); }
.playingCards .card.rank-3.clubs   { background-image: url(faces/custom/Poker_C3.png); }
.playingCards .card.rank-4.diams   { background-image: url(faces/custom/Poker_D4.png); }
.playingCards .card.rank-4.hearts   { background-image: url(faces/custom/Poker_H4.png); }
.playingCards .card.rank-4.spades   { background-image: url(faces/custom/Poker_S4.png); }
.playingCards .card.rank-4.clubs   { background-image: url(faces/custom/Poker_C4.png); }
.playingCards .card.rank-5.diams   { background-image: url(faces/custom/Poker_D5.png); }
.playingCards .card.rank-5.hearts   { background-image: url(faces/custom/Poker_H5.png); }
.playingCards .card.rank-5.spades   { background-image: url(faces/custom/Poker_S5.png); }
.playingCards .card.rank-5.clubs   { background-image: url(faces/custom/Poker_C5.png); }
.playingCards .card.rank-6.diams   { background-image: url(faces/custom/Poker_D6.png); }
.playingCards .card.rank-6.hearts   { background-image: url(faces/custom/Poker_H6.png); }
.playingCards .card.rank-6.spades   { background-image: url(faces/custom/Poker_S6.png); }
.playingCards .card.rank-6.clubs   { background-image: url(faces/custom/Poker_C6.png); }
.playingCards .card.rank-7.diams   { background-image: url(faces/custom/Poker_D7.png); }
.playingCards .card.rank-7.hearts   { background-image: url(faces/custom/Poker_H7.png); }
.playingCards .card.rank-7.spades   { background-image: url(faces/custom/Poker_S7.png); }
.playingCards .card.rank-7.clubs   { background-image: url(faces/custom/Poker_C7.png); }
.playingCards .card.rank-8.diams   { background-image: url(faces/custom/Poker_D8.png); }
.playingCards .card.rank-8.hearts   { background-image: url(faces/custom/Poker_H8.png); }
.playingCards .card.rank-8.spades   { background-image: url(faces/custom/Poker_S8.png); }
.playingCards .card.rank-8.clubs   { background-image: url(faces/custom/Poker_C8.png); }
.playingCards .card.rank-9.diams   { background-image: url(faces/custom/Poker_D9.png); }
.playingCards .card.rank-9.hearts   { background-image: url(faces/custom/Poker_H9.png); }
.playingCards .card.rank-9.spades   { background-image: url(faces/custom/Poker_S9.png); }
.playingCards .card.rank-9.clubs   { background-image: url(faces/custom/Poker_C9.png); }
.playingCards .card.rank-10.diams   { background-image: url(faces/custom/Poker_D10.png); }
.playingCards .card.rank-10.hearts   { background-image: url(faces/custom/Poker_H10.png); }
.playingCards .card.rank-10.spades   { background-image: url(faces/custom/Poker_S10.png); }
.playingCards .card.rank-10.clubs   { background-image: url(faces/custom/Poker_C10.png); }
.playingCards .card.rank-j.diams   { background-image: url(faces/custom/Poker_DJ.png); }
.playingCards .card.rank-j.hearts   { background-image: url(faces/custom/Poker_HJ.png); }
.playingCards .card.rank-j.spades   { background-image: url(faces/custom/Poker_SJ.png); }
.playingCards .card.rank-j.clubs   { background-image: url(faces/custom/Poker_CJ.png); }
.playingCards .card.rank-q.diams   { background-image: url(faces/custom/Poker_DQ.png); }
.playingCards .card.rank-q.hearts   { background-image: url(faces/custom/Poker_HQ.png); }
.playingCards .card.rank-q.spades   { background-image: url(faces/custom/Poker_SQ.png); }
.playingCards .card.rank-q.clubs   { background-image: url(faces/custom/Poker_CQ.png); }
.playingCards .card.rank-k.diams   { background-image: url(faces/custom/Poker_DK.png); }
.playingCards .card.rank-k.hearts   { background-image: url(faces/custom/Poker_HK.png); }
.playingCards .card.rank-k.spades   { background-image: url(faces/custom/Poker_SK.png); }
.playingCards .card.rank-k.clubs   { background-image: url(faces/custom/Poker_CK.png); }
.playingCards .card.big.joker   { background-image: url(faces/custom/Poker_Joker_R.png); }
.playingCards .card.little.joker   { background-image: url(faces/custom/Poker_Joker_B.png); }

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

.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-j.full-content .suit:after,
.playingCards .card.rank-q.full-content .suit:after,
.playingCards .card.rank-k.full-content .suit:after,
.playingCards .card.rank-a.full-content .suit:after,
.playingCards .card.joker.full-content .rank:after {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 3em;
    right: .1em;
    bottom: .25em;
    word-spacing: normal;
    letter-spacing: normal;
    line-height: 1;
}
.playingCards .card.rank-j .suit:after {
    content: "\265F";
    right: .15em;
}
.playingCards .card.rank-q .suit:after {
    content: "\265B";
}
.playingCards .card.rank-k .suit:after {
    content: "\265A";
}
/* joker (inner symbol) */
.playingCards.faceImages .card.joker .rank:after {
    content: "";
}
.playingCards .card.joker .rank:after {
    position: absolute;
    content: "JOKER";
    writing-mode: vertical-lr;
    font-weight: bold;
    font-size: 0.8em;
    top: 0;
    left: -0.1em;
}

/* big suits in middle */
.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-a .suit:after {
    font-family: Arial, sans-serif, PingFangSC-Regular, sans-serif;;
    line-height: .9;
    bottom: .35em;
}
.playingCards.simpleCards .card.diams .suit:after,
.playingCards .card.rank-a.diams .suit:after {
    content: "\2666";
    right: .4em;
}
.playingCards.simpleCards .card.hearts .suit:after,
.playingCards .card.rank-a.hearts .suit:after {
    content: "\2665";
    right: .35em;
}
.playingCards.simpleCards .card.spades .suit:after,
.playingCards .card.rank-a.spades .suit:after {
    content: "\2660";
    right: .35em;
}
.playingCards.simpleCards .card.clubs .suit:after,
.playingCards .card.rank-a.clubs .suit:after {
    content: "\2663";
    right: .3em;
}

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

.playingCards.inText .card {
    font-size: .4em;
    vertical-align: middle;
}
.playingCards.inText .card span.rank,
.playingCards.inText .card span.suit {
    text-align: center;
}
.playingCards.inText .card span.rank {
    font-size: 2em;
    margin-top: .2em;
}
.playingCards.inText .card span.suit {
    font-size: 2.5em;
}
.playingCards.inText .card .suit:after,
.playingCards.inText .card.joker .rank:after {
    content: "" !important;
}
.playingCards.inText .card .rank:after {
    left: .5em;
    padding: 0 .1em;
}


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

.playingCards ul.table,
.playingCards ul.hand,
.playingCards ul.deck {
    list-style-type: none;
    padding: 0;
    margin: 0 0 1.5em 0;
    position: relative;
    clear: both;
}
.playingCards ul.hand {
    margin-bottom: 3.5em;
}
.playingCards ul.table li,
.playingCards ul.hand li,
.playingCards ul.deck li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
}

.playingCards ul.hand,
.playingCards ul.deck {
    height: 8em;
}
.playingCards ul.hand li,
.playingCards ul.deck li {
    position: absolute;
}
.playingCards ul.hand li {
    bottom: 0;
}

.playingCards.loose ul.hand li:nth-child(1)  { left: 0; }
.playingCards.loose ul.hand li:nth-child(2)  { left: 1.4em; }
.playingCards.loose ul.hand li:nth-child(3)  { left: 2.8em; }
.playingCards.loose ul.hand li:nth-child(4)  { left: 4.2em; }
.playingCards.loose ul.hand li:nth-child(5)  { left: 5.6em; }
.playingCards.loose ul.hand li:nth-child(6)  { left: 7.0em; }
.playingCards.loose ul.hand li:nth-child(7)  { left: 8.4em; }
.playingCards.loose ul.hand li:nth-child(8)  { left: 9.8em; }
.playingCards.loose ul.hand li:nth-child(9)  { left: 11.2em; }
.playingCards.loose ul.hand li:nth-child(10) { left: 12.6em; }
.playingCards.loose ul.hand li:nth-child(11) { left: 14.0em; }
.playingCards.loose ul.hand li:nth-child(12) { left: 15.4em; }
.playingCards.loose ul.hand li:nth-child(13) { left: 16.8em; }

.playingCards.loose ul.hand li:nth-child(14) { left: 18.2em; }
.playingCards.loose ul.hand li:nth-child(15) { left: 19.6em; }
.playingCards.loose ul.hand li:nth-child(16) { left: 21em; }
.playingCards.loose ul.hand li:nth-child(17) { left: 22.4em; }
.playingCards.loose ul.hand li:nth-child(18) { left: 23.8em; }
.playingCards.loose ul.hand li:nth-child(19) { left: 25.2em; }
.playingCards.loose ul.hand li:nth-child(20) { left: 26.6em; }
.playingCards.loose ul.hand li:nth-child(21) { left: 28em; }
.playingCards.loose ul.hand li:nth-child(22) { left: 29.4em; }
.playingCards.loose ul.hand li:nth-child(23) { left: 30.8em; }
.playingCards.loose ul.hand li:nth-child(24) { left: 32.2em; }
.playingCards.loose ul.hand li:nth-child(25) { left: 33.6em; }
.playingCards.loose ul.hand li:nth-child(26) { left: 35em; }

.playingCards ul.hand li:nth-child(1)  { left: 0; }
.playingCards ul.hand li:nth-child(2)  { left: 1.1em; }
.playingCards ul.hand li:nth-child(3)  { left: 2.2em; }
.playingCards ul.hand li:nth-child(4)  { left: 3.3em; }
.playingCards ul.hand li:nth-child(5)  { left: 4.4em; }
.playingCards ul.hand li:nth-child(6)  { left: 5.5em; }
.playingCards ul.hand li:nth-child(7)  { left: 6.6em; }
.playingCards ul.hand li:nth-child(8)  { left: 7.7em; }
.playingCards ul.hand li:nth-child(9)  { left: 8.8em; }
.playingCards ul.hand li:nth-child(10) { left: 9.9em; }
.playingCards ul.hand li:nth-child(11) { left: 11em; }
.playingCards ul.hand li:nth-child(12) { left: 12.1em; }
.playingCards ul.hand li:nth-child(13) { left: 13.2em; }

.playingCards ul.hand li:nth-child(14) { left: 14.3em; }
.playingCards ul.hand li:nth-child(15) { left: 15.4em; }
.playingCards ul.hand li:nth-child(16) { left: 16.5em; }
.playingCards ul.hand li:nth-child(17) { left: 17.6em; }
.playingCards ul.hand li:nth-child(18) { left: 18.7em; }
.playingCards ul.hand li:nth-child(19) { left: 19.8em; }
.playingCards ul.hand li:nth-child(20) { left: 20.9em; }
.playingCards ul.hand li:nth-child(21) { left: 22em; }
.playingCards ul.hand li:nth-child(22) { left: 23.1em; }
.playingCards ul.hand li:nth-child(23) { left: 24.2em; }
.playingCards ul.hand li:nth-child(24) { left: 25.3em; }
.playingCards ul.hand li:nth-child(25) { left: 26.4em; }
.playingCards ul.hand li:nth-child(26) { left: 27.5em; }

/* rotate cards if rotateHand option is on */
.playingCards.rotateHand ul.hand li:nth-child(1) {
    -moz-transform: translate(1.9em, .9em) rotate(-42deg);
    -webkit-transform: translate(1.9em, .9em) rotate(-42deg);
    -o-transform: translate(1.9em, .9em) rotate(-42deg);
    transform: translate(1.9em, .9em) rotate(-42deg);
}
.playingCards.rotateHand ul.hand li:nth-child(2) {
    -moz-transform: translate(1.5em, .5em) rotate(-33deg);
    -webkit-transform: translate(1.5em, .5em) rotate(-33deg);
    -o-transform: translate(1.5em, .5em) rotate(-33deg);
    transform: translate(1.5em, .5em) rotate(-33deg);
}
.playingCards.rotateHand ul.hand li:nth-child(3) {
    -moz-transform: translate(1.1em, .3em) rotate(-24deg);
    -webkit-transform: translate(1.1em, .3em) rotate(-24deg);
    -o-transform: translate(1.1em, .3em) rotate(-24deg);
    transform: translate(1.1em, .3em) rotate(-24deg);
}
.playingCards.rotateHand ul.hand li:nth-child(4) {
    -moz-transform: translate(.7em, .2em) rotate(-15deg);
    -webkit-transform: translate(.7em, .2em) rotate(-15deg);
    -o-transform: translate(.7em, .2em) rotate(-15deg);
    transform: translate(.7em, .2em) rotate(-15deg);
}
.playingCards.rotateHand ul.hand li:nth-child(5) {
    -moz-transform: translate(.3em, .1em) rotate(-6deg);
    -webkit-transform: translate(.3em, .1em) rotate(-6deg);
    -o-transform: translate(.3em, .1em) rotate(-6deg);
    transform: translate(.3em, .1em) rotate(-6deg);
}
.playingCards.rotateHand ul.hand li:nth-child(6) {
    -moz-transform: translate(-.1em, .1em) rotate(3deg);
    -webkit-transform: translate(-.1em, .1em) rotate(3deg);
    -o-transform: translate(-.1em, .1em) rotate(3deg);
    transform: translate(-.1em, .1em) rotate(3deg);
}
.playingCards.rotateHand ul.hand li:nth-child(7) {
    -moz-transform: translate(-.5em, .2em) rotate(12deg);
    -webkit-transform: translate(-.5em, .2em) rotate(12deg);
    -o-transform: translate(-.5em, .2em) rotate(12deg);
    transform: translate(-.5em, .2em) rotate(12deg);
}
.playingCards.rotateHand ul.hand li:nth-child(8) {
    -moz-transform: translate(-.9em, .3em) rotate(21deg);
    -webkit-transform: translate(-.9em, .3em) rotate(21deg);
    -o-transform: translate(-.9em, .3em) rotate(21deg);
    transform: translate(-.9em, .3em) rotate(21deg);
}
.playingCards.rotateHand ul.hand li:nth-child(9) {
    -moz-transform: translate(-1.3em, .6em) rotate(30deg);
    -webkit-transform: translate(-1.3em, .6em) rotate(30deg);
    -o-transform: translate(-1.3em, .6em) rotate(30deg);
    transform: translate(-1.3em, .6em) rotate(30deg);
}
.playingCards.rotateHand ul.hand li:nth-child(10) {
    -moz-transform: translate(-1.7em, 1em) rotate(39deg);
    -webkit-transform: translate(-1.7em, 1em) rotate(39deg);
    -o-transform: translate(-1.7em, 1em) rotate(39deg);
    transform: translate(-1.7em, 1em) rotate(39deg);
}
.playingCards.rotateHand ul.hand li:nth-child(11) {
    -moz-transform: translate(-2.2em, 1.5em) rotate(48deg);
    -webkit-transform: translate(-2.2em, 1.5em) rotate(48deg);
    -o-transform: translate(-2.2em, 1.5em) rotate(48deg);
    transform: translate(-2.2em, 1.5em) rotate(48deg);
}
.playingCards.rotateHand ul.hand li:nth-child(12) {
    -moz-transform: translate(-2.8em, 2.1em) rotate(57deg);
    -webkit-transform: translate(-2.8em, 2.1em) rotate(57deg);
    -o-transform: translate(-2.8em, 2.1em) rotate(57deg);
    transform: translate(-2.8em, 2.1em) rotate(57deg);
}
.playingCards.rotateHand ul.hand li:nth-child(13) {
    -moz-transform: translate(-3.5em, 2.8em) rotate(66deg);
    -webkit-transform: translate(-3.5em, 2.8em) rotate(66deg);
    -o-transform: translate(-3.5em, 2.8em) rotate(66deg);
    transform: translate(-3.5em, 2.8em) 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; }
