.skipnav { display: none; }

/* base layout    */

body {
	background: #4d4d4d url(../images/pagebg.jpg) 0 0 repeat-x;
	font-family: arial, helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #dedede;
	text-align: center;
	}
	
.masthead {
	position: relative;
	height: 125px;
	width: 960px;
	margin: 0 auto;
	background: #4d4d4d url(../images/mastheadbg.jpg) 0 0 repeat-x;
	text-align: left;
	}
	
.contentwrap {
	background: #808080;
	text-align: center;
	}
	
	.content {
		width: 960px;
		margin: 0 auto;
		background: #808080 url(../images/contentbg.jpg) 0 0 repeat-x;
		text-align: left;
		border-bottom: solid 40px #808080;
		}
	
.footer {
	width: 960px;
	margin: 25px auto;
	background: #4d4d4d;
	text-align: left;
	}
	

/* standard type styles   */

em, i { font-style: italic; }
b, strong { font-weight: bold; }
a, a:visited { color: #dedede; }
a:hover { color: #fff; }


/* masthead logo    */

.masthead h1 {
	position: absolute;
	top: 35px;
	left: 30px;
	width: 215px;
	height: 65px;
	}
	
	.masthead h1 a {
		display: block;
		width: 215px;
		height: 0px;
		padding: 65px 0 0 0;
		background: url(../images/logo.jpg) 0 0 no-repeat;
		overflow: hidden;
		}
	
	.masthead h1 a:hover {
		background-position: 0 -65px;
		}
	

/* masthead main nav    */

.mainnav {
	position: absolute;
	top: 45px;
	left: 426px;
	width: 514px;
	height: 45px;
	}
	
	.mainnav li {
		float: left;
		display:inline;
		line-height: 45px;
		}
		
		.mainnav li a {
			display: block;
			background-image: url(../images/mainnav.jpg);
			height: 0;
			padding: 45px 0 0 0;
			overflow: hidden;
			}
			
			#menu_port a { width: 127px; background-position: 0 0; }
			#menu_pers a { width: 200px; background-position: -127px 0; }
			#menu_about a { width: 87px; background-position: -327px 0; }
			#menu_clients a { width: 100px; background-position: -414px 0; }
	
			.portfolio #menu_port a, #menu_port a:hover { background-position: 0 -45px; }
			.personal #menu_pers a, #menu_pers a:hover { background-position: -127px -45px; }
			.about #menu_about a, #menu_about a:hover { background-position: -327px -45px; }
			.clients #menu_clients a, #menu_clients a:hover { background-position: -414px -45px; }
	
	
	
/* thumbnail page items    */

	.previewsnav {
		position: relative;
		height: 60px;
		margin: 0;
		}
		
		.previewsnav .nav {
			position: absolute;
			top: 20px;
			right: 40px;
			}

		.previewsnav h3 {
			position: absolute;
			top: 20px;
			left: 40px;
			font-size: 13px;
			line-height: 20px;
			font-weight: normal;
			}
		
		.previewsnav a {
			margin-left: 7px;
			}
			
		.imagesnav a {
			margin-right: 7px;
			}
			
			#prv a { background: url(../images/arrow_prev.png) 0 -20px no-repeat; }
			#nxt a { background: url(../images/arrow_next.png) 0 -20px no-repeat; }
			#prv a:hover { background-position: 0 0; }
			#nxt a:hover { background-position: 0 0; }


/* thumbnail page items    */

	.previews {
		clear: both;
		overflow: auto;
		margin: 0 0 0 40px;
		}
		
	
	.previews li {
		float: left;
		display: inline;
		margin: 0 23px 23px 0;
		}
		
		.previews li a {
			display: block;
			border: solid 4px #8c8c8c;
			text-decoration: none;
			color: #aaa;
			font-size: 10px;
			}

		.previews li a:hover { border-color: #aaa; }
		.previews li a img { vertical-align: top; }
			


/* image details page items    */

.imagedetail {
	float: left;
	display: inline;
	margin: 0 0 23px 40px;
	width: 658px;
	}
	
	.imagedetail img {
		border: solid 4px #8c8c8c;
		}
		
	.imageinfo {
		float: right;
		display: inline;
		margin: 0 40px 0 0;
		width: 200px;
		}
		
		.imagesnav { margin: 0 0 25px; }
		.imagesnav #prv a, .imagesnav #nxt a { margin: 0 7px 0 0; }
		
		.imageinfo p {
			font-size: 11px;
			line-height: 17px;
			margin: 0 0 14px;
			}
		

/* about page items    */

.bio {
 	float: left;
 	display: inline;
 	width: 600px;
 	margin: 0 0 23px 40px;
 	}
 	
 	.bio p {
 		font-size: 14px;
 		line-height: 24px;
 		margin: 0 0 24px;
 		}

.content .contactinfo {
 	float: right;
 	display: inline;
 	width: 200px;
 	margin: 0 40px 23px 0;
 	}


 	.content .contactinfo h3 {
 		color: #aaa;
 		font-size: 13px;
 		letter-spacing: .8px;
 		text-transform: uppercase;
 		margin: 0 0 10px;
 		}

 	.content .contactinfo p {
 		font-size: 12px;
 		line-height: 18px;
 		margin: 0 0 18px;
 		}


/* footer items    */

.footer div {
	margin: 0 40px;
	font-size: 12px;
	line-height: 25px;
	}
	
	.footer .contactinfo {
		font-size: 12px;
		color: #ccc;
		}
		
		.footer .contactinfo span {
			border-left: solid 1px #777;
			padding-left: 10px;
			margin-left: 10px;
			}
			
		.contactinfo a, .contactinfo a:visited { color: inherit; }
		.contactinfo a:hover { color: #fff; }
			
	.footer .copyright {
		font-size: 10px;
		text-transform: uppercase;
		color: #999;
		}


/* personal projects preview items  */

.personal_previews {
	margin: 0 0 23px 40px;
	}

.preview {
	float: left;
	display: inline;
	width: 400px;
	margin: 0 50px 50px 0;
	border-top: solid 1px #8c8c8c;
	padding-top: 10px;
	}
	
	.preview img {
		vertical-align: top;
		float:left;
		display:inline;
		border: solid 4px #8c8c8c;
		}

	.preview a:hover img {
		border-color: #aaa;
		}
		
	.preview h3 {
		float: right;
		display: inline;
		width: 245px;
		font-size: 14px;
		line-height: 21px;
		font-weight: normal;
		margin: 10px 0;
		}

	.preview p {
		float: right;
		display: inline;
		width: 245px;
		font-size: 12px;
		line-height: 18px;
		}

.previewsnav .projecttitle {
	float: left;
	display: inline;
	font-size: 14px;
	}
	
	.personal .imageinfo h3 { font-size: 14px; line-height: 20px; font-weight: normal; margin: 0 0 10px 0; }
	.personal .imageinfo p { padding: 10px 0 0; border-top: solid 1px #8c8c8c;}


.clientlist {
 	margin: 0 40px 23px 40px;
 	}

.clientlist table {
	margin: 20px 0;
	width: 100%;
	}
	
.clientlist table td {
	width: 33%;
	padding: 0 30px 0 15px;
	border-left: solid 1px #999;
	font-size: 12px;
	line-height: 20px;
	}