/*
	JOAL DECKING AND FENCING / STYLESHEET.CSS
	
	This is the 'master' stylesheet for the website.
	The css will be strictly validated. Any required hacks 
	and/or work-arounds (IE) will be placed in a seperate 
	stylesheet.
	
	Created:		06/08/08
	Created By:		James Marriott @ Joal Leisure
	Last Modified:	19/09/08
*/

/* ----- RESETS ----- */
* { font-family:Georgia, Arial, Helvetica, sans-serif; }

body { margin:5px; padding:0;}

h1, h2, h3, h4, h5, p { margin:0; padding:0; }

a { font:bold 16px Georgia, Arial, Helvetica, sans-serif; }


/* ----- PRIMARY DIVISIONS ----- */
#header {
	width:960px;
	height:95px;
	background:transparent;
	margin:0 auto; padding:0 0 1em 0;
}

		/* Header specific styles */
		#header_logo { 
			width:515px; 
			height:90px; 
			background:#fff url('../../../images/logo.jpg') no-repeat; 
			margin:5px 0 0 5px;
			float:left;
			}

		#header_contact_info {
			width:250px; 
			height:90px; 
			background:#fff url('../../../images/contact_top_img.gif') no-repeat; 
			margin:0 49px;
			float:left;
			}

		#fitrite_logo { 
			width:86px; 
			height:50px; 
			background:url('../../../images/fitrite_logo.gif') no-repeat; 
			margin:20px 5px 0 0;
			float:right;
			}


/* Navigation menu for top of page */
#navbar { /* This division acts as a container for the navbar ul eliments */
	width:100%;
	background:#006f00 url('../../../images/navbar_bg.png') repeat-x; /* navbar_bg.png */
	margin:0;
	padding:0;
	float:left;
}

		/* Navigation specific styles */
		#navbar_container {
			width:960px;
			margin:0 auto;
			padding:0;
			}

		#navbar_container ul { /* Define the style of the individual ul elements */
			width:12%;
			border-left:1px solid #222; 
			margin:0;
			padding:0;
			float:left;
			list-style:none;
			text-align:center;
			}

		#navbar_container a { /* Define the style of the links within the navbar division */
			display:block;
			margin:0;
			padding:12px 0;
			background:transparent;
			text-decoration:none;
			color:#030;
			}

		#navbar_container a.active {
			background:#43bd35 url('../../../images/navbar_active_bg.png') repeat-x;
			margin:0; padding:12px 0;
			text-transform:none;
			color:#2e3f4f;
			}

		#navbar_container a:hover { /* Define the style of the links when hovered over within the navbar division */
			background:#43bd35 url('../../../images/navbar_active_bg.png') repeat-x;
			margin:0; padding:12px 0;
			text-transform:none;
			color:#2e3f4f;
			}

		#navbar a:first-letter { text-decoration:underline; }
		
		/* 	The first-letter psuedo class can cause some bugs in IE 6 so we use the following
			class to fix it. The class doesn't exist / is not used anywhere in the site but the
			fact that a class is attributed to the a link is enough to correct the IE bug! */
		.ie_fix a { text-decoration: none; } 


#wrapper {
	width:960px;
	background:#fff;
	margin:0 auto; padding:0;
	}

		#bread {
			width:100%;
			background:#00a;
			margin:0; padding:0;
			float:left;
			}
				/* Text styles */
				#bread p { background:inherit; padding:5px 0; font:14px normal; color:#fff; }


#banner {
	width:100%;
	height:300px;
	background:#fff url('') no-repeat center;
	margin:1em 0;
	padding:0;
	float:left;
	}
	
	#banner #prod_banner { width:100%; height:100%; background:#fff; float:left; }
	
		#banner #prod_banner #banner_image { width:960px; height:300px; }

		#banner #prod_banner .banner_right { width:430px; margin-top:-300px; margin-left:510px; padding:5px 10px; float:none; }

			#banner #prod_banner .banner_right h2 { margin:1em 0; font-size:18px; font-weight:normal; line-height:1.5em; }

#left {
	width:790px;
	background:transparent;
	margin-right:10px; padding:0;
	float:left;
	}


