/* general
--------------------------------------------------- */

body * {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	background: #fff url(../design/header_bg.png) repeat-x;
	font-size: 62.5%;
}

img {
	display: block;
}

em, cite {
	font-style: italic;
}

strong {
	font-weight: bold;
}

a {
	text-decoration: none;
}

acronym {
	border-bottom: 1px rgb(180,180,180) dotted;
	cursor: help;
}

ul {
	list-style: none;
}

hr, .hide {
	display: none;
}

.italic {
	font-style: italic;
}

cite {
	font-style: italic;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

* html .clearfix {
	height: 1px;
}

:focus {
	outline: 0;
}



/* header
--------------------------------------------------- */

div#header {
	position: relative;
	top: 0;
	left: 0;
	width: 960px;
	height: 241px;
	background: url(../design/header.png) no-repeat;
}

div#header-image {
	position: absolute;
	width: 300px;
	height: 241px;
	left: 660px;
	top: 0;
}

body#contact div#header-image {
	background: url(../design/header_images/contact.jpg) no-repeat;
}

body#portfolio div#header-image {
	background: url(../design/header_images/portfolio.jpg) no-repeat;
}

body#services div#header-image {
	background: url(../design/header_images/services.jpg) no-repeat;
}



/* logo
--------------------------------------------------- */

div#logo {
	position: absolute;
	top: 79px;
	left: 98px;
	width: 520px;
	height: 85px;
	text-indent: -9999px;
}

div#logo a {
	position: relative;
	display: block;
	width: 520px;
	height: 85px;
	border: none;
}



/* primary navigation
--------------------------------------------------- */

/* measurements for the nav image replacement:

the distance from the top to the...

initial state = 0
rollover state = 30
selected state = 60

the distance from the far left to the...

home button = 0
services button = 95
portfolio button = 220
contact button = 365

the width of the...

home button = 66
services button = 96
portfolio button = 116
contact button = 98

*/

ul#primary-nav {
	position: relative;
	top: 19px;
	left: 128px;
	width: 463px;
	background: url(../design/primary_nav.jpg) no-repeat;
}

ul#primary-nav li {
	float: left;
}

ul#primary-nav li a {
	height: 30px;
	display: block;
	position: absolute;
	top: 0;
	text-indent: -9999px;
}

li#nav-home a, li#nav-services a, li#nav-portfolio a, li#nav-contact a {
	background: url(../design/primary_nav.jpg) no-repeat;	
}

li#nav-home a {
	background-position: 0 0;
	width: 66px;
	left: 0;
}

li#nav-home a:hover {
	background-position: 0 -30px;
}

body#home li#nav-home a {
	background-position: 0 -60px;
}

li#nav-services a {
	background-position: -95px 0;
	width: 96px;
	left: 95px;
}

li#nav-services a:hover {
	background-position: -95px -30px;
}

body#services li#nav-services a {
	background-position: -95px -60px;
}

li#nav-portfolio a {
	background-position: -220px 0;
	width: 116px;
	left: 220px;
}

li#nav-portfolio a:hover {
	background-position: -220px -30px;
}

body#portfolio li#nav-portfolio a {
	background-position: -220px -60px;
}

li#nav-contact a {
	background-position: -365px 0;
	width: 98px;
	left: 365px;
}

li#nav-contact a:hover {
	background-position: -365px -30px;
}

body#contact li#nav-contact a {
	background-position: -365px -60px;
}



/* section heading
--------------------------------------------------- */

h2#section-heading {
	position: absolute;
	left: 60px;
	top: 180px;
	width: 600px;
	height: 55px;
	text-indent: -9999px;
}

div#header h2.colophon {
	background: url(../design/headers/colophon.png) no-repeat;
}

div#header h2.comments {
	background: url(../design/headers/client_comments.png) no-repeat;
}

div#header h2.contact {
	background: url(../design/headers/contact.png) no-repeat;
}

div#header h2.designer {
	background: url(../design/headers/about_the_designer.png) no-repeat;
}

div#header h2.inspirations {
	background: url(../design/headers/inspirations.png) no-repeat;
}

div#header h2.methodology {
	background: url(../design/headers/methodology.png) no-repeat;
}

div#header h2.portfolio {
	background: url(../design/headers/portfolio.png) no-repeat;
}

div#header h2.services-index {
	background: url(../design/headers/services_index.png) no-repeat;
}

