.skipnav { display: none; }

/* base layout    */

body {
	background: #4d4d4d url(../images/pagebg.jpg) 0 0 repeat-x;
	font-family: helvetica, arial, 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;
		position: relative;
		-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		-moz-box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		-o-box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		}

		.previews li a {
			display: block;
			border: solid 4px #8c8c8c;
			text-decoration: none;
			color: #aaa;
			font-size: 10px;
			}

		.previews .bg {
			position: absolute;
			top:4px;
			left:4px;
			width: 150px;
			height: 75px;
			background: #000;
			z-index: 100;
			}

		.previews .caption {
			position: absolute;
			top:12px;
			left:14px;
			width: 120px;
			height: 120px;
			z-index: 200;
			color: #fff;
			font-size: 11px;
			line-height: 14px;
			}



		.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;
		-webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.2);
		-moz-box-shadow: 3px 4px 5px rgba(0,0,0,.2);
		-o-box-shadow: 3px 4px 5px rgba(0,0,0,.2);
		box-shadow: 3px 4px 5px rgba(0,0,0,.2);
		}

	.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; }

		.imagesnav a img, .nav a img {
				-webkit-opacity: .5;
				-moz-opacity: .5;
				opacity: .5;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
				}

		.imagesnav a:hover img, .nav a:hover img {opacity: 1;}

		.nav a.inactive img { opacity: .2; }
			.nav a.inactive:hover img {opacity: .2;}

		.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 30px;
 		}
 		
 		.contactinfo label {
 			display: block;
 			font-size: 12px;
 			margin: 0 0 6px;
 			color: #ccc;
 			}
 			
 		.contactinfo input[type="text"] {
 			margin: 0 0 12px;
 			padding: 5px;
 			border: solid 1px #666;
 			-moz-border-radius: 4px;
 			width: 95%;
 			background: #bbb;
 			}
 			
 			.contactinfo input[type="text"]:focus {
 				background: #eee;
 				}


/* 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;
		-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		-moz-box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		-o-box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		box-shadow: 2px 2px 3px rgba(0,0,0,.1);
		}

	.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;
	}