Permit Inspection

dabblet.css

/* Permit Inspection */
@import '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css';

body { font:16px/1.6 FontAwesome, HelveticaNeue-Light }
h1, :before { font-family:FontAwesome, HelveticaNeue-CondensedBold }
input, textarea, button, [class*="fa-"] { font-size:inherit; font-weight:inherit; font-family:inherit; 
	background:transparent }
	
a { text-decoration:none }
a, button { color:#0080fc }

[class*="fa-"] {  }
[class*="fa-"]:before { padding:0 .6em }

nav > * { padding:0 .6em }
nav > :first-child { padding-left:0 }

article { display:flex; flex-flow:row wrap; align-items:flex-end }
	h1:before { content:attr(class); background:lime; padding:0 .6em }
	h1 { flex:100% }
	textarea { min-width:21em }
	figure { flex:2 2 50%; height:21em; overflow:hidden; margin:1em 0 }
	img { max-height:100% }
	menu { flex:100%; padding:0 }
	
	[title]:before, [rel]:before { content:attr(title)attr(rel); display:block; 
		color:#ccc }

dabblet.html

<nav>
	<a href="#"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2014/Apr/18/permits-logo-2568433091-2_avatar.png"></a>
	<a href="#assigned" class="fa-crosshairs">Assigned</a>
	<a href="#search" class="fa-search">Search</a>
	<input id=search name=query placeholder="Name or ID">
</nav>

<ol>
<li id="permit/208637" class="P3">
	<a href="#permit/208637"> 208637 </a>
	<h1>Schedule Site Visit for Grand Hyatt Washington[1000 H St NW Washington DC 20001 ]</h1>
	<textarea rows="3" placeholder="Notes"></textarea>
	<a href="#zone/4" class="fa-building-o">Zone 4</a>
	<a href="#user/cindy.citizen" class="fa-user">Cindy Citizen</a>
	<a href="#permit/208637/attachments" class="fa-paperclip">Attachments</a>
	
	<menu>
		<button name=approve>Approve</button>
		<button name=reject>Reject</button>
	</menu>
	
	<a>
		<img alt="Grand Hyatt Washington" src="http://f.cl.ly/items/0E1e071F1H1N242m2W22/Grand%20Hyatt%20Washington.png">
	</a>
	<a>
		<img alt="1000 H St NW Washington DC 20001" src="http://cl.ly/image/0m2n2s012J3z/Screen%20Shot%202014-04-30%20at%2014.17.20.png">
	</a>
</li>

dabblet.js

// alert('Hello world!');

settings.json

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