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%;
}

.in-map-popup-gate {
	width: 220px;
	background-color: #fff;
	position: absolute;
	box-shadow: 0 0 10px 0 #000;
}

.in-map-popup-gate table {
	padding: 12px;
	width: 100%;
}

.in-map-popup-gate td {
	vertical-align: top;
}

.in-map-popup-gate-head {
	font-size: 20px;
	font-weight: bold;
}

.in-map-popup-gate-details {
	color: RGBA(157, 157, 156, 1.00);
}

.in-map-popup-gate-status {
	background-color: RGBA(53, 168, 54, 1.00);
	color: #fff;
	font-size:20px;\padding: 12px;
}

dabblet.html

<div class="in-map-popup-gate">
	<table>
		<tr class="in-map-popup-gate-head">
			<td style="width:130px;">Johannesburg</td>
			<td>12:27</td>
		</tr>
		<tr class="in-map-popup-gate-details">
			<td>AF1681</td>
			<td></td>
		</tr>
	</table>
	<div class="in-map-popup-gate-status">
		Boarding
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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