Task station

dabblet.css

/* Task station */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);

* { font:400 13px Source Sans Pro; padding:0; margin:auto;
	list-style:none; border:0; color:#3c3c3c;
	font-weight:inherit; line-height:inherit;
	box-sizing:border-box; vertical-align:0 }
	
select { -webkit-appearance:none }

nav a { display:inline-block;
	padding:.6em 1.6em; border:1px solid #eee;
	margin-right:.6em; background:white }
	nav a.current { border-bottom-color:white }

#files { }
#tasks { border:1px solid #eee; background:#fff }
	form { line-height:32px; padding:.6em; clear:left;
		border:1px solid #eee; margin:1em; border-radius:3px;
		background:#f7f7f7 }
		label { margin-left:1em }
		input[name=users] { float:right; width:15em;
			padding:0 .6em; border:1px solid #eee;
			border-radius:3px }
	li { padding:1em; font-weight:600; line-height:25px;
		border:1px solid #eee; margin:-1px }
	li:hover { border-color:#ddd; background:#f7f7f7 }
		a[rel=author] { width:25px; height:25px; 
			display:inline-block; margin-right:.6em;
			overflow:hidden; text-indent:-999em;
			background:url(//placekitten.com/g/25/25) }
		select[name=status] { float:right; padding:0 .6em;
			text-transform:uppercase; border:1px solid transparent }
		li:hover select[name=status] { border-color:#eee }

.complete select { color:#5aa6ce }
.in-progress select { color:#61a693 }
.pending select { color:#d3545b }

.complete a:not([rel]) { text-decoration:line-through }

/*4dabblet*/
body { max-width:50em; margin-top:3em }

dabblet.html

<nav>
  <a>Files</a>
  <a class=current>Tasks</a>
</nav>

<section id=files></section>
<section id=tasks>
	<form>
	  Filter:
	  <label><input type=checkbox name=status> Pending</label>
	  <label><input type=checkbox name=status> In Progress</label>
	  <label><input type=checkbox name=status> Complete</label>
	  <input placeholder="Filter by User(s)" name=users>
	</form>
	
	<ol>
		<li class=complete>
			<select name=status><option value=complete>Complete</option></select>
			<a rel=author> Flynn </a> 
			<a>Create Space Paranoids</a>

		<li class=complete> 
			<select name=status><option value=complete>Complete</option></select>
			<a rel=author> Dillinger  </a> 
			<a>Plagiarize Space Paranoids</a>

		<li class=complete> 
			<select name=status><option value=complete>Complete</option></select>
			<a rel=author> Dillinger </a> 
			<a>Deploy MCP</a>

		<li class=complete>
			<select name=status><option value=complete>Complete</option></select>
			<a rel=author>Bradley</a> 
			<a>Deploy TRON</a>

		<li class="in-progress"> 
			<select name=status><option value=in_progress>In Progress</option></select>
			<a rel=author>Flynn</a> 
			<a>Deploy Flynn</a>

		<li class=pending>
			<select name=status><option value=pending>Pending</option></select>
			<a rel=author>???</a> 
			<a>Profit</a>
	</ol>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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