/*

[ CSS Document ]

	Style Sheet Name: (Site Name)_style.css
	Style Sheet URL: (The Website Homepage)
	Author: Ken Davis - Jimmyweb Web Design
	Author URL: www.jimmyweb.net
	Version: 1.0
	Date: 20/12/08

[ Table Of Contents ]

	0- Reset
	1- Global
	2- Headings
	3- Header
	4- Navigation
	5- Main Content
	6- Main Content Elements
	7- Extras
	8- Forms
	9- Footer

[ Colour Reference Guide ]

	Black: #000000
	White: #ffffff - (Used for...)
	Etc...

*/ 
 

/* =0 Reset 
�������������������������������������������������������������������*/

	/* Universal - reset browser default styles */
		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, b, u, i, center, 
		dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
				{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
		body 	{ line-height: 1; }
		ol, ul 	{ list-style: none; }
		blockquote, q { quotes: none; font-style:italic;}
		
	/* Define focus styles! */
		:focus 	{ outline: 0; }
		
	/* Highlight inserts somehow! */
		ins 	{ text-decoration: none; }
		del 	{ text-decoration: line-through; }
		
	/* Tables still need 'cellspacing="0"' in the markup */
		table 	{ border-collapse: collapse; border-spacing: 0; }


/* =1 Global 
�������������������������������������������������������������������*/
	
	/* General style applied to HTML */
		html 	{ text-align: left; padding: 0; margin: 0; border: 0; font-family: Arial, Helvetica, sans-serif; width: 100%; }
		
	/* Body style */
		body 	{ clear: both; line-height: 1; vertical-align: top; color: #000; padding: 0; margin: 0 auto; background: url(../images/bg-top.jpg) top center repeat-x;
		text-align: left; }		
		
	/* Preset global styles */
		.right 	{ float: right; } 
		.left 	{ float: left; } 
		.align-left { text-align: left; } 
		.align-right { text-align: right; } 
		.align-center { text-align:center; } 
		.justify { text-align:justify; } 
		
		.hide 	{ display: none; } 
		.clear 	{ clear: both; } 
		.bold 	{ font-weight:bold; } 
		.italic { font-style:italic; } 
		 
    img.centered { display: block; margin-left: auto; margin-right: auto; } 
    img.alignleft { float:left; margin:1px 10px 4px 0; } 
    img.alignright { float:right; margin:1px 0 4px 10px; } 
		
		.spacer { display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
			
	


/* =2 Headings
�������������������������������������������������������������������*/  

	/* General headings */
		h1 		{ font-size: 0.1em; color: #fff; background:url(../images/logo.png) top no-repeat; height: 177px; width: 189px;
				font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0 0 0 20px; font-weight: 500; position: absolute; top: -54px;}
		h2, h3, h4, h5, h6 { font-weight: 900; font-family: Arial, Helvetica, sans-serif; clear: both; text-transform: uppercase; }
      h2  { color: #656b70; font-size: 1.3em; margin: 0 0 0.8em 0;}
      h3  { color: #656b70; font-size: 1.2em; margin: 0 0 1em 0; }
      h4  { color: #656b70; font-size: 1.0em; margin: 0 0 1em 0; }
      h5  { color: #03325F; font-size: 0.9em; margin: 0 0 0.6em 0; text-transform: none;}
      h6  { color: #03325F; font-size: 0.8em; margin: 0 0 0 0; text-transform: none;}

	/* Specific headings - defined within specific divs*/





/* =3 Header
�������������������������������������������������������������������*/ 

	/* Header section style */
		#header {}
		


/* =4 Navigation
�������������������������������������������������������������������*/ 

	/* Navigation - top tab style */
		/* To add one more nav item, change main width to 612px and item widths to 100px */
	#mainNav{ width: 732px; text-align:center; padding:0 0 0 0px;margin: 0px auto 0px; position: absolute; top: -54px; right: 0; 
		border-left: 1px solid #B9B9B9; border-right: 1px solid #fff;}
	#mainNav li{ display: inline; float: left; margin: 0;font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 0.7em; font-weight:900;}
	#mainNav li a { border-right: 1px solid #B9B9B9; border-left: 1px solid #fff; background: url(../images/tabs.png) top center repeat-x; 
		display: block; text-decoration: none; position: relative; width:120px; height: 10px; padding: 36px 0px 8px; color:#6c727b;}
	#mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover{ text-decoration: none; color:#fff;
			background: url(../images/tabs2.png) top center repeat-x; display: block; border-left: 1px solid #f9ecde;}
	#mainNav li.current a:hover{color:#d46600; border-left: 1px solid #fff;}

	/* Span (on hover) - common attributes */
	#mainNav li a span.effect { background: url(../images/tabs1.png) top center repeat-x; display: block; padding: 36px 0px 8px; color: #6c727b; text-decoration: none;
		position: absolute; top: 0; left: 0; width: 120px; height: 10px; z-index: 1;}

	
	#mainNav li a span.item { position: absolute; top: 0; left: 0; width: 120px; height: 10px; z-index: 2; padding: 36px 0px 8px; }
	



/* =5 Main Content 
�������������������������������������������������������������������*/ 

/* Div styles - layout specific */
	
	/* Outer content wrapper - if second content wrapper needed */
	#contentWrap {text-align:left; margin: 54px auto 0; width: 960px; background: url(../images/bg-main.jpg) top center no-repeat; position: relative;}
	
	
/* Homepage Content Specific */
	#home #innerWrap{ clear: both; background: url(../images/bg-content.jpg) top center repeat-y; overflow: auto; margin: 46px 0 50px;}
	#home #content 	{ clear: both; padding: 21px 0 20px 0; background: url(../images/bg-content-top.jpg) top center no-repeat; margin: 0px 0 0 0; } 

	
	
	
/* All other pages - Content Specific */

	#innerWrap { clear: both; background: url(../images/bg-content.jpg) top center repeat-y; margin: 0 0 40px;}
	#content { clear: both; margin: 0px 0 0 0; padding: 145px 0 20px 0; background: url(../images/bg-content-top1.jpg) top center no-repeat; } 
#bottomEdge{position: relative; top: 2px;}

	
	/* Main content area - main column */
	#mainContent {float: left; width: 605px; padding: 30px 0px 0px 0px; border-bottom: 1px solid #fff; margin-left: 50px; color: #03325F; } 
  #mainContent .content-images { margin: 0.5em 0 1em; }
  #mainContent .content-images img { 
    border: 1px solid #01245C;
    padding: 1px;
    margin: 3px;
  }
  #mainContent ul li {
    color: #03325F;
    padding: 4px 0;
  }
	.wrap { clear: both; border-top: 1px solid #fff; border-bottom: 1px solid #cdcdcd; padding: 20px 0 0 0; position: relative;}
		.topLink { position: absolute; top: 6px; right: 10px; font-size:0.6em;}
    
  #mainContent ul p {font-size:1em;}
		
	/* Homepage promos */	
	#promoWrap { border-bottom: 1px solid #d3d3d3; float: left; padding: 0; margin: 0;}		
	#promos		{ float: left; padding: 10px 0 0px 0; margin: 0; position: relative; left: -5px; }
	#promos li { display: inline; float: left; margin: 0; padding: 0;}
	#promos li a { display: block; position: relative; width:140px; height: 186px; }	
	#promos li a span.effectPromo 
	{ display: block; padding: 0; color: #6c727b; text-decoration: none; position: absolute; top: 0; left: 0; width: 140px; height: 186px; z-index: 1;}	
		
		/* Each promo needs a unique ID, and its own set of background images */
		
		/* Roof promo */
		#promos li#roof a { background: url(../images/roof.png) top center repeat-x; }	
		#promos li#roof a span.effectPromo { background: url(../images/roof1.png) top center repeat-x; }	
		
		/* DLS promo */		
		#promos li#dls a { background: url(../images/dls.png) top center repeat-x; }	
		#promos li#dls a span.effectPromo { background: url(../images/dls1.png) top center repeat-x; }	
	
		/* Metabo promo */		
		#promos li#met a { background: url(../images/met.png) top center repeat-x; }	
		#promos li#met a span.effectPromo { background: url(../images/met1.png) top center repeat-x; }	
	
		/* Fencing promo */		
		#promos li#fence a { background: url(../images/fence1.png) top center repeat-x; }	
		#promos li#fence a span.effectPromo { background: url(../images/fence.png) top center repeat-x; }	

	/* homepage video */
  #homepage_video {
    background: #fff url(/images/video-bg.gif) top left no-repeat;
    width: 346px;
    height: 224px;
    float: right;
    margin-left: 10px;
    padding: 8px 7px 6px;
  }
							
	/* Side content - side column */
	#sideContent {width: 240px; float: right;margin-right: 30px; padding: 34px 10px 10px;}
	
	#subscribe { padding: 10px 10px 0 10px; background: url(../images/bg-sub.jpg) top center no-repeat; overflow: hidden; margin: 15px 0 25px;
	border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #01245c; border-top: 1px solid #01245c; height: 133px; }
	#subscribe h4 { color: #fff; font-weight: 900;}
	#subscribe p { color: #c3d0e5;}
	
	#subscribe a#subscribe-button:link, #subscribe a#subscribe-button:visited { position: relative; top: 4px; left: 60px; height: 32px;}
	#subscribe a#subscribe-button:hover { position: relative; top: 2px; left: 60px; height: 33px;}
	
	.faceboxForm { background: url(../images/bg-sub1.jpg) top center no-repeat; padding: 20px 40px 10px;}
	.faceboxForm h3 {color: #fff;}
	.faceboxForm p {color: #d5bbaf;}
	.faceboxForm label {color: #fff; font-size: 0.8em;}
	.faceboxForm input { margin-left: 50px; margin-bottom: 4px;}



	#content ul#sideProducts { list-style-type: none; padding: 0; margin: 0 0 40px 0; border-top: 1px solid #fff;}
	#content ul#sideProducts li { padding: 0; margin: 0; }
	#content ul#sideProducts li a { display: block;  padding: 6px 6px 6px 29px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 0.9em; font-weight:900; }
	#content ul#sideProducts li a:link, #content ul#sideProducts li a:visited { background: url(../images/bg-sidenav.jpg) bottom center no-repeat; color: #6c727b; border-bottom: 1px solid #acacac;}
	#content ul#sideProducts li a:hover { background: url(../images/bg-sidenav1.jpg) bottom center no-repeat; color: #fff; border-bottom: 1px solid #984701; text-decoration: none;}



	#productWrap {}
	.product { float: left; width: 174px;  min-height:335px; height:auto !important; height:335px;  margin: 0 5px 5px 0; border: 1px solid #d7d7d7; background-color: #fff; padding: 10px;}
	.product h4 { font-size: 0.7em; }	
	#content .product h4 a:link, #content .product h4 a:visited { color: #656b70; }	
	#content .product h4 a:hover { text-decoration: none; color:#ad3e01;}

/* =6 Main Content Elements
�������������������������������������������������������������������*/ 

	/* Main content - specific element styles */
		
    
    /* General paragraph style */
      p { padding: 0em 0 1.2em; margin: 0; font-size: 0.8em; color: #03325F; line-height: 1.3em; font-family: Helvetica, Arial, sans-serif; }
      blockquote { font-style:italic; margin-left: 70px; margin-right: 70px; font-size: 1em;} 
      cite { font-style:italic; margin-left: 90px; font-size: 0.9em; position: relative; top: -14px;} 
        
    /* List styles  */
      #content ul { list-style-type: disc; }
      #content ol { list-style-type: decimal; }
        #content ul, #content ol { margin: 0 1.5em 1.5em 4em; font-size: 0.8em; color: #03325F; line-height: 1.3em; font-family: Helvetica, Arial, sans-serif;}
        
    /* Link styles  */
      #content a:link, #content a:visited { color:#0056ca; text-decoration: none;}
      #content a:hover { color:#ad3e01; text-decoration: underline; }
		


/* =7 Extras
�������������������������������������������������������������������*/ 

	/* Image styles  */
		
	/* Fader style - used for jQuery Innerfade  */
		#fader{ background: url(../images/bg-frame.png) top center no-repeat; height: 206px; width: 478px; padding: 0px 0 0 0px; position: absolute; top: 25px; left: 454px;}
		#fader img{ position: relative; top: 14px; left: 7px;}
	/* Other jQuery style */
	
	/* Google Map style */
	
	/* Video style */
	


/* =8 Forms
�������������������������������������������������������������������*/ 

	/* Form elements  */
		input {}
		label {}
		.submit{ width: 110px; background: #fff url(../images/bg-btn.jpg) top center repeat-x; padding: 0px 4px; color: #6f6453; 
			margin-left: 118px; border-bottom: 1px solid #989084; border-right: 1px solid #bdb7af; border-left: 1px solid #bdb7af; 
			border-top: 1px solid #f9f6f3; cursor:pointer;}


/* =9 Footer
�������������������������������������������������������������������*/  

	/* Footer style  */
	#footerWrap { clear:both; text-align: center; margin: 10px 0 0; padding:0; position: fixed; z-index: 5000; bottom: 0; width: 100%; background: url(../images/footer.png) top center repeat-x; height: 53px;}
		#footer { text-align:left; margin: 4px auto 0; padding:0; width: 960px; background: url(../images/foot.png) top center no-repeat; height: 53px;}
			#foot { text-align:left; margin: 0 25px; padding:0; background: url(../images/bg-foot.png) top center repeat-x; height: 53px; position: relative;}
			#footer h5 { color:#fff; font-size: 0.9em; line-height: 1.1em; padding: 7px 0 0 24px; margin: 0px 0 0 0; font-weight: 900;}
			#footer p { color:#fff; font-size: 0.7em; line-height: 1.1em; padding: 3px 0 0 24px; margin: 0;}
				#footer p a:link, #footer p a:visited { color:#99998f; text-decoration: none;}
				#footer p a:hover { color:#fff; text-decoration: underline; }
	
p#number { color:#fff; font-size: 1.2em; line-height: 1.1em; padding: 7px 0 0 15px; margin: 0px 0 0 0; font-weight: 900; position: absolute; top: 5px; right: 24px;}

/* checkout form style */
#checkoutform input[type="text"], #checkoutform textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    height:100%;
    
}

#checkoutform input[type="submit"] {width:90px; height:2em; border: solid 1px #85b1de;}

#checkoutform label {font-size:0.9em; display:block; padding-bottom: 8px; color:#BC6002;}
#checkoutform label.error {color: red}
#checkoutform label em {color:red}