/* HTP Architecture LLP
Tom Aston 16th May 2008 */

/* IMPORT STYLES */
@import url('reset.css');
@import url('clearfix.css');

/* GENERAL */
body {
	background:#222222;
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
}
#container {
	width:944px;
	margin:0 auto;
}
#header {
	width:944px;
	padding:10px 0;
}
#title {
	float:left;
	width:700px;
	padding:62px 0 0 0;
}
#company {
	float:left;
	width:135px;
	padding:0 0 0 109px;
}
#main {
	clear:both;
	margin:0 0 0 78px;
	width:866px;
	border-top:solid 1px #777777;
}
#navigation {
	width:173px;
	float:left;
}
#inner-container {
	width:693px;
	float:left;
	min-height:300px;
	color:#CCCCCC;
}
#footer {
	clear:both;
	width:866px;
	border-top:solid 1px #777777;
	color:#555555;
	font-size:1.0em;
	padding:10px 0 20px 0;
	text-align:right;
	margin:10px 0 0 0;
}
#footer img {
	float:left;
	margin:0 10px 0 0;
}

/* NAVIGATION */
#navigation a {
	display:block;
	width:150px;
	height:39px;
	border-bottom:solid 1px #333333;
}
#navigation a:hover {
	border-bottom:solid 1px #0073BB;
}
#navigation a:active {
	border-bottom:solid 1px #AAAAAA;
}
#navigation a.current {
	border-bottom:solid 1px #0073BB;
}
#navigation #profile a {
	background:url(../images/link-profile.gif) left center no-repeat #222222;
}
#navigation #profile a.current {
	background:url(../images/link-profile-active.gif) left center no-repeat #222222;
}
#navigation #experience a {
	background:url(../images/link-experience.gif) left center no-repeat #222222;
}
#navigation #experience a.current {
	background:url(../images/link-experience-active.gif) left center no-repeat #222222;
}
#navigation #services a {
	background:url(../images/link-services.gif) left center no-repeat #222222;
}
#navigation #services a.current {
	background:url(../images/link-services-active.gif) left center no-repeat #222222;
}
#navigation #services .subnav #expertise a {
	background:url(../images/link-expertise.gif) left center no-repeat #222222;
}
#navigation #services .subnav #expertise a.current {
	background:url(../images/link-expertise-active.gif) left center no-repeat #222222;
}
#navigation #projects a {
	background:url(../images/link-projects.gif) left center no-repeat #222222;
}
#navigation #contact a {
	background:url(../images/link-contact.gif) left center no-repeat #222222;
}
#navigation #contact a.current {
	background:url(../images/link-contact-active.gif) left center no-repeat #222222;
}
#navigation a em {
	position:absolute;
	left:-1000px;
	width:500px;
}

/* PROJECT NAVIGATION */
#projects-nav a {
	display:block;
	width:150px;
	height:31px;
	border-bottom:solid 1px #333333;
}
#projects-nav a:hover {
	border-bottom:solid 1px #0073BB;
}
#projects-nav a:active {
	border-bottom:solid 1px #AAAAAA;
}
#projects-nav #residential a {
	background:url(../images/link-residential.gif) left center no-repeat #222222;
}
#projects-nav #residential a.current {
	background:url(../images/link-residential-active.gif) left center no-repeat #222222;
}
#projects-nav #homes a {
	background:url(../images/link-homes.gif) left center no-repeat #222222;
	height:47px;
}
#projects-nav #homes a.current {
	background:url(../images/link-homes-active.gif) left center no-repeat #222222;
}
#projects-nav #conservation a {
	background:url(../images/link-conservation.gif) left center no-repeat #222222;
	height:47px;
}
#projects-nav #conservation a.current {
	background:url(../images/link-conservation-active.gif) left center no-repeat #222222;
}
#projects-nav #leisure a {
	background:url(../images/link-leisure.gif) left center no-repeat #222222;
}
#projects-nav #leisure a.current {
	background:url(../images/link-leisure-active.gif) left center no-repeat #222222;
}
#projects-nav #commercial a {
	background:url(../images/link-commercial.gif) left center no-repeat #222222;
}
#projects-nav #commercial a.current {
	background:url(../images/link-commercial-active.gif) left center no-repeat #222222;
}
#projects-nav #education a {
	background:url(../images/link-education.gif) left center no-repeat #222222;
}
#projects-nav #education a.current {
	background:url(../images/link-education-active.gif) left center no-repeat #222222;
}
#projects-nav #overseas a {
	background:url(../images/link-overseas.gif) left center no-repeat #222222;
}
#projects-nav #overseas a.current {
	background:url(../images/link-overseas-active.gif) left center no-repeat #222222;
}
#projects-nav a em {
	position:absolute;
	left:-1000px;
	width:500px;
}

