checkedHat bluePrint

dabblet.css

/**
 * checkedHat bluePrint
 */
 
@import url(http://fonts.googleapis.com/css?family=Cabin:400,700,400italic,700italic|Lobster);

* {
	box-sizing: border-box;
	transition: all 0.5s ease;
	vertical-align: middle;
 }
 html {
 	padding: 0;
 	margin: 0;
 	font-size: 62.5%;
 	height:100%;
 }
 body {
 	padding:0;
 	margin:0;
 	font-size: 1.6em;
	font-family: 'Cabin', sans-serif;
	background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
	background-size: 3rem 3rem;
 }	
 
 h1, h2 {
 	font-family: 'Lobster', cursive;
 }
 
 body > header > hgroup {
 	margin-left: 20%;
 	margin-right: 20%;
 }
 
 body > header > hgroup > h1,
 body > header > hgroup > h2 {
 	color: white;
 }
 body > header > hgroup > h1 {
 	font-size: 3em;
	text-shadow: white 0 0 1px, white 0 0 2px, white 0 0 3px, white 0 0 5px;
 }
 body > header > hgroup > h2 {
 	text-align: right;
 	color: transparent;
	text-shadow: white 0 0 60px, white 0 0 60px, white 0 0 60px, white 0 0 60px;
	font-size: 3em;
	margin-top: -1em;
 }
 
 .♥ {
 	text-shadow: red 0 0 5px;
 } 
 
 body > header > hgroup > h2:hover {
 	color: white;
	text-shadow: white 0 0 1px, white 0 0 2px, white 0 0 3px, white 0 0 5px;
 }
 
 h2:hover .♥ {
 	color: transparent;
 	text-shadow: red 0 0 60px, red 0 0 60px, red 0 0 60px, red 0 0 60px;
 }

 body > header {
 	padding:0;
 	margin:0;
 	background-color: rgba(34,34,34,0.5);
 	box-shadow: 0px 0px 8px 5px rgba(34, 34, 34, 0.5);
 	margin-bottom: 0.5rem;
 } 
 
 body > nav > ol {
 	margin: 0;
 	padding:0;
 	list-style: none;
 	box-shadow: 0px 0px 8px 2px rgba(34, 34, 34, 0.5);
 	background-color: rgba(190, 190, 190, 0.5);
 }
 body > nav > ol > li> a {
	display: block;
	color: #222;
	text-decoration: none;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.3);
	padding: 5px;
	border-radius: 5px;
	text-shadow: 0px 0px 5px #ffffff;
}

body > nav > ol > li.current > a {
	background-color: #AAA;
}

body > nav > ol > li > a:hover {
	color: white;
	background-color: black;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);
}

body > nav > ol > li {
	height:0;
	overflow:hidden;
}

body > nav:hover > ol > li, body > nav > ol > li.current {
	height: 2em;
	overflow:visible;
}

body > nav > ol > li.current > a{
	position: relative;
	padding-right: 1.5rem;
}

body > nav > ol > li.current > a:after {
	content: '\25BC';
	position: absolute;
	right: 0;
	top: -2px;
	font-size: 180%;
	padding:0;
	margin:0;
	color: rgba(0, 0, 0, 0.5);
 	text-shadow: 2px 2px 4px #000000; 
 	height:100%;

}

body > nav:hover > ol > li.current a:after {
	width:0;
	overflow: hidden;
	content: '';
}

#container {
	background-color: rgba(200,200,200,0.9);
	padding: 1em;
	margin-top: 1em;
 	box-shadow: 0px 0px 8px 5px rgba(34, 34, 34, 0.5);
}

#container > article {
	border-bottom: 3px solid rgba(34, 34, 34, 0.5);
}

#container > article > header img {
	float: right;
	max-width: 30%;
	max-height: 6em;
	margin-left: 1em;
}

#container > article > header:after,
#container > article > footer:after,
#container > article > content:after,
#container > article:after{
	content: " ";
	width: 100%;
	height:1px;
	overflow: hidden;
	clear:both;
	display: block;
}

#container > article > img {
	width: 100%;
}

#container > article figure img {
	max-width: 100%;
	max-height: 100%;
}

#container > article figure {
	max-width: 30%;
	float:left;
	margin-right: 1em;
}

body > footer {
	background-color: rgba(200,200,200,0.9);
 	box-shadow: 0px 0px 8px 5px rgba(34, 34, 34, 0.5);
}

body > footer > dl{
	width: 100%;
	display: block;
}


