*{ margin: 0; padding: 0;}

html{overflow-y:scroll;}

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: auto;
	color: #333;
}

h1{ float: left; font-size: 18px; color: #333333; margin: 0 0 0 0;}
h2{float: left; font-size: 18px; color: #333333; }   
h3{float: left; font-size: 18px; color: #333333;}   
h4{ float: left; font-size: 16px; color: #333333; }
h5{float: left; font-size: 16px; color: #333333; font-weight: bold; }

p{margin: 5px 0 10px; line-height: 18px;}

a{ color: #d17606;}
a:hover{ color: #333;}

.intro{font-size: 16px; line-height: 20px; margin: 10px 0 20px 0;}

.bullets{ margin: 0 0 0 20px; line-height: 18px;}


/***********
container
***********/

#container{
 	width: 100%;
	margin: auto;
}

/*********** 
HEADER  
***********/

#header{
 	width: 100%;
	margin: auto;
	background: url(../images/page-border.jpg) repeat-x;
}

#header-inner{
	width: 960px;
	height: 90px;
	margin: auto;
	padding: 30px 0 10px 0;
}

#logo{
	position:absolute;
	width: 208px;
	height: 109px;
	margin: 0 0 0 10px;
	_margin: 0 0 0 -50px;
	z-index: 2;
}

#logo a img{ text-decoration: none; border: none;}

#contact-number{
	float: right;
	width: 500px;
	*width: 200px;
	margin: 0 10px 10px 0;
	text-align: right;
}

#contact-number p{ font-size: 18px; letter-spacing: 1px;}


/*********** buttons ***********/

#buttons{
	float: right;
	width: 400px;
	height: 40px;
	margin: 0 10px 0 50px;
	*margin-top: 39px;
	*margin-right: -200px;
	text-align: right;
}

.solidblockmenu{
	margin: 0 0 0 10px;	
	padding: 0;
	float: left;
	font: 14px Arial;
	color: #fff;
	border-width: 1px 0;
}

.solidblockmenu li{float: left; display: block; text-align: right; }
.solidblockmenu li a{ float: left; padding: 10px 15px 11px 15px; text-decoration: none; color: #333;}
.solidblockmenu li .last{border-right: none;}
.solidblockmenu li a:hover, .solidblockmenu li .current{ border-bottom: 5px solid #f7961e; color: #f7961e; }

body#body-home  a#menu-home,
body#body-about  a#menu-about,
body#body-services  a#menu-services,
body#body-portfolio  a#menu-portfolio,
body#body-contact  a#menu-contact
{
	border-bottom: 5px solid #f7961e; color: #f7961e; 
}



/*********** 
SMALL GREY BAND  
***********/

#sm-grey-band{
 	width: 100%;
	margin: auto;
	background: url(../images/grey-back.jpg) repeat-x;
}

#sm-grey-band-inner{
	width: 960px;
	height: 100px;
	margin: auto;
	padding: 0 0 0 0;
}

#sm-grey-text{
	float: left;
	width: 900px;
	margin: 5px 0 0 20px;
}

.grey-text-italic{ font-size: 20px; color: #333333;  font-weight:bold; margin: 0 0 20px 0; font-style:italic; }




.back-button{
	float: right;
	width: 100px;
	margin: -25px 0 0 0;
	text-align: right;
}



/*********** 
GREY BAND  
***********/

#grey-band{
 	width: 100%;
	margin: auto;
	background: url(../images/grey-back.jpg) repeat-x;
}

#grey-band-inner{
	width: 960px;
	height: 266px;
	margin: auto;
	padding: 0 0 0 0;
}

#grey-left{
	float: left;
	width: 530px;
	margin: 20px 0 0 20px;
	_margin: 0;
}

#grey-right{
	float: left;
	width: 391px;
	height: 265px;
	margin: 0 0 0 10px;
	_margin: 0;
	background:url(../images/computer.jpg) no-repeat;
}

.orange-text{ font-size: 36px; color: #f7961e; font:"Arial Black", Gadget, sans-serif; font-weight:bold; margin: 20px 0 20px 0;  }
.grey-text{ font-size: 30px; color: #333333; font:"Arial Black", Gadget, sans-serif; font-weight:bold; margin: 0 0 20px 0; }

.top-text{
	float: left;
	width: 360px;
	margin: 0 30px 0 0;
}

.view-portfolio{
	float: left;
	width: 113px;
	height: 35px;
	margin: 5px 0 0 0;
}

.view-portfolio a img{ text-decoration: none; border: none;}

.portfolio-gallery{
	float: left;
	width: 250px;
	height: 155px;
	margin: 27px 0 0 86px;
	_margin: 26px 0 0 43px;
	background: #993;
} 



/*********** 
CONTENT
***********/

#content{
	clear:both;
 	width: 100%;
	margin: auto;
}

#content-inner{
	width: 960px;
	min-height: 600px;
	margin: auto;
	padding: 0 0 0 0;
}


