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


* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

*:focus {
    outline: none;
}

/* universally to remove the outline on the on click hyperlinked images */

html {height: 100%; background-color:#fff; overflow-y:scroll;}  /* OVERFLOW Y TO KEEP THE VERTICAL SCROLL BAR AT ALL TIMES TO PREVENT SCREEN JUMP BETWEEN PAGES. */

body {height: 100%; background-color:#fff;} /* SET YOUR BACKGROUND C0LOR THE SAME FOR BOTH HTML AND BODY */

img {margin:0px;padding:0px;border:none;} 

#header {position:relative;  /* FIXED TO HOLD IT IN PLACE */
width:100%;
height:202px;
background: #fff url('../images/headerbg.gif') repeat-x;
z-index:10;
}

#insideheader {
position:relative;
width:1136px; /* This width constitutes the width of a 1024 screen size allowing for a 20px scrollbar */
height:202px;
margin:0px auto;
background-color:#fff;
}

#insideheadercontainer {
position:relative;
height:140px;
background-color:#000000;
padding:5px 0px 10px 0px;
}

#barkingengineeringlogo {
position:relative;
top:4px;
left:456px;
width:172px;
height:77px;
}

#adboxbot {
position:relative;
width:728px;
height:90px;
margin:0px auto 0px auto;
}

#lefthanger {
float:left;
width:120px;
margin:0px 10px;
height:600px;
background-color:#ff9969;
}

#righthanger {
float:right;
width:120px;
margin:0px 10px;
height:600px;
background-color:#ff9969;
}



#logo {position:fixed;
margin-left:-200px;
width:184px;
height:116px;
background: #330000;
}


#wrap {width:1136px;
    min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0px auto -80px auto; /* the bottom margin is the negative value of the footer's height */
	background-color:#fff;
	
}

#push {
	height: 80px; /* .push must be the same height as .footer */
	width:1136px; /* added width to stop IE from adding horizontal scroll bars */
	margin:0px;
}

#footer {
width:100%;
height:80px;
background-color:#fff;
margin:0px auto;
}

#footercontainer {
width:1136px;
height:49px;
margin:0px auto;
padding:20px 0px 30px 0px;
background-color:#fff;
}

.hrbox {
width:1136px;
height:0px;
margin:0px;
border-top: 2px solid #C5C5B8;
}

#nav-container {
position:fixed;
width:184px;
height:390px;
margin-top:116px;
margin-left:-200px;
background-color:#a07;

}




ul#navigation { width: 1136px;}

ul#navigation li {
  display: inline;
  list-style: none;
  background-color: #c5c5b9;
  border-right: solid 1px #5c7042;
  text-align: left;
  } 
  


ul#navigation li a {
  display: inline;
  text-decoration: none;
  font-size:14px;
  margin-left:3px;
  /* border-bottom: solid 1px #39f;  box off the nav elements creating a button effect */
  /* border-right: solid 1px #39f;   box off the nav elements creating a button effect */
} 

.homespacer  {
  padding: 0px 60px 0px 61px;
}

.firespacer  {
  padding: 0px 49px 0px 50px;
}


.gardenspacer  {
  padding: 0px 54px 0px 55px;
}

.gatesspacer  {
  padding: 0px 36px 0px 37px;
}

.stairspacer  {
  padding: 0px 48px 0px 49px;
}

.bespokespacer  {
  padding: 0px 52px 0px 49px;
}

.contactusspacer  {
  padding: 0px 47px 0px 43px;
  border-right:none;
}








#contentcontainer {
position:relative;
width:1136x;
margin:0px auto 0px auto;
background-color:#fff;
}

#contenttext {
position:relative;
width:916px;
margin:0px 53px 0px 53px;
}



#footerleft {float:left;
margin-left:50px;}
#footerright {float:right;
margin-right:50px;}

.clearfloats {clear:both;}

#navigationholder {position:relative;
width:auto;
height:30px;
background-color:#c5c5b9;
padding-top:6px;
}

#emailtelephone {float:right;
width:250px;
height:88px;
margin-bottom:-88px;
}

#hetas {float:left;
width:130px;
height:55px;
margin:6px 0px -61px 53px;
background: #000 url('../images/hetas.jpg') repeat-x;
}

#hetasgif {float:left;
width:86px;
height:37px;
margin:6px 0px -43px 53px;
background: #000 url('../images/hetas.gif') repeat-x;
}

#flyergif {position:relative;
top:47px;
left:0px;
width:86px;
height:123px;
margin:0px;
background: #000 url(/*'../images/barkingflyer.gif'*/) repeat-x;
}


#winterwarmer {position:relative;
top:7px;
left:33px;
width:281px;
height:54px;
margin:0px;
}

#toptelephone {margin-top:12px;font-size:28px;color:#c5c5b8;}

#homepageintro {position:relative;
width:1136px;
height:660px;
background: #222 url('../images/istock_000014243144large.jpg') repeat-x;
border:none;
margin:0px 0px 20px 0px;
z-index:10;
}

#introtext {position:relative;
width:400px;
top:50px;
left:50px;
color:#ffffff;
}

#bespokebox {float:right;
width:160px;
height:160px;
margin-right:560px;
}


.previewbox {float:left;
width:272px;
height:230px;
margin:20px 16px 20px 0px;
background-color:#c5c5b9;

}

.previewboxfarright {float:left;
width:272px;
height:230px;
margin:20px 0px 20px 0px;
background-color:#c5c5b9;
}

.preview-top-title {position:relative;
font-size:20px;
width:auto;
padding:4px 20px 5px 20px;
	
}

.preview-bottom-title {position:relative;
width:auto;
padding:0px 0px 0px 10px;
	
}

#breadcrumbcontainer {position:relative;
margin:0px 0px 20px 0px;
}


#mapcontainer {float:right;
width:700px;
height:500px;
margin-left:20px;
margin-bottom:20px;
}

#contactcontainer {float:left;
width:370px;
}

.paraone {float:left;
width:368px;
margin:0px 0px 10px 0px;
}

.paratwo {float:left;
width:368px;
margin:0px 0px 10px 16px;
}

.parathree {float:left;
width:368px;
margin:0px 0px 10px 16px;
}


#leaflet {float:right;
width:86px;
height:123px;
margin:5px 43px 0px 0px;
background-color:#fff;
z-index:99;
}