body { margin: 0; background: #4A4946; color: #191919; text-align: center; }
body, div, th, td { font: 12px/17px Georgia, Times, sans-serif; }

img { border: 0; }
a { border: 0; }

/* structure */
	#container { margin: 15px auto 0; padding: 9px; width: 967px; height: 668px; position: relative; background: white; text-align: left;  voice-family: "\"}\""; voice-family:inherit; width: 949px; height: 650px; }
	
	#title, #portfolio, #resume, #contact { height: 650px; position: absolute; top: 9px;}
	#title { width: 79px; left: 9px; background: url(/i/bg_title.gif) no-repeat top left; }
	.pretty #portfolio { width: 804px; left: 88px; background: url(/i/bg_portfolio_on.gif) repeat-x top left; }
	.pretty #resume { width: 33px; left: 892px; background: url(/i/bg_resume_off.gif) no-repeat top left; }
	.hireme #portfolio { width: 33px; left: 88px; background: url(/i/bg_portfolio_off.gif) no-repeat top left; }
	.hireme #resume { width: 804px; left: 121px; background: url(/i/bg_resume_on.gif) repeat-x top left; }
	#contact { width: 33px; left: 925px; background: url(/i/bg_contact.gif) no-repeat top left; }
	
	#workbox { width: 768px; height: 632px; position: absolute; top: 14px; left: 32px; background: white; overflow: hidden; }
	
/* titles */
	#title h6, #portfolio h5, #resume h5, #contact h5 { font-size: 1px; line-height: 1px; }
	#title h6 { width: 32px; margin: 20px 0 0 23px; }
	#title h6 a { height: 260px; width: 32px; padding: 260px 0 0; background: url(/i/header_title.gif) no-repeat top left; display: block; overflow: hidden; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	
	#portfolio h5, #resume h5, #contact h5 { width: 18px; margin: 11px 0 0 8px; }
	#portfolio h5 a, #resume h5 a, #contact h5 a { width: 18px; display: block; overflow: hidden; }
	
	#portfolio h5 a { height: 80px; padding: 80px 0 0; background: url(/i/header_portfolio.gif) no-repeat; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	#portfolio h5 a:hover { background-position: 0 -80px; }
	.pretty #portfolio h5 a { background-position: 0 -80px; }
	
	#resume h5 a { height: 59px; padding: 59px 0 0; background: url(/i/header_resume.gif) no-repeat; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	#resume h5 a:hover { background-position: 0 -59px; }
	.hireme #resume h5 a { background-position: 0 -59px; }
	
	#contact h5 a { height: 66px; padding: 66px 0 0; background: url(/i/header_contact.gif) no-repeat; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	#contact h5 a:hover { background-position: 0 -66px; }


/* work navigation */
	#sections { width: 768px; height: 42px; margin: 0; padding: 0; position: relative; border: 1px solid #EBBB74; border-bottom: none; background: url(/i/bg_sections.gif) repeat-x; voice-family: "\"}\""; voice-family:inherit; width: 766px; height: 41px; }
	#sections li { margin: 0; padding: 0; list-style-type: none; position: absolute; top: 11px; }
	#sections li, #sections li a { height: 20px; display: block; overflow: hidden; background: url(/i/section_icons.gif) no-repeat; }
	#sections li a { padding: 20px 0 0; margin: 0; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	#sections li a span { text-indent: -5000em; line-height: 1px; }
	/* \*/ #sections li a span { line-height: 16px; } /* */
	#sections li.design, #sections li.design a { width: 123px; left: 21px; background-position: 0 -20px; }
	#sections li.implement, #sections li.implement a { width: 176px; left: 224px; background-position: -157px -20px; }
	#sections li.icons, #sections li.icons a { width: 126px; left: 483px; background-position: -508px -20px; }
	#sections li.implement, #sections li.implement a { width: 176px; left: 178px; background-position: -157px -20px; }
	#sections li.games, #sections li.games a { width: 109px; left: 387px; background-position: -366px -20px; }
	#sections li.icons, #sections li.icons a { width: 126px; left: 529px; background-position: -508px -20px; }
	#sections li.print, #sections li.print a { width: 55px; left: 691px; background-position: -670px -20px; }
	#sections li.design a:hover, body.design #sections li.design a { background-position: 0 0; }
	#sections li.implement a:hover, body.implement #sections li.implement a { background-position: -157px 0; }
	#sections li.games a:hover, body.games #sections li.games a { background-position: -366px 0; }
	#sections li.icons a:hover, body.icons #sections li.icons a { background-position: -508px 0; }
	#sections li.print a:hover, body.print #sections li.print a { background-position: -670px 0; }
	
	#pieces { width: 724px; height: 66px; margin: 0 22px; padding: 0; position: relative; border-bottom: 1px solid #D6D6D6; }
	#pieces li { margin: 0; padding: 0; list-style-type: none; position: absolute; top: 18px; }
	#pieces li, #pieces li a { display: block; overflow: hidden; width: 138px; }
	#pieces li a { margin: 0; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	#pieces li a span { text-indent: -5000em; line-height: 1px; }
	/* \*/ #pieces li a span { line-height: 40px; } /* */
	.big-list #pieces li, .big-list #pieces li a { height: 32px; }
	.big-list #pieces li a { padding: 32px 0 0; margin: 0; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	.small-list #pieces li, .small-list #pieces li a { height: 15px; voice-family: "\"}\""; voice-family:inherit; height: 14px; }
	.small-list #pieces li a { padding: 14px 0 0; margin: 0; voice-family: "\"}\""; voice-family:inherit; height: 0; }
	.big-list #pieces li a:hover { background-position: 0 0; }
	.small-list #pieces li a:hover { background-position: 0 0; }

/* body content */
	#workbox h1 { margin: 0 0 10px; text-indent: -5000px; height: 20px; background-repeat: no-repeat; }
	.content h2 { margin: 16px 0 0; font-size: 100%; }
	.content p { margin: 0 0 8px; }
	.content ul { margin: 0 0 8px; padding: 0; list-style-type: none; }
	.content ul.inline { margin-top: -8px; }
	.content li { margin: 0 0 3px; padding: 0 0 0 20px; background: url(/i/bullet.gif) no-repeat 6px .7em; }
	.content ul.download li { background: url(/i/bullet_download.gif) no-repeat 3px .3em; }
	.content a { text-decoration: none; color: #C96F31; border-bottom: 1px dotted #C96F31; }
	.content a:hover { color: #AD2709; border-bottom: 1px solid #AD2709; }
	.content a.img { border: none; }
	.content a.img.top { margin-bottom: 10px; display: block; }
	.content a.img.right { margin-left: 11px; }

	.content { margin-top: 30px; width: 367px; voice-family: "\"}\""; voice-family: inherit; width: 345px; }
	.content.fl { padding: 0 0 0 22px; clear: left; }
	.content.fr { padding: 0 37px 0 0; width: 382px; voice-family: "\"}\""; voice-family: inherit; width: 345px; }
	.content.across { width: 906px; margin: 30px 0 0 22px; }
	.content.morepadding { margin-bottom: 7px; }
	
	.divider { clear: both; margin: 0 22px; height: 20px; border-top: 1px solid #D6D6D6; font-size: 1px; line-height: 1px; }

/* footer */
	#footer { margin: 3px auto; padding: 0; width: 950px; }
	#footer p { width: 450px; color: #BBB; font-size: 10px; margin: 0; padding: 0; }
	#footer p.fl { text-align: left; }
	#footer p.fr { text-align: right; }
	#footer a { text-decoration: none; color: #BBB; border-bottom: 1px dotted #999; }
	#footer a:hover { text-decoration: none; color: #DDD; border-bottom: 1px dotted #BBB; }

/* general */
	.fl { float: left; }
	.fr { float: right; }
	
/* intro */
	.intro #workbox h1 { margin: 30px 22px 10px; background-image: url(/i/title_intro.gif); }
	.intro .content { margin-top: 0; }
	.intro h2 { font-size: 14px; margin: 16px 0 12px; padding-top: 12px; border-top: 1px solid #D6D6D6; }
	.intro h3 { font-size: 12px; line-height: 20px; margin: 0; padding-left: 26px; background-position: bottom left; background-repeat: no-repeat; }
	h3.id { background-image: url(/i/icon_id.gif); }
	h3.im { background-image: url(/i/icon_im.gif); }
	h3.games { background-image: url(/i/icon_games.gif); }
	h3.icons { background-image: url(/i/icon_icons.gif); }
	h3.print { background-image: url(/i/icon_print.gif); }
	.intro .content.fr p, p.lmargin { margin-left: 26px; }
	
/* zoom */
	#zoom-c, #zoom-l { background: white; }
	#zoom-c a, #zoom-l a { border: none; }
	#zoom-l { text-align: left; }
	#zoom-apex { text-align: left; background: white url(/i/piece_bg_apex.gif) repeat-y top left; }