body, html {
	height: 100%;
}

body {
	position: relative;
	min-width: 1000px;
	margin: 0;
	background-image: url(../img/body-bg.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: white;

     font-family: Helvetica, Arial, sans-serif;
     font-size: 12px;
	color: #8c8c8c;
}

.fl { float: left; }
.fr { float: right; }
.clearme { float: none; clear: both; }

*:focus { outline: none; }

a img {
	border: none;
}

#hilo, #tree {
	position: fixed;
}

	#hilo {
		top: 26px;
		right: 26px;
	}

		#hilo a {
			display: block;
			width: 71px;
			height: 59px;
			background-image: url(../img/hilo.gif);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}
			#hilo a,
			#hilo a:link,
			#hilo a:visited { background-position: 0 0; }
			#hilo a:hover,
			#hilo a:active { background-position: 0 -59px; }


#left {
	width: 234px;
}

	#left h1 {
		margin: 18px 0 0 18px;
	}

		#left h1 a {
			display: block;
			width: 190px;
			height: 123px;
			background-image: url(../img/treetree-logo.png);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}

#main {
	position: relative;
/*	height: 100%; */
	margin-left: 234px;
	background-image: url(../img/main-bg.jpg);
	background-repeat: repeat-y;
	background-position: left top;
}

	#main-flare {
		min-height: 100px;
		background-image: url(../img/main-flare-bg.jpg);
		background-repeat: no-repeat;
		background-position: left top;
	}

	#nav {
		position: absolute;
		top: 174px;
		left: -199px;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

		#nav li {
		}

			#nav li a {
				display: block;
				width: 207px;
				height: 78px;
				background-image: url(../img/nav-sprite.png);

				text-indent: -9999px;
			}

				a#work,
				a#work:link,
				a#work:visited {
					background-position: 0 0;
				}
				a#work:hover,
				a#work:active {
					background-position: -207px 0;
				}
				a#about,
				a#about:link,
				a#about:visited {
					background-position: 0 -78px;
				}
				a#about:hover,
				a#about:active {
					background-position: -207px -78px;
				}
				a#what,
				a#what:link,
				a#what:visited {
					background-position: 0 -156px;
				}
				a#what:hover,
				a#what:active {
					background-position: -207px -156px;
				}

				a#work.on,
				a#work.on:link,
				a#work.on:visited,
				a#work.on:hover,
				a#work.on:active {
					background-position: -414px 0;
				}
				a#about.on,
				a#about.on:link,
				a#about.on:visited,
				a#about.on:hover,
				a#about.on:active {
					background-position: -414px -78px;
				}
				a#what.on,
				a#what.on:link,
				a#what.on:visited,
				a#what.on:hover,
				a#what.on:active {
					background-position: -414px -156px;
				}

	#content {
		position: relative;
		width: 515px;
		margin: 0 0 0 45px;
		padding: 1px 0 0 0;
	}

		#subnav {
			position: absolute;
			top: 0;
			left: 0;
			list-style-type: none;
			width: 503px;
			height: 37px;
			margin: 0;
			padding: 6px 8px 0 2px;
			background-image: url(../img/subnav-bg.png);
			background-repeat: no-repeat;
			background-position: left top;
			text-transform: lowercase;
		}

			#subnav li {
				float: left;
				padding: 0 8px;
				border-left: 1px dotted #8c8c8c;
			}
				#subnav li.first {
					border: none;
				}

				#subnav li a,
				#subnav li a:link,
				#subnav li a:visited {
					display: block;
					margin: 0px;
					padding: 4px 6px;
					background-color: white;
					color: #8c8c8c;
					text-decoration: none;
				}
				#subnav li a:hover,
				#subnav li a:active {
					color: #83c1cc;
				}
				#subnav li a.on,
				#subnav li a.on:link,
				#subnav li a.on:visited,
				#subnav li a.on:hover,
				#subnav li a.on:active {
					-moz-border-radius: 4px;
					-webkit-border-radius: 4px;
					background-color: #eff8f9;
					color: #83c1cc;
				}

		/** giant image-replace titles for pages **/
		#content h2.title-hello {
			width: 503px;
			height: 89px;
			margin: 50px 0 0 0;
			background-image: url(../img/hello-there.png);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}

		#content h2.title-work {
			width: 251px;
			height: 89px;
			margin: 50px 0 0 0;
			background-image: url(../img/work.png);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}
		#content h2.title-about {
			width: 268px;
			height: 89px;
			margin: 50px 0 0 0;
			background-image: url(../img/about.png);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}
		#content h2.title-what {
			width: 503px;
			height: 83px;
			margin: 50px 0 0 0;
			background-image: url(../img/what-we-do.png);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}
		/****/

		#content h3 {
			margin: 28px 0 32px 0;
			font-size: 34px;
			font-weight: bold;
			color: #b8b8b8;
			text-transform: lowercase;
		}

		#content p {
			margin: 18px 0;
			line-height: 17px;
		}

		#case-study-highlight {
			position: relative;
			margin: 50px 0 30px 0;
			background-image: url(../img/case-study-highlight-bg.png);
			background-repeat: no-repeat;
			background-position: 90px top;
		}

			#case-study {
				padding: 20px 0 0 122px;
			}

				#case-study h4 {
					margin: 14px 0 4px 0;
					font-size: 12px;
					color: #d93248;
				}

				#case-study p {
					margin: 4px 0;
				}

			#featured-case-study-label {
				position: absolute;
				top: 44px;
				left: -45px;
				width: 202px;
				height: 96px;
				background-image: url(../img/featured-case-study-label.png);
				background-repeat: no-repeat;
				background-position: left top;

				text-indent: -9999px;
			}
			#view-link {
				position: absolute;
				top: 0;
				right: 0;
				width: 137px;
				height: 49px;
				background-image: url(../img/view-case-study.png);
				background-repeat: no-repeat;
				background-position: left top;
			}

