secondfret/dabblet.css

## dabblet.css
/**
 * Design Shack Pricing Table Example
 */


* {margin: 0; padding: 0;}
body {background: #ededed;}

#container {
	width: 780px;
	margin: 100px auto;
}

/*Top Bar*/
.top {
  width: 250px; height: 50px;
  background: #2F2E35;
  -webkit-border-radius: 10px 10px 0 0;
     -moz-border-radius: 10px 10px 0 0;
          border-radius: 10px 10px 0 0;
}

.top h2 {
  color: #fff;
  text-align: center;
  font: 300 30px/50px Helvetica, Verdana, sans-serif;
}

/*Shape*/
.pricingtable {
  width: 250px; height: 450px;
  background: white;
  margin: 5px;
  float: left;

  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

/*Features*/
.pricingtable ul {
  list-style-type: none;
  font: 300 18px/2 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 45px;
}

.pricingtable ul strong {
  font-weight: bold;
}

/*Dividing Line*/
.pricingtable hr {
  border: 0;
  background-color: #BCBEC0;
  color: #BCBEC0;
  height: 1px;
  width: 190px;
  margin: 20px 0 0 30px;
}

/*Price*/
.pricingtable h1 {
  text-align: center;
  font: bold 88px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 0;
}

.pricingtable h1 sup {
  font-size: 45px;
}

.pricingtable p {
  text-align: center;
  font: 500 14px/1 Helvetica, Verdana, sans-serif;
  color: #BCBEC0;
}

/*Button*/
.pricingtable a {
  display: block;
  height: 40px;
  width: 150px;
  color: #fff;
  margin: 25px 0 0 50px;

  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 500 16px/40px Helvetica, Verdana, sans-serif;

  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  /*Gradient*/
  background: #9dcc55; /* Old browsers */
  background: -moz-linear-gradient(top,  #9dcc55 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dcc55), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc55', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
}

.pricingtable a:hover {
  background: #b2e560; /* Old browsers */
  background: -moz-linear-gradient(top,  #b2e560 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */

}


/*Scaled Version*/
.featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->


<div id="container">
    <div class="pricingtable">
      <div class="top">
        <h2>Basic</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>25GB</strong> of Storage</li>
        <li><strong>5</strong> Domains</li>
        <li><strong>10</strong> Email Addresses</li>
      </ul>

      <hr />

      <h1><sup>$</sup>25</h1>
      <p>per month</p>

      <a href="#">Sign Up</a>
</div>

    <div class="pricingtable featured">
      <div class="top">
        <h2>Pro</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>50GB</strong> of Storage</li>
        <li><strong>10</strong> Domains</li>
        <li><strong>20</strong> Email Addresses</li>
      </ul>

      <hr />

      <h1><sup>$</sup>49</h1>
      <p>per month</p>

      <a href="#">Sign Up</a>
    </div>

    <div class="pricingtable">
      <div class="top">
        <h2>Premium</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>Unlimited</strong> Storage</li>
        <li><strong>Unlimited</strong> Domains</li>
        <li><strong>50</strong> Email Addresses</li>
      </ul>

      <hr />

      <h1><sup>$</sup>79</h1>
      <p>per month</p>

      <a href="#">Sign Up</a>
    </div>

</div>

## settings.json
{"view":"split","prefixfree":"1","page":"result"}
	/**
	* Design Shack Pricing Table Example
	*/


	* {margin: 0; padding: 0;}
	body {background: #ededed;}

	#container {
	width: 780px;
	margin: 100px auto;
	}

	/Top Bar/
	.top {
	width: 250px; height: 50px;
	background: #2F2E35;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	}

	.top h2 {
	color: #fff;
	text-align: center;
	font: 300 30px/50px Helvetica, Verdana, sans-serif;
	}

	/Shape/
	.pricingtable {
	width: 250px; height: 450px;
	background: white;
	margin: 5px;
	float: left;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
	}

	/Features/
	.pricingtable ul {
	list-style-type: none;
	font: 300 18px/2 Helvetica, Verdana, sans-serif;
	margin: 20px 0 0 45px;
	}

	.pricingtable ul strong {
	font-weight: bold;
	}

	/Dividing Line/
	.pricingtable hr {
	border: 0;
	background-color: #BCBEC0;
	color: #BCBEC0;
	height: 1px;
	width: 190px;
	margin: 20px 0 0 30px;
	}

	/Price/
	.pricingtable h1 {
	text-align: center;
	font: bold 88px/1 Helvetica, Verdana, sans-serif;
	margin: 20px 0 0 0;
	}

	.pricingtable h1 sup {
	font-size: 45px;
	}

	.pricingtable p {
	text-align: center;
	font: 500 14px/1 Helvetica, Verdana, sans-serif;
	color: #BCBEC0;
	}

	/Button/
	.pricingtable a {
	display: block;
	height: 40px;
	width: 150px;
	color: #fff;
	margin: 25px 0 0 50px;

	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font: 500 16px/40px Helvetica, Verdana, sans-serif;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	/Gradient/
	background: #9dcc55; /* Old browsers */
	background: -moz-linear-gradient(top, #9dcc55 0%, #96c23d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dcc55), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* IE10+ */
	background: linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc55', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
	}

	.pricingtable a:hover {
	background: #b2e560; /* Old browsers */
	background: -moz-linear-gradient(top, #b2e560 0%, #96c23d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #b2e560 0%,#96c23d 100%); /* IE10+ */
	background: linear-gradient(top, #b2e560 0%,#96c23d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */

	}


	/Scaled Version/
	.featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	}
	<!-- content to be placed inside <body>…</body> -->


	<div id="container">
	<div class="pricingtable">
	<div class="top">
	<h2>Basic</h2>
	</div>
	<ul>
	<li><strong>Full</strong> Email Support</li>
	<li><strong>25GB</strong> of Storage</li>
	<li><strong>5</strong> Domains</li>
	<li><strong>10</strong> Email Addresses</li>
	</ul>

	<hr />

	<h1><sup>$</sup>25</h1>
	<p>per month</p>

	<a href="#">Sign Up</a>
	</div>

	<div class="pricingtable featured">
	<div class="top">
	<h2>Pro</h2>
	</div>
	<ul>
	<li><strong>Full</strong> Email Support</li>
	<li><strong>50GB</strong> of Storage</li>
	<li><strong>10</strong> Domains</li>
	<li><strong>20</strong> Email Addresses</li>
	</ul>

	<hr />

	<h1><sup>$</sup>49</h1>
	<p>per month</p>

	<a href="#">Sign Up</a>
	</div>

	<div class="pricingtable">
	<div class="top">
	<h2>Premium</h2>
	</div>
	<ul>
	<li><strong>Full</strong> Email Support</li>
	<li><strong>Unlimited</strong> Storage</li>
	<li><strong>Unlimited</strong> Domains</li>
	<li><strong>50</strong> Email Addresses</li>
	</ul>

	<hr />

	<h1><sup>$</sup>79</h1>
	<p>per month</p>

	<a href="#">Sign Up</a>
	</div>

	</div>