@font-face {
    font-family: "Square721 BT";
    src: url('/fonts/square721-webfont.ttf') format('truetype'),
		url('/fonts/square721-webfont.eot') format('eot');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0; padding: 0;
	background: url(../images/bg.gif) repeat;
	color: #c39e9e;
	text-align: left;
	font-family: verdana, Sans-Serif; font-size: 12px;
}

h2, h3, h4, h5, p { margin: 0; padding: 7px 0; }
h1 { font-size: 30px; font-weight: normal; margin: 0; padding: 0; }
h2 { color: #a6735f; font-family: "Square721 BT", Arial; font-size: 28px; font-weight: normal; clear: both;}
h3 { color: #a6735f; font-family: "Square721 BT", Arial; font-size: 20px; font-weight: normal; }
h4 { color: #FFF; font-size: 14px; font-weight: bold; }
hr { color: #CCC; background: #CCC; border:0; height: 1px; margin: 10px 0; clear: both; }
hr.white { color: #FFF; background: #FFF; }
p { text-align: left; line-height: 16px; }
a { color: #004A94; text-decoration: none; }
a:hover { color: #FFF; }
img { border: 0; }
img.blocks {	margin: 0 17px 20px 0; padding: 0 ;
	display: block; 
	float: left;
	}
img.right { display: block; float: right; }
img.left { display: block; float: left; margin: 10px 20px 0 0;}
img.intro  {display: block; float: right; width:170px; padding:0 35px 0 0;}
img.other {display: block; float: right; padding:0 0 0 15px;}
img.grip {display: block; float: right; padding:0 0 40px 15px;}
img.eco {display: block; float: right; padding:0 0 0 28px;}
img.slogan { display: block; float: right; margin: 40px 0 0 0; }
input.flright { float: right !important; }
br.clear { width: 100%; height: 1px; margin: 0; padding:0; display: block; clear: both; }
ul li, ol li { margin: 0; padding: 5px 0; }
hr.brown{color:#3F2115; background:#3F2115;}
.uc { text-transform: uppercase; }
.hide { display: none; }
.red { color: #BF0000; }
.clear { clear: both; }
.center { text-align: center; }
.right { text-align: right; }
.small { font-size: 11px; }
.small h3 { font-size: 13px; clear: left; }
.flat { margin: 0 !important; padding: 0 !important; }
.more-link { font-size: 11px; text-align: left; margin: 0; padding: 5px 5px 0 5px; clear: both; }
.breadcrumb { margin: 0; padding: 5px 10px; background: #EEE; color: #666; font-size: 11px; }
.product-info { width: 300px; margin: 0; padding: 0; float: right; }
.product-box { width: 260px; margin: 10px 10px 10px 0; padding: 0; float: left; }
.product-box img.product-photo { margin: 0 5px 5px 0; display: block; }
.product-box ul.thumbs { margin: 0; padding: 0; list-style: none; }
.product-box ul.thumbs li { margin: 0; padding: 0 5px 5px 0; display: block; float: left; }
.product-box ul.thumbs li a { margin: 0; padding: 0; display: block; float: left; }
.product-box .info { padding: 7px 10px; }
.product-info { width: 300px; margin: 0; padding: 0; float: right; }
.price { font-weight: bold; }
.intro {display: block; float: left; margin: 0 0 20px 0; clear:both; width: 660px;}
.intro p{ display:block; float: left; width: 425px; }

/************************************************************************* layout ***/

#container {
	width: 890px;
	margin: 0 auto; padding: 0;
	text-align: left;

}

#header {
	width: 890px; height: 160px;
	margin: 0 auto; padding: 0;
	clear: both; display: block;
	
}
#header-container{
	width: 100%;
	margin: 0; padding: 0;
	clear: both; display: block; 
	background: url(../images/bg-header.png) repeat;
}
#content-left {
	width: 210px;
	margin: 20px 0 0 0; padding: 0;
	clear: both; float: left;

}

#content-main {
	width: 660px;
	margin: 20px 0 0 20px; padding: 0 0 20px 0;
	float: left; display: block;

}

#content-right {
	width: 0;
	margin: 0; padding: 0;
	float: left;
}

#footer {
	width: 890px; height: 161px;
	margin: 0 auto; padding: 0;
	display: block; clear: both; 
}


#footer-container{
	width: 100%; height: 161px;
	margin: 0; padding: 20px 0 0 0;
	clear: both; display: block; 
	background:  url(../images/bg-footer.png) repeat-x;
}

#footer ul.FootNav { width: 890px; margin: 0; padding: 10px 0 0 0; display: block; text-align: center; list-style: none; }
#footer ul.FootNav li { margin: 0; padding: 0 20px; display: inline; text-align:left; border-right: #563629 1px solid; }
#footer ul.FootNav li.end { border: 0; }
#footer ul.FootNav li a { color: #865744; font-size: 11px; font-weight: normal; text-transform: none; }
#footer ul.FootNav li a:hover { color: #666; }

.footer-nav {display: block; float:left;}

.footer-info{ display: block; float: left; width: 890px; margin: 40px 0 0 0; }
.footer-info p { margin: 0; padding: 0; font-size: 11px; text-align: left; color: #563629;}
.footer-info img{ display: block; float: left; margin: 0 30px 0 50px;}
.footer-info a{color: #563629;}

.copyright {
	display:inline; clear:both;
	color: #909194; font-size: 11px;
	text-align: left; margin: 0;
	float:left; display: block;
	margin: 50px 5px 5px 10px;
	
}

.copyright a { color: #909194; }
.copyright a:hover { color: #2E2E2E; }

.country-products {display: block; float: left; width: 300px; margin: 0 30px 0 0;}
.country-products img {display: block; float: left; margin: 10px 0 20px 0;}
/************************************************************************* branding ***/

a.logo {
	width: 271px; height: 108px;
	margin: 20px 0 20px 0; padding: 0;
	display: block; float: left;
	background: url(../images/logo.png) no-repeat;
}
a.logo span { display: none; }

.box {
	width:203px; height: 229px;
	margin: 0 17px 20px 0; padding: 0 ;
	display: block; 
	float: left;
}
.box h4 { margin: 0; padding: 7px 10px; font-size: 12px; }
.box.masterpile{ background: url(../images/boxes/box-masterpile.png) no-repeat; }
.box.plasticlumber{ background: url(../images/boxes/box-plasticlumber.png) no-repeat;}
.box.ecopave{ background: url(../images/boxes/box-ecopave.png) no-repeat;}

.box .info {
	width: 175px;
	margin: 0 ; padding: 80px 0 0 10px;
	float: left;
}
.box .info h3{ margin: 0; padding: 0; text-align: left; }
.box .info.mobile h2{ margin: 10px 0 5px 0; padding: 0; text-align: left; }
.box .info h3{ margin: 0 0 0 0; padding: 0; text-align: left; }
.box .info a{ cursor: hand; }
.box .info p { margin: 0; padding: 5px 0; color:#FFF; font-size: 11px; }

.whatbox {
	width:658px; height: 203px;
	margin: 0 0 0 0; padding: 0 ;
	display: block;
	float: left;
	background: url(../images/boxes/what_is.png) no-repeat;
}
.whatbox img { display: block; margin: 4px 0 0 2px; padding: 0 20px 0 0; float: left; }
.whatbox .text {
	width: 430px;
	margin: 0 ; padding: 0 0 0 0;
	float: left; display: block;
}
.whatbox .text h3{ margin: 20px 0 7px 0; padding: 0; text-align: left; }
.whatbox .text p { margin: 0; padding: 5px 0;  }

.nav { 
	width: 210px; height:663px; margin:0 auto; padding:0; 
	float: left; display: block; 
	list-style: none; 
	background: url(../images/nav-bg.png) no-repeat;
}

ul.nav{ margin: 0; padding: 0; list-style: none; display: block; clear:both; }

ul.nav  li a{
	height: 15px; width:200px;
	margin: 15px 5px 15px 5px; padding: 0 0 0 5px;
	display: block; float: left;
	list-style: none; font-size: 14px;
	font-weight: bold; color: #cab8aa;
}
	
ul.nav  li a:hover {color: #FFF;}

ul.nav li ul { margin: 5px 5px; padding: 0; list-style: none; display: block; clear:both; }
ul.nav li ul li a {
	height: 10px; width:200px;
	margin: 5px 7px; padding: 0 0 0 15px;
	display: block; float: left;
	list-style: none; font-size: 11px;
	font-weight: normal; color: #cab8aa;
	background: url(../images/arrow.png) no-repeat center left;
}
	
/************************************************************************* forms ***/

fieldset.contact_form {
	width: 326px;
	margin: 10px 40px 0 0; padding: 0;
	float: left;
}
fieldset.contact_form dl dt { width: 100px; margin: 5px 0; padding: 0 5px 0 0; float: left; clear: both; font-size: 13px; text-align: right; }
fieldset.contact_form dl dd { width: 210px; margin: 5px 0;  float: left; }
fieldset.contact_form dl dd input#submit { cursor: pointer; }
form, fieldset, dl, dt, dd { margin: 0; padding: 0; border: 0; }
input.text, textarea.text {
	width: 200px; padding: 3px;
	font-size: 13px; font-family: Arial, Sans-Serif;
}
textarea.text { height: 100px; }

input.postcode { width: 90px; }

form.add-basket { margin: 0; padding: 0 0 70px 0; }

/************************************************************************* MultiBox v1.3 ***/

.MultiBoxContainer {
	position: absolute;
	border: 20px solid #FFF;
	background-color: #FFF !important;
	display: none;
	z-index: 2;
	text-align: left;
}

.MultiBoxLoading {
	background: url(../images/multibox/loader.gif) no-repeat center;
}

.MultiBoxContent {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.MultiBoxClose {
	position: absolute;
	top: -26px;
	right: -26px;
	background: url(../images/multibox/close.png) no-repeat;
	width: 24px;
	height: 24px;
	cursor: pointer;
}


.MultiBoxControlsContainer {
	overflow: hidden;
	height: 0px;
	width: 100%;
	position: relative;
}

.MultiBoxControls {
	width: 100%;
	height: auto;
	background-color: #FFF;
	padding: 0 0 2px 0;
	position: absolute;
	bottom: 0px;
}


.MultiBoxPrevious {
	position: absolute;
	background: url(../images/multibox/left.png) no-repeat;
	width: 24px;
	height: 24px;
	left: 0px;
	margin-top: 5px;
	cursor: pointer;
}

.MultiBoxNext {
	position: absolute;
	background: url(../images/multibox/right.png) no-repeat;
	width: 24px;
	height: 24px;
	right: 0px;
	margin-top: 5px;
	cursor: pointer;
}

.MultiBoxNextDisabled {
	cursor: default;
	background: url(../images/multibox/rightDisabled.png) no-repeat;
}

.MultiBoxPreviousDisabled {
	cursor: default;
	background: url(../images/multibox/leftDisabled.png) no-repeat;
}

.MultiBoxTitle {
	position: relative;
	margin: 10px 0 0 35px;
	padding: 0 0 0 10px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2E2E2E;
	font-weight: bold;
	text-align: left;
}

.MultiBoxNumber {
	position: relative;
	width: 50px;
	margin: 10px 35px 0 0;
	float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	text-align: right;
}

.MultiBoxDescription {
	clear: left;
	position: relative;
	margin: 0 35px 0 35px;
	padding-top: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	text-align: left;
}

.gall {
	text-align:left; clear:both;
}

div.gall img {margin:5px 5px 5px 5px; border:0;}


ul.gallery  { margin: 0; padding: 0; list-style: none; }
ul.gallery  li { width: 100px; height: 100px; margin: 10px 20px 10px 0; padding: 0; 
 display: block; float: left; text-align: center;
}

ul.gallery  li a { width: 100px; display: block; color: #FFF;}
ul.gallery  li.end  { margin: 10px 10px 10px 30px; padding: 0; }
/*************************************************************/