/* CSS Document */

* {
	margin:0;
	padding:0;
	}
	
	body {
		background: #ffffff url('../img/bg.gif') top left;
		font-family:arial, sans-serif;
		font-size:.75em;
		color:#3b372e;
		}
		
		a, a:link, a:active, a:visited { color:#c74010; text-decoration:none;}
		a:hover {text-decoration:underline;}
		
		.hidden {
			display:none;
			}
			
		hr {
			height:0px;
			border:none;
			width:100%;
			clear:both;
			visibility:hidden;
		}

		
	#header {
		position:relative;
		margin:0 auto;
		width:940px;
		}
		
		#header h1 {
			display:block;
			background:transparent url('../img/joeshoop.gif') center center no-repeat;
			text-indent:-999em;
			height:200px;
			}
		
		.nav {
		position: absolute;
		top:140px;
		left:294px;
		width: 352px; 
		height: 11px;
		}
		
			.nav li {
				height: 11px; 
				position: absolute; 
				display: block; 
				list-style: none;
				background: transparent url('../img/nav.gif');
				text-indent:-9999px;
				}
				
			.nav a { 
				height: 11px; 
				display: block;
				}
				
					.nav #nav-portfolio 		{left: 35px; width: 81px; background-position: 0 0;}
					.nav #nav-resume		{left: 155px; width: 57px; background-position: -89px 0;}
					.nav #nav-contact		{left: 250px; width: 67px; background-position: -155px 0;}
					
					.nav #nav-portfolio a:hover,
					.portfolio #nav-portfolio		{background:url('../img/nav.gif')  0px -11px no-repeat;}
					
					.nav #nav-resume a:hover,
					.resume #nav-resume		{background:url('../img/nav.gif')  -89px -11px no-repeat;}
					
					.nav #nav-contact a:hover,
					.about #nav-contact		{background:url('../img/nav.gif')  -155px -11px no-repeat;}

		
	#container-top {
		width:980px;
		margin:0 auto;
		background:transparent url('../img/shadow-top.png') top center no-repeat;
		}
	
	#container-bottom {
		background:transparent url('../img/shadow-bottom.png') bottom center no-repeat;
		}
		
	.content {
		width:940px;
		margin:0 20px;
		padding-bottom:40px;
		background:white url('../img/content-bg.png') bottom center repeat-x;
		}
		
		.bottom	{
			padding-bottom:40px;
			background:white;
			
			}
		
	.gallery, .resume {
		width:860px;
		margin:0 auto;
		position:relative;
		padding:40px 0;
		}
			
		.jFlowPrev, .jFlowNext {
			position:absolute;
			z-index:100;
			top:40px;
			width:450px;
			height:600px;
			cursor:pointer;
			}
			
		.jFlowPrev {
			left:-20px;
			}
			
			.jFlowPrev img {
				position:absolute;
				top:280px;
				left:0px;
				}
		
		.jFlowNext {
			right:-20px;
			}
			
			.jFlowNext img {
				position:absolute;
				top:280px;
				right:0px;
				}
				
		ul#controller {
			list-style-type:none;
			position:absolute;
			right:0;
			top:650px;
			}
			
			.jFlowControl {
				display:block;
				float:left;
				text-indent:-999em;
				background:transparent url('../img/gallery-progress.gif') 0 0 no-repeat;
				height:17px;
				width:17px;
				}
				
				.jFlowSelected {
					background:transparent url('../img/gallery-progress.gif') -17px 0 no-repeat;
					}
		
		.description, .resume {
			width:860px;
			margin:0 auto;
			font-family:Garamond, Georgia, serif;
			}
			
			.description h2, .resume h2 {
				font-weight:normal;
				font-size:1.8em;
				margin:0 0 20px 0;
				}
				
			h3 {
				font-family:arial, sans-serif;
				font-weight:bold;
				font-size:.8em;
				text-transform:uppercase;
				letter-spacing:.1em;
				margin:1.6em 0 20px 0;
				}
				
			.description p, .resume p {
				font-size:1.2em;
				line-height:1.3em;
				margin:0 0 1em 0;
				}
				
			.project {
				width:546px;
				margin-right:40px;
				float:left;
				}
				
				.project h3 {
					text-transform:lowercase;
					font-family:Garamond, serif;
					color:#999;
					margin:-15px 0 24px 0;
					}
				
			.details {
				width:273px;
				float:left;
				}
				
				.details ul {
					font-size:1em;
					font-style:italic;
					line-height:1.6em;
					list-style-type:none;
					}
					
		.morework {
				width:880px;
				margin:0 auto;
				}
				
				.morework h3 {
					width:860px;
					margin:0 auto;
					padding:40px 0 10px 0;
					}
				
				.morework ul li{
					display:block;
					float:left;
					}
					
				.morework ul li a {
					display:block;
					background:#ccc;
					margin:20px 10px 0 10px;
					width:273px;
					height:169px;
					text-decoration:none;
					}
					
					.morework ul li a span {
						visibility:hidden;
						}
					
				.morework ul li a:hover {
					display:block;
					margin:15px 5px -5px 5px;
					width:273px;
					height:169px;
					border:5px solid #cfcf28;
					}
					

				.morework #drawn { background:transparent url('../gallery/drawn/thumb.jpg') top center no-repeat;}
				.morework #mcf { background:transparent url('../gallery/mcf/thumb.jpg') top center no-repeat;}
				.morework #seattleinvite { background:transparent url('../gallery/seattleinvite/thumb.jpg') top center no-repeat;}
				.morework #hamburginvite { background:transparent url('../gallery/hamburginvite/thumb.jpg') top center no-repeat;}
				.morework #rainier { background:transparent url('../gallery/rainier/thumb.jpg') top center no-repeat;}
				.morework #recruitment { background:transparent url('../gallery/recruitment/thumb.jpg') top center no-repeat;}
				.morework #banners { background:transparent url('../gallery/banners/thumb.jpg') top center no-repeat;}
				.morework #seniorexhibition { background:transparent url('../gallery/seniorexhibition/thumb.jpg') top center no-repeat;}
				.morework #horsemen { background:transparent url('../gallery/horsemen/thumb.jpg') top center no-repeat;}
				.morework #bookmaking { background:transparent url('../gallery/bookmaking/thumb.jpg') top center no-repeat;}
				.morework #planetmagazine { background:transparent url('../gallery/planetmagazine/thumb.jpg') top center no-repeat;}
				.morework #ember { background:transparent url('../gallery/ember/thumb.jpg') top center no-repeat;}
					
		.footer {
			position:relative;
			top:20px;
			margin:0 0 40px 0;
			color:#928975;
			text-align:center;
			}
			
			
