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

   style.css
   * Specific styling

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





/* --------------------------------------------------------------
	
	Table of Contents
	
-------------------------------------------------------------- */

/*

	1. Imported Stylesheets
	2. Shared Styles
	3. Homepage
	4. Inner
	5. Listing
	6. Contact

*/	





/* --------------------------------------------------------------
	
	1. Imported Stylesheets
	
-------------------------------------------------------------- */

	@import "_core/reset.css"; /* browser resets */
	@import "_core/typography.css"; /* general styling */
	@import "_core/forms.css"; /* form styling */
	@import "_core/fonts.css"; /* included fonts */
	@import "_core/variables.css"; /* universal variables */
	
	@import "_support/flexslider.css"; /* flexslider */





/* --------------------------------------------------------------
	
	2. Shared Styles
	
-------------------------------------------------------------- */
  
	/*** WRAPPER ***/
	#wrapper {
		margin: 0 auto;
		width: 960px; }
		
		/*** NAVIGATION ***/
		nav {
			position: relative;
			float: left;
			width: 960px;
			height: 110px;
			display: block; }
			
			/*** LOGO ***/
			nav #logo {
				position: absolute;
				top: 0;
				left: 0;
				width: 230px;
				height: 110px;
				text-indent: -999999px;
				display: block;
				background: url(../images/logo.jpg); }
				
			/*** NAV ***/
			nav ul {
				position: absolute;
				top: 34px;
				left: 230px;
				margin: 0;
				padding: 0;
				list-style: none;
				height: 40px; }
				
				nav ul li {
					float: left;
					height: 14px;
					padding: 13px 0;
					font-family: 'EurostileLTStdDemi';
					font-size: 14px;
					color: #fff;
					text-transform: uppercase;
					border-right: 1px solid #e5e5e5; }
					
					nav ul li.last { border: none; }
					
					nav ul li a {
						padding: 0 30px;
						color: #000;
						text-decoration: none; }
						
						nav ul li a:hover { color: #eb8805; }
						
			/*** HEADING ***/
			h3#heading {
				float: left;
				width: 950px;
				padding: 45px 0 45px 10px;
				font-size: 31px;
				text-transform: uppercase; }
				
			/*** CONTENT WRAPPER ***/
			#contentWrapper {
				float: left;
				padding: 0 10px;
				width: 940px; }
				
				/*** SIDEBAR ***/
				#contentWrapper aside {
					float: left;
					width: 220px; }
					
				/*** CONTENT ***/
				#contentWrapper #content {
					float: right;
					width: 700px; }
					
	/*** FOOTER WRAPPER ***/
	#footerWrapper {
		float: left;
		width: 100%;
		height: 453px;
		display: block;
		background: url(../images/bg_footer.jpg) repeat-x; }
		
		#footer {
			position: relative;
			margin: 0 auto;
			width: 960px;
			height: 453px;
			color: #aaa;
			display: block;
			background: url(../images/bg_footer_trees.jpg) no-repeat; }
			
			#footer #link-top {
				position: absolute;
				top: 105px;
				right: 0; }
			
			/* robb */
			#footer .developed {
				position: absolute;
				bottom: 65px;
				left: 770px;
				font-size: 10px;
				text-transform: uppercase;
				color: #353535; }
			
			#footer h2.robb { 
				position: absolute;
				bottom: 55px;
				right: 10px;
				width: 180px;
				height: 30px;
				display: block;
				margin: 0;
				padding: 0; }
			
				#footer h2.robb a {
					width: 180px;
					height: 30px;
					display: block;
					background: url(../images/robbclarke.jpg);
					text-indent: -999999px; }
			
			/* columns */	
			#footer .col {
				position: absolute;
				top: 170px; }
				
				#footer .col h2 {
					font-size: 28px;
					color: #fff;
					margin: 0 0 20px 0; }
				
				/* left */
				#footer .col.left { width: 220px; }
				
					#footer .col.left h5 {
						font-size: 14px;
						color: #f78f1e;
						text-transform: none; }
						
					#footer .col.left p { margin: 0 0 30px 0; }
				
				/* centre */
				#footer .col.centre {
					left: 230px;
					width: 260px; }
					
					#footer .col.centre strong { font-weight: normal; }
				
				/* right */
				#footer .col.right {
					left: 520px;
					width: 300px; }
					
					#footer .col.right ul {
						float: left; 
						width: 300px;
						margin: 0;
						padding: 0;
						list-style: none; }
						
						#footer .col.right ul li {
							float: left;
							width: 150px;
							margin: 0 0 10px 0;
							font-size: 14px; }
							
							#footer .col.right ul li a:hover {
								color: #f78f1e;
								border-bottom: 1px dotted #f78f1e; }
								
				/* last */
				#footer .col.last {
					right: 0px;
					width: 160px; }





