/* RESET */

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;
}

/* STANDARD STYLES */

html, body {
	font-family: Arial, Verdana;
	font-size: 100%;
}

body#home {
	position: relative;
	background: url("/images/main-background.jpg") repeat-x;
}

body#subpage {
	background: url("/images/main-background2.jpg") repeat-x;
}

h1 {
	font-size: 2em;
	color: #696962;
	padding-bottom: 15px;
}

h2 {
	font-size: 1.5em;
	color: #696962;
	padding-bottom: 15px;
}

h3 {
	font-size: 1.4em;
	color: #696962;
}

h4 {
	font-size: 7em;
	color: #696962;
	padding-bottom: 15px;
}

p {
	font-size: 1em;
}

/* ------------------------------------------------------------------ */

/* WRAP */

#container {
	background: url("/images/smudge-background.jpg") 0px 61px no-repeat;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

#container2 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: 125px;
}

/* ------------------------------------------------------------------ */

/* HEADER */

#header {
	position: relative;
	width: 960px;
	height: 125px;
}

#logo {
	position: relative;
	float: left;
	width: 445px;
	height: 125px;
	text-indent: -9000px;
}

	#logo a { 
		outline: none;
		display: block;
		background: url('/images/logo.png') top left no-repeat;
		height: 118px;
	}
	
	#logo a.logo {background-position: 0px 0px;}
	#logo a.logo:hover {background-position: 0px -118px;}

#nav {
	position: relative;
	width: 515px;
	height: 125px;
	float: right;
	text-indent: -9000px;
}

#nav ul {
	position: absolute;
	top: 8px;
	right: 0px;
	width: 422px;
	list-style-type: none
}

#nav li {
	float: left
}

#nav a { 
	outline: none;
	display: block;
	background: url('/images/navigation.jpg') top left no-repeat;
	height: 48px;
}

#nav a.home {width: 92px; background-position: 0px 0px;}
#nav a.home:hover {background-position: 0px -48px;}
#nav a.homeselected {width: 92px; background-position: 0px -96px;}

#nav a.about {width: 100px; background-position: -92px 0px;}
#nav a.about:hover {background-position: -92px -48px;}
#nav a.aboutselected {width: 100px; background-position: -92px -96px;}

#nav a.portfolio {width: 125px; background-position: -192px 0px;}
#nav a.portfolio:hover {background-position: -192px -48px;}
#nav a.portfolioselected {width: 125px; background-position: -192px -96px;}

#nav a.contact {width: 105px; background-position: -317px 0px;}	
#nav a.contact:hover {background-position: -317px -48px;}
#nav a.contactselected {width: 105px; background-position: -317px -96px;}

/* ------------------------------------------------------------------ */

/* HEADLINE */

#headline {
	position: relative;
	width: 960px;
	height: 310px;
	margin: 0 auto;
}

#headline-welcome {
	position: relative;
	float: left;
	width: 504px;
	height: 311px;
}
	
#btn-view-work p a {
	position: absolute;
	bottom: 35px;
	width: 230px;
	height: 49px;
	background: url('/images/btn-view-work.png'); 
	text-indent: -9999px;
}
	#btn-view-work p a:hover {
		background-position: 0px -49px;;
	}

.boxgrid {  
	position: absolute;
	right: 0;
	top: 25px;
	width: 439px;  
	height: 243px;  
	background: #161613;  
	border: solid 5px #fff;  
	overflow: hidden;    
} 

.boxgrid2 {  
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	width: 439px;  
	height: 243px;  
	background: #161613;  
	border: solid 5px #fff;  
	overflow: hidden;    
} 

.boxcaption{  
	position: absolute;  
	background: #000;  
	height: 300px;  
	width: 100%;  
	opacity: .8;  
	/* For IE 5-7 */  
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
	/* For IE 8 */  
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
} 

	.boxcaption h2 {
		font-size: 1.1em;
		color: #fff;
		text-shadow: 0px 2px 1px #000;
		padding: 10px;
		padding-bottom: 2px;
	}
	
	.boxcaption h3 {
		font-size: 0.7em;
		color: #fff;
		text-shadow: 0px 2px 1px #272727;
		padding-left: 10px;
		padding-bottom: 5px;
		font-style: italic;
	}
	
	.boxcaption p {
		line-height: 1.5em;
		color: #fff;
		text-shadow: 0px 2px 1px #272727;
		padding: 10px;
	}

