.SuspendedBall{width:50px;height:50px;background:#3071a9;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;z-index:2;display:none;position:fixed;top:20%;right:0}
.SuspendedBall>div{width:30px;height:30px;margin:10px;background:#fff;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8;background-repeat:no-repeat;background-size:80% auto;background-position-x:50%;background-position-y:50%}
@media screen and (max-width:500px){.SuspendedBall{display:block}
}
@keyframes SuspendedBallToLeft{100%{left:0}
}
@-webkit-keyframes SuspendedBallToLeft{100%{left:0}
}
@-moz-keyframes SuspendedBallToLeft{100%{left:0}
}
.ToLeft{animation:SuspendedBallToLeft 1s normal;-moz-animation:SuspendedBallToLeft 1s normal;-webkit-animation:SuspendedBallToLeft 1s normal;animation-iteration-count:1;-moz-animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
@keyframes SuspendedBallToTop{100%{top:0}
}
@-webkit-keyframes SuspendedBallToTop{100%{top:0}
}
@-moz-keyframes SuspendedBallToTop{100%{top:0}
}
.ToTop{animation:SuspendedBallToTop 1s normal;-moz-animation:SuspendedBallToTop 1s normal;-webkit-animation:SuspendedBallToTop 1s normal;animation-iteration-count:1;-moz-animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
@keyframes SuspendedBallToBottom{100%{top:calc(100% - 50px);top:-webkit-calc(100% - 50px);top:-moz-calc(100% - 50px)}
}
@-webkit-keyframes SuspendedBallToBottom{100%{top:calc(100% - 50px);top:-webkit-calc(100% - 50px);top:-moz-calc(100% - 50px)}
}
@-moz-keyframes SuspendedBallToBottom{100%{top:calc(100% - 50px);top:-webkit-calc(100% - 50px);top:-moz-calc(100% - 50px)}
}
.ToBottom{animation:SuspendedBallToBottom 1s normal;-moz-animation:SuspendedBallToBottom 1s normal;-webkit-animation:SuspendedBallToBottom 1s normal;animation-iteration-count:1;-moz-animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
@keyframes SuspendedBallToRight{100%{left:calc(100% - 50px);left:-webkit-calc(100% - 50px);left:-moz-calc(100% - 50px)}
}
@-webkit-keyframes SuspendedBallToRight{100%{left:calc(100% - 50px);left:-webkit-calc(100% - 50px);left:-moz-calc(100% - 50px)}
}
@-moz-keyframes SuspendedBallToRight{100%{left:calc(100% - 50px);left:-webkit-calc(100% - 50px);left:-moz-calc(100% - 50px)}
}
.ToRight{animation:SuspendedBallToRight .5s normal;-moz-animation:SuspendedBallToRight .5s normal;-webkit-animation:SuspendedBallToRight .5s normal;animation-iteration-count:1;-moz-animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.BallBox{position:fixed;z-index:999;top:calc(50% - 160px);left:calc(50% - 160px);display:block;width:300px;border:1px solid grey;border-radius:10px;height:300px;padding:10px;display:none}
.BallBox>.Bg{position:absolute;z-index:998;width:300px;height:300px;background-color:#ededed;background-image:url(/Images/Self.png);background-repeat:no-repeat;background-size:50% auto;background-position:50% 50%;filter:alpha(opacity=30);-moz-opacity:.3;opacity:.3}
.BallBox>.BallBoxInfo{position:absolute;z-index:999;width:300px;height:300px;overflow:auto}


SuspendedBall.css