on the page so the egg expands from #bottom2, as well; longest pages use div#story and are listed below in css for bkg-egg in #top and no image in #bottom -- reviews, excerpts, interviews */ /* page ids are in the body tag: #side-nav links use s- prefix on these page ids: Home -- home (and s-home, etc) Books -- books Elemental Logic series -- elementalseries Fire Logic -- fire Earth Logic -- earth Water Logic -- water Air Logic -- air ...also: fire-excerpt, earth-excerpt, water-excerpt, air-excerpt and fire-reviews, earth-reviews, water-reviews Laurie's other books -- otherbooks Bibliography -- biblio Where to buy -- buy Shaftal -- shaftal Elemental magics -- elementalmagics Quiz -- quiz Maps-glyphs-art -- art Pronunciation guide -- pronunciation Laurie -- laurie Biography -- bio Images -- images University of Laurie -- universityoflaurie FAQ -- faq Contact -- contact Site map -- sitemap */ /* a few colors: egg blue: c9dddb bkg green: 9cbdb5 ms darker green: 91b0a9 russet links: 772717 blue links: 236b93 */ body { background: #9cbdb5 url(pix/bkg-manuscript.gif) repeat-y left top; margin: 0; padding:0; font-family: Arial, Verdana, Geneva, Tahoma, Trebuchet, sans-serif; font-size: small; color: #000; } /* without specifying #main and #sidebar, the text alignment will apply, but the padding will be overriden by other settings. Even specifying at #main li .citation, I can't get right alignment within an li; need another block element, it seems; the class has to be placed within an li or a p */ #sidebar .citation, #sidebar .right, #main .citation, #main .right { text-align: right; padding-right: 1em; } #main p.right { margin-top: 3px; padding-top: 0; } .center { text-align: center; } .initcap { font-size: 1.5em; font-family: "Bookman Old Style", "Book Antiqua", "Hoefler Text", serif; } h1, h2, h3, h4, h5 { font-family: "Book Antiqua", "Hoefler Text", "New York", Georgia, Times, "Times New Roman", serif; } h1 { letter-spacing: 1px; line-height: 1.35em; } /* ----B A C K G R O U N D - A R T---- */ #all { width: 100%; float: right; margin-left: auto; margin-right: auto; } #top { margin: 0; padding: 0; background: url(pix/bkg-egg-top.gif) no-repeat left top; float: left; width: 100%; } #bottom, #bottom2 { margin: 0; padding: 0; background: url(pix/bkg-egg-bottom.gif) no-repeat left bottom; float: left; width: 100%; min-height: 616px; } #bottom2 { background: url(pix/bkg-egg-bottom2.gif) no-repeat left bottom; } body#home #top, body#story-template #top, body#interviews #top, body#fire-excerpt #top, body#earth-excerpt #top, body#earth-excerpt2 #top, body#water-excerpt #top, body#air-excerpt #top, body#fire-reviews #top, body#earth-reviews #top, body#water-reviews #top { background: url(pix/bkg-egg.gif) no-repeat left top; } body#home #bottom, body#story-template #bottom, body#interviews #bottom, body#fire-excerpt #bottom, body#earth-excerpt #bottom, body#earth-excerpt2 #bottom, body#water-excerpt #bottom, body#air-excerpt #bottom, body#fire-reviews #bottom, body#earth-reviews #bottom, body#water-reviews #bottom { background: none; } #container, #container2 { position: relative; margin: 0; padding: 0; background: url(pix/bkg-logo.gif) no-repeat left top; float: left; width: 100%; min-height: 616px; font-size: 1.075em; line-height: 1.3em; } #container2 { background: #c9dddb; } #page-margins { float: left; padding: 0; padding-bottom: 4em; margin: .25em 1em 0 1.5em; } /* ----H E A D E R---- */ /*header doesn't need to mention width, and so I can assign a margin */ #header, #header2 { height: 39px; margin: 0 0 0 654px; padding: 0; font-size: 86%; } #header2 { margin-left: 55px; font-size: 100%; } #header p, #header2 p { margin: 0; color: #fff; } #header a, #header2 a { color: #fff; font-weight: normal; text-decoration: none;} #header2 a, #header2 p { color: #91b0a9; } #header a:hover, #header2 a:hover { color: #236b93;} #header a:active, #header2 a:active { color: #000; } /* ----G A L L E R Y---- */ /* this is used with container2 and header2 to create a simple page centering artwork linked to from shaftal/maps-gliphs-art.html or from laurie/images.html for images that are Very Wide, add styles to tags on the html page: put style="background:#c9dddb;" and style="___px;" in footer, footer ul and footer p*/ #gallery { margin-bottom: 70px; margin-left: 55px; } #gallery img { border: 7px solid #fff; } #gallery p { max-width: 660px; color: #236b93; } /* ----H O M E - P A G E---- */ #home-image { position: absolute; background: url(pix/home.gif) no-repeat 243px 92px; } h1.homepg, p.homepg { text-align: right; font-size: 16px; font-family: "Book Antiqua", "Hoefler Text", "New York", Georgia, Times, "Times New Roman", serif; } /* ----N O T I C E - & - Q U O T E---- */ #notice { position: absolute; top: 111px; left: 1.5em; } #notice p { margin: 0; padding: 0; color: #333; font-size: 86%; line-height: 1.3em; } #notice a { color: #236b93; font-weight: bold; font-size: 1.25em; text-decoration: none; } #notice a:hover { color: #772717;} #notice a:active { color: #fff;} #quote { position: absolute; top: 35px; left: 520px; width: 350px; background: url(pix/paperscrap.gif) no-repeat left top; } #quote2 { position: absolute; top: 50px; left: 535px; width: 350px; background: url(pix/paperscrap.gif) no-repeat right bottom; } #quote p, #quote2 p, body#home #quote h1, body#home #quote2 h1{ margin: 5px 0 5px 0; padding: 5px; color: #667788; font-size: 1.1em; font-family: "Century Schoolbook", "Century Schoolbook L", "New Century Schoolbook", "Book Antiqua", "Bookman Old Style", "Courier New", Courier, monospace; line-height: 1.15em; } #quote p { margin: 15px 0 0 15px; color: #fff;} #quote2 p { margin: 0 10px 15px 15px; } /* ----S I D E B A R - S I D E B A R - S I D E B A R---- */ /* = side-text (-nav, -note) + side-art */ /* sidebar must not have left margins or padding added to divs (except side-art padding-left: 222) To change the left margin, adjust #page-margins */ #sidebar { margin: 0; padding:0; padding-top: 111px; float: left; width: 333px; } #side-text { margin: 0; padding:0; float: left; width: 220px; } /* see page ids at top of this file; add s- prefix; manually remove the for the page we're on; this rule changes the color from russet to blue; the ids are in the li tag or in a span tag for fire / earth / water / air -- where they're on a single li, and for images / notes, again on a single li */ body#books #s-books, body#elementalseries #s-elementalseries, body#fire #s-fire, body#earth #s-earth, body#water #s-water, body#air #s-air, body#fire-excerpt #s-fire-excerpt, body#earth-excerpt #s-earth-excerpt, body#earth-excerpt2 #s-earth-excerpt2, body#water-excerpt #s-water-excerpt, body#fire-reviews #s-fire-reviews, body#earth-reviews #s-earth-reviews, body#water-reviews #s-water-reviews, body#otherbooks #s-otherbooks, body#buy #s-buy, body#shaftal #s-shaftal, body#elementalmagics #s-elementalmagics, body#quiz #s-quiz, body#art #s-art, body#laurie #s-laurie, body#bio #s-bio, body#images #s-images, body#interviews #s-interviews, body#university #s-university, body#faq #s-faq { color: #236b93; } /* ----N A V B A R---- */ ul.side-nav { margin: 17px 0 0 0; padding: 0; line-height: 1.275em; width: 220px; } ul.side-nav li { padding: 0 22px 0 0; margin: 0; list-style: none; text-align: right; font-size: 95%; font-weight: bold; color: #772717; } #side-text ul.side-nav li ul { margin: 0; padding: 0;} #side-text ul.side-nav li ul li { text-align: right; margin: 0; padding: 0;} ul.side-nav li.menu { letter-spacing: 2px; font-size: 1.1em; font-family: "Hoefler Text", Georgia, Times, "New York", Palatino, serif; font-variant: small-caps; } #sidebar li.menu { } #sidebar a, #main a, #gallery a { padding: 1px 2px 1px 2px; color: #772717; font-weight: bold; text-decoration: none; } #sidebar .youarehere, #main .youarehere { padding: 1px 2px 1px 2px; text-decoration: none; color: #fff; background: #974737; } #sidebar ul.side-nav li a, #sidebar ul.side-nav li .youarehere { margin-right: -15px; padding-right: 15px; padding-left: 15px; } #main ul#subsubmenu { margin: 0; margin-left: 3em; padding: 0; padding-left: 1em; text-align: center; } #main ul#subsubmenu li { margin: 0; padding: 0; list-style: none; } #sidebar a:hover, #main a:hover, #gallery a:hover { color: #fff; background: #236b93; } #sidebar a:active, #main a:active, #gallery a:active { color: #fff; background: #91b0a9; } #main a.img-link { color: #772717; } #main a.img-link:hover { color: #236b93; } #main a.img-link:active { color: #fff; } /* ---S I D E - N O T E S--- */ div.side-note { margin: 0; padding:0; margin-top: 25px; margin-right: .5em; border-bottom: 3px solid #91b0a9; border-left: 3px solid #91b0a9; } div.side-note p { margin: 0; padding:4px 3px 4px 7px; border-top: 1px solid #91b0a9; border-right: 1px solid #91b0a9; background: #c9dddb; font-size: 1em; color: #1e1e1e; } div.side-note p+p { margin: 0; padding:2px; border-top: 0; } /* ----A R T---- */ #side-art { margin: 0; padding:0; padding-left: 222px; } #side-art img.top-lo, #side-art img#column { margin: 0; margin-left: auto; margin-right: auto; padding:0; margin-top: -33px; margin-bottom: 15px; } #side-art img#column { border-right: 1px solid #fff; border-bottom: 2px solid #91b0a9; } #side-art img { margin: 0; margin-left: auto; margin-right: auto; padding:0; padding-bottom: 15px; } /* ----M A I N - M A I N - M A I N---- */ #main { margin: 0; padding:0; padding-left: 333px; padding-top: 99px; line-height: 1.4em; } #main div { margin: 0; padding:0; max-width: 500px; padding-bottom: 3em; } #main h1 { margin: 0; padding:0; line-height: 1.1em; color: #236b93; font-weight: normal; font-size: 2em; } h1 .copyright { font-size: small; font-family: Arial, Verdana, Geneva, Tahoma, Trebuchet, sans-serif; color: #333; } #main h2 { line-height: 1.1em; } /* submenu under page title: Fire Logic, Earth Logic, Water Logic; others may need this later, as the site grows the link behavior is defined in side-nav a :hover :active*/ #main ul#subsubmenu { margin: 0; margin-top: .75em; padding:0; line-height: 1.25em; } #main ul#subsubmenu + p { margin: 0; margin-top: 1.25em; text-align: center; margin-left: 60px; margin-right: 60px; } #main ul#subsubmenu + p.set-apart { margin: 1.25em 0 0 0; text-align: left; } #main ul#subsubmenu li { margin: 0; padding:0; list-style: none; text-align: center; font-size: 95%; font-weight: bold; color: #772717; } #main ul#subsubmenu + p.first { text-align: left; margin: 0; padding:0; padding-top: .75em; } #main ul.list-links { margin: 0 0 12px 18px; padding: 0; } #main ul.list-links li { margin: 11px 0 0 0; padding: 0; list-style: square; } #main p.modify { margin-top: 0; padding-top: 0; } #main h2, #main h3 { margin: 0; padding:0; padding-top: 1em; font-size: 1.5em; color: #236b93; font-weight: bold; } #main h3 { font-size: 1.25em; } #main h1 + p { margin: 0; padding:0; padding-top: .75em; } #main h2 + p, #main h3 + p, #main h2 + ul, #main h3 + ul { margin: 0; padding:0; padding-top: .75em; } #main .set-apart { margin-top: 1em; border-top: 1px solid #9cbdb5; } #main p { margin: 0; padding:0; padding-top: .75em; } #main p.mainquote { margin: 0; padding:.5em 1em 0 3em; padding-top: .75em; } #main ul { margin: 0; padding: 0; line-height: 1.5em; } #main li { list-style: none; margin: 0; padding: .5em 0 0 1.75em; } /* if #main is not specified below, the list-style: none from #main ul overrides the class style (at least in FF) */ #main ul.abc { margin-left: 1.75em; } #main ul.abc li { margin: 0 0 0 1em; padding: 3px 4px 0 .25em; list-style-type: square; } #main p.listen-links { background-color: #91b0a9; padding: .5em 0 .5em 0; color: #fff; } /* lots o pics examples: shaftal/maps-glyphs-art.html laurie/images.html use the wrapper div.gallerypg with pix only 222px wide in div.right234 or div.left244 note: the margin between pix and text is made by the difference between the div's assigned width and the pix width */ #container #main div.right234 { clear: right; float: right; width: 234px; margin: 0; padding:0; } #container #main div.left244 { clear: right; float: left; width: 244px; margin: 0 0 2em 0; padding:0; } #container #main div.right234 p, #container #main div.left244 p { text-align: right; font-size: smaller; font-style: italic; margin: -8px 0 0 0; padding:0 0 9px 0; } #container #main div.left244 p { text-align: left; } #container #main div.right234 a, #container #main div.left244 a { padding: 0; background: transparent; } div.right234 img, div.left244 img { display: block; margin: 9px 0 9px 0; padding: 1px; background: #777; } div.right234 img { margin-left: 18px; } div.left244 img { margin-right: 18px; } #main div.gallerypg { clear: right; padding: 25px 0 12px 0; } #main div.gallerypg h3 { padding: 9px 0 0 0; } /* margins and paddings only took effect when I specified story within main these styles used in excerpts pages and on reviews pages */ #main .read-easy { line-height: 1.75em; } #main .read-easy p + p { margin: 0; padding: .35em 0 0 0; text-indent: 3em; } #main #story { line-height: 1.75em; background: #dbe9e7; border: 2px solid #fff; margin-top: 1.5em; padding: 0 1em 0 1em; } #main #story h2 { padding: 1em 0 1em 0; } #story p + p { margin: 0; padding: .35em 0 0 0; text-indent: 3em; } #story p.story-copyright { margin: 0; padding: 5px 0 0 0; font-size: .8em; text-align: right; } dl.faq, dl.facts, dl.interview { margin: 0; padding: 0; padding-top: .5em; } dl.faq dt, dl.interview dt { margin: 0; padding: 0; padding-top: 1em; line-height: 1.35em; color: #236b93; } dl.interview dt { color: #000; font-weight: normal; } dl.faq dd, dl.interview dd { margin: 0; padding: 0; padding-top: .5em; line-height: 1.75em; color: #000; font-weight: normal; } dl.interview span.b, span.b { color: #236b93; font-weight: bold; } dl.faq dd+dd, dl.interview dd+dd { text-indent: 2em; } dl.facts dt { display: inline; float: left; margin: 0; padding: 0 .5em 0 0; color: #236b93; font-weight: bold; } dl.facts dd { margin: 0; padding: 0; color: #000; font-weight: normal; } #main ol.numbers { margin: 1em 0 1.5em 1em; padding: 0; } #main ol.numbers li { list-style-type: decimal; margin: 2em 0 0 1em; padding: 0; line-height: 1.4em; } #main ol.numbers-list { margin: .5em 0 0 0; padding: 0; } #main ol.numbers-list li { list-style-type: decimal; margin: .5em 0 0 2em; padding: 0; line-height: 1.35em; } #main ol.letters { margin: 0; padding: 0; margin: .5em 0 0 2em; } #main ol.letters li { list-style-type: upper-alpha; margin: 6px 0 0 1.5em; padding: 0; line-height: 1.4em; } #main ul.bottom-links { border-top: 1px solid #9cbdb5; margin-top: 1em; margin-bottom: 1em; clear: right; } #main ul.bottom-links li { margin: 0; padding: 0; line-height: 1.5em; } #main ul.bottom-links li + li { padding-left: 2em; } #main ul.bottom-links li + li + li { padding-left: 4em; } #main ul.bottom-links li + li + li + li { padding-left: 6em; } #main ul.biblio { margin: 0 0 0 0; margin-left: 1.5em; margin-right: 1.5em; padding: 0 0 12px 0; } #main ul.biblio li { margin: 0 0 0 2em; padding: 9px 4px 0 6px; text-indent: -2em; list-style-type: none; line-height: 1.35em; } #main div#sitemap-links li, #main div#sitemap-links ul { line-height: 1.4em; margin-top: 0; padding-top: 0; } #main div#sitemap-links h2 { margin-bottom: 3px; padding-bottom: 0; margin-top: 1em; padding-top: 0; } /* ----F O O T E R---- */ #footer, #footer2 { position: absolute; bottom: .5em; left: 0px; width: 100%; max-width: 885px; min-height: 5em; } #footer ul { margin: 0 20px 0 0; padding: 0; text-align: right; } #footer ul li { margin: 0; padding: 0; list-style: none; color: #fff; letter-spacing: 1px; } #footer p { margin: 0; margin-left: 20px; margin-right: 20px; padding:0; border-top: 1px dashed #fff; font-size: 86%; color: #fff; } #footer span.copyright { text-align: left; float: left; } #footer span.footerlinks { text-align: right; float: right; } #footer a { color: #fff; font-weight: normal; text-decoration: none; } #footer a:hover { color: #236b93;} #footer a:active { color: #000;} /* basic classes suddenly, .title is causing h2 words to go sans-serif. Tird moving these classes to end of style sheet, that made no difference; css validates; will specify serif for headers; oh -- it's my computer messing with fonts again, pretending it has no Georgia italics, grr */ span.sm { font-size: smaller; } span.sc { font-variant: small-caps; font-size: 1.15em; } .title { font-style: italic; } /* .subtle is good for notes on headers eg, Water Logic (released June 2007) */ .subtle { font-weight: normal; font-size: smaller; } #main h1.homepg, #main p.homepg { padding: 0; margin-left: 175px; line-height: 22px; text-align: right; font-size: 17px; font-family: "Book Antiqua", "Hoefler Text", "New York", Georgia, Times, "Times New Roman", serif; } #main h1.homepg { margin-top: -75px; }