@charset "UTF-8";
/*****************************************************************/
/*****************************************************************/
/* layout.css                                                    */
/* Layout CSS                                                    */
/* Copyright (c) Martin Rosell 2009                              */
/*****************************************************************/
/* Don't steal, it's not very becoming                           */
/*****************************************************************/
/*****************************************************************/

/* GRID */
/* 
	column width: 149px;
	gutter: 11px;
	header height: 175px;
*/


/*****************************************************************/
/* GENERAL                                                       */
/*****************************************************************/
body {
	/*background: url(../img/grid.png) top center no-repeat; *//* Dev Grid */
}
div#header, div#content, div#footer {
	margin: 0 auto;
	width: 949px;
}
div#id-feature {
	position: absolute;
	left: 50%;
	margin-left: -475px;
	top: 0;
	z-index: 1000;
}
div.dot {
	height: 1px;
	position: absolute;
	width: 1px;
}
input[type=text], textarea {
	border: 1px solid;
	clear: left;
	display: block;
	margin-bottom: 5px;
	padding: 8px 3px 6px;
	width: 301px;
}
input[type=button], input[type=submit] {
	margin-top: 10px;
}
label.structural {
	position: absolute;
	left: -9999px;
}
/*****************************************************************/
/* END/GENERAL                                                   */
/*****************************************************************/


/*****************************************************************/
/* HEADER                                                        */
/*****************************************************************/
div#header {
	height: 155px;
	padding-top: 20px;
	position: relative;
}
a.logo {
	display: block;
	float: left;
	height: 82px;
	text-indent: -9999px;
	width: 149px;
}
div#header div.contact {
	float: left;
	margin-left: 171px;
	width: 149px;
}
div#header span#tweet {
	display: block;
	padding-left: 10px;
	position: absolute;
	width: 139px;
}
ul#menu {
	float: left;
	margin-left: 11px;
	width: 149px;
}
ul#menu li {
	position: relative;
	text-align: right;
}
ul#menu ul {
	left: 149px;
	margin-left: 11px;
	position: absolute;
	text-align: left;
	top: 0;
	width: 309px;
}
ul#menu ul li {
	display: inline-block;
}
a.rss {
	height: 16px;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	bottom: 5px;
	width: 16px;
}
/*****************************************************************/
/* END/HEADER                                                    */
/*****************************************************************/

/*****************************************************************/
/* CONTENT                                                       */
/*****************************************************************/
div#content {
	overflow: hidden;
	padding-bottom: 40px;
}
div.section {
	border-top: 1px solid;
	float: left;
	padding-top: 20px;
}
div.section.no1 h1 {
	padding-bottom: 30px;
}
div.section.no1 > h2, div.section.no1 > p {
	width: 149px;
}
div.section.no1 h2 {
	padding-top: 18px;
}
div.section.no1 h1 + * {
	border-top: 1px solid;
	padding-top: 20px;
}
p.continue {
	padding-top: 20px;
	text-align: right;
}
div.post, div.case {
	border-top: 1px solid;
	overflow: hidden;
	padding: 20px 0 30px;
}
div.post:first-child, div.case:first-child {
	border-top: none;
	padding-top: 0;
}
div.post > a:first-child {
	border: none;
	display: block;
	height: auto;
}
div.post *.promo {
	margin-bottom: 5px;
}
div.post h3, div.post p.date, div.post p.comments, div.post p.tags {
	clear: left;
	float: left;
	text-align: right;
	width: 149px;
}
div.post p.summary {
	clear: none;
	float: right;
	width: 309px;
}
/* Startpage */
body#home div.section.no1 {
	width: 309px;
}
body#home ul.portfolio {
	overflow: hidden;
	width: 469px;
}
body#home ul.portfolio li {
	display: block;
	float: left;
	margin-left: 11px;
	position: relative;
	width: 149px;
}
body#home ul.portfolio li:first-child {
	margin-left: 0;
}
body#home ul.portfolio li a, body#portfolio div.case > a {
	border: none;
	display: inline;
	height: auto;
}
body#home ul.portfolio li span {
	left: 0;
	position: absolute;
	top: 0;
	visibility: hidden;
}
body#home ul.portfolio li a:hover span {
	visibility: visible;
}
body#home div.section.no1 p.continue {
	width: 469px;
}
body#home div.section.no2, body#journal div.section.no2 {
	float: right;
	width: 469px;
}
/* END/Startpage */

