/* 	Jeanne DuPrau 
		Jan. 2009
		Main stylesheet
		
		Author: wwww.dangerbrain.com
*/

/* ...............................color palette
f8f1da - bright cream used as base white
	bcb6a4 - 75% on dark brown

3b1c00 - main dark brown
3f2200 - toc text brown
4c1f00 - nav text brown, h3
1f1812 - dark-brown footer target
5b3200 - mid-brown h1
6d4617 - mid-brown h2
623000 - mid-brown ??
680700 - maroon for toc titles
72280c - orange-brown for quotes
893320 - deep orange-brown h4
943410 - orange-brown nav current, h5, a:link
945a44 - faded orange-brown a:visited
d33e06 - bright orange, a:hover
*/

/* ...............................typography */
body {font-family:Georgia, "Times New Roman", Times, serif;}
	/* font sizes & margins */
body {font-size:14px;}
h1 {font-size:25px;}
h2, h3 {font-size:18px;}
h4 {font-size:16px;}
h2 {margin-top:20px; margin-bottom:15px;}
h3, h4, h5, h6 {margin-top:20px; margin-bottom:10px;}
p, ul, ol {margin-top:10px; margin-bottom:10px;}
ul, ol {margin-left:25px;}
li {margin-bottom:3px;}
	/* weights & styles */
h1, h2, h4, h5, h6 {font-weight:bold;}
h3 {font-weight:300;}
h4, h6 {font-style:italic;}
	/* colors & borders */
