@charset "UTF-8";

/* GENERAL
------------------------------------------------------------------------------------------ */

.arrow-null,
.arrow-null:hover,
.arrow-null.hover {
	background-position: 0 0;	/* overrides global.css */
	opacity: 0.60;
	filter: alpha(opacity=60); 
	-moz-opacity: 0.60;
	}

/* PORTFOLIO HOME
------------------------------------------------------------------------------------------ */

#header-our-work {
	clear: both;
	margin: 25px 0 22px 38px;
	width: 690px;
	height: 30px;
	background: url(/images/header-our-work.png) no-repeat 0 0;
	}
#portfolio-home-content {
	margin: 0 0 50px 0;
	width: 855px;
	}
	#portfolio-intro p {
		margin: 0 0 25px 0;
		padding-left: 40px;
		font-family: "Times New Roman", Times, serif;
		font-size: 21px;
		line-height: 28px;
		}
	#group-cols {
		overflow: hidden;
		width: 805px;
		}
		.group-col {
			float: left;
			margin: 0 29px 0 0;
			padding: 0 0 0 20px;
			width: 188px;
			}
			.group-col h2 {
				margin: 0 0 12px 18px;
				color: #E37F1C;
				font-size: 30px;
				line-height: 33px;
				font-weight: normal;
				letter-spacing: 1px;
				}
			.group-list {
				padding-left: 20px;
				width: 168px;
				}
				.group-list p {
					line-height: 16px;
					margin-bottom: 8px;
					}
				.group-list p a {
					color: #555555;
					}
				.group-list p a:hover {
					color: #de740b;
					}
		#group-cols .jScrollPaneTrack {
			left: 0;
			right: auto;
			background: #ccc;
		}
		#group-cols .jScrollPaneDrag {
			background: #E37F1C;
			}


/* TITLE & SUBNAV
------------------------------------------------------------------------------------------ */

#title-portfolio {
	float: right;
	width: 90px;
	height: 15px;
	background: url(/images/title-portfolio.png) no-repeat 0 0;
	}
#title-portfolio:hover {
	background-position: 0 -50px;
	}
#subnav-clients {
	height: 19px;
	background: url(/images/subnav-clients.png) no-repeat 100% 5px;
	}
#subnav-industries {
	height: 19px;
	background: url(/images/subnav-industries.png) no-repeat 100% 5px;
	}
#subnav-categories {
	height: 19px;
	background: url(/images/subnav-categories.png) no-repeat 100% 5px;
	}
#subnav-clients:hover,
#subnav-industries:hover,
#subnav-categories:hover {
	background-position: 100% -45px;
	}
	.subnav-drop {
		display: none;
		overflow: hidden;
		padding-right: 20px;
		background: inherit;
		}
		.subnav-inner {
			padding: 5px 0 1px 0;
			background: inherit;
			}
			.subnav-drop p {
				margin-bottom: 6px;
				text-align: right;
				font-size: 11px;
				line-height: 14px;
				background: inherit;
				}
				.subnav-drop p a {
					color: #555555;
					background: inherit;
					}
				.subnav-drop p a:hover {
					color: #888f00;
					}
	#subnav .jScrollPaneContainer {
		margin-bottom: 10px;
		}
	#subnav .jScrollPaneTrack {
			background: #ccc;
		}
		#subnav .jScrollPaneDrag {
			background: #969d00;
			}
	

/* BELT
------------------------------------------------------------------------------------------ */

