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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	height:auto;
}
iframe {
	
}

/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
    position:absolute;
	background:url(../images/treehugger_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed !important;
	background-size:cover;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
	height:auto;
	width:100%;
	/*max-height:1300px;*/
}

#main	{
	display:block;
	margin:0 auto;
	width:80%;
	min-width:1000px;
	max-width:1200px;
	height:auto;
	background-color:#faffe1;
}



a.active{
color: #000 !important;
    background-color: #fff;
    padding: 6px;


}

#header	{
	width:100%;
	z-index:300;
	height:400px;
	background:#000;
	background:linear-gradient(to top, rgba(255,255,255,.3) 3%, rgba(0,0,0,0) 25%), #000;
	position:relative;
}

#main_logo	{
	width:25%;
	margin-left:-3%;
	float:left;
}

img.logo	{
	width:100%;
	max-width:250px;
	min-width:150px;
	height:auto;
}

#tagline	{
	width:52%;
	height:auto;
	float:left;
	padding-top:15px;
	padding-left:5%;
}

img.tagline	{
	
	width:100%;
	height:auto;
}

img#floor_img	{
	width:40%;
	height:auto;
	float:right;
	margin-top:-6%;
	margin-left:-18.5%;
	position:absolute;
	
}

.ie10 img#floor_img	{
	
	margin-left:3%;
	margin-top:-6%;
	
	
}



/*----------------------------------------------------- NAV ---------------------------------------------------------*/

li a	{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:1em;
	font-weight:500;
}

#main_nav	{
	position:relative;
	width:100%;
	height:50px;
}

#main_nav ul	{
	margin:0;
	float:right;
	margin-right:15px;
	list-style:none;
	text-decoration:none;

}

#main_nav ul li	{
	float:left;
	padding:15px 18px;
	
}

#main_nav ul li a	{
	text-decoration:none;
	color:#FFFFFF;
}

ul.dropdown {
    background: rgba(255,255,255,0.2);
    border-top: 5px solid #174B1D;
    left: 716px;
    top: 40px;
    width: 20%;
    position: absolute;
    font-size: 12px;
    display:none;
    z-index: 5;
    float: none!important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.dropdown a {
    border-bottom: 2px solid #174B1D;
    float: none !important;
    display: block;
    border-bottom-style: ridge;
}

ul.dropdown li:last-child {
    border-bottom: none;
    float: none !important;
    display: block;
    border-bottom-style: none;
}

ul.dropdown li:hover {
    background:#174B1D;
    transition: 1s ease-in;
    
}

li.products:hover > ul.dropdown {
display:block;

}

.mobDropdown li {
    background: #174B1D;
    margin: 0 !important;
    padding: 5px;
}






/*----------------------------------------------------- END NAV ---------------------------------------------------------*/

img.whatwedo {
	width:100%;
	height:auto;
}

img.img_100	{
	width:100%;
	height:auto;
}

img.products	{
	border:#FFFFFF 5px solid;
	-webkit-transition: all .4s ease-in-out;
	
}

img.products:hover	{
	-webkit-transform: scale(1.1);
		
}

.btn	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:1em;
	font-weight:500;
	width:110px;
	min_width:100px;
	padding:5px 10px;
	border:solid 2px #FFFFFF;
	background-color:rgba(0,204,153,.7), #009966;
	margin-left:5px;
}

.btn:hover	{
	background-color:#009966;
}

.btn2	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#666666;
	font-size:1em;
	font-weight:500;
	width:110px;
	min_width:100px;
	padding:5px 10px;
	border:solid 2px #666666;
	background-color:rgba(0,204,153,.7), #666666;
	margin-left:5px;
	margin-top:-15px;
}

.btn2:hover	{
	background-color:#009966;
	color:#fff;
}

#products	{
	position:relative;
	background:url(../images/wood_bg.jpg) no-repeat;
	background-size:cover;
	max-width:100%;
	height: 325px;
	padding:0 5%;
	overflow:hidden;
/*	margin-top:-5%;*/
	z-index:100;
	clear:both;
}

#product_detail_first, #product_detail_last	{
	width:22.5%;
	/*max-width:260px;*/
	float:left;	
}

#product_detail_first	{
	margin-right:3.3333%;
}

p.product_description	{
	text-align:left;
	color:#FFFFFF;
	margin-left:5px;
}

#product_detail_first h3, #product_detail_last h3	{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:18px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:0px;
	margin-left:5px;
	text-align:center;
}


#green_bar	{
	width:104%;
	background-color:#009966;
	background:linear-gradient(to right, rgba(0,0,0,.7) 3%, rgba(0,153,153,0) 45%), linear-gradient(to left, rgba(0,0,0,.7) 3%, rgba(0,153,153,0) 45%), #009966;
	
	/*background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0) 25%), linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,0) 25%),url(../images/cyan_bg.jpg) repeat ;*/
	height:50px;
	margin-left:-2%;
	padding-top:8px;
	font-size:1.8em;
	
}

#green_bar h1, #green_bar h1 a{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	
	font-weight:700;
	text-decoration:none;
	letter-spacing:2px;
}

#green_bar a:hover	{
	color:#666;
	text-decoration:underline;
}

#content	{
/*	position:relative;*/
	/*padding:20px 20px;*/
	width:100%;
	height:auto;
	margin: 0;
	/*margin-left:30%;*/
    padding-top: 5%;
	background-color:#faffe1;
	background:linear-gradient(to bottom, rgba(0,0,0,.3) 1%, rgba(0,0,0,0) 6%), linear-gradient(to top, rgba(0,0,0,.3) 1%, rgba(0,0,0,0) 6%), #faffe1;
}

#content h1	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-weight:700;
	font-size:1.7em;
	text-decoration:none;
	letter-spacing:;
