/* this is my first stylesheet. ultimately, this will evolve into the CSS for the War of the Wolf Moon hypertext. Copyright © 2000 Michael Dellert. All rights reserved. */ Body { background-color: #000000; background-attachment: fixed; background-image: url(tile2.jpg) } /* this will create a fixed background image that will not scroll with the rest of the page; replace the image filename with the name of the flame background used for wolf-war chapters, and this will create chapter scenes where the text scrolls between to the two lines of flame on either side */ H1 { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: center; font-size: 24pt; font-family: arial, helvetica, sans-serif } H1.title { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: center; font-size: 24pt; font-family: stencil, arial, helvetica, sans-serif } H2 { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: center; font-size: 20pt; font-family: arial, helvetica, sans-serif } H2.subtitle { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: center; font-size: 20pt; font-family: stencil, arial, helvetica, sans-serif } H3 { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: center; font-size: 16pt; font-style: italic; font-family: arial, helvetica, sans-serif } H3.warning { color: #FF0000; margin-left: 1.25in; margin-right: 1.25in; text-align: center; font-size: 16pt; font-style: normal; text-decoration: blink; font-family: arial, helvetica, sans-serif } H4 { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: left; font-size: 13pt; font-style: italic; font-family: arial, helvetica, sans-serif } P.first { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: justify; font-size: 12pt; font-family: arial, helvetica, sans-serif } /* also add possibly a drop-cap if this will be used as the first paragraph style of a chapter or scene, and adjust the margin width if this is going to be used with the flame background, so that chapter/scene text will be left-justified within the two rows of flame, without flowing over onto the flames on either margin and becoming unreadable. */ P.second { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: justify; text-indent: 0.25in; font-size: 12pt; font-family: arial, helvetica, sans-serif } /* remember to also adjust the margin width when using with the flame background, as noted above. */ P.indent { color: #FFFFFF; margin-left: 1.5in; margin-right: 1.5in; text-align: justify; font-size: 12pt; font-family: arial, helvetica, sans-serif } /* remember to also adjust the margin width when using with the flame background, as noted above. */ P.extract { color: #FFFFFF; margin-left: 1.5in; margin-right: 1.5in; text-align: justify; font-size: 10pt; font-family: arial, helvetica, sans-serif } /* this style is for paragraphs extracted (quoted) from other works. */ P.biblio { color: #FFFFFF; margin-left: 1.5in; margin-right: 1.25in; text-align: justify; text-indent: -0.25in; font-size: 12pt; font-family: arial, helvetica, sans-serif }/* there's gotta be a way of creating a hanging indent that doesn't slice off the left part of the first line, perhaps by combining margin-left with text-indent? hey, whaddaya know, this actually worked! whoo-hoo! */ P.center { color: #FFFFFF; margin-left: 1.5in; margin-right: 1.5in; text-align: center; font-size: 12pt; font-family: arial, helvetica, sans-serif } P.legal { color: #FFFFFF; text-align: center; font-size: 10pt; font-family: arial, helvetica, sans-serif } P.warning { color: #FF0000; margin-left: 1.5in; margin-right: 1.5in; text-align: justify; font-size: 12pt; text-decoration: blink; font-family: arial, helvetica, sans-serif } P.transmission { color: #FFFFFF; margin-left: 1.25in; margin-right: 1.25in; text-align: justify; font-size: 11pt; font-family: courier new, courier, monospace } P.navframe { color: #FF0000; text-align: left; font-size: 10pt; font-family: arial, helvetica, sans-serif }/* This style is for formatting of navigation frame text */ p.mainframe1 { color: #FFFFFF; margin-left: .25in; margin-right: 3.25in; text-align: left; font-size: 12pt; font-family: arial, helvetica, sans-serif } p.mainframe2 { color: #FFFFFF; margin-left: .25in; margin-right: 3.5in; text-align: justify; font-size: 12pt; font-family: arial, helvetica, sans-serif } p.mainframe3 { color: #FFFFFF; margin-left: .25in; margin-right: .25in; text-align: left; font-size: 12pt; font-family: arial, helvetica, sans-serif } p.mainframe4 { color: #FFFFFF; margin-left: .25in; margin-right: .25in; text-align: justify; font-size: 12pt; font-family: arial, helvetica, sans-serif } p.mainframe5 { color: #FFFFFF; margin-left: .25in; margin-right: .25in; text-align: justify; font-size: 12pt; font-family: arial, helvetica, sans-serif } P.spoilsport { color: Lime; margin-left: 1.25in; margin-right: 1.25in; text-align: justify; font-size: 11pt; font-family: courier new, courier, monospace } P.jacked { color: aqua; margin-left: 1.25in; margin-right: 1.25in; text-align: justify; font-size: 11pt; font-family: courier new, courier, monospace } font.translation { color: #FFFFFF; font-size: 12pt; font-family: courier new, courier, monospace } font.caption { color: #FF0000; font-size: 10pt; font-family: courier new, courier, monospace } /*The following styles are for formatting the Last Modified javascript on each page */ B { font-weight: bold } #ttl0 { position: relative } .ttl1 { color: #FFFFFF; text-align: center; font-size: 10pt; font-family: Arial, Helvetica, sans-serif } /* End section defining formatting for Last Modified javascript on each page */ /*Begin section defining hyperlink attributes */ A:link { color: #00FF00; text-decoration: none } A:hover { color: #ADFF2F; text-decoration: none } A:visited { color: #A020F0; text-decoration: none } /* End section defining hyperlink attributes */ /*customized link class styles*/ /* okay, now we're going to get funky (probably more so than we have to) by specifying different link styles for links to different types of information... whoo-hoo! */ /* these link styles will be for non-english terms in the stories/novel/backstory and will link to the glossary definition of the term (to open in a separate browser window). */ A.glossary:link { color: #DAA520; text-decoration: none; cursor: help } A.glossary:hover { color: #FF4500; text-decoration: none; cursor: help } A.glossary:visited { color: #B8860B; text-decoration: none; cursor: help } /* okay, we seem to be having some trouble getting the following link classes to work. Maybe there's some kind of limit on the number of different link styles you're permitted in a CSS, or maybe it's an IE5 bug? but perhaps some of these effects can be created by applying a class to a
or tag and wrapping the href in the
or tag? or maybe the classes are already in use? check the CSS1 & CSS2 specs to resolve. */ /* these link styles will be for links from the names of gods/goddesses in the novel/stories/backstory material to a description/definition of the particular god/goddess (to open in a separate browser window). */ A.gods:link A.gods:hover A.gods:visited /* these link styles will be for references to stories outside of the novel (e.g., the story of Thangor and the Lost City, Meilyg's Infant Exile, etc.) and will link from the novel to the relevant story (or possibly to a short synopsis of the story and link to story, giving reader choice to pursue that thread, or to simply get a quick update and go back to current story). This will open in a separate browser window. */ A.story:link A.story:hover A.story:visited /* these link styles are for references within the novels/stories/backstory materials to milieu issues (history, law, culture, etc) discussed in more detail in another document. This could get sticky. Opens in separate browser window. */ A.milieu:link A.milieu:hover A.milieu:visited /* these link styles are for references to characters within the novels/stories/backstory materials and will link to a brief synopsis of the character (this should help readers keep track of characters). This could also get sticky. Probably should only be used once per page per character. Opens in a separate browser window. Note that this should NOT be a link to the full-blown character sketch (which may give away too many details of motivation or be too long for quick reference). */ A.character:link A.character:hover A.character:visited