h1 {color:#5b3200}
h2 {color:#3b1c00;}
h3 {color:#4c1f00;}
h4, h6 {color:#893320;}
h5 {color:#943410;}
a:link {color:#943410;}
a:visited {color:#945a44;}
a:hover {color:#d33e06;}

/* ...............................other general styles */
#contentMain img {float:left; margin:0 15px 20px 0;}
	#contentMain img.right {float:right; margin:0 0 20px 15px;}
	#contentMain img[src*="bk-"] {margin-bottom:0;}
	#contentMain img[src*="fr-"] {position:relative; z-index:10; top:-15px; left:-15px; margin:0 -10px -15px 0;}
	#contentMain img.right[src*="fr-"] {left:auto; right:-15px; margin:0 0 -15px -10px;}
	#contentMain .textHome img.right {margin:-5px -10px 0 3px}
div > :first-child, ul > :first-child {margin-top:0;}
	img + h5, img + p {margin-top:0;} /* for those that follow floated images */
#features img {float:left; margin:0 10px 10px 0;}
.borderImg {border:1px solid #1f1812;}
em.title {white-space:nowrap;}
h6.subhead {color:#000; margin-bottom:0; font-style:normal;}
	h6 ~ p {margin-top:0;}
#contentMain ul, #contentMain ol {margin-left:15px;}
#contentMain ul {list-style:disc outside;}
#contentMain ul ul {margin-left:25px; list-style:none;}
.fine {font-size:80%;}
#contentMain .fine {text-align:right;}
	/* quote marks [http://monc.se/kitchen/129/rendering-quotes-with-css] */
q {font-style:italic; quotes:"\201C" "\201D" "\2018" "\2019";}
	q:before {content:open-quote;}
	q:after  {content:close-quote;}
	/* safari support */
	q:before   {content:'\201C';}
	q:after    {content:'\201D';}
	q q:before {content:'\2018';}
	q q:after  {content:'\2019';}
cite {font-size:75%; font-style:normal; font-weight:600; padding-left:10px; white-space:nowrap;}
.book {font-style:italic;}
.cl {clear:left;}
.cr {clear:right;}

/* ...............................resets */
#navMain, #navMain ul, #navMain li, #contentMain .toc, #contentMain .toc ul, #contentMain .toc ol, #contentMain .toc li, #contentMain li[id^="toc"] h4, #navSupp, #navSupp li {margin:0; padding:0; list-style:none;}

/* ...............................page layout and setup */
body {background:#3b1c00 url(../img/bg-rock.jpg) 50% 0 repeat; text-align:center; min-width:960px;}
#containerOuter {background:url(../img/bg-content.png) 50% 252px repeat-y;}
#containerInner {background:url(../img/bg-page_top.jpg) 50% 0 no-repeat; position:relative;}
		/* deep regrets in having to include these two non-semantic divs.  seemed the best compromise to make the graphics work elegantly */
h1#branding {color:#f8f1da; text-align:left; padding-top:15px;}
#content {text-align:left; min-height:400px; overflow:hidden;}
#containerFooter {padding-top:284px; background:url(../img/bg-foot_bldgs.png) 50% 0 no-repeat;}
		/* another non-semantic div to make the design robust against future site edits. css3 multiple bgs would have been nice... */
	#siteInfo {background:#1f1812 url(../img/bg-foot_grad.jpg) 50% 0 repeat-x; padding:15px 0 150px;}
#branding, #content, #navSupp {width:960px; margin-right:auto; margin-left:auto;}
		/* fixed width of the site set by this rule */

/* ...............................main navigation */
#navMain {width:315px; float:left; overflow:hidden; background:url(../img/bg-nav_btm.png) 0 100% no-repeat; margin-top:74px; padding-bottom:65px;}
	#navMain li {padding:0 46px 2px 40px;}
		#navMain li:first-child {background:url(../img/bg-nav_top.jpg) 100% 0 no-repeat; padding-top:70px;}
	#navMain li a {font-size:16px; display:block; padding:4px 8px; color:#4c1f00; text-decoration:none;}
	#navMain li a:link, #navMain li a:visited {background:none;}
	#navMain li a:hover {background:url(../img/bg-nav_hover-trans.png);}
	/* for current page */
	#pgHome #nHome a, #pgBooks #nBooks a, #pgAbout #nAbout a, #pgAnswers #nAnswers a, #pgContact #nContact a {color:#943410;}

/* ...............................sidebar features */
#features {width:179px; float:left; clear:left; overflow:hidden; margin:10px auto 10px 15px; background:url(../img/bg-sidebar_mid.jpg) 0 55px repeat-y; padding:0 60px 0 72px;}
	#features > :first-child {background:url(../img/bg-sidebar_top.jpg) 0 0 no-repeat; margin-top:0; margin-left:-72px; margin-right:-60px; padding:55px 60px 0 72px;}
	#features > :last-child {background:url(../img/bg-sidebar_btm.jpg) 0 100% no-repeat; margin-bottom:0; margin-left:-72px; margin-right:-60px; padding:0 60px 75px 72px;}
#features p, #features li {font-size:12px; color:#3b1c00;}
#features ul, #features ol {margin-left:15px;}
#features ul {list-style:disc outside;}
#features h3 {clear:left; margin-top:15px;}

/* ...............................main content area */
#contentMain {margin-left:330px; padding:100px 56px 30px 33px; overflow:hidden; /* solves problem of floats from col 1 affecting those in col 2 */ width:541px; /* needed for Safari */}

/* home page styles */
.textHome {margin-left:300px;}
	p.textHome {line-height:1.3; position:relative; z-index:20;}
	/* home page image montage */
#homeMontage {position:absolute; left:50%; /* for centering */ top:160px; height:550px; width:481px; /* half of 960px, with all lined up from right. window-size shimmy reduced in safari at 480+1 */}
#pgHome img[id^="hm"] {margin:0; position:absolute; z-index:10;}
	#hmStreet {right:311px; top:-40px;}
	
/* elements using revised phark fir [http://www.mezzoblue.com/tests/revised-image-replacement/] */
h1#titleHome {text-indent:-5000px; height:18px; background:url(../img/title-home-4.gif) no-repeat; font-size:18px; width:219px;}
h1[id^="pt"] {text-indent:-5000px; height:25px; background-repeat:no-repeat; margin-bottom:20px;}
	h1#ptBooks {background-image:url(../img/pt-books.gif);}
	h1#ptAbout {background-image:url(../img/pt-about.gif);}
	h1#ptAnswers {background-image:url(../img/pt-answers.gif);}
	h1#ptContact {background-image:url(../img/pt-contact.gif);}
li[id^="toc"] h4 {text-indent:-5000px; height:16px; background-repeat:no-repeat;}
	li#tocBooksOfEmber h4 {background-image:url(../img/toc-books_of_ember.gif);}
	li#tocOtherBooks h4 {background-image:url(../img/toc-other_books.gif);}
li[id^="toc"] a {text-indent:-5000px; height:36px; background-repeat:no-repeat;}
	li[id^="toc"] a:link, li[id^="toc"] a:visited {background-position:0 0;}
	li[id^="toc"] a:hover {background-position:-500px 0;}
	li#tocQBooks a {background-image:url(../img/toc-q_jeannes_books.png);}
	li#tocQJeanne a {background-image:url(../img/toc-q_jeanne.png);}
	li#tocQWriter a {background-image:url(../img/toc-q_becoming_writer.png);}
	li#tocQCorresp a {background-image:url(../img/toc-q_corresponding.png);}

#contentMain .toc {background:url(../img/bg-toc_btm.png) 0 100% no-repeat; margin-bottom:25px; padding:30px 28px; color:#3f2200;}
	.toc > :first-child {background:url(../img/bg-toc_top.jpg) 0 0 no-repeat; margin-top:-30px; margin-right:-28px; margin-left:-28px; padding:30px 28px 0; }
	.toc a {color:#893320; font-size:16px; font-weight:bold; font-style:italic; display:block;}
	
#pgBooks .toc {position:relative; padding:0;}
	#pgBooks .toc > li:first-child {margin:0; padding:30px 28px; padding-right:295px;}
	li#tocOtherBooks {position:absolute; width:205px; top:30px; right:28px; overflow:hidden;}
#pgBooks #contentMain .toc h4 {margin-bottom:10px;}
#pgBooks .toc p {color:#3f2200; font-size:12px; margin:0; margin-bottom:10px;}
#pgBooks .toc ol li {padding-bottom:3px; background-repeat:no-repeat;}
	li#tocEmber {background-image:url(../img/thumb-ember.png);}
	li#tocSparks {background-image:url(../img/thumb-sparks.png);}
	li#tocYonwood {background-image:url(../img/thumb-yonwood.png);}
	li#tocDarkhold {background-image:url(../img/thumb-darkhold.png);}
	li#tocCar {background-image:url(../img/thumb-car.png);}
#pgBooks .toc li[id^="toc"] a {text-indent:0; height:auto; font-weight:normal; font-style:normal; font-size:14px; padding:12px 0 20px 42px;}
	#pgBooks .toc a:link, #pgBooks .toc a:visited {color:#3f2200; text-decoration:none; background:none;}
	#pgBooks .toc a:visited {opacity:0.7;}
	#pgBooks .toc a:hover {color:#893320; background:url(../img/bg-books_toc_hover-trans.png) 0 0 no-repeat;}

.bookDesc, div[id^="cat"] {margin-bottom:30px; width:541px;}

#emberMovie {float:right; width:124px; height:100px; margin:0; padding:105px 33px 35px; background:url(../img/bg-ember_movie.gif) 0 0 no-repeat; font-size:13px; color:#3b1c00; text-align:center;}
	#emberMovie a:link, #emberMovie a:visited {color:#3b1c00;}
	#emberMovie a:hover {color:#d33e06;}

.jdQuote {width:300px; margin-left:auto; margin-right:auto; background:url(../img/bg-quotes.png) 0 0 no-repeat; padding:5px 0 10px 35px;}
	.jdQuote {color:#72280c;}
	.jdQuote q {font-size:18px; font-style:italic;}
	.jdQuote cite {display:block; text-align:right; padding:0 10px 0 auto; font-size:13px; margin-top:7px;}
	.jdQuote.right {margin-left:265px; width:235px;}
	.jdQuote.left {margin-right:265px; width:235px;}
.captImg {width:252px; float:left; clear:both; margin:0 20px 20px 0; position:relative; overflow:hidden;}
	.captImg.right {float:right; margin:0 0 20px 20px;}
	#contentMain .captImg img {float:none; margin:0;}
	.captImg p {margin:0; background-image:url(../img/bg-ph_caption-trans.png); text-align:center; font-size:11px; font-weight:bold; color:#f8f1da; position:absolute; left:0; bottom:5px; padding:7px 5px; width:242px;}

#pgAnswers h5 {margin-bottom:0;}
	#pgAnswers h5 ~ p {margin-top:0;}

/* ...............................
one-offs: styles that are only used for a very specific situation */

#catJeanne ul {padding-bottom:5px;} /* the list in question occurrs right before Ethan's image, and the relative positioning on the image is cutting off the bottom of the ul */
#catTeach p {margin-left: 160px;} /* on the contact page, the 'for teachers' section ends up with an orphaned word just below the floated image.  setting a left margin prevents this.

/* ...............................footer with site info */
#navSupp {white-space:nowrap; text-align:center;}
	#navSupp li {display:inline;}
	#navSupp a {padding:0 8px; border-right:1px solid #bcb6a4;}
		#navSupp li:last-child a {border:none;}
#siteInfo {color:#bcb6a4;}
	#siteInfo a:link, #siteInfo a:visited {color:#bcb6a4; text-decoration:none;}
	#siteInfo a:hover {text-decoration:underline;}

/* ...............................for jquery effects */
.hidden {position:absolute; top:-10000px !important;}