/*				#featured-case-study-label a {
					display: block;
					width: 202px;
					height: 96px;

					text-indent: -9999px;
				}
*/
				#view-link a {
					display: block;
					width: 137px;
					height: 49px;

					text-indent: -9999px;
				}

		#content-area #work-list {
			list-style-type: none;
			margin: 10px 0 0 0;
			padding: 0;
			background-image: url(../img/work-list-bg.gif);
			background-repeat: repeat-y;
			background-position: right top;
		}

			#content-area #work-list li {
				position: relative;
				float: left;
				margin: 0 5px 0 0;
				padding: 14px 0 0 0;
			}

				#content-area #work-list li a {
					display: block;
				}

				#content-area #work-list li h4 {
					color: #ca243a;
				}

				#content-area #work-list li p {
					margin: 14px 0;
				}

				.project-hover {
					position: absolute;
					top: 1px;
					right: -4px;
					display: none;
				}

		#footer {
			margin-top: 40px;
			border-top: 1px dotted #d1d1d1;
			font-size: 11px;
		}

			#footer p {
				margin: 9px 0;
			}


		#bubble {
			position: absolute;
			top: 0;
			right: 0;
			width: 134px;
			height: 94px;
			background-image: url(../img/bubble.png);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}



#contact-box {
	position: fixed;
	bottom: 0;
	left: 34px;
	width: 166px;
	height: 48px;
}

	#contact-us {
		position: absolute;
		top: 0px;
		width: 166px;
		height: 209px;
		background-image: url(../img/contact-us-bg.png);
		background-repeat: no-repeat;
		background-position: left top;
	}

		#contact-us a.btn {
			display: block;
			width: 140px;
			height: 27px;
			margin: 0 7px 0;
			padding: 15px 6px 0;

			text-indent: -9999px;
		}

		p#phone {
			margin: 19px 0 6px 48px;
			font-size: 14px;
			font-weight: bold;
			color: black;
		}

		p#email {
			margin: 15px 0 13px 36px;
			font-size: 9px;
		}

			p#email a,
			p#email a:link,
			p#email a:visited {
				text-decoration: none;
				color: black;
			}
			p#email a:hover,
			p#email a:active {
				color: #9dd3dd;
			}

		p.social {
			margin: 17px 0 17px 48px;
			font-size: 13px;
		}

			p.social a,
			p.social a:link,
			p.social a:visited {
				text-decoration: none;
				color: #8b8b8b;
			}
			p.social a:hover,
			p.social a:active {
				color: black;
			}

	#tree {
		bottom: 0;
		right: 26px;
	}

		#tree a {
			display: block;
			width: 255px;
			height: 192px;
			background-image: url(../img/tree.gif);
			background-repeat: no-repeat;
			background-position: left top;

			text-indent: -9999px;
		}

			#tree a,
			#tree a:link,
			#tree a:visited { background-position: 0 0; }
			#tree a:hover,
			#tree a:active { background-position: 0 -192px; }


