CloudSpokes HTML

dabblet.css

/**
 * CloudSpokes HTML
 * http://dabblet.com/gist/2313854
 */

* { font-family: helvetica,verdana,arial,sans;}

header {
	width: 1000px;
	margin-bottom: 20px;
}

body {
	width: 1000px;
	margin: 0 140px;
	background-image: linear-gradient(left, #EEEEEE 0%, #BBBBBB 100px, #DDD 100px, #FFFFFF 17%, #FFFFFF 80%, #DDD 1100px, #BBBBBB 1100px, #EEEEEE 100%);
	background-repeat: no-repeat;
	background-position-y: 100px;
}
section, 
section > div {
	float: left;
	width: 704px;
	margin-bottom: 15px;
}

aside {
	float: left;
	width: 210px;
	margin-left: 23px;
}

a {
	color: #004c94; /*rgb(0,76,148);*/
	text-decoration: none;
}

header ul {
	text-align:center;}

header ul li {
	display: inline;
	padding: 0 10px;
	margin: 0;
}

header li + li{
	border-left: 1px solid #666;
}

header ul a, ul#browse li a, td a {
	font-size: small;
	font-weight: normal;
	text-decoration: none;
}

div#search h2,
div#browse h2 {
	font-size: 90%;
	font-weight: bold;
}

div#search {
	padding-left: 15px;
	float: left;
	width: 385px;
}
div#browse {
	float: left;
	width: 300px;
	padding-bottom: 4px;
}
div#browse li a {
	font-weight: bold;
}

section article h2 {
	color: #004c94;
}

input#search {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAAA3NCSVQICAjb4U/gAAAAEHRFWHRTb2Z0d2FyZQBTaHV0dGVyY4LQCQAAAUdJREFUKM99UsGKwjAUfBPboIIGPZWSg5iD4FH8/6+QHupBKQgiFgStpTXk7eF1s7uXnVN4TObNDA8hBADMTEQAiKjve+89EU2nUyIKISiliCghokjquq4sy+fz2XWd93673eZ5rpRiZgCJkIjo8/kURdG2rXPOGHO5XIqiGI1GWZYJJyEi2V7Xddu2+/1ea83MzjlmPh6Pi8VCaw1gEAdwu92MMWma0jdWqxUzv14vUVUyZWatddM0Mo3WvffRoZL4ALIsq+v6er3Kz77vD4fDbDabz+dDdDEqOJ1OZVlaa9M0rapqPB7vdrvJZDLE+t2oMcZ7fz6frbXOOWttkvxUNLyYOYRQVRWA9Xq92WzoF8ShiqpN09zvdwB5nsc9AEIIQ6zY6+PxeL/fy+VSzIkSMyulBq/RgDHGWiuZIk/05Az+NPA/vgCtq7j62WTybwAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: 2px;
	font-size: small;
	width: 250px;
	border-radius: 5px;
	border: 1px solid #999;
	margin-top: 15px;
}

#search button {
	color: #666;
	text-shadow: 1px 1px 1px #FFF;
	font-weight: bold;
	text-transform: uppercase;
}

ul#browse { list-style-type: none; column-count: 2; width: 300px; padding: 0; margin: 0; }
ul#browse li {
	font-size: small;
	padding: 13px 0 10px 22px;
	background-position: 0px 12px;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAACXZwQWcAAAAQAAAAEABcxq3DAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAEsAAABLABziOlSAAABXklEQVRIx2NgIAi8F0131dFhYPD5NWVqfz+QFp7SduUKkHacovb6NRKdP4Xl8mWg+u2Tr/T1MTD420zy0NJiIB2EhtT/Z2MDGig95eCUKUDaYErAnz9A2mfKlP//SaCh+rxfTfGdOJGBwdho5gxWViIs9t40ZcmuXWRYSIhunXJvxw6EPRjA5/uUlzNn0sBiNNp7xuSDU6ciWez5ZfILXV2gxOMpe//+Jd4gDA+QGDXwNOIzfwrb5Mmk+4RsB8DowqkhEyaANPZPCb12bQAcAM01DD5aUyQ+fSLeIlIBTgdUTdn28SNIwbQpv798GQAHQD0+cFEALdDgJRe9HeDdNFW3uxuo0TdlylVtbdJLPLIdUDfl+e/fQPrMZCMNDWQDoNmC5gURzOfoAFZWA+sAgZ07aeCAD1M8tm9nYLD/X/+fhWUwVkbEVsfe26eyX70K5G+cYvr9OxINTdWkVccA2o6w6cpLqHQAAAAASUVORK5CYII=);
}

h1#top {
	font-size: xx-large;
}

section h1 { 
	font-size: xx-large;
	color: rgb( 249,167,77 );
	padding: 15px 0 0;
	margin: 0;
	line-height: 55%;
}

