body {
	background: url(../img/e9e9e9.png);
	font: 13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif
	}

.header {
	width: 100%;
	height: 50px;
	background: #222222;
	border-bottom: 1px solid #ffffff;
	}

.logo {
	background: url(../img/top-text.png) no-repeat left 19px;
	height: 50px;
	overflow: hidden;
	}
	
.logo h1 {
	display: none;
	}
	
.bird {
	background: url(../img/top-logo.png) no-repeat right center;
	height: 50px;
	}
	
.shadow {
	width: 100%;
	height: 59px;
	margin: 0px auto;
	}
	
.interest {
	background: url(../img/page-back.png) no-repeat center;
	height: 400px;
	}

.typography {
	height: 282px;
	background: url(../img/i-make.png) no-repeat center 82px;
	}
	
.typography h1 {
	display: none;
	}
	
.down {
	background: url(../img/shadow-down.png) no-repeat center;
	}
	
.up {
	background: url(../img/shadow-up.png) no-repeat center;
	}
	
.dh {
	background: url(../img/horizontal-divider.png) no-repeat center !important;
	width: 100%;
	height: 2px;
	}
	
.content {
	background: url(../img/shine.png) no-repeat top center;
	}
	
.top_row {
	background: url(../img/top-row-back.png) repeat-y center;
	}
	
.pad {
	padding: 20px;
	}
	
.second_row {
	background: url(../img/second-row-back.png) repeat-y center;
	}

/* this is NOT for SEO; it's for accessibility. */
span {
	display: block;
	text-indent: -9000px;
	overflow: hidden;
	}
	
.hey h2 {
	width: 197px;
	height: 35px;
	background: url(../img/type/hey.png) no-repeat;
	}
	
.hey p {
	margin-top: 15px;
	font-size: 12px;
	}

.hey h3 {
	width: 159px;
	height: 18px;
	margin-top: 15px;
	background: url(../img/type/lastfm.png) no-repeat;
	}

ul.music {
	margin-top: 2px;
	margin-left: -2px;
	}

ul.music li {
	float: left;
	position: relative;
	}
	
ul.music li {
	margin-left: -1px;
	margin-right: -2px;
	margin-top: 5px;
	}

ul.music li a {
	display: block;
	position: relative;
	background: url(../img/album_jewel.png) 0 0 no-repeat;
	float: left;
	width: 90px;
	height: 82px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 1;
	}

ul.music li img {
	position: absolute;
	width: 73px;
	height: 73px;
	left: 12px;
	top: 3px;
	}
	
.work {
	overflow: hidden;
	}

.work h2 {
	width: 185px;
	height: 35px;
	background: url(../img/type/work.png) no-repeat;
	}
	
.work ul {
	display: block;
	margin-right: -5px;
	margin-left: -5px;
	margin-top: 10px;
	}

.work ul li {
	position: relative;
	float: left;
	top: 5px;
	}

.work ul li div {
	display: block;
	position: relative;
	background: url(../img/work-overlay.png) 0 0 no-repeat;
	float: left;
	width: 270px;
	height: 110px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 1;
	}
	
.work ul li a {
	display: block;
	background: #000000;
	position: absolute;
	width: 260px;
	height: 100px;
	left: 5px;
	top: 5px;
	z-index: 100;
	line-height: 100px;
	color: #ffffff;
	text-align: center;
	font-weight: normal;
	text-decoration: none;
	}	
	
.work ul li img {
	position: absolute;
	width: 260px;
	height: 100px;
	left: 5px;
	top: 5px;
	}
	
.offer h2 {
	width: 203px;
	height: 35px;
	background: url(../img/type/offer.png) no-repeat;
	}
	
.offer ul {
	font-size: 12px;
	margin-top: 10px;
	}
	
.offer li.design {
	background: url(../img/icons/image.png) no-repeat top left;
	padding-left: 55px;
	padding-top: 8px;
	margin-bottom: 15px;
	}
	
.offer li.development {
	padding-top: 0px;
	padding-left: 55px;
	background: url(../img/icons/paper.png) no-repeat 2px 0px; /* one of the many reasons I like WebKit BETTAR */
	margin-bottom: 10px; /* it's all about _perceived_ distance */
	}
	

.offer li.caffeine {
	padding-top: 5px;
	padding-left: 55px;
	background: url(../img/icons/coffee.png) no-repeat top left;
	}
	
.contact {
	background: url(../img/form.png) no-repeat 400px 90px;
	overflow: hidden;
	}	
	
.contact h2 {
	width: 187px;
	height: 35px;
	background: url(../img/type/contact.png) no-repeat;
	}
	
.contact form {
	color: #aaaaaa;
	font-size: 12px;
	display: block;
	position: relative;
	float: left;
	}
	
#response {
	position: absolute;
	top: 130px;
	left: 1px;
	height: 210px;
	width: 580px;
	background: black;
	line-height: 210px;
	text-align: center;
	font-size: 20px;
	opacity: 0.8;
	display: none;
	cursor: pointer;
	}
	
.contact form input[type=text] {
	background: url(../img/textbox.png) no-repeat;
	border: 1px solid #cccccc;
	width: 348px;
	height: 28px;
	margin-top: 15px;
	font-size: 30px;
	font-family: Helvetica, Arial, sans-serif;
	padding: 6px;
	}
	
.contact form textarea {
	display: block;
	margin-top: 15px;
	background: url(../img/textarea.png) no-repeat;
	border: 1px solid #cccccc;
	margin-left: 0px;
	height: 200px;
	width: 570px;
	padding: 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	}

.contact form input[type=image] {
	margin-top: 15px;
	margin-left: 489px;
	}
	
.rates h2 {
	width: 196px;
	height: 35px; /* it's actually 33px, but I want them all to align. */
	background: url(../img/type/rates.png) no-repeat top;
	}
	
.rates p + p {
	margin-top: 10px;
	}

.rates ul {
	font-size: 12px;
	margin-top: 15px;
	}
	
.rates li.pricing {
	background: url(../img/icons/chart.png) no-repeat top left;
	padding-left: 55px;
	padding-top: 1px;
	margin-bottom: 15px;
	}
	
.rates li.availability {
	padding-top: 0px;
	padding-left: 55px;
	background: url(../img/icons/clock.png) no-repeat 2px 0px; /* one of the many reasons I like WebKit BETTAR */
	margin-bottom: 14px; /* it's all about _perceived_ distance */
	}

.second_row + .dh {
	background: url(../img/horizontal-divider.png) no-repeat;
	height: 1px;
	}
	
.footer {
	font-size: 11px;
	color: #999999;
	padding-top: 10px;
	}
	
a {
	color: #f91a1a;
	}
	
.footer a {
	color: #999999;
	text-decoration: none;
	}
	
.footer a:hover {
	color: #f91a1a;
	}
	
.footer div + div {
	text-align: right;
	}

.hidden {
	display: none;
	}