/* Sprite CSS */ .case-border { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 32px; height: 32px; padding: 12px; border: 2px solid white; box-shadow: 0 0 4px 1px black; -moz-box-shadow: 0 0 4px 1px black; -webkit-box-shadow: 0 0 4px 1px black; -o-box-shadow: 0 0 4px 1px black; margin: auto; } .case-wrapper { margin: 24px; float: left; width: 100px; height: 100px; } .case-wrapper i { font-size: 32px; color: #f8f8f8; margin-top: 8px; } .case-label { color: white; padding-top: 10px; text-align: center; text-shadow: 1px 1px 2px #000, 1px 1px 2px #000, 1px 1px 2px #000, 0px 0px 2px #000; } /* Hover and click effects */ .case-border:hover, .circle:hover, .hover-effect { box-shadow: 0 0 2px 0px black, 0 0 4px 1px white !important; -moz-box-shadow: 0 0 2px 0px black, 0 0 4px 1px white !important; -webkit-box-shadow: 0 0 2px 0px black, 0 0 4px 1px white !important; -o-box-shadow: 0 0 2px 0px black, 0 0 10px 1px white !important; } .case-border:active, .case-border:focus, .case-border-click { transform: scale(0.98, 0.98); -ms-transform: scale(0.98, 0.98); /* IE 9 */ -webkit-transform: scale(0.98, 0.98); /* Safari and Chrome */ -o-transform: scale(0.98, 0.98); /* Opera */ -moz-transform: scale(0.98, 0.98); /* Firefox */ } .circle:active, .circle:focus, .circle-click { transform: scale(1, 1); -ms-transform: scale(1, 1); /* IE 9 */ -webkit-transform: scale(1, 1); /* Safari and Chrome */ -o-transform: scale(1, 1); /* Opera */ -moz-transform: scale(1, 1); /* Firefox */ } .circle { border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 15px; line-height: 12px; min-width: 15px; background: #B00D07; padding: 3px; float: right; margin-top: -74px; margin-right: 10px; border: 2px solid white; box-shadow: 0 0 4px 1px black; -moz-box-shadow: 0 0 4px 1px black; -webkit-box-shadow: 0 0 4px 1px black; -o-box-shadow: 0 0 4px 1px black; } .circle-text { color: white; text-align: center; display: inline-block; margin-top: 1px; }