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

body{
	background:#362F2D url(Images/bkg.jpg) bottom left no-repeat fixed;
	margin:25px;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:medium;
	}

#container{
	width:800px;
	margin:auto;
	text-align:center;
	background:url(Images/contentwide.png) repeat-y;
	border:#362F2D 2px solid;
	}

#banner{
	width:800px;
	height:185px;
	padding:0;
	margin:0 0 -35px;
	display:block;
	background:url(Images/banner.png) top no-repeat;
	}

#navigation{
	display:inline-block;
	margin:0;
	padding:0;
	font-size:smaller;
	font-variant:small-caps;
	text-align:left;
	position:relative;
	z-index:1;
	}

.navlink{
	display:inline-block;
	float:left;
	text-align:left;
	width:110px;
	vertical-align:top;
	position:relative;
	margin:5px 10px;
	height:25px;
	border:#362F2D 1px solid;
	}
	.navlink a{
		height:25px;
		padding:5px;
		text-decoration:none;
		font-weight:bold;
		color:#EFE7DD;
		display:block;
		background:url(Images/nav.png) top repeat-x;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
		}
	.navlink a:hover{
		color:#362F2D;
		background:url(Images/nav.png) bottom repeat-x;
		}

#menubox{
	height:0px;
	display:block;
	overflow:hidden;
	position:relative;
	background:#362f2d;
	}

#products:hover #menubox{
	height:230px;
	}

#menu{
	text-align:left;
	width:110px;
	position:absolute;
	bottom:0px;
	left:0px;
	}
	#menu a{
		height:25px;
		padding:5px;
		text-decoration:none;
		font-weight:bold;
		color:#EFE7DD;
		display:block;
		background:none;
		}
	#menu a:hover{
		color:#362F2D;
		background:url(Images/nav.png) bottom repeat-x;
		}

#link{
	width:auto;
	text-align:center;
	display:block;
	padding:10px 0;
	}

#content{
	width:800px;
	float:left;
	display:inline-block;
	color:#362F2D;
	text-align:left;
	}
#content a{
	color:#EFE7DD;
	text-decoration:none;
	border:none;
	font-weight:bold;
	}
#content a img{
	border:none;
	}

.text{
	width:740px;
	padding:0 30px;
	float:left;
	display:block;
	position:relative;
	}

.text.products{
	width:550px;
	}

.thumbs{
	display:block;
	width:inherit;
	text-align:center;
	padding:0;
	margin:0;
	}

.thumbnail{
	margin:5px 10px;
	display:inline-block;
	width:110px;
	height:60px;
	padding:0;
	border:#362F2D 1px solid;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	}
	#stone{background:url(Images/thumb_stone.png) no-repeat;}
	#soil{background:url(Images/thumb_soil.png) no-repeat;}
	#sand{background:url(Images/thumb_sand.png) no-repeat;}
	#mulch{background:url(Images/thumb_mulch.png) no-repeat;}
	#gravel{background:url(Images/thumb_gravel.png) no-repeat;}

.preview{
	color:#EFE7DD;
	}
.preview div{
	width:150px;
	height:150px;
	border:#362F2D 1px solid;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	visibility:hidden;
	position:absolute;
	right:-150px;
	top:15px;
	}
.preview:hover{
	cursor:default;
	}
.preview:hover div{
	visibility:visible;
	}

.column{
	width:340px;
	padding-right:30px;
	float:left;
	display:inline;
	}

#calculator{
	/*display:block;*/
	width:inherit;
	text-align:center;
	}
	#calculator form{
		display:inline-block;
		width:300px;
		font-size:80%;
		border:#362F2D 2px solid;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
		text-align:left;
		background-color:#998675;
		}
	#calculator label{
		display:inline-block;
		width:100px;
		font-size:125%;
		text-align:right;
		font-weight:bold;
		}
	#calculator input{
		display:inline-block;
		font-size:125%;
		border:#362F2D 1px solid;
		background-color:#C7B299;
		color:#362F2D;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
		margin:1px;
		padding:2px;
		}
		#calculator input:hover{
			border-width:2px;
			margin:0;
			}
		#calculator input:focus{
			border-width:2px;
			margin:0;
			background-image:none;
			background-color:#EFE7DD;
			}
	#calculator input.button{
		margin-left:100px;
		height:25px;
		padding:5px;
		display:block;
		font-size:small;
		font-weight:bold;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
		background:url(Images/nav.png) top repeat-x;
		border:#362F2D 1px solid;
		color:#EFE7DD;
		}
		#calculator input.button:hover, #calculator input.button:focus{
			color:#362F2D;
			background:url(Images/nav.png) bottom repeat-x;
			cursor:pointer;
			}

#footer{
	display:block;
	clear:both;
	width:740px;
	text-align:right;
	padding:0 30px 15px;
	font-size:x-small;
	color:#362F2D;
	}
#footer a{
	color:#362F2D;
	}