/*
---------------------------------------------------------------------------------
	THINGSTHATAREBROWN, LLC
    global screen styles

    june '07
    design and code by: matthew brown / www.thingsthatarebrown.com
---------------------------------------------------------------------------------
*/


/* //-- yui-grids style overrides -- */
#doc2 { float: left }
#hd, #bd, #ft { margin: 0 auto 20px 60px }


/* //-- core typography -- */
body { font-family: Georgia; background: #473b38; color: #ccc; border-top: 4px solid #3C312F; }
h1 { font-size: 197% }
h2 { font-size: 114%; margin: 0 0 0.5em 0; color: #efefef }
h3 { font-size: 152%; margin: 0 0 0.5em 0; color: #efefef }
h4 { font-size: 107%; line-height: 20px }
a:link, a:visited { color: white }
p { font-size: 92%; line-height: 20px; padding-right: 1em; margin-bottom: 1em; }
p.standout { font-size: 122%; line-height: 22px }
strong { font-weight: bold }
em { font-style: italic; color: white; }
ul { margin: 1em 0; }
li { font-size: 92%; line-height: 23px; border-bottom: 1px solid #564a45 }
li a:link { color: #ccc; text-decoration: none; }
li a:hover { color: white }
li.last { border: none }
span.ttab { text-transform: uppercase; letter-spacing: 2px }
h1 span.ttab { font-size: 92% }


/* //-- header -- */
#hd { padding: 3em 0 0.75em 0; text-align: left; border-bottom: 1px solid #564a45; position: relative; }
#hd #tagline { position: absolute; top: 5.55em; left: 16.55em; color: #a49890; background: #3C312F; padding: 0.25em 0.5em }
#hd h1 { font-size: 85%; text-transform: uppercase; letter-spacing: 1px; }


/* //-- header navigation -- */
#top-nav { position: absolute; right: 0; top: 0;  }
#top-nav ul { margin: 0  }
#top-nav li { display: inline; margin-right: 2em; text-transform: uppercase; float: left; padding-top: 6.35em; line-height: normal; border: none }
#top-nav li a { text-decoration: none; color: #ccc }
#top-nav li a:hover { text-decoration: underline; }
#top-nav li.selected { background: url('../../site-images/nav-selected-bg.gif') no-repeat center top; }
#top-nav li.selected a { color: white }
#top-nav li#last { margin-right: 0; }


/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 77%; color: #80746c; border-top: 1px solid #564a45; }
#ft a { color: #80746c; text-decoration: none; }
#ft a:hover { color: white }
#ft p { margin-bottom: 0 }
#ft p.colophon { text-align: right; }


/* //-- portfolio general -- */
.image img { float: left; display: inline;  }
.image { float: left; position: relative; padding: 10px; margin: .85em; background: #3C312F; display: inline;  }
.section-break { height: 35px; margin: 0 1em 1em 0; background: url('../../site-images/section-break-bg.gif') repeat-x; text-align: center; }
#call-out { margin: 1em 0 1em -60px; padding: 2em 2em 2em 60px; background: #594546 url('../../site-images/call-out-bg.gif') bottom left no-repeat; position: relative; border: solid #695152; border-width: 1px 1px 1px 0; margin-right: 1.25em; zoom: 1 }
#call-out h2 { line-height: 1.25em; color: #cac4c1; font-size: 129%; padding-right: 1em }
#call-out h1 { font-size: 197%; color: #efefef }


/* //-- PAGE index -- */
#call-out #blurb-links { margin: 1em 0 0 3.5em; font-size: 92%; font-style: italic; display: inline; }
#call-out #blurb-links a { color: #aea39e; }


/* //-- PAGE services -- */
#bd.services #call-out { margin-bottom: 2.5em; }
.services-list { background: #3C312F; padding: 1.5em; margin-right: 6em; }
.services-list ul { margin: 0; }
.services-list li { margin: 3px 0; padding: 3px 0; }
.services-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0; color: #efefef; }


/* //-- ZP /index.php -- */
#bd.home #call-out { padding: 2em 0 2.25em 60px; margin: 4.85em 0 1em -60px }
#bd.home #call-out h2 { margin-left: 0.35em }


/* //-- ZP /album.php -- */
#album-desc { margin-bottom: 2em; }
#thumb-holder { margin-left: 10px }
.comp-title { margin-top: 20px }
.comp-title h2 { font-size: 136%; padding-bottom: 0.25em; border-bottom: 1px solid #564a45; }
.comp-title h2 a { text-decoration: none }
#album-list { margin: -100px 30px 0 0; }
.album-desc p { padding-right: 3em; margin-bottom: 1em; }
dl.portfolio-detail { font-size: 92%; margin-top: 2em; padding-top: 1em; border-top: 1px solid #564a45  }
dl.portfolio-detail dt { font-weight: bold; display: block; }
dl.portfolio-detail dd { display: block; margin-bottom: 1em; }
.view-site { background: #3C312F; padding: 0.85em 1em; margin: 1.25em 0 0 -1em; position: relative; zoom: 1 }
.view-site strong { display: block }
.view-site p { margin-bottom: 0; padding: 0; }
 a.prev-next { font-size: 85% }
#album-nav small { display: block; margin-top: 1.5em; padding-top: 0.5em; border-top: 1px solid #695152  }

/* //-- ZP /image.php -- */
.imgnav { margin: 0; width: 590px; top: 190px; left: -15px; position: absolute; }
.imgnav div { width: 48px; height: 71px; padding: 0 }
.imgnav div a { display: block; position: relative; }
.imgprevious {  float: left }
.imgnext { float: right }
.view { margin: 0; width: 54px; height: 30px; bottom: -5px; right: -5px; position: absolute; }
.view div a { display: block; position: relative; }


/* //-- overrides and common elements -- */
#bd.static-page .yui-gb { margin-right: 2.5em; }
#bd.static-page .yui-u { margin-bottom: 2.5em; }
#bd.home .image:hover,
#bd.album .image:hover { background: #29201e }
#bd.home .view-site { margin: -20px 40px 0 -5px; padding : 20px 30px; background: #433734 }
#bd.home .view-site p { color: #bebebe }
.resume { background: #3C312F; margin: 2.65em 0; padding: 1em }
.resume a.pdf-icon { float: right }
.resume p { margin: 0.5em 0 }
.contact-info { margin-top: 1.5em }
.contact-info h3 { border-bottom: 1px solid #695152; padding-bottom: 0.25em; }
#tooltip { background: #000; color: white; width: 220px; text-align: left;	padding: 1em; display: none; opacity: 0.79 }
#tooltip h3 { font-size: 92%; margin: 0; padding: 0; text-transform: uppercase }
#weather-man { margin: -75px 0 0 -50px; z-index: 99; position: relative }
#services-guy { position: absolute; bottom: -10px; right: 95px }
#laptop { margin-top: -4.5em; position: relative }
#portrait { margin-top: 3.5em; }

/* #call-out { background: #594546; padding: 2em 0 2em 2000px; margin: 1em 0 2em -2000px; position: relative; overflow: hidden; zoom: 1 } */