/*********** left-col ***********/

#left-col{
	float: left;
	width: 580px;
	margin: 30px 50px 10px 10px;
	_margin: 20px 0 0 0;
}

.left-text{
	float: left;
	width: 580px;
	margin: 5px 0 20px 0;
	border-top: 2px solid #dbdbdb;
	padding: 5px 0 0 0;
}

.left-text h2{ width: 580px; margin: 0 0 5px 0; font-size: 16px;}
.left-text h3{ width: 580px; margin: 0 0 5px 0; font-size: 14px;}

#marketing-section{
	float: left;
	width: 579px;
	height: 361px;
	margin: 0 0 0 0;
	background: url(../images/marketing-back.jpg);
}

.marketing-text{
	float: left;
	width: 320px;
	margin: 110px 0 0 20px;
}

.marketing-text h2{ width: 320px; margin: 0 0 5px 0;}

.grey-button{
	float: left;
	width: 111px;
	height: 33px;
	margin: 10px 0 0 0;
}

.grey-button a img{ text-decoration: none; border: none;}



/*********** right-col ***********/

#right-col{
	float: left;
	width: 300px;
	margin: 30px 10px 10px 10px;
	_margin: 20px 0 0 40px;
}

.icon{
	float: left;
	width: 24px;
	height: 24px;
	margin: 0 10px 0 0;
	background: #999;
}

#request-quote{
	float: left;
	width: 300px;
	height: 116px;
	margin: 20px 0 10px 0;
}

#request-quote a img{ text-decoration: none; border: none;}


/*********** what we do ***********/

#what-we-do{
	float: left;
	width: 300px;
	margin: 0 0 30px 0;
}

.col-text{
	float: left;
	width: 300px;
	margin: 5px 0 0 0;
	border-top: 2px solid #dbdbdb;
	padding: 5px 0 0 0;
}

.col-text ul{
	margin: 0 0 0 30px;
	list-style-image:url('../images/orange-bullet.jpg');
	line-height: 20px;
}

.col-text li{ margin: 0 0 4px 0;}



/*********** news ***********/

#news{
	float: left;
	width: 300px;
	margin: 0 0 20px 0;
}

.news-article{
	float: left;
	width: 300px;
	margin: 5px 0 0 0;
	padding: 5px 0 0 0;
}

.date{ color: #999; letter-spacing: 2px; margin: 0 0 0 0;}
.news-title{ font-size: 14px; }



/*********** left-col ***********/

#dbl-col{
	float: left;
	width: 940px;
	margin: 30px 10px 10px 10px;
}


/*********** portfolio ***********/

.our-portfolio{
	float: left;
	width: 940px;
	margin: 5px 0 20px 0;
	border-top: 2px solid #dbdbdb;
	padding: 5px 0 0 0;
}

.portfolio-entry{
	float: left;
	width: 280px;
	margin: 10px 50px 20px 0;
	_margin: 10px 20px 20px 0;
}

.portfolio-entry-end{
	float: left;
	width: 280px;
	margin: 10px 0 0 0;
	_margin: 10px 20px 20px 0;
}

.portfolio-img-holder{
	float: left;
	width: 278px;
	height: 178px;
	margin: 0 0 0 0;
	border: 1px solid #cfcece;
}

.portfolio-img{
	float: left;
	width: 270px;
	height: 170px;
	margin: 4px 0 0 4px;
	background: #993;
}

.portfolio-img a img{ text-decoration: none; border: none;}


.portfolio-name{
	float: left;
	width: 270px;
	margin: 0 5px 0 5px;
	font-size: 14px;
}


.portfolio-explained{
	float: left;
	width: 610px;
	margin: 10px 0 20px 0;
}

.portfolio-explained h2{ font-size: 14px;}
.portfolio-explained h3{ font-size: 14px;}


/*********** previous and next page ***********/

#portfolio-controls{
	float: left;
	width: 940px;
	margin: 0 0 0 0;
}

#previous-page {
	float: left;
	width: 100px;
	margin: 0 0 0 0;
}

#page-number {
	float: left;
	width: 720px;
	margin: 0 10px 0 10px;
	text-align:center;
}

#next-page {
	float: left;
	width: 100px;
	margin: 0 0 0 0;
	text-align:right;
}




#map {
	float: left;
	width: 300px;
	height: 250px;
	margin: 0 0 20px 0;
	background: #993;
}

#map a img{ text-decoration: none; border: none;}


#large-map{ float: left; width: 940px; height: 400px; margin: 20px 0 0 0; border: 1px solid #ccc;}

/*********** services ***********/


.our-services{
	float: left;
	width: 940px;
	margin: 5px 0 20px 0;
	border-top: 2px solid #dbdbdb;
	padding: 5px 0 0 0;
}

