/* CSS for new site - JD - 01/02/2011 */

@font-face {
	font-family: 'LeagueGothic';
	src: url('http://static.jamesdun.com/style/fonts/League_Gothic-webfont.eot?') format('eot'),
		url('http://static.jamesdun.com/style/fonts/League_Gothic-webfont.woff') format('woff'),
		url('http://static.jamesdun.com/style/fonts/League_Gothic-webfont.ttf') format('truetype'),
		url('http://static.jamesdun.com/style/fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
	font-weight: normal;
	font-style: normal;
}

nav, article, section, figure, figcaption { display: block; }

html, body, header, nav, article, section, figure, figcaption
p, h1, h2, h3, h4,
ul, li,
form, fieldset, input, textarea, label, button,
span, div { margin: 0; padding: 0; }

body, form, input, textarea, button { font: 100%/1.5 georgia, serif; color: #fff; }

html {
	background: black url(http://static.jamesdun.com/style/images/wood-flooring-small-darker.jpg);
	background: -webkit-gradient(radial, center center, 0, center 40%, 3000, from(rgba(0, 0, 0, 0.4)), to(rgba(0,0,0,0.9))),
				url(http://static.jamesdun.com/style/images/wood-flooring-small.jpg);
	background: -moz-radial-gradient(center 40%, rgba(0, 0, 0, 0.4) 1%, rgba(0, 0, 0, 0.9)) fixed,
				url(http://static.jamesdun.com/style/images/wood-flooring-small.jpg);
	background: -webkit-radial-gradient(center 40%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.9)) fixed,
				url(http://static.jamesdun.com/style/images/wood-flooring-small.jpg);
	background: -o-radial-gradient(center 40%, rgba(0, 0, 0, 0.4) 1%, rgba(0, 0, 0, 0.9)),
				url(http://static.jamesdun.com/style/images/wood-flooring-small.jpg);
	max-width: 1200px; min-width: 980px; top: 0;
}

body { background: url(http://static.jamesdun.com/style/images/me-bg2.png) 100% 110px no-repeat; padding-bottom: 400px; }

article:after { content: '.'; height: 0; display: block; clear: both; visibility: hidden; }

/* Typograpy */

::selection { background: hsla(30, 82%, 43%, 0.5); text-shadow: none; }
::-moz-selection { background: hsla(30, 82%, 43%, 0.5); text-shadow: none; }

h1, h2, h3 { font-family: 'Arial Narrow', sans-serif; font-weight: 400; }
.fontface h1, .fontface h2, .fontface h3 { font-family: 'LeagueGothic'; font-weight: 400; }

h1 {
	text-align: center;
	font-size: 55px;
	color: #f1f1f1;
	text-shadow: 0 3px 1px rgba(0,0,0,0.5);
	margin-bottom: 0;
}
.fontface h1 { font-size: 70px; }
h2, h3 { font-size: 110px; text-shadow: 0 3px 2px rgba(0,0,0,0.5); line-height: .7; }
h3 + p:first-of-type { font-size: 24px; text-shadow: 0 2px 2px rgba(0,0,0,0.5); } 
h4 { font-size: 36px; line-height: 1; font-weight: 400; text-shadow: 0 2px 2px rgba(0,0,0,0.5); }

a { text-decoration: none; font-weight: 700; color: #C86D14; }
a img { border: none; }
header a:hover > img { opacity: .9; }

/* Wrappers */
section { padding-top: 110px; width: 96%; margin: 0 2%; }
.wrapper { margin: 0 2%; max-width: 1500px; min-width: 800px; }
.main-content { padding-bottom: 200px; }

/* Header */
header {
	font-family: 'LeagueGothic';
	background: rgb(22,22,22); background: url(http://static.jamesdun.com/rgba.php?0,0,0,0.8); background: rgba(0,0,0,0.8);
	color: #fff;
	height: 63px;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 3;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
	        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
header img { background: none; border: none; float: left; padding: 10px 0 11px; opacity: .5; }
header img, a {
	-webkit-transition: all .2s ease-in-out;
	   -moz-transition: all .2s ease-in-out;
	     -o-transition: all .2s ease-in-out;
	        transition: all .2s ease-in-out;
}

/* Nav */
nav ul { text-align: right; margin: 0 auto; float: right; }
nav li {
	display: inline-block;
	*zoom: 1;
	*display: inline;
	letter-spacing: 4px;
	line-height: 63px;
	text-transform: uppercase;
	font-weight: 400;
	margin-left: 75px;
}
nav li:before, article > div li:before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALRJREFUeNpiYMABTuVragOxLC55FgbcIAVKF2KTZMRhG8imE1CuhdnE64/R1TDhsK0IBxu7jSB/ASmQbXPR1CUD8WOgzVfhGoGKQYpgGogBIGdfBTm1D4j5GYgHILV9TFDrQ6AmEQIgtW4gPYxI/uMDUmugzsalKQSo6RNKqEIFPuHzG0wTtuiQwaNRFl88Ikseh2IY0MaqEehHSyQNIL+AMTTgjqOpQU1mWCUQ8h7IiR4gwAA86jrksgr0jwAAAABJRU5ErkJggg==); }
nav li:before { top: -3px; left: -38px; position: relative; }
nav li:first-child:before { content: ''; }
nav a { color: #fff; font-size: 24px; font-weight: 400; }
nav a:hover { color: #C86D14; }

/* Heading group */
.intro { margin-left: 5%; margin-top: 120px; width: 40%; margin-bottom: 250px; }
.intro p { margin-top: -20px; color: #fff; font-family: Georgia; text-shadow: 0 2px 1px rgba(0,0,0,0.7); font-size: 36px; text-align: center; font-variant: small-caps; }

.line1, .line2, .line3, .line4 { display: block; }
.line1, .line2, .line4 { text-transform: uppercase; }
.line1 { font-size: 161%; line-height: .9; }
.line2 { font-size: 137%; line-height: .9; }
.line3 { font-size: 120%; line-height: 1.0; font-family: Georgia, serif; font-style: italic; color: rgb(200, 109, 20); z-index: 2; position: relative; }
.line4 { font-size: 324%; line-height: 1.02; }

.csstransforms3d h1 { margin: 42px 0 42px; -webkit-perspective: 900; }
.csstransforms3d .intro { margin-top: 180px; }


/* My Work */
#my-work { margin-bottom: 80px; position: relative; }
#my-work article { width: 100%; clear: both; display: block; margin: 63px 0; }

figure { width: 63%; float: right; display: inline-block; margin: 0 0 42px 0; }
figure a { position: relative; display: block; }
figure img {
 	max-width: 100%;
	margin: 0 auto; display: block;
	position: relative;
	z-index: 2;
	background: rgb(33,33,33); background: url(http://static.jamesdun.com/rgba.php?0,0,0,0.25); background: rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	   -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	     -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	        box-shadow: 0 3px 6px rgba(0,0,0,.5);
	-moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}

figure a:active {
	-webkit-transform: scale(0.98);
	-moz-transform: scale(0.98);
	box-shadow: none;
}

section { text-shadow: 0 1px 1px rgba(0,0,0,.6); }

article > div { margin-top: 21px; float: left; width: 35%; }
article > div li { list-style: none; margin-bottom: 7px; }
article > div li:before { padding-right: 10px; }
article > div a { display: block; margin-top: 21px; }
article > div p:last-of-type { font-size: 21px; font-style: italic; }

article:nth-child(2n) > div { float: right; }
article:nth-child(2n) figure { float: left; }

/* Contact */
form {
	-webkit-transition: all 2s ease-in-out;
	   -moz-transition: all 2s ease-in-out;
	     -o-transition: all 2s ease-in-out;
		    transition: all 2s ease-in-out;
}
fieldset { border: none; padding: 0; }

.message-text {
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out 1s;
	   -moz-transition: opacity 1s ease-in-out 1s;
	   	 -o-transition: opacity 1s ease-in-out 1s;
	   	    transition: opacity 1s ease-in-out 1s;
}

.sending { opacity: .8; }
.sent form {
	opacity: 0; visibility: hidden;
	-webkit-transform: translateY(200px);
	   -moz-transform: translateY(200px);
	     -o-transform: translateY(200px);
		    transform: translateY(200px);
}
.sent .message-text, .no-js .message-text { opacity: 1; font-size: 36px; line-height: .8; }

input, textarea {
	-webkit-box-shadow: inset 1px 2px 1px rgba(0,0,0,.3), 1px 1px 0 rgba(255,255,255,0.15);
	   -moz-box-shadow: inset 1px 2px 1px rgba(0,0,0,.3), 1px 1px 0 rgba(255,255,255,0.15);
		    box-shadow: inset 1px 2px 1px rgba(0,0,0,.3), 1px 1px 0 rgba(255,255,255,0.15);
}

input, textarea {
	border: 1px solid #313131;
	border: 1px solid rgba(0,0,0,0.2);
	background: rgb(33,33,33); background: url(http://static.jamesdun.com/rgba.php?0,0,0,0.25); background: rgba(0,0,0,0.3);
	font-family: inherit; font-size: 18px;
	padding: 5px;
}

input { display: block; margin-bottom: 21px; width: 288px; }
textarea { width: 70%; height: 70px; overflow: hidden; float: left; }
input:focus, textarea:focus, button:focus { outline: none; }

label, button { cursor: pointer; display: block; }
label { font-size: 18px; }

button {
	background: #222;
	background: rgba(11, 11, 11, 0.6);
	background: -moz-linear-gradient(-90deg, rgba(33,33,33,0.6), rgba(11,11,11,0.6));
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(33,33,33,0.6)), to(rgba(11,11,11,0.6)));
	border: none;
	letter-spacing: 5px;
	line-height: 42px;
	height: 42px;
	float: right;
	padding: 1px 0 3px;
	text-transform: uppercase;
	vertical-align: middle;
	width: 20%;
	margin: 21px 3.5% 0 0;
	*overflow: visible;
	
	
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
		 -o-transition: all .15s ease-in-out;
		 	transition: all .15s ease-in-out;
	
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.3);
	   -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.3);
	        box-shadow: 0 3px 5px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.3);
}

button:active, button:focus { background: #000; background: rgba(0,0,0,0.6); }
button:active {
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.3);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.3);
	        box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.3);
}

/* Mobile */

@media screen and (max-width: 800px) {
	html { background: black url(http://static.jamesdun.com/style/images/wood-flooring-small-darker.jpg); }
	body { background: url(http://static.jamesdun.com/style/images/me-bg2.png) 150% 110px no-repeat; }
	body, p, h1, h2, h3, h4 { -webkit-text-size-adjust: none; }
	html, .wrapper { min-width: 700px; max-width: 800px; margin: 0; }
	header { position: static; }
	nav { margin-right: 2%; }
	nav a { font-size: 21px; letter-spacing: .09em; }
	nav li { margin-left: 40px; }
	nav li:before { left: -20px; }
	article > div { width: 100%; }
	figure { float: none; width: 100%; margin-top: 21px; }
	.wrapper > a img { margin-left: 2%; }
	h1 { font-size: 55px; margin-bottom: 0 !important; }
	.fontface h1 { font-size: 55px; }
	.intro > p { font-size: 28px; }
}

@media screen and (max-width: 480px) {
	body { background: url(http://static.jamesdun.com/style/images/me-bg2.png) 100px 120px no-repeat; }
	html { min-width: 470px; }
	.wrapper { margin: 0 auto; display: block; width: 95%; min-width: 0; }
	header { position: static; }
	.intro { width: 100%; margin-top: 42px; margin-left: 0; margin-bottom: 0; }
	.csstransforms3d .intro { margin-top: 80px; }
	.csstransforms3d h1 > span { -webkit-transform: rotateY(0deg); }
	h2, h3 { font-size: 90px; }
	nav ul { margin: 0; }
	nav li { margin-left: 20px; }
	nav li:before { display: none; }
	#my-work article { margin: 21px 0; }
	.site-text { float: none; width: 100%; }
	figure img { padding: 7px; }
	textarea { width: 97.5%; float: none; }
	textarea:focus { height: 70px; }
	button { margin: 21px auto; display: block; float: none; width: 40%; }
}