@charset "utf-8";

/* ------------------------------ RESET STYLES ------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	background-color: #595959;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------------ SITE WIDE STYLES ------------------------------ */

/* CSS Hover fixes IE6 hover quirks. */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #A6A6A6;
	line-height: 1.5em;
}
p {
	padding-top: 12px;
}
h1 {
	display: block;
	height: 144px;
	width: 960px;
	float: left;
	margin-top: 29px;
}
h2 {
	text-indent: -1000em;
	display: block;
	height: 30px;
	margin-bottom: 30px;
	overflow: hidden;
}
/* Centre content within browser-wide divs. */
.centre {
	width: 960px;
	margin: 0 auto;
}
/* Remove source text for image replacement. */
.indent {
	text-indent: -1000em;
	overflow: hidden;
}
.clear {
	clear: both;
}
/* Full width header wrapper */
#header {
	height: 288px;
	border-top: 10px solid #595959;
	background-color: #FFF;
	background-image: url(../images/header-background.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}
/* Logo home link */
#header span {
	float: left;
	margin-top: 28px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10px;
}
#header span, #header span a {
	background-image: url(../images/logo.jpg);
	display: block;
	height: 87px;
	width: 226px;
}
#header span a:hover {
	background-position: 0px -87px;
}
/* Navigation. */
#header ul {
	float: right;
	margin-top: 53px;
}
/* Remove text from links and make nav go inline. */
#header ul .portfolio , #header ul .photography , #header ul .contact {
	float: left;
	margin-right: 22px;
}
/* Stop final link indenting from right edge of parent. */
#header ul .contact {
	margin-right: 0px;
}
/* Make links clickable; each link has unique width assigned according to image size. */
/* Apply styles to link when anchor is removed (li item refers to current page). */
#header ul .portfolio a , #header ul .photography a , #header ul .contact a , #header ul .portfolio , #header ul .photography , #header ul .contact {
	height: 38px;
	display:block;
}
#header ul .portfolio a , #header ul .portfolio {
	background-image: url(../images/nav.jpg);
	width: 114px;
}
#header ul .photography a , #header ul .photography {
	background-image: url(../images/nav.jpg);
	background-position: -114px 0px;
	width: 166px;
}
#header ul .contact a , #header ul .contact {
	background-image: url(../images/nav.jpg);
	background-position: -280px 0px;
	width: 109px;
}
/* New nav image positions on hover */
#header ul .portfolio a:hover {
	background-position: 0px -38px;
}
#header ul .photography a:hover {
	background-position: -114px -38px;
}
#header ul .contact a:hover {
	background-position: -280px -38px;
}
/* Highlight current page when anchor is removed from li item. */
#header ul .portfolio {
	background-position: 0px -76px;
}
#header ul .photography {
	background-position: -114px -76px;
}
#header ul .contact {
	background-position: -280px -76px;
}
/* Full width content wrapper. */
#content {
	background-color: #FFF;
	padding-bottom: 60px;
}
/* Full width footer wrapper. */
#footer {
	background-color: #595959;
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
}
#footer img {
	background-color: #EBEBEB;
	float: left;
	padding: 10px;
	margin-right: 40px;
}
#footer img:hover {
	background-color: #D2EBFC;
}
#footer span a{
	background-image: url(../images/email.jpg);
	display: block;
	height: 33px;
	width: 519px;
	float: right;
	margin-top: 20px;
	border-bottom: 1px solid #595959;
}
#footer span a:hover {
	border-bottom: 1px solid #FFF;
}
#footer p {
	color: #A6A6A6;
	font-size: 0.9em;
	text-align: center;
	clear: both;
	padding-top: 30px;
}
#footer p a  {
	color: #A6A6A6;
	margin-left: 20px;
}
#footer p a:hover {
	color: #FEFEFE;
}

/* ------------------------------ PAGE SPECIFIC STYLES ------------------------------ */

/* --------------- Homepage --------------- */

