/*
    __         _       __    __  __      __
   / /_  _____(_)___ _/ /_  / /_/ /___ _/ /_  _____
  / __ \/ ___/ / __ `/ __ \/ __/ / __ `/ __ \/ ___/
 / /_/ / /  / / /_/ / / / / /_/ / /_/ / /_/ (__  )
/_.___/_/  /_/\__, /_/ /_/\__/_/\__,_/_.___/____/
             /____/      Smart online solutions.

http://www.brightlabs.com.au
info@brightlabs.com.au

*
*	Project:	HopgoodGanim
*	Date:		01/05/2012
*	Author: 	Nathan Crowe
*				Andrew Taylor
*				Tyson Cox
*
*	Sections
*	=Feature
*	=Content
*		@Featurettes
*		@Updates
*		@Services
*
*
*/

body { background-image: url('/images/backgrounds/body-home.png'); }
#wrapper { background-image: url('/images/backgrounds/wrapper-home.jpg'); }
#b2tf { background-image: url('/images/backgrounds/b2tf-home.png'); }

/* =Feature
--------------------------------------------------------- */
#feature {
	height: 403px;
	margin-top: 1px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 0;
}
	#feature-carousel {
		height: 403px;
		left: 50%;
		margin-left: -554px;
		position: absolute;
		width: 1108px;
	}
	#feature-carousel li {
		background: transparent url('/images/feature-placeholder.png') 0 bottom no-repeat;
		height: 403px;
		width: 100%;
		opacity: 0;
	}
	#feature-carousel li + li {
		display: none;
	}
		#feature-carousel li .bg {
			left: 0px;
			height: 403px;
			position: absolute;
			top: 0px;
			width: 1108px;
			z-index: 1;
		}
		#feature-carousel li .content {
			left: 0px;
			margin: 0 auto;
			padding: 36px 0 0 0;
			position: absolute;
			top: 0px;
			width: 978px;
			z-index: 100;
		}

			#feature-carousel li .content h2 {
				color: #222;
				float: right;
				font-family: 'DINNeuzeitGroteskStdLightRg', Arial, Helvetica, sans-serif;
				font-size: 32px;
				font-weight: normal;
				line-height: 36px;
				margin-bottom: 6px;
			}
			#feature-carousel li .content p {
				color: #857a6c;
				clear: right;
				float: right;
				font-family: 'DINNeuzeitGroteskStdLightRg', Arial, Helvetica, sans-serif;
				font-size: 18px;
				font-weight: normal;
				line-height: 24px;
				margin-bottom: 18px;
				text-align: right;
				width: 390px;
			}

			#feature-carousel li .content .white { color: #ffffff; }
			#feature-carousel li .content .black { color: #000000; }
			#feature-carousel li .content .red { color: #b90013; }
			#feature-carousel li .content .beige { color: #e7e4e2; }
			#feature-carousel li .content .light-brown { color: #cecac4; }
			#feature-carousel li .content .brown { color: #b6afa7; }
			#feature-carousel li .content .dark-brown { color: #9d9589; }
			#feature-carousel li .content .chocolate { color: #887f70; }
			#feature-carousel li .content .charcoal { color: #222222; }

			#feature-carousel li .content .button {
				float: right;
				clear: right
			}
#feature-carousel-pagination {
	height: 20px;
	position: relative;
	z-index: 1998;
	width: 978px;
	top: 215px;
	margin: 0 auto;
}
	#feature-carousel-pagination ul {
		left: 0;
		position: absolute;
	}
		#feature-carousel-pagination li {
			float: left;
			text-indent: -9999px;
		}
		#feature-carousel-pagination li + li { margin-left: 8px; }
			#feature-carousel-pagination li a {
				background: url('/images/sprites/global.png') -230px -280px no-repeat;
				display: block;
				height: 18px;
				outline: none;
				width: 18px;
			}
			#feature-carousel-pagination li a:hover { background-position: -230px -300px; }
			#feature-carousel-pagination .activeSlide a,
			#feature-carousel-pagination .activeSlide a:hover { background-position: -230px -340px; }
			#feature-carousel-pagination li a:active { background-position: -230px -320px; }
