/**********************************************************************************************

	CSS Styelsheet
	Title	: WeBlow Website
	Author	: XHTMLized
	Date	: July 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	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;
	}
	
	img {
		margin-bottom: -3px;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		position: relative;
		text-align: center;
		font: 62.5% Arial, Helvetica, sans-serif;
		background: #DDCFBC url(../images/bg_header.gif) repeat-x left top;
	}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		cursor: pointer;
		color: #FF8C00;;
		text-decoration: underline;
	}
	
	a:hover, 
	a:active {
		color: #9FAF66;
		text-decoration: none;
	}
	
	.clear { clear: both; }

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	
	.container {
		margin: 0 auto;
		width: 100%;
		text-align: left;
		background: url(../images/bg_footer.gif) repeat-x left bottom;
	}
	
	#header {
		position: relative;
		z-index: 100;
		margin: 0 auto;
		padding: 165px 0 0 0;
		width: 960px;
		height: 35px;
	}
	
	#content {
		position: relative;
		z-index: 10;
		overflow: hidden;
		margin: 0 auto;
		padding: 20px 17px 75px 17px;
		width: 920px;
		border-left: 3px solid #B5B595;
		border-right: 3px solid #B5B595;
		border-top: none;
		border-bottom: none;
		background: #fff;
	}
		#content.interior {padding: 55px 17px 100px 422px; width: 515px;}
		#content.interior.no_padding {padding-top: 20px;}
		
	#footer {
		clear: both;
		margin: 0 auto;
		padding: 30px 20px 0 20px;
		width: 920px;
		height: 60px;
	}
		
	
/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
	
		display: block;
		width: 114px;
		height: 160px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		z-index: 30;
		top: 40px;
		left: 0;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../images/logo.png) no-repeat;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
	#header p.main_tagline {
		position: absolute;
		z-index: 20;
		right: 0;
		top: 40px;
		width: 490px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-weight: bold;
		font-size: 24px;
		color: #fff;
	}
		#header p.main_tagline span {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(../images/main_tagline.gif) no-repeat left top;
		}
	
	#header ul#header_ads {
		position: absolute;
		z-index: 10;
		overflow: hidden;
		display: block;
		right: 0;
		top: 81px;
		height: 84px;
	}
		#header ul#header_ads li {
			float: left;
			position: relative;
			margin-left: 20px;
			padding: 20px 0 0 0;
			height: 64px;
			text-align: center;
			font-weight: bold;
			font-size: 20px;
			color: #fff;
			background: #000;
		}
		#header ul#header_ads li#ads_guaranteed {width: 269px;}
		#header ul#header_ads li#ads_call_us {width: 262px;}
			#header ul#header_ads li span {
				position: absolute;
				left: 0;
				top: 0;
				height: 84px;
				background: red;
			}
			#header ul#header_ads li#ads_guaranteed span {width: 269px; background: url(../images/header_ads_guaranteed.gif) no-repeat left top;}
			#header ul#header_ads li#ads_call_us span {width: 262px; background: url(../images/header_ads_call_us.gif) no-repeat left top;}
	
	#header #navigation {
		width: 960px;
		height: 35px;
		background: #C3C3C3 url(../images/bg_navigation.gif) repeat-x left top;
	}
		#header #navigation ul {
			position: relative;
			padding: 0 0 0 114px;
			height: 35px;
		}
			#header #navigation ul li {
				float: left;
				padding: 0 0 0 3px;
				background: url(../images/bg_navigation_spacer.gif) no-repeat left top;
			}
			#header #navigation ul li.first {background: none; padding: 0;}
				#header #navigation ul li a {
					float: left;
					display: block;
					padding: 0 16px 0 15px;
					height: 35px;
					line-height: 35px;
					font-weight: bold;
					font-size: 12px;
					text-decoration: none;
					color: #3D500E;
				}
				/* add by hz, to fix ff3 bug on nav */
				#header #navigation ul li.contact01 a{padding-right: 15px;}
				
				#header #navigation ul li a:hover {color: #000;}
				
				#header #navigation ul li.active a {color: #000; background: #A5A5A5;}
				
		#header #navigation ul ul {
			position: absolute;
			left: 0;
			top: 35px;
			margin: 0 3px;
			padding: 0 0 0 14px;
			width: 940px;
			background: #A5A5A5;
		}
			#header #navigation ul ul li {
				padding: 0 !important;
				background: none;
			}
				#header #navigation ul ul li a {
					padding: 0 25px;
					color: #fff !important;
				}
				#header #navigation ul ul li.active a ,
				#header #navigation ul ul li a:hover {color: #000 !important;}
	

