@import "reset.css";
@import "typography.css";
@font-face {
	font-family: Bebas;
	src: url('../fonts/bebas.ttf');
}


body {
	background: #898989 url(../images/bg_texture.jpg) top left;
	line-height: 18px;
}
.clear { clear: both;}

a { color: #cccccc; text-decoration: none;}
a:hover { color: #5f5f5f; text-decoration: underline;}

#wrapper {
	width: 820px; min-height: 800px; height: 100% !important;
	margin: 0 auto;
}

#header {
	width: 820px; height: 310px;
	position: relative;
}
	a.logo h1 {
		width: 449px; height: 214px;
		background: transparent url(../images/logo.png) no-repeat;
		margin: 0;
		position: absolute;
		top: 15px; left: 0px;
		text-indent: -9999px;
		
	}
	#header img {
		position: absolute;
		top: 0px; right: 30px;
	}
#intro {
	margin: 20px 0;
	float: left;
	clear: both;
}
	#intro p {
		color: #5f5f5f;
		font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
		font-size: 20px;
		font-style: italic;
		line-height: 24pt;
		text-shadow: #939393 1px 1px 1px;
	}
#portfolio {
	width: 320px;
	float: left;	
}
	#portfolio h2.portTitle {
		background: transparent url(../images/portfolio.png) no-repeat;
		text-indent: -9999px;
		height: 23px; width: 102px;
	}
	#portfolio ul li a {
		width: 310px; height: 161px;
		background: transparent url(../images/port-bg.png) no-repeat;
		display: block;
		margin: 8px 15px 8px 0;
	}
	#portfolio ul li a img {
		padding: 10px;
	}

#resume {
	width: 480px;
	float: right;
	font-size: 85%;
	color: #cccccc;
}
	#resume h2.resumeTitle {
		background: transparent url(../images/resume.png) no-repeat;
		text-indent: -9999px;
		height: 23px; width: 81px;
		margin: 0 0 8px 0;
	}
	#resume h3.employment {
		background: transparent url(../images/employment.png) no-repeat;
		text-indent: -9999px;
		height: 16px; width: 91px;
		margin: 0 0 8px 0;
	}
	#resume table {
		border: none;
		margin: 8px 0 15px 0;
	}
	#resume table#resumeInfo tbody tr td.job {
		width: 35%;
		padding: 4px 4px 4px 8px;
		color: #ffffff;
	}
	#resume table#resumeInfo tbody tr td.desc {
		width: 65%;
		padding: 4px;
		color: #cccccc;
	}
	#resume ul.skillsList, #resume ul.integrationList {
		width: 230px;
		float: left;
		list-style: none;
	}
		#resume ul.skillsList {
			padding: 0 10px 0 0;
		}
		#resume ul.integrationList {
			padding: 0 0 0 10px;
		}
		#resume ul.skillsList li.skillsTitle {
			background: transparent url(../images/skills.png) no-repeat;
			text-indent: -9999px;
			height: 16px;
			margin: 0 0 8px 0;
		}
	#resume h3#resumeDownload {
		background: transparent url(../images/download-title.png) no-repeat;
		text-indent: -9999px;
		height: 23px; width: 235px;
		margin: 15px 0 8px 0;
	}
#contact {
	width: 700px;
	float: left;
	font-size: 85%;
}
	#contact h2.getIntouch {
		background: transparent url(../images/get-in-contact.png) no-repeat;
		text-indent: -9999px;
		height: 23px; width: 218px;
		margin: 15px 0 8px 0;
	}
	#contact form div#contactLeft {
		float: left;
		width: 350px;
	}
		#contact form div#contactLeft label {
			float: left;
			width: 110px; height: 24px;
			padding: 4px 6px; margin: 0 0 8px 0;
			display: inline-block;
			font-size: 85%; color: #cccccc;
			text-align: right;
		}
		#contact form div#contactLeft input {
			float: left;
			background: transparent url(../images/input.png) no-repeat;
			width: 170px; height: 24px;
			padding: 5px 6px; margin: 0 0 8px 0;
			border: none;
		}
		#contact form div#contactLeft input:focus {
			color: #b7b7b7;
		}
	
	#contact form div#contactRight {
		float: right;
		width: 280px;
	}
		#contact form div#contactRight label {
			width: 100px; height: 28px;
			padding: 4px 6px;
			display: inline-block;
		}
		#contact form div#contactRight textarea {
			background: #5f5f5f url(../images/textarea.png) no-repeat;
			width: 265px; height: 145px;
			padding: 4px 6px;
			border: none;
			overflow: hidden;
		}
		#contact form div#contactRight textarea:focus {
			color: #b7b7b7;
		}
	#contact form div#contactRight input.submitButton {
		float: right;
		width: 59px; height: 18px;
		border: none;
		padding: 4px;
		margin: 8px 0;
		background: transparent url(../images/submit.png) no-repeat;
		text-indent: -9999px;
	}
	h2#successful {
		color: #cccccc;
		text-transform: uppercase;
	}
#footer {
	width: 820px; height: 150px;
	position: relative;
	font-size: 85%;
}
	#footer h3.socialTitle {
		position: absolute;
		top: 35px; left: 10px;
		background: transparent url(../images/social.png) no-repeat;
		width: 136px; height: 18px;
		margin: 0;
		text-indent: -9999px;
	}
	#footer #fLeft {
		width: 300px; height: 54px;
		position: absolute;
		bottom: 20px; left: 20px;
	}
	#footer #fLeft a.social {
		width: 54px; height: 54px;
		display: block;
		float: left;
		margin-right: 5px;
	}
	#footer #fRight {
		width: 300px; height: 30px;
		position: absolute;
		bottom: 20px; right: 0px;
		text-align: right;
	}
	#footer #fRight p {
		position: absolute;
		bottom: 0; right: 20px;
	}