@-ms-keyframes spin {
    from { -ms-transform: rotate(-90deg); }
    to { -ms-transform: rotate(270deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(-90deg); }
    to { -moz-transform: rotate(270deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(-90deg); }
    to { -webkit-transform: rotate(270deg); }
}
@keyframes spin {
    from {
        transform:rotate(-90deg);
    }
    to {
        transform:rotate(270deg);
    }
}

.wr-box {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 0 auto; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;    
} 
.wr-name {
    position: relative;
    text-align: center;
    z-index: 1;
}
.wr-tempo {
    text-align: center;
    display: block;
    position: relative;
    margin:0 auto;
    width: 45px;
    top:46%;
    z-index: 10;
}
.wr-play {
    display: block;
    position: relative;
    margin:0 auto;
    top:47%;
    z-index: 10;
    cursor: pointer;
}
.wr-hand {
    position:absolute; 
    top:50%; left:50%; 
    height:2px; margin-top:0px; width:42%; 
    background:#666;
    display:block;
    -webkit-transform-origin: center left; 
    -moz-transform-origin: center left; 
    -ms-transform-origin: center left; 
    -o-transform-origin: center left; 
    transform-origin: center left; 
    transform: rotate(-90deg); 
    z-index:2; 
}

.wr-hand-animation-add, .wr-hand-animation-remove {
/*    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
*/}

.wr-hand-animation,
.wr-hand-animation-add.wr-hand-animation-add-active {
    background: #000;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;    
}

.wr-hand-animation-remove.wr-hand-animation-remove-active {
    -webkit-animation-duration: 0ms;
}


.wr-marker {
    display:block; 
    position:absolute; 
    top:50%; 
    left:50%;
    margin-top:0px;
    width:51%; background:#FFF; 
    -webkit-transform-origin: center left; 
    -moz-transform-origin: center left; 
    -ms-transform-origin: center left; 
    -o-transform-origin: center left; 
    transform-origin: center left; 
}


.ws-outer {
    position: absolute; 
    left:50%; 
    top:50%; 
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #999; 
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ws-inner {
    position: absolute; 
    top: 8px;
    left: 8px;
    width: 284px;
    height: 284px;
    border-radius: 50%;
    background: #fff;
    cursor:default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ws-picker {
    display:block; 
    z-index:2; 
    position:absolute; 
    top:50%;
    left:50%; 
    height:0px;
    margin-top:0px;
    width:50%;
    -webkit-transform-origin: center left;
    -moz-transform-origin: center left;
    -ms-transform-origin: center left;
    -o-transform-origin: center left;
    transform-origin: center left;
}
.ws-picker-circle {
    display: block;
    width: 16px;
    height: 16px; 
    border-radius: 50%;
    margin: -8px -8px 0 auto;
    cursor: move;
    border:1px solid #666;
    color: white;
    text-align: center;
    padding: 0;
    padding-top: -2px;
    font-size: 11px;
}