/**
 * Coding by MapleStudios.co.uk
**/

/*** Base Styles **/

body {
	background: url(../img/body_bg.png) repeat top left;
}
div.hr {
	background: url(../img/breaker.png) no-repeat top left;
	width: 1000px;
	height: 12px;
	border: 0;
	margin: 30px auto 20px auto;
}
hr {
	display: none;
}
@font-face {
	font-family: 'MuseoSans900';
	src: url('fonts/museosans_900-webfont.eot');
	src: local('Museo Sans'), local('MuseoSans900'), url('fonts/museosans_900-webfont.woff') format('woff'), url('fonts/museosans_900-webfont.ttf') format('truetype'), url('fonts/museosans_900-webfont.svg#webfontKKkMN4kJ') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MuseoSans700';
	src: url('fonts/museosans_700-webfont.eot');
	src: local('Museo Sans'), local('MuseoSans700'), url('fonts/museosans_700-webfont.woff') format('woff'), url('fonts/museosans_700-webfont.ttf') format('truetype'), url('fonts/museosans_700-webfont.svg#webfontDsLK7qWx') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MuseoSans500';
	src: url('fonts/museosans_500-webfont.eot');
	src: local('Museo Sans'), local('MuseoSans500'), url('fonts/museosans_500-webfont.woff') format('woff'), url('fonts/museosans_500-webfont.ttf') format('truetype'), url('fonts/museosans_500-webfont.svg#webfontUwZypJNm') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueBold';
	src: url('fonts/helveticaneue-webfont.eot');
	src: local('Helvetica Neue'), local('HelveticaNeueBold'), url('fonts/helveticaneue-webfont.woff') format('woff'), url('fonts/helveticaneue-webfont.ttf') format('truetype'), url('fonts/helveticaneue-webfont.svg#webfont5rq5Bclm') format('svg');
	font-weight: normal;
	font-style: normal;
}

div#wrapper {
	width: 1024px;
	margin: 0 auto;
}


/*** Header Styles **/

div#header h1 {
	font-family: 'MuseoSans900', Arial, sans-serif;
	letter-spacing: 6px;
	font-size: 14px;
	text-transform: uppercase;
	color: #374044;
	width: 653px;
	margin: 91px auto 28px auto;
	text-align: center;
	background: url(../img/header_title-bg.png) no-repeat -2px 0;
}
div#header h2 {
	font-family: 'MuseoSans700', Arial, sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	width: 653px;
	margin: 0 auto;
	text-align: center;
	color: #374044;
	padding-bottom: 5px
}
	div#header h2 span {
		font-size: 18px;
		position: relative;
		padding: 0 5px;
		vertical-align: 20%;
	}
div#header p {
	font-family: Georgia, sans-serif;
	width: 653px;
	background: url(../img/header_para-bg.png) no-repeat 0 4px;
	margin: 0 auto;
	text-align: center;
	color: #96a3a7;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 20px;
}
	div#header p span {
		font-family: 'MuseoSans500', Arial, sans-serif;
		color: #c1c8cb;
	}


/*** Portfolio Styles **/

div#portfolio {
	width: 100%;
	text-align: center;
	padding-top: 85px;
}
div#portfolio ul {
	width: 100%;
	
}
div#portfolio ul li {
	display:-moz-inline-stack;
	display:inline-block;
	vertical-align: top;
	zoom:1;
	*display:inline;
	padding-bottom: 39px;
}
div#portfolio ul li.middle {
	padding: 0 47px 0 47px;
}
	
div#portfolio ul li img {
	background-color: #ffffff;
	border: 1px solid #dbdbdb;
	padding: 11px 11px 10px 11px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
div#portfolio ul li img:hover { 
	border: 1px solid #74ceeb;
	-moz-box-shadow: #74ceeb 0px 0px 5px;
	-webkit-box-shadow: #74ceeb 0px 0px 5px;
	box-shadow: #74ceeb 0px 0px 5px;
	cursor: pointer;
}
div#portfolio ul li h3 {
	font-family: 'HelveticaNeueBold', Arial, sans-serif;
	font-size: 16px;
	color: #374044;
	font-weight: bold;

	padding: 20px 0 13px 0;
}
div#portfolio ul li p {
	color: #a9b2b5;
	font-family: Georgia, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}


