html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* end Reset  */

/* Page Layout */
html{
	overflow-y: scroll;
}
body{
	background: #b8b8b8 url(/images/body_bg.png) fixed repeat-x;
	font-family:"Trebuchet MS";
	font-size: 62.5%;
	color: #a1a1a1;
		}
		#pageWrap { 
			width: 580px;
			margin-left: auto; 
			margin-right: auto; 
			border: 0; 
			padding: 0 20px; 
			margin-top: 100px; 
			position: relative;
			z-index: 2;
				}
		#footer { 
			z-index: 3;
			position: fixed;
			clear: both; 
			width: 100%; 
			height: 240px; 
			bottom: 0; 
			border: 0; 
			text-align: center; 
			color: #335500; 
			background: transparent url(/images/menu_bg.png) top center no-repeat; 
				} 
				#footer p { 
					padding-top: 40px;  	
					}
			  	#centerfooter{
				  	padding-top: 40px;
					width: 580px;
					margin: 0 auto;
					display:table;
					vertical-align: top;
				  	}
			  	#leftfooter{
					display: table-cell;
					width: 179px;
					text-align: left;
					vertical-align: top;
					float:left;
					}
					#leftfooter #logo{
						text-indent: -9999px;
						background: transparent url(/images/logo.png) top left no-repeat;
						width: 76px;
						height: 102px;
						margin-top: 27px;
						margin-left: 37px;
						}
				#rightfooter{
					display: table-cell;
					text-align: left;
					vertical-align: top;
					padding-top: 68px;
					float: left;
					}
					#footercolor { 
						z-index: 3;
						position: fixed;
						clear: both; 
						width: 100%; 
						height: 200px; 
						bottom: 0; 
						border: 0;
						background-color: #b8b8b8; 
						}
					 
					#footerspacer{
						clear:both;
						height: 250px;
						}	
						#pagefade{
							z-index: 500;
							width: 100%;
							position: fixed;
							top: 0px;
							left:0px;
							height: 150px;
							background: transparent url(/images/fade.png) bottom left repeat-x;
							}
						#glow{
							z-index: 1;
							position: fixed;
							bottom: 650px;
							left: 0px;
							height: 300px;
							background: transparent url(/images/glow.png) bottom center no-repeat;
							}				
/* END PAGE LAYOUT */

/* PORTFOLIO  */
.project{
	clear: both;
	padding-top: 8px;
	}
.screenshot {
	width: 356px;
	float:left;
	}
	.screenshot img {
		display : inline;
		float: left;
		}

div.info {
	margin-left: 359px;
	background: #fff url(/images/info_top.gif) top left no-repeat;
	height: 277px;
	} 
	div.info ul{
		padding:3px 5px 5px 15px;
		} 
		div.info ul li{
			font-size: 1.1em;
			line-height: 1em;
			} 

.company{
	background: #fff url(/images/company.gif) top left no-repeat;
	text-indent: -9999px;
	margin-top: 30px;
	line-height:  7px;
	}
.client{
	background: #fff url(/images/client.gif) top left no-repeat;
	text-indent: -9999px;
	margin-top: 30px;
	line-height:  7px;
	}	
.software{
	background: #fff url(/images/software.gif) top left no-repeat;
	text-indent: -9999px;
	margin-top: 30px;
	line-height:  7px;
}
.action{
	background: #fff url(/images/action.gif) top left no-repeat;
	text-indent: -9999px;
	margin-top: 30px;
	line-height:  7px;
	}
.visitsite a{
	background: #fff url(/images/visitsite.gif) top left no-repeat;
	text-indent: -9999px;
	height: 7px;
	width: 100px;
	display: block;
	margin-top: 30px;
	line-height:  7px;
	}
.photographer{
	background: #fff url(/images/photographer.gif) top left no-repeat;
	text-indent: -9999px;
	margin-top: 30px;
	line-height:  7px;
	}
.title{
	background: #fff url(/images/title.gif) top left no-repeat;
	text-indent: -9999px;
	margin-top: 30px;
	line-height:  7px;
	}
/* END PORTFOLIO */

/* MAIN MENU */
#menu{
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	}
	#menu li{
		float:left;
		display:inline;
		}
	#menu a:hover span{
		display: block;	
		}
	#menu span {
		display: none;
		position: absolute;
		text-indent:  0px;
	}

#menu li#about a{
	display:block;
	width: 62px;
	height:23px;
	background: #fff url(/images/about.png) top left no-repeat;
	text-indent: -9999px;
	margin-right: 79px;
	}
	#menu li#about a:hover{
		display:block;
		width: 62px;
		height:23px;
		background: #fff url(/images/about_on.png) top left no-repeat;
		text-indent: -9999px;
		}
		#menu li#about span {
			background: url(/images/jonpond_over.png) top left no-repeat;
			width: 89px;
			height: 17px;
			left: -10px;
			top: 30px;
			text-indent: -9999px;
			}
body.about #menu li#about a{
	background: #fff url(/images/about_on.png) top left no-repeat;
}	
body.about #menu li#about span {
	display :block;
	background: url(/images/jonpond.png) top left no-repeat;
}	
			

#menu li#portfolio a.main{
	display:block;
	width: 81px;
	height:23px;
	background: #fff url(/images/portfolio.png) top left no-repeat;
	text-indent: -9999px;
	margin-right: 90px;
	}
	#menu li#portfolio a.main:hover{
		display:block;
		width: 81px;
		height:23px;
		background: #fff url(/images/portfolio_on.png) top left no-repeat;
		text-indent: -9999px;
		}
		
