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

SCREEN STYLES
http://www.jameslindeman.co.uk

	1. FONTS
	2. DEFAULTS
		LAYOUT
		TYPOGRAPHY
		LINKS
		PAGE HEADER
		PAGE FOOTER
	3. HOME
		FEATURED WORK
		FEATURE NAV
		CONTACT
	4. USER MESSAGES
	5. ERROR 404
		
	COLOUR REF:
	Blue: #7b8592 .75=#9ca4ad
	Purple: #392a30 (+.4 Black)=#1c1518 .4=#b0aaac
	Paper: #c3ab8e .75=#d0bea9 (+.5 Black)=#615547 (+.75 Black)=#312b24

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

@import url("reset.css");


/* 1. FONTS
-------------------------------------------------------------- */
body, input, textarea, #contact-form :focus { font-family:"proxima-nova-1","proxima-nova-2",arial,sans-serif; font-weight:400; }
#about h1 { font-weight:100; }
#contact, #error-404 #message { font-weight:300; }
#elsewhere { font-family:"proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2",arial,sans-serif; }
strong, #error #message h1 { font-weight:600; }
#featured-work em { font-style:normal; font-weight:normal; } /* ITALICS NOT IN USE */


/* 2. DEFAULTS
-------------------------------------------------------------- */

