/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 07-Feb-2014, 14:36:23
    Author     : Chris
*/
#leftarrow {
    position: absolute;
    top: 0px;
    width: 101px;
    height: 26px;
    background-image: url('../images/gesture-arrow-left-sm.png');
}

div.leftarrow {
    position: absolute;
    top: 0px;
    width: 101px;
    height: 26px;
    background-image: url('../images/gesture-arrow-left-sm.png');
}

div.gesture-hand {
    opacity: 0;
    position: absolute;
    width: 89px;
    height: 76px;
    top: 1px;
    left: 76px;
    background-image: url('../images/gesture-hand-sm.png');
    animation: handAnimation 2s;
    -webkit-animation: handAnimation 2s;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
}

div.gesture-swipe-left {
    opacity: 0;
    animation: gestureAnimation 4s;
    -webkit-animation: gestureAnimation 4s;
}

@keyframes handAnimation {
    0% {margin-left: 60px; opacity: 0;}
    10% {margin-left: 60px; opacity: 0;}
    30% {margin-left: 0px; opacity: 1;}
    60% {margin-left: 0px; opacity: 1;}
    80% {margin-left: -100px; opacity: 0;}
}
@-webkit-keyframes handAnimation {
    0% {margin-left: 60px; opacity: 0;}
    10% {margin-left: 60px; opacity: 0;}
    30% {margin-left: 0px; opacity: 1;}
    60% {margin-left: 0px; opacity: 1;}
    80% {margin-left: -100px; opacity: 0;}
}

@keyframes gestureAnimation {
    0% {opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes gestureAnimation {
    0% {opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}


#uparrow {
    position: absolute;
    top: 0px;
    width: 26px;
    height: 100px;
    background-image: url('../images/gesture-arrow-up-sm.png');
}

div.uparrow {
    position: absolute;
    top: 0px;
    width: 26px;
    height: 100px;
    background-image: url('../images/gesture-arrow-up-sm.png');
}

div.gesture-hand-up {
    opacity: 0;
    position: absolute;
    width: 77px;
    height: 89px;
    top: 11px;
    left: 0px;
    background-image: url('../images/gesture-hand-up-sm.png');
    animation: handUpAnimation 2s;
    -webkit-animation: handUpAnimation 2s;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
}

div.gesture-swipe-up {
    opacity: 0;
    animation: gestureAnimation 6s;
    -webkit-animation: gestureAnimation 6s;
}

@keyframes handUpAnimation {
    0% {margin-top: 60px; opacity: 0;}
    10% {margin-top: 60px; opacity: 0;}
    30% {margin-top: 0px; opacity: 1;}
    60% {margin-top: 0px; opacity: 1;}
    80% {margin-top: -100px; opacity: 0;}
}
@-webkit-keyframes handUpAnimation {
    0% {margin-top: 60px; opacity: 0;}
    10% {margin-top: 60px; opacity: 0;}
    30% {margin-top: 0px; opacity: 1;}
    60% {margin-top: 0px; opacity: 1;}
    80% {margin-top: -100px; opacity: 0;}
}