* {
    margin: 0;
    padding: 0;
}
html, 
body {
	height:100%;
}

body {
	margin:0;
	padding:0;
	font:0.69em/1.5em Georgia;
	color:#f0efef;
	min-width:90em;
}

a {
	color:#2c3128;
	text-decoration:none;
	border-bottom:1px dotted #2c3128;
	padding-bottom:2px;
}

h2 {
    margin: 0;
    padding: 0;	
	font-size:1.2em;
}

.invisible {
	position:absolute;
	top:0;
	left:-99999px;
	display:none;
}
.clear {
	clear:both;
}

.area-1,
.eyes,
.area-2,
.area-2 .portfolio,
.area-3,
.area-3 .about,
.area-4,
.area-4 div.stripes,
.area-4 .recommendations,
.area-5 {
	float:left;
	width:100%;
}

.area-1 .cover,
.area-1 .cover .introduction,
.area-1 .cover .twitter,
.area-2 .projects,
.area-2 .portfolio .project .badge,
.area-4 .credits {
	position:absolute;
	left:0;
	width:100%;
}

.area-1 {
	height:48em;
	z-index:0;
	background:url('../images/sitetech/background-1.jpg');	
}

.area-1 .cover {
	height:48em;
}
	.area-1 .cover .introduction {
		display:block;
		top:15em;
		width:83.7em;
		height:12em;
		background:url('../images/sitetech/introduction.png') no-repeat;
	}
	
	.area-1 .cover .twitter {
		bottom:1.6em;
		left:42em;
		font-size:1.3em;
		line-height:1.4em;
		font-style:italic;
		width:25.3em;
		height:auto;
		padding:4.2em 1.1em 0.9em;
		background:url('../images/sitetech/back-twitter.png') repeat;
	}
		.area-1 .cover .twitter .text {
			display:block;
			float:left;
			width:21em;
			margin-right:2em;
		}
		.area-1 .cover .twitter .text a,
		.area-3 .description a {	
			color:#f0efef;
			border-bottom-color:#f0efef;
		}
		.area-1 .cover .twitter .text a:hover {	
			background-color:#2c3128;
		}
		.area-3 .description a:hover {
			background-color:#486154;
		}
		.area-1 .cover .twitter a.logo-rss {
			float:left;
			display:block;
			width:25px;
			height:23px;
			border:none;
			background:url('../images/content/logo_rss.png') top left no-repeat;
		}
		.area-1 .cover .twitter a.logo-rss:hover {
			background-position:bottom left;
		}

.eyes {
	top:48em;
	height:175px;
	margin-top:-3em;
	background:url('../images/sitetech/separator-eyes.png') repeat-x;
	z-index:1;
}