body.portfolio #menu li#portfolio a.main{
	background: #fff url(/images/portfolio_on.png) top left no-repeat;
}	
body.portfolio #menu li#portfolio ul.submenu {
	display :block;
	
}		
		

#menu li#contact a{
	display:block;
	width: 65px;
	height:23px;
	background: #fff url(/images/contact.png) top left no-repeat;
	text-indent: -9999px;
	}
	#menu li#contact a:hover{
		display:block;
		width: 65px;
		height:23px;
		background: #fff url(/images/contact_on.png) top left no-repeat;
		text-indent: -9999px;
		}
		#menu li#contact span {
			text-indent: -9999px;
			width: 111px;
			height: 16px;
			left: 290px;
			top: 28px;
			background: url(/images/yourdesigner_over.png) top left no-repeat;
			}
body.contact #menu li#contact a{
	background: #fff url(/images/contact_on.png) top left no-repeat;
}	
body.contact #menu li#contact span {
	display :block;
	background: url(/images/yourdesigner.png) top left no-repeat;
}			


			
#menu a:hover .submenu{
	display: block;
	}
	.submenu{
		display:none;
		position:absolute;
		top: 23px;
		left: 120px;
	}
	.submenu li#print a{
		display: block;
		height: 28px;
		background: transparent url(/images/printwebstudio.png) top left no-repeat;
		width: 40px;
		text-indent: -9999px;
		margin-right:10px;
		}
		.submenu li#print a:hover{
			background-position: bottom left;
		}
body.print .submenu li#print a {
	background-position: bottom left;
	}		
		
		
	.submenu li#web a{
		display: block;
		height: 28px;
		background: url(/images/printwebstudio.png) -58px 0px no-repeat;
		width: 40px;
		text-indent: -9999px;
		margin-right:10px;
		}
	.submenu li#web a:hover{
		background-position: -58px -28px;
		}
body.web .submenu li#web a {
	background-position: -58px -28px;
	}		
		
	.submenu li#photo a{
		display: block;
		height: 28px;
		background: url(/images/printwebstudio.png) -114px 0px no-repeat;
		width: 50px;
		text-indent: -9999px;
		}
	.submenu li#photo a:hover{
		background-position: -114px -28px;
		}
body.photo .submenu li#photo a {
	background-position: -114px -28px;
	}	

/* about */

#content-jp{
	background: #000 url(/images/content_top_red.gif) top right no-repeat;
	padding-top: 3px;
	}
	#content-jp #logo-bg{
		background: #fbfbfb url(/images/content_tr.jpg) top left  no-repeat;
		height: 284px;
	}
	#content-jp #logo-bg #content-fade{
		padding: 35px 160px 0px 41px;
	}
	#content-jp #logo-bg #content-fade p{
		font-size: 1.2em;
		line-height: 1.8em;
		color: #323232;
		
	}
	#content-jp #logo-bg #content-fade p.link a{
		font-size: 1.0em;
		text-indent: -9999px;
		background: transparent url(/images/viewresume.png) top left no-repeat;
		color: #e75063;
		text-decoration: none;
		display:block;
		width: 74px;
		height: 7px;
			
	}
	#content-jp #logo-bg #content-fade p.link{margin-top: 20px;}
	#content-jp #logo-bg #content-fade #content-holder{padding-left: 26px;}

h3#graphic-designer{
	text-indent: -9999px;
	width: 146px;
	height: 16px;
	background: #fff url(/images/graphic_designer.png) top left no-repeat;
	margin-bottom: 15px;
}

h2#jonpond{
	text-indent: -9999px;
	width: 116px;
	height: 15px;
	background: #fff url(/images/jonpond_header.png) top left no-repeat;
	margin-bottom: 10px;
}

#content-jp #contact-bg{
		background: #fbfbfb url(/images/contact_bg.jpg) top left  no-repeat;
		height: 284px;
	}
#content-jp #contact-bg #content-padding{ 
	padding: 35px 160px 0px 41px;
	}
#content-jp #contact-bg #content-padding #content-holder{
padding-left: 26px;
}

#content-jp #contact-bg #content-padding p{
	font-size: 1.2em;
		line-height: 1.8em;
		color: #323232;
} 	
h3#needahand{
	text-indent: -9999px;
	width: 171px;
	height: 15px;
	background: #fff url(/images/needahand.png) top left no-repeat;
	margin-bottom: 15px;
}

#contact-form{
	padding-left: 86px;
	padding-top: 20px;
}
#name{
	width: 335px;
	height: 17px;
	margin-top:3px;	
	margin-bottom: 14px;
	background: none;
	border: none;
	color: #747474;
	font-family:"Trebuchet MS";
	padding-left: 5px;
	font-size: 1.2em;
		line-height: 1.8em;
}
#email{
	width: 335px;
	height: 17px;
	margin-bottom: 10px;
	background: none;
	border: none;
	color: #747474;
	font-family:"Trebuchet MS";
	padding-left: 5px;
	font-size: 1.2em;
		line-height: 1.8em;
}
#inquiry{
	width: 335px;
	height: 70px;
	background: none;
	border: none;
	color: #747474;
	font-family:"Trebuchet MS";
	padding-left: 5px;
	font-size: 1.2em;
		line-height: 1.8em;
}

#send a{
	display:block;
	text-indent: -9999px;
	width: 26px;
	height: 7px;
	background: #fff url(/images/send.png) top left no-repeat;
}
#send{
	width: 26px;
	position: relative;
	top: -5px;
	left: -42px;
}
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	z-index: 9999;
	}
#screenshot{
	position:absolute;
	border:1px solid #191919;
	background:#2f2f2f;
	padding:5px;
	display:none;
	color:#fff;
	z-index: 9999;
	}