/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
	#content h2 { 
		font-weight: bold;
		font-size: 24px;
		color: #FF8800;
	}
	#content .left {
		float: left;
		width: 440px;
	}
		#content .left .img_content {
			margin: 0 0 20px 0;
		}
		#content .left h2 {
			padding: 0 0 15px 0;
			font-weight: bold;
			font-size: 24px;
			color: #FF8800;
		}
			#content .left h2 sup {}
		#content .left p.main_paragraph {
			padding: 0 0 40px 0;
			font-weight: normal;
			font-size: 14px;
			color: #333;
		}
		#content .left h3 {
			text-transform: uppercase;
			font-weight: bold;
			font-size: 11px;
			color: #000;
		}
		ul.benefits {
			padding: 15px 0;
		}
			ul.benefits li {
				display: block;
				padding: 0 0 5px 34px;
				height: 24px;
				line-height: 24px;
				font-weight: normal;
				font-size: 12px;
				color: #333;
			}	
				ul.benefits li strong {font-weight: bold; font-size: 14px;}
				
				ul.benefits li#b_easy, ul.benefits li#b_reduce {background: url(../images/ico_benefits_easy.gif) no-repeat left top;}
				ul.benefits li#b_fast {background: url(../images/ico_benefits_fast.gif) no-repeat left top;}
				ul.benefits li#b_professional {background: url(../images/ico_benefits_professional.gif) no-repeat left top;}
				ul.benefits li#b_proven, ul.benefits li#b_experienced {background: url(../images/ico_benefits_proven.gif) no-repeat left top;}
				ul.benefits li#b_guarantee {background: url(../images/ico_benefits_guarantee.gif) no-repeat left top;}
		
	#content .right {
		float: right;
		width: 470px;
	}	
		#content .right .w_top {
			padding: 0 0 20px 0;
			width: 470px;
		}
			#content .right .w_top ul {
				overflow: hidden;
			}
				#content .right .w_top ul li {
					float: left;
					position: relative;
					margin-right: 10px;
					width: 220px;
					border: 5px solid #D1DDA7;
				}
				#content .right .w_top ul li.even {margin-right: 0;}
					#content .right .w_top ul li .title {
						position: absolute;
						z-index: 1000;
						left: 0;
						top: 110px;
						padding: 15px 25px;
						width: 170px;
						height: 40px;
					}
					#content .right .w_top ul li .w_title {
						position: absolute;
						z-index: 1;
						left: 0;
						top: 110px;
						width: 220px;
						height: 70px;
						background: url(../images/bg_title_transparent.png) no-repeat left top;
					}
						#content .right .w_top ul li .title h4 {
							font-weight: bold;
							font-size: 14px;
							color: #000;
						}
						#content .right .w_top ul li .title p {
							padding: 5px 0;
						}
							#content .right .w_top ul li .title p a.btn_learn_more {
								display: block;
								width: 76px;
								height: 23px;
								line-height: 23px;
								text-decoration: none;
								text-align: center;
								font-weight: normal;
								font-size: 11px;
								color: #fff;
								background: url(../images/btn_learn_more.png) no-repeat left top;
							}
					#content .right .w_top ul li img {
						margin: 0 0 -3px 0;
					}
					
		#content .right .column {
			width: 230px;
		}
		#content .right .column.left {
			float: left;
		}
		#content .right .column.right {
			float: right;
		}
		
		#content .right .column .video {
			overflow: hidden;
		}
			#content .right .column .video .w_video {
				width: 230px;
			/*	height: 115px;*/
				background: #fff;
			}
			#content .right .column .video p.view_all_video {
				padding: 5px 0 15px 0;
				float: right;
				font-weight: normal;
				font-size: 11px;
				color: #000;
			}
				#content .right .column .video p.view_all_video a {text-decoration: none; color: #FF7C00;}
				#content .right .column .video p.view_all_video a:hover {color: #000;}
		#content .right .column .quote {
			clear: both;
		}
			#content .right .column .quote blockquote {
				padding: 20px 20px 35px 15px;
				width: 195px;
				font-family: Georgia, "Times New Roman", Times, serif;
				font-weight: normal;
				font-size: 14px;
				color: #333;
				background: url(../images/bg_quote.gif) no-repeat left bottom;
			}
			#content .right .column .quote cite {
				float: right;
				padding: 10px 10px 20px 10px;
				text-align: right;
				font-weight: normal;
				font-size: 11px;
				color: #666;
			}
				#content .right .column .quote cite strong {
					font-weight: bold;
					font-style: normal;
					font-size: 12px;
					color: #000;
				}
		#content .right .column h3.title_news {
			padding: 0 0 10px 30px;
			height: 20px;
			line-height: 20px;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 11px;
			color: #000;
			background: url(../images/ico_title_news.gif) no-repeat left top;
		}
		#content .right .column p {
			padding: 0 0 10px 0;
			font-weight: normal;
			font-size: 11px;
			color: #333;
		}
		#content .right .column p.date_news {
			font-family: Georgia, "Times New Roman", Times, serif;
			color: #459B00;
		}
			#content .right .column p.date_news strong {font-weight: normal;}
	
	#content .footer_content {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 954px;
		height: 55px;
	}
		#content .footer_content ul#partner {
			float: left;
			overflow: hidden;
			padding: 0 0 0 17px;
		}
			#content .footer_content ul#partner li {
				float: left;
				margin-right: 18px;
			}
		#content .footer_content h3#call_us {
			float: right;
			margin: 0 17px 0 0;
			padding: 10px 20px 0 20px;
			width: 190px;
			height: 45px;
			line-height: 18px;
			font-weight: normal;
			font-size: 12px;
			color: #FDFDFD;
			background: #000;
		}
			#content .footer_content h3#call_us strong {
				font-weight: bold;
				font-size: 18px;
			}
			
	#content.interior img.img_inside_content {
		float: left;
		margin: 0 30px 30px -405px;
		padding: 20px;
		width: 335px;
		height: 205px;
		background: url(../images/bg_img_inside_content.gif) no-repeat left top;
	}
	#content.interior h2 {
		padding: 0 0 15px 0;
		font-weight: bold;
		font-size: 24px;
		color: #FF8800;
	}
	#content.interior h3 {
		padding: 0 0 10px 0;
		font-weight: bold;
		font-size: 14px;
		color: #333;
	}
	#content.interior p ,
	#content.interior ul li {
		padding: 0 0 10px 0;
		line-height: 15px;
		font-weight: normal;
		font-size: 12px;
		color: #333;
	}
	#content.interior p.add_padding {padding-bottom: 30px;}
	#content.interior ul {
		padding: 0 0 20px 10px;
	}
		#content.interior ul li {
			padding: 0 0 5px 0;
		}
		
	#content.interior ul#staff {
		overflow: hidden;
		padding: 10px 0 20px 0;
	}
		#content.interior ul#staff li {
			float: left;
			position: relative;
			padding: 0 20px 20px 80px;
			width: 150px;
		}
			#content.interior ul#staff li img {
				position: absolute;
				left: 0;
				top: 0;
			}
			#content.interior ul#staff li p {
				font-size: 12px;
				color: #333;
				padding-bottom: 5px;
			}
				#content.interior ul#staff li p strong {
					font-weight: bold;
				}
				#content.interior ul#staff li p em {
					font-style: italic;
					font-weight: normal;
					font-size: 11px;
				}
		
		