div#header h2.standards {
	background: url(../design/headers/standards.png) no-repeat;
}



/* gallery-wrapper
--------------------------------------------------- */

div#gallery-wrapper {
	position: relative;
	left: 0;
	background: rgb(50,50,50) url(../design/gallery_bg_wrapper.png) repeat-x;
}

div#gallery-inner-wrapper {
	position: relative;
	background: url(../design/gallery_inner_bg.png) no-repeat;	
}

div#gallery {
	position: relative;
	top: 10px;
	width: 870px;
	background: url(../design/gallery_bg.png) repeat-y;
	padding: 5px 0 30px 90px;
}

div#gallery div.project-title {
	width: 540px;
	text-align: center;
	padding: 12px 0 12px 0;
	border-top: 1px solid rgb(80,80,80);
	border-bottom: 1px solid rgb(80,80,80);
	margin-bottom: 10px;
}

div#gallery div.project-title h2 {
	font: normal 1.8em/1.3 Georgia, serif;
	color: rgb(220,220,220);
	margin-bottom: 0.3em;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

div#gallery div.project-title h2 a {
	color: #fff;
}

div#gallery div.project-title h2 a:hover {
	color: rgb(200,200,200);
}

div#gallery div.project-title p {
	font: 1.1em/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgb(190,190,190);
	margin: 0;
}

div#gallery div.project-title span.timeframe {
	color: rgb(130,130,130);
	text-transform: none;
	font-style: italic;
	font-size: 1.1em;
	letter-spacing: normal;
}

div#gallery img {
	border: 1px solid rgb(80,80,80);
	padding: 3px;
}

div#gallery img#g-placeholder {
	position: relative;
}

div#gallery p#g-caption {
	color: rgb(200,200,200);
	font: italic 1.1em Verdana, serif;
	padding: 10px 0;
}

div#gallery div.thumbnails {
	float: left;
	width: 840px;
}

div#gallery ul#g-thumbnails {
	float: left;
}

div#gallery ul#g-thumbnails li {
	float: left;
	margin-right: 10px;
}

div#gallery ul#g-thumbnails a:hover img {
	border: 1px solid rgb(100,100,100);	
}

div#content h3.proj-overview {
	font-size: 1.6em;
	margin-top: 0;
	margin-bottom: 1em;
}



/* project-listing
--------------------------------------------------- */

div#project-listing {
	position: absolute;
	top: 260px;
	left: 680px;
	width: 260px;
	color: rgb(170,170,170);
}

div#project-listing h3 {
	font: normal 1.6em Georgia, serif;
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgb(60,60,60);
	margin-bottom: 0.4em;
}

div#project-listing ul {
	margin-bottom: 1.5em;
}

div#project-listing li {
	font: 0.9em/2.4 Verdana, serif;
/*	font: 1.1em/2.4 Verdana, serif;*/
	color: #fff;
	border-bottom: 1px dotted rgb(80,80,80);
}

div#project-listing a {
	display: block;
	width: 100%;
	color: rgb(200,200,200);
}

div#project-listing a:hover {
	background: rgb(40,40,40);
	color: rgb(210,210,210);
}

div#project-listing p.more {
	font: italic 0.9em/2.4 Verdana, serif;
}



/* main-wrapper
--------------------------------------------------- */

div#main-wrapper {
	position: relative;
	top: 0;
	left: 0;
	background: url(../design/main_wrapper_bg.jpg) no-repeat;
}

div#main {
	position: relative;
	width: 960px;
	background: url(../design/main_bg.png) repeat-y;
}

div#main a {
	color: rgb(63,100,121);
	border-bottom: 1px dotted rgb(63,100,121);
}

div#main a:hover {
	color: rgb(87,123,143);
	border-bottom: 1px solid rgb(87,123,143);
}

div#main a.no-border {
	border: none;
}

div#main img {
	padding: 3px;
	border: 1px solid rgb(200,200,200);
}

div#main img.left {
	float: left;
	margin-right: 20px;
	margin-bottom: 0.5em;
}



/* content
--------------------------------------------------- */

div#content {
	float: left;
	width: 540px;
	padding-left: 90px;
	padding-top: 20px;
	color: rgb(40,40,40);
	font-family: Georgia, serif;
}

div#content h3 {
	font: normal 1.6em Georgia, serif;
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgb(200,200,200);
	margin-bottom: 0.2em;
	margin-top: 1.4em;
	color: #000;
}