@media only screen and (min-width: 500px) { 
	
	body > footer > dl{
		display: box;
		box-orient: horizontal;
	}

	body > footer .license {
		max-width: 20%;
	}
	
	body > footer > dl > article,
	body > footer > dl > nav {
		box-flex: 1;
	}

	body > nav > ol,
	body > nav > ol > li,
	body > nav > ol > li.current,
	body > nav > ol > li > a,
	body:hover > nav:hover > ol:hover > li:hover > a:hover {
		height: 3rem;
	}

	body > nav > ol {
		display: box;
		box-align: horizontal;
		margin-left: auto;
		margin-right: auto;
		min-width: 30rem;
		max-width: 50rem;
		padding:0;
	}
	
	body > nav > ol > li, body > nav > ol > li.current {
		display: block;
		overflow:visible;
		box-flex: 1;
		text-align: center;
	}
	
	body > nav > ol > li:hover a,
	body > nav > ol > li.current:hover a{
		padding-left: 8rem;
		padding-right: 8rem;
	}

	body > nav > ol > li.current > a {
		padding-right: 0.5rem;
	}

	body > nav > ol > li.current > a:after {
		width:0;
		content: '';
		overflow: hidden;
	}
	
	#container {
		margin-left:5%;
		margin-right:5%;
		border-radius: 1rem;
	}
}	

@media only screen and (min-width: 1000px) {
	#container {
		display: box;
		box-orient: horizontal;
		margin-left:0;
		margin-right:0;
		overflow: hidden;
		overflow-x: scroll;
		border-radius: 0;
	}
	
	#container article{
		display: block;
		width: 60rem;
		padding-right: 2.5rem;
		margin-right: 2.5rem;
		border-bottom: none;
		border-right: 3px solid rgba(34, 34, 34, 0.5);
	}

} 

dabblet.html

<header>
	<hgroup>
		<h1>checkedHat</h1>
		<h2>I <span class="♥">♥</span> this hat!</h2>
	</hgroup>
</header>
<nav id="topnav">
	<ol>
		<li class="current"><a href="blog" class="current">the blog</a></li>
		<li><a href="about">about checkedHat</a></li>
		<li><a href="authors">the authors</a></li>
		<li><a href="labs">labs</a></li>
	</ol>
