| /* 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; |
| } |
| |
| .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; |
| } |
| |