#portfolio-belt {
	position: relative;
	clear: both;
	padding-top: 22px;
	width: 825px;
	height: 155px;
	}
	#portfolio-belt h1 {
		margin-left: 38px;
		width: 720px;
		line-height: 30px;
		}
		
	#portfolio-belt .arrow-up {
		position: absolute;
		left: 5px;
		top: 72px;
		}	
	#portfolio-belt .arrow-down {
		position: absolute;
		left: 5px;
		top: 110px;
		}
	#portfolio-belt #of {
		position: absolute;
		right: 805px;
		top: 94px;
		width: 60px;
		text-align: right;
		white-space: nowrap;
		}
		#portfolio-belt #of img {
			vertical-align: top;
			}
	
	#thumb-nav {
		position: absolute;
		left: 36px;
		top: 68px;
		width: 750px;
		height: 64px;
		overflow: hidden;
		}
		
		.roll-box {
			position: absolute;
			overflow: hidden;
			float: left;
			left: 0;
			top: 0;
			padding: 0 0 0 2px;
			height: 29px;
			}
			.roll-client,
			.roll-project {
				color: #888f00;
				font-size: 11px;
				line-height: 12px;
				white-space: nowrap;
				font-weight: bold;
				}
			.roll-project {
				font-style: italic;
				font-weight: normal;
				}
			
		#thumb-holder {
			overflow: hidden;
			width: 750px;
			}
			#thumb-holder a {
				position: relative;
				float: left;
				margin: 0 5px 36px 0;
				padding: 4px 0 0 4px;
				width: 58px;
				height: 58px;
				background: #fff;
				outline: none;
				}
			#thumb-holder a.active {
				background-color: #E37F1C;
				cursor: default;
				}
				#thumb-holder img {
					display: block;
					background: #ddd;
					}
				#thumb-holder img.tn-border {
					position: absolute;
					left: 4px;
					top: 4px;
					background: none;
					}
				#thumb-holder a span {
					display: none;
					}
	
	

/* PORTFOLIO CONTENT
------------------------------------------------------------------------------------------ */

