Untitled

dabblet.css

p{
	margin:0px;
	padding:0px;
}
article.post {
	font-family: Tahoma;
	font-size: 10pt;
	/*width:90%;
	margin:0% 5%;*/
}
article.post h1{
	display:block;
	padding-bottom:10px;
	border-bottom:1px dotted #999;
	margin-bottom:20px;
}
article.post h1 a{
	color:#fff;
	text-decoration:none;
	text-shadow:#000 2px 2px 6px;	
}
article.post header {
	background-color:#ccc;
	margin:10px;
	padding:10px;
	border-radius:8px;
	box-shadow:#666 2px 2px 8px;
	color:#fff;
}
article.post .content{
	display:block;
	padding:20px;
	text-align:justify;
}
article.post .content p{
	padding:4pt 2pt;
}
article.post img.photo{
	border:1px solid #fff;
	padding:2px;
	box-shadow:#000 2px 2px 6px;
}
article.post footer a img.avatar{
	width:16px;
	height:16px;
	vertical-align:middle;
	padding:1px;
	border:2px solid #B21;
	margin-right:4px;
	border-radius:4px;
}
article.post footer {
 	text-align:right;
 	border-top:1px dotted #666;
 	padding-top:10px;
 	margin-top:10px;
}
article.post footer a{
	text-decoration:none;
	color:#444;
	text-shadow: #222 1px 1px 3px; 
}
article.post footer a.permalink{
	float:left;
	font-size:9pt;
	text-decoration:none;
	color:#bbb;
	text-shadow:none;
}
.left{
	float:left;
	margin:6px 16px 8px 0px;
}
.right{
	float:right;
	margin:6px 0px 8px 16px;
	margin-left:15px;
}
.center{
	text-align:center;
}
article.post .gallery .screenshots figure.screenshot{
	display:inline-block;
	border:2px solid #fff;
	box-shadow:#000 2px 2px 6px;
	border-radius:2px;
	margin:3px;
	padding-top:4px
	padding-bottom:8px;
}
article.post .gallery .screenshots figure.screenshot img{
	width:95%;
	padding:4px;
}
.gallery{
	text-align:center;
	width:90%;
	margin:0% 5%;
}
.screenshots{
	display:inline-block;
	display:block;
	width:450px;
}
.medium{
	width:90px;
}
.big{
	width:400px;
}
.small{
	width:40px;
}

dabblet.html

<article class="post" id="1234">
	<h1><a href="post/show/1234" title="This a demo article to help on design research.">A Demonstration Article</a></h1>
	<header>
		<p>This small text exists to help designer with coding the right design for there new Blog/CMS post display.</p>
	</header>
	<div class="content">
		<p>Sed fringilla ultrices ante at auctor. Sed nec nisl ac diam vulputate egestas.</p>
		<p><a href="http://ecx.images-amazon.com/images/I/51nybWWtXtL._SL500.jpg" title="cover for Arcania Gothic 4"><img src="http://ecx.images-amazon.com/images/I/51nybWWtXtL._SL120.jpg" class="photo left"/></a>Cras sit amet justo et lacus vulputate gravida non eget sem. Pellentesque gravida, orci vel elementum luctus, neque eros tempor nisl, vel posuere orci justo at lectus. Phasellus gravida sollicitudin bibendum.Curabitur ac elit quis ligula congue dapibus. Vivamus quis sem sem, quis facilisis nisi.</p>
		<p>Quisque rhoncus convallis ultrices. Nunc id risus at tortor suscipit pellentesque ac sit amet mi. Duis nibh lorem, auctor id fringilla ut, ultrices in nulla. Suspendisse rhoncus commodo enim vel consequat.</p>
		<p>Pellentesque placerat ornare mollis. Mauris eget ipsum erat.Aliquam erat volutpat. Mauris ac mauris eget purus scelerisque sodales. Fusce laoreet congue leo, semper commodo sem semper ut. Phasellus pellentesque fringilla eros, sit amet porttitor erat malesuada non. Praesent et ante diam, sit amet malesuada nisi. Donec fermentum pulvinar diam non hendrerit.</p>
		<div class="gallery">
			<div class="screenshots">
			<figure class="screenshot big"><a href="http://img.jeuxvideo.fr/03D4022603685800-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><img src="http://img.jeuxvideo.fr/03D4022603685800-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" title="Le marché du village" /></a><figcaption>Le marché du village</figcaption></figure>
			<figure class="screenshot medium"><a href="http://img.jeuxvideo.fr/03D4022603391518-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><img src="http://img.jeuxvideo.fr/03D4022603391518-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" title="Montagne enneigée" /></a><figcaption>Montagne enneigée</figcaption></figure>
			<figure class="screenshot medium"><a href="http://img.jeuxvideo.fr/03D4022603391516-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><img src="http://img.jeuxvideo.fr/03D4022603391516-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" title="Mage en action !" /></a><figcaption>Mage en action !</figcaption></figure>
			<figure class="screenshot medium"><a href="http://img.jeuxvideo.fr/03D4022603391412-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><img src="http://img.jeuxvideo.fr/03D4022603391412-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" title="Temple dans la forêt" /></a><figcaption>Temple dans la forêt</figcaption></figure>
			</div>
		</div>
	</div>
	<footer>
		<a class="permalink" title="permanent link to this article" href="http://blog.ext/post/show/a-demonstration-article" data-permalink="http://blog.ext/post/show/a-demonstration-article
">http://blog.ext/post/show/a-demonstration-article</a>
		<a href="user/profile/mcgivrer" data-author="mcgivrer"><img class="avatar" src="https://lh3.googleusercontent.com/-LnwgJPshkMw/AAAAAAAAAAI/AAAAAAAAHu8/8OJyK5mJPXo/s200-c-k/photo.jpg" title="mcgivrer"/>McGivrer</a> /
		<a href=""><time datetime="2012-02-28 14:12:30">28/02/2012</time></a>
	</footer>	
</article>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"","page":"all"}