/* DEBUG */
/*.main {
	background:url(../graphics/baseline_grid.gif) repeat !important;
}

/* RESET */
* {
	padding:0;
	margin:0;
	list-style:none;
	outline:none;
	text-decoration:none;
}

/* GRID LAYOUT */
.grid-1-1 {
	width:920px;
	margin:0 20px;
}
.grid-3-4 {
	width:680px;
	margin:0 20px;
	float:left;
}
.grid-2-3 {
	width:600px;
	margin:0 20px;
	float:left;
}
.grid-7-12 {
	width:520px;
	margin:0 20px;
	float:left;
}
.grid-1-2 {
	width:440px;
	margin:0 20px;
	float:left;
}
.grid-5-12 {
	width:360px;
	margin:0 20px;
	float:left;
}
.grid-1-3 {
	width:280px;
	margin:0 20px;
	float:left;
}
.grid-1-4 {
	width:200px;
	margin:0 20px;
	float:left;
}
.grid-1-6 {
	width:120px;
	margin:0 20px;
	float:left;
}

/* REUSABLE PRESENTATION */
.section {
	overflow:auto;
}
.group {
	clear:both;
}
img {
	border:none;
}
.inner {
	width:960px;
	margin:0 auto;
}

/* OTHER PRESENTATION */
body {
	min-width:960px;
}
.site-header {
	height:140px;
	background:#333536 url(../graphics/header_bg.png);
	background:url(../graphics/header_bg.png) rgba(0,0,0,.75);
}
.site-header:after {
	content:'';
	width:100%;
	height:4px;
	position:absolute;
	z-index:999;
	background-image:-webkit-gradient(linear,left top,right top,
		color-stop(0,rgba(107,165,188,.65)),
    	color-stop(0.33,rgba(168,107,188,.65)),
    	color-stop(0.66,rgba(203,205,117,.65)),
   		color-stop(1,rgba(206,154,117,.65)));
	background-image:-webkit-linear-gradient(left top,
	    rgba(107,165,188,.65) 0%,
	    rgba(168,107,188,.65) 33%,
    	rgba(203,205,117,.65) 66%,
    	rgba(206,154,117,.65) 100%);
	background-image:-moz-linear-gradient(left top,
	    rgba(107,165,188,.65) 0%,
	    rgba(168,107,188,.65) 33%,
    	rgba(203,205,117,.65) 66%,
    	rgba(206,154,117,.65) 100%);
	background-image:-ms-linear-gradient(left top,
	    rgba(107,165,188,.65) 0%,
	    rgba(168,107,188,.65) 33%,
    	rgba(203,205,117,.65) 66%,
    	rgba(206,154,117,.65) 100%);
	background-image:-o-linear-gradient(left top,
	    rgba(107,165,188,.65) 0%,
	    rgba(168,107,188,.65) 33%,
    	rgba(203,205,117,.65) 66%,
    	rgba(206,154,117,.65) 100%);
	background-image:linear-gradient(left top,
	    rgba(107,165,188,.65) 0%,
	    rgba(168,107,188,.65) 33%,
    	rgba(203,205,117,.65) 66%,
    	rgba(206,154,117,.65) 100%);
}
.site-header .inner {
	padding:12px 0;
}
.logo {
	float:left;
	height:116px;
}
.logo:hover {
	opacity:0.85;
}
.site-nav {
	height:116px;
	float:right;
	margin-bottom:0;
}
.site-nav li {
	float:left;
	margin-left:50px;
}
.intro {
	background:#D6E4E9 url(../graphics/noise.png) repeat;
	overflow:hidden;
}
.intro h1 {
	text-align:center;
}
.home .intro h1 {
	padding-bottom:4.2em;
}
.home .main {
	margin-top:-12em;
	position:relative;
	z-index:99;
}
.main {
	padding-bottom:1.5em;
}
.main a {
	padding:0.2em;
}
.error-404 .main {
	text-align:center;
}
.error-404 .main img {
	margin:1.5em 0;
}
.recent-work {
	background:url(../graphics/browser.png) 50% top no-repeat;
	width:850px;
	margin:0 auto 0.5em auto;
	overflow:hidden;
}
.recent-work ul {
	height:326px;
	margin-top:24px;
	margin-left:25px;
	position:relative;
	z-index:-99;
	overflow:hidden;
}
.work-item .info {
	float:right;
}
.work-item:nth-child(even) .info {
	float:left;
}
.work-item .screenshot {
	float:left;
	height:378px;
	overflow:hidden;
	margin-top:1.5em;
	margin-bottom:1.5em;
}
.work-item.alt .screenshot {
	float:right;
}
.work-item .screenshot img {
	padding:9px;
	background:#FFF;
	border:1px solid #CFE3EA;
}
.contact-form {
	overflow:visible;
}
.contact-form h3 {
	margin:1.5em 0 0 0;
}
.text-field {
	width:270px;
	border:solid 1px #CFE3EA;
}
.text-field:focus {
	-webkit-box-shadow:0 0 2px rgba(0,0,0,0.65);
	-moz-box-shadow:0 0 2px rgba(0,0,0,0.65);
	box-shadow:0 0 6px #B3D1DD;
	border-color:#B3D1DD;
}
.main a, .text-field, .button, .button input, .work-item img {
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
textarea.text-field {
	width:510px;
	height:8.856em;
}
.button input {
	cursor:pointer;
	border:1px solid #D09ADF;
}
.button {
	display:inline-block;
	border:1px solid #A366B5;
}
.email-address {
	display:block;
}
em.error {
	display:inline-block;
	width:20px;
	margin-left:10px !important;
	vertical-align:top;
	height:1.5em;
	text-indent:-9999px;
	background:url(../graphics/cross.png) 0 50% no-repeat;
}
em.success {
	background:none;
}
.miscellany {
	padding:3em 0 1.5em 0;
	background:url(../graphics/footer_bg.png) #C1D9E3;
	background:url(../graphics/footer_bg.png) rgba(151,192,208,.5);
}
.flickr_badge_image img, .lastfm img {
	background:#FFF;
	background:rgba(255,255,255,.5);
}
.lastfm img, .flickr_badge_image img {
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.5);
	box-shadow:1px 1px 2px rgba(0,0,0,0.5);
}
.lastfm li img, .flickr_badge_image {
	opacity:0.75;
}
.lastfm img:hover, .flickr_badge_image:hover {
	opacity:1;
}
#flickr_badge_wrapper {
	overflow:auto;
}
.flickr_badge_image, .lastfm li {
	width:75px;
	height:75px;
	float:left;
	margin:0 0.6429em 0.6429em 0;
}
.links li {
	height:32px;
	padding-left:44px;
	margin-bottom:0.7143em;
	line-height:32px;
}
.fb {
	background:url(../graphics/social_icons.png) 0 0 no-repeat;
}
.twitter {
	background:url(../graphics/social_icons.png) 0 -37px no-repeat;
}
.links .lastfm {
	background:url(../graphics/social_icons.png) 0 -74px no-repeat;
}
.links .flickr {
	background:url(../graphics/social_icons.png) 0 -110px no-repeat;
}
.sk {
	background:url(../graphics/social_icons.png) 0 -147px no-repeat;
}
.site-footer .inner .section {
	background:url(../graphics/logo_small.png) right 50% no-repeat;
	padding-top:1.75em;
}