/*** Profile Styles **/

div#profile {
	width: 1000px;
	margin: 0 auto;
}
	div#profile h2,
	div#contact h2 {
		font-family: 'MuseoSans700', Arial, sans-serif;
		font-size: 16px;
		color: #4b575c;
		text-transform: uppercase;
		padding: 8px 0 12px 45px;
	}
		div#profile h2 span {
			font-size: 14px;
			position: relative;
			padding: 0 7px;
			vertical-align: 10%;
		}
	
	
	/*** 'About me & what I do' **/
	
	div#profile div#bio {
		width: 550px;
		float: left;
		margin-bottom: 60px;
	}
		div#profile div#bio h2 { background: url(../img/bio_icon.png) no-repeat top left; margin: 38px 0 16px 0; }
		div#profile div#bio p {
			color: #4b575c;
			font-family: Verdana;
			font-size: 12px;
			line-height: 24px;
			padding-bottom: 15px;
		}
			div#profile div#bio p span {
				color: #a1a9ad;
			}
			div#profile div#bio p a { color: #53c3e8; }
				div#profile div#bio p a:hover { text-decoration: none; }
		div#profile div#bio img {
		float: left;
		border: 1px solid #dbdbdb;
		padding: 10px 10px 9px 10px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		margin: 0 20px 0 0;
	}


	/*** 'Recognition & links' **/
	
	div#profile div#links {
		width: 395px;
		margin: 75px 0 60px 0;
		float: right;
	}
		div#profile div#links h2 { background: url(../img/links_icon.png) no-repeat top left; margin: 38px 0 11px 0; }
		div#profile div#links ul {
			background: url(../img/links_breaker.png) repeat-x left 8px;
		}
			div#profile div#links ul { padding-top: 30px; }
			div#profile div#links ul li { float: left; clear: left; width: 100%; padding-bottom: 12px; *padding-bottom: 6px; }
				div#profile div#links ul li img {
					float: left;
					background-color: #ffffff;
					border: 1px solid #dbdbdb;
					padding: 8px 8px 7px 8px;
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;
					margin: 0 15px 0 0;
				}
					div#profile div#links ul li img:hover {
						border: 1px solid #74ceeb;
						-moz-box-shadow: #74ceeb 0px 0px 5px;
						-webkit-box-shadow: #74ceeb 0px 0px 5px;
						box-shadow: #74ceeb 0px 0px 5px;
						cursor: pointer;
					}
				div#profile div#links ul li h4 {
					font-family: Verdana;
					font-size: 12px;
					text-transform: uppercase;
					color: #53c3e8;
					margin: 10px 0 15px 0;
				}
					div#profile div#links ul li h4 a {
						color: #53c3e8;
						text-decoration: none;
					}
						div#profile div#links ul li h4 a:hover { text-decoration: underline; }
				div#profile div#links ul li p {
					font-family: Georgia; 
					color: #96a3a7;
					font-size: 12px;
					text-transform: uppercase;
				}


/*** Contact & Tweets **/

