/* CSS Document */

#pageContainer {
	width: 780px;
	margin: 25px auto 0px auto;
	
	position:relative;
}

#footer {
	width: 754px;
	margin:0px auto 0px auto;
	position:relative;
	padding: 10px 0 0 42px;
	font-size:11px;
	color:#ffffff;
}
#footer a {
	margin: 0 20px;
	color: #ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #ffff00;
	text-decoration:none;
}

/* =================================================================
	Menu bar on the left
/ ================================================================= */

#menuBar {
	width: 25px;
	height: 530px;
	padding: 0px;
	margin: 0px;
	position:relative;
	float:left;
	z-index: 101;
}

/* 1px extra height for each button becasue IE6 get the bottom margin all wrong if you try to use that */

#menuBar a.contact {
	background-image:url(/images/buttons/contact.png);
	height: 95px;
}
#menuBar a.awards {
	background-image:url(/images/buttons/awards.png);
	height: 96px;
}

#menuBar a.clients {
	background-image:url(/images/buttons/clients.png);
	height: 73px;
}

#menuBar a.press {
	background-image:url(/images/buttons/press.png);
	height: 74px;
}

#menuBar a.caseStudies {
	background-image:url(/images/buttons/case_studies.png);
	height: 117px;
}

#menuBar a.gallery {
	background-image:url(/images/buttons/gallery.png);
	height: 77px;
}


#menuBar a {
	display:block;
	width: 25px;
	overflow:hidden;
	border:none;
	background-repeat:no-repeat;
	background-position:-70px 0;
	text-indent: 50px;
	margin-bottom: 0px;
	text-decoration:none;
}

#menuBar a:hover {
	background-position:-35px 0;
	text-decoration:none;
}

#menuBar a img {
	border:none;
}




/* =================================================================
	Other main page elements
/ ================================================================= */


#top {
	height: 141px;
	margin:0 0 1px 26px;
	background-color:#333333;
	position:relative;
}

#top #mainLogo {
	position:absolute;
	right: 30px;
	top: 40px;
}

#top #callUs {
	width: 400px;

	position: absolute;
	left: 40px;
	top: 50px;

	padding: 0px;

}

#middle {
	height: 150px;
	margin:0 0 0px 26px;
	background-color:#333333;
	position:relative;
	background-repeat:no-repeat;
}


#middle #headingBG {
	display:block;
	position:absolute;
	width: 690px;
	height: 35px;
	bottom: 0px;
	left: 30px;
	background-color:#333333;
	filter:alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;
	KHTMLOpacity:0.7;
}

.middlePath {
	background-image:url(/images/middle/path.jpg);
}
.middleBoy {
	background-image:url(/images/middle/boy.jpg);
}
.middleFence {
	background-image:url(/images/middle/fence.jpg)
}
.middleLeaves {
	background-image:url(/images/middle/leaves.jpg);
}
.middleSlabs {
	background-image:url(/images/middle/slabs.jpg);
}

.middle1 {
	background-image:url(/images/middle/1.jpg);
}
.middle2 {
	background-image:url(/images/middle/2.jpg);
}
.middle3 {
	background-image:url(/images/middle/3.jpg);
}
.middle4 {
	background-image:url(/images/middle/4.jpg);
}
.middle5 {
	background-image:url(/images/middle/5.jpg);
}
.middle6 {
	background-image:url(/images/middle/6.jpg);
}
.middle7 {
	background-image:url(/images/middle/7.jpg);
}
.middle8 {
	background-image:url(/images/middle/8.jpg);
}
.middle9 {
	background-image:url(/images/middle/9.jpg);
}

.middle10 {
	background-image:url(/images/middle/10.jpg);
}

#middle h1 {
	position: absolute;
	left: 55px;
	bottom: 7px;
	font-size:14px;

	font-weight:normal;
	padding: 0px;
	margin: 0px;
}

#bottom {
	height: 218px;
	background-color:#333333;
	margin:1px 0 0px 26px;
	
	position:relative;
	
	padding: 10px 30px 10px 30px;	
}