/**********************************************
 ******************* MASTER *******************
**********************************************/

/* Created: 15 Oct 2009 & 4pm
 * Author: Joshua Deidun <www.ivt.com.au>
*/

/*	TOC
 *	1. Colors
 *	2. Reset
 *	3. Links
 *	4. Typography
 *	5. Structure
*/


/*	1. COLORS
 *	----------------------------------------------
 *	light green	=	#96bd0d
 *	dark green	=	#006622
 *	yellow 		=	#ffec00
 *	orange 		=	#E85C0F
*/


/*	2. RESET - do not remove or modify
 *	----------------------------------------------
*/
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, button { 
		margin: 0; 
		padding: 0; 
		border: 0; 
		outline: 0; 
		font-size: 100%; 
		font-family: inherit; 
		list-style: none; 
		}	
 	
	table { 
		border-collapse: collapse; 
		border-spacing: 0; 
		}

	ol, ul { 
		list-style: none; 
		}

	q:before, q:after, blockquote:before, blockquote:after { 
		content: ""; 
		}
		
	:focus {
		outline: 0;
		}
		
	legend {
		display: none;
		}
		
	hr {
		height: 1px;
		border: 1px solid #CCC;
		}
		
	/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
	.clearfix:after {
		clear: both;
		content: ' ';
		display: block;
		font-size: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		}

	.clearfix {
		display: inline-block;
		}

	* html .clearfix {
		height: 1%;
		}

	.clearfix {
		display: block;
		}
		
		
/*	3. LINKS
 *	----------------------------------------------
*/

	a:link, a:active, a:visited, a:hover {
		color: #006622;
		outline: none;
		text-decoration: none;
		}
		
	a:hover {
		text-decoration: none;
		}
		
		
/*	4. TYPOGRAPHY
 *	----------------------------------------------
*/

	h1, h2, h3, h4, h5, h6 {
		color: #006622;
		}
		
	h1 {
		font-size: 3em;
		line-height: 1;
		}
		
	h2 {
		line-height: 1;
		font-size: 2.3em;
		text-align: center;
		font-weight: normal;
		text-transform: uppercase;
		font-style: italic;
		color: #96bd0d;
		margin: 0;
		}	
		
	h3 {
		position: relative;
		color: #E85C0F;
		text-transform: uppercase;
		font-size: 1.2em;
		padding: 6px 0 6px 12px; 
		background: url(../images/arrow.gif) left no-repeat;
		z-index: 99;
		margin: .1em 0 0;
		line-height: 1;
		}	
		
		
		