</nav>
<section class="container" id="container">
	<article>
		<header>
			<hgroup>
				<img src="http://farm8.staticflickr.com/7019/6666898509_096a33241c_b.jpg"/>
				<h1>title 1</h1>
				<h2>faszinierende sache</h2>
			</hgroup>
		</header>
		<div class="tldr"><span class="tldr">tl;dr:</span> lorem ipsum dolor! </div>
		<div class="content">
			Augue integer, ac sed? Magna, tincidunt vel natoque aliquet quis cursus dapibus dictumst quis! Pellentesque penatibus, pulvinar adipiscing, ut? A augue. Integer pulvinar amet, adipiscing urna tortor parturient ut adipiscing tristique in massa nunc urna vel facilisis odio adipiscing phasellus, ac sed! Porttitor aliquam habitasse pellentesque tempor adipiscing nec in adipiscing? Mus mus? Natoque ac cras. Turpis sed est sit integer tempor eros, pulvinar. Lacus dignissim, nunc magna est arcu ut magnis, arcu aenean! Purus rhoncus nec ultrices porttitor dis eu montes mus scelerisque urna vut, turpis sed ac mattis? Ac tempor? Ut turpis augue dis, mauris sed a elit in nec, mid dolor et, lacus a augue? Cras porttitor? Ac. Phasellus pulvinar scelerisque in massa? Ultricies tristique? Nec quis.
			Quisque congue suscipit dolor a tincidunt. Pellentesque et euismod quam. Curabitur ut purus est. Phasellus nisl velit, consectetur et convallis ut, aliquam a nibh. Nullam vel accumsan erat. Ut ultrices blandit nunc, id dapibus ligula ornare id. Nulla vitae ligula tellus. Donec consectetur commodo lacinia. Aliquam cursus feugiat odio a semper.
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vitae risus velit, ac fringilla leo. Suspendisse vel mattis nisi. Curabitur malesuada nisi sit amet lorem viverra condimentum. Nunc in mauris non felis blandit pretium a id lacus. Curabitur lorem neque, pellentesque sed condimentum in, condimentum eu velit. Nullam interdum metus eu mi rutrum at commodo lectus semper.
			Nulla mattis accumsan euismod. Nulla quis urna id sapien aliquam convallis. Suspendisse orci odio, fringilla sed mattis et, pretium sit amet nunc. Aliquam auctor facilisis dolor id aliquam. Aliquam laoreet nisi ut nulla lobortis ornare. Cras iaculis viverra nunc, quis semper nunc sollicitudin id. Vestibulum eu mauris arcu. Sed justo purus, euismod id pharetra non, tristique a mauris. Ut ut nunc ut enim aliquam laoreet sed ut lacus.
			Donec cursus nisi a eros adipiscing cursus. Aenean euismod suscipit lacus eget placerat. Nullam tincidunt tristique tortor, non dignissim lorem fringilla quis. Phasellus id dolor id arcu porta facilisis a eget lacus. Suspendisse nec venenatis arcu. Fusce leo libero, varius quis vestibulum id, lobortis interdum lorem. Nam tempus bibendum nulla lobortis pharetra. Sed at rhoncus arcu. Suspendisse sed est lacus, sit amet bibendum orci. Mauris justo dui, iaculis sed tempor quis, tincidunt eget diam. Vivamus venenatis faucibus eros, eu pulvinar turpis convallis id. Quisque iaculis scelerisque dolor, et tempor quam vehicula ac. Morbi pharetra viverra nisl, vel congue neque interdum id. Proin id sollicitudin ante.
			Phasellus feugiat dolor id ante malesuada et feugiat nisl rhoncus. Pellentesque a tempus erat. Mauris et mauris eget augue tempus euismod et id elit. Phasellus libero nisl, tempus sit amet tincidunt sit amet, auctor vitae orci. Curabitur placerat est consectetur tellus feugiat bibendum. Mauris sit amet quam ut purus lacinia commodo nec a urna. Fusce magna turpis, venenatis at tincidunt hendrerit, iaculis a nulla. Donec felis est, luctus at tempus nec, tempus eu neque. Donec vitae sapien id quam pellentesque rutrum. Nam sollicitudin odio nec est malesuada sed mattis quam bibendum. Suspendisse pellentesque fringilla elit, eu condimentum enim mollis at. Ut velit arcu, gravida eu lobortis quis, placerat ut massa. In quis mattis mauris. Nam adipiscing leo ac lacus tempor convallis.
			Mauris ultricies, ipsum ut fermentum fringilla, lorem turpis tempor quam, nec rutrum mi sapien sed justo. Duis quis tellus sollicitudin nisl fermentum ornare non at libero. Pellentesque sem velit, pellentesque at aliquet in, pulvinar quis ipsum. Vivamus aliquam pharetra felis, id elementum enim pharetra nec. Proin ultricies justo at felis lobortis sodales. Cras in dignissim nisi. Aliquam pellentesque bibendum arcu ut tempor. Suspendisse potenti. Donec lectus tortor, pharetra non vehicula eu, vehicula id sem. Etiam ac urna eu arcu vulputate molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sapien mauris, pellentesque id sagittis mollis, cursus convallis mauris. Quisque eget lacus magna, sit amet egestas lectus.
			Aenean id turpis sed mauris placerat pretium ac vitae est. Nulla eleifend urna at odio molestie vitae porttitor est malesuada. Integer sit amet leo ligula. Nulla porta mattis tortor, id sagittis justo bibendum nec. Duis congue facilisis elit vel volutpat. Suspendisse nec sollicitudin urna. Phasellus quis felis pharetra urna ullamcorper sagittis non ac dolor. Integer neque est, scelerisque sed condimentum vel, sodales in arcu. Vestibulum nec mi at sem semper adipiscing quis sed risus. Proin id nisl ligula.
			Ut vel tellus massa, eu mattis orci. Maecenas et dapibus magna. Donec in risus eget nisl rhoncus fermentum id eu mauris. Phasellus aliquet feugiat odio. Aliquam nisi nunc, placerat eget hendrerit fringilla, fringilla sit amet leo. Suspendisse potenti. Ut at magna felis, vitae hendrerit dui. Aliquam dignissim feugiat risus et bibendum. Etiam ligula est, molestie semper tincidunt in, rhoncus vitae libero. Proin commodo ornare odio, ut aliquam magna convallis quis. Ut semper risus eget orci congue sed auctor nunc laoreet. Vestibulum lorem nulla, vehicula ullamcorper ultrices quis, iaculis eu mi. Donec eget nibh nulla. In leo elit, tristique in vehicula sed, lacinia varius odio. Aliquam porttitor dui pharetra tellus cursus placerat.
			Aenean a augue justo. Sed dolor nunc, dictum ut volutpat sed, imperdiet eu turpis. Sed arcu nisi, ultrices in tempor ac, consectetur ac urna. Vestibulum pharetra, purus consectetur elementum facilisis, nisi nulla pretium tellus, at suscipit purus mi in dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae diam velit, nec tristique eros. Aliquam sed venenatis risus. Integer dictum, lacus sed ullamcorper lacinia, massa ipsum viverra lacus, ut auctor elit tellus et sapien. Duis vel lorem neque, ut lacinia risus. Etiam quis purus elit, vitae lacinia lorem.
		</div>
		<footer>
			<div class="vcard">by
				<address class="author">
					<em class="fn">
						<a title="posted by author1" href="#">author1</a>
					</em>
				</address>
				on
			 	<time datetime="2012-03-20" class="published updated">
			 		March 20<sup>th</sup>, 2012
			 	</time>
			</div>
			<span class="wordcount + stuff">204</span>
			social network icons
			<span class="tags">asd asd asd</span>
		</footer>
		<aside class="comments">
			<header>
				<h1>Comments</h1>
			</header>
		</aside>
	</article>
	<article>
		<header>
			<hgroup>
				<h1>title2</h1>
				<h2>untatitel</h2>
			</hgroup>
		</header>
		<img src="http://farm8.staticflickr.com/7022/6666805497_396df89ee3_b.jpg"/>
		<div class="tldr"><span class="tldr">tl;dr:</span> lorem ipsum dolor! </div>
		<div class="content">
			Augue integer, ac sed? Magna, tincidunt vel natoque aliquet quis cursus dapibus dictumst quis! Pellentesque penatibus, pulvinar adipiscing, ut? A augue. Integer pulvinar amet, adipiscing urna tortor parturient ut adipiscing tristique in massa nunc urna vel facilisis odio adipiscing phasellus, ac sed! Porttitor aliquam habitasse pellentesque tempor adipiscing nec in adipiscing? Mus mus? Natoque ac cras. Turpis sed est sit integer tempor eros, pulvinar. Lacus dignissim, nunc magna est arcu ut magnis, arcu aenean! Purus rhoncus nec ultrices porttitor dis eu montes mus scelerisque urna vut, turpis sed ac mattis? Ac tempor? Ut turpis augue dis, mauris sed a elit in nec, mid dolor et, lacus a augue? Cras porttitor? Ac. Phasellus pulvinar scelerisque in massa? Ultricies tristique? Nec quis.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus tortor, gravida ac ultricies et, consectetur vel tellus. Sed sed lacus erat. Phasellus rhoncus risus vitae tortor imperdiet feugiat. Nulla mattis libero vitae magna sollicitudin pharetra. Ut vulputate bibendum consequat. Morbi mollis adipiscing egestas. Nullam facilisis posuere orci ut gravida. Integer hendrerit urna vitae tellus suscipit tristique sodales felis adipiscing. Vestibulum congue, orci vitae pretium sollicitudin, eros orci ultrices dolor, at gravida justo augue eleifend quam. Maecenas orci enim, ultricies nec commodo ac, interdum sit amet erat. Integer varius lorem id metus cursus congue. Etiam eleifend rhoncus felis, sed congue augue tempus sed. Morbi mollis auctor leo at pharetra. Nulla facilisis auctor dolor, ut vehicula risus sodales eget.
			Quisque congue suscipit dolor a tincidunt. Pellentesque et euismod quam. Curabitur ut purus est. Phasellus nisl velit, consectetur et convallis ut, aliquam a nibh. Nullam vel accumsan erat. Ut ultrices blandit nunc, id dapibus ligula ornare id. Nulla vitae ligula tellus. Donec consectetur commodo lacinia. Aliquam cursus feugiat odio a semper.
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vitae risus velit, ac fringilla leo. Suspendisse vel mattis nisi. Curabitur malesuada nisi sit amet lorem viverra condimentum. Nunc in mauris non felis blandit pretium a id lacus. Curabitur lorem neque, pellentesque sed condimentum in, condimentum eu velit. Nullam interdum metus eu mi rutrum at commodo lectus semper.
			Nulla mattis accumsan euismod. Nulla quis urna id sapien aliquam convallis. Suspendisse orci odio, fringilla sed mattis et, pretium sit amet nunc. Aliquam auctor facilisis dolor id aliquam. Aliquam laoreet nisi ut nulla lobortis ornare. Cras iaculis viverra nunc, quis semper nunc sollicitudin id. Vestibulum eu mauris arcu. Sed justo purus, euismod id pharetra non, tristique a mauris. Ut ut nunc ut enim aliquam laoreet sed ut lacus.
			Donec cursus nisi a eros adipiscing cursus. Aenean euismod suscipit lacus eget placerat. Nullam tincidunt tristique tortor, non dignissim lorem fringilla quis. Phasellus id dolor id arcu porta facilisis a eget lacus. Suspendisse nec venenatis arcu. Fusce leo libero, varius quis vestibulum id, lobortis interdum lorem. Nam tempus bibendum nulla lobortis pharetra. Sed at rhoncus arcu. Suspendisse sed est lacus, sit amet bibendum orci. Mauris justo dui, iaculis sed tempor quis, tincidunt eget diam. Vivamus venenatis faucibus eros, eu pulvinar turpis convallis id. Quisque iaculis scelerisque dolor, et tempor quam vehicula ac. Morbi pharetra viverra nisl, vel congue neque interdum id. Proin id sollicitudin ante.
			Phasellus feugiat dolor id ante malesuada et feugiat nisl rhoncus. Pellentesque a tempus erat. Mauris et mauris eget augue tempus euismod et id elit. Phasellus libero nisl, tempus sit amet tincidunt sit amet, auctor vitae orci. Curabitur placerat est consectetur tellus feugiat bibendum. Mauris sit amet quam ut purus lacinia commodo nec a urna. Fusce magna turpis, venenatis at tincidunt hendrerit, iaculis a nulla. Donec felis est, luctus at tempus nec, tempus eu neque. Donec vitae sapien id quam pellentesque rutrum. Nam sollicitudin odio nec est malesuada sed mattis quam bibendum. Suspendisse pellentesque fringilla elit, eu condimentum enim mollis at. Ut velit arcu, gravida eu lobortis quis, placerat ut massa. In quis mattis mauris. Nam adipiscing leo ac lacus tempor convallis.
			Mauris ultricies, ipsum ut fermentum fringilla, lorem turpis tempor quam, nec rutrum mi sapien sed justo. Duis quis tellus sollicitudin nisl fermentum ornare non at libero. Pellentesque sem velit, pellentesque at aliquet in, pulvinar quis ipsum. Vivamus aliquam pharetra felis, id elementum enim pharetra nec. Proin ultricies justo at felis lobortis sodales. Cras in dignissim nisi. Aliquam pellentesque bibendum arcu ut tempor. Suspendisse potenti. Donec lectus tortor, pharetra non vehicula eu, vehicula id sem. Etiam ac urna eu arcu vulputate molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sapien mauris, pellentesque id sagittis mollis, cursus convallis mauris. Quisque eget lacus magna, sit amet egestas lectus.
			Aenean id turpis sed mauris placerat pretium ac vitae est. Nulla eleifend urna at odio molestie vitae porttitor est malesuada. Integer sit amet leo ligula. Nulla porta mattis tortor, id sagittis justo bibendum nec. Duis congue facilisis elit vel volutpat. Suspendisse nec sollicitudin urna. Phasellus quis felis pharetra urna ullamcorper sagittis non ac dolor. Integer neque est, scelerisque sed condimentum vel, sodales in arcu. Vestibulum nec mi at sem semper adipiscing quis sed risus. Proin id nisl ligula.
			Ut vel tellus massa, eu mattis orci. Maecenas et dapibus magna. Donec in risus eget nisl rhoncus fermentum id eu mauris. Phasellus aliquet feugiat odio. Aliquam nisi nunc, placerat eget hendrerit fringilla, fringilla sit amet leo. Suspendisse potenti. Ut at magna felis, vitae hendrerit dui. Aliquam dignissim feugiat risus et bibendum. Etiam ligula est, molestie semper tincidunt in, rhoncus vitae libero. Proin commodo ornare odio, ut aliquam magna convallis quis. Ut semper risus eget orci congue sed auctor nunc laoreet. Vestibulum lorem nulla, vehicula ullamcorper ultrices quis, iaculis eu mi. Donec eget nibh nulla. In leo elit, tristique in vehicula sed, lacinia varius odio. Aliquam porttitor dui pharetra tellus cursus placerat.
			Aenean a augue justo. Sed dolor nunc, dictum ut volutpat sed, imperdiet eu turpis. Sed arcu nisi, ultrices in tempor ac, consectetur ac urna. Vestibulum pharetra, purus consectetur elementum facilisis, nisi nulla pretium tellus, at suscipit purus mi in dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae diam velit, nec tristique eros. Aliquam sed venenatis risus. Integer dictum, lacus sed ullamcorper lacinia, massa ipsum viverra lacus, ut auctor elit tellus et sapien. Duis vel lorem neque, ut lacinia risus. Etiam quis purus elit, vitae lacinia lorem.
		</div>
		<footer>
			<div class="vcard">by
				<address class="author">
					<em class="fn">
						<a title="posted by author1" href="#">author1</a>
					</em>
				</address>, 
			 	<time datetime="2012-03-20" class="published updated">
			 		today
			 	</time>
			</div>
			<span class="wordcount + stuff">204</span>
			social network icons
			<span class="tags">asd asd asd</span>
		</footer>
		<aside class="comments">
			<header>
				<h1>Comments</h1>
			</header>
			<article>
				<header>
					<h1>Comment 1</h1>
				</header>
				<div>
				commentar
				</div>
				<footer>
					<span class="author">author</span>
					<span class="datetime">datum + uhrzeit</span>
				</footer>
				<aside class="comments">
					<header>
						<h1>Replies</h1>
					</header>
					<article>
						<header>
							<h1>Re: Comment 1</h1>
						</header>
						<div>
						commentar
						</div>
						<footer>
							<span class="author">author</span>
							<span class="datetime">datum + uhrzeit</span>
						</footer>
					</article
				</aside>
			</article
		</aside>
	</article>
	<article id="title-3">
		<header>
			<hgroup>
				<h1>title 3</h1>
			</hgroup>
		</header>
		
		<div class="tldr"><span class="tldr">tl;dr:</span> lorem ipsum dolor! </div>
		<div class="content">
			Augue integer, ac sed? Magna, tincidunt vel natoque aliquet quis cursus dapibus dictumst quis! Pellentesque penatibus, pulvinar adipiscing, ut? A augue. Integer pulvinar amet, adipiscing urna tortor parturient ut adipiscing tristique in massa nunc urna vel facilisis odio adipiscing phasellus, ac sed! Porttitor aliquam habitasse pellentesque tempor adipiscing nec in adipiscing? Mus mus? Natoque ac cras. Turpis sed est sit integer tempor eros, pulvinar. Lacus dignissim, nunc magna est arcu ut magnis, arcu aenean! Purus rhoncus nec ultrices porttitor dis eu montes mus scelerisque urna vut, turpis sed ac mattis? Ac tempor? Ut turpis augue dis, mauris sed a elit in nec, mid dolor et, lacus a augue? Cras porttitor? Ac. Phasellus pulvinar scelerisque in massa? Ultricies tristique? Nec quis.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus tortor, gravida ac ultricies et, consectetur vel tellus. Sed sed lacus erat. Phasellus rhoncus risus vitae tortor imperdiet feugiat. Nulla mattis libero vitae magna sollicitudin pharetra. Ut vulputate bibendum consequat. Morbi mollis adipiscing egestas. Nullam facilisis posuere orci ut gravida. Integer hendrerit urna vitae tellus suscipit tristique sodales felis adipiscing. Vestibulum congue, orci vitae pretium sollicitudin, eros orci ultrices dolor, at gravida justo augue eleifend quam. Maecenas orci enim, ultricies nec commodo ac, interdum sit amet erat. Integer varius lorem id metus cursus congue. Etiam eleifend rhoncus felis, sed congue augue tempus sed. Morbi mollis auctor leo at pharetra. Nulla facilisis auctor dolor, ut vehicula risus sodales eget.
			<figure>
				<img src="http://farm8.staticflickr.com/7161/6666898447_164b3ca36e_b.jpg" />
				<figcaption>
					"Lake House", original by <a href="http://www.flickr.com/photos/leanan_shide/">Lhiannan Shee</a>
				</figcaption>
			</figure>
			Quisque congue suscipit dolor a tincidunt. Pellentesque et euismod quam. Curabitur ut purus est. Phasellus nisl velit, consectetur et convallis ut, aliquam a nibh. Nullam vel accumsan erat. Ut ultrices blandit nunc, id dapibus ligula ornare id. Nulla vitae ligula tellus. Donec consectetur commodo lacinia. Aliquam cursus feugiat odio a semper.
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vitae risus velit, ac fringilla leo. Suspendisse vel mattis nisi. Curabitur malesuada nisi sit amet lorem viverra condimentum. Nunc in mauris non felis blandit pretium a id lacus. Curabitur lorem neque, pellentesque sed condimentum in, condimentum eu velit. Nullam interdum metus eu mi rutrum at commodo lectus semper.
			Nulla mattis accumsan euismod. Nulla quis urna id sapien aliquam convallis. Suspendisse orci odio, fringilla sed mattis et, pretium sit amet nunc. Aliquam auctor facilisis dolor id aliquam. Aliquam laoreet nisi ut nulla lobortis ornare. Cras iaculis viverra nunc, quis semper nunc sollicitudin id. Vestibulum eu mauris arcu. Sed justo purus, euismod id pharetra non, tristique a mauris. Ut ut nunc ut enim aliquam laoreet sed ut lacus.
			Donec cursus nisi a eros adipiscing cursus. Aenean euismod suscipit lacus eget placerat. Nullam tincidunt tristique tortor, non dignissim lorem fringilla quis. Phasellus id dolor id arcu porta facilisis a eget lacus. Suspendisse nec venenatis arcu. Fusce leo libero, varius quis vestibulum id, lobortis interdum lorem. Nam tempus bibendum nulla lobortis pharetra. Sed at rhoncus arcu. Suspendisse sed est lacus, sit amet bibendum orci. Mauris justo dui, iaculis sed tempor quis, tincidunt eget diam. Vivamus venenatis faucibus eros, eu pulvinar turpis convallis id. Quisque iaculis scelerisque dolor, et tempor quam vehicula ac. Morbi pharetra viverra nisl, vel congue neque interdum id. Proin id sollicitudin ante.
			Phasellus feugiat dolor id ante malesuada et feugiat nisl rhoncus. Pellentesque a tempus erat. Mauris et mauris eget augue tempus euismod et id elit. Phasellus libero nisl, tempus sit amet tincidunt sit amet, auctor vitae orci. Curabitur placerat est consectetur tellus feugiat bibendum. Mauris sit amet quam ut purus lacinia commodo nec a urna. Fusce magna turpis, venenatis at tincidunt hendrerit, iaculis a nulla. Donec felis est, luctus at tempus nec, tempus eu neque. Donec vitae sapien id quam pellentesque rutrum. Nam sollicitudin odio nec est malesuada sed mattis quam bibendum. Suspendisse pellentesque fringilla elit, eu condimentum enim mollis at. Ut velit arcu, gravida eu lobortis quis, placerat ut massa. In quis mattis mauris. Nam adipiscing leo ac lacus tempor convallis.
			Mauris ultricies, ipsum ut fermentum fringilla, lorem turpis tempor quam, nec rutrum mi sapien sed justo. Duis quis tellus sollicitudin nisl fermentum ornare non at libero. Pellentesque sem velit, pellentesque at aliquet in, pulvinar quis ipsum. Vivamus aliquam pharetra felis, id elementum enim pharetra nec. Proin ultricies justo at felis lobortis sodales. Cras in dignissim nisi. Aliquam pellentesque bibendum arcu ut tempor. Suspendisse potenti. Donec lectus tortor, pharetra non vehicula eu, vehicula id sem. Etiam ac urna eu arcu vulputate molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sapien mauris, pellentesque id sagittis mollis, cursus convallis mauris. Quisque eget lacus magna, sit amet egestas lectus.
			Aenean id turpis sed mauris placerat pretium ac vitae est. Nulla eleifend urna at odio molestie vitae porttitor est malesuada. Integer sit amet leo ligula. Nulla porta mattis tortor, id sagittis justo bibendum nec. Duis congue facilisis elit vel volutpat. Suspendisse nec sollicitudin urna. Phasellus quis felis pharetra urna ullamcorper sagittis non ac dolor. Integer neque est, scelerisque sed condimentum vel, sodales in arcu. Vestibulum nec mi at sem semper adipiscing quis sed risus. Proin id nisl ligula.
			Ut vel tellus massa, eu mattis orci. Maecenas et dapibus magna. Donec in risus eget nisl rhoncus fermentum id eu mauris. Phasellus aliquet feugiat odio. Aliquam nisi nunc, placerat eget hendrerit fringilla, fringilla sit amet leo. Suspendisse potenti. Ut at magna felis, vitae hendrerit dui. Aliquam dignissim feugiat risus et bibendum. Etiam ligula est, molestie semper tincidunt in, rhoncus vitae libero. Proin commodo ornare odio, ut aliquam magna convallis quis. Ut semper risus eget orci congue sed auctor nunc laoreet. Vestibulum lorem nulla, vehicula ullamcorper ultrices quis, iaculis eu mi. Donec eget nibh nulla. In leo elit, tristique in vehicula sed, lacinia varius odio. Aliquam porttitor dui pharetra tellus cursus placerat.
			Aenean a augue justo. Sed dolor nunc, dictum ut volutpat sed, imperdiet eu turpis. Sed arcu nisi, ultrices in tempor ac, consectetur ac urna. Vestibulum pharetra, purus consectetur elementum facilisis, nisi nulla pretium tellus, at suscipit purus mi in dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae diam velit, nec tristique eros. Aliquam sed venenatis risus. Integer dictum, lacus sed ullamcorper lacinia, massa ipsum viverra lacus, ut auctor elit tellus et sapien. Duis vel lorem neque, ut lacinia risus. Etiam quis purus elit, vitae lacinia lorem.
		</div>
		<footer>
			<span class="author">author</span>
			<span class="datetime">datum + uhrzeit</span>
			<span class="wordcount + stuff">204</span>
			social network icons
			<span class="tags">asd asd asd</span>
		</footer>
		<aside class="comments">
			<header>
				<h1>Comments</h1>
			</header>
		</aside>
	</article>
