* {
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /*   Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: none;
} 
/*   Preload image hack */
body:after{
    display:none;
    content: url(Idle_sheet.png) url(Punched_Head_sheet.png) url(AJ_LowPunch.png);
}
#person {
    background: url(Idle_sheet.png) 0 0 no-repeat;
    width: 240px;
    height: 320px;
}

.upperHotSpot {
    background: transparent;
    border: none !important;
    font-size: 0;
    width: 240px;
    height: 160px;
}

.lowerHotSpot {
    background: transparent;
    border: none !important;
    font-size: 0;
    width: 240px;
    height: 160px;
}

#person.idle {
    background: url(Idle_sheet.png) 0 0 no-repeat;
    -moz-animation: idle 1.0s steps(13) 0 infinite;
    -o-animation: idle 1.0s steps(13) 0 infinite;
    -webkit-animation: idle 1.0s steps(13) 0 infinite;
    animation: idle 1.0s steps(13) 0 infinite;
}

@keyframes idle {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3120px;
    }
}

@-moz-keyframes idle {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3120px;
    }
}

@-webkit-keyframes idle {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3120px;
    }
}


#person.highPunch {
    background: url(Punched_Head_sheet.png) 0px 0 no-repeat;
    -moz-animation: high-punch 1.0s steps(9) 0ms 1;
    -o-animation: high-punch 1.0s steps(9) 0ms 1;
    -webkit-animation: high-punch 1.0s steps(9) 0ms 1;
    animation: high-punch 1.0s steps(9) 0ms 1;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes high-punch {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2160px;
    }
}

@-webkit-keyframes high-punch {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2160px;
    }
}
#person.lowPunch {
    background: url(AJ_LowPunch.png) 0px 0 no-repeat;
    -moz-animation: low-punch 1.7s steps(19) 0ms 1;
    -o-animation: low-punch 1.7s steps(19) 0ms 1;
    -webkit-animation: low-punch 1.7s steps(19) 0ms 1;
    animation: low-punch 1.7s steps(19) 0ms 1;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes low-punch {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -4560px;
    }
}

@-webkit-keyframes low-punch {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -4560px;
    }
}