/* COLOR */
body, .text-field {
	color:#7D7D7D;
}
body {
	background:#E8F2F5;
}
body.error-404 {
	background:#FFF;
}
h1, h2 {
	color:#6BA5BC;
}
h1, h2 {
	text-shadow:0 1px 0 rgba(255,255,255,0.65);
}
h3 {
	color:#608796;
	text-shadow:0 -1px 0 rgba(0,0,0,0.25);
	text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.site-nav li a {
	color:#445259;
	text-shadow:0 -1px 0 rgba(0,0,0,.65);
}
.site-nav li a:hover, .site-nav li a:focus, .site-nav li a:active {
	color:#61767F;
	text-shadow:0 -1px 0 rgba(0,0,0,.65);
}
.main a {
	background:#A96BBC;
	background:rgba(169,107,188,.65);
	color:#FFF;
}
.main a:hover, .main a:active, .main a:focus {
	background:rgba(169,107,188,1);
}
.message-2 h2, .main h3 {
	color:#A96BBC;
}
.message-3 h2 {
	color:#A6A84C;
}
.message-4 h2 {
	color:#CE9B75;
}
.button input {
	color:#FFF;
	color:rgba(255,255,255,.8);
	background-color:#A96BBC;
	background-image:-webkit-gradient(linear,left top,left bottom,
		color-stop(0,rgba(255,255,255,0.35)),
   		color-stop(1,rgba(255,255,255,0)));
	background-image:-webkit-linear-gradient(
		rgba(255,255,255,0.35) 0%,
		rgba(255,255,255,0) 100%);
	background-image:-moz-linear-gradient(
		rgba(255,255,255,0.35) 0%,
		rgba(255,255,255,0) 100%);
	background-image:-ms-linear-gradient(
		rgba(255,255,255,0.35) 0%,
		rgba(255,255,255,0) 100%);
	background-image:-o-linear-gradient(
		rgba(255,255,255,0.35) 0%,
		rgba(255,255,255,0) 100%);
	background-image:linear-gradient(
		rgba(255,255,255,0.35) 0%,
		rgba(255,255,255,0) 100%);
	text-shadow:0 -1px 0 rgba(0,0,0,0.25);
}
.button input:hover {
	color:rgba(255,255,255,1);
}
.links a {
	color:#FFF;
	color:rgba(255,255,255,0.75);
}
.links a:hover {
	color:rgba(255,255,255,1);
}
.site-footer, html {
	background:#333536;
}
.site-footer, .site-footer a {
	color:#999A98;
	color:rgba(255,255,255,.5);
}
.site-footer a:hover {
	color:rgba(255,255,255,.75);
}

/* ANIMATION */
.logo, .site-nav li a, .text-field, .button input, .lastfm img, .flickr_badge_image, .links a, .site-footer a, a {
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

/* BASELINE GRID */
html>body {
	font-size:14px;
}
p {
	font-size:1em;
	line-height:1.5em;
	margin-bottom:1.5em;
}
p.meta {
	font-size:0.8571em;
	line-height:1.75em;
	margin-bottom:1.75em;
}
h1 {
	font-size:2.8571em;
	line-height:1.05em;
	margin-top:1.05em !important;
	margin-bottom:1.05em !important;
}
h2 {
	font-size:1.4286em;
	line-height:2.1em;
	margin:1.05em 0 0 0;
}
.site-nav li {
	font-size:1.2857em;
	font-size:1.4286em;
	line-height:116px;
}
h3 {
	font-size:1em;
	line-height:1.5em;
	margin:0 0 1.5em 0;
}
.button input {
	font-size:1em;
	line-height:1.5em;
	padding:0.65em 20px 0.6em 20px;
}
h4 {
	font-size:1.25em;
	line-height:1.2em;
	padding-bottom:0;
}
ul, ol, dl {
	margin-bottom:1.5em;
}
li, dt, dd {
	font-size:1em;
	line-height:1.5em;
}
.text-field, em.error {
	font-size:1em;
	line-height:1.5em;
	padding:0.2857em;
	margin:0.3929em 0;
}
.site-footer p {
	font-size:0.8571em;
	line-height:1.75em
	margin-bottom:1.75em;
}

/* TYPOGRAPHY */
body {
	font-family:"Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;
	font-size:87.5%;
}
h1, h2, .site-nav li {
	font-family:"Cabin","Gill Sans","Trebuchet MS",Calibri,sans-serif;
	font-weight:normal;
}
h3, .button input {
	text-transform:uppercase;
}
em {
	font-family:Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif;
	font-style:italic;
}
.site-nav li {
	text-transform:uppercase;
	letter-spacing:0.1em;
}
.site-footer a {
	font-weight:bold;
}

/* IE9 */

/* IE8 */

/* IE7 */
/* Unable to fallback RGBa in IE7 and below */
.ie7 .links a {
	color:#FFF;
}
.ie7 .site-footer, .ie7 .site-footer a {
	color:#999A98;
}
.ie7 .button input {
	color:#FFF;
}

/* Inline-block hack */
.ie7 .button {
	zoom:1;
	display:inline;
}

/* IE6 */
.ie6 .grid-3-4, .ie6 .grid-2-3, .ie6 .grid-7-12, .ie6 .grid-1-2, .ie6 .grid-5-12, .ie6 .grid-1-3, .ie6 .grid-1-4, .ie6 .grid-1-6 {
	display:inline; /* Double margin bug fix */
}
.ie6 * {
	zoom:1;
	background-image:none !important;
}
.ie6 body {
	background:#FFF;
}
.ie6 .miscellany a, .ie6 .site-nav a:hover, .ie6 .site-nav a:active, .ie6 .site-nav a:focus {
	color:#FFF;
}
.ie6 .site-header, .ie6 .site-footer, html.ie6 {
	background:#000;
}
.ie6 .intro, .ie6 .miscellany, .ie6 .main a, .ie6 .button input {
	background:#CCC;
}
.ie6 h1, .ie6 h2, .ie6 h3 {
	color:#666 !important;
}
.ie6 .logo {
	width:116px;
	height:116px;
	background:url(../graphics/logo_grayscale.png) !important;
}
.ie6 .logo a img {
	display:none;
}
.ie6 .site-nav a {
	color:#CCC;
}
.ie6 em.error {
	text-indent:0;
}
.ie6 .text-field {
	border-color:#CCC;
}
.ie6 .button {
	border-color:#000;
}
.ie6 .button input {
	border-color:#FFF;
}
.ie6 .links li {
	padding-left: 0;
}
.ie6 img {
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	zoom:1;
}