div#content p {
	font-size: 1.3em;
	line-height: 1.6em;
	margin-bottom: 1.2em;
}

div#content p.opening {
	margin-bottom: 2.1em;
}

div#content p span.drop-cap {
	color: #000;
	float: left;
	font-size: 5.6em;
	line-height: 0.8em;
	text-transform: uppercase;
	margin: 0.05em 0.14em 0 0;
}

div#content span.caps {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.9em;
}



/* content - portfolio listing
--------------------------------------------------- */

div#content div.folio-item {
	width: 540px;
	float: left;
	clear: left;
	padding-bottom: 1.6em;
	border-bottom: 1px dotted rgb(180,180,180);
	margin-bottom: 1.6em;
}

div#content div.folio-item h4 {
	font: normal 1.8em Georgia, serif;
	font-style: normal;
}

div#content div.folio-item a {
	border: none;
}

div#content div.folio-item a:hover {
	border: none;
}

div#content div.folio-item h4 img {
	float: left;
	margin-right: 20px;
	position: relative;
	top: 1px;
}

div#content div.folio-item h4 a:hover img {
	border: 1px solid rgb(170,170,170);
}

div#content div.folio-item p {
	margin-left: 120px;
	margin-bottom: 0;
	font-style: italic;
}

div#content div.folio-item p.links {
	margin-left: 122px;
}



/* content - portfolio listing
--------------------------------------------------- */

div#content div.list-item {
	width: 540px;
	float: left;
	clear: left;
	padding-bottom: 1.6em;
	border-bottom: 1px dotted rgb(180,180,180);
	margin-bottom: 1.6em;
}

div#content div.list-item h4 {
	font: normal 1.7em Georgia, serif;
	font-style: normal;
}

div#content div.list-item a, div#content div.list-item a:hover {
	border: none;
}

div#content div.list-item h4 img {
	float: left;
	margin-right: 20px;
	position: relative;
	top: 1px;
}

div#content div.list-item h4 a:hover img {
	border: 1px solid rgb(170,170,170);
}

div#content div.list-item p {
	margin-left: 78px;
	margin-bottom: 0;
}



/* content - client comments
--------------------------------------------------- */

div#content div.comments {
	padding-bottom: 1.5em;
	border-bottom: 1px dotted rgb(180,180,180);
	margin-bottom: 1.5em;	
}

div#content div.comments p.comments {
	font-style: italic;
	margin-bottom: 0.5em;
}

div#content div.comments p.source {
	color: rgb(136,104,0);
	margin: 0;
	font: 1em/1.5 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}



/* content - slides
--------------------------------------------------- */

div#slides-wrapper {
	position: relative;
	float: left;
	width: 168px;
	margin-bottom: 0.5em;
	margin-right: 20px;
}

div#content div#slides-wrapper p {
	color: rgb(100,100,100);
	font: italic 1em/1.3 Verdana, sans-serif;
	margin: 0;
}

div#slides-inner-wrapper {
	position: relative;
	width: 160px;
	height: 200px;
	overflow: hidden;
	padding: 3px;
	border: 1px solid rgb(200,200,200);
	margin-bottom: 0.3em;
}

div#slides {
	position: relative;
	width: 160px;
	height: 200px;
	overflow: hidden;
}

div#main div#slides img {
	padding: 0;
	border: none;
}

div#slides ul {
	position: relative;
	margin: 0;
	padding: 0;
	width: 1120px;
	height: 200px;
}

div#slides li {
	float: left;
}

div#slides_menu {
	position: absolute;
	z-index: 1;
	top: 182px;
	left: 3px;
	width: 160px;
	height: 20px;
	overflow: hidden;
	background: #000;
	border-top: 1px solid rgb(80,80,80);
}

div#slides_menu li {
	display: block;
	margin: 0;
	padding: 0;
	background-image: none;
}

div#main div#slides_menu li#snapback a, div#main div#slides_menu li#snapmore a {
	position: absolute;
	top: 0;
	text-indent: -9999px;
	width: 20px;
	height: 20px;
	border: none;
}

div#main div#slides_menu li#snapback a:hover, div#main div#slides_menu li#snapmore a:hover {
	border: none;
}

div#slides_menu li#snapback a {
	background: url(../services/index/back.png) no-repeat;
	left: 0;
}

