Untitled

dabblet.css

/*Blueprint CSS Reset
http://blueprintcss.org*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/*Font-face*/
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 700;
  src: local('Rosario Bold'), local('Rosario-Bold'), url('http://themes.googleusercontent.com/static/fonts/rosario/v6/C6vOqPM2grRKaQTsxWhqnL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');
}
@font-face {
  font-family: 'Shanti';
  font-style: normal;
  font-weight: normal;
  src: local('Shanti'), url('http://themes.googleusercontent.com/static/fonts/shanti/v4/eGeZy9lK-sD_x4kdQnR1SOvvDin1pK8aKteLpeZ5c0A.woff') format('woff');
}
@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: bold;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url('http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehKRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}
@font-face {
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: normal;
  src: local('Amaranth'), url('http://themes.googleusercontent.com/static/fonts/amaranth/v3/RvdVaxHTnYbJDko8dLi4znYhjbSpvc47ee6xR_80Hnw.woff') format('woff');
}
@font-face {
  font-family: 'Actor';
  font-style: normal;
  font-weight: normal;
  src: local('Actor Regular'), local('Actor-Regular'), url('http://themes.googleusercontent.com/static/fonts/actor/v3/SqA9OdmswJX8b4TrqlN76KCWcynf_cDxXwCLxiixG1c.woff') format('woff');
}


body {
	background-color:#2F2F2F;
}

section#portfolio {
	position:absolute;
	max-width:500px;
	left:50%;
	margin-left:-250px;
	padding-top:40px;
}

/*header of page*/
header {
	font-family:"Shanti";
	margin-bottom:20px
}
header h1 {
	margin:0;
	line-height:72px;
	font-size:73px;

}
header h1 a {
	color:#fff;
	text-decoration:none;
	display:block;
	border:1px solid transparent;
	border-radius:3px;
	text-shadow:2px 2px 5px #000;
	padding:10px 0 0;
}
header h2 {
	padding:4px 10px 0;
	margin:0;
	font-size:46px;
	line-height:40px;
	color:#aaa;
	text-align:right;
}

/*page center*/
#nucleo {
	font-family: 'Actor';
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	background-color:#1F1F1F;

}
#nucleo h3 {
	padding:3px 6px;
	width:100px;
	border-radius:5px;
}
#nucleo h3, #nucleo h3 a {
	font-size:35px;
	color:#000;
	line-height:40px;
	text-decoration:none;
}
#nucleo h4 {
	padding-top:15px;
	font-size:25px;
	color:#6FB1FF;
	line-height:35px;
}
#nucleo ul.list-projects {
	list-style:none;
}
#nucleo ul.list-projects li {
	margin:25px 0;
	background-position:2px 0;
}
#nucleo ul.list-projects li a {
	text-decoration:none;
	display:block;
	max-width:460px;
	height:100px;
	background-color:rgba(40,40,40,0.5);
}
#nucleo ul.list-projects li:hover {
	border-color:#fff;
}
#nucleo ul.list-projects li a:hover {
	background-color:transparent;
}
#nucleo ul.list-projects li.home {background-image:url(/img/thumbs/home.jpg)}
#nucleo ul.list-projects li.boo_box {background-image:url(/img/thumbs/boo-box.jpg)}

#nucleo ul.list-projects li.boo_box_charts, #nucleo ul.list-projects li.boo_boxfy {
	background-position:2px -100px;
}
#nucleo ul.list-projects li.boo_box_widget_generator, #nucleo ul.list-projects li.ryazbek {
	background-position:2px -200px;
}
#nucleo ul.list-projects li.boo_box_widget_ad, #nucleo ul.list-projects li.oi_velox {
	background-position:2px -300px;
}

#nucleo ul.list-projects li a span {
	color:#fff;
	position:relative;
	text-shadow:0 2px 2px #000000;
	top:74px;
	padding:5px 8px;
}
#nucleo ul.list-projects li a:hover span {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	-khtml-border-top-right-radius:5px;
	color:#000;
	text-shadow:none;
	background-color:#fff;
}

/*footer of page*/
footer {
	padding:20px 0;
}
footer p, footer p a {
	font-size:12px;
	font-weight:bold;
	color:#fff;
}
footer small {color:#aaa;}
footer small a {color:#bbb;}

dabblet.html

<section id="portfolio">

	<header>
		<h1><a href="/" class="showHome">Helder Santana</a></h1>
		<h2>Front-end Engineer</h2>		
	</header>

	<div id="nucleo">
		<h3><a href="#works">Works</a></h3>
		<ul id="works" class="list-projects">
			<li class="item-1 home">        
				<a href="/buscape" class="showWork">
					<span>Buscapé - Hotsite Quer Perder Quanto</span>
				</a>
			</li>
			<li class="item-2 home boo_boxfy">
				<a href="/boo-box" class="showWork">
					<span>boo-box - Wordpress plugin, Widget Generator and SVG Charts</span>
				</a>    
			</li>
			<li class="item-3 home ryazbek">
				<a href="/agencia-climax-ryazbek" class="showWork">
					<span>R. Yazbek - Agencia Climax</span>
				</a>
			</li>
			<li class="item-4 home oi_velox">
				<a href="/inova-inc-oi-velox-office" class="showWork">
					<span>Oi Velox Office - Inova Inc.</span>
				</a>
			</li>
		</ul>		
	</div>

	<footer>
		<p>2012 by <strong>Helder Santana</strong> - 
			<a target="_blank" href="http://heldr.com/linkedin" title="My Linkedin">Linkedin</a> |
			<a target="_blank" href="http://heldr.com/github" title="My GitHub">GitHub</a> |
			<a target="_blank" href="http://heldr.com/twitter" title="My Twitter">Twitter</a> |
			<a target="_blank" href="http://heldr.com/facebook" title="My Facebook">Facebook</a>
		</p>
		<small>made with HTML5, 
			<a href="http://code.google.com/speed/webp/" target="_blank">WebP</a>,
			<a href="http://nodejs.org" target="_blank">node.js</a> and
			<a href="http://expressjs.com" target="_blank">Express</a>
		</small>		
	</footer>	
</section>	

settings.json

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