/*
total width: 990px; spread width: 980px, 'page' width: 420px; 
5px margin bet cover edge and pages, 30px outer margins, 40px inner margins;
brand, nav, footer copyright, and footer credit 420px wide;
30 (left outer margin) + 420 (left pg) + 40 (left pg margin) + 40 (rt pg margin) + 420 (rt pg) + 30 (rt outer margin) = 980;
5+30+420+40+40+420+30+5=990;
left elements 30px in, right elements 530px in (30+420+80=530); 
80px padding on maincontent top instead of margin to keep background from collapsing */

html * { margin: 0; padding: 0; border: none; color: #505050; text-decoration: none; }

body { background: #787d5e url(../images/bkg_about.jpg) repeat left top; font: .8em/1.3em "Trebuchet MS", Trajan, Arial, Helvetica, sans-serif;}
h1 { font-size: 1em; text-transform: uppercase; display: block; color: #000; margin-bottom: .5em; }
h2 { font-size: 1em; color: #000; margin-top: 1em; }
h3, h3 span { font-size: 1em; color: #505050; margin-bottom: .5em; }
p { margin-bottom: 1em;}

a:link { color: #985; }
a:visited { color: #a96; }
a:hover { color: #600; }
a:active { color: #fff; }

#gestalt { width: 990px; margin: 10px auto 0 auto; padding: 8px 0; background: #030 url(../images/spine.gif) no-repeat 50% 0; }
/* the top/bottom padding has to go on #gestalt because if it's on #wrapper margin, it collapses*/
#wrapper { position: relative; width: 980px; margin: 0 5px; background: #ece6cf url(../images/paper.jpg);}
#components { background: url(../images/seam.gif) repeat-y 50% 0; }

#nav, #brand { width: 420px; height: 20px; position: absolute; top: 30px; border-bottom: 1px solid #a96;
	font: 12px/14px Optima, "Trebuchet MS", Arial, Helvetica, sans-serif; }
#nav { left: 30px; }

#brand { left: 530px; }
#brand h1 { font-size: 1em; text-align: right; text-transform: uppercase; }

#maincontent { position: relative; width: 920px; margin-left: 30px; padding: 90px 0 0 0; min-height: 600px; }

/*since the footer spans the width of the book, the borders go on top of the paragraphs*/
#footer { position: relative; clear: both; padding-top: 25px; height: 40px; 
	font: 11px Garamond, Palatino, "Times New Roman", serif; color: #998; }
#footer p { border-top: 1px solid #000; padding-top: 5px; }
#footer .copyright, #footer .credit { width: 420px; height: 20px; position: absolute; }
#footer .copyright { left: 30px; }
#footer .copyright p { text-align: left; }
#footer .credit { left: 530px; }
#footer .credit p { text-align: right; font-size: 13px; }

/*individual page styles*/
/*styles for resume */
#experience { float: left; padding-right: 520px; }
#experience h2, #experience h3, #experience p { padding-left: 20px; }
#pedigree { width: 400px; float: right; margin-left: -421px; }
#pedigree ul { overflow: auto; padding-bottom: 1em; }
#pedigree ul li { list-style-type: none; width: 200px; float: left; }

/*old styles for clients */
#clientList { padding-left: 520px; padding-bottom: 150px; }
#clientList ul { list-style-type: none; padding-right: 5px; }
#clientList li { line-height: 1.5em; }
#retailClients, #otherClients { float: left; padding-right: 25px; }
#clientLogos { position: absolute; left: 20px; top: 80px; width: 360px; padding: 10px; background-color: #fff; border: 1px solid #a96; }
#clientLogos p { text-align: center; }
#clientLogos img { margin: 2px 2px; vertical-align: middle; }
 
/*styles for portfolio pages */
.portfolio #maincontent { height: 620px; }
#slideshow { position: absolute; left: 0; top: 120px; width: 420px; height: 500px; }
#tagline { display: none; }

#projects { width: 270px; position: relative; margin-left: 150px; }
#projects h2 { margin: 1em 0 .4em 0; }
#projects h3 { margin-top: 1em; padding-right: 1em; background: url(../images/pointer.gif) no-repeat 100% 50%; font-weight: normal; color: #505050; }
#projects ul { width: 290px; overflow: auto; padding-bottom: 20px; margin-top: 2em; position: relative; }
#projects ul li { list-style-type: none; float: left; margin: 5px 5px 0 0; }
#projects ul li img { width: 80px; height: 48px; border: 1px solid #f1ebd5; display: block; background-color: #fff; }
#projects ul li a:hover img { border-color: #a96; }

#gallery { width: 420px; height: 625px; position: absolute; left: 500px; top: 90px; }
#gallery span { display: block; padding-top: .5em;}
#gallery a:link { color: #a96; }
/*styles for contact page */
#contactInfo { position: absolute; left: 220px; top: 300px; width: 310px; font-size: 2.5em; }

/*styles for about */
#services { float: left; padding-right: 520px; }
#services ul { margin-left: 2em; }
#bio { float: right; width: 380px; padding-right: 20px; margin-left: -400px; line-height: 1.5em; }
#bio h1 { margin-bottom: 1em; }
#bio img { float: left; margin: 5px 10px 5px 0; }