div#slides_menu li#snapmore a {
	background: url(../services/index/next.png) no-repeat;
	right: 0;
}



/* content - enquiries form
--------------------------------------------------- */

div#content form {
	float: left;
	width: 540px;
}

div#content div.form-field {
	border-bottom: 1px dotted rgb(210,210,210);
	padding: 0.8em 0;
	float: left;
}

div#content div.form-field label {
	float: left;
	width: 100px;
	color: rgb(122,110,83);
	color: rgb(80,80,80);
	font-size: 1.2em;
	font-style: italic;
	position: relative;
	top: 7px;
	display: block;
}

div#content div.form-filter label {
	top: 3px;	
}

div#content div.form-field input, div#content div.form-field textarea {
	float: left;
	width: 270px;
	border: 1px solid rgb(180,180,180);
	padding: 6px 4px;
	font: 1.1em/1.5 Verdana, Arial, Helvetica, sans-serif;
	color: rgb(50,50,50);
}

div#content div.form-field textarea {
	width: 410px;
}

div#content div.form-field input#enq-filter {
	width: 100px;
	float: none;
}

div#content div.form-field div.text {
	float: left;
	width: 418px;
}

div#content div.form-field div.text p {
	color: rgb(80,80,80);
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 0.6em;
}

div#content div.form-field div.text p.note {
	font-style: italic;
}

div#content div.form-field div.text p.que {
	color: rgb(50,50,50);
}

div#content div.form-field input.submit {
	float: left;
	position: relative;
	left: 100px;
	background: rgb(63,100,121);
	color: #fff;
	padding: 0.6em 2em;
	font: italic 1.2em/1.6 Georgia, "Times New Roman", Times, serif;
	width: auto;
	margin: 0;
	border: 3px double;
}

div#content div.form-field input.submit:hover, div#content div.form-field input.submit:active, div#content div.form-field input.submit:focus {
	cursor: pointer;
	background: rgb(87,123,143);
	border: 3px double;
	color: #fff;
}



/* sidebar
--------------------------------------------------- */

div#sidebar {
	float: right;
	width: 260px;
	padding-right: 20px;
	padding-top: 20px;
}



/* sidebar - section
--------------------------------------------------- */

div#sidebar div.section {
	color: rgb(70,70,70);
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	font-family: Verdana, sans-serif;
}

div#sidebar div.section h3 {
	font: normal 1.6em Georgia, serif;
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgb(200,200,200);
	margin-bottom: 0.4em;
	color: rgb(60,60,60);
	color: #000;
}

div#sidebar div.section p, div#sidebar div.section div.vcard {
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 0;
}

div#sidebar div.section div.comments {
	margin-bottom: 2em;	
}

div#sidebar div.section p.comments {
	font-style: italic;
	margin-bottom: 0.5em;
}

div#sidebar div.section p.client {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgb(136,104,0);
}

div#sidebar div.section p.url-comment {
	font-style: italic;
}



/* sidebar - section - links
--------------------------------------------------- */

div#sidebar div.section div.links {
	line-height: 1.3em;
}

div#sidebar div.links div {
	border-bottom: 1px dotted rgb(190,190,190);
	padding: 0.5em 0;
	width: 230px;
	position: relative;
}

div#sidebar div.links h4 {
	font-weight: normal;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

div#sidebar div.links div a {
	border: none;
	display: block;
	padding-left: 25px;
	width: 205px;
	background: url(../design/sidebar_bullet.png) no-repeat 0 1px;
}

div#sidebar div.links div a:hover, div#sidebar div.links div a.current {
	background: url(../design/sidebar_bullet_on.png) no-repeat 0 1px;
	border: none;
}

div#sidebar div.links div p {
	color: rgb(110,110,110);
	font-style: italic;
	padding-left: 25px;
	width: 205px;
	font-size: 1.1em;
}



/* sidebar - section - notices
--------------------------------------------------- */

div#notice {
	width: 260px;
	height: 140px;
	text-indent: -9999px;
	background: url(../design/notice.png) no-repeat;
	margin-bottom: 3em;
}

div#blog {
	position: relative;
	width: 260px;
	height: 140px;
	text-indent: -9999px;
	background: url(../design/change_and_decay.png) no-repeat;
}

div#main div#blog a {
	position: absolute;
	width: 260px;
	height: 80px;
	display: block;
	top: 0;
	left: 0;
	border: none;
}



