/* Style for JD's site v2 */


@font-face {
	font-family: 'MarketingScriptRegular';
	src: url('../fonts/marketingscript-webfont.eot');
	src: local('MarketingScriptRegular'),
		url('../fonts/marketingscript-webfont.woff') format('woff'),
		url('../fonts/marketingscript-webfont.ttf') format('truetype'),
		url('../fonts/marketingscript-webfont.svg#webfontGSOAzAmF') format('svg');
}

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
}   

body { background: #fafafa; color: #333; font: 87.5%/1.5 Arial, Helvetica, sans-serif; }

/* Selection stuff for Mozilla and Safari */
::selection { background: #232323; color: #fafafa; }
::-moz-selection { background: #232323; color: #fafafa; }

/* Typopgraphy */

p { margin-bottom: 21px; }
p.contact { color: #aaa; font-size: 18px; margin: 24px 10px; }
p.intro { text-indent: 10px; margin: 21px 0; font-size: 18px; }
p.visit { margin-top: 1.5em; }

h2, h3 { font-family: "MarketingScriptRegular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: -1px; line-height: 1.3; }
h2 { font-size: 60px; margin-top: 21px; }
h3 { font-size: 48px; }
h4 { font-size: 21px; font-weight: 400; }
h5 { font-size: 18px; font-weight: 400; }

li { display: inline; list-style: none; }

h3 + p { margin-bottom: 42px; font-size: 18px; }

cite { color: #999; float: right; font-style: normal; }

#twitter cite { position: absolute; right: 20px; bottom: 15px; }
#intro { margin-top: 63px; float: left; clear: left; }

footer blockquote { background: url(../images/small-dull-logo.gif) bottom right no-repeat; font-size: 21px; width: 620px; padding-top: 21px; height: 125px; }

footer cite { font-size: 18px; padding-right: 185px; margin-top: -7px; }

/* Links */

a { text-decoration: none; color: #00afed;  }
a:hover { border-bottom: 1px solid #00afed; }

/* Layout */

img { border: 1px solid #e5e5e5; padding: 9px; display: inline-block; }
img:not(#logo) { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); }

a img { border: 0 !important;  }

.wrapper { margin: 0 auto; width: 960px; }

#logo { background: none !important; display: block; float: left; padding: 0; border: none; }

#twitter {
	position: relative;
	float: right;
	display: block;
	background: #e9e9e9;
	height: 63px;
	padding: 20px;
	margin-top: 21px;
	width: 580px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.arrow { position: absolute; bottom: 0; background: url(../images/arrow.png) no-repeat; display: block; height: 63px; width: 30px; right: 160px; z-index: 1; }


.number {
	background: #181818;
	border-radius: 25px;
	color: #fff;
	display: inline-block;
	height: 50px;
	line-height: 50px;
	float: left;
	font-size: 24px;
	margin-right: 10px;
	position: relative;
	text-align: center;
	width: 50px;
	z-index: 2;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
}

header { padding-top: 84px; margin: 0 auto; }

header:after, section:after, article:after, footer:after { clear: both; content: '.'; display: block; height: 0 !important; visibility: hidden; }

nav { background: rgb(37,37,37); background: rgba(0,0,0,0.85); color: #fff; height: 42px;  margin-bottom: 21px; position: fixed; z-index: 3; width: 100%; }

nav ul { text-align: right; margin: 0 auto; width: 960px; }

nav li {
	float: right;
	letter-spacing: 2px;
	line-height: 42px;
	text-transform: uppercase;
	width: 160px;
}

nav a { color: #fff; }
nav a:hover { border-bottom: none; color: #00afed; }

nav a, footer a { -webkit-transition: color .15s ease-in-out; -moz-transition: color .15s ease-in-out; }

article { clear: both; padding-bottom: 84px; }

footer { color: #f1f1f1; display: block; background: #181818; padding: 38px 0 63px; }
footer h4 { font-size: 14px; letter-spacing: 2px; text-transform: uppercase;}
footer li, .other-sites li { display: block; padding: 8px 0px 10px; border-bottom: 1px dotted #595959 ; }
footer a:hover { color: #fff; border: none !important; }

#my-work, #contact-me { padding-top: 63px; }

footer .col:first-child { margin: 0 40px 42px 0 !important; width: 290px !important; }

/* Magin Grid :) */

.col { position: relative; float: left; margin: 0 20px 42px 0; display: inline-block; /* IE 6 */  z-index: 1; }

.g160 { width: 140px; }
.g240 { width: 220px; }
.g320 { width: 300px; }
.g480 { width: 460px; }
.g640 { width: 620px; }
.g720 { width: 700px; }
.g800 { width: 780px; }


.r { float: right; }
.l { float: left; }

.last { margin-right: 0 !important; }

#me { padding: 10px; position: relative; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); }

#pic { margin-top: 42px; }

img, #me { background: url(../images/backing.jpg) no-repeat; }
figure a:hover { opacity: .9; border: none !important; }

/* Forms */

fieldset { border: none; }

input[type=text], textarea {
	border: 1px solid #ccc;
	font-family: inherit;
	font-size: 18px;
	padding: 5px;
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

input[type=text]:focus, textarea:focus { border: 1px solid #aaa;  }

input[type=text] { margin-bottom: 21px; width: 288px; }

textarea { width: 610px; /* Allowing for 2px of border :) */ height: 198px; /* Allow for padding and borders */ }

label, button { cursor: pointer; display: block; }

label { font-size: 18px; }

button {
	background: #181818;
	border: none;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	height: 42px;
	letter-spacing: 2px;
	line-height: 42px;
	margin-top: 32px;
	padding: 1px 0 3px;
	position: relative;
	text-transform: uppercase;
	vertical-align: middle;
	width: 300px;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
	-moz-border-radius: 3px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
	-webkit-appearance: none;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
	-webkit-transition: background .15s ease-in-out;
	-moz-transition: background .15s ease-in-out;
}
button:active { top: 1px; }
button:hover, button:focus { background: #333; }


.kp { letter-spacing: 1px; }

.site { margin-top: 42px; }

.other-sites li { display: block; }

.pt { padding-top: 42px; }

.number.b { position: static !important; }

.logo-inverted { background: url(../images/logo-dull.gif) center no-repeat; float: right; width: 320px; height: 155px; }

.contact-text { font-size: 18px; margin-bottom: 42px; }

.launch-soon { text-transform: capitalize; color: #999;}

.message-sent { font-size: 21px; }

@media screen and (min-width: 1400px) {
	.wrapper, nav ul { width: 1200px; }
	.text { width: 540px; }
	.site-description {
		-moz-column-count: 2;
		-moz-column-gap: 20px;
	}
	#intro { width: 800px; }
	nav li { width: 220px; }
	fieldset .g640 { width: 800px; }
	textarea { width: 798px; }
}