/* =Content
--------------------------------------------------------- */
#content {
	background: transparent url('/images/backgrounds/content-home.png') 50% 0 no-repeat;
	margin-top: -153px;
	padding-bottom: 539px;
	z-index: 1982;
}

/* @group Featurettes */
#featurettes {
	overflow: hidden;
	width: 100%;
}
	#featurettes .mortar {
		background: #e3dfdc;
		position: relative;
		margin: 20px 0 0 5px;
	}
		#featurettes .brick {
			background: #fff;
			height: 294px;
			position: relative;
			top: -5px;
			left: -5px;
			padding: 0 15px;
			overflow: hidden;
		}
			#featurettes h3 {
				color: #000;
				font-family: 'DINNeuzeitGroteskStdLightRg', Arial, Helvetica, sans-serif;
				font-size: 15px;
				font-weight: normal;
				line-height: 36px;
			}
			#featurettes img {
				display: block;
				margin: 0 -15px 12px -15px;
			}
			#featurettes ul {
				margin: 0 -15px 12px -15px;
				overflow: hidden;
			}
				#featurettes ul li {
					display: block;
					height: 258px;
					float: left;
					width: 306px;
				}
					#featurettes ul li > img {
						margin: 0;
						margin-bottom: 8px;
					}
				#featurettes .carousel-button {
					cursor: pointer;
					display: block;
					height: 45px;
					position: absolute;
					top: 92px;
					width: 39px;
				}
				#featurettes .prev {
					background: url('/images/sprites/global.png') -40px -250px no-repeat;
					left: 0;
				}
				#featurettes .prev:hover { background-position: -40px -300px; }
				#featurettes .next {
					background: url('/images/sprites/global.png') -90px -250px no-repeat;
					right: 0;
				}
				#featurettes .next:hover { background-position: -90px -300px; }
				#featurettes .preview {
					display: block;
					/*margin: 0 -15px 18px -15px;*/
					margin-bottom: 8px;
					position: relative;
				}
					#featurettes .preview img { margin: 0; }
					#featurettes .preview .icon {
						background: url('/images/sprites/global.png') -140px -250px no-repeat;
						height: 57px;
						left: 50%;
						margin: -28px 0 0 -40px;
						position: absolute;
						top: 50%;
						width: 80px;
					}
					#featurettes .preview:hover .icon { background-position: -140px -320px; }
			#featurettes .content {
				color: #595248;
				font-size: 12px;
				line-height: 18px;
				height: 56px;
				margin-bottom: 5px;
				overflow: hidden;
				padding: 0 10px;
				text-overflow: ellipsis;
			}
			#featurettes .button {
				margin: 0 0 5px 10px;
			}
/* @end */