/** styles that apply to overlays **/

#dialog-top {
	width: 880px;
	height: 86px;
	background-image: url(../img/dialog-top-bg.png);
}

#dialog-body {
	position: relative;
	width: 880px;
	height: 462px;
	background-image: url(../img/dialog-body-bg.png);
}

	#case-logo {
		float: left;
		margin: 22px 0 0 26px;
	}

	#case-divider {
		float: left;
		margin: 18px 0 0 16px;
	}

	#case-name {
		float: left;
		margin: 30px 0 0 16px;

		font-family: Georgia, Times New Roman, serif;
		font-size: 26px;
		font-weight: bold;
		color: black;
	}

	#slide-container {
		position: relative;
		margin: 0 0 0 10px;
		padding: 1px 0 0 0;
	}

		.dcms.slides {
			display:none;
		}

		#slide-caption-box {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 560px;
			height: 32px;
			background-color: white;
			opacity: 0.7;
		}

		#slide-caption {
			position: absolute;
			bottom: 8px;
			left: 20px;

			font-family: Helvetica, Arial, sans-serif;
			font-size: 12px;
			font-weight: bold;
			color: #ef6ea8;
		}

     	#slide-content {
     		position: absolute;
     		top: 20px;
     		right: 20px;
     		width: 264px;
     		height: 320px;

     		line-height: 17px;
     	}

     		#slide-content h4 {
     			margin: 0 0 -8px 0;
     			color: #d93248;
     		}

			.lg-img-contain {
				position:absolute;
				top:0px;
				left:0px;
			}

     #tiles-box {
     	position: absolute;
     	bottom: 0;
     	left: 9px;
     	list-style-type: none;
     	width: 615px;
     	height: 100px;
     	margin: 0;
     	padding: 11px 0 0 9px;
     }


     	#tiles-box li {
     		float: left;
     		width: 89px;
     		height: 89px;
     		margin: 0 10px 0 0;
     	}

		     #tiles-box li.tile {
		          position: relative;
	     	}

		     .tile-hover {
	     	     position: absolute;
		          top: 0;
		          left: 12px;
	     	     display: none;
		     }

		     a.tiles,
		     a.tiles:link,
		     a.tiles:visited,
		     a.tiles:hover,
		     a.tiles:active {
		          position: absolute;
		          top: 0;
	     	     left: 0;
		          display: block;
		          width: 89px;
	     	     height: 89px;
	          	margin: 0 0 0 12px;
		          background-image: url(../img/tiles-bg.png);
		          background-position: 0px 0px;
	     	}


	a#dialog-prev {
		position: absolute;
		top: 130px;
		left: -31px;
		display: block;
		width: 38px;
		height: 74px;
		background-image: url(../img/dialog-prev-sprite.png);
	}
	a#dialog-prev,
	a#dialog-prev:link,
	a#dialog-prev:visited {
		background-position: 0 0;
	}
	a#dialog-prev:hover,
	a#dialog-prev:active {
		background-position: 0 -74px;
	}

	a#dialog-next {
		position: absolute;
		top: 130px;
		right: -31px;
		display: block;
		width: 38px;
		height: 74px;
		background-image: url(../img/dialog-next-sprite.png);
	}
	a#dialog-next,
	a#dialog-next:link,
	a#dialog-next:visited {
		background-position: 0 0;
	}
	a#dialog-next:hover,
	a#dialog-next:active {
		background-position: 0 -74px;
	}

#dialog-bot {
	width: 880px;
	height: 72px;
	background-image: url(../img/dialog-bot-bg.png);
}

	a#next-case {
		width: 114px;
		height: 21px;
		margin: 20px 28px 0 0;
		background-image: url(../img/next-case-btn.gif);

		text-indent: -9999px;
	}
	a#prev-case {
		width: 130px;
		height: 21px;
		margin: 20px 8px 0 0;
		background-image: url(../img/prev-case-btn.gif);

		text-indent: -9999px;
	}