/* 2.3	Footer
-----------------------------------------------------------------------------------------------*/	

	#footer p {
		padding: 0 0 5px 0;
		font-weight: normal;
		font-size: 11px;
		color: #000;
	}
	
	#footer ul {
		overflow: hidden;
	}
		#footer ul li {
			float: left;
			padding: 0 5px 0 6px;
			font-weight: normal;
			font-size: 11px;
			border-left: 1px solid #000;
		}	
		#footer ul li.first {padding-left: 0; border-left: none;}
			#footer ul li a {
				color: #000;
				text-decoration: none;
			}
			#footer ul li a:hover {text-decoration: underline;}


	/* sub navigation for erosion control*/
	#erosion_ecoberm #header #navigation ul ul li.ecoberm01 a, 
	#erosion_ecoblanket #header #navigation ul ul li.ecoblanket01 a, 
	#erosion_microblend #header #navigation ul ul li.microblend01 a,
	#erosion_terraseeding #header #navigation ul ul li.terra01 a { color: #000 !important; }
	
	/* sub navigation for products and applications */
	#products_mulch #header #navigation ul ul li.mulch01 a, 
	#products_soil #header #navigation ul ul li.soil01 a,
	#products_rock #header #navigation ul ul li.rock01 a,
	#products_softplay #header #navigation ul ul li.softplay01 a,
	#products_sand #header #navigation ul ul li.sand01 a,
	#products_slinger #header #navigation ul ul li.slinger01 a { color: #000 !important; }
	
	
	/* main navigation */
	#project_pics01 #header #navigation ul li.project_pics01 a,
	#erosion_overview #header #navigation ul li.erosion a,
	#about01 #header #navigation ul li.about01 a,
	#videos01 #header #navigation ul li.videos01 a,
	#testimonials01 #header #navigation ul li.testimonials01 a,
	#products_apps01 #header #navigation ul li.product_apps01 a,
	#benefits01 #header #navigation ul li.benefits01 a,
	#about01 #header #navigation ul li.about01 a,
	#contact01 #header #navigation ul li.contact01 a {
		background:#A5A5A5 none repeat;
		color:#000000;
	}
	
	
	/* contact us */
	.inside_content02 { width: 500px; }
	.inside_content p em {
		font-size:12px;
		font-weight:bold;
	}
	
	.inside_content .map {
		float:left;
		margin: 0 20px 0px -405px;
	}
	
	/* benefits */
	#weblow-ben li {
		background:transparent url(../images/bullet.gif) no-repeat left 3px;
		color:#3D500E;
		display:block;
		font-size:14px;
		height:20px;
		margin:0pt;
		padding:0pt 0pt 15px 30px;
		text-align:left;
	}
	 
	/* videos */
	.video_thumbs {
		width: 481px;
		padding-bottom: 17px;
		border-bottom: 1px solid #ccc;
		}
	.video_thumbs ul li { 
		display: inline;
		padding-left: 20px; 
		}
		.video_thumbs ul li.first { 
			padding-left: 0; 
		}
	.video_large {
		padding-left: 75px;
		font-size: 1.2em;
	}
		.video_large h3 { margin: 1.5em 0 1em 0; }
	
	/* products and apps */
	#content.interior .products li {
		background:transparent url(../images/bullet.gif) no-repeat left top;
		color:#3D500E;
		display:block;
		font-size:14px;
		font-weight:bold;
		height:20px;
		margin:0;
		padding:0 0 10px 30px;
		text-align:left;
	}
	
	/* erosion control */
	.eco ul li {
		background: transparent url(../images/tick.png) no-repeat left 0;
		padding:0 24px 5px!important;
	}
	
	#header ul#header_ads li#home_link {
		width: 200px;
		padding: 57px 124px  0 0;
		background-image: url(../images/home-link.jpg);
		background-repeat: no-repeat;
		background-position: 52px 55px;	
	}
	
	#header ul#header_ads li#home_link a {
		text-decoration:none;
		color:#BC8C58;
		font-size:0.75em;
	}
	
	#header ul#header_ads li#home_link a:hover { color: #9FAF66; }
	
	.box li.t-pdf, li.t-pdf, .box li.t-ppt {
		background: url(../images/t-pdf.png) no-repeat left 0;
		padding:1px 2px 1px 25px !important;
	}
	
	.box li.t-ppt {
		background-image:url(../images/t-ppt.png);
		background-position:3px 5px;
		border: 1px solid white;
	}
	
	#content.interior img.img_inside_content02 {
		background:transparent url(../images/bg_img_inside_content.gif) no-repeat left top;
		padding:20px;
	}	
	
	.multipics { 
		float: left; 
		margin:0 30px 30px -405px;
	}
		#content.interior .multipics ul li  { 
		font-weight: bold; 
		border-bottom: 1px solid #CCCCCC;
		padding-top: 5px;
		width: 360px;
		}