/* @group Updates */
#updates {
	margin-top: 12px;
	overflow: hidden;
	position: relative;
}
	#updates h3 {
		background: url('/images/sprites/icons.png') 0px 0px no-repeat;
		font-family: 'DINNeuzeitGroteskStdLightRg', Arial, Helvetica, sans-serif;
		font-size: 18px;
		font-weight: normal;
		line-height: 48px;
		margin: 12px 0px 9px 0px;
		padding-left: 54px;
	}

	#updates .mortar {
		background: #e3dfdc;
		position: relative;
		margin: 0 0 0 5px;
	}
		#updates .brick {
			background: #f5f5f5;
			position: relative;
			top: -5px;
			left: -5px;
			padding: 0 15px;
			overflow: hidden;
		}

	#updates .tabs {
		font-size: 12px;
		line-height: 18px;
		margin: 0;
		padding: 0;
		position: absolute !important;
		right: 0;
		top: 22px;
		z-index: 50;
	}
	#updates .tabs .brick { padding: 12px 15px 11px 15px; }
		#updates .tabs li {
			float: left;
			margin-left: 5px;
		}
			#updates .tabs li a {
				color: #4f4f4f;
				display: inline-block;
				border: none;
				cursor: pointer;
				display: inline-block;
				height: 24px;
				font-size: 12px;
				overflow: visible;
				padding: 0 0 0 12px;
				text-decoration: none;
				white-space: nowrap;

			}
			#updates .tabs li .active {
				background: url('/images/sprites/le-buttons.png') 0 -260px no-repeat;
				color: #fff;
			}
				#updates .tabs li a > span {
					display: block;
					height: 24px;
					line-height: 24px;
					padding: 0 12px 0 0;
				}
				#updates .tabs li .active > span { background: url('/images/sprites/le-buttons.png') 100% -260px no-repeat; }
		/*#updates .tabs li + li { margin-left: 6px; }*/

		#updates .carousel { z-index: 1000; }
			#feeds { padding: 15px 0 9px 0; }
				#feeds ul {
					width: 913px;
					height: 144px;
					overflow: hidden;
				}
				#feeds li {
					border-bottom: 1px solid #e0deda;
					display: inline-block;
					font-size: 12px;
					height: 29px;
					line-height: 29px;
					margin-bottom: 6px;
					position: relative;
					width: 911px;
					vertical-align: bottom;
				}
				#feeds li { display: none; }
				#feeds .active { display: inline-block; }
					#feeds li .tag {
						background: #e7e4e2 url('/images/sprites/icons.png') 9px -377px no-repeat;
						bottom: -1px;
						display: block;
						height: 30px;
						left: 0;
						position: absolute;
						top: 0;
						width: 32px;
					}
					#feeds li .tag.news {
						background-position: -24px -377px;
					}
					#feeds li .event {
						background: #980000;
						color: #fff;
					}
					#feeds li a,
					#feeds li span.title {
						color: #595248;
						display: block;
						margin-left: 45px;
						height: 29px;
						overflow: hidden;
						text-decoration: none;
						width: 830px;
					}
					#feeds li a.read-more {
						color: #222222;
						margin-top: -29px;
						position: absolute;
						right: 0;
						text-decoration: underline;
						width: auto;
					}
					#feeds li a.read-more:hover {
						color: #ac000d;
					}
						#feeds li a strong {
							color: #333;
							font-weight: bold;
						}
					#feeds li a:hover {
						text-decoration: underline;
					}
			#feeds .nav {
				background: #cecac4;
				height: 136px;
				padding: 0 8px;
				position: absolute;
				right: 0;
				top: 15px;
				width: 14px;
			}
				#feeds .nav .up {
					background: url('/images/sprites/global.png') -230px -250px no-repeat;
					display: block;
					height: 10px;
					position: absolute;
					top: 10px;
					text-indent: -9999px;
					width: 14px;
				}
				#feeds .nav .down {
					background: url('/images/sprites/global.png') -230px -260px no-repeat;
					bottom: 10px;
					display: block;
					height: 10px;
					position: absolute;
					text-indent: -9999px;
					width: 14px;
				}
/* @end */

/* @group Services */
#services {
	background: url('/images/backgrounds/services.gif') 0 69px no-repeat;
	color: #595248;
	font-size: 12px;
	line-height: 18px;
	margin-top: 33px;
	overflow: hidden;
}
	#services .title {
		background: url('/images/sprites/icons.png') 100% -96px no-repeat;
		color: #000;
		font-family: 'DINNeuzeitGroteskStdLightRg', Arial, Helvetica, sans-serif;
		font-size: 18px;
		font-weight: normal;
		line-height: 24px;
		margin-bottom: 18px;
		padding-left: 15px;
	}
		#services .title span { display: block; }
	#services .corporate .title {}
	#services .personal .title { background-position: 100% -192px; }
	#services .career .title { background-position: 100% -288px; }
	#services .content { padding: 30px 15px 0; }
		#services .content p { margin-bottom: 18px; }
/* @end */