.header-homepage {
	background-image: url(../images/header-index.jpg);
}
.featured-project {
	padding-top: 30px;
}
.featured-project h2{
	background-image: url(../images/title-featured-project.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 249px;
}
.featured-project img {
	background-color: #EBEBEB;
	padding: 20px;
}
.featured-project img:hover {
	background-color: #D2EBFC;
}
.about-james {
	width: 460px;
	float: left;
	margin-top: 30px;
}
.about-james h2{
	background-image: url(../images/title-about-james.jpg);
	width: 198px;
	margin-bottom: 18px;
}
.recent-photos {
	width: 460px;
	float: right;
	margin-top: 30px;
}
.recent-photos h2{
	background-image: url(../images/title-recent-photos.jpg);
	width: 217px;
}
.recent-photos img {
	background-color: #EBEBEB;
	float: left;
	padding: 20px;
}
.recent-photos img:hover {
	background-color: #D2EBFC;
}
.recent-photos .last {
	margin-left: 18px;
}

/* --------------- Portfolio --------------- */

.header-portfolio {
	background-image: url(../images/header-portfolio.jpg);
}
.portfolio-item {
	height: 210px;
	width: 960px;
	padding-top: 60px;
}
.portfolio-item img {
	background-color: #EBEBEB;
	float: left;
	padding: 20px;
}
.portfolio-item img:hover {
	background-color: #D2EBFC;
}
.portfolio-item p {
	width: 309px;
	float: right;
}
.portfolio-item h2 {
	height: 24px;
	width: 310px;
	float: right;
	margin-bottom: 0px;
	background-repeat: no-repeat;
}
/* Individual background images for H2 tags (image replacement). */
.portfolio-item .bethel {
	background-image: url(../images/pf-title-bethel.jpg);
}
.portfolio-item .emilywhitesmith {
	background-image: url(../images/pf-title-emilywhitesmith.jpg);
}
.portfolio-item .gcl {
	background-image: url(../images/pf-title-gcl.jpg);
}
.portfolio-item .glenelg {
	background-image: url(../images/pf-title-glenelg.jpg);
}
.portfolio-item .jw {
	background-image: url(../images/pf-title-jw.jpg);
}
.portfolio-item .macbook-pro {
	background-image: url(../images/pf-title-macbook-pro.jpg);
}
.portfolio-item .retail-interior {
	background-image: url(../images/pf-title-retail-interior.jpg);
}
.portfolio-item .symphony-visualisation {
	background-image: url(../images/pf-title-symphony-visualisation.jpg);
}
.portfolio-item .vignette-logo {
	background-image: url(../images/pf-title-vignette-logo.jpg);
}
.portfolio-item .vignette-web {
	background-image: url(../images/pf-title-vignette-web.jpg);
}

/* --------------- Photography --------------- */

.header-photography {
	background-image: url(../images/header-photography.jpg);
}
#photo-thumbs  {
	padding-top: 60px;
}
#photo-thumbs li {
	height: 210px;
	width: 210px;
	float: left;
	margin: 0 40px 40px 0;
}
/* Make link apply to image and padding, not just image. */
#photo-thumbs li a img {
	background-color: #EBEBEB;
	padding: 20px;
}
#photo-thumbs li a img:hover {
	background-color: #D2EBFC;
}
/* Stop drop down on every fourth thumb by removing right margin. */
#photo-thumbs .right {
	margin-right: 0px;
}
/* Remove margin from bottom of bottom row of thumbs for correct gap between contents and footer. */
#photo-thumbs .bottom {
	margin-bottom: 0px;
}

/* --------------- Contact --------------- */

.header-contact {
	background-image: url(../images/header-contact.jpg);
}
.get-in-touch {
	width: 400px;
	float: left;
	margin-top: 66px;
	padding-bottom: 5px;
	border-right: 2px dotted #E0E0E0;
}
.get-in-touch h2{
	background-image: url(../images/title-get-in-touch.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 189px;
}
.get-in-touch p {
	width: 350px;
	margin-bottom: 10px;
}
.get-in-touch p span {
	color: #F00;
}
.get-in-touch p a {
	color: #595958;
}
.get-in-touch p a:hover {
	color: #929292;
}
/* Contact form styles */
#contact-form {
	width: 450px;
	float: right;
	margin: 60px 0 20px 0;
}
#contact-form input , #contact-form textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #595958;
	height: 18px;
	width: 436px;
	float: right;
	padding: 5px;
	margin: 0 0 20px 0;
	border: 2px solid #EBEBEB;
}
#contact-form textarea {
	height: 100px;
	float: right;
}
#contact-form textarea:focus , #contact-form input:focus {
	border: 2px solid #D2EBFC;
}
/* Cursor: pointer provides feedback for user (cursor change) when cursor hovers over submit button. */
#contact-form input.submit-button {
	height: 30px;
	width: 100px;
	float: right;
	clear: both;
	padding: 0;
	margin: 0;
	border: none;
	cursor: pointer;
}
#contact-form input.submit-button:focus {
	border: none;
}
label {
	color: #595958;
	width: 450px;
	float: left;
	margin-bottom: 5px;
}