Untitled

dabblet.css

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #ffffff;
}

a {
  color: #0088cc;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #005580;
  text-decoration: underline;
}

h2
{
	background:linear-gradient(to bottom, #fefefe, #f9f9f9);
	border-bottom:1px solid #eee;
	border-top:1px solid #eee;
	text-align:center;
    font-size: 1.3em;
    margin-top: 20px;
}

h3
{
	font-size:1.1em;
	border-bottom:1px solid #dddddd;
    padding: 0;
    margin-bottom: 10px;
    margin-top: 20px;
}

div.savings
{
    
}

div.saving
{
    border:1px solid #007F0E;
    width:200px;
    float:left;
    margin:10px;
}

div.saving div.title
{
    font-weight:bold;
    text-align:center;
}

div.saving div.dates
{
    text-align:center;
    padding:5px;
}

div.saving div.value
{
    text-align:center;
    font-size:2em;
    padding:15px 5px;
    background:linear-gradient(to bottom, #F4FFF5, #D8FFDB);
    border-top:1px solid #007F0E;
    color:#007F0E;
}

div.savings > div.negative
{
    border-color: #7F0000;
}

div.savings > div.negative div.value
{
    border-color: #7F0000;
    background:linear-gradient(to bottom, #FFE8E8, #FFD8D8);
    background-color: #FFE8E8;
    color:#7F0000;
}

div.savings a
{
    color:#007F0E;
}

div.savings > div.negative a
{
    color:#7F0000;
}

dabblet.html

<h2>Hello</h2>

<h3>Subtitle</h3>

<div class="savings clearfix">
    
        <div class="saving negative">
            <div class="title">
                <a href="/transaction/statistics/2013-05-31/2013-06-29">Current Month</a>
            </div>
            <div class="dates">
                31/05/2013<br />
                29/06/2013
            </div>
            <div class="value">
                £ 6,075.24
            </div>
        </div>
        <div class="saving">
            <div class="title">
                <a href="/transaction/statistics/2013-04-30/2013-05-31">Last Month</a>
            </div>
            <div class="dates">
                30/04/2013<br />
                31/05/2013
            </div>
            <div class="value">
                £ 38,003.93
            </div>
        </div>
        <div class="saving">
            <div class="title">
                <a href="/transaction/statistics/2012-11-30/2013-05-31">Last 6 Months</a>
            </div>
            <div class="dates">
                30/11/2012<br />
                31/05/2013
            </div>
            <div class="value">
                £ 3,355.58
            </div>
        </div>
        <div class="saving">
            <div class="title">
                <a href="/transaction/statistics/2012-05-31/2013-05-31">Last Year</a>
            </div>
            <div class="dates">
                31/05/2012<br />
                31/05/2013
            </div>
            <div class="value">
                £ 2,291.78
            </div>
        </div>
        <div class="saving">
            <div class="title">
                <a href="/transaction/statistics/2008-03-31/2013-05-31">Since Inception</a>
            </div>
            <div class="dates">
                31/03/2008<br />
                31/05/2013
            </div>
            <div class="value">
                £ 3,693.64
            </div>
        </div>
    
</div>

dabblet.js

// alert('Hello world!');

settings.json

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