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

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

#navigation { text-transform: uppercase; font-size: 11px; color: #505050; -webkit-text-stroke:1px transparent; }
	#navigation p { position: absolute; left: 308px; top: 82px; width: 200px; text-align: right; }
	#navigation ol { position: absolute; left: 518px; top: 82px; }
		#navigation ol li { float: left; margin-right: 20px; }
			#navigation ol li a { color: #fff; }
			#navigation ol li a.active { color: #c56125; text-decoration: underline; }

#wrapper { width: 1000px; }
#portfolio_left { float: left; clear: left; margin-right: 10px; width: 478px; margin-left: 30px; margin-top: 120px; }
#portfolio_right { float: left; width: 478px; margin-top: 164px; }

.box { margin-bottom: 10px; background: #1e1f23; border: 10px solid #1e1f23; }
	#portfolio_left .box { float: right; }
	#portfolio_right .box { float: left; }
	
	.highlight { background: #18191c; padding: 15px; }
		.highlight strong { color: #c56125; }
		.highlight 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; }
	
	.box h1 { font: 24px/24px 'Rockwell'; -webkit-text-stroke:1px transparent; }
	.box h2 { font: 18px/36px 'Rockwell'; background: #18191c; padding: 0 10px 0 25px; margin: 10px 10px 10px -10px; float: left; -webkit-text-stroke:1px transparent; }
	.box.build h2 { background: #c56125; }
	.box h2 + p { color: #505050; font: 18px/36px 'Rockwell'; text-transform: lowercase; margin-top: 10px; float: left; -webkit-text-stroke:1px transparent; }
	
	.box h3 { font: 14px 'Rockwell'; -webkit-text-stroke:1px transparent; }
	
	.highlight p { margin-top: 18px; }
	
	#introduction { width: 320px; }
	#about { width: 420px; }
	
	#crofton { width: 456px; }
	#sixteen { width: 421px; }
	#ofcs { width: 356px; }
	
	#manorclinic { width: 405px; }
	#weaponsgrade { width: 416px; }
	#threeforagirl { width: 359px; }
	
	.box a { position: relative; }
	.box .iphone { position: absolute; bottom: -25px; z-index: 5; }
	
	#manorclinic .iphone { right: -60px; }
	#ofcs .iphone { left: -60px; }

@media screen and (max-width: 767px) {
	body { padding: 10px; }
		#wrapper { margin-top: 10px; width: auto !important; }
	#logo { position: static; }
	#navigation { display: none; }
	
	#portfolio_left, #portfolio_right, .box { float: none; width: auto !important; margin: 0 0 10px 0; }
		.box img { width: 100%; }
		.box .iphone { width: 25%; }
			#manorclinic .iphone { right: -15px; }
			#ofcs .iphone { left: -15px; }
}