.jquery-message{position:fixed;border-radius:5px;color:#fff;z-index:1000;max-width:400px;display:block} .jquery-message-box{padding:15px;border-radius:5px} .jquery-message-h2{font-size:16px;height:30px;font-weight:700} .jquery-message-nav{font-size:14px} .jquery-message-black{background:#333;background-image:linear-gradient(to bottom,#444,#222)} .jquery-message-red{background:#b02222;background-image:linear-gradient(to bottom,#e22,#b02222)} .jquery-message-blue{background:#2b91d9;background-image:linear-gradient(to bottom,#5abaff,#2b91d9)} .jquery-message-yellow{color:#744700;text-shadow:0 1px 0 rgba(255,255,255,.6);background-image:linear-gradient(to bottom,#ffd665,#ffb11f)} .jquery-message-green{background:#70a800;background-image:linear-gradient(to bottom,#95cc2a,#70a800)} .jquery-message *{box-sizing:border-box;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .jquery-message-topright{right:20px;top:20px} .jquery-message-lowerleft{left:20px} .jquery-message-lowerleft .jquery-message-black{background:url(images/black.png) repeat-y #333} .jquery-message-lowerleft .jquery-message-red{background:url(images/red.png) repeat-y #333} .jquery-message-lowerleft .jquery-message-blue{background:url(images/blue.png) repeat-y #333} .jquery-message-lowerleft .jquery-message-yellow{color:#fff;background:url(images/yellow.png) repeat-y #333} .jquery-message-lowerleft .jquery-message-green{background:url(images/green.png) repeat-y #333} .jquery-message-lowerright{right:20px;bottom:20px;width:300px;word-break:break-all;word-wrap:break-word} .animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both} @-webkit-keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1} 80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)} to{-webkit-transform:perspective(400px);transform:perspective(400px)} } @keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1} 80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)} to{-webkit-transform:perspective(400px);transform:perspective(400px)} } .flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX} .flipInY,.flipOutX{-webkit-backface-visibility:visible!important} @-webkit-keyframes flipOutX{from{-webkit-transform:perspective(400px);transform:perspective(400px)} 30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1} to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0} } @keyframes flipOutX{from{-webkit-transform:perspective(400px);transform:perspective(400px)} 30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1} to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0} } .flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;backface-visibility:visible!important} @-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} to{opacity:1;-webkit-transform:none;transform:none} } @keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} to{opacity:1;-webkit-transform:none;transform:none} } .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} @-webkit-keyframes fadeOutLeft{from{opacity:1} to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} } @keyframes fadeOutLeft{from{opacity:1} to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} } .fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft} @-webkit-keyframes tada{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} } @keyframes tada{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} } .tada{-webkit-animation-name:tada;animation-name:tada} @-webkit-keyframes zoomOut{from{opacity:1} 50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} to{opacity:0} } @keyframes zoomOut{from{opacity:1} 50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} to{opacity:0} } .zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}