Standardization status

dabblet.css

/**
 * Standardization status
 */

body {
	background: #f9f7f3;
}

.standardization_status {
	position: relative;
	float: left; 
	width: 4em;
	height: 4em;
	text-indent: -1000px;
	background: url(http://docs.webplatform.org/w/skins/webplatform/images/standardization-status.svg)
	            hsl(40, 34%, 88%);
	background-size: 100% 600%;
	margin: 3em .8em;
	
	overflow: hidden;
	white-space: nowrap;
	border-radius: 50%;
	font: 90% Gudea, sans-serif;
	color: hsl(40, 34%, 30%);
	text-shadow: 0 1px 1px white;
	box-shadow: 0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset,
	            0 1px white,
	            0 0 0 15px #f9f7f3;
}

.standardization_status[title="W3C Working Draft"] {
	background-position: 0 -100%;
}

.standardization_status[title="W3C Last Call Working Draft"] {
	background-position: 0 -200%;
}

.standardization_status[title="W3C Candidate Recommendation"] {
	background-position: 0 -300%;
}

.standardization_status[title="W3C Proposed Recommendation"] {
	background-position: 0 -400%;
}

.standardization_status[title="W3C Recommendation"] {
	background-position: 0 -500%;
}

.standardization_status:before {
	content: '?';
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	text-indent: 0;
	text-align: center;
	line-height: 4em;
}

.standardization_status[title="W3C Editor Draft"]:before {
	content: 'ED';
}

.standardization_status[title="W3C Working Draft"]:before {
	content: 'WD';
}

.standardization_status[title="W3C Last Call Working Draft"]:before {
	content: 'LC';
}

.standardization_status[title="W3C Candidate Recommendation"]:before {
	content: 'CR';
}

.standardization_status[title="W3C Proposed Recommendation"]:before {
	content: 'PR';
}

.standardization_status[title="W3C Recommendation"]:before {
	content: 'REC';
}

dabblet.html

<span class="standardization_status" title="W3C Editor Draft">W3C Editor Draft</span>
<span class="standardization_status" title="W3C Working Draft">W3C Working Draft</span>
<span class="standardization_status" title="W3C Last Call Working Draft">W3C Last Call Working Draft</span>
<span class="standardization_status" title="W3C Candidate Recommendation">W3C Candidate Recommendation</span>
<span class="standardization_status" title="W3C Proposed Recommendation">W3C Proposed Recommendation</span>
<span class="standardization_status" title="W3C Recommendation">W3C Recommendation</span>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}