div.partner {
	float: left;
	width: 180px;
	height: 139px;
	padding: 0 20px;
	background-color: #dadada;
	color: #999;
	font-size: 90%;
	margin-bottom: 20px;
	}

div.partner + div.partner {
	margin-left: 21px;
}

section > div h1, 
section > div p {
	padding-left: 10px;
}

section > div,
aside article {
	background-color: #e5e5e5;
	border-top: 12px solid #dfdfdf;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom: 8px solid #dfdfdf;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

section article {
	clear: both;
	}

aside article h2 {
	color: #004c94;
	font-size: normal;
	font-weight: normal;
}

aside > h2 {
	color: #004c94;
	font-size: 85%;
	font-weight: bold;
}


aside article {
	margin-top: 20px;
	font-size: small;
	line-height: 150%;
	padding: 0 10px;
}

aside ul {
	padding-left: 25px;
}

aside ul li {
	margin: 3px;
}

td { 
	padding: 5px 0 2px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}

td:first-child {
	padding-left: 10px;
	font-size: small;	
}

table {
	border-top:2px solid white;
	border-bottom:2px solid white;
	border-collapse:collapse;
}

tr {
	background-color: #e5e5e5;
}

td a {
	font-weight: bold;
}

th { vertical-align: bottom; width: 70px; font-weight: normal; font-size: x-small; padding: 8px 0; }
th:first-child {
	padding-left: 10px;
	padding-bottom: 6px;
	width: 200px;
	font-weight: bold;
	font-size: 100%;
	}
td {
	text-align: center;
}
td:first-child,
th:first-child {
	text-align: left;
	}
td span.check::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWEAYAAACUJLB4AAAACXZwQWcAAAAWAAAAFgDcxelYAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAEsAAABLABziOlSAAACzElEQVRIx2NgIBkElkx3FRNjYPDhnNqVmgqkBaearl8PpIWntF25AqSnTDnx6hUDg/f5KUEvXyKJN06ZsW4dkD4zpSolhYHBU2WSh6goA/UByGB2dqBFWlMkKish9KdPQBrosv//KaCrpmz7+BHoMa8p+eXlCHvIBv7/p/9XUAAa+HGK6cWLVHAgIXrNlPTz5xkYvIKmLJGXJzFEZWSABqyfcufxYzo4FJ22msr98CEDg9+RyRukpPA41OfMzBlcXMAQPTtV/ty5AXAoOv1myrnTpxkYQkP6LDg5sTjY+9jUhtpaOjpIesrBe/fAmdD5wwc86qB5Bw4Crk8xFRamYmYiQHv/nlJy+zYi6XlVTPlobo7H4VBxd5k+CyEhBkQxQ2+HYsSw1xThtDQ85nRMPpWYCHLw8ik/Nm6koYNDpirduoXbob4eU3ebmgLV8Ux59P49HnOg5TjcQIIWO07J2bMHGBLrp6oWFwP5M6ao//tH2KHeN6dvlpbGUhrdmLzBxIQIh8JokylXr18HRcXNKV2fP+NRCI2B0JD6/2xsSCGzcuqkyEigfN2U579/I6nPn8Jy+TKiRkQHoHLWzg6obtqU31++kBBT0DxGWOOnyT/XrmVgMDaaOYOVFVtxCMkDQI+r3riBO0RB6oyMgHTclPx378hIWnAHE5skCDgcV9UKd+iGqfxv31KQaaEBQnqmI+BweNSvmhpiYEC5QzEzHbS4INmAD1M8tm9nYLD/P/8/BweSQwmVq+TSjlNPxMVRo+KAhjgs13u/mzL7zRsqOhS94qBW1ez9eMrev39pUI6jV81DtvEz5JqX6ACets9MMd23jw5tjZtT/u3di7CX4i4SrEqmWqZynKL2+jWwxmSb2lpYiFmTUg34HZnbycsLCvnJL6KigB54PuXqmjVA/ropS27eBNIbp5h+/45Ew8Qjp5iuXo2o0mHmkAYAZo1b7OYWVsIAAAAASUVORK5CYII=);
}

aside label {
	display: block;
	font-size: small;
}
aside input {
	width: 100%;
	border-radius: 5px;
	border: 1px solid #999;
}

