.rating { font-size:1.8em; line-height:1.5; text-align:center; overflow:hidden }
.rating a { position:relative; float:right; color:#bbb; text-decoration:none; letter-spacing:0.125em }
.rating a:first-child { margin-right:0.05em }
.rating a, .rating a:after { transition:color .4s }
.rating a:hover, .rating a:hover:after { -webkit-animation:pop 0.2s; animation:pop 0.2s }
.rating a:active, .rating a:active:after { -webkit-animation:push 0.2s; animation:push 0.2s }
.rating[data-rating] a:hover, .rating[data-rating] a:hover:after, .rating[data-rating] a:hover ~ a, .rating[data-rating] a:hover ~ a:after,
.rating[data-rating] a:focus, .rating[data-rating] a:focus:after, .rating[data-rating] a:focus ~ a, .rating[data-rating] a:focus ~ a:after { color:tomato; outline:none }
.rating-stars { display:inline-block }
.rating-votes { clear:both; font-size:0.275em; line-height:1; color:#999 }
.rating a:before { content:'\2605'; position:absolute; z-index:-1; color:#e5e5e5; transform:scale(1.5); transform-origin:44% 54% }
[data-rating^="1.5"] .star-2:after, [data-rating^="2.5"] .star-3:after, [data-rating^="3.5"] .star-4:after, [data-rating^="4.5"] .star-5:after { content:'\2605'; position:absolute; left:0; right:56%; overflow:hidden }
[data-rating^="1"] .star-1, [data-rating^="1.5"] .star-2:after, 
[data-rating^="2"] .star-2, [data-rating^="2"] .star-2 ~ a, [data-rating^="2.5"] .star-3:after, 
[data-rating^="3"] .star-3, [data-rating^="3"] .star-3 ~ a, [data-rating^="3.5"] .star-4:after, 
[data-rating^="4"] .star-4, [data-rating^="4"] .star-4 ~ a, [data-rating^="4.5"] .star-5:after, 
[data-rating^="5"] .star-5, [data-rating^="5"] .star-5 ~ a { color:orange }
@-webkit-keyframes pop { 50% { -webkit-transform:scale(1.2) } }
@keyframes pop { 50% { transform:scale(1.2) } }
@-webkit-keyframes push { 50% { -webkit-transform:scale(0.8) } }
@keyframes push { 50% { transform:scale(0.8) } }
#rating-message { font-size:0.275em; font-weight:bold; color:transparent }
#rating-message.voted { -webkit-animation:pop 0.2s ease 0.2s; animation:pop 0.2s ease 0.2s; color:#999; transition:color .4s }
/* U+FE0E VARIATION SELECTOR-15 needed for Safari - https://stackoverflow.com/a/38362138 / http://unicode.org/emoji/charts/emoji-variants.html#2b1c */
#rating-message.voted:before { content:'\2714\fe0e'; display:inline; vertical-align:middle; font-size:1.5em; line-height:1.5; margin:0 0.125em 0 -0.5em; color:yellowgreen }
</style>

<!--[if lte IE 8]>
<style>
#rating-message.voted:before { font-size:1em }