.area-2 {
	height:auto;
	padding-bottom:10em;
	background:#486154 url('../images/sitetech/separator-waves.png') bottom left repeat-x;
}
	.area-2 .projects {
		left:67em;
		height:auto;
		width:auto;
		margin-top:-3em;
		z-index:1;
	}
		.area-2 .projects h2 {
			width:17em;
			height:7em;
			background:transparent url('../images/headers/projects.png') center center no-repeat;
			padding:0;
			margin:0;
		}
		.area-2 .projects span {
			float:left;
			font-size:1.6em ;
			font-style:italic;
			line-height:1.1em;
			text-indent:1em;
			margin:-2em 0pt 0pt 6.5em;
			width:8em;
		}
	.area-2 .portfolio {
		height:auto;
		width:86.4em;
		margin-top:7em;
		padding:2em;
		font-family:Verdana;
	}
		.area-2 .portfolio .project {
			background-color:#252f33;
			height:auto;
			padding:1.5em 1.5em 0.2em;
			margin-bottom:1em;
			width:39.5em;
			float:left;
		}
		.area-2 .portfolio .project .badge {
			height:90px;
			width:90px;
			left:4em;
			margin-top:-5em;
			background:transparent url(../images/sitetech/badge-featured.png) no-repeat;
		}
		.area-2 .portfolio .project.featured {
			width:83em;
		}
		.area-2 .portfolio .project.even {
			margin-right:1em;
		}
		.area-2 .portfolio .project.hover-closed {
			background:#252f33 url(../images/sitetech/back-project-closed.png) no-repeat 38.6em 12.6em;
		}
		.area-2 .portfolio .project.hover-opened {
			background:#252f33 url(../images/sitetech/back-project-opened.png) no-repeat 38.6em 12.6em;
		}
		.area-2 .portfolio .project.featured.hover-closed,
		.area-2 .portfolio .project.featured.hover-opened {
			background-position:82.2em 12.6em;
		}
			.area-2 .portfolio .project a.screenshot,
			.area-2 .portfolio .project.featured a.screenshot {
				display:block;
				background-color:#ded7d7;
				width:82.2em;
				height:10em;
				border:none;
				
			}
			.area-2 .portfolio .project a.screenshot {					
				width:38.7em;
				padding:0.3em;
			}
			.area-2 .portfolio .project a.screenshot:hover {
				background-color:#829679;
			}
				.area-2 .portfolio .project .screenshot img,
				.area-2 .portfolio .project.featured a.screenshot img,
				.area-2 .portfolio .project img.screenshot,
				.area-2 .portfolio .project a.screenshot img.screenshot,
				.area-2 .portfolio .project a img.screenshot {
					width:38.7em;
					height:10em;
					border:none;
				}
				.area-2 .portfolio .project img.screenshot {
					border:0.3em solid #ded7d7;
				}
				.area-2 .portfolio .project.featured a.screenshot img,
				.area-2 .portfolio .project.featured img.screenshot {
					width:82.2em;
				}
			
				#projectOverlay {
					position:absolute;
					background:url('../images/sitetech/back-project.png')repeat;
					width:38.7em;
					height:3em;
					margin:7.3em 0.3em 0.3em;
				}
				.featured #projectOverlay {
					width:82.2em;
				}
			.area-2 .portfolio .project .title {
				padding:1em;
			}
			.area-2 .portfolio .project .additional {
				background-color:#303a3d;
				margin-bottom:1.4em;
			}
			.area-2 .portfolio .project table {
				width:100%;
			}
			.area-2 .portfolio .project table td {
				vertical-align:top;
			}
			.area-2 .portfolio .project table td.gallery {
				vertical-align:middle;
			}
			.area-2 .portfolio .project table a {
				color:#f0efef;
				border-bottom-color:#f0efef;
			}
			.area-2 .portfolio .project table a:hover {
				background-color:#829679;
			}
			.area-2 .portfolio .project table a.image-link {
				display:block;
				width:2.7em;
				height:2.55em;
				float:left;
				margin-right:0.6em;
				border:0.2em solid #ffffff;	
				background-color:#ffffff;
			}
			.area-2 .portfolio .project table a.image-link:hover {
				border-color:#829679;	
			}
			.area-2 .portfolio .project table img {
				width:2.7em;
				height:2.7em;
				border:none; 
			}
	
	.area-2 .summarize {
		clear:both;
		margin-left:3em;
		width:78em;
	}
		.area-2 .summarize h3 {
			font-weight:normal;
			font-size:1.4em;
			font-style:italic;
			margin-bottom:0.5em;
		}
		.area-2 .summarize p {
			font-size:1.1em;
			line-height:1.6em;
			margin-left:2em;
		}