#portfolio-content {
	overflow: hidden;
	margin-bottom: 50px;
	width: 947px;	/* 5px wider than needed, to allow a little padding for cufon characters on right */
	min-height: 800px;
	}
	
	.group-overview p {
		font-family: "Times New Roman", Times, serif;
		margin: -4px 185px 25px 40px;
		font-size: 25px;
		line-height: 32px;
		}
	
	#text-column {
		float: right;
		display: inline;
		padding-right: 5px;
		width: 288px;
		text-align: right;
		}
		#text-column h2 {
			margin: 0 0 8px 0;
			font-size: 21px;
			line-height: 25px;
			font-weight: bold;
			color: #969d00;
			}
			#text-column h2 a {
				color: #969d00;
				}
			#text-column h2 a:hover {
				color: #000;
				}
		#text-column h3 {
			margin: 0 1px 10px 0;
			font-size: 16px;
			line-height: 18px;
			font-weight: normal;
			font-style: italic;
			color: #000;
			}
		#text-column p {
			margin-bottom: 13px;
			font-size: 12px;
			line-height: 20px;
			color: #555;
			}
		.web-link {
			display: block;
			margin-top: 14px;
			padding: 2px 21px 2px 0;
			color: #000;
			background: url(/images/arrow-right.png) no-repeat 100% 4px;
			outline: none;
			}
		.web-link:hover {
			color: #000;
			background-position: 100% -26px;
			}
		#recognition-header {
			padding-top: 5px;
			}
		#recognition-holder {
			position: relative;
			height: 65px;
			}
			#recognition-holder img {
				float: right;
				margin-left: 4px;
				}
			.rec-roll-box {
				position: absolute;
				overflow: hidden;
				float: left;
				right: 0;
				top: 0;
				padding: 0 0 0 2px;
				height: 29px;
				}
				.rec-roll-text {
					color: #de740b;
					font-size: 11px;
					line-height: 12px;
					white-space: nowrap;
					font-weight: bold;
					}
	
	#img-holder {
		float: left;
		display: inline;
		}
	.img-border {
		border: 1px solid #aaa;
		}
		#img-holder img {
			display: block;
			}
	
	#nav-column {
		float: left;
		display: inline;
		margin: 0 15px 0 5px;
		width: 20px;
		}	
		#nav-column .imgswap {
			margin-bottom: 9px;
			width: 16px;
			height: 16px;
			}
		#nav-column .hr {
			margin-bottom: 9px;
			width: 16px;
			height: 1px;
			background: #a8a8a8;
			}
		
		#imgnav-1  { background: url(/images/imgnav.png) no-repeat 0 0; }
		#imgnav-2  { background: url(/images/imgnav.png) no-repeat 0 -16px; }
		#imgnav-3  { background: url(/images/imgnav.png) no-repeat 0 -32px; }
		#imgnav-4  { background: url(/images/imgnav.png) no-repeat 0 -48px; }
		#imgnav-5  { background: url(/images/imgnav.png) no-repeat 0 -64px; }
		#imgnav-6  { background: url(/images/imgnav.png) no-repeat 0 -80px; }
		#imgnav-7  { background: url(/images/imgnav.png) no-repeat 0 -96px; }
		#imgnav-8  { background: url(/images/imgnav.png) no-repeat 0 -112px; }
		#imgnav-9  { background: url(/images/imgnav.png) no-repeat 0 -128px; }
		#imgnav-10 { background: url(/images/imgnav.png) no-repeat 0 -144px; }
		#imgnav-11 { background: url(/images/imgnav.png) no-repeat 0 -160px; }
		#imgnav-12 { background: url(/images/imgnav.png) no-repeat 0 -176px; }
		#imgnav-13 { background: url(/images/imgnav.png) no-repeat 0 -192px; }
		#imgnav-14 { background: url(/images/imgnav.png) no-repeat 0 -208px; }
		#imgnav-15 { background: url(/images/imgnav.png) no-repeat 0 -224px; }
		#imgnav-16 { background: url(/images/imgnav.png) no-repeat 0 -240px; }
		#imgnav-17 { background: url(/images/imgnav.png) no-repeat 0 -256px; }
		#imgnav-18 { background: url(/images/imgnav.png) no-repeat 0 -272px; }
		#imgnav-19 { background: url(/images/imgnav.png) no-repeat 0 -288px; }
		#imgnav-20 { background: url(/images/imgnav.png) no-repeat 0 -304px; }
		#imgnav-21 { background: url(/images/imgnav.png) no-repeat 0 -320px; }
		#imgnav-22 { background: url(/images/imgnav.png) no-repeat 0 -336px; }
		#imgnav-23 { background: url(/images/imgnav.png) no-repeat 0 -352px; }
		#imgnav-24 { background: url(/images/imgnav.png) no-repeat 0 -368px; }
		#imgnav-25 { background: url(/images/imgnav.png) no-repeat 0 -384px; }
		#imgnav-26 { background: url(/images/imgnav.png) no-repeat 0 -400px; }
		#imgnav-27 { background: url(/images/imgnav.png) no-repeat 0 -416px; }
		#imgnav-28 { background: url(/images/imgnav.png) no-repeat 0 -432px; }
		#imgnav-29 { background: url(/images/imgnav.png) no-repeat 0 -448px; }
		#imgnav-30 { background: url(/images/imgnav.png) no-repeat 0 -464px; }
		#imgnav-31 { background: url(/images/imgnav.png) no-repeat 0 -480px; }
		#imgnav-32 { background: url(/images/imgnav.png) no-repeat 0 -496px; }
		#imgnav-33 { background: url(/images/imgnav.png) no-repeat 0 -512px; }
		#imgnav-34 { background: url(/images/imgnav.png) no-repeat 0 -528px; }
		#imgnav-35 { background: url(/images/imgnav.png) no-repeat 0 -544px; }
		#imgnav-36 { background: url(/images/imgnav.png) no-repeat 0 -560px; }
		#imgnav-37 { background: url(/images/imgnav.png) no-repeat 0 -576px; }
		#imgnav-38 { background: url(/images/imgnav.png) no-repeat 0 -592px; }
		#imgnav-39 { background: url(/images/imgnav.png) no-repeat 0 -608px; }
		#imgnav-40 { background: url(/images/imgnav.png) no-repeat 0 -624px; }
		
		#imgnav-1:hover  { background: url(/images/imgnav.png) no-repeat -25px 0; }
		#imgnav-2:hover  { background: url(/images/imgnav.png) no-repeat -25px -16px; }
		#imgnav-3:hover  { background: url(/images/imgnav.png) no-repeat -25px -32px; }
		#imgnav-4:hover  { background: url(/images/imgnav.png) no-repeat -25px -48px; }
		#imgnav-5:hover  { background: url(/images/imgnav.png) no-repeat -25px -64px; }
		#imgnav-6:hover  { background: url(/images/imgnav.png) no-repeat -25px -80px; }
		#imgnav-7:hover  { background: url(/images/imgnav.png) no-repeat -25px -96px; }
		#imgnav-8:hover  { background: url(/images/imgnav.png) no-repeat -25px -112px; }
		#imgnav-9:hover  { background: url(/images/imgnav.png) no-repeat -25px -128px; }
		#imgnav-10:hover { background: url(/images/imgnav.png) no-repeat -25px -144px; }
		#imgnav-11:hover { background: url(/images/imgnav.png) no-repeat -25px -160px; }
		#imgnav-12:hover { background: url(/images/imgnav.png) no-repeat -25px -176px; }
		#imgnav-13:hover { background: url(/images/imgnav.png) no-repeat -25px -192px; }
		#imgnav-14:hover { background: url(/images/imgnav.png) no-repeat -25px -208px; }
		#imgnav-15:hover { background: url(/images/imgnav.png) no-repeat -25px -224px; }
		#imgnav-16:hover { background: url(/images/imgnav.png) no-repeat -25px -240px; }
		#imgnav-17:hover { background: url(/images/imgnav.png) no-repeat -25px -256px; }
		#imgnav-18:hover { background: url(/images/imgnav.png) no-repeat -25px -272px; }
		#imgnav-19:hover { background: url(/images/imgnav.png) no-repeat -25px -288px; }
		#imgnav-20:hover { background: url(/images/imgnav.png) no-repeat -25px -304px; }
		#imgnav-21:hover { background: url(/images/imgnav.png) no-repeat -25px -320px; }
		#imgnav-22:hover { background: url(/images/imgnav.png) no-repeat -25px -336px; }
		#imgnav-23:hover { background: url(/images/imgnav.png) no-repeat -25px -352px; }
		#imgnav-24:hover { background: url(/images/imgnav.png) no-repeat -25px -368px; }
		#imgnav-25:hover { background: url(/images/imgnav.png) no-repeat -25px -384px; }
		#imgnav-26:hover { background: url(/images/imgnav.png) no-repeat -25px -400px; }
		#imgnav-27:hover { background: url(/images/imgnav.png) no-repeat -25px -416px; }
		#imgnav-28:hover { background: url(/images/imgnav.png) no-repeat -25px -432px; }
		#imgnav-29:hover { background: url(/images/imgnav.png) no-repeat -25px -448px; }
		#imgnav-30:hover { background: url(/images/imgnav.png) no-repeat -25px -464px; }
		#imgnav-31:hover { background: url(/images/imgnav.png) no-repeat -25px -480px; }
		#imgnav-32:hover { background: url(/images/imgnav.png) no-repeat -25px -496px; }
		#imgnav-33:hover { background: url(/images/imgnav.png) no-repeat -25px -512px; }
		#imgnav-34:hover { background: url(/images/imgnav.png) no-repeat -25px -528px; }
		#imgnav-35:hover { background: url(/images/imgnav.png) no-repeat -25px -544px; }
		#imgnav-36:hover { background: url(/images/imgnav.png) no-repeat -25px -560px; }
		#imgnav-37:hover { background: url(/images/imgnav.png) no-repeat -25px -576px; }
		#imgnav-38:hover { background: url(/images/imgnav.png) no-repeat -25px -592px; }
		#imgnav-39:hover { background: url(/images/imgnav.png) no-repeat -25px -608px; }
		#imgnav-40:hover { background: url(/images/imgnav.png) no-repeat -25px -624px; }
		
		#imgnav-1.active  { background: url(/images/imgnav.png) no-repeat -50px 0; }
		#imgnav-2.active  { background: url(/images/imgnav.png) no-repeat -50px -16px; }
		#imgnav-3.active  { background: url(/images/imgnav.png) no-repeat -50px -32px; }
		#imgnav-4.active  { background: url(/images/imgnav.png) no-repeat -50px -48px; }
		#imgnav-5.active  { background: url(/images/imgnav.png) no-repeat -50px -64px; }
		#imgnav-6.active  { background: url(/images/imgnav.png) no-repeat -50px -80px; }
		#imgnav-7.active  { background: url(/images/imgnav.png) no-repeat -50px -96px; }
		#imgnav-8.active  { background: url(/images/imgnav.png) no-repeat -50px -112px; }
		#imgnav-9.active  { background: url(/images/imgnav.png) no-repeat -50px -128px; }
		#imgnav-10.active { background: url(/images/imgnav.png) no-repeat -50px -144px; }
		#imgnav-11.active { background: url(/images/imgnav.png) no-repeat -50px -160px; }
		#imgnav-12.active { background: url(/images/imgnav.png) no-repeat -50px -176px; }
		#imgnav-13.active { background: url(/images/imgnav.png) no-repeat -50px -192px; }
		#imgnav-14.active { background: url(/images/imgnav.png) no-repeat -50px -208px; }
		#imgnav-15.active { background: url(/images/imgnav.png) no-repeat -50px -224px; }
		#imgnav-16.active { background: url(/images/imgnav.png) no-repeat -50px -240px; }
		#imgnav-17.active { background: url(/images/imgnav.png) no-repeat -50px -256px; }
		#imgnav-18.active { background: url(/images/imgnav.png) no-repeat -50px -272px; }
		#imgnav-19.active { background: url(/images/imgnav.png) no-repeat -50px -288px; }
		#imgnav-20.active { background: url(/images/imgnav.png) no-repeat -50px -304px; }
		#imgnav-21.active { background: url(/images/imgnav.png) no-repeat -50px -320px; }
		#imgnav-22.active { background: url(/images/imgnav.png) no-repeat -50px -336px; }
		#imgnav-23.active { background: url(/images/imgnav.png) no-repeat -50px -352px; }
		#imgnav-24.active { background: url(/images/imgnav.png) no-repeat -50px -368px; }
		#imgnav-25.active { background: url(/images/imgnav.png) no-repeat -50px -384px; }
		#imgnav-26.active { background: url(/images/imgnav.png) no-repeat -50px -400px; }
		#imgnav-27.active { background: url(/images/imgnav.png) no-repeat -50px -416px; }
		#imgnav-28.active { background: url(/images/imgnav.png) no-repeat -50px -432px; }
		#imgnav-29.active { background: url(/images/imgnav.png) no-repeat -50px -448px; }
		#imgnav-30.active { background: url(/images/imgnav.png) no-repeat -50px -464px; }
		#imgnav-31.active { background: url(/images/imgnav.png) no-repeat -50px -480px; }
		#imgnav-32.active { background: url(/images/imgnav.png) no-repeat -50px -496px; }
		#imgnav-33.active { background: url(/images/imgnav.png) no-repeat -50px -512px; }
		#imgnav-34.active { background: url(/images/imgnav.png) no-repeat -50px -528px; }
		#imgnav-35.active { background: url(/images/imgnav.png) no-repeat -50px -544px; }
		#imgnav-36.active { background: url(/images/imgnav.png) no-repeat -50px -560px; }
		#imgnav-37.active { background: url(/images/imgnav.png) no-repeat -50px -576px; }
		#imgnav-38.active { background: url(/images/imgnav.png) no-repeat -50px -592px; }
		#imgnav-39.active { background: url(/images/imgnav.png) no-repeat -50px -608px; }
		#imgnav-40.active { background: url(/images/imgnav.png) no-repeat -50px -624px; }