CloudSpokes HTML

dabblet.css

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

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

body {
	width: 1024px;
	margin: 0 auto;
	border-left: 2px solid #666;
	border-right: 2px solid #666;
	height: 100%;
}

section {
	float: left;
	width: 720px;
}

aside {
	float: left;
	width: 200px;
}
a { color: #004c94; /*rgb(0,76,148);*/ }

#top ul { text-align:center;}

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

#top 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;}
article#search {
	float: left;
	width: 400px;
}
article#browse {
	float: left;
}
		
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;
}


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=);
}


section h1 { color: rgb( 249,167,77 );}

div.partner {
	float: left;
	width: 200px;
	height: 139px;
	padding: 0 20px;
	background-color: #dadada;
	color: #888;
	}

div.partner + div.partner {
	margin-left: 10px;
}
	
tr {
	background-color: #e5e5e5;
}

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;
}



section,
aside article {
	padding: 0 10px;
	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;
}

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

aside article {
	font-size: small;
	line-height: 150%;
}

th { vertical-align: bottom; width: 70px; font-weight: normal; font-size: x-small; padding: 8px; }
th:first-child { padding-left: 10px; width: 188px; font-weight: bold; font-size: normal; }
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=);
}

dabblet.html

<header id="top">
<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>
<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>
<article id="search">
<h2>Search</h2>
<input type="text" id="search"><button>Search</button>
</article>

<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>

<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>
</section>

<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>

</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="#">Forgot your password?</a>
</div>

<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"}