button {
	border-radius: 3px;
	border: 1px solid #999;
	background-image: linear-gradient( top, #FFF 0%, #ddd 100% );


}		
aside article button {
	margin-left: 15px;
	border: 1px solid #222;

	background-image: linear-gradient( top, #003c84 0%, #004c94 35%, #004c94 65%, #003c84 100% );

	color: #fff;
	width: 155px;
}
aside a#forgot {
	font-size: small;
	text-decoration: underline;
}

dabblet.html

<header>
<h1>LOGO</h1>
<ul><li><a href="#">PAYMENT SOLUTIONS</a></li><li><a href="#">PROGRAM OVERVIEW</a></li><li><a href="#">REGISTRATION</a></li><li><a href="#">PARTNER PROGRAM FAQs</a></li></ul>
</header>

<section>
<div>
<article>
<h1>Find a Solution</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quis lorem ut dolor tempor placerat id ac elit. Donec pellentesque fermentum risus vitae porta. Donec volutpat enim sed lectus hendrerit et imperdiet arcu fringilla. Donec dui ligula, semper sed condimentum quis, ultrices a rises.</p>
</article>
<div id="search">
<h2>Search</h2>
<input type="text" id="search"><button>Search</button>
</div>

<div id="browse">
<h2>Browse</h2>

<ul id="browse">
<li><a href="#">Guided Search</a></li>
<li><a href="#">Industry</a></li>
<li><a href="#">Merchant Size</a></li>
<li><a href="#">Connectivity Type</a></li>
<li><a href="#">Payment Type</a></li>
<li><a href="#">Integration with</a></li>
</ul>
</div>
<table>
<thead><tr><th>New Certifications</th><th>Retail</th><th>Proximity</th><th>Restaurant</th><th>Direct Marketing</th><th>Smart Processing Solutions</th><th>Cash Advance</th><th>MOTO</th><th>eCommerce</th>
</thead>
<tbody>
<tr><td><a href="#">Partner Name 1</a></td><td><span class="check"> </span></td><td><span class="check"> </span></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td><a href="#">Partner Name 2</a></td><td><span class="check"> </span></td><td></td><td><span class="check"> </span></td><td><span class="check"> </span></td><td></td><td></td><td></td><td></td></tr>
<tr><td><a href="#">Partner Name 3</a></td><td></td><td></td><td></td><td></td><td><span class="check"> </span></td><td><span class="check"> </span></td><td></td><td></td></tr>
<tr><td><a href="#">Partner Name 4</a></td><td></td><td></td><td></td><td></td><td></td><td></td><td><span class="check"> </span></td><td></td></tr>
<tr><td><a href="#">Partner Name 5</a></td><td><span class="check"> </span></td><td></td><td><span class="check"> </span></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td><a href="#">Partner Name 6</a></td><td><span class="check"> </span></td><td></td><td></td><td></td><td></td><td></td><td><span class="check"> </span></td><td><span class="check"> </span></td></tr>
</tbody>
</table>
</div>

<article>
<div id="partner_a" class="partner"><h3>Featured Partner A</h3></div>
<div id="partner_b" class="partner"><h3>Featured Partner B</h3></div>
<div id="partner_c" class="partner"><h3>Featured Partner C</h3></div>

<h2>New Host Capture System</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quis lorem ut dolor tempor placerat id ac elit. Donec pellentesque fermentum risus vitae porta. Donec volutpat enim sed lectus hendrerit et imperdiet arcu fringilla. Donec dui ligula, semper sed condimentum quis, ultrices a rises. In id mauris hendrerit metus consectetur tempor. Sed et ante et felis tempus vehicula suscipit id augue. Donec et enim felis, et consectetur risus.</p>
<p>Aenean et est a metus ullamcorper iaculis sit amet nec est. <a href="#">Partner Portal.</a></p>
</div>
</article>
</div>
</section>
<aside>
<h2>Partner Portal Login</h2>
<label for="email">Email</label><input type="email" id="email">
<label for="password">Password</label><input type="password" id="password">
<button>Login</button>
<a href="#" id="forgot">Forgot your password?</a>

<article>
<h2>How to Join</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quis lorem ut dolor tempor placerat id ac elit. Donec pellentesque fermentum risus vitae porta. Donec volutpat enim sed lectus hendrerit et imperdiet arcu fringilla. Donec dui ligula, semper sed condimentum quis, ultrices a rises. In id mauris hendrerit metus consectetur tempor. Sed et ante et felis tempus vehicula suscipit id augue. Donec et enim felis, et consectetur risus.</p>
<ul>
<li>Partner Portal</li>
<li>Platform Specifications</li>
<li>Certification Process</li>
<li>News & Events</li>
<li>Industry Resources</li>
<li>And more...</li>
</ul>
<p><a href="#">Register now</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quis lorem ut dolor tempor placerat id ac elit. Donec pellentesque fermentum risus vitae porta. Donec volutpat enim sed lectus hendrerit et imperdiet arcu fringilla. Donec dui ligula, semper sed condimentum quis, ultrices a rises. In id mauris hendrerit metus consectetur tempor. Sed et ante et felis tempus vehicula suscipit id augue.</p>
<button>Register Now</button>
</article>
</aside>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}