* { margin: 0; padding: 0; list-style: none; text-indent: 0; font-weight: 400; }
body { background: #1a1b1f; color: #fff; font: 12px/1.6em Helvetica, Arial, sans-serif; -webkit-text-size-adjust: none; }
a img { border: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* HTML5 styling */
article, section, nav, header, footer { display:  block; }

#logo { position: absolute; left: 50px; top: 30px; }

nav { text-transform: uppercase; font-size: 11px; color: #505050; -webkit-text-stroke:1px transparent; }
	nav p { position: absolute; left: 30.8%; top: 8.2em; width: 20%; text-align: right; }
	nav ol { position: absolute; left: 51.8%; top: 8.2em; }
		nav ol li { float: left; margin-right: 2em; }
			nav ol li a { color: #fff; }
			nav ol li a.active { color: #c56125; text-decoration: underline; }

header[role=banner], #wrapper { width: 90%; margin: 0 0 2em; position: relative; max-width: 1000px; }
#portfolio { float: left; clear: left; margin-right: 1%; width: 47.8%; margin-left: 3%; margin-top: 120px; }
#portfolio_right { float: left; width: 47.8%; margin-top: 164px; }

article { margin-bottom: 10px; background: #1e1f23; border: 10px solid #1e1f23; }
	#portfolio article { float: right; }
	#portfolio_right article { float: left; }
	
	.highlight { background: #18191c; padding: 15px; }
		.highlight strong { color: #c56125; }
		article a { color: #2fc1ee; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.1em; }
		.highlight abbr { text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.1em; }
	
	article h1 { font: 24px/24px 'Rockwell'; -webkit-text-stroke:1px transparent; }
	article h2 { font: 18px/36px 'Rockwell'; background: #18191c; padding: 0 10px 0 25px; margin: 10px 10px 0 -10px; display: inline-block; -webkit-text-stroke:1px transparent; }
	article.build h2 { background: #c56125; }
	article h2 + p { color: #505050; font: 18px/36px 'Rockwell'; text-transform: lowercase; margin-top: 10px; display: inline; -webkit-text-stroke:1px transparent; }
	
	article header { overflow: hidden; }
	
	article h3 { font: 14px 'Rockwell'; -webkit-text-stroke:1px transparent; }
	
	article footer { display: none; font-size: 0.85em; line-height: 1.35em; color: #666; -webkit-text-stroke:1px transparent; }
		article footer p { margin: 0.6em 1em 0.6em; }
		article footer p:first-child { margin-right: 60px; }
			article footer strong { font-weight: 800; color: #fff; }
	
	.highlight p { margin-top: 18px; }
	
	#introduction { width: 66.94560669%/* 320px */; }
	#about { width: 87.86610879%/* 420px */; }
	
	#arabellamercer { width: 84.93723849%/* 406px */; }
	
	#crofton { width: 95.39748954%/* 456px */; }
	#sixteen { width: 88.07531381%/* 421px */; }
	#ofcs { width: 74.47698745%/* 356px */; }
	
	#manorclinic { width: 84.72803347%/* 405px */; }
	#weaponsgrade { display: none; width: 87.0292887%/* 416px */; }
	#threeforagirl { width: 75.10460251%/* 359px */; }
	
	article a { position: relative; }
	article img { max-width: 100%; margin-top: 2em; }
	article .iphone { position: absolute; bottom: -25px; z-index: 5; }
	
	#manorclinic .iphone { right: -60px; }
	#ofcs .iphone { left: -60px; }

@media screen and (max-width: 480px) {
	body { padding: 10px; }
		#wrapper { margin-top: 10px; width: auto !important; }
	#logo { position: static; }
	nav { display: none; }
	
	article h2 { margin-bottom: 0; line-height: 24px; padding-top: 5px; padding-bottom: 10px; }
	article h2 + p { margin: 0 0 10px 15px; clear: left; }
	
	#portfolio, #portfolio_right, #portfolio article, #portfolio_right article { float: none; width: auto !important; margin: 0 0 10px 0; }
		article img { width: 100%; }
		article .iphone { width: 25%; }
			#manorclinic .iphone { right: -15px; }
			#ofcs .iphone { left: -15px; }
}