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

html {
	background: #000;
}
body {
	margin: 0px;
	padding: 0px;
}

/* Header */
#header {
	background: url(../images/top-decking.jpg) repeat-x;
	width: 100%;
	height: 169px;
}
	#header-content {
		width: 795px;
		margin: 0 auto;
		position: relative;
		top: 40px;
	}
		h1 {
			margin: 0px;
		}
			a img {
				border: none;
			}
#top-bar {
	background: url(../images/top-bar.jpg) repeat-x;
	width: 100%;
	height: 46px;
}

	/* Main Nav */
	#menu {
		list-style-type: none;
		margin: 0px auto;
		padding: 0px;
		width: 802px;
		font-family: "Arial", "Helvetica", sans-serif;
		font-size: 18px;
		text-align: center;
		color: #fff;
		position: relative;
		left: 2px;
		z-index: 70;
	}
		#menu li {
			display: inline;
		}
			#menu li a {
				display: block;
				float: left;
				height: 39px;
				padding: 7px 11px 0px 10px;
				color: #fff;
				text-decoration: none;
				border-right: 1px solid #000;
			}
			#first {
				border-left: 1px solid #000;
			}
			#menu li a:hover {
				background: url(../images/bg-hover.png) repeat;
			}
			
			/* Expandable Items */
			#menu li ul {
				position: absolute;
				top: 46px;
				left: -9000px;
				background: #560303;
				margin: 0px;
				padding: 0px;
				list-style-type: none;
				text-align: left;
				border-left: 10px solid #000;
			}
				#menu li ul li {
					display: block;
					background: url(../images/top-bar.jpg) repeat-x;
					height: 38px;
				}
					#menu li ul li a {
						float: none;
						height: 31px;
						padding: 7px 0px 0px 10px;
					}
			#menu li:hover ul {
				left: 0px;
			}
			
			#menu li:hover #wood-species {
				margin: 0px 0px 0px 68px;
				width: 129px;
			}
			#menu li:hover #our-company {
				margin: 0px 0px 0px 543px;
				width: 124px;
			}
			

/* Content Container */
#container {
	background: url(../images/bg-body.jpg) repeat;
	width: 100%;
}
	#inner-container {
		width: 795px;
		margin: 0 auto;
		background: #fff;
	}
		
		/* Main Content */
		#content {
			float: left;
			width: 500px;
			min-height: 522px;
			margin: 25px 0px 25px 25px;
			padding: 0px 25px 0px 0px;
			border-right: 1px solid #000;
			font-family: "Arial", "Helvetica", sans-serif;
			font-size: 12px;
			text-align: justify;
			color: #666;
		}
			#slider {
				height: 250px;
				background: #000;
				margin: 0px 0px 20px 0px;
			}
			h3 {
				font-size: 14px;
				margin: 0px 0px 10px 0px;
			}
			p {
				margin: 0px 0px 20px 0px;
			}
			#content a {
				color: #890303;
				text-decoration: none;
			}
			.calltoaction {
				color:#000000;
				font-size: 14px;
				font-style:italic;
				text-align:center;
			}
			#content a:hover {
				color: #bc3636;
				text-decoration: underline;
			}
			.caption {
				font-size: 10px;
				font-style: italic;
			}
			table {
				width: 500px;
				text-align: left;
			}
				td {
					border: 1px solid #000;
					padding: 5px;
				}
			#contact-info td {
				border: none;
			}
			
			/* Gallery */
			#gallery-window {
				width: 500px;
				height: 250px;
				background: #000;
				margin: 0px 0px 20px 0px;
			}
				#gallery-window p {
					color: #888;
					text-align: center;
					position: relative;
					top: 100px;
				}
			.gallery-row {
				background: #ddd;
				height: 70px;
				margin: 0px 0px 10px 0px;
				padding: 5px;
			}
			#ipe-gallery {
				background: url(../images/bg-ipe.jpg);
			}
			#cumaru-gallery {
				background: url(../images/bg-cumaru.jpg);
			}
			#tigerwood-gallery {
				background: url(../images/bg-tigerwood.jpg);
			}
			#garapa-gallery {
				background: url(../images/bg-garapa.jpg);
			}
				.thumbnail {
					border: 1px solid #000;
				}
				.gallery-label {
					font-weight: bold;
					font-size: 25px;
					color: #fff;
					filter:alpha(opacity=50);
					-moz-opacity:0.5;
					-khtml-opacity: 0.5;
					opacity: 0.5;
					text-align: right;
					position: relative;
					top: -50px;
					right: 15px;
				}
				.spacer {
					clear: left;
				}
				
				/* create the hover effect on the gallery images */
				.gallery-img {
					display: inline;
					margin: 0px 5px 0px 0px;
					position: relative;
					z-index: 80;
					cursor: pointer;
				}
					
		/* Right-Hand Sidebar */
		#sidebar {
			background: #efe9d9;
			float: left;
			width: 200px;
			margin: 25px 0px 25px 25px;
			padding: 5px 0px 0px 0px;
			font-family: "Arial", "Helvetica", sans-serif;
		}
			#sidebar p {
				font-size: 12px;
			}
			#sidebar img {
				margin: 0px 0px 5px 0px;
			}
		#spacer {
			clear: left;
		}

/* Footer */
#bottom-bar {
	background: url(../images/bottom-bar.jpg) repeat-x;
	width: 100%;
	height: 45px;
}
#footer {
	background: url(../images/bottom-decking.jpg) repeat-x;
	width: 100%;
	height: 169px;
	color: #fff;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 12px;
}
	
	/* Bottom Nav */
	#footer-nav {
		width: 795px;
		margin: 0 auto;
		padding: 20px 0px 0px 0px;
		text-align: center;
		background: url(../images/bg-footer-nav.png) no-repeat;
		background-position: top center;
		height: 47px;
		position: relative;
		top: 1px;
	}
		#footer-nav a {
			color: #fff;
			text-decoration: none;
		}
		#footer-nav a:hover {
			text-decoration: underline;
		}
.video-container {
	margin: 0 0 2em 0;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



@media screen and (max-width: 51em) {
#header {
	background: url(../images/top-decking.jpg) repeat-x;
	width: 100%;
	height: 100px;
}
	#header-content {
		width: 100%;
		margin: 0 auto;
		position: static;
	}
#top-bar {
	background: url(../images/top-bar.jpg) repeat;
	width: 100%;
	height: auto;
}
#menu {
	width: 100%;
	position: static;
	left: 2px;
}
#menu:after {
	content: "";
	display: block;
	clear: both;
}
	#menu li {
		display: inline;
	}
		#menu li a {
			width: 33%;
			height: 39px;
			padding: 7px 0 0 0;
			border: none;
		}
		#menu li ul {
			display: none;
		}
#inner-container {
	width: 100%;
}
#content {
	float: none;
	width: 90%;
	margin: 0 auto;
	padding: 25px 0;
	border-right: none;
}
#slider {
	width: 100%;
}
#gallery-window {
	width: 100%;
	height: auto;
}
img {
	max-width: 100%;
	height: auto;
}
table {
	width: 100%;
}
#sidebar {
	display: none;
}
#footer-nav {
	width: 100%;
}

}