/* CSS Document */

/* CSS Reset */

body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0px; padding: 0px; border: 0px;
}

body {
	font-family: Helvetica, Arial, sans-serif; /* Set the global font */
	font-size:62.5%;
	color:#fff; 
	background:#444 url(images/backgrounds/page_bg.jpg); /* Add the repeating texture file */
}

p {
	margin: 0;
	padding: 5px 0 5px;
	padding-bottom: 15px;
	font-size:1.2em  ;
	line-height:18px; 
}

h2 {
	font-size:2.8em;
}

h3 {
	font-size:2.2em;
}

a {
	color:#7d7d7d;
	text-decoration:none;
}
a:hover{
	color:#000;
	background:#c6c6c6;
	text-decoration:none;
}


#header a {
	color:#7d7d7d;
	text-decoration:none;
	background:#6b6b6e url(images/various/patternhover.jpg);
}
#header a:hover{
	color:#222;
	text-decoration:none;
	background:url(images/various/pattern.jpg);
}

.button {
	width: 69px;
	list-style:none;
	display:block;
	text-indent:-9999px;
	height:24px;
	position:relative;
	background:url(images/various/button.png) no-repeat;
}

.button a {
	background:url(images/various/button.png) no-repeat;
	display:block;
	height:24px;
	width:69px;
	}
.button a:hover {
	background-position:0 -24px;
}


#page-wrap {
	 /* An extra DIV allows us to attach the larger background image and position centrally on the page */
}

/* Lay out the page structure with a container */
#container {
	width: 940px; /* Width of the container minus the left padding below */
	margin: 0 auto; /* Aligns the container to the centre of the page */
	padding: 0 10px; /* Add some top and left padding */
	background: url(images/backgrounds/body_bg.jpg) no-repeat;
}

#header {
	margin: 0 0 40px 0;	/* Bottom margin on the header */
	overflow:auto;
	}

	#header h1 {
		display: block; /* Anchors are inline by default, change it to block... */
		width: 872px; height: 200px; /*...Which then allows us to specify width and height (according to the image) */
		color: #6b5c4e; margin: 0; /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
		background: url(images/various/logo.png) left no-repeat; text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */
	}
	
	#header p {
		font-size:3em;
		line-height:40px;
		padding:10px 0 10px 0;
	}

	
	.about {
	float:left;
	width:920px;
	}
	
	.latest {
	margin: 0 0 120px 0;	
	padding:10px;
	float:left;
	width:885px;
	background: url(images/backgrounds/im_bg.png);
	overflow:auto;
	}
	
	.latest_text {
	float:left;
	width:380px;
	padding:10px;
	}
	
	.latest_img {
	float:right;
	width:450px;
	}
	
	.latest img {
	border:1px solid #323231;
	}
	
	a.featured {
	display:block;
	margin:10px 0;
	padding:10px;
	width:400px;
	background: url(images/backgrounds/im_bg.png); 
}

a.featured:hover{
	color:#222;
	text-decoration:none;
	background:url(images/various/pattern.jpg);
}
	

#portfolioweb {
	clear:both;
	overflow:auto;
	margin: 50px 0 120px 0;
}
	
	#portfolioweb h2 {
		margin: 0px 32px 20px 0px;
		padding: 10px 0 10px 10px;
		background: url(images/backgrounds/im_bg.png) repeat; 
	}
	

#portfolioprint {
	clear:both;
	margin: 40px 0 120px 0;
	overflow:auto;
}
	
	#portfolioprint h2 {
		margin: 10px 32px 20px 0px;
		padding: 10px 0 10px 10px;
		background: url(images/backgrounds/im_bg.png) repeat; 
	}
	
	
		
.left {
	float:left;
	position:relative;
	width:420px;
	margin-bottom:20px;
}

.right {
	float:left;
	position:relative;
	margin:0 0 40px 70px;
	width:420px;
}

a.web {
	display:block;
	margin:10px 0;
	padding:10px;
	width:400px;
	background: url(images/backgrounds/im_bg.png); 
}

a.web:hover{
	color:#222;
	text-decoration:none;
	background:url(images/various/pattern.jpg);
}


.web img {
	border:1px solid #323231;
}
	
#footer {
	margin:50px 0 40px 0;
	overflow:hidden;
	height:800px;
	clear:both;
}

	#footer h2 {
		margin: 0px 32px 20px 0px;
		padding: 10px 0 10px 10px;
		background: url(images/backgrounds/im_bg.png) repeat; 
	}
	
	#footer h3 {
		margin: 0px 32px 20px 0px;
		padding: 5px 0 5px 5px;
		background: url(images/backgrounds/im_bg.png) repeat; 
	}
	
	
	.about_me {
		float:left;
		width:450px;
	}
	
	.contact_details {
		float:right;
		width:400px;
		}

	.flickr {
	float:right;
	width: 300px;
	overflow:auto;
}
	
	.flickr ul {
		list-style: none; margin: 0 0 60px 0;
	}
		.flickr ul li {
			display: inline; /* IE6 fix to prevent the step down bug */
		}
			.flickr ul li a {
				display: block; /* Make the anchors a block element, allowing the width and height to be specified and increasing the clickable area */
				height: 75px; /* 40px is the height of the icon */
				margin: 0 5px 0 0; /* Space out the links with some right margin */
				padding: 2px; /* Align the text to the icon with top padding and move it away from the icon with left padding */
				border:1px solid #222;
			}
			
			
			.flickr ul li a:hover {
				border:1px solid #fff; /* Change the color of the link text on hover */
			}
	
