Game icon for ABC Brainfit

dabblet.css

/**
 * Game icon for ABC Brainfit
 */

.game,.game.locked::after,.game h4 {
	display:block;
	margin:0;
	box-sizing:border-box
}

.game,.game.locked::after {
	padding:0;
	width:100px;
	height:100px
}

.game {
	position:relative;
	background:transparent url(http://placehold.it/100x100) top left no-repeat;
	border:3px solid white;
	border-radius:10px;
	cursor:pointer
}

.game.locked::after {
	opacity:0.5;
	content:'';
	background:transparent url(http://brainfit-cedar.herokuapp.com/assets/locked.png) 27px 9px no-repeat
}

.game h4 {
	padding:0.3em;
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	font:normal normal 300 10pt/100% Arial;
	text-align:center;
	background:#2b2b2b;
	border-radius:5px;
	color:#fff
}

dabblet.html

<a class="game">
	<h4>Bridge</h4>
</a>


<a class="game locked">
	<h4>Abstract</h4>
</a>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}