@-webkit-keyframes hop {
       from{
        -webkit-transform: translate(0px,0px);
        }


         to {
        -webkit-transform: translate(0px,-10px);
        }  
      }

@-moz-keyframes hop {
       from{
        -moz-transform: translate(0px,0px);
        }


         to {
        -moz-transform: translate(0px,-10px);
        }  
      }
.there {
    color: #FFF;
    border-color: #0668B9;
    background-color: #D62233;  
    
}
.there{
    position:relative; 
    opacity:0.8;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    border-radius:5px;
    border-width: 0 1px 1px 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    padding: 7px;
    -webkit-border-radius:5px;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 0;
    -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 3px,rgba(0,0,0,0.2) 0 0 0 6px,rgba(255,255,255,0.2) 0 1px 0 5px;

}

.bounce {
    
-webkit-animation-name: hop;
    -webkit-animation-duration:.3s;
     -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name: hop;
    -moz-animation-duration:.3s;
     -moz-animation-direction:alternate;
    -moz-animation-timing-function:linear;
    -moz-animation-delay:0s;
    -moz-animation-iteration-count:infinite;
}

.there:after{ /*arrow added to downarrowdiv DIV*/
    content:'';
    display:block;
    position:absolute;
    top:100%; /*should be set to 100% */
    width:0;
    height:0;
    border: 10px solid;
    margin-left: -10px;
    left:50%;
}

.there:after{ /*arrow added to downarrowdiv DIV*/
    border-color: #D62233 transparent transparent transparent; /*border color should be same as div div background color*/
}