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

/* Created: 21 Sep 2009 & 11am
 * Author: Joshua Deidun <www.ivt.com.au>
*/

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


/*	1. COLORS
 *	----------------------------------------------
 *	red			=		#b92429
 *	grey		=		#666
 * 	drk grey	=		#444
*/


/*	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 { 
		margin: 0; 
		padding: 0; 
		border: 0; 
		outline: 0; 
		font-size: inherit; 
		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: #b92429;
		outline: none;
		}
		
	a:hover {
		text-decoration: none;
		}			

		
/*	4. TYPOGRAPHY
 *	----------------------------------------------
*/


	h1, h2, h3, h4, h5, h6 {
		color: #444;
		font-weight: bold;
		}
		
	h1 {
		font-size: 3.5em; 
		line-height: 1.2;
		}
		
	h2 {
		font-size: 1.2em;
		margin: .2em 0 .5em;
		}
		
	h3 {
		font-size: 1.1em;
		margin: 0 .3em .5em;
		}			
		
	label {
		font-size: 1.1em;
		}
		
	p { margin: 0 0 1em; }					
		

/*	5. STRUCTURE
 *	----------------------------------------------
*/	


	body {
		margin: 0 0 20px;
		font: 62.5%/1.6 "Trebuchet MS", "Lucida Grande", Arial, Helvetica;
		color: #666;
		background: #ececec url(../images/bg.gif) repeat-x;
		}
		
	#container {
		width: 1010px;
		margin: 0 auto;
		padding: 0;
		font-size: 1.1em;
		background: url(../images/bg-container.png) no-repeat ;
		}
		
		
	#inner {
		width: 980px;
		margin: 0 15px;
		padding: 0;
		background: #fff;		
		}	
	
	#header {
		width: 980px;
		position: relative;
		height: 112px;
		padding: 15px 0;
		z-index: 99;
		}	
	
	#banner {
		width: 980px;
		height: 291px;
		}
	
	#content {
		width: 940px;
		padding: 0 20px 10px 20px;
		background: url(../images/bg-content.gif) 20px 0 no-repeat; 
		font-size: 1.1em;		
		}								
		
	#footer {
		margin: 0;
		padding: 0 0 20px 0;
		background: url(../images/bg-footer.png) bottom no-repeat;
		display: inline-block;
		float: left;	
		}
		
		/* << ----------- HEADER --------------- */						
		
		#header h1 {
			float: left;
			margin: 10px 0 0 27px;
			display: inline;
			}
			
		#header h1 a {
			color: #b92429;
			}	
		
		#header h1 span {
			position: absolute;
			left: -999em;
			}
			
		#header a {
			color: #999;
			}
			
		#header p#cart {
			float: right;
			color: #000;
			margin: 2px 30px;
			display: inline;
			}
			
		#header p#cart a {
			padding: 10px 0 0 23px;
			background: url(../images/bg-cart.gif) 0 10px no-repeat;
			}		
			
		#header ul#extras {
			float: right;
			padding: 0;
			margin: 10px 15px 0 0;
			display: inline;
			clear: right;
			}
			
		#header ul#extras li {
			float: left;
			padding: 5px 4px 2px 9px;
			display: inline;
			}	
			
		#header ul#extras li { 
			background: url(../images/divider.gif) 0 10px no-repeat;
			}
					
		#header ul#extras li.start { 
			background: none;
			}	
			
		#header ul#extras li#search {
			width: 246px; background: url(../images/bg-search.gif) no-repeat; 
			height: 27px;
			margin: 0 15px 0 8px;
			padding: 0;
			}
			
		#header ul#extras li#search input {
			width: 210px;
			background: 0;
			margin-left: 28px;
			padding: 8px 5px 5px 0;
			border: 0;
			font-size: 1.1em;
			font-weight: normal;
			line-height: 1;
			}				
			
		/* << ----------- NAVIGATION ----------- */			
		
		ul#nav { 
			position: absolute;
			bottom: 0;
			_bottom: 3px;
			^bottom: 3px;
			right: 20px;
			}
		
		ul#nav li {
			position: relative; 
			z-index: 99;
			float: left;
			}
		
		ul#nav li a { 
			float: left;
			display: block;
			height: 40px;
			background: url(../images/bg-nav2.gif) no-repeat;
			text-indent: -999em;
			cursor: pointer;
			margin: 0 0 3px;
			}
			
			
			/* << --------- NAVIGATION HOVER STATE --------- */
			
			ul#nav li a#menu1:hover,
			ul#nav li:hover a#menu1,
			ul#nav li.sfhover a#menu1 { 
				width: 134px; 
				background-position: 0 -43px;
				}
				
			ul#nav li a#menu2:hover,
			ul#nav li:hover a#menu2,
			ul#nav li.sfhover a#menu2 { 
				width: 110px; 
				background-position: -134px -43px; 
				}
				
			ul#nav li a#menu3:hover,
			ul#nav li:hover a#menu3,
			ul#nav li.sfhover a#menu3 { 
				width: 134px; 
				background-position: -244px -43px; 
				}
				
			ul#nav li a#menu4:hover,
			ul#nav li:hover a#menu4,
			ul#nav li.sfhover a#menu4 { 
				width: 118px;
				background-position: -378px -43px; 
				}
				
			ul#nav li a#menu5:hover,
			ul#nav li:hover a#menu5,
			ul#nav li.sfhover a#menu5 { 
				width: 124px;
				background-position: -496px -43px; 
				}
		
			/* << --------- NAVIGATION OFF STATE --------- */	
			
			ul#nav li a#menu1 { 
				width: 134px; 
				background-position: 0 0; 
				}
				
			ul#nav li a#menu2 { 
				width: 110px; 
				background-position: -134px 0; 
				}
				
			ul#nav li a#menu3 { 
				width: 134px; 
				background-position: -244px 0; 
				}
				
			ul#nav li a#menu4 { 
				width: 118px; 
				background-position: -378px 0; 
				}
				
			ul#nav li a#menu5 { 
				width: 124px; 
				background-position: -496px 0; 
				}	
				
			/* << --------- NAVIGATION DROPDOWN --------- */
			
		 	#header ul.sf-menu ul { 
				position: absolute; 
				left: -999em; 
				width: 195px; 
				height: auto; 
				margin: 0; 
				padding: 3px 0 5px; 
				z-index: 1; 
				background: #ececec url(../images/bg-dropdown2.png) 0 0 no-repeat; 
				-moz-border-radius-bottomleft: 5px; 
				-moz-border-radius-bottomright: 5px; 
				-webkit-border-bottom-left-radius: 5px; 
				-webkit-border-bottom-right-radius: 5px; 
				border-bottom-left-radius: 5px; 
				border-bottom-right-radius: 5px; 
				}
			
			#header ul.sf-menu ul ul { 
				-moz-border-radius-topright: 5px; 
				-webkit-border-top-right-radius: 5px; 
				border-top-right-radius: 5px; 
				padding: 5px 0;
				margin: 0;
				background: #ececec url(../images/bg-dropdown2.png) 0 0 no-repeat; 
				}
				
			#header ul.sf-menu li:hover a#menu2, #header ul.sf-menu li.sfHover a#menu2 { 
				background-position: -134px -43px; 
				}		
				
			#header ul.sf-menu li:hover ul, #header ul.sf-menu li.hover ul { 
				top: 40px; 
				left: 0; 
				z-index: 99; 
				}
			#header ul.sf-menu li.contactus:hover ul, #header ul.sf-menu li.contactus.hover ul { 
				top: 40px; 
				left: -71px; 
				z-index: 99; 
				}
				
			#header ul#nav li:hover li ul, #header ul.sf-menu li.hover li ul { 
				top: -999em; 
				}
				
			#header ul#nav li li:hover ul, #header ul.sf-menu li li.hover ul { 
				top: 0; left: 195px; 
				}
			
			#header ul.sf-menu ul ul ul, ul.sf-menu ul ul ul li { 
				display: none; 
				background: none; 
				}
			
			#header ul.sf-menu li li { 
				height: auto; 
				margin: 0; 
				}
				
			#header ul.sf-menu li li a { 
				float: left; 
				height: auto; 
				width: 155px; 
				padding: 5px 20px; 
				color: #444; 
				font-size: 1.1em; 
				font-weight: bold;  
				background: none; 
				text-decoration: none; 
				text-indent: 0; 
				border: 0; 
				}
					

			#header ul.sf-menu li li a:hover { 
				color: #fff; 
				background: #b92429; 
				}
			#header ul.sf-menu li.products li a:hover { 
				color: #fff; 
				background: #b92429 url(../images/icon-arrow-on.png) 178px 12px no-repeat; 
				}
				
			#header ul.sf-menu li li li a:hover { 
				color: #fff; 
				background: #b92429; 
				}
			
			#header ul.sf-menu li li a span.sf-sub-indicator { 
				display: block; 
				position: absolute; 
				top: 1em;  
				right: 1em; 
				width: 5px; 
				height: 9px; 
				text-indent: -999em; 
				overflow: hidden; 
				background: url(../images/icon-arrow.png) no-repeat; 
				}
			#header ul.sf-menu li.products li li a:hover {
				background: #b92429 !important;
				}
			
			#header ul.sf-menu li li li a span.sf-sub-indicator { 
				background: none; 
				}
				
			#header ul.sf-menu li li a:hover span.sf-sub-indicator { 
				display: none; 
				}
				
			
	
				
						
	/* << ------------- BANNER ------------- */	
	
	#banner .fadeArea {
		width: 940px;
		height: 291px;
		background: #fff;
		margin: 0 20px;
		overflow: hidden;
		}
			
	/* << ------------- CONTENT ------------ */			
	
	#content .col {
		float: left;
		padding: 0 20px 0;
		margin: 0;
		}
	
	#content .welcome, #content .buttons {
		width: 190px;
		}
		
	#content .whatwedo, #content .feature_product  {
		width: 200px;
		}	
		
	#content a {
		text-decoration: none;
		}
	
	#content a:hover {
		text-decoration: underline;
		}
		
	#content h3 a:hover {
		font-size: 1em;
		}			
			
	#content ul {
		margin: 0 0 0 15px;
		padding: 0;
		}
		
	#content ul li {
		padding: 5px 0 5px 5px;
		list-style: disc;
		border-bottom: 1px solid #d9d9d9;
		}
		
	#content ul > li:last-child {
		border: 0;
		}
		
	#content .feature_product img {
		border: 4px solid #d9d9d9;
		margin: 6px 0;
		}
	
	#content .feature_product p {
		margin: 0 .3em;
		}
	
	#content .col ul#buttons {
		font-size: .95em;
		}	
		
	#content .whatwedo h2 {
		margin-bottom: .3em;
		}	
	
	#content .col ul#buttons {
		margin: 5px 0 7px;
		}
	#content .col ul#buttons li  {
		background: 0;
		margin: 0;
		display: inline-block;
		clear: both;
		vertical-align: middle;
		width: 190px;
		list-style: none;
		}
		
	#content .col ul#buttons li img  {
		float: left;
		margin: 5px 10px 0 0;
		padding: 0;
		vertical-align: middle;
		}	
	
	#content .col ul#buttons li p  {
		margin: 0;
		}
		
	#content .col ul#buttons h2 {
		margin: 0 0 .6em;
		}
		
	#content .col ul#buttons li#events {
		height: auto;
		padding-bottom: 10px; 
		}
		
	#content .col ul#buttons li#events img {
		border: 4px solid #d9d9d9;
		}
										
		
		/* HIDDEN ELEMENTS */
		
		.path, .addthis {
			display: none;
			}			
			
		/* << ----------- FOOTER ---------------- */
		
		#footer .base {
			width: 920px;
			margin: 0 15px;
			padding: 23px 30px 18px;
			background: #fff;
			border-top: 1px solid #d9d9d9;
			display: inline;
			float: left;
			}
			
		#footer p#states {
			float: right;
			font-size: 1.2em;
			margin: .9em 0 0;
			}
		
		#footer p#states a {
			color: #b92429;
			text-decoration: none;
			margin: 0 3px;
			}
			
		#footer p#states a:hover {
			text-decoration: underline;
			}
		
		#footer p {
			margin: 2px 0 .5em;
			padding: 0;
			}
		
		#footer ul {
			margin: 0;
			padding: 0;
			display: inline-block;
			float: left;
			}					
		
		#footer ul li {
			float: left;
			padding: 0 4px 0 9px;
			background: url(../images/divider.gif) 0 7px no-repeat;
			}
			
		#footer ul li.start {
			background: none;
			padding: 0 4px 0 0;
			}
			
		#footer a {
			color: #999;
			}