/*************************************************************************/
/* COLOUR SCHEME */

/* 	CORPORATE RED #B5121B
	

	CORPORATE GREY #BCBEC0
	
	
	ARCHITECTURE #005F84
	HIGHLIGHT #4d8fa9
	
	INTERIOR DESIGN #4D085C
	HIGHLIGHT #83538d
	
	PROJECT MANAGEMENT #DC661D
	HIGHLIGHT #e78e56
	
	CDM #87004e
	HIGHLIGHT #ab4d83
	
	BUILDING #71432A
	HIGHTLIGHT #916c53
	
	
	


/*************************************************************************/



/*************************************************************************/
/* default styling */
/*************************************************************************/
body {
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-size: 14px;
	color: #333133;}

img {border: none;}
p {font-size: 11px; padding: 7px 0 0 0; margin: 0; line-height: 16px;}
ul {font-size: 11px; line-height: 16px;}
h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 19px; color: #b5121b; margin: 108px 0 0 18px; text-transform:uppercase; font-weight: normal; padding:0;}
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff; text-transform:uppercase; font-weight: normal; margin:0; padding:0;}
h3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #b5121b; text-transform:uppercase; font-weight: normal; margin:0; padding:0; }
h4 {font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 3px; color: #fff; font-size: 10px; text-transform:uppercase; display: inline; letter-spacing: 1px; font-weight: normal;}



/*************************************************************************/
/* body styling */
/*************************************************************************/

body.home #main-navigation ul li.home a,
body.profile #main-navigation ul li.profile a,
body.services #main-navigation ul li.services a,
body.services-list #main-navigation ul li.services a,
body.case #main-navigation ul li.case a,
body.client #main-navigation ul li.client a,
body.contact #main-navigation ul li.contact a {color: #b5121b;}





/*************************************************************************/
/* services styling */
/*************************************************************************/

/* Sub nav styling for architect pages - this is because of the change of sub nav style on these pages */

body.services-list.arch li.archit-sub a, body.case.arch li.archit-sub a
{background-color: #005F84; color: #ffffff; border: 1px solid #005F84;}

body.services-list.arch li.inter-des-sub a, 
body.services-list.arch li.proj-man-sub a, 
body.services-list.arch li.cdm-sub a, 
body.services-list.arch li.build-con-sub a, 

body.case.arch li.inter-des-sub a, 
body.case.arch li.proj-man-sub a, 
body.case.arch li.cdm-sub a, 
body.case.arch li.build-con-sub a 
{background-color: #BCBEC0; color: #ffffff; }


/* Sub nav styling for interior design pages */

body.services-list.inter li.inter-des-sub a, body.case.inter li.inter-des-sub a
{background-color: #4D085C; color: #ffffff; border: 1px solid #4D085C;}

body.services-list.inter li.archit-sub a,
body.services-list.inter li.proj-man-sub a,
body.services-list.inter li.cdm-sub a, 
body.services-list.inter li.build-con-sub a,

body.case.inter li.archit-sub a,
body.case.inter li.proj-man-sub a,
body.case.inter li.cdm-sub a, 
body.case.inter li.build-con-sub a
 
{background-color: #BCBEC0; color: #ffffff;}


/* Sub nav styling for project management pages */

body.services-list.proj li.proj-man-sub a, body.case.proj li.proj-man-sub a
{background-color: #DC661D; color: #ffffff; border: 1px solid #DC661D;}

body.services-list.proj li.archit-sub a,
body.services-list.proj li.inter-des-sub a, 
body.services-list.proj li.cdm-sub a, 
body.services-list.proj li.build-con-sub a,

body.case.proj li.archit-sub a,
body.case.proj li.inter-des-sub a, 
body.case.proj li.cdm-sub a, 
body.case.proj li.build-con-sub a  
{background-color: #BCBEC0; color: #ffffff;}


/* Sub nav styling for cdm co-ordinator pages */

body.services-list.cdm li.cdm-sub a, body.case.cdm li.cdm-sub a
{background-color: #87004e; color: #ffffff; border: 1px solid #87004e;}

body.services-list.cdm li.archit-sub a,
body.services-list.cdm li.inter-des-sub a,
body.services-list.cdm li.proj-man-sub a, 
body.services-list.cdm li.build-con-sub a, 

body.case.cdm li.archit-sub a,
body.case.cdm li.inter-des-sub a,
body.case.cdm li.proj-man-sub a, 
body.case.cdm li.build-con-sub a 

{background-color: #BCBEC0; color: #ffffff;}


/* Sub nav styling for building consultancy pages */

body.services-list.build li.build-con-sub a, body.case.build li.build-con-sub a
{background-color: #71432A; color: #ffffff; border: 1px solid #71432A;}

body.services-list.build li.archit-sub a,
body.services-list.build li.inter-des-sub a,
body.services-list.build li.proj-man-sub a, 
body.services-list.build li.cdm-sub a, 

body.case.build li.archit-sub a,
body.case.build li.inter-des-sub a,
body.case.build li.proj-man-sub a, 
body.case.build li.cdm-sub a
{background-color: #BCBEC0; color: #ffffff;}







/*************************************************************************/
/* positioned structure as the design is fixed width and height */
/**************************************************************************/


#wrapper {position: relative; width: 800px; margin: 0 auto; padding: 0;}	
#logo {position: absolute; top:40px; left:0; width: 141px; height:154px;}
#main-content-background-image {position: absolute; top: 40px; left: 141px; width: 659px; height: 424px; background-color: #ccc;}
#main-navigation {position: absolute; top: 194px; left: 0; width: 141px; height: 270px;}
#sub-navigation {position: absolute; top:464px; left: 0; width: 800px; height:133px;}



/*************************************************************************/
/* SUB NAV FOR HOVER EFFECT - POSITIONED OVER THE TOP OF EXISTING NAV */
/**************************************************************************/


#sub-navigation-on {position: absolute; top:464px; left: 0; width: 800px; height:133px;}

#sub-navigation-on a:link {color: #fff;}
#sub-navigation-on a:visited {color: #fff;}
#sub-navigation-on a:hover {color: #fff;}
#sub-navigation-on a:active {color: #fff;}




#footer {position: absolute; top:597px; width: 800px; height: 43px;}


/*************************************************************************/
/* inner page items */
/**************************************************************************/

/* content */
#main-content {position: absolute; top: 40px; left: 141px; width: 659px; height: 424px;}


#col-a {position: relative; top: 16px; left: 18px;width: 358px; height: 246px; padding:0 10px 0 0; margin:0; overflow: auto;}
ul.highlighted-red {color: #b5121b; padding: 10px 0 0 15px; margin:0; font-family: Verdana, Arial, Helvetica, sans-serif;}
ul.highlighted-red li {padding: 0 0 0 2px; margin:0; }
.highlighted-red {color: #b5121b;}


/*************************************************************************/
/* contact links */
/**************************************************************************/

body.contact #col-a a {color: black; text-decoration: none;}
body.contact #col-a a:visited {color: black; text-decoration: none;}
body.contact #col-a a:hover {color: #B5121B; text-decoration: none;}
body.contact #col-a a:active {color: black; text-decoration: none;}



#col-b {position: absolute; top: 160px; left: 392px; height: 200px; width: 250px; }
.sup-picture {position: absolute; left: 7px; top: 0px; }
#col-b h3 {position: absolute; left: 7px; top: 0px; width: 250px; margin: 0; padding:0;}
#col-b p {position: relative; left: 7px; top: -230px;width: 250px;}


/* main nav */
#main-navigation ul {position: relative; height: 100px; width: 120px; top: 92px; left: 14px; list-style: none; margin: 0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 1em;}
#main-navigation ul li {text-align: right; text-transform:uppercase; margin: 0; padding:0; line-height: 31px;}
#main-navigation ul li a {color: #939598; text-decoration: none;}
#main-navigation ul li a:visited {color: #939598;}
#main-navigation ul li a:hover {color: #b5121b;}
#main-navigation ul li a:active {color: #939598;}




/* subnav bottom */
#sub-navigation ul {position: relative; top: 5px; left:141px; list-style: none; margin: 0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; width: 659px;}
#sub-navigation ul li a {text-decoration:none; padding: 65px 0 0 10px; width: 115px; height: 60px; text-transform:uppercase; line-height: 14px;}
#sub-navigation ul li a:visited {}
#sub-navigation ul li a:hover {color:#ffffff; }
#sub-navigation ul li a:active {color: #808285;}





li.archit-sub a {position: absolute; top:0; left:0; display: block; background-color: #ffffff; color: #808285; border: 1px solid #bcbec0;}
li.inter-des-sub a {position: absolute; top:0; left:133px; display: block; background-color: #ffffff; color: #808285; border: 1px solid #bcbec0;}
li.proj-man-sub a {position: absolute; top:0; left:266px; display: block; background-color: #ffffff; color: #808285; border: 1px solid #bcbec0;}
li.cdm-sub a  {position: absolute; top:0; left:399px; display: block; background-color: #ffffff; color: #808285; border: 1px solid #bcbec0;}
li.build-con-sub a {position: absolute; top:0; left:532px; display: block; background-color: #ffffff; color: #808285; border: 1px solid #bcbec0;}



#sub-navigation-on ul {position: absolute; top: 5px; left:141px; list-style: none; margin: 0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em;}
#sub-navigation-on ul li a {text-decoration:none; padding: 65px 0 0 10px; width: 115px; height: 60px; text-transform:uppercase; line-height: 14px;}
#sub-navigation-on ul li a:visited {color:#ffffff;}
#sub-navigation-on ul li a:hover {color:#ffffff; }
#sub-navigation-on ul li a:active {color:#ffffff;}



li.archit-sub-on a {position: absolute; top:0; left:0; display: block; background-color: #005F84; border: 1px solid #005F84;}
li.inter-des-sub-on a {position: absolute; top:0; left:133px; display: block; background-color: #4D085C; border: 1px solid #4D085C;}
li.proj-man-sub-on a {position: absolute; top:0; left:266px; display: block; background-color: #DC661D; border: 1px solid #DC661D;}
li.cdm-sub-on a {position: absolute; top:0; left:399px; display: block; background-color: #87004e; border: 1px solid #87004e;}
li.build-con-sub-on a {position: absolute; top:0; left:532px; display: block; background-color: #71432A; border: 1px solid #71432A;}



/*************************************************************************/
/* services background styling */
/*************************************************************************/


/* change colour and move to the left depending on what page we are on */

body.services-list.example #col-a.left, body.case.example #col-a.left {position: relative; top: 134px; left: 0;width: 363px; height: 280px; padding:10px 10px 0 20px; margin:0; color: #ffffff; background-color: #B5121B;}


body.services-list.arch #col-a.left, body.case.arch #col-a.left {position: relative; top: 134px; left: 0;width: 363px; height: 280px; padding:10px 10px 0 20px; margin:0; color: #ffffff; background-color: #005F84; overflow:none;}							
body.services-list.inter #col-a.left, body.case.inter #col-a.left {position: relative; top: 134px; left: 133px;width: 363px; height: 280px; padding:10px 10px 0 20px; margin:0; color: #ffffff; background-color: #4D085C; overflow:none;}
body.services-list.proj #col-a.left, body.case.proj #col-a.left {position: relative; top: 134px; left: 266px;width: 363px; height: 280px; padding:10px 10px 0 20px; margin:0; color: #ffffff; background-color: #DC661D; overflow:none;}
body.services-list.cdm #col-a.left, body.case.cdm #col-a.left {position: relative; top: 134px; left: 133px;width: 363px; height: 280px; padding:10px 10px 0 20px; margin:0; color: #ffffff; background-color: #87004e; overflow:none;}
body.services-list.build #col-a.left, body.case.build #col-a.left {position: relative; top: 134px; left: 266px;width: 363px; height: 280px; padding:10px 10px 0 20px; margin:0; color: #ffffff; background-color: #71432A; overflow:none;}

/* move the second column */
body.services-list.example #col-b.right, body.case.example #col-b.right {position: absolute; top: 134px; left: 260px; height: 200px; color: #ffffff;}

body.services-list.arch #col-b.right, body.case.arch #col-b.right {position: absolute; top: 134px; left: 260px; height: 200px; color: #ffffff;}							
body.services-list.inter #col-b.right, body.case.inter #col-b.right {position: absolute; top: 134px; left: 393px; height: 200px; color: #ffffff;}
body.services-list.proj #col-b.right, body.case.proj #col-b.right {position: absolute; top: 134px; left: 527px; height: 200px; color: #ffffff;}
body.services-list.cdm #col-b.right, body.case.cdm #col-b.right {position: absolute; top: 134px; left: 393px; height: 200px; color: #ffffff}
body.services-list.build #col-b.right, body.case.build #col-b.right {position: absolute; top: 134px; left: 527px; height: 200px; color: #ffffff;}



body.services-list #col-a.left p {padding: 5px 130px 5px 0; margin: 0;}
#col-a.left h2 {padding: 10px 0 0 0; margin:0;}

#col-a.left ul {margin: 0 0 0 13px; padding: 0;}
#col-a.left li {padding-right: 140px;}


#col-b.right img {margin-top: 48px;}
#col-b.right h4 {position: absolute; top: 50px; left: 10px;}
#col-b.right ul {position: absolute; top: 77px; left: 10px; padding: 0; margin: 0; list-style: none; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif ; width: 120px; overflow: auto; height:240px;}
#col-b.right ul li {line-height: 150%; width: 100px; padding-bottom: 5px;}
#col-b.right a, #col-b.right a:visited, #col-b.right a:hover, #col-b.right a:active {color: #fff; text-decoration: none; line-height: 150%;}
#col-b.right a:hover {text-decoration: underline;}


body.services-list.arch #col-b.right h4 {background-color: #4d8fa9;}							
body.services-list.inter #col-b.right h4 {background-color: #83538d;}
body.services-list.proj #col-b.right h4 {background-color: #e78e56;}
body.services-list.cdm #col-b.right h4 {background-color: #ab4d83;}
body.services-list.build #col-b.right h4 {background-color: #916c53;}




/*************************************************************************/
/* body case study home page */
/*************************************************************************/


body.case #col-a {position: relative; top: 3px; left: 18px;width: 660px; height: 270px; padding:0; margin:0; font-size: 11px; overflow:none; }

body.case #col-a  p {}

div.case-col.first {float: left; width:100px; margin:0; padding:0; height: 190px; font-family: Verdana, Arial, Helvetica, sans-serif; display: inline;}

div.case-col.others {float: left; width:103px; margin-left:29px; padding:0; height: 190px; font-family: Verdana, Arial, Helvetica, sans-serif; display: inline;}

.divider-1 {position: absolute; top:0; left:115px;}
.divider-2 {position: absolute; top:0; left:248px;}
.divider-3 {position: absolute; top:0; left:380px;}
.divider-4 {position: absolute; top:0; left:514px;}

.case-col h6 {margin:0;padding: 3px; width: 90px; font-size: 1em; color: #fff; background-color: #333133; font-weight: normal;}

.case-col ul {margin:7px 0 0 0; padding: 0; list-style: none;}

.case-col li {margin:0; padding: 3px 0 0 0;}

.case-col li a {color: #333133; text-decoration: none;}
.case-col li a:visited {color:#808285;}
.case-col li a:hover {color:#b5121b;}
.case-col li a:active {color:#808285;}


.underline {text-decoration: underline; text-transform:uppercase;}


.case-col-studies {position: absolute; left: 0px; top:200px; width: 125px; font-size: 9px;}

.case-col-studies.commercial {position: absolute; left: 130px; top:200px; width: 125px;}
.case-col-studies.residential {position: absolute; left: 260px; top:200px; width: 125px;}
.case-col-studies.media {position: absolute; left: 392px; top:200px; width: 125px;}
.case-col-studies.heritage {position: absolute; left: 524px; top:200px; width: 110px;}


/*************************************************************************/
/* body case study items gallery */
/*************************************************************************/


body.case #col-b.right ul {width: 150px; list-style: none; margin: -30px 0 0 2px;}
body.case #col-b.right ul li {float: left; margin: 0 5px 5px 0; padding:0; width: 50px; height: 50px; border: 1px solid #fff; display: block;}

body.case #col-b.right img {margin-top: 0;}

body.case #col-b.right img.line-margin {margin-top:48px;}

.backto-button a {color: #fff; margin-top: 3px; text-decoration: none;}
.backto-button a:hover {color: #fff; text-decoration: underline;}

/*************************************************************************/
/* body clients page */
/*************************************************************************/

body.client #col-a {position: relative; top: 30px; left: 13px;width: 640px; height: 260px; padding:0; margin:0; font-size: .85em; }

body.client #col-a ul {list-style: none; padding:0; margin:0; font-size: .85em;}
body.client #col-a ul li {float: left; border:1px solid #939598; display: block; margin: 0 24px 20px 0;}
body.client #col-a ul li img {display: block;}

body.client #col-a ul li.no-right {float: left; border:1px solid #939598; display: block; margin: 0 0 20px 0;}




/*************************************************************************/
/* body contact page */
/*************************************************************************/

body.contact #col-a {position: relative; top: 16px; left: 18px;width: 270px; height: 246px; padding:0; margin:0; overflow: auto;}
body.contact #col-b {position: absolute; top: 160px; left: 265px; height: 200px; width: 250px; }

.directions {position: relative; top: 0; left:240px;}

#col-b h3.directions-up {position: absolute; top: -245px;}

.directions p {}
/*************************************************************************/
/* footer links and phone number */
/*************************************************************************/

#footer p {position: absolute; right: 0; color: #999; font-size: 12px; margin:5px 0 0 0; padding:0;}

/*span.phone-icon {font-size: 1.3em; background: url(../images/phone.gif) no-repeat left center;}*/


#footer a {color: #808285; text-decoration: none;}
#footer a:visited {color:#808285;}
#footer a:hover {color:#b5121b;}
#footer a:active {color:#808285;}