/*	padding-left:35%;*/
	
}

#content h2	{
	float: center;
	font-family: 'Roboto', sans-serif;
	color: #009966;
	font-weight: 300;
	font-size: 1.3em;
	text-decoration: none;
	margin-bottom: 20px;
	letter-spacing:;
/*	padding-left:35%;*/
	
}

#content h3	{
	float:center;
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-weight:700;
	font-size:1.7em;
	text-decoration:none;
	letter-spacing:;
/*	padding-left:35%;*/
	
}


#content p	{
/*	padding-left:35%;*/
	float: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: .9em;
	color: #666666;
	width: 50%;
	max-width: 100%;
	height: auto;
	text-align: left;
	line-height: 1.8em;
	margin-bottom: 2%;
}

img.content_img	{
	/*position:absolute;
	top: 1%;
	left:5px;*/
	float:left;
	width:25%;
	height:auto;
	min-width:200px;
	margin: 0;
	margin-left: 8%;
	margin-right: 5%;
	margin-bottom:9%;
	border:5px solid #009966;	
}

.treedrop-video {
	height: 313px;
	position: relative;
	top: 897px;
	left: -519px;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;


}


.active-page {color:red;text-decoration:none; }
/*------------------------------ FOOTER ------------------------------------------------*/

#footer	{
	width:104%;
	margin-left:-2%;
	height: auto;
	background-color:#000;
	background:linear-gradient(to top, rgba(255,255,255,.3) 3%, rgba(0,0,0,0) 25%), #000;

	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight:400;
	font-size:.8em;
}

.col1	{
	width:30%;
	margin-right:5%;
	float:left;
	text-align:left;
	padding:15px 20px 0px 20px;
	box-sizing:border-box;
	
}

.col2	{
	width:30%;
	margin-right:5%;
	float:left;
	text-align:left;
	padding:15px 20px 0px 20px;
	box-sizing:border-box;
	
}

.col3	{
	width:30%;
	
	float:left;
	text-align:right;
	padding:15px 50px 0px 20px;
	box-sizing:border-box;
	
}

.col1 h1, .col2 h1, .col3 h1	{
	text-align:left;
	color:#096;
	margin-bottom: 10px;
	padding-left: 40px;
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-size:1.8em;
}

.col3 h1	{
	text-align:right;
}

.col1 ul, .col2 ul, .col3 ul	{
	list-style:none;
	color:#fff;
}

.col1 ul li, .col2 ul li, .col3 ul li	{
	margin-bottom:8px;
}

#copyright	{
	width:100%;
	text-align:center;
	padding-bottom:10px;
}

#div1, #div2	{
	display:none;
	}


#sustain	{
	position:relative;
	max-width:100%;
	height:auto;
	padding:0 5%;
	padding-bottom:4%;
/*	margin-top:-5%;*/
	z-index:100;
	clear:both;
}

#sustain_detail_first, #sustain_detail_last	{
	width:22.5%;
	/*max-width:260px;*/
	float:left;	
}

#sustain_detail_first	{
	margin-right:3.3333%;
}

p.sustain_description	{
	text-align:center;
	color:#FFFFFF;
	margin-left:5px;
	width:95% !important;
}

#sustain_detail_first h3, #sustain_detail_last h3	{
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-size:18px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:0px;
	margin-left:5px;
	text-align:center;
}

#sustain img.products	{
	border:#009966 5px solid;
}

li a {
	text-decoration:none;
		
}

h1.contact	{
	width:100%;
	text-align:center;
	/*margin:0px -25% 0px 50%;*/
}

/*----------------------------------------------------- FAMILY RECIPE PAGE ---------------------------------------------------------*/
.woodfloor {
	background-image: url('../images/floor.jpg');
	height:1751px;

}

.leftpic {
	float: left;
	margin-left: 141px;
	margin-top: 43px;
	border: 2px solid #000;
	max-width: 100%;
	height: auto;
	box-shadow: 2px 2px 17px #000;

}

.rightpic {
	float: right;
	margin-right: 130px;
	margin-top: 47px;
	border: 2px solid #000;
	height: auto;
	max-width: 100%;
	box-shadow: 2px 2px 17px #000;

}

.info-box p {
	height: 99px;
	width: 74% !important;
	background: rgba(250, 255, 203, 1);
	opacity: 0.4;
	position: relative;
	font-weight: bold !important;
	color: #000 !important;
	top: 10px;
	left: 143px;
	padding: 18px;
	opacity: 1;

}
.videocaption {
	position: relative;
	top: 384px;
}


.pagination p {

font-weight: bold !important;
font-size: 1.4em !important;
float: right !important;

}

.atv {
	height: 313px;
	position: relative;
	top: 248px !important;
	left: -752px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;

}

.sawmill {
	height: 313px;
	position: relative;
	top: 40px !important;
	left: 25px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;
}

.edger {
	height: 313px;
	position: relative;
	top: 43px !important;
    	left: -19px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;
}

.logosol {
	height: 300px;
	position: relative;
    	top: -453px !important;
    	left: -479px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;
}

.install {
	height: 313px;
	position: relative;
	top: 42px !important;
	left: -25px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;
}

.floor-installation {
	height: 313px;
	position: relative;
    	top: 19px !important;
    	left: 476px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;
}

.owners {
	height: 313px;
	position: relative;
    	top: 62px !important;
    	left: -21px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;
}



.logosol-video {
	height: 313px;
	position: relative;
	top: 19px !important;
    	left: -401px !important;
	box-shadow: 2px 2px 17px #000;
	border: 2px solid #000;

}
.kiln {max-height: 313px;}

.oddball {
	height:335px;
}

.my-gallery {
  width: 100%;
  float: left;
}
.my-gallery img {
  width: 100%;
  height: auto;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  display: none;
}