/* reset */

* {
	margin:0;
	padding:0;
	outline:none;
}
img {border:none;}
li {list-style:none;}

/* end reset */

body {
	background:#000 url('../img/bg.jpg') no-repeat fixed 0 0;
	font-family:Georgia,serif; /* change this to use a mac font first in the font list due to georgia discrepancies */
	font-size:12px;
	line-height:1.3em;
	color:#999;
}
p {line-height:16px;}
a {
	color:#33b6d3;
	text-decoration:none;
}
#side {
	width:270px;
	padding:120px 40px 0;
	position:fixed;
	float:left;
	left:0;
	top:0;
}
	#side h1#logo {
		width:270px;
		height:152px;
		text-indent:-9999px;
		background:url('../img/logo.gif') no-repeat;
		cursor: pointer;
	}
	#side p.intro {
		font-family:Helvetica,Arial;
		font-size:11px;
		line-height:16px;
		color:#999;
		margin:20px 0;
	}
	#side div.contact {
		font-size:16px;
		font-family:Georgia;
		color:#fff;
		font-style:italic;
	}
		#side .contact p {
			margin-bottom:10px;
		}
		#side .contact p.email {
			text-indent:-9999px;
			margin-bottom:4px;
			background:url('../img/contact.gif') no-repeat left center;
			padding-left:22px;
			height:19px;
		}
			#side .contact p.email a {
				display:block;
				width:150px;
				height:18px;
			}
				#side .contact p.email a:hover {
					border-bottom:1px solid #33B6D3;
				}
		#side .contact p.twitter {
			padding-left:22px;
			height:18px;
			background:url('../img/twitter.gif') no-repeat 2px center;
			clear:left;
		}
			#side .contact p.twitter a {
				font-size:14px;
				font-style:normal;
				display:block;
				float:left;
			}
				#side .contact p.twitter a:hover {
					border-bottom:1px solid #33B6D3;
				}
	#side #modalwrap {
		display:none;
		font-family:Helvetica, Arial, sans-serif;
	}
		#ajaxform {
			margin-top:10px;
		}
			#ajaxform div.input {
				float:left;
				width:100%;
				clear:left;
				margin-bottom:10px;
			}
				#ajaxform label {
					font-size:13px;
					text-transform:uppercase;
					line-height:30px;
					width:85px;
					float:left;
					display:block;
					color:#444;
					text-align:right;
					margin-right:10px;
					font-family:Helvetica, Arial, sans-serif;
				}
				#ajaxform .text input,
				#ajaxform .textarea textarea {
					width:250px;
					border:1px solid #aaa;
					padding:2px 4px;
					font-size:14px;
					background:url('../img/input-bg.gif') repeat-x;
				}
				#ajaxform .text input {
					float:left;
					font-size:14px;
					padding:4px;
					color:#444;
				}
				#ajaxform .textarea {
					
				}
					#ajaxform .textarea textarea {
						font-family:Helvetica, Arial, sans-serif;
						font-size:14px;
						line-height:22px;
						height:90px;
						color:#444;
					}
				#ajaxform .submit input {
					margin-left:95px;
				}
		#side #success {}
			#success h4 {
				font-family:Helvetica, Arial, sans-serif;
				color:#222222;
				font-size:32px;
				line-height:30px;
				margin-bottom:5px;
				margin-top:90px;
				text-align:center;
			}
				#success p {
					font-size:14px;
					text-align:center;
				}
				
