/*-----------------------------------------------

	Project stylesheet for key2design.com.au
	by key2design
	
-----------------------------------------------*/
/* using absolute positioning for pixel-perfect layout */
#projector.expanded {
	overflow: hidden;

}
#projector.expanded #project-desc {
/*	overflow: hidden;*/
}
#projector {
	height: 270px;
}

#projects {
/*	height: 350px;*/
	overflow: hidden;
}
#projects-print-page #complementary,
#projects-web-page #complementary,
#projects-page #complementary {
	float: none;
}
#projects.dynamic {
	position: absolute
}
#projects {
	width: 861px; /* extra pixels for border */
}
#projects.dynamic {
	width: 841px;
}
	/* scrolling */
	#projects.dynamic ol {
		position: absolute;
		width: 10000px;
	}
	#projects ol li {
 		float: left;
		display: inline;
		margin: 0 23px 16px 0;
		height: 144px;
		width: 100px;
	}

#footer.dynamic {
	margin-top: 250px;
}

#projects img,
#projects ol em,
#projects ol span {
	display: block;
	text-align: center;
}
#projects em {
	font-style: normal;
}

#search {
}
#projects a {
	color: #666;
}
#projects a:hover {
	text-decoration: none;
}
#projects a span.discipline {
	color: #999;
}
/* selected project */
#projects ol a:hover img,
#projects ol a.selected img {
	border: 1px solid #aaa;
}
#projects ol img {
 	border: 1px solid #fff; /* hidden border to stop float problems with selection border */
}

#projects ol a:active img {
	border: 1px solid #444;
}
#projects ul.nav {
	clear: left;
	margin: 164px 0 0 0;
}
#projects ul.nav a {
	display: block;
	height: 18px;
	width: 18px;
}
#projects ul.nav a:hover {
	background-position: left center;
}
#projects ul.nav .disabled a {
	background-position: left bottom;
}
#project-statusbar {
	display: block;
	color: #008fd5;
	font-size: 12px;
	position: absolute;
	margin: 328px 0 0 50px;
}
#project-gallery {
	margin: 270px 0 10px -23px;
	position: absolute;
	overflow: hidden;
	width: 650px;
}
#project-gallery li {
	margin: 18px 0 0 22px;
}
/*#project-gallery img {*/
/*	border: 1px solid #ddd;*/
/*	border-right: none;*/
/*	display: block;*/
/*}*/
#project-desc {
	position: absolute;
	background-color: #efefef;
	height: 234px;
	width: 300px;
}
#project-loading {
	background: url(../images/loading.gif) no-repeat 5px 5px;
	color: #008fd5;
	font-weight: bold;
	padding: 3px 5px 3px 35px;
	position: absolute;
	width: 17em;
}
#next-page {
	float: right;
}
#next-page a {
	background-image: url(../images/next.gif);
}
#previous-page {
	float: left;
}
#previous-page a {
	background-image: url(../images/previous.gif);
}
#projector {
	clear: both;
}
#project-display {
	position: absolute;
	height: 270px;
	width: 610px;
}
	#project-display .nav {
		position: relative;
		top: 230px;
		left: 590px;
		width: 18px;
	}
	#project-display .nav a {
		display: block;
		border: 1px solid #fff;
		height: 18px;
		width: 18px;
	}

	#expand-project a {
		background-image: url(../images/expand.gif);
	}
	#expand-project.selected a {
		background-image: url(../images/collapse.gif);
	}
	#expand-project a:hover {
		background-position: left bottom;
	}
	#next-gallery-image a {
		background-image: url(../images/next.gif);
	}
	#next-gallery-image a:hover {
		background-position: left center;
	}
	
	
#project-loading {
	position: absolute;	
}


/* dynamically created for page sliding */
#projects div.wrapper {
	position: absolute;
}

#projector-desc {
	background: #aaa;
	margin-left: 610px;
	position: absolute;
}

#projector-desc div.section {
	background-color: #efefef;
	height: 270px;
	overflow: auto;
	width: 230px;
}

#projector.expanded {
	margin-bottom: -150px;
}

#projector-desc div.wrapper {
	margin: 15px 10px;
}

#projector-desc div.section h1 {
	line-height: 1.35em;
}

#projector-desc div.jScrollPaneContainer {
}


#projector-desc div.jScrollPaneContainer {
	overflow: hidden;
	position: absolute;
	z-index: 1;
}

#projector-desc a.jScrollArrowUp {
	background: url(../images/scrollbar-arrows.gif) no-repeat top left;
}

#projector-desc a.jScrollArrowDown {
	background: url(../images/scrollbar-arrows.gif) no-repeat bottom left;
}

#projector-desc .jScrollPaneTrack {
	background: #fff url(../images/scrollbar-tile.gif) repeat-y;
}
#projector-desc .jScrollPaneDragTop {
	background: #eee url(../images/scrollbar.gif) left top;
	height: 1px;
}

#projector-desc .jScrollPaneDragBottom {
	background: #eee url(../images/scrollbar.gif) left bottom;
	height: 1px;
   }
#projector-desc .jScrollPaneDrag {
	background: #eee url(../images/scrollbar-drag-tile.gif) ;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
}
.jScrollPaneDrag {
	position: absolute;
	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;
	height: 17px;
}
a.jScrollArrowUp:hover {
}

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