* {
	margin: 0;
	padding: 0;
}

html, body {
	margin: 0 auto;
	padding: 0;
	font: 11px/18px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #fff;
	text-shadow: black 0px 1px 1px;
	color: #222;
	height: 100%;
	background-image: url('../img/footer-bg.jpg');
}

a, a:link, a:active, a:visited {
	color: #6ac0d5;
	text-decoration: none;
}

a:hover {
	color: #95d0de;
}

.strike {
	text-decoration: line-through;
}

#header {
	background-image: url('../img/header-bg.jpg');
	height: 122px;
}

#splash-container {
	background-image: url('../img/splash-bg.png');
	height: 230px;
}
	
	#splash {
		width: 1000px;
		margin: 0 auto;
		height: 230px;
	}
	
		#splash-left {
			width: 680px;
			height: 230px;
			float: left;
		}
		
			#welcome {
				position: relative;
				top: 25px;
				left: 35px;
			}
			
			ul#links {
				height: 100px;
				position: relative;
				top: 50px;
				left: 55px;
				float: left;
				list-style: none;
			}
			
			ul#links li span {
				display: none;
			}
			
			ul#links li a {
				width: 125px;
				height: 28px;
				display: block;
				background-position: 0px 0px;
			}
			
			a#link-email {
				background-image: url('../img/email-trans.png');
			}

			a#link-resume {
				background-image: url('../img/download-resume-trans.png');
			}

			a#link-vcard {
				background-image: url('../img/download-vcard-trans.png');
			}
			
			a#link-email:hover,
			a#link-resume:hover,
			a#link-vcard:hover {
				background-position: 0px 28px;
			}

		#splash-right {
			height: 230px;
			width: 300px;
			float: left;
		}

			#photo {
				position: relative;
				top: 8px;
				left: 5px;
				float: left;
				background-image: url('../img/photo-trans.png');
				width: 293px;
				height: 214px;
			}

			#photo:hover, #photo.hover {
				cursor: pointer;
				background-image: url('../img/photo-on-trans.png');
				width: 293px;
				height: 214px;
			}