/* 984 LAYOUT: 16 COLUMN, 24PX GUTTERS, 18PX BASELINE, VERTICALLY EM BASED */
html { background:#c3ab8e url(/images/ui/body.png) repeat center 0; } /* FOR WEBKIT WHITE SPACE PROBLEM WHEN PAGE IS SHORTER THAN VIEWPORT */
body { font-size:10px; color:#1c1518; background:#c3ab8e url(/images/ui/body.png) repeat center 0; -webkit-text-size-adjust:100%; }
#primary-content { background:#7b8592 url(/images/ui/body.png) repeat center 0; overflow:hidden; }
#primary-content div.content { width:984px; overflow:hidden; background:url(/images/ui/diagonal-grid.png) repeat-x 0 bottom; padding-bottom:4.8em; margin:0 auto; }
.hidden { position:absolute; left:-9999px; }

/* TYPOGRAPHY */
h1 { font-size:1.8em; line-height:1.6667em; margin:1.3333em 0 .6667em 0; }
p { font-size:1.4em; line-height:1.2857em; margin:.8571em 0; }

/* LINKS */
a:link, a:visited { color:#1c1518; text-decoration:none; }
a:hover, a:active { color:#fff; }

/* PAGE HEADER */
#page-header { background:url(/images/ui/h-line.png) repeat-x 0 bottom; width:420px; padding:1.8em 0 1.2em; }
#page-header h1 a { text-indent:-9999px; background:url(/images/ui/header.png) no-repeat; display:block; width:396px; height:60px; margin-left:24px; }

/* PAGE FOOTER */
#page-footer { color:#615547; background:url(/images/ui/h-line.png) repeat-x 0 top; width:984px; overflow:hidden; padding:.6em 0; margin:0 auto 1.2em; }
#page-footer small { font-size:1.2em; padding:0 24px; margin:.5em 0; }
#page-footer strong { text-shadow:0 1px 0 #d0bea9; }
#page-footer small a:link, #page-footer small a:visited  { color:#615547; }
#page-footer small a:hover, #page-footer small a:active { color:#615547; border-bottom:dotted .0833em #615547; }

#elsewhere { background:url(/images/ui/h-line.png) repeat-x 0 bottom; width:100%; overflow:hidden; padding:1.2em 0; margin-bottom:1.8em; }
#elsewhere li { font-size:1.2em; line-height:1.5em; float:left; padding:.5em 0; }
.wf-active #elsewhere li { font-size:1.4em; line-height:1.2857em; padding:.4286em 0; } /* IF WEBFONT LOADER ACTIVE */
#elsewhere li strong { text-transform:uppercase; display:block; }
#elsewhere li a { background:url(/images/ui/icons.png) no-repeat; float:left; min-width:78px; padding:.4286em 0 .4286em 42px; margin-left:24px; }
#elsewhere li a:link, #elsewhere li a:visited { color:#615547; }
#elsewhere li a:hover, #elsewhere li a:active { border:none; }
#elsewhere li a.twitter { background-position:0 -246px; }
#elsewhere li a.twitter:hover { background-position:0 -6px; }
#elsewhere li a.dribbble { background-position:-600px -246px; }
#elsewhere li a.dribbble:hover { background-position:-600px -6px; }
#elsewhere li a.flickr { background-position:-300px -246px; }
#elsewhere li a.flickr:hover { background-position:-300px -6px; }
#elsewhere li a.delicious { background-position:-900px -246px; }
#elsewhere li a.delicious:hover { background-position:-900px -6px; }
#elsewhere li a.last-fm { background-position:-1200px -246px; }
#elsewhere li a.last-fm:hover { background-position:-1200px -6px; margin-right:24px; }


/* 3. HOME
-------------------------------------------------------------- */
#about { width:420px; overflow:hidden; float:left; }
#about h1 { font-size:2.4em; line-height:1.25em; color:#fff; background:url(/images/ui/h-line.png) repeat-x 0 bottom; padding:0 0 .75em 24px; margin:.75em 0 0; }
#about h2 { font-size:1.8em; line-height:1em; text-shadow:0 1px 0 #9ca4ad; padding:0 24px; margin:1.3333em 0 .6667em 0; }
#about p { padding:0 24px; }

/* FEATURED WORK */
#featured-work { width:540px; overflow:hidden; float:left; position:relative; top:-7.2em; margin:0 0 -7.2em 0; }
#featured-work img { background:url(/images/ui/white-40.png); background:rgba(255,255,255,.4); float:left; padding:6px 6px; margin-left:24px; margin-bottom:-60px; }
#featured-work #details { float:right; width:492px; }
#featured-work #details h4, #featured-work #details p { font-size:1.2em; line-height:1.5em; float:left; padding:.5em 12px; }
#featured-work #details h4 { color:#c3ab8e; background:#392a30 url(/images/ui/diagonal-grid.png) repeat 0 top; width:468px; margin:60px 0 0 0; }
#featured-work #details p { color:#9ca4ad; background:url(/images/ui/black-40.png); background:rgba(0,0,0,.4); margin:0 24px 0 0; }
#featured-work p a { color:#9ca4ad; border-bottom:dotted .0833em #7b8592; }
#featured-work p a:hover { color:#fff; }
#featured-work h4 a { color:#c3ab8e; border-bottom:dotted .0833em #615547; }
#featured-work h4 a:hover { color:#fff; }

/* FEATURE NAV */
ul.feature-nav { background:url(/images/ui/feature-nav.png) no-repeat; width:48px; height:120px; float:left; }
ul.feature-nav li { float:left; width:24px; height:60px; padding:0; margin:0; }
ul.feature-nav li.previous { float:left; }
ul.feature-nav li.next { float:right; margin-top:60px; }
ul.feature-nav li a { text-indent:-9999px; color:#fff; background:url(/images/ui/feature-nav.png) no-repeat; padding:6px 0 6px 12px; }
ul.feature-nav li.previous a { background-position:-54px 0; float:left; width:12px; height:48px; }
ul.feature-nav li.previous a:hover { background-position:-108px 0; float:left; width:12px; height:48px; }
ul.feature-nav li.next a { background-position:-78px -60px; float:right; width:12px; height:48px; }
ul.feature-nav li.next a:hover { background-position:-132px -60px; float:right; width:12px; height:48px; }

/* CONTACT */
#contact { color:#c3ab8e; background:#392a30 url(/images/ui/footer-join.png) repeat-x 0 bottom; width:auto; overflow:hidden; }
#contact div.content { background:url(/images/ui/diagonal-grid.png) repeat 0 top; width:936px; overflow:hidden; padding:1.8em 24px 4.2em 24px; margin:0 auto; }
#contact div.vcard { width:396px; float:left; overflow:hidden; }
#contact p.details { font-size:1.8em; line-height:1em; margin:.6667em 0; }
#contact a { color:#fff; }
#contact a:hover { text-shadow:0 0 5px #b0aaac; border:none; }
#contact-form { width:516px; float:right; overflow:hidden; }
#contact-form :focus { color:#1c1518; background:#fff; }
#contact-form ol { overflow:hidden; width:516px; }
#contact-form li { float:left; width:516px; overflow:hidden; padding:.6em 0; margin:0; }
#contact-form li.send { float:right; }
#contact-form label, #contact-form input, #contact-form textarea, #contact-form button { font-size:1.4em; line-height:1.2857em; }
#contact-form label { color:#c3ab8e; float:left; width:156px; padding:.2143em 0; }
#contact-form input { color:#c3ab8e; background:url(/images/ui/black-40.png); background:rgba(0,0,0,.4); border:none; float:right; width:312px; padding:.2143em 12px; margin:0; }
#contact-form li.send input { color:#fff; background:url(/images/ui/black-20.png); background:rgba(0,0,0,.2); float:right; width:336px; -webkit-appearance:none; }
#contact-form li.send input:hover { background:#111; cursor:pointer; }
#contact-form input, textarea, button { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
#contact-form textarea { color:#c3ab8e; background:url(/images/ui/black-40.png); background:rgba(0,0,0,.4); border:none; float:left; width:492px; height:5.1429em; padding:.8571em 12px; margin:0; }


/* 4. USER MESSAGES
-------------------------------------------------------------- */
#system-user-message { color:#333; background:#fff; }
#system-user-message #message { background:none; width:465px; overflow:hidden; margin:60px auto 0; }
#system-user-message h1 { background:url(/images/ui/h-line.png) repeat-x 0 bottom; padding:0 0 .6667em 24px; margin-bottom:.6667em; }
#system-user-message li { font-size:1.8em; line-height:1.3333em; padding-left:24px; margin:.3333em 0; }
#system-user-message p.link { background:url(/images/ui/h-line.png) repeat-x 0 top; float:left; width:441px; padding-left:24px; margin-top:.8571em; }
#system-user-message p a { background:url(/images/ui/black-20.png); background:rgba(0,0,0,.2); float:left; padding:.4286em 12px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; }
#system-user-message p a:hover { background:url(/images/ui/black-40.png); background:rgba(0,0,0,.4); }
#user-message #page-header { background:url(/images/ui/diagonal-grid.png) repeat-x 0 bottom; width:984px; padding:1.8em 0 3.6em; margin:0 auto; }
#user-message #message { color:#c3ab8e; background:#392a30 url(/images/ui/footer-join.png) repeat-x 0 bottom; overflow:hidden; }
#user-message #message #content { background:url(/images/ui/diagonal-grid.png) repeat 0 top; width:936px; overflow:hidden; padding:1.8em 24px 4.2em 24px; margin:0 auto; }
#user-message #message h2 { font-size:2.1em; line-height:1.4286em; margin:.2857em 0; }
#user-message #message ul { overflow:hidden; }
#user-message #message li { font-size:1.4em; line-height:1.2857em; float:left; margin:.4826em 24px .4826em 0; }
#user-message #message li a { text-align:center; color:#fff; background:url(/images/ui/black-20.png); background:rgba(0,0,0,.2); float:left; min-width:168px; padding:.8571em 24px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
#user-message #message li a:hover { background:url(/images/ui/black-40.png); background:rgba(0,0,0,.4); }
#user-message #message p { clear:left; }
#user-message #page-header { width:984px; }