The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font-family: helvetica;
}
li {
	list-style: none;
}
* {
	margin: 0;
	padding: 0;
}
#device {
	width: 320px;
	height: 480px;
	margin: 3em auto;
}
li a, li.intervalo {
	display:block;
	padding: 0.8em 1em;
	text-decoration: none;
	font-weight: bold;
	color: #eee;
	text-shadow: 0px 2px 0px rgba(0,0,0,0.9);
	border-bottom: 1px solid #222;
	background: -webkit-linear-gradient(90deg, #333, #3e3e3e);	
	position: relative;
}
li a:after {
	content: ' > ';
	display:block;
	position: absolute;
	right: 1em;
	bottom: 0;
	width: 1em;
	height: 2em;
	color: #666;
	text-shadow: none;
}
li a:hover {
	background: -webkit-linear-gradient(90deg, #444, #4e4e4e);	
}
li a:active {
	background: -webkit-linear-gradient(90deg, #3e3e3e, #333);	
}
li.intervalo {
	background: #333;
	color: #999;
	text-align: center;
	text-transform: lowercase;
	font-weight: 400;
	letter-spacing: 2px;
}
li.intervalo + li a:before {
	content: '(1ª da tarde) ';
}

dabblet.html

<div id="device"> <!-- a fingir -->

	<ul>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li class="intervalo">Intervalo</li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>
		<li><a href="#/foobar">Lorem ipsum</a></li>	
	</ul>

</div>

dabblet.js

// alert('Hello world!');

settings.json

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