/* --------------------------------------------------------------
	
	3. Homepage
	
-------------------------------------------------------------- */

			/*** SLIDESHOW ***/
			.flex-container {
				float: left;
				width: 960px; }
				
				.flex-container img {
					border-top-left-radius: 10px;
					-moz-top-left-border-radius: 10px;
					-webkit-top-left-border-radius: 10px;
					border-top-right-radius: 10px;
					-moz-top-right-border-radius: 10px;
					-webkit-top-right-border-radius: 10px;
					border-bottom-left-radius: 10px;
					-moz-bottom-left-border-radius: 10px;
					-webkit-bottom-left-border-radius: 10px; }
				
				.description {
					position: absolute;
					bottom: 0;
					right: 0;
					margin: 0;
					padding: 0 35px 0 0;
					width: 635px;
					height: 39px;
					line-height: 39px;
					font-family: 'EurostileLTStdDemi';
					font-size: 18px;
					color: #fff;
					text-align: right;
					text-transform: uppercase;
					display: block;
					background: url(../icons/recycling.png) 642px 11px no-repeat #000; }
					
				.flex-direction-nav li a {
					width: 30px; 
					height: 39px; 
					margin: 0;
					display: block; 
					position: absolute; 
					top: 328px; 
					cursor: pointer;
					text-indent: -9999px; }
					
				.flex-direction-nav li .next {
					left: 280px;
					background: url(../images/control_right.jpg); }
					
				.flex-direction-nav li .prev {
					left: 250px;
					background: url(../images/control_left.jpg); }
		
			/*** CONTENTWRAPPER HOMEPAGE ***/			
			#contentWrapper.homepage { margin-top: 52px; }
					
					/*** WHAT CAN I RECYCLE ***/
					#contentWrapper aside #what-can-i-recycle {
						float: left;
						width: 220px;
						height: 58px;
						margin-bottom: 16px;
						display: block;
						background: url(../images/btn_whatcanirecycle.jpg);
						text-indent: -999999px; }
					
					/*** HEADING STYLES ***/
					#contentWrapper.homepage h2 a { color: #000; }
						
					/*** TWITTER ***/
					#contentWrapper aside h2.twitter { 
						float: left;
						background: url(../icons/icon_twitter.jpg) center right no-repeat; }
					
						.tweet {
							float: left;
							width: 220px; }
							
							.tweet .tweet_list {
								float: left;
								width: 220px;
								padding: 0;
								list-style: none; }
								
								.tweet .tweet_list li {
									float: left;
									position: relative;
									width: 220px;
									margin: 0 0 15px 0; }
									
									.tweet .tweet_list li .tweet_avatar {
										position: absolute;
										top: 0;
										left: 0;
										width: 30px;
										height: 30px; }
										
									.tweet .tweet_list li .tweet_time, .tweet .tweet_list li .tweet_text {
										float: left;
										width: 180px;
										padding: 0 0 0 40px; }
									
									.tweet .tweet_list li .tweet_join { display: none; }
									
					/*** BANNER ***/
					h3.mantraBanner {
						float: left;
						width: 700px;
						height: 64px;
						display: block;
						background: url(../images/honesty-integrity-fairness-respect.jpg);
						text-indent: -999999px; }
						
					/*** MANTRA ***/
					p.mantra {
						float: left;
						margin: 0 0 30px 0;
						padding-left: 80px;
						width: 620px;
						font-size: 13px; }
						
					/*** HOMEPAGE LISTING ***/
					ul.homepage-listing {
						position: relative;
						float: left;
						width: 700px;
						margin: 0;
						padding: 0;
						list-style: none; }
						
						ul.homepage-listing .rss {
							position: absolute;
							top: -40px;
							left: 165px;
							width: 23px;
							height: 23px;
							display: block;
							background: url(../icons/rss.png);
							text-indent: -999999px; }
						
						ul.homepage-listing li {
							float: left;
							position: relative;
							width: 535px;
							padding: 0 0 0 165px; }
							
							ul.homepage-listing li .thumb {
								position: absolute;
								top: 0;
								left: 0;
								border-radius: 10px;
								-moz-border-radius: 10px;
								-webkit-border-radius: 10px; }
								
								ul.homepage-listing li .thumb img {
									border-radius: 10px;
									-moz-border-radius: 10px;
									-webkit-border-radius: 10px; }
							
							/* date */
							ul.homepage-listing li .date {
								position: absolute;
								top: 0;
								left: 92px;
								color: #f78f1e; }
								
								ul.homepage-listing li .date .month {
									position: absolute;
									top: 0;
									left: 0;
									font-size: 23px;
									font-family: 'EurostileLTStdDemi';
									text-transform: uppercase; }
									
								ul.homepage-listing li .date .day {
									position: absolute;
									top: 17px;
									left: 0;
									font-size: 34px;
									font-family: 'EurostileLTStdBold'; }

			/*** AFFILIATIONS ***/
			#affiliations {
				float: left;
				margin: 20px 0;
				width: 100%; }
				
				#affiliations #affiliates {
					float: left;
					position: relative;
					width: 960px;
					height: 75px;
					display: block;
					background: url(../images/affiliates.jpg); }
					
					#affiliations #affiliates a {
						position: absolute;
						top: 0;
						height: 75px;
						display: block;
						text-indent: -999999px; }
					
					#affiliations #affiliates .isri {
						left: 0;
						width: 265px; }
					
					#affiliations #affiliates .mhsa {
						left: 300px;
						width: 124px; }
					
					#affiliations #affiliates .cari {
						left: 463px;
						width: 122px; }





