/* RESETS: http://meyerweb.com/eric/tools/css/reset/ v1.0 | 20080212 */
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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; } ol, ul { list-style: none; } blockquote, q {	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; } /* remember to define focus styles! */
ins { text-decoration: none; } /* remember to highlight inserts somehow! */ del { text-decoration: line-through; }
table {	border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */

/* green: b2bd21 */
/* grey: 455560 */

html, body {
	margin: 0;
	padding: 0;
	font: 11px helvetica, sans-serif;
	line-height: 18px;
	color: #fff;
/* 	overflow: hidden; */
	background: #455560;
}

	p {
		margin: 0 0 10px 0;
	}

	a:link {
		color: #b2bd21;
		text-decoration: none;
	}
	a:visited {
		color: #b2bd21;
		text-decoration: none;
	}
	a:hover {
		color: #455560;
		text-decoration: none;
		/* background-color: #f63; */
	}
	a:active {
		color: #455560;
		text-decoration: none;
		/* background-color: #f63; */
	}
	
	img, a img {
		border: 0;
		margin: 0;
		padding: 0;
	}


/* MAIN BACKGROUND ========================================================== */
#background {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	overflow: hidden;
	background: #fff;
}
img.background, img.background-top {
	position: absolute;
	top: 0;
	left: 0;
}


/* NAVIGATION ========================================================== */
#nav-bar-bg {
	position: absolute;
	top: 500px;
	width: 100%;
	height: 64px;
	z-index: 98;
	background: #455560;
}
#nav-bar {
	position: absolute;
	top: 500px;
	width: 100%;
	height: 64px;
	z-index: 99;
	border-top: 2px #fff solid;
}

#nav-home {
	float: left;
	margin: 10px;
}

#nav {
	position: relative;
	float: right;
	margin: 36px 20px 0 20px;
	display: block;

}
	#nav ul {
		position: 		relative;
		display:		block;
 		width:			290px;
		height:			20px;
		margin:			0;
		padding:		0;
	}
	#nav li {
		position: absolute;
		top:			0;
		overflow:		hidden;
		text-indent:	-9000px;
		margin:			0;
		padding:		0;
		text-align: center;
		display: inline;
	}

	#nav li.nav-projects {
		left: 0;
	}
		li.nav-projects a:link, li.nav-projects a:visited {
			display:				block;
			width:					47px;
			height:					20px;
			background: 			url(/_assets/img/nav-projects.gif) no-repeat 0 0;
		}
		li.nav-projects a:hover {
			outline:				none;
			background: 			url(/_assets/img/nav-projects.gif) no-repeat 0 -20px;
		}
		.projects li.nav-projects a:link, .projects li.nav-projects a:visited {
			display:				block;
			width:					47px;
			height:					20px;
			background: 			url(/_assets/img/nav-projects.gif) no-repeat 0 -20px;
		}


	#nav li.nav-planning {
		left: 67px;
	}
		li.nav-planning a:link, li.nav-planning a:visited {
			display:				block;
			width:					50px;
			height:					20px;
			background: 			url(/_assets/img/nav-planning.gif) no-repeat 0 0;
		}
		li.nav-planning a:hover {
			outline:				none;
			background: 			url(/_assets/img/nav-planning.gif) no-repeat 0 -20px;
		}
		.planning li.nav-planning a:link, .planning li.nav-planning a:visited {
			display:				block;
			width:					50px;
			height:					20px;
			background: 			url(/_assets/img/nav-planning.gif) no-repeat 0 -20px;
		}


	#nav li.nav-press {
		left: 137px;
	}
		li.nav-press a:link, li.nav-press a:visited {
			display:				block;
			width:					32px;
			height:					20px;
			background: 			url(/_assets/img/nav-press.gif) no-repeat 0 0;
		}
		li.nav-press a:hover {
			outline:				none;
			background: 			url(/_assets/img/nav-press.gif) no-repeat 0 -20px;
		}
		.press li.nav-press a:link, .press li.nav-press a:visited {
			display:				block;
			width:					50px;
			height:					20px;
			background: 			url(/_assets/img/nav-press.gif) no-repeat 0 -20px;
		}

	#nav li.nav-about {
		left: 189px;
	}
		li.nav-about a:link, li.nav-about a:visited {
			display:				block;
			width:					35px;
			height:					20px;
			background: 			url(/_assets/img/nav-about.gif) no-repeat 0 0;
		}
		li.nav-about a:hover {
			outline:				none;
			background: 			url(/_assets/img/nav-about.gif) no-repeat 0 -20px;
		}
		.about li.nav-about a:link, .about li.nav-about a:visited {
			display:				block;
			width:					35px;
			height:					20px;
			background: 			url(/_assets/img/nav-about.gif) no-repeat 0 -20px;
		}

	#nav li.nav-contact {
		left: 244px;
	}
		li.nav-contact a:link, li.nav-contact a:visited {
			display:				block;
			width:					46px;
			height:					20px;
			background: 			url(/_assets/img/nav-contact.gif) no-repeat 0 0;
		}
		li.nav-contact a:hover {
			outline:				none;
			background: 			url(/_assets/img/nav-contact.gif) no-repeat 0 -20px;
		}
		.contact li.nav-contact a:link, .contact li.nav-contact a:visited {
			display:				block;
			width:					46px;
			height:					20px;
			background: 			url(/_assets/img/nav-contact.gif) no-repeat 0 -20px;
		}
	
	.nav-link a, .right-column-overlay a {
		color: #fff;
	}
	.nav-link a {
		text-transform: lowercase;
	}
	.nav-link a:hover, .right-column-overlay a:hover {
		color: #b2bd21;
	}

