/* CSS Document */

/* Authored by:
------------------------------------------
The Graphic Element
August 2009
http://www.thegraphicelement.com

License: Copyright (c) 2009, The Graphic Element, All rights reserved.
------------------------------------------ */

/* Imported Styles
------------------------------------------ */
@import url(reset.css);

/* Go on just say it...
------------------------------------------ 
@import url(http://www.domain.com/css/reset.css);*/


/* Global
------------------------- */
	body { color: #aaa; font-size: 62.5%; background: #000; }
	a:link, a:visited { color: #666; text-decoration: none; }
	a:hover, a:active { color: #ccc; }
	a:focus { outline: none; } /* Removes FF link outlines */
	body, input, table, td, th, textarea { font-family: Tahoma, Geneva, Helvetica, Arial, sans-serif; }
        
  h1, h2, h3, h4 { letter-spacing: 0.1em; }
	h1 { font-size: 2em; }
	h2 { margin: 1.5em 0 0.7em; color: #666; font-size: 1.8em; font-weight: bold; }

	#wrapper { margin: 10px auto 0; width: 700px; background: #000; }

    
/* Header
------------------------- */
	#header { position: relative; width: 700px; height: 65px; border-bottom: 1px solid #444; text-indent: -999em; }	
	#header h1 a#logo { position: absolute; top: 35px; left: 0; display: block; width: 285px; height: 30px; background: url(../img/logo.gif) no-repeat 0 0; overflow: hidden; }
	#header p#title { position: absolute; top: 35px; right: 0; display: block; margin: 0; width: 160px; height: 30px; background: url(../img/title.gif) no-repeat 0 0; }

	
	/* Nav
------------------------- */
	#nav { margin-top: 20px; width: 700px; text-align: center; }
	#nav a { color: #999; }
	#nav li { display: inline; padding: 0 25px; font-size: 1.2em; font-family: Tahoma, Geneva, Helvetica, Arial, sans-serif; letter-spacing: 0.3em; }
	
	/* OVER + ON STATES */
	#nav li a:hover, body#home #nav li a#n-home, body#scenes #nav li a#n-scenes, body#cv #nav li a#n-cv, body#contact #nav li a#n-contact { color: #ccc; }


/* Content
------------------------- */
	#content { clear: left; padding: 70px 0 10px; width: 700px; }
	
	#content p { margin: 0.5em 0 1em; font-size: 1.2em; line-height: 2.2em; }
	#content p a, #content dl a { color: #999; text-decoration: underline; }
	#content p a:hover, #content dl a:hover { color: #ccc; text-decoration: none; }
	
	/* lists */
	#content dt, #content dd { margin: 0.3em 0; font-size: 1.2em; line-height: 1.4em; }
	#content dt { font-weight: bold; /*letter-spacing: 0.1em;*/ }
	#content dd { margin-bottom: 1em; color: #777; }
	
	/* basic form styles */
	#content form p { clear: left; margin: 0; line-height: normal; }
	#content form p.note { padding-top: 0.4em; color: #999; font-size: 1.1em; }
	#content label { display: block; margin-bottom: 0.2em; width: 300px; }
	#content input, #content textarea { display: block; margin-bottom: 1.2em; width: 300px; }
	input#submit, input#reset { float: left; margin-right: 10px; display: block; width: auto; }
	
	/* SCENES */
	body#scenes #content ul a { color: #666; }
	body#scenes #content ul a:hover { color: #ccc; }
	body#scenes #content ul li img { border: 1px solid #444; }
	body#scenes #content ul li a:hover img { border-color: #ccc; }
	
	body#scenes #content ul#thumbs { margin-left: 10px; width: 680px; overflow: auto; }
	body#scenes #content ul#thumbs li { float: left; display: inline; margin: 0 14px 10px; width: 142px; height: 140px; font-size: 1em; letter-spacing: 0.1em; text-align: center; overflow: hidden; } /* width includes border for img (140+2) */
	body#scenes #content ul#thumbs li.clear { clear: left; }
	body#scenes #content ul#thumbs li img { display: block; margin-bottom: 2px; }
	
	body#scenes #content h2 { margin: 0 0 0.5em; }
	body#scenes #content p.note { display: block; color: #666; font-size: 1em; }
	body#scenes #content ul.container { margin-bottom: 20px; width: 200px; overflow: auto; }
	body#scenes #content ul.container li { float: left; display: inline; margin-right: 8px; width: 92px; font-size: 1em; letter-spacing: 0.1em; text-align: center; } /* width includes border for img (90+2) */
	body#scenes #content ul.container li img { display: block; }
	body#scenes #content div.right { float: right; margin: 0 0 10px 15px; width: 480px; height: 346px; background: #000; } /* contains the flash player */
	
	body#scenes #content p { line-height: 1.4em; }
	body#scenes #content p em { display: block; color: #666; font-size: 0.9em; }
	body#scenes #content a.back { margin-top: 2em; padding: 3px 8px; background: #000; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
	body#scenes #content a.back:hover { background: #333; }
	
	/* DRAWINGS */
	ul.gallery { margin-top: 25px; }
	ul.gallery li { float: left; margin: 0 13px 40px 12px; padding-top: 90px; position: relative; width: 150px; height: auto; text-align: center; }
	ul.gallery a strong { color: #999; }
	ul.gallery a:hover strong { color: #ccc; }
	ul.gallery img { position: absolute; clip: rect(10px 175px 90px 25px); top: -10px; left: -25px; width: 200px; height: 135px; }
	
	/* CV */
	body#cv #content p.container { float: right; margin: 3px 0 10px 10px; padding: 10px; width: 180px; line-height: normal; text-align: center; background: #222; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
	
	/* CONTACT */
	body#contact #content p { line-height: 1.4em; }
	body#contact #content form#contact-form { float: right; width: 300px; }


/* Footer
------------------------- */
	#footer { clear: both; padding: 40px 20px 5px; width: 660px; text-align: center; }
	#footer li { display: inline; color: #666; font-size: 1em; letter-spacing: 0.1em; }
	#footer li#credit { display: block; margin-bottom: 0.3em; }
	#footer a { color: #666; }
	#footer a:hover { color: #ccc; }