gray test

dabblet.css

/**
 * gray test
 */

* { -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
	background: #eee;
	min-height:100%;
	font-family: sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255,.8);
}
a { color: #69c; text-decoration: none; }
.col25, .col33, .col50, .col66, .col75 { float: left; padding: 10px 0; }
.col25 { width: 25%; }
.col33 { width: 33%; }
.col50 { width: 50%; }
.col66 { width: 66%; }
.col75 { width: 75%; }

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear:both; }
.cf { zoom: 1; }

p.inline { display: inline-block; vertical-align: top; margin-right: 20px !important; }
.caption { display: block; font-size: 0.8em; text-align: center; }

.block { border-top: 1px solid #ccc; }
.block p { margin: 0; padding: 0; }
.block:before { content: ""; display: table; border-top: 1px solid white; width: 100%; }
.block.last { border-bottom: 1px solid white; }
.block.last:after { content: ""; display: table; border-bottom: 1px solid #ccc; width: 100%; }
.block .box {
	border: 1px solid #ccc;
	font-size: 14px;
	line-height: 18px;
	border-radius: 4px;
	padding: 10px 20px 10px 10px;
	float: left;
	margin: 0 20px 20px 0;
	/*width: 200px;*/
	box-shadow: inset 0 0 4px white, 0 0 4px #ddd;
	cursor: pointer;
	background-color: #e8e8e8;
	position: relative;
}
.sub { font-size: 12px; display: block; font-style: italic; color: #999; }
.block .box:hover { background-color: #ddd; }
.brand {
	position: absolute;
	top: 4px; right: 4px;
	background-color: #999;
	font-size: 9px; line-height: 10px;
	margin: 0; padding: 2px;
	border-radius: 2px;
	color: white;
	box-shadow: inset 0 0 2px rgba(0,0,0,.2);
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: bold;
}
.brand.doc { background-color: #33c; }
.brand.png { background-color: #c60; }

label {
	text-transform: uppercase;
	color: #999;
	font-size: 12px;
	margin-top: 20px;
}

dabblet.html

<h1>Subtle Block Styling Test</h1>

<div class="block cf">
<div class="col25">
<label>Assets</label>
</div>
<div class="col75">
<p class="box">Requirements <span class="sub"><a href="#">requirements.doc</a> (42 KB)</span><span class="brand doc">DOC</span></p>
<p class="box">Logo <span class="sub"><a href="#">logo.png</a> (8.7 KB)</span><span class="brand png">PNG</span></p>
<p class="box">Sitemap <span class="sub"><a href="#">sitemap.xml</a> (15.6 KB)</span><span class="brand xml">XML</span></p>
</div>
</div>
<div class="block cf last">
<div class="col25"><label>Comments</label></div>
<div class="col75">
<p class="inline"><img src="http://placehold.it/48"><span class="caption">My pic</span></p>
<p class="inline"><strong>Username</strong> <span class="sub"> 17 mins ago</span><br>This is a comment.</p>
</div>
</div>
<p>This is just a body paragraph outside the <code>.block</code> styling.</p>

settings.json

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