#content-container {
	background-image: url('../img/content-bg.jpg');
	height: 400px;
	min-height: 400px;
}

	#index-content {
		height: 400px;
		min-height: 400px;
		width: 1000px;
		margin: 0 auto;
		padding-top: 20px;
		font: 11px "Lucida Grande", Helvetica, Verdana, Arial;
		color: #fff;
		text-shadow: black 0px 1px 1px;
	}
	
		.section-icon {
			float: left;
			position: relative;
			top: 10px;
			left: 3px;
			width: 28px;
			height: 28px;
		}
		
		.section-title {
			font: 30px "Myriad Pro", Helvetica, Verdana, Arial;
			float: left;
			text-shadow: black 1px 2px 2px;
			letter-spacing: -1px;
			position: relative;
			top: 6px;
			left: 6px;
			width: 150px;
			height: 36px;
			margin-bottom: 25px;
		}
		
		.section-divider {
			width: 2px;
			height: 255px;
			position: relative;
			top: 84px;
			float: left;
			background: url('../img/section-divider.png') no-repeat;
			
		}
		

		#about {
			float: left;
			width: 332px;
		}
		
			#about-text {
				clear: both;
				width: 260px;
				position: relative;
				margin: 0 auto;
			}
			
				#about-text p {
					line-height: 14px;
					text-align: justify;
					float: left;
					margin-bottom: 15px;
				}


		#projects {
			float: left;
			width: 332px;
		}
		

			#project-summary {
				clear: both;
				margin: 0 auto;
				margin-left: 38px;
				width: 260px;
				position: relative;
			}

				#project-text {
					line-height: 14px;
					text-align: justify;
					float: left;
					margin-bottom: 15px;
				}

				#project-image {
					clear: both;	
					width: 255px;
					height: 185px;
					position: relative;
				}
			
					#project-image-border {
						background: url('../img/project-image-border-trans.png') no-repeat;
						overflow: hidden;
						position: absolute;
						top: -9px;
						left: -9px;
						width: 183px;
						z-index: 10;
						width: 275px;
						height: 195px;
					}
					
					#project-image-border a {
						position: absolute;
						top: 9px;
						left: 9px;						
					}
											
	
		
		.project-divider {
			width: 110px;
			height: 2px;
			margin: 15px auto 30px auto;
			background: url('../img/project-divider.png') no-repeat;
		}
		
		
		#skills {
			float: left;
			width: 332px;		
		}
		
		#skills-text {
			position: relative;
			margin: 0 auto;
			width: 260px;
		}
		
		#years-icon {
			position: relative;
			left: 86px;
			top: 45px;
			float: left;
		}
		
		#years-asterisk {
			position: relative;
			left: 80px;
			top: 45px;
			float: left;
			font-size: 9px;
			color: #898989;

		}

		#skills-table {
			width: 255px;
			border: none;
			position: relative;
			top: 10px;
			margin-bottom: 15px;
			float: left;
			clear: both;
		}

			.skill-type a:hover {
				cursor: pointer;
			}

			.skill-blurb {
				width: 190px;
				text-align: justify;
			}

			#skills-table td {

			}		

			#skills-table td.beginner,
			#skills-table td.intermediate,
			#skills-table td.expert {
				background-image: url('../img/years-beginner-trans.png');
				background-repeat: no-repeat;
				width: 24px;
				height: 24px;
				text-align: center;
				padding-top: 4px;
				vertical-align: top;
			}

			#skills-table td.intermediate {
				background-image: url('../img/years-intermediate-trans.png');
			}

			#skills-table td.expert {
				background-image: url('../img/years-expert-trans.png');
			}
	
	#project-content {
		height: 400px;
		min-height: 400px;
		width: 1000px;
		margin: 0 auto;
		padding-top: 20px;
		font: 11px "Lucida Grande", Helvetica, Verdana, Arial;
		color: #fff;
		text-shadow: black 0px 1px 1px;
	}

		#about-icon {
			float: left;
			position: relative;
			top: 179px;
			margin-left: 10px;
		}
		
		#left-divider {
			margin-left: 10px;			
			margin-right: 6px;
		}
		
		#project-showreel {
			
		}
		
		.project-detail {
			float: left;
			width: 815px;
			margin: 0 auto;
		}
		
		.project-description {
			clear: both;
			width: 780px;
			margin-top: 60px;
			position: relative;
			left: 35px;
			height: 60px;
		}

		.project-date {
			clear: both;
			width: 780px;
			position: relative;
			left: 3px;
			background: url('../img/icon-date-trans.png');
			background-repeat: no-repeat;
			height: 28px;
		}
		
			.project-date span {
				display: block;
				margin-left: 33px;
				padding-top: 5px;
			}

		.project-tools {
			clear: both;
			width: 780px;
			position: relative;
			left: 3px;
			top: -8px;
			background: url('../img/icon-tools-trans.png');
			background-repeat: no-repeat;
			height: 28px;
		}

			.project-tools span {
				display: block;
				margin-left: 33px;
				padding-top: 7px;
			}

		.project-visit {
			clear: both;
			width: 780px;
			position: relative;
			left: 3px;
			top: -15px;
			background: url('../img/icon-visit-trans.png');
			background-repeat: no-repeat;
			height: 28px;
		}

			.project-visit span {
				display: block;
				margin-left: 33px;
				padding-top: 7px;
			}

				.project-visit span a {

				}


		.project-screenshots {
			position: relative;
			left: 37px;
			clear: both;
			width: auto;
			margin: 0 auto;
/*			margin-top: 10px;*/
			height: 180px;
/*			border: 1px solid red;*/
		}

			.project-screenshots .video {
				margin: 0 auto;
				width: 225px;
				height: 145px;
				position: relative;
			}

			.project-screenshots .screenshot {
				float: left;
				width: 225px;
				height: 145px;
				margin-left: 48px;
				position: relative;
			}
			
			.project-screenshots .screenshot:first-child {			
				margin-left: 0px;				
			}
			
					.project-screenshots .screenshot .project-image-zoom-border,
					.project-screenshots .video .project-image-zoom-border {
						background: url('../img/project-image-zoom-border-trans.png') no-repeat;
						overflow: hidden;
						position: absolute;
						top: -14px;
						left: -10px;
						z-index: 10;
						width: 245px;
						height: 175px;
					}

					.project-screenshots .video .project-image-zoom-border {
						background: url('../img/project-video-zoom-border-trans.png') no-repeat;
					}					
					
					.project-screenshots .screenshot .project-image-border a,
					.project-screenshots .video .project-image-border a {
						position: absolute;
						top: 9px;
						left: 9px;						
					}

		
		#right-divider {
			margin-left: 10px;			
			margin-right: 10px;
		}

		#skills-icon {
			float: left;
			position: relative;
			top: 189px;
		}
		
		.project-title {
			font: 30px "Myriad Pro", Helvetica, Verdana, Arial;
			float: left;
			text-shadow: black 1px 2px 2px;
			letter-spacing: -1px;
			position: relative;
			top: 6px;
			left: 6px;
			width: 700px;
			height: 36px;
			margin-bottom: 25px;
		}



#footer {
	height: 50px;
	clear: both;
	width: 1000px;
	margin: 0 auto;
	font-size: 9px;
	text-align: center;
	color: #898989;
} 

#footer-divider {
	margin: 10px auto;
	margin-top: 30px;
	clear: both;
	display: block;
}

p.footnote {
	font-size: 9px;
	color: #898989;
	float: left;
	margin-bottom: 15px;
}