/* Portfolio */
body#portfolio div.section.no1 {
	width: 469px;
}
body#portfolio.case div.section.no1 {
	width: 309px;
}
body#portfolio div.section.no2 {
	float: right;
	width: 469px;
}
body#portfolio.case div.section.no2 {
	border-top: 1px solid;
	padding: 20px 0 30px;
	width: 629px;
}
body#portfolio.case div#screens {
	margin-bottom: 20px;
}
body#portfolio div.case img {
	float: left;
}
div.case h3, body#portfolio div.case > p {
	float: right;
	width: 149px;
}
body#portfolio div.case > p.categories {
	margin-top: 5px;
}
body#portfolio.case div#content {
	overflow: visible;
}
body#portfolio.case div.section.no2 > p.description {
	float: left;
	width: 309px;
}
body#portfolio.case div.section.no2 div.data {
	float: right;
	width: 309px;
}
body#portfolio.case div.section.no2 div.data h3 {
	float: left;
	clear: both;
	text-align: right;
	width: 149px;
}
body#portfolio.case div.section.no2 div.data > p {
	float: right;
	width: 149px;
}
/* END/Portfolio */

/* Journal */
body#journal div.section.no1 {
	width: 469px;
}
body#journal.post div.section.no1 h1 {
	padding-bottom: 0;
}
body#journal.post div.section.no1 h1 + * {
	border-top: none;
	padding-top: 0;
}
body#journal.post div.section.no1 p.back {
	border-top: 1px solid;
	margin-top: 30px;
	padding-top: 20px;
}

body#journal.post div.section.no2 {
	padding-right: 160px;
	padding-bottom: 40px;
	width: 309px;
}
div#post > img {
	float: right;
	margin: 0 -160px 11px 11px;
	}
	div#post > img.fullsize {
		clear: both;
		margin: 20px -160px 0 0;
		}
		div#post > img.fullsize.max {
			margin-left: -309px;
		}
	div#post > img.fullsize + img.fullsize {
		margin-top: 0;
	}
	div#post > img.fullsize.screen + img.fullsize.screen {
		margin-top: 1px;
	}
div#post ul {
	list-style-type: disc;
	padding-left: 15px;
}
div#post > h3, div#post > p + p, div#post > ul + p, div#post > object + p, div#post > p + object, div#post > div.feature + p {
	padding-top: 18px;
}
div#post > object {
	display: block;
	}
	div#post > object + object {
		margin-top: 1px;
	}
div#post div.feature {
	clear: both;
	margin: 18px -160px 0 0;
	overflow: hidden;
	padding-left: 160px;
	}
	div#post div.feature > img {
		float: left;
		margin: -18px 11px 0 -160px;
	}

pre {
	border-left: 1px solid;
	margin: 18px 160px 18px 0;
	padding-left: 18px;
}
body#journal.post div.section.no3 {
	clear: both;
	float: right;
	padding-top: 0;
	width: 629px;
}
body#journal.post div#comments h3 {
	clear: both;
	float: left;
	padding-top: 20px;
	width: 149px;
	}
	body#journal.post div#comments form h3 {
		padding-top: 0;
	}
body#journal.post div.comment, body#journal.post fieldset {
	float: right;
	width: 469px;
}
body#journal.post div.comment {
	border-top: 1px solid;
	padding: 20px 0 30px;
}
body#journal.post div#comments h3 + div.comment {
	border-top: none;
}
body#journal.post div.comment p {
	float: right;
	clear: right;
	width: 149px;
}
body#journal.post div.comment p.text {
	float: left;
	width: 309px;
}
body#journal.post div#comments form {
	border-top: 1px solid;
	clear: both;
	padding: 20px 0 30px;
	}
	body#journal.post div#comments > form:first-child {
		border-top: none;
	}
body#journal.post div#comments p.instruction {
	float: right;
	width: 149px;
}
/* END/Journal */

/* About */
body#about div.section.no1 {
	width: 469px;
}
body#about div.section.no2 {
	float: right;
	padding-right: 160px;
	width: 309px;
}
body#about div.section.no2 > img {
	float: right;
	margin: 0 -160px 11px 11px;
}
body#about div.section.no2 > h3 {
	float: left;
	margin: 0 0 0 -160px;
	text-align: right;
	width: 149px;
}
body#about div.section.no2 > p {
	margin-bottom: 18px;
}
/* END/About */

/* Contact */
body#contact div.section.no1 {
	width: 309px;
}
body#contact div.section.no2 {
	margin-left: 11px;
	width: 309px;
}
body#contact div.section.no2 > h3 {
	margin-bottom: 10px;
}
body#contact div.section.no3 {
	float: right;
	width: 309px;
}
body#contact div.section.no3 p.twitter {
	margin-top: 9px;
}
/* END/Contact */

/*****************************************************************/
/* END/CONTENT                                                   */
/*****************************************************************/

/*****************************************************************/
/* FOOTER                                                        */
/*****************************************************************/
div#footer {
	clear: both;
	padding-bottom: 40px;
}
div#footer p.copyright {
	border-top: 1px solid;
	padding-top: 20px;
	width: 629px;
}
/*****************************************************************/
/* END/FOOTER                                                    */
/*****************************************************************/