/* --------------------------------------------------------------
	
	4. Inner
	
-------------------------------------------------------------- */

				/*** SIDEBAR IMAGES ***/
				#contentWrapper aside { margin-bottom: 20px; }
				
				#contentWrapper aside img {
					border-radius: 10px;
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px; }
				
				#contentWrapper aside .top { margin-bottom: 20px; }
				
				#contentWrapper aside #nav_sub {
					float: left;
					width: 100%;
					margin: 0 0 20px 0;
					padding: 0;
					list-style: none; }
					
					#contentWrapper aside #nav_sub li {
						float: left;
						width: 100%;
						padding: 0 0 10px 0;
						margin: 0 0 10px 0;
						color: #8f8f8f;
						border-bottom: 1px solid #eee; }
						
						#contentWrapper aside #nav_sub li.overview {
							float: left;
							width: 100%;
							margin: 0 0 3px 0;
							font-weight: normal; 
							color: #000;
							font-size: 30px;
							font-family: 'EurostileLTStdDemi';
							text-transform: uppercase;
							border: none; }
							
							#contentWrapper aside #nav_sub li.overview a { color: #000; }





/* --------------------------------------------------------------
	
	5. Listing
	
-------------------------------------------------------------- */

	/*** CONTENT WRAPPER ***/
	#contentWrapper.listing {}
	
		#contentWrapper.listing #content { float: left; }
		
		#contentWrapper.listing aside { float: right; }

		.banner {
			margin-bottom: 15px;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px; }

		/*** LISTING ***/
		ul.listing {
			float: left;
			width: 700px;
			margin: 0;
			padding: 0;
			list-style: none; }
			
			ul.listing li {
				float: left;
				position: relative;
				width: 535px;
				padding: 0 0 0 165px; }
				
				ul.listing li .thumb {
					position: absolute;
					top: 0;
					left: 0;
					border-radius: 10px;
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px; }
					
					ul.listing li .thumb img {
						border-radius: 10px;
						-moz-border-radius: 10px;
						-webkit-border-radius: 10px; }
				
				/* date */
				ul.listing li .date {
					position: absolute;
					top: 0;
					left: 92px;
					color: #f78f1e; }
					
					ul.listing li .date .month {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23px;
						font-family: 'EurostileLTStdDemi';
						text-transform: uppercase; }
						
					ul.listing li .date .day {
						position: absolute;
						top: 17px;
						left: 0;
						font-size: 34px;
						font-family: 'EurostileLTStdBold'; }
						
		/*** PAGINATION ***/
		ul.pagination {
			float: left;
			margin: 20px 0;
			padding: 0;
			list-style: none; }
			
			ul.pagination > li { 
				float: left;
				width: inherit;
				margin: 0 10px 0 0;
				padding: 0;
				background: #f78f1e;
				color: #fff;
				font-family: 'EurostileLTStdDemi';
				font-size: 12px;
				text-transform: uppercase;
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-webkit-transition: all .5s ease-in-out;
				-moz-transition: all .5s ease-in-out;
				-o-transition: all .5s ease-in-out;
				-ms-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out; }
				
				ul.pagination > li:hover { background: #d8760c; }
				
				ul.pagination > li a {
					float: left;
					padding: 10px 15px;
					color: #fff; }
						
		/*** LISTING SIDEBAR ***/
		ul.listing_sidebar {
			float: left;
			width: 100%;
			margin: 0;
			padding: 0;
			list-style: none; }
			
			ul.listing_sidebar li {
				float: left;
				width: 100%;
				padding: 0 0 10px 0;
				margin: 0 0 10px 0;
				color: #8f8f8f;
				border-bottom: 1px solid #eee; }
				
				ul.listing_sidebar li.last { border: none; }
				
				ul.listing_sidebar li span {
					font-size: 14px;
					font-weight: bold; }
					
		ul.sharing {
			float: left;
			width: 100%;
			margin: 0;
			padding: 0;
			list-style: none; }
			
			ul.sharing li {
				float: left;
				width: 100%;
				padding: 5px 0; }




/* --------------------------------------------------------------
	
	6. Contact
	
-------------------------------------------------------------- */

	/* google map */
	#googleMap {
		float: left;
		width: 220px;
		height: 500px;
		display: block; }