/* Resume Styles */

#resume {
		padding-top:140px;
		position:Relative;
		width:840px;
		}
		
#resume hr {
		visibility:visible;
		border-top:1px solid #e8e8e8;
}

.downloadit {
		position:absolute;
		left:275px;
		top:50px;
		}
		
		.downloadit a {
			display:block;
			text-indent:-999em;
			background:#cfcf28 url('../img/downloadpdf.gif') top center no-repeat;
			width:154px;
			height:33px;
			}

#resume p {
		margin-left:130px;
		color:#524d42;
}

#resume h3 {
		color:white;
		width:100px;
		font-size:80%;
		padding:.5em .7em;
		margin:0 15px 0 0;
		position:absolute;
		background:#b3bd0e;
}

#resume h4 {
		color:#aeae1d;
		font-weight:normal;
		padding-bottom:.2em;
	}
	.what { float:left; margin-left:130px; font-size:120%;}
	.what-skills {float:left; font-size:120%; width:165px;}
	.when { float:right;}
	
	.where {
			margin:.5em 0 2em 0;
			color:black;
			font-size:95%;
			font-style:italic;
	}
	
	.skills {
			margin-top:.5em;
			padding:0 10px 0 0;
			float:left;
			width:155px;
			list-style-type:none;
	}
	
	.first {
			margin-left:130px;
	}
	
	.last {
			padding-top:75px;
	}
	
	.resume-section {
			margin-bottom:75px;
			position:relative;
			clear:both;
	}
	
#resume p {
		line-height:1.4em;
		margin-top:.5em;
}

#resume a { color:#ff6;}
#resume a:hover {color:#242424;}

/* Contact Style */

#contact {
	position:relative;
	width:840px;
	margin:0 auto;
	padding-top:40px;
	}
	
	#contact h3 {width:840px; text-align:center;}
	
#bigemail {
	padding-top:50px;
	text-indent:-999em;
	display:block;
	width:488px;
	height:48px;
	margin:0 auto;
	background:transparent url('../img/email.gif') center center no-repeat;
	}

form {
		margin:50px 0;
		padding-bottom:50px;
		font-size:1em;
}

.input-row {
		display:relative;
		clear:both;
}

#name, #email, label {
		font-size:1em;
		float:left;
		border:none;
		padding:1em 10px;
		margin-bottom:10px;
}

#name, #email {
		border-bottom:1px solid #d0cecb;
		width:670px;
		background:#efede9;
		color:#525252;
}

label {
		width:100px;
		background:transparent;
		
}

#comments {
		float:left;
		border:none;
		border-bottom:1px solid #d0cecb;
		background:#efede9;
		color:#525252;
		width:670px;
		height:240px;
		padding:1em 10px;
}

#submit {
		float:right;
		margin:2em 30px;
}

.emailsent {
		background:#d35f60;
		color:white;
		text-align:center;
		float:left;
		width:100%;
		font-size:1em;
		padding:.5em 0;
		
}