/* home page styles
--------------------------------------------------- */

body#home {
	background: #fff url(../design/header_home_bg.png) repeat-x;
}

body#home div#header {
	background: url(../design/header_home.png) no-repeat;
	height: 421px;
}

body#home div#header-image {
	background: url(../design/header_images/home.jpg) no-repeat;
	height: 421px;
}

body#home h3#home-intro {
	text-indent: -9999px;
}

body#home p#home-links {
	position: relative;
	text-align: center;
	left: 60px;
/*	top: 365px;*/
	top: 370px;
	width: 600px;
	font: 1.1em/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgb(120,120,120);
}

body#home p#home-links a {
	color: rgb(63,100,121);
}

body#home p#home-links a:hover {
	color: rgb(87,123,143);
}

body#home div#content h3 {
	margin: 0 0 1em 0;
	font-size: 1.6em;
}

body#home div#content h4 {
	font-style: normal;
}

body#home div#content h4 a {
	border: none;
}

body#home div#content img {
	margin-bottom: 0.4em;
}

body#home div#content p.summary {
	margin-bottom: 0.5em;
}

body#home div#content p.links {
	font: 1em/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 0;
}

body#home div#content p.links a {
	border: none;
}



/* home page styles - featured-project
--------------------------------------------------- */

body#home div#content div.featured-project {
	margin-bottom: 3em;
}

body#home div#content div.featured-project h4 {
	font: normal 2.1em/1 Georgia, serif;
	margin-bottom: 0.3em;
}

body#home div#content div.featured-project p.summary {
	line-height: 1.5em;
}

body#home div#slides-wrapper {
	position: relative;
	width: 532px;
	height: 250px;
	padding: 3px;
	border: 1px solid rgb(200,200,200);
}

body#home div#slides {
	position: relative;
	width: 532px;
	height: 250px;
}

body#home div#slides ul li {
	float: left;
}

body#home div#slides a {
	position: absolute;
	display: block;
	width: 50px;
	height: 250px;
	z-index: 1;
	text-decoration: none;
	border: none;
	text-indent: -9999px;
}

body#home div#slides a.prev {
	top: 0;
	left: 0;
	background: url(../design/left_arrow.png) no-repeat;
}

body#home div#slides a.next {
	top: 0;
	left: 482px;
	background: url(../design/right_arrow.png) no-repeat;
}



/* home page styles - recent-projects
--------------------------------------------------- */

body#home div#content div.recent-projects {
	float: left;
	width: 540px;
	margin-bottom: 1.8em;
}

body#home div#content div.recent-projects div.wrapper {
	width: 540px;
	float: left;
}

body#home div#content div.recent-project {
	width: 255px;
	margin-bottom: 1.4em;
}

body#home div#content div.recent-project a.image-link {
	border: none;
}

body#home div#content div.recent-project a.image-link:hover img {
	border: 1px solid rgb(170,170,170);
}

body#home div#content div.recent-projects div.left {
	float: left;
	width: 255px;
	padding-right: 14px;
	border-right: 1px dotted rgb(200,200,200);
}

body#home div#content div.recent-projects div.right {
	float: right;
	width: 255px;
}

body#home div#content div.recent-project h4 {
	font: normal 1.6em/1em Georgia, serif;
	margin-bottom: 0.4em;
}

body#home div#content div.recent-project p.summary {
/*	font-size: 1.3em;*/
	line-height: 1.5em;
	font-style: italic;
}

body#home div#content div.recent-project p.links {
	border-bottom: 1px dotted rgb(200,200,200);
	padding-bottom: 1.5em;
}

body#home div#content div.recent-projects div.left p.links {
	width: 255px;
}



/* footer
--------------------------------------------------- */

div#footer-wrapper {
	position: relative;
	background: url(../design/footer_wrapper_bg.png) repeat-x bottom left;
	height: 400px;
}

div#footer {
	position: relative;
	background: url(../design/footer.jpg) no-repeat;
	width: 960px;
	height: 400px;
}

div#footer-inner {
	position: relative;
	width: 600px;
	height: 60px;
	top: 340px;
	left: 15px;
}

div#footer p {
	position: relative;
	padding: 25px 0;
	text-align: center;
	color: rgb(200,200,200);
	font: 1em Georgia, serif;
	margin-bottom: 0;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}