/* A handy 'Clearfix' technique to clear floats in order to avoid affecting page elements further down the document */		
.clear:after {
	content: "";
	display: block; visibility: hidden; clear: both;
}

	
	/* Firefox Dotted Outline Fix */
	a:active, a:focus{ 
		outline: none; 
	}
	
	/* Menu Body */
.nav {
	width:905px;
	overflow:auto;
	background:url(images/various/logo2.png) no-repeat;
}

	ul.menu {
		height:40px;
		list-style:none;
		margin:0;
		padding:5px 0 5px 573px;
		text-indent:-9999px;
	}
	
	/* Float LI Elements - horizontal display */
	ul.menu li {
		float:left;
		width:82px;
	}
	
	/* Link - common attributes */
	ul.menu li a {
		background:url(images/navigation/sprite.png) no-repeat scroll top left;
		display:block;
		height:40px;
		position:relative;
	}
	
	ul.menu li a.webportfolio {
		width:82px;
	}
	
	ul.menu li a.print {
		width:82px;
		background-position:-82px 0px;
	}
	
	ul.menu li a.aboutme {
		width:82px;
		background-position:-164px 0px;
	}
	
	ul.menu li a.top {
		width:82px;
		background-position:-246px 0px;
	}
	
	/* Span (on hover) - common attributes */
	ul.menu li a span {
		background:url(images/navigation/sprite.png) no-repeat scroll bottom left;
		display:block;
		position:absolute;
		top:0;
		left:0;
		height:39px;
		width:82px;
		z-index:100;
	}
	
	/* Span (on hover) - display pointer */
	ul.menu li a span:hover {
		cursor:pointer;
	}
	
	/* Shift background position on hover for the class: "home" */
	ul.menu li a.webportfolio span {
		background-position:0px -40px;
	}
	
	/* Shift background position on hover for the class: "next" */
	ul.menu li a.print span {
		background-position:-82px -40px;
	}
	
	/* Shift background position on hover for the class: "top" */
	ul.menu li a.aboutme span{
		background-position:-164px -40px;
	}
	
	/* Shift background position on hover for the class: "top" */
	ul.menu li a.top span{
		background-position:-246px -40px;
	}
	
.clear {clear:both}

.contact {text-align:left;}
.contact ul {list-style-type:none;width:390px;}
.contact li {list-style-type:none;}
.contact li.special {display:none;}

.contact input {
	color:#fff;
	width:200px;
	padding:5px 0 5px 2px;
	background:url(images/backgrounds/im_bg.png) repeat;
	border-style:none none dotted;
	border-width:medium medium 1px;
	outline:none;
}

.contact textarea {
	color:#fff;
	width:360px;
	padding:5px 0 5px 2px;
	background:url(images/backgrounds/im_bg.png) repeat;
	border-style:none none dotted;
	border-width:medium medium 1px;
	overflow:auto;
	outline:none;
}

.contact textarea:focus, .contact input:focus {
	border-style:none none solid;
	border-width:medium medium 1px;
	border-color: #ccc;
	background:#000;
}

.contact p {
	color:#fff;
	padding:5px 0 5px 0;
	}
	
.contact .submit{
	background:#333 url(images/various/patternhover.jpg) repeat;
	border-style:solid;
	border-width:1px;
	border-color: #32312F;
	cursor:pointer;
	padding:5px;
	margin-top:5px;
	width:100px;
	color:#fff;
}

.contact .submit:hover {
	background:#000 url(images/various/pattern.jpg) repeat;
}

.contact em{
font-weight: bold;
  font-style: normal;
  color: #fff;
}
.loading {
	float:right; 
	background:url(images/various/ajax-loader.gif) no-repeat 1px; 
	height:28px; 
	width:28px; 
	display:none;
}
.message {
	font-family:arial;
	font-size:12px; 
	width:100%; 
	margin:20px 0 0 0; 
	display:none
}

.about_me ul {
	float: left;
	width:440px;
	margin: 0; 
	padding: 0;
	list-style: none;
	font-size: 1.2em;
}
.about_me ul li {
	position: relative;
	margin: 0;
	padding: 5px 0 0 20px;
	background: url(images/various/li.gif) no-repeat 0 7px; 
}

.credits {
	clear:both;
	padding:30px 0 0 0;
}