div#contact-wrapper {
	clear: both;
	border-top: 1px solid #ebebeb;
	background: url(../img/contact_bg.png) repeat top left;
}
	div#contact {
		width: 1000px;
		min-height: 600px;
		margin: 40px auto 0 auto;
		background: url(../img/contact_breaker.png) repeat-x 0 52px;
	}
		div#contact h2 { background: url(../img/contact_icon.png) no-repeat top left; }
		div#contact form {
			float: left;
			width: 600px;
			margin: 45px 0 0 0;
		}
		div#contact form input,
		div#contact form textarea {
			border: 1px solid #c5cdd0;
			padding: 11px 15px 9px 15px;
			margin: 10px 0;
			color: #32505a;
			font-family: Verdana;
			font-size: 12px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			}
			div#contact form input[type=text]:focus, 
			div#contact form textarea:focus {
				border: 1px solid #74ceeb;
				-moz-box-shadow: #74ceeb 0px 0px 5px;
				-webkit-box-shadow: #74ceeb 0px 0px 5px;
				box-shadow: #74ceeb 0px 0px 5px;
			}
		
		div#contact form input {float: right; width: 259px;}
		div#contact form input.left { float: left; }
		div#contact form input.required { background: url(../img/contact_form-required.png) #fff no-repeat 96% 12px; }
		div#contact form input.required:focus { background: url(../img/contact_form-required-hover.png) #fff no-repeat 96% 12px; }
		div#contact form input.submit {
			background-color: #374146;
			font-family: 'MuseoSans700', Arial, sans-serif;
			width: 80px;
			margin: 5px 0 0 0;
			padding: 8px 15px 6px 15px;
			float: left; clear: left;
			border: 1px solid #374146;
			color: #fff;
			text-shadow: 0 1px 0 #000;
			cursor: pointer;
		}
			div#contact form input.submit:hover { background-color: #5b686d; border: 1px solid #3e494e; }
		
		div#contact form textarea {
			float: left;
			clear: both;
			width: 568px;
			height:200px;
		}
		div#contact form textarea.required { background: url(../img/contact_form-required.png) #fff no-repeat 98% 12px; }
		div#contact form textarea.required:focus { background: url(../img/contact_form-required-hover.png) #fff no-repeat 98% 12px; }
		
		div#contact form span.errors {
			float: right;
			width: 495px;
			color: #ec643f;
			font-style: italic;
			font-family: Georgia;
			font-size: 12px;
			margin-top: 17px;
		}
		
		div#contact div#success {
			width: 100%;
			float: left;
			margin-top: 30px;
		}
			div#contact div#success h3 {
				font-family: 'MuseoSans900', Arial, sans-serif;
				font-size: 24px;
				text-transform: uppercase;
				color: #4b575c;
				text-align: center;
			}
			div#contact div#success p {
				color: #4b575c;
				font-family: Verdana;
				font-size: 12px;
				line-height: 24px;
				padding-top: 30px;
				text-align: center;
				width: 100%;
				float: left; clear: left;
			}
		
		
		/*** Info & Tweet **/
		
		div#contact div#sidebar {
			width: 360px;
			float: right;
			margin: 65px 0 0 0;
		}
			div#contact div#sidebar h3 {
				font-family: 'HelveticaNeueBold', Arial, sans-serif;
				font-size: 16px;
				font-weight: bold;
				color: #374044;
				text-shadow: 0 1px 0 #fff;
				padding-bottom: 28px;
			}
			div#contact div#sidebar p {
				font-family: Verdana;
				width: 340px;
				font-size: 12px;
				color: #adb4b7;
				line-height: 24px;
			}
			div#contact div#sidebar div.tweet {
				width: 329px;
				height: 106px;
				font-family: Georgia;
				font-style: italic;
				font-size: 12px;
				color: #96a3a7;
				margin-top: 15px;
				line-height: 24px;
			}
				div#contact div#sidebar div.tweet a {
					color: #53c3e8;
					text-decoration: none;
				}
					div#contact div#sidebar div.tweet a:hover { text-decoration: underline; }
			div#contact div#sidebar div.tweet ul {
				float: left; width: 329px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				margin-top: -1px;
				padding: 5px 15px;
				border: 1px solid #dee3e5;
				background-color: #fff;
			}
		
		/** Footer **/
		
		div#contact div#footer {
			float: left;
			width: 100%;
			clear: both;
			margin: 0;
		}
			div#contact div#footer h5 {
				font-family: 'MuseoSans900', Arial, sans-serif;
				letter-spacing: 6px;
				font-size: 14px;
				text-transform: uppercase;
				color: #4b575c;
				width: 101px;
				padding: 0px 0 0 6px;
				margin: 65px auto 10px auto;
				text-align: center;
				background: url(../img/footer_bg.png) no-repeat top center;
				}
			div#contact div#footer p {
				color: #96a3a7;
				font-family: Georgia;
				font-size: 12px;
				text-align: center;
				text-shadow: 0 1px 0 #fff;
				padding-bottom: 15px;
			}
			
			/** Preload **/
		div#preload {
			display: none;
		}