div.right-column-overlay {
	position: absolute;
	background: #455560;
	width: 290px;
	height: 460px;
	right: 20px;
	top: 20px;
	z-index: 5;
	display: block;
}
div.right-column-overlay .scrollpane {
	width: auto; /* 290px minus padding; 218px previously */
	height: 440px;
	padding: 10px;
	overflow-y: auto;
}


/* PROJECTS PAGE ========================================================== */
#projects-container {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	overflow-x: auto;
	overflow-y: auto;
	height: 500px;
	width: 100%;
	display:inline;
}
	#projects-container ul {
		position: absolute;
		top: 0;
		left: 0;
		list-style-type: none;
	}

		/* each project strip is 120px, including a 2px border-right */
		#projects-container ul li {
			position: relative;
			width: 118px;
			height: 500px;
			border-right: 2px #fff solid;
			border-bottom: 2px #fff solid;
			background: #b2bd21;
			color: #fff;

			display: inline;
			float: left;
			overflow: hidden;
			white-space: normal;
		}
			.project-strip-text {
				display: block;
				position: absolute;
				top: 6px;
				left: 6px;
				width: 106px;
			}
			.project-strip h4 {
				font: 18px Univers, Helvetica, Arial, sans-serif;
				color: #fff;
			}


/* SINGLE PROJECT ========================================================== */

#single-project-container {
	position: absolute;
	z-index: 10;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	background: #fff;
	height: 500px;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

	#project-image-wrapper {
		position: absolute;
		top: 0;
		right: 320px;
		z-index: 20;
		background: #fff;
	}
		#project-image {
			height: 500px;
		}
		#project-image-wrapper ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			text-align: right;
		}
		#project-image-wrapper li {
			display: block;
			margin: 0;
			padding: 0;
		}
		
		
	#project-content {
		position: absolute;
		width: 290px;
		padding: 10px 20px 5px 0;
		height: 488px;
		right: 0;
		top: 0;
		z-index: 25;
		overflow: visible;
	}
		h3.project-title {
			font: 18px Univers, Helvetica, Arial, sans-serif;
			color: #455560;
			margin: 0 0 5px 0;
		}
		.project-description {
			color: #455560;
			text-align: left;
		}

	#project-thumbnails {
		display: none;
	}
		#project-thumbnails ul {
			list-style-type: none;
		}
		#project-thumbnails li {
			display: inline;
		}
	#project-image-caption {
		color: #455560;
	}

	#project-nav {
		text-align: center;
		z-index: 21;
		position: absolute;
		bottom: 0;
	}
		#project-nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
 			width: 290px;
		}
		#project-nav li a { display: block;	}
		#project-nav .left { float: left;}
		#project-nav .right { float: right;}

h3.static-title {
	font: 18px Univers, Helvetica, Arial, sans-serif;
	color: #fff;
	margin: 0 0 5px 0;
}

/* JSCROLLPANE STYLES ========================================================== */

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	width: 218px;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
/* 	background: #aaa; */
	background: transparent;
}
.jScrollPaneDrag {
	position: absolute;
	background: #303b43;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}