/* Everywhere */

body {
	background: #5a5a5a;
	color: #666;
	font-family: Verdana,sans-serif;
	font-size: 12px;
}

a {
	color: #07f;
	text-decoration: none;
}

	a:active, a:hover {
		text-decoration: underline;
	}
	
h1 {
	background: url(../img/h1.png) no-repeat;
	height: 40px;
	overflow: hidden;
	text-indent: -9999px;
	width: 176px;
}
	
header, section, footer {
	display: block;
	position: relative;
}
	
.constraint {
	margin: 0 auto;
	position: relative;
	width: 888px;
}

/* Header */

header {
	background: #333;
}

	header .constraint {
		height: 160px;
	}

	header a, header p {
		display: block;
		height: 80px;
		margin-top: -40px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 50%;
	}

	header a {
		background: url(../img/logo-light.png) no-repeat;
		left: 0;
		width: 302px;
	}
	
	header p {
		background: url(../img/header_p.png) no-repeat right center;
		border-left: 1px solid #5c5c5c;
		right: 0;
		padding-left: 34px;
		width: 514px;
	}
	
/* Main */

#main {
	background: #fff;
}

	#main .constraint {
		background: url(../img/main_constraint.gif) no-repeat right 285px;
		min-height: 465px;
		padding: 0 26px;
	}

#cover, #cover img {
	display: block;
	height: 450px;
	width: 300px;
}

#cover {
	left: 50%;
	margin-left: -150px;
	position: absolute;
	top: -15px;
	z-index: 2;
	-webkit-perspective: 500px;
}

	#cover img {
		-webkit-transform-style: preserve-3d; 
	}
	
#cta, #stc {
	display: block;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
}
	
#cta {
	background: url(../img/cta.png) no-repeat;
	height: 110px;
	right: 0;
	top: 295px;
	width: 347px;
	z-index: 3;
}

	#cta:active, #cta:hover {
		background-position: 0 -110px;
	}
	
#stc {
	background: url(../img/stc.gif) no-repeat;
	height: 100px;
	left: 0;
	top: 285px;
	width: 470px;
}

	#stc:active, #stc:hover {
		background-position: 0 -100px;
	}

.col {
	margin-top: 38px;
}

#preview {
	float: left;
	width: 272px;
}

	#preview li {
		float: left;
		margin: 0 10px 10px 0;
	}
		#preview li a img {
			border: 5px solid #07f;
		}
		#preview li a:active img, #preview li a:hover img {
			border-color: #b83c24;
		}
	
#contributors {
	float: right;
	width: 262px;
}
	#contributors h1 {
		background-position: 0 -50px;
		height: 37px;
	}
	#contributors li {
		float: left;
		font-size: 14px;
		line-height: 22px;
		width: 50%;
	}
	#contributors .sub {
		clear: both;
		color: #888;
		float: none;
		font-size: 12px;
		width: 100%;
	}

/* Exposition */

#exposition {
	background: #e0e0e0;
	padding: 30px 0;
}

	#exposition p {
		line-height: 18px;
		padding-bottom: 12px;
	}
	
	#exposition:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}

#about {
	float: left;
	width: 570px;
}
	#about h1 {
		background-position: 0 -100px;
	}
	#about img {
		float: right;
		margin: -3px 0 10px 10px;
	}
	#about p.intro {
		font-size: 14px;
		line-height: 24px;
	}
	
#share {
	float: right;
	width: 270px;
}
	#share h1 {
		background-position: 0 -150px;
	}
	#share li {
		float: left;
		margin: 0 10px 10px 0;
	}
	#share iframe {
		margin: -1px 0 0 -10px;
	}
	
.image-pack {
	background: url(../img/image-pack.png) no-repeat left 3px;
	display: inline-block;
	padding: 2px 0 2px 22px;
}

/* Footer */

footer {
	color: #ccc;
}
	footer .constraint {
		padding: 20px 0 22px;
	}
	footer p {
		font-size: 11px;
		line-height: 18px;
		text-align: right;
	}
	
	footer a {
		color: #fff;
	}
	
#tylersticka {
	background: url(../img/tylersticka-light.png) no-repeat;
	display: block;
	height: 56px;
	left: 0;
	margin-top: -28px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 50%;
	width: 75px;
}

	#tylersticka:active, #tylersticka:hover {
		background-position: 0 -56px;
	}