.captionfull .boxcaption {  
	top: 190px;  
	left: 0;  
}  
.caption .boxcaption {  
	top: 190px;  
	left: 0;  
}   

/* ------------------------------------------------------------------ */

/* BODY */

#main-container {
	clear: both;
	position: relative;
	background: url("/images/content-background.jpg") repeat;
	width: 100%;
	height: auto;
}

#main {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: auto;
	padding-top: 20px;
}

#main-left {
	position: relative;
	padding-right: 10px;
	padding-bottom: 10px;
	width: 600px;
	height: auto;
	float: left;
}

#main-right {
	position: relative;
	padding: 10px;
	width: 320px;
	height: auto;
	float: right;
}

	#main-left p, #main-right p {
		line-height: 1.5em;
		padding-bottom: 10px;
		color: #696962;
	}

	#main-right ul {
		list-style-image: url("/images/icons/tick.png");
	}
	
	#main-right li {
		font-size: 1em;
		color: #696962;
		padding-bottom: 15px;
		margin-left: 40px;
		padding-left: 5px;
	}
	
ul#interests {
    list-style-image: url("/images/icons/heart.png");
}

li#interests {
	font-size: 1em;
	color: #696962;
	padding-bottom: 15px;
	margin-left: 40px;
	padding-left: 5px;
}

/* ------------------------------------------------------------------ */

/* FOOTER */

#footer-top-wrap {
	position: relative;
	background: url("/images/footer-background-top.jpg") #494949 repeat;
	width: 100%;
	height: auto;
}
#footer-top {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: auto;
}

	#footer-top h3 {
		font-size: 1.1em;
		color: #fff;
		text-shadow: 1px 2px 1px #272727;
		padding-bottom: 25px;
		background: url("/images/divider.jpg") 0px 25px no-repeat;
	}

#awesome-links {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	float: left;
	width: 310px;
	height: auto;
}

	#awesome-links ul {
		list-style-image: url("/images/icons/arrow.png");
	}
	
	#awesome-links li {
		font-size: 1em;
		margin-left: 30px;
		padding-left: 5px;
		padding-bottom: 5px;
	}

#social {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	float: left;
	width: 320px;
	height: auto;
}
	
	#social ul {
		list-style: none;
	}
	
	#social ul li {
		float: left; 
	}
	
	#social ul li a {
		display: block; 
		width: 32px;
		height: 32px; 
		margin: 0 35px 22px 0;
		background: url('/images/icons/social-icons.jpg'); 
		text-indent: -9999px;
	}
	
	#social ul li.social-email a {background-position: 0px 0px;}
	#social ul li.social-facebook a {background-position: -32px 0px;}
	#social ul li.social-twitter a {background-position: -64px 0px;}
	#social ul li.social-flickr a {background-position: -96px 0px;}	
	#social ul li.social-da a {background-position: 128px 0px;}
	#social ul li.social-reddit a {background-position: -160px 0px;}
	#social ul li.social-lastfm a {background-position: -192px 0px;}
	#social ul li.social-skype a {background-position: -224px 0px;}
		
	#social ul li.social-email:hover a {background-position: 0px -32px;}
	#social ul li.social-facebook:hover a {background-position: -32px -32px;}
	#social ul li.social-twitter:hover a {background-position: -64px -32px;}
	#social ul li.social-flickr:hover a {background-position: -96px -32px;}
	#social ul li.social-da:hover a {background-position: 128px -32px;}
	#social ul li.social-reddit:hover a {background-position: -160px -32px;}
	#social ul li.social-lastfm:hover a {background-position: -192px -32px;}
	#social ul li.social-skype:hover a {background-position: -224px -32px;}


#twitter {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	float: right;
	width: 330px;
	height: auto;
}

#footer-bottom-wrap {
	position: relative;
	background: url("/images/footer-background-bottom.jpg") #3c3c3c repeat;
	width: 100%;
	height: 23px;
	padding-top: 12px;
}

#footer-bottom {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

	#footer-bottom p {
		color: #fff;
		font-size: 0.8em;
		text-shadow: 0px 1px 1px #000;
	}