/*	5. STRUCTURE
 *	----------------------------------------------
*/	

	body {
		font: 62.5%/1.6 Arial Narrow, Arial, Helvetica, "Trebuchet MS", "Lucida Grande";
		color: #000;
		background: #e5efc2 url(../images/bg-body.gif) repeat-x; 
		}
		
	#container {
		width: 960px;
		margin: 0 auto;
		padding: 0;
		font-size: 1.1em;
		}
		
	#header {
		position: relative;
		height: 100px;
		width: 960px;
		padding: 10px 0 0;
		z-index: 99;
		}
		
	#phrase {
		position: relative;
		width: 960px;
		z-index: 1;
		}	
		
	#content {
		position: relative;
		width: 960px;
		height: 740px;
		background: url(../images/bg-content.jpg) no-repeat;
		border-bottom: 10px solid #006622;
		font-size: 1.1em;
		}
	
		#underground {
			margin: 47px 47px 0;
			}
			
		#banner {
			position: relative;
			float: left;
			height: 383px;
			width: 866px;
			margin: 0 0 20px;
			}	
			
		#showcase {
			position: relative;
			float: left;
			width: 412px;
			height: 144px;
			padding: 4px 10px;
			background: #fff;
			border: 2px solid #88ac0a;
			border-radius: 8px;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			z-index: 99;
			}
			
		#news, #brands {
			position: relative;
			float: left;	
			width: 176px;
			height: 92px;
			margin: 0 0 0 14px;
			padding: 4px 10px;
			z-index: 1;
			background: #fff;
			border: 2px solid #88ac0a;
			border-radius: 8px;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			}
			
		#footer {
			position: relative;
			font-size: 1em;
			color: #000;
			padding: 15px 15px 20px 15px;
			font-family: Arial, Helvetica, "Trebuchet MS", "Lucida Grande";
			}			
		
		
		/* << ----------- HEADER --------------- */						
		
		#header h1 {
			float: left;
			}
		
		#header h1 span {
			position: absolute;
			left: -999em;
			}
			
		#header ul#search {
			float: right;
			}
			
			#header ul#search form {
				width: 245px;
				height: 27px;
				margin: 12px 0 0;
				}
				
			#header ul#search form input {
				float: left;
				background: url(../images/bg-search.gif) no-repeat;
				width: 193px;
				height: 27px;
				border: 0;
				margin: 0;
				padding: 5px 7px 0 !important;
				color: #006622;
				font-size: 14px;
				vertical-align: text-bottom;
				line-height: 1;
				}
				
			#header ul#search form button {
				float: right;
				width: 35px;	
				height: 27px;
				background: url(../images/btn-go.gif) no-repeat;;
				border: 0;
				text-transform: uppercase;
				font-weight: bold;
				cursor: pointer;
				font-size: 12px;
				text-align: center;
				margin: 0;
				padding: 0 0 0 4px !important;
				color: #006622;
				overflow: hidden;
				text-indent: -999em;
				}		
			
		#header ul#nav {
			position: absolute;
			top: 73px;
			right: 0;
			margin: 0;
			height: 37px;
			width: 600px;
			display: inline-block;
			z-index: 99;
			}
			
			#header ul#nav li, #footer ul#extra li {
				float: left;
				display: block;
				width: 97px;
				}
				
			#header ul#nav li {
				float: left;
				display: inline-block;
				width: 97px;
				margin: 0 1.5px;	
				}	
			
			#header ul#nav li a, #footer ul#extra li a {
				font-size: 13.1px;
				float: left;
				width: 97px;
				height: auto;
				text-transform: uppercase;
				padding: 5px 0 10px 0; 
				font-weight: bold;
				text-align: center;
				line-height: 1.6;
				font-family: Arial Narrow, Arial, Helvetica, "Trebuchet MS", "Lucida Grande";
				}
			
			#header ul#nav li a {
				background: url(../images/bg-nav-btn.gif) no-repeat;
				}
				
			#footer ul#extra li a {
				background: url(../images/bg-extra-btn.gif) no-repeat;
				color: #fff;
				}		
				
			#header ul#nav li a#menu5 {
				margin-right: 0;
				}		
				
			#header ul#nav li a:hover, #header ul#nav li a.menu1 {
				height: 37px;
				padding-bottom: 0;
				background: url(../images/bg-nav-btn-on.gif) no-repeat;
				}
				
			/* dropdown */
		
			#header ul.sf-menu li { position: relative; z-index: 99; }
			#header ul.sf-menu ul { position: absolute; top: -999em; width: 120px; }
			#header ul.sf-menu li li:hover ul, #header ul.sf-menu li li.sfHover ul { top: 0; left: 120px; }		
			
			#header ul.sf-menu ul li { float: left; width: 100%; height: auto; }							
			#header ul.sf-menu li:hover { visibility: inherit; }							
			#header ul.sf-menu li:hover ul, #header ul.sf-menu li.sfHover ul { height: auto; padding: 0; top: 37px; left: 0; z-index: 99; }										
			#header ul.sf-menu li li a { padding: 0; height: auto; text-indent: 0; text-decoration: none; background-image: none; border: 1px solid #96bd0d; border-top: none; }
			
			#header ul#nav li li a { background: #e5efc2; font-size: 1.2em; text-transform: none; text-align: left; padding: 4px 0 0 15px; height: 25px; }
			#header ul#nav li li a:hover { background: #FFF8A6;  padding: 4px 0 0 15px; height: 25px; cursor: pointer; }
							
			#header ul#nav li li li { display: none; }
			#header ul.sf-menu span.sf-sub-indicator { display: none; }
			
			#header ul#nav li:hover a#products:hover, #header ul#nav li.sfHover a#products { 
					background: url(../images/bg-nav-btn-on.gif) no-repeat; 
					}				
			
		/* << ------------- CONTENT ------------ */
		
		#content #phrase h2 {
			position: relative;
			width: 960px;
			padding: 50px 0 20px 0;
			z-index: 99;
			}
			
			/* << -------------- BANNER ------------- */	
			
			#banner div.corners {
				position: absolute;
				top: 0;
				right: 0;
				width: 866px;
				height: 383px;
				background: url(../images/bg-banner-corners2.png) no-repeat;
				z-index: 99;
				}
				
			#banner ul#slideArea {
				float: left;
				position: relative;
				top: 3px;
				left: 3px;
				padding: 0;
				width: 859px;
				height: 277px;
				overflow: hidden;
				z-index: 1;
				display: inline-block;
				}
				
			#banner ul#slideArea li {
				width: 859px;
				height: 277px;
				overflow: hidden;
				display: inline-block;
				}	
				
			#banner ul#buttons {
				position: absolute;
				bottom: 1px;
				width: 862px;
				height: 135px;
				margin: 0;
				padding: 0;
				z-index: 99;
				}
				
			#banner ul#buttons li {
				height: 135px;
				display: inline-block;
				float: left;
				}	
				
			#banner ul#buttons li a {
				float: left;
				width: 141px;
				height: 135px;
				text-align: center;
				margin: 0 37px;
				padding: 0;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 1.25em;
				cursor: pointer;
				}
				
			#banner ul#buttons li a:hover {
				background: #ffec00;	
				}
				
			#mainNav {
				float: left; 
				height: 105px;
				background: #fff;
				width: 863px;
				}
			
			#mainNav ul#buttons li a {
				text-indent: -999em;		
				}	
				
			#banner ul#buttons li#blank a {
				float: none;
				width: 0;
				height: 0;
				margin: 0;
				}
						
			#mainNav ul#buttons li#gardening a {
				background: url(../images/bg-gardening-tools.png) bottom no-repeat;
				}
				
			#mainNav ul#buttons li#watering a {
				background: url(../images/bg-watering.png) bottom no-repeat;
				}
				
			#mainNav ul#buttons li#landscaping a {
				background: url(../images/bg-landscaping.png) bottom no-repeat;
				}
			
			#mainNav ul#buttons li#screens a {
				background: url(../images/bg-insect-screens.png) bottom no-repeat;
				}						
			
			#mainNav ul#buttons li#gardening a:hover,
			#mainNav ul#buttons li#gardening a.activeSlide  {
				background: url(../images/btn-gardening-tools.png) bottom no-repeat;
				}	
				
			#mainNav ul#buttons li#watering a:hover,
			#mainNav ul#buttons li#watering a.activeSlide  {
				background: url(../images/btn-watering.png) bottom no-repeat;
				}
				
			#mainNav ul#buttons li#landscaping a:hover,
			#mainNav ul#buttons li#landscaping a.activeSlide  {
				background: url(../images/btn-landscaping.png) bottom no-repeat;
				}
				
			#mainNav ul#buttons li#screens a:hover,
			#mainNav ul#buttons li#screens a.activeSlide  {
				background: url(../images/btn-insect-screens.png) bottom no-repeat;
				}
							
				
			#footer ul#extra { 
				position: absolute;
				top: -37px;
				right: 45px;
				height: 27px;	
				z-index: 99;
				}		
			
			#showcase .prevProduct, #brands .prev {
				position: absolute;
				top: 10px;
				right: 30px;
				background: transparent url(../images/btn-left-arrow.gif) 0 0 no-repeat;
				height: 15px;
				width: 15px;
				z-index: 99;
				cursor: pointer;
				text-indent: -999em;
				}
				
			#showcase .nextProduct, #brands .next {
				position: absolute;
				top: 10px;
				right: 12px;
				background: transparent url(../images/btn-right-arrow.gif) 0 0 no-repeat;
				height: 15px;
				width: 15px;
				z-index: 99;
				cursor: pointer;
				text-indent: -999em;
				}
				
			div.scrollerProducts {
			 	width: 412px;
				height: 112px;
				overflow: hidden;
				}
				
			div.scrollBrands {
				width: 170px;
				height: 50px;
				overflow: hidden;
				}		
				
			#news p {
				font-size: 14px;
				line-height: 1.2em;
				margin: 0;
				padding: 0;
				}
				
			#news a {
				float: right;
				margin: 5px 0 0;
				}
				
			#showcase h3 {
				padding: 5px 0 0 12px;
				}
	
			#showcase .default li {
				width: 412px;
				height: 112px;
				overflow: hidden;
				}
				
		/* << ------------ FOOTER ------------ */
		
		
		#footer p {
			float: left;
			}
		
		#footer p#credits {
			float: right;
			}