.area-3 {
	height:auto;
	background:#829679 url('../images/sitetech/separator-crunch.png') bottom left repeat-x;
	padding-bottom:1.7em;
}
	.area-3 .about {
		height:auto;
		width:auto;
		margin-top:-3em;
	}
		.area-3 .about h2 {
			width:18.7em;
			height:6.8em;
			background:transparent url('../images/headers/about.png') center center no-repeat;
		}
		.area-3 .about span {
			font-size:1.6em ;
			font-style:italic;
			margin:-0.5em 0 0 1.5em;
		}
	.area-3 div.clear {
		margin-left:9em;
		overflow:hidden;
	}
	.area-3 div.description {		
		font-size:1.1em;
		line-height:1.6em;
		width:53em;
		margin-top:3em;
		float:left;
		overflow:hidden;
	}
	.area-3 div p.description {
		width:51em;
		margin-bottom:1em;
	}
	.area-3 div p.networking {
		display:block;
		font-size:1.3em;
		font-style:italic;
		margin-left:3em;
		padding:1em 0;
		overflow:hidden;
	}
		.area-3 div p.networking span,
		.area-3 div p.networking a {
			float:left;
		}
		.area-3 div p.networking span.text {
			margin:1em 1em 0 0;
		}
		.area-3 div p.networking a.logo {
			display:block;
			width:76px;
			height:29px;
			margin:0.3em 0 0 1em;
			background:transparent url('../images/content/logo_xing.gif') top left no-repeat;
			border:none;
		}
		.area-3 div p.networking a.logo.facebook {
			width:103px;
			height:22px;
			margin:0.85em 0 0 0.9em;
			background-image:url('../images/content/logo_facebook.gif');
		}
		.area-3 div p.networking a.logo.lastfm {
			width:59px;
			height:18px;
			margin-top:0.95em;
			background-image:url('../images/content/logo_lastfm.gif');
		}
		.area-3 div p.networking a.logo.twitter {
			width:110px;
			height:21px;
			margin:0.75em 0 0 1em;
			background-image:url('../images/content/logo_twitter.gif');
		}
		.area-3 div p.networking a.logo:hover {
			background-position:bottom left;
		}
	.area-3 p.image {
		float:left;
		margin:10em 0 0 2em;
	}
		.area-3 p.image img {
			width:18.1em;
			height:23.1em;
		}

.area-4 {
	height:auto;
	color:#2c3128;
	font-size:1.1em;
	padding-bottom:1em;
	background:#8fbec6 url('../images/sitetech/separator-bottom.png') bottom left repeat-x;
}
	.area-4 div.stripes {
		background:#8fbec6 url('../images/sitetech/back-stripes.png') repeat;
		padding-bottom:3em;
		overflow:hidden;
	}
	.area-4 .credits {
		height:auto;
		width:25.1em;
		left:51.8em;
		margin-top:-3em;
		padding-left:4.9em;
	}
	.area-4 .credits h2 {
		width:18em;
		height:11.1em;
		margin-left:3em;
		background:transparent url('../images/headers/credits.png') center center no-repeat;
	}
	.area-4 .credits span.contact {
		display:block;
		font-size:1.5em;
		line-height:1.2em;
		font-style:italic;
		text-indent:-1em;
		margin:-0.5em 0 0 -2em;		
	}
		.area-4 .credits span.contact a {
			font-size:0.8em;
		}
		.area-4 .credits span.contact a:hover {
			background-color:#f0efef;
		}
		.area-4 .credits span.contact span {
			margin-left:7em;
			font-size:0.8em;
		}
			.area-4 .credits span.contact span a {
			font-size:1em;
		}
		
	.area-4 div.recommendations {
		margin:11em 0 0 5em;
		font-style:italic;
		overflow:hidden;
		width:24em;
	}
		.area-4 div.recommendations ul {
			list-style:none;
			margin:1em 0 0 1em;
		}
			.area-4 div.recommendations ul li {
				float:left;
				margin:0 0.7em 0.7em 0;		
			}			
				.area-4 div.recommendations ul li a {
					display:block;	
					width:2.8em;
					height:2.6em;
					border:0.3em solid #ffffff;		
					background-color:#ffffff;
					text-align:center;
				}
				.area-4 div.recommendations ul li a:hover {
					border-color:#829679;	
				}
					.area-4 div.recommendations ul li a img {
						border:0;			
					}

.area-5 {
	height:auto;
	margin-top:-8px;
	height:12.6em;
	color:#2c3128;
	background:transparent url('../images/sitetech/back-to-top.png') top center no-repeat;
}
	.area-5 a:hover {
		color:#f0efef;
		background-color:#8fbec6;
		border-bottom-color:#f0efef;
	}
	.area-5 .doMid {
		text-align:center;
		margin:0em auto;
		width:17.8em;
		overflow:hidden;
		font-size:1.3em;
		padding-bottom:0.5em;
		height:100%;
	}
	.area-5 ul {
		margin-top:6em;
		list-style:none;	
	}
		.area-5 ul li {
			float:left;
			margin-left:1.2em;
		}
	.area-5 .doMid#loved {
		width:48em;
		height:2em;
		margin-top:1em;
	}
		.area-5 .doMid#loved ul,
		.area-5 .doMid#loved span {
			float:left;
			margin:0;
		}