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