</section>
<footer>
	<dl>
		<article class="license">
			<dt><h1>cc: by-nc-sa</h1></dt>
			<dd>
				<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
					<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" />
				</a>
				<br />
				<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">
					checkedHat
				</span>
				by 
				<a xmlns:cc="http://creativecommons.org/ns#" href="http://checkedhat.com" property="cc:attributionName" rel="cc:attributionURL">
					Stefan &#34;ramsesoriginal&#34; Insam and Isabelle &#34;Lhiannan Shee&#34; Cosner
				</a>
				is licensed under a
				<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
					Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
				</a>
				.
				<br />
				Permissions beyond the scope of this license may be available at
				<a xmlns:cc="http://creativecommons.org/ns#" href="http://checkedhat.com/contact" rel="cc:morePermissions">
					http://checkedhat.com/contact
				</a>
				.
			</dd>
		</article>
		<nav>
			<dt>
				<h1>The authors</h1>
			</dt>
			<dd>
				<div id="hcard-Stefan-&#34;ramsesoriginal&#34;-Insam" class="vcard">
					<a class="url fn n" href="http://checkedhat.com">
						<span class="given-name">Stefan</span>
						<span class="additional-name">&#34;ramsesoriginal&#34;</span>
						<span class="family-name">Insam</span>
					</a>
					<div class="org">checkedhat</div>
					<a class="email" href="mailto:ramsesoriginal@checkedhat.com">ramsesoriginal@checkedhat.com</a>
					<a class="url" href="xmpp:ramsesoriginal@gmail.com">Jabber</a>
				</div>
			</dd>
			<dd>
				<div id="hcard-Isabelle-&#34;Lhinnan-Shee&#34;-Cosner" class="vcard">
					<a class="url fn n" href="http://checkedhat.com">
						<span class="given-name">Isabelle</span>
						<span class="additional-name">&#34;Lhinnan-Shee&#34;</span>
						<span class="family-name">Cosner</span>
					</a>
					<div class="org">checkedhat</div>
					<a class="email" href="mailto:lhiannan-shee@checkedhat.com">lhiannan-shee@checkedhat.com</a>
					<a class="url" href="xmpp:cosner.isabelle@gmail.com">Jabber</a>
				</div>
			</dd>
		</nav>
		<article>
			<dt><h1>Powered by:</h1></dt>
			<dd>ruby on rails</dd>
			<dd>jQuery</dd>
			<dd>apache</dd>
			<dd>a small orange</dd>
			<dd>dabblet.com</dd>
			<dd>jsfiddle.net</dd>
			<dd>sublime 2</dd>
			<dd>modernizr</dd>
			<dd>preifix-free</dd>
			<dd>github</dd>
			<dd>Sass</dd>
			<dd>google analytics</dd>
		</article>
		<article>
			<dt><h1>random quote</h1></dt>
			<dd>Vidi, Vici, Veni</dd>
		</article>
	</dl>
</footer>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"css"}