@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	background: #c7bda3;
	font-size: 12px;
	color: #545047;
	font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h1 {
	margin: 0;
	color: #3f3317;
	font-size: 24px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: normal;
}

h2 {
	margin: 25px 0 0 0;
	color: #3f3317;
	font-size: 18px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: normal;
}

	.faq-question {
		margin: 25px 0 0 0;
		color: #faf7ee;
		font-size: 16px;
		padding: 6px 6px 6px 12px;
		background: url(../graphics/bg-h2.gif) repeat-x #8d836b;
		border-top: 1px solid #c7bea8;
		border-right: 1px solid #6b6b6b;
		border-bottom: 1px solid #6b6b6b;
		border-left: 1px solid #c7bea8;
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		font-weight: bold;
		line-height: normal;
	}

h3 {
	margin: 15px 0 0 0;
	color: #3f3317;
	font-size: 14px;
	height: 22px;
	padding: 4px 0 4px 8px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background: url(../graphics/bg-h3.gif) top left no-repeat;
	/*border-left: 1px solid #c3b694;*/
	line-height: normal;
}

h4 {
	margin: 20px 0 0 0;
	padding: 4px 8px;
	font-size: 12px;
	color: #3f3317;
	background: url(../graphics/bg-h3.gif) top left no-repeat;
	/*border-left: 1px solid #7d6f49;
	border-right: 1px solid #7d6f49;
	border-bottom: 1px solid #7d6f49;*/
	border-left: 1px solid #c3b694;
	border-right: 1px solid #c3b694;
	border-bottom: 1px solid #d7cba9;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	line-height: normal;
}

a {color: #f47321; text-decoration: underline;}
a:visited {color: #986c4f; text-decoration: underline;}
a:hover {color: #2170f4; text-decoration: underline;}

p {margin-top: 14px; margin-bottom: 0;}

strong, b {color: #000000;}

cite {
	margin-top: 8px;
	display: block;
	text-align: right;
	color: #777265;
}

#header-container {
	width: 100%;
	height: 88px;
	background: url(../graphics/bg-header.gif) repeat-x;
	
}

	#header-top {
		width: auto;
		height: 20px;
		padding-top: 2px;
		font-size: 11px;
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	}
	
		#header-top ul {
			margin: 0;
			padding: 0;
			float: right;
		}
		
			#header-top ul li {
				margin: 0 0 0 15px;
				padding: 0;
				list-style: none;
				display: inline;
			}
			
				#header-top ul li a, #header-top ul li a:visited {
					color: #665321;
					text-decoration: none;
				}
				
				#header-top ul li a:hover {
					color: #665321;
					text-decoration: underline;
				}
	
	#nav {
		width: auto;
		height: 40px;
	}
	
		#nav ul {
			margin: 0;
			padding: 0;
			float: right;
		}
		
			#nav ul li {
				margin: 0;
				padding: 0;
				list-style: none;
				float: left;
			}
			
				#nav ul li a {
					height: 40px;
					display: block;
					float: left;
				}
				
				.nav-paver-system {width: 140px; background: url(../graphics/nav/paver-system.gif) no-repeat;}
				.nav-project-ideas {width: 112px; background: url(../graphics/nav/project-ideas.gif) no-repeat;}
				.nav-benefits {width: 80px; background: url(../graphics/nav/benefits.gif) no-repeat;}
				.nav-environment {width: 124px; background: url(../graphics/nav/environment.gif) no-repeat;}
				.nav-faq {width: 59px; background: url(../graphics/nav/faq.gif) no-repeat;}
				.nav-contact {width: 97px; background: url(../graphics/nav/contact.gif) no-repeat;}
				.nav-vidLanding-home {width: 78px; background: url(../graphics/nav/home.gif) no-repeat;}
				.nav-vidLanding-skip-intro {width: 99px; background: url(../graphics/nav/skip-intro.gif) no-repeat;}
				
				#nav ul li a:hover {
					background-repeat: no-repeat;
					background-position: 0 -40px;
				}
	
	#logo {
		width: 143px;
		height: 76px;
		position: absolute;
		left: 0;
		top: 4px;
	}
	
		#logo a {
			width: 143px;
			height: 76px;
			display: block;
			background: url(../graphics/logo.gif) no-repeat;
		}
	
#tagline-container {
	width: 100%;
	height: 55px;
	padding-top: 20px;
	text-align: center;
	background: url(../graphics/bg-tagline.gif) repeat-x;
}

	#tagline-container h2 {
		margin: 0;
		color: #fb7621;
		font-size: 28px;
		font-weight: normal;
	}
	