#copyright {
	position: relative;
	float: left;
	width: 620px;
}

#anchor {
	position: relative;
	float: right;
	width: 100px;
}

#footer-nav {
	position: relative;
	float: left;
	list-style-type: none;
}

#footer-nav li {
	float: left;	
	font-size: 0.8em;
	color: #fff; 
	padding-left: 5px;
	padding-right: 5px;
	border-right: 1px solid #fff;
	text-shadow: 0px 1px 1px #000;
}
/* ------------------------------------------------------------------ */

/* LINKS */

#awesome-links a {
	color: #c5c5c5;
	text-shadow: 0px 1px 1px #272727;
}

#main-left a, #contact-details a {
	color: #696962;
}

.boxcaption a, #footer-nav li a, #anchor a {
	color: #fff;
}

#awesome-links a:link {text-decoration: none;}
#awesome-links a:visited {text-decoration: none;}	
#awesome-links a:hover {text-decoration: none; color: #fff;}
#awesome-links a:active {text-decoration: none;}

#main-left a:link, #contact-details a:link {text-decoration: none; border-bottom: 1px dotted #696962;}
#main-left a:visited, #contact-details a:visited {text-decoration: none; border-bottom: 1px dotted #696962;}	
#main-left a:hover, #contact-details a:hover {text-decoration: none; border-bottom: 1px dotted #696962; color: #313131;}
#main-left a:active, #contact-details a:active {text-decoration: none; border-bottom: 1px dotted #696962;}

.boxcaption a:link, #twitter_update_list a:link, #footer-nav a:link, #anchor a:link {text-decoration: none;}
.boxcaption a:visited, #twitter_update_list a:visited, #footer-nav a:visited, #anchor a:visited {text-decoration: none;}	
.boxcaption a:hover, #twitter_update_list a:hover, #footer-nav a:hover, #anchor a:hover {text-decoration: none; border-bottom: 1px dotted #c3c3c3;}
.boxcaption a:active, #twitter_update_list a:active, #footer-nav a:active, #anchor a:active {text-decoration: none;}

/* ------------------------------------------------------------------ */

/* MISC */

.clear {
	clear: both;
}

#anchor img {
	vertical-align: middle;
}

.boxcaption img {
	vertical-align: top;
}

#twitter_update_list li {
	list-style-type: none;
	padding-bottom: 10px;
}

#twitter_update_list span {
	color: #fff;
	font-family: Arial, Verdana;
	text-shadow: 0px 1px 1px #272727;
	font-size: 0.9em;
}

#twitter_update_list a {
	display: inline;
	color: #c3c3c3;
	font-style: italic;
	text-shadow: 0px 1px 1px #272727;
	text-decoration: none;
	font-size: 0.8em;
}

#about-me {
	float: left;
	padding-right: 10px;
}

#flickr img {
	margin-right: 15px;
	margin-bottom: 15px;
	border: 2px solid #fff;
}

#twitter img {
	text-align: right;
}

ul#contact-details {
	list-style-image: url("/images/icons/arrow.png") 
}

/* ------------------------------------------------------------------ */

/* CONTACT FORM */

.inputtext {
	padding: 5px;
	height: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #cdcec7;
	background-color: #fbfcf6;
	font-family: Arial, Verdana;
	color: #696962;
	font-size: 0.9em;
}

.inputmessage {
	padding: 5px;
	height: 180px;
	width: 420px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #cdcec7;
	overflow: auto;
	resize: none;
	background-color: #fbfcf6;	
	font-family: Arial, Verdana;
	color: #696962;
	font-size: 0.9em;
}

#button {
	width: 75px;
	height: 34px;
	border: 0px;
	background: url("/images/button-bg.jpg") top center no-repeat;
}

input.inputtext:focus, textarea.inputmessage:focus {
	border: 1px solid #9ca289;
	background-color: #fbfcf6;
}

#button:active {
	background-position: bottom center;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

#contactForm label.error, #contactForm input.submit {
	font-size: 1em;
	font-family: Arial, Verdana, Helvetica;
	color: #ff0000;
	padding: 10px;
	padding-left: 5px
}

#contactForm input.error {
	border: 1px solid #ff0000
}

#contactForm textarea.error {
	border: 1px solid #ff0000
}