#right {
	width:160px;
	background:inherit;
	margin:0; padding:0;
	float:left;
	}


#footer {
	width:100%;
	background:#fff url(''); /* ../../../images/grass.jpg */
	margin:1em 0 2em 0; padding:0;
	float:left;
	}

		#footer_links {
			width:940px;
			margin:0 auto;
			padding:5px 10px;
			}
			
				#footer_links p { border-bottom:2px dotted #006f00; padding:5px; text-indent:1em; }
			
				#footer_links a { margin:0; color:#2e3f4f; text-decoration:none; }
			
				#footer_links a:hover { margin:0; color:#2e3f4f; text-decoration:none; }
			
				#footer_links_left { width:220px; margin:0; padding:0; float:left; }

				#footer_links_center { width:220px; margin:0 140px; padding:0; float:left; }

				#footer_links_right { width:220px; margin:0; padding:0; float:right; }

				.footer_link_top { width:220px; height:50px; background:#fff url('../../../images/footer_links_top.png'); font:18px bold; }
				
				.footer_link_top_site { width:220px; height:50px; background:#fff url('../../../images/footer_links_top_site.png'); font:18px bold; }
				

/* ----- SECONDARY DIVISIONS / CLASSES ----- */
.left_container {
	width:100%;
	margin:1em 0 2em 0; padding:0;
	float:left;
	}
	
		.left_container h1 { margin:0; font:24px bold; }
		
		.left_container h1 span { font:14px normal; vertical-align:text-top; } 
		
		.left_container p { margin-bottom:1em; line-height:1.5em; }
	
		.left_container img { border:0; margin:0 50px 35px 0; float:left; }
	
	.left_col {
		width:390px;
		margin:0 5px 0 0; padding:0;
		float:left;
		}
	
	.right_col {
		width:390px;
		margin:0 0 0 5px; padding:0;
		float:left;
		}


#left_offset {
	width: 620px;
	background:transparent;
	margin:0 10px 0 100px;
	float: left;
	}
	
		#left_offset h1 { margin:0 0 2px 0; padding:0; font:normal 1.2em Georgia; }

		#left_offset h2 { margin:0 0 2px 0; padding:0; font:normal 1em Georgia; }

		#left_offset p { line-height:1.5em; }


.page_description {
	width:775px;
	margin:0 10px 0 0;
	padding:0 5px 0 0;
	text-align:justify;
	}

		.page_description h1 { margin-bottom:1em; font:normal 1em Georgia; line-height:1.5em; }
		.page_description p { margin-bottom:1em; line-height:1.5em; }
	
		.page_description .home_page_text_border { width:775px; height:500px; background:#fff url('../../../images/home_top_image.jpg') no-repeat; margin-bottom:10px; float:left; }
		.page_description .home_page_text_border .hp_text_content { width:720px; height:430px; margin:5px 0 0 5px; padding:15px; float:left; }
		.page_description .home_page_text_border .hp_text_content p { font-size:14px; line-height:1.2em; margin-bottom:0.8em; }
		.page_description .home_page_text_border .hp_text_content img { border:0; }
		.page_description .home_page_text_border .hp_text_content .img_left img { margin:0 10px 10px 0; }
		.page_description .home_page_text_border .hp_text_content .img_right img { margin:0 0 10px 10px; }

			.page_description .prod_container { width:775px; margin-bottom:2em; float:left; }
	
				.page_description .prod_container .prod_left { width:310px; height:445px; background:#fff; margin-right:5px; float:left; }
				.page_description .prod_container .prod_right { width:450px; float:left; }
				.page_description .prod_container .prod_right p b { color:#006f00; font-weight:normal; }
				.page_description .prod_container .prod_right p .highlight { color:#f60; font-weight:bold; }
				.page_description .prod_container .prod_right a, .page_description .prod_container .prod_right a:visited { color:#006f00; }


.img_border {
	width:300px;
	border:1px solid #006f00;
	margin:0 10px 0 -100px;
	padding:5px;
	float:left;
	}


.page_header {
	margin:5px;
	font:bold 32px Georgia, Arial, Helvetica, sans-serif;
	}
		.page_header h1 { font-size:28px; }
		.page_header span { font-size:14px; font-weight:normal; vertical-align:text-top; }


.para_heading {
	width:786px;
	background:#006f00 url('../../../images/para_heading.png') repeat-y;
	margin:1em 0 0 0; padding:2px;
	font:18px bold;
	color:#fff;
	}


.features {
	width:790px;
	margin:5px;
	float:left;
	}
	
	.features_left { width:200px; margin-right:10px; float:left; }
	.features_right { width:580px; float:left; }
	
		.features p img { width:20px; height:20px; border:0; margin-right:15px; }
		.features .more_info p { margin-left:35px; font:12px normal; }


#prod_banner { width:100%; height:100%; background:#fff url(''); float:left; }



/* #guarantee { position:fixed; bottom:0px; right:0px; width:170px; height:95px; background:url('../../../images/10yr_star.png') no-repeat; } */
#guarantee { 
	position:fixed; 
	bottom:0; 
	width:100%; 
	background:#fc3; 
	border-top:1px solid #006f00; 
	text-align:center; 
	color:#006f00; 
	font:bold 18px Georgia, Helvetica, sans-serif; 
	}

/* ----- TEXT STYLES ----- */



/* ----- CONTACT FORM ----- */
.contact { width:100%; background:#fff; margin:0; padding:0; float:left; }

	.contact_intro { width:100%; margin:1em 0; float:none; }
	
	.contact_form { width:100%; margin:0; padding:0; }
	
	.contact_form .form_input { width:100%; margin-bottom:1em; float:left; }
	
	.contact_form .form_submit { width:40%; margin:1em 50%; float:left; }
	
	.contact_form form fieldset { border:0; padding:1% 0; }
	
	.contact_form input, textarea { background:#fff; border:2px solid #006f00; padding:2px; color:#222; } /**/
	
	.contact_form label { display:block; width:7em; float:left; text-align:left; margin-right:0.5em; }
	
	.contact_form p { width:100%; float:left; }
	
	.contact_form .small { color:#2e3f4f; font-size:10px; }

	.contact_form p label { width:15em; float:left; }
	
	.contact_form p input { width:2em; float:left; }
	
	.contact_form .submit { border:1px solid #2e3f4f; color:#2e3f4f; }



/* ----- MODULES ----- */
.module { width:153px; margin:0 0 10px 5px; float:left; }

	.module p { margin-left:5px; line-height:1.5em; }
	
	.module p a, .module p a:visited { color:#2e3f4f; text-decoration:none; }

	.module_top { background:#006f00 url(../../../images/b_tl.gif) top left no-repeat; margin:0; color:#fff; font:18px bold; }
	
	.module_top dl { margin:0; padding:0; }
	
	.module_top dt { background:url(../../../images/b_tr.gif) top right no-repeat; margin:0; padding:5px 10px; }
	
	.module_content { background:#fefefe; border:2px solid #006f00; padding:2px; }
	
	.module .module_content p a, .module .module_content p a:visited { text-decoration:underline; }
	
	.module_content .ads h1 a { margin-left:5px; color:#00f; font:bold 22px; text-decoration:underline; }
	
	.module_content .ads p { color:#000; }
	
	.module_content .ads span a { margin-left:2em; color:#006f00; text-decoration:none; font-size:10px; }
	
	.module dd { background:#eefeee url(../../../images/b_bl.gif) bottom left no-repeat; padding:0; margin:0; }
	
	.module dd p.last { background:transparent url(../../../images/b_br.gif) bottom right no-repeat; }
		

/* ----- IMAGE BORDERS ----- */
div.article { width:35%; background:url('../../../images/image_border_top_left_sm.gif') top left no-repeat; }

div.article h2 { background:url('../../../images/image_border_top_right.gif') top right no-repeat; margin:0; padding:15px; font-size:1.3em; }

div.article_body { background:url('../../../images/image_border_right_border.gif') top right repeat-y; margin:0; padding:15px; }

div.article_footer { background:url('../../../images/image_border_bottom_left.gif') bottom left no-repeat; }

div.article_footer p { background:url('../../../images/image_border_bottom_right.gif') bottom right no-repeat; display:block; padding:15px; margin:0; }