.service-entry{
	float: left;
	width: 280px;
	margin: 10px 50px 20px 0;
	_margin: 10px 20px 20px 0;
}

.service-entry-end{
	float: left;
	width: 280px;
	margin: 10px 0 20px 0;
	_margin: 10px 20px 20px 0;
}

.service-img-holder{
	float: left;
	width: 278px;
	height: 108px;
	margin: 0 0 0 0;
	border: 1px solid #cfcece;
	background: #fff;
}

.service-img{
	float: left;
	width: 270px;
	height: 100px;
	margin: 4px 0 0 4px;
	background: #993;
}

.service-img a img{ text-decoration: none; border: none;}


.service-name{
	float: left;
	width: 270px;
	margin: 5px 5px 0 5px;
}

.service-name h2{ font-size: 14px; width: 270px; margin: 0 0 5px 0;}


.service-list{
	margin: 10px 0 0 10px;
	list-style: none;
}


/*********** archive ***********/


.archive{
	float: left;
	width: 300px;
	margin: 5px 0 20px 0;
	border-top: 2px solid #dbdbdb;
	padding: 5px 0 0 0;
}

.archive ul li{
	margin: 0 0 5px 0;

}



/*********** 
orange
***********/

#orange{
	clear: both;
 	width: 100%;
	margin: auto;
	background:url(../images/footer-back.jpg) repeat-x #f8a43b;
}

#orange-inner{
	width: 960px;
	min-height: 230px;
	margin: auto;
	padding: 0 0 0 0;
}

.orange-col{
	float: left;
	width: 280px;
	margin: 30px 30px 10px 10px;
	_margin: 30px 26px 10px 10px;
}

.orange-col-text{
	float: left;
	width: 280px;
	margin: 5px 0 0 0;
}

.more-info{
	float: left;
	width: 77px;
	height: 23px;
	margin: 0 0 0 0;
	background: #996;
}

.more-info a img{ text-decoration: none; border: none;}



/***********
FOOTER
***********/

#footer-coloured{
	clear:both;
	width: 100%;
	background:url(../images/footer-small.jpg) repeat-x #333333;
	margin: auto;
	height: 120px;
}


#footer{
	clear:both;
	width: 100%;
	background:#333333;
	margin: auto;
	height: 120px;
}

#foot-inner{
	width: 960px;
	margin: auto;
	*margin-top: 11px;
	background: #333333;
}

.foot-col{
	float: left;
	width: 280px;
	margin: 10px 30px 10px 10px;
	_margin: 10px 26px 10px 10px;
}

.foot-col-text{
	float: left;
	width: 280px;
	margin: 5px 0 0 0;
	color: #fff;
}

/*********** SOCIAL NETWORKS  ***********/

#social-networks{
    float: left;
    width: 280px;
    margin: 3px 0 0 0;
}

.sn{ margin:0px; padding: 0px; float: left; overflow: hidden;}
.sn li{ display: inline; text-decoration: none;}
.sn li a {float: left; text-decoration:none; padding: 0 8px 0 0;}
.sn li a img{ color: #333; border: none; padding: 3px; }


/* CONTACT FORM */

#contactusform {
	line-height: normal;
	display:inline;
	width: 560px;
	float: left;
	margin: 10px 0 0 0;
	background: #efefef;
	padding: 10px;
}

#contactusform fieldset { border:none; width: 550px;}

#contactusform .contactlabel {
	float: left;
	width: 120px;
	font-size: 12px;
	color: #333333;
	padding: 5px 10px 4px 0;
}

#contactusform #name {width: 400px;	float: left;}
#contactusform #tel {width: 400px; float: left;}
#contactusform #email {	width: 400px; float: left;}
#contactusform #location {width: 400px;	float: left;}
#contactusform #country {width: 400px; float: left;}
#contactusform #comments {width: 400px;	float: left;}
#contactusform #comments2 {	width: 400px; float: left; display:none;}

#contactusform .contactinput {
	margin-bottom: 10px;
	width:260px;
	height:25px;
	float:left;
}

#contactusform .button {
	margin:10px 0 0 100px;
	width:165px;
	height:35px;
	font-weight:bold;
	float:left;
	background: #7F427E;
	border: 2px solid #fff;
	color: #fff;
	padding: 8px 0;
}

#contactusform p {
	margin: 5px 0 5px 0;
	float:left;
	text-align:left;
}

#contactusform textarea {
	width: 260px;
	height: 100px;
	float:left;
	font-weight:bold;
}

#contactusform .boxes {	width: 1em;}
#contactusform br {	clear: left;}

fieldset {width: 400px;	_float: left;}
#contact { _width: 600px; _float: left;}
#contact #contactusform { _float: left;}
#contact p { font-size: 12px;}
#contact #button { background-color: #f69e22; _float: left;}