#body-container {
	width: 100%;
	padding: 40px 0;
	line-height: 19px;
	background: url(../graphics/bg-body.gif) repeat-x #ffffff;
}

#video-landing #body-container {
  height:auto;
}

#video-landing .video-col {
  float:left;
  width:400px;
  height:auto;
}

#video-landing .video-box {
  float:left;
  width:400px;
  height:228px;
}

#video-landing .video-buttons {
  clear:both;
  width:400px;
  height:auto;
  font-size:13px;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  text-align:center;
}

#video-landing .video-buttons ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
}

#video-landing .video-buttons li {
  float:left;
  margin:0px;
  margin-top:6px;
  margin-bottom:15px;
  padding-right:5px;
}

#video-landing .video-buttons a {
  text-decoration:none;
  color:#000000;
}
#video-landing .video-buttons a:hover {
}

#video-landing .form-col {
  float:left;
  width:360px;
  height:auto;
  margin-left:20px;
}

	#sub-nav {
		width: 180px;
		padding-top: 56px;
		float: left;
	}
	
		#sub-nav ul {
			margin: 10px 0 0 0;
			padding: 0;
		}
		
			#sub-nav ul li {
				margin: 0 0 6px 0;
				padding: 0;
				list-style: none;
				font-size: 11px;
				color: #f47321;
			}
			
		#sub-nav h4 a, #sub-nav h4 a:visited, #sub-nav h4 a:hover {
			color: #3f3317;
			text-decoration: none;
			display: block;
		}
		
		*html #sub-nav h4 a {height: 1%;}
	

	#sub-page {
		width: 580px;
		float: right;
	}
	
		.testimonial-container {
			width: auto;
			margin: 15px 0 0 0;
		}
		
			.testimonial-left, .testimonial-right {
				width: 270px;
				padding: 5px;
				border-top: 1px solid #ceccc6;
				border-right: 1px solid #9e9d98;
				border-bottom: 1px solid #9e9d98;
				border-left: 1px solid #ceccc6;
				background: url(../graphics/bg-quote.gif) no-repeat #faf8f1;
				font-size: 11px;
				line-height: 15px;
			}
			
			.testimonial-left {float: left;}
			.testimonial-right {float: right;}
			
				.testimonial-left p, .testimonial-right p {margin-top: 8px;}
			
				.testimonial-picture {
					width: 80px;
					margin: 0 0 0 6px;
					padding: 2px;
					border-top: 1px solid #ceccc6;
					border-right: 1px solid #9e9d98;
					border-bottom: 1px solid #9e9d98;
					border-left: 1px solid #ceccc6;
					background-color: #ffffff;
					float: right;
				}
			
			

	.home-column {
		width: 260px;
		line-height: normal;
		float: left;
	}
	
	.col-1 {background: #f8efcf;}
	.col-2 {background: #ebe0b7;}
	.col-3 {background: #e1d4a3;}
	
	.swatch-container {
		width: auto;
		margin: 14px 0 0 0;
		padding: 12px;
		text-align: center;
	}
	
		.home-column h3 {
			margin: 0;
			font-weight: normal;
			font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
			background: none;
			padding: 0;
			height: auto;
			font-size: 16px;
			color: #1b7deb;
			text-align: center;
		}
	
		.h3-col-1 {background: #ebe0b7;}
		.h3-col-2 {background: #e1d4a3;}
		.h3-col-3 {background: #d1c38f;}
		
			.home-column h3 a, .home-column h3 a:visited {
				color: #1b7deb;
				text-decoration: none;
				padding: 10px 0;
				display: block;
			}
			
			.home-column h3 a:hover {color: #0e62c0;}
			
		.home-col-link, .home-col-link:visited {
			display: block;
			padding: 5px;
			color: #b14703;
			font-size: 11px;
			text-align: right;
		}
		
		.home-col-link:hover {color: #843604;}
		
	.faq-answer {
		width: auto;
		padding: 12px;
		border-right: 1px solid #c9bfa7;
		border-bottom: 1px solid #c9bfa7;
		border-left: 1px solid #c9bfa7;
		background: url(../graphics/bg-faq-answer.gif) bottom repeat-x #ffffff;
	}
	
		.snowflake {
			background: url(../graphics/snowflake.gif) no-repeat right;
		}
		
	#body-left {
		width: 520px;
		float: left;
	}
	
	#body-right {
		width: 246px;
		float: right;
	}
	
	.body-half {width: 380px;}
	#video-landing .body-half {width: 360px;}
	
		.form-container {
			width: auto;
			margin: 14px 0 0 0;
			padding: 4px;
			border: 1px solid #e9deb4;
			background-color: #fffdf1;
		}
		
			.form-table {}
			
				.form-text {
					padding: 3px;
					font-size: 11px;
					line-height: 16px;
					text-align: right;
				}
				
				.form-field {
					padding: 3px;
					font-size: 11px;
					line-height: 16px;
				}
				
					.input-text {
						width: 200px;
						border: 1px solid #d1c493;
						padding: 3px;
						height: 13px;
						font-family: Arial, Helvetica, sans-serif;
						font-size: 11px;
					}
					
					.input-select {
						border: 1px solid #d1c493;
						padding: 3px;
						font-family: Arial, Helvetica, sans-serif;
						font-size: 11px;
					}
					
					.input-textarea {
						width: 356px;
						height: 92px;
						border: 1px solid #d1c493;
						padding: 3px;
						font-family: Arial, Helvetica, sans-serif;
						font-size: 11px;
					}
          #video-landing .input-textarea {
						width: 335px;
          }
				
				.form-extra {
					padding: 3px;
					font-size: 11px;
					line-height: 16px;
				}

table.design-examples-table {margin: 14px auto 0 auto;}

	table.design-examples-table td {
		width: 160px;
		font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		line-height: 15px;
		padding: 8px 15px;
		text-align: center;
		vertical-align: top;
		color: #000000;
	}
	
		table.design-examples-table td p {margin-top: 5px;}
		table.design-examples-table td img {border: 1px solid #c2c2c2;}

table.benefits-table {}

	table.benefits-table th {
		width: 121px;
		font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		line-height: 15px;
		padding: 4px 15px;
		text-align: center;
		border-bottom: 1px solid #ffffff;
		border-right: 1px solid #ffffff;
		background-color: #d1c38f;
		vertical-align: top;
		color: #000000;
	}
	
	table.benefits-table td {
		width: 121px;
		font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		line-height: 14px;
		padding: 4px;
		text-align: center;
		border-bottom: 1px solid #ffffff;
		border-right: 1px solid #ffffff;
		background-color: #f4eed8;
		vertical-align: top;
	}
	
		table.benefits-table td p {margin-top: 5px;}
		
	table.benefits-table td.benefit-variable {background-color: #d1c38f;}
	table.benefits-table td.benefit-high {background-color: #f8f8f8;}
	table.benefits-table td.benefit-moderate {background-color: #ededed;}
	table.benefits-table td.benefit-low {background-color: #dbdbdb;}
	
table.swatch-table {}

	table.swatch-table td {
		width: 76px;
		font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		line-height: 14px;
		padding: 4px;
		text-align: center;
		vertical-align: top;
	}
	
		table.swatch-table td p {margin-top: 5px;}

#footer-container {
	width: 100%;
	padding: 20px 0;
	font-size: 10px;
	background: url(../graphics/bg-footer.gif) repeat-x;
}

	#footer-container a, #footer-container a:visited {
		color: #26231b;
		text-decoration: underline;
	}
	
	#footer-container a:hover {
		color: #000000;
		text-decoration: underline;
	}

	.inside-container {
		width: 780px;
		margin: 0 auto;
		position: relative;
	}	

.pattern-container {
	width: 102px;
	margin: 14px 12px 0 0;
	padding: 5px;
	border: 1px solid #c2c2c2;
	background-color: #efefef;
	font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
	float: left;
}

	.pattern-container img {border: 1px solid #c2c2c2;}

.photo-caption-container, .framed-picture {
	width: 202px;
	padding: 5px;
	border: 1px solid #c2c2c2;
	background-color: #efefef;
	font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}

.framed-picture {margin: 14px 0 0 0;}
.photo-caption-container {margin: 15px 0 10px 20px; float: right;}

	.photo-caption-container img, .framed-picture img {
		border: 1px solid #c2c2c2;
	}		
	
	.photo-title {margin-top: 6px;}
	.photo-caption {margin-top: 6px; font-style: italic;}

.list-normal {
	margin: 11px 0 0 20px;
	padding: 0;
}

	.list-normal li {
		margin: 3px 0;
		padding: 0 0 0 17px;
		list-style: none;
		background: url(../graphics/bullet.gif) 0 3px no-repeat;
	}
	
		.list-normal ul {
			margin: 0 0 0 10px;
			padding: 0;
		}

.center {text-align: center;}
.hide {display: none;}

.content-10 {font-size: 10px; line-height: 15px;}
.content-11 {font-size: 11px; line-height: 16px;}

.text-dark-brown {color: #26231b;}
.text-red, strong.text-red, b.text-red {color: #FF0000;}

.margin-top-30 {margin-top: 30px;}

.float-left {float: left;}
.float-right {float: right;}

/****** CLEAR PROPERTIES ******/

.clear-both {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

*html .clearfix {height: 1%;}