/* HOMEPAGE */
#inner-container h1#homepage {
	background:url(../images/home-intro.gif) left top no-repeat;
	width:358px;
	height:174px;
	margin:20px 0 15px 0;
	border:none;
	float:left;
}
#inner-container p#introduction {
	margin:0 0 20px 0;
	padding:0;
	color:#BBBBBB;
	clear:both;
	font-size:1.55em;
	line-height:1.5em;
}
.pics {  
    width:334px;  
    height:174px;  
    padding:0;  
    margin:20px 0 15px 0;  
	float:left;
} 
.pics img {  
    padding:10px;  
    background:#303030;  
    width:314px; 
    height:154px; 
    top:0; 
    left:0 ;
} 

/* CONTENT */
#inner-container p {
	font-size:1.3em;
	line-height:1.4em;
	width:673px;
	margin:15px 0 0 0;
}
#inner-container p#intro {
	font-size:1.55em;
	line-height:1.5em;
	background:#303030;
	padding:10px 15px;
	width:663px;
}
#inner-container ul {
	margin:15px 0 0 0;
	clear:both;
}
#inner-container li {
	font-size:1.2em;
	line-height:1.4em;
	margin:0 0 5px 0;
	padding:0 0 0 20px;
	background:url(../images/bullet.gif) 0.4em 0.5em no-repeat;
}
#inner-container h1 {
	width:693px;
	height:50px;
	padding:0;
	margin:0;
}
#inner-container h1 strong {
	position:absolute;
	left:-1000px;
	width:500px;
}
#inner-container h2 {
	font-size:1.3em;
	line-height:1.4em;
	margin:15px 0 0 0;
	clear:both;
	background:#303030;
	padding:10px 15px;
	width:279px;
	color:#FFFFFF;
	font-weight:normal;
	border-left:solid 1px #0073BB;
}
#inner-container h1#residential-title {
	background:url(../images/title-residential.gif) left top no-repeat;
}
#inner-container h1#housing-title {
	background:url(../images/title-housing.gif) left top no-repeat;
}
#inner-container h1#conservation-title {
	background:url(../images/title-conservation.gif) left top no-repeat;
}
#inner-container h1#leisure-title {
	background:url(../images/title-leisure.gif) left top no-repeat;
}
#inner-container h1#commercial-title {
	background:url(../images/title-commercial.gif) left top no-repeat;
}
#inner-container h1#education-title {
	background:url(../images/title-education.gif) left top no-repeat;
}
#inner-container h1#overseas-title {
	background:url(../images/title-overseas.gif) left top no-repeat;
}
#inner-container h1#profile-title {
	background:url(../images/title-profile.gif) left top no-repeat;
}
#inner-container h1#services-title {
	background:url(../images/title-services.gif) left top no-repeat;
}
#inner-container h1#contacts-title {
	background:url(../images/title-contacts.gif) left top no-repeat;
}
#inner-container h1#experience-title {
	background:url(../images/title-experience.gif) left top no-repeat;
}
#inner-container h1#expertise-title {
	background:url(../images/title-expertise.gif) left top no-repeat;
}

/* PROJECTS */
#main-content {
	padding:0 0 20px 0;
	width:693px;
	color:#BBBBBB;
}
#main-content strong {
	color:#EEEEEE;
}
#main-content a:link,
#main-content a:visited {
	background:#222222;
	color:#3c8cd6;
	font-weight:bold;
}
#main-content a:hover,
#main-content a:active {
	color:#FFFFFF;
	background:#0073BB;
}

#left-content {
	width:358px;
	float:left;
	padding:0 0 15px 0;
	font-size:1.0em;
}
#right-content {
	width:335px;
	float:left;
	padding:0 0 15px 0;
	font-size:1.0em;
}
#left-content .large-img {
	padding:10px;
	background:#303030;
}
#right-content .large-img {
	padding:10px;
	background:#303030;
}
#main-content .img-group {
	width:315px;
	float:left;
	padding:5px 0 15px 0;
}
#main-content .img-group a img {
	width:50px;
	height:50px;
	border:solid 4px #303030;
	float:left;
	margin:0 5px 5px 0;
}
#main-content .img-group a:hover img {
	border:solid 4px #EEEEEE;
}
#left-content p,
#right-content p {
	width:315px;
}
#left-content ul,
#right-content ul {
	width:335px;
}
#inner-container #left-content p#intro,
#inner-container #right-content p#intro {
	background:#303030;
	padding:10px 15px;
	width:279px;
	color:#FFFFFF;
	font-size:1.3em;
	border-left:solid 1px #0073BB;
}
#inner-container #left-content p#contactinfo {
	width:335px;
	margin-right:0;
}
#inner-container #left-content p#contactinfo img {
	float:right;
}