/*		#content.interior .multipics ul li.active { color: green; }
*/		
		#content.interior .multipics a { text-decoration: none; }
		#content.interior .multipics ul li.active a { color: #000; }
	
/* Project Pics additional CSS */

.photo_padding { padding-top: 50px; }

.project_pics {
	overflow: hidden;
	width: 920px;
}
	.project_pics h3.title_pics {
		padding: 5px 0;
		font-weight: bold;
		font-size: 24px;
		color: #999;
		border-bottom: 1px solid #ccc;
	}	
		.project_pics h3.title_pics strong {color: #333;}
	.project_pics ul.list_album_pics {
		float: left;
		padding: 15px 0 30px 0;
		width: 250px;
		height: 1%;
	}	
		.project_pics ul.list_album_pics li {
			padding: 0 0 0 2px;
			height: 30px;
			line-height: 30px;
			font-weight: bold;
			font-size: 12px;
			color: #333;
			border-bottom: 1px solid #ccc;
		}
			.project_pics ul.list_album_pics li a {
				text-decoration: none;
				color: #333;
			}
			.project_pics ul.list_album_pics li a:hover {color: #FF8800;}
	.project_pics .content_pics {
		float: right;
		padding: 15px 0;
		width: 645px;
	}
		.project_pics .content_pics h4 {
			padding: 0 0 0 0;
			line-height: 29px;
			font-weight: bold;
			font-size: 14px;
			color: #333;
		}
		.project_pics .content_pics img.project_pics_view_img {
			margin: 0 0 10px 0;
			border: 5px solid #CCCC99;
		}
		.project_pics .content_pics p {
			padding: 0 0 10px 0;
			width: 450px;
			line-height: 14px;
			font-weight: normal;
			font-size: 12px;
			color: #333;
		}
		.project_pics .content_pics p.email_pics a {
			padding: 0 0 0 22px;
			text-decoration: none;
			color: #333;
			background: url(../images/ico_email.gif) no-repeat left 1px;
		}
			.project_pics .content_pics p.email_pics a:hover {color: #FF8800;}
		.project_pics .content_pics ul.paging_pics {
			float: right;
		}
			.project_pics .content_pics ul.paging_pics li {
				float: left;
				line-height: 14px;
				font-weight: normal;
				font-size: 11px;
				color: #333;
			}
			.project_pics .content_pics ul.paging_pics li.prev_pics {
				padding: 0 11px 0 17px;
				border-right: 1px solid #666;
				background: url(../images/ico_arrow_paging_left.gif) no-repeat left top;
			}
			.project_pics .content_pics ul.paging_pics li.next_pics {
				padding: 0 17px 0 11px;
				background: url(../images/ico_arrow_paging_right.gif) no-repeat right top;
			}
				.project_pics .content_pics ul.paging_pics li a {text-decoration: none; color: #333;}
				.project_pics .content_pics ul.paging_pics li a:hover {color: #FF8800;}
		
		.project_pics .content_pics ul.thumb_pics {
			padding: 10px 0 0 0;
			overflow: hidden;
			height: 1%;
		}
			.project_pics .content_pics ul.thumb_pics li {
				float: left;
				padding: 0 35px 10px 0;
			}
				.project_pics .content_pics ul.thumb_pics li a {
					display: block;
					padding: 0 0 5px 0;
					text-decoration: none;
					line-height: 14px;
					font-weight: normal;
					font-size: 12px;
					color: #333;
				}
					.project_pics .content_pics ul.thumb_pics li a:hover {color: #FF8800;}
				.project_pics .content_pics ul.thumb_pics li img {
					border: 5px solid #CCCC99;
				}
	
	
/* resource page 
 * add by hz on Jan 22, 2009
 */

#content .resources{padding-bottom: 50px;}
#content .resources h2{
	padding-bottom: 20px;
}
.resources p{
	padding-left: 1px;
	font-size: 1.3em;
}
.resources p.error{
	color: #900;
	margin-top: -10px;
	padding-bottom: 10px;
}
.resources ul{
	padding-top: 10px;
}
.resources li{
	padding-bottom: 5px;
	font-size: 1.3em;
}
.resources li em{
	font-size: .9em;
	color: #555;
	padding-left: 5px;
}
.resources fieldset{
	padding: 30px 0 0 1px;
}
.resources fieldset a{
	font-size: 1.2em;
}
.resources label {
	padding-bottom: 5px;
	width: 235px;
	overflow: hidden;
	display: block;
}
.resources label input{ width: 140px;}
.resources label strong{
	font-size: 1.2em;
	line-height: 24px;
	font-weight: normal;
	float: left;
	width: 80px;
}
.resources button{ margin: 5px 0 0 83px;}
.resources .resource-nav{
	position: absolute;
	right: 20px;
	top: 25px;
}

.resources dl{ padding: 20px 10px 10px; font-size: 12px; width: 500px; }
.resources dt{ font-weight: bold; font-size: 14px; padding: 10px 0 5px; }
.resources dt em{ font-weight: normal; display: block; color: #333; font-size: 11px;}
.resources dd{ padding: 0 0 10px;}

	
.news-list li{ padding: 9px 0 0; border-top: 1px solid #ddd; }
.news-list li.first{ padding-top: 0; border: none;}

.bio{ font-size: 11px;}