Notebook Design

dabblet.css

/**
 * Notebook Design
 */

body {
	background-color: #f5f5f5;
	margin: 0 30px;
	padding: 0;
}
h4 {
	color: #cd0000;
	font-size: 42px;
	letter-spacing: -2px;
	text-align: left;
}
.list {
	color: #555;
	font-size: 22px;
	padding: 0 !important;
	font-family: courier, monospace;
	border: 1px solid #dedede;
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
}
.list li {
 	list-style: none;
 	border-bottom: 1px dotted #ccc;
 	padding: 10px 10px 10px 60px;
	overflow: hidden;
	text-transform: capitalize;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-image: linear-gradient(left, #ffaa9f 0px, #ffaa9f 1px,
			transparent 1px, transparent 3px, #ffaa9f 3px, #ffaa9f 4px);
	background-size: 4px 100%;
	background-position: 30px 100%;
	background-repeat: no-repeat;
}
.list li:hover {
	background-color: #f0f0f0;
	transition: all .2s;
}

dabblet.html

<h4>Notes</h4>

<ul class="list">
  <li>Eat Breakfeast</li>
  <li>Feed Pugsly, the cow</li>
  <li>Sit Down</li>
  <li>Eat lunch</li>
  <li>Call mom</li>
  <li>Tweet about feeding my cow, pugsly</li>
  <li>Join a hangout in google+</li>
  <li>Prepare Dinner</li>
  <li>Eat Dinner</li>
  <li>Get ready for bed</li>
  <li>Go to bed</li>
</ul>

settings.json

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