AVL Live Times

dabblet.css

/**
 * AVL Live Times
 */
html {
background: #eee;
background: linear-gradient(#fff, #eee);
min-height:100%;
min-width: 720px;
font-family: "Futura", sans-serif;
border-left: 10px solid #0af;
border-top: 0;
border-right: 0;
border-bottom: 0;
-webkit-border-image: linear-gradient(90.1deg, #0af 30%,#f00 50%);
}
#content-wrapper {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	
}
#results .service {
	text-align: center;
	background-color: #000;
	color: #fff;
}
.route {
	border-radius: 6px;
	border: 1px solid #ddd
}
.r1 {
	background-color: #f00;
}
#header-route:before {
	content: "[";
}
#header-route:after {
	content: "]";
}

dabblet.html

<div id="content-wrapper">
<h1 id="header">AVL Live Times For Hamilius 
	<span id="header-route">
		<span class="route r1">1</span>
		<span class="route r2">2</span>
		<span class="route r4">4</span>
</h1>
<div id="suggestions">
<dl>
<dt>Hamilius</dt>
<dd>1 2 4 6 7</dd>
</dl>
</div>
<div id="results">
<p class="service">
	<span class="route 1">1</span>
	<span class="destination">Luxexpo Entrée Sud Quai 1</span>
	<span class="time">3 min</span>
</p>
</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}