#main {
	float:left;
	width:570px;
	padding-left:40px;
	margin-left:350px;
	position:relative;
	display:inline;
}
	#main #top {
		position:fixed;
		background:url('../img/mask.jpg') no-repeat;
		width:570px;
		height:100px;
		overflow:hidden;
		z-index:3;
	}
		#main #top #selector span {
			position:absolute;
			top:76px;
			left:365px;
			font-style:italic;
			font-size:14px;
			color:#ddd;
		}
		#main #top #selector a {
			background-image:url('../img/portfolio-sprite.gif');
			background-repeat:no-repeat;
			height:25px;
			display:block;
			position:absolute;
			top:65px;
			text-indent:-9999px;
			cursor:pointer;
		}
			#main #top a#nav-web {
				width:44px;
				left:440px;
				background-position:0 -49px;
			}
				#main #top a#nav-web:hover,
				#main #top a#nav-web.active {
					background-position:0 0px;
				}
			#main #top a#nav-other {
				width:65px;
				background-position:-68px -49px;
				left:506px;
			}
				#main #top a#nav-other:hover,
				#main #top a#nav-other.active {
					background-position:-68px 0px;
				}
				
		/* PREV AND NEXT BUTTONS */
		
		/* spans and links */
		#main .prev,
		#main .prev a,
		#main .next,
		#main .next a {
			background-image:url('../img/nav-sprite.gif');
			background-repeat:no-repeat;
			width:48px;
			height:18px;
			text-indent:-9999px;
			position:fixed;
			top:76px;
			left:389px;
			display:block;
		}
		
		/* just spans */
		#main .prev,
		#main .next {z-index:1;}
				
		#main .prev {
			left:389px;
			background-position:left -25px;
		}
		#main .next {
			left:470px;
			background-position:right -25px;
		}
		
		/* just links */
		#main .prev a,
		#main .next a {
			cursor:pointer !important;
			cursor:hand; /* i <3 ie6 ^_^ */
			z-index:2;
		}
			#main .prev a {
				left:389px;
				background-position:0 0;
			}
			#main .next a {
				left:470px;
				background-position:right 0;
			}

	#main .portfolio {
		margin-top:120px;
		width:570px;
		font-family:Helvetica,Arial,sans-serif;
	}
		#main .portfolio ul {
			margin-left:0 !important;
		}
		#main .portfolio li.entry {
			clear:left;
			overflow:hidden;
			width:570px;
			height:400px;
			display:block !important;
			margin-bottom:50px;
		}
			#main .portfolio li.entry .image {
				line-height:0;
				background:url('../img/border.png') repeat;
				margin-bottom:10px;
				position: relative;
				width:570px;
				height:321px;
				cursor:pointer;
			}
			#main .portfolio li.entry .image.hilite {
				background:url('../img/border-hilite.png') repeat;
			}
			#main .portfolio li.entry .image .more {
				display:none;
				position:absolute;
				z-index:2;
				height:27px;
				width:27px;
				top:20px;
				right:20px;
				background:url('../img/icon-more.png') no-repeat;
			}
				#main .portfolio li.entry .image img {
					position:absolute;
					top:8px;
					left:8px;
					z-index:1;
				}
					#main .portfolio li.entry .image img.cover {
						z-index:2;
					}
			#main .portfolio .meta {
				width:280px;
				float:left;
			}
				#main .portfolio h3 {
					font-size:18px;
					line-height:24px;
					color:#fff;
				}
				#main .portfolio .link {
					font-size:13px;
				}
					#main .portfolio .link a {
						padding-right:15px;
						background:url('../img/new-window.gif') no-repeat right 2px;
					}
					#main .portfolio .link a:hover {
						text-decoration:underline;
					}
				#main .portfolio .tags {
					margin-top:10px;
					color:#444;
				}
			#main .portfolio .description {
				float:right;
				width:270px;
				font-size:11px;
				line-height:16px;
			}
				#main .portfolio .description a:hover {
					text-decoration:underline;
				}
	.page-nav {
		margin-top:-20px;
		margin-bottom:150px;
		width:100%;
		overflow:hidden;
	}
		.page-nav li {}
			.page-nav li.top {
				float:left;
			}
			.page-nav li.forward,
			.page-nav li.back {
				float:right;
			}
		.page-nav a {
			font-size:14px;
			font-style:italic;
			color:#fff;
			cursor:pointer !important;
			cursor:hand; /* <3 ie6 */
		}
			.page-nav a:hover {
				text-decoration:underline;
			}
			.page-nav .top a {
				background:url('../img/icon-up.gif') no-repeat left 2px;
				padding-left:18px;
			}
			.page-nav .forward a {
				background:url('../img/icon-right.gif') no-repeat right 5px;
				padding-right:18px;
			}
			.page-nav .back a {
				background:url('../img/icon-left.gif') no-repeat left center;
				padding-left:18px;
			}
	
	
	.fade {
		position:fixed;
		left:390px;
		width:570px;
		z-index:5;
	}
	#top-fade {
		top:100px;
		height:20px;
		background:url('../img/top-fade.png') repeat-x;
	}
	#bottom-fade {
		bottom:0;
		height:70px;
		background:url('../img/bottom-fade.png') repeat-x;
	}