/* Author R. Cailliau 2011-07-14 second version 2010-09-06 first version Assumptions =========== A page has possibly a document title and possibly several h1 elements. The content is separated from a header (where the title normally sits) and a footer by putting it inside a div element. As h1 can occur many times, h1.DocumentTitle is used for the title of a page that occurs only once. DocumentTitle is larger than the other headings of level 1 on the same page. It is also followed by a subtitle. "pagetitle" seems to be a reserved word in Golive. The following are text containers: p, td, li. Text inside a div must be inside a p, td or li, i.e. a div is just a box around elements in a similar way to body. A normal td text does not wrap: tables are more often used for spatial layout than for containing long sentences of text. If there is a text longer than a few words it is likely that line breaks should be under the author's control, hence the default should be not to wrap. Usage ===== There are two ways to link to this style sheet: (1) as a local file, served by the FInder: link href="/users/robert/Documents/Alphabetical/S/Styles/Styles.css" rel="styleSheet" type="text/css"/> (2) as a served file (for which web sharing has to be ON) Rules ===== All style names follow capital rule. Avoid using dark blue as a colour: it is "reserved" for links. Semantics of text styling ========================= The following may occur as phrases inside a paragraph of text or as blocks: Emphasis a phrase that is important or better defines the meaning of the sentence by being stressed in pronunciation. Definition presents a phrase for the first time, in a context that also defines its meaning, e.g. the word "grass" in "There is a short plant called grass, with clippable leaves eaten by ruminants." Example text that is from another context, usually (but not necessarily limited to) typed computing input, programming language snippets, code of some sort, etc. Quote citation from another person or source. Email a special case of Example, used in converted e-mail correspondence. */ /* D E F A U L T */ body { font-family: sans-serif; background-color: #ffffda; margin: 0; padding: 0; } /* whole window available */ div.Content { padding: 0.0em 2.0em 0.0em 2.0em; counter-reset: h1count; } /* head and foot outside this could then be wider */ h1.DocumentTitle { color: #c42700; font-size: 1.8em; text-align: center; margin: 0; padding: 0.2em 0.0em 0.2em 0.0em; background-color: #f0f0a0; border: solid 2px #aaaa55; } h1.DocumentTitle:before { content: ""; } h1.DocumentTitleWithSubtitle { color: #c42700; font-size: 1.8em; text-align: center; margin: 0; padding: 0.4em 0.0em 0.0em 0.0em; background-color: #f0f0a0; border: solid 2px #aaaa55; border-bottom: none; } h1.DocumentTitleWithSubtitle:before { content: ""; } h1.DocumentSubtitle { color: #c42700; font-size: 1.2em; text-align: center; margin: 0; padding: 0.5em 0.0em 0.4em 0.0em; background-color: #f0f0a0; border: solid 2px #aaaa55; border-top: none; } h1.DocumentSubtitle:before { content: ""; } h1 { color: #c42700; font-size: 1.2em; text-align: left; margin: 2.0em 0% 0.0em 0.0em; padding: 0.2em 1.0em 0.2em 1.0em; background-color: #fdfbbb; border: solid 1px #aaaa55; counter-reset: h2count; } h1:before { content: counter(h1count)". "; counter-increment: h1count; } h1.NoNumber:before { content: ""; } h2 { color: #c42700; font-size: 1.1em; text-align: left; margin: 2.0em 20% 0.0em 0.0em; padding: 0.2em 1.0em 0.2em 1.0em; background-color: #ffffdd; border: solid 1px #bbbb66; counter-increment: h2count; counter-reset: h3count; } h2:before { content: counter(h1count)"."counter(h2count)". "; } h2.NoNumber:before { content: ""; } h3 { color: #b42700; font-size: 1.0em; text-align: left; margin: 2.0em 30% 0.0em 0.0em; padding: 0.1em 1.0em 0.1em 1.0em; background-color: #ffffff; border: solid 1px #bbbb66; font-weight: normal; counter-increment: h3count; counter-reset: h4count; } h3:before { content: counter(h1count)"."counter(h2count)"."counter(h3count)". "; } h3.NoNumber:before { content: ""; } h4 { color: #b42700; font-size: 1.0em; text-align: left; margin: 2.0em 50% 0.0em 0.0em; padding: 0.2em 1.0em 0.2em 1.0em; background-color: #ffffff; border: solid 1px #aaaa55; font-weight: normal; } p { margin: 0.5em 0.0em 0.0em 0.0em; text-align: justify; } p.Centred { text-align: center; } p.Left { text-align: left; } p.Right { text-align: right; } p.Justified { text-align: justify; } p.Author { font-style: italic; text-align: right; margin-right: 2.0em; } /* T A B L E S */ /* mnemonic alignment letters: horizontally lcr vertically tmb wrapping w */ /* by default table is narrow, transparent and centred, cells have no borders no textwrap and moderate padding. */ table { border-collapse: collapse; width: 10%; margin: 0.5em auto 0.0em auto; border: none; } td { vertical-align: top; border-collapse: collapse; border: none; white-space: nowrap; padding: 0.2em 0.5em 0.2em 0.5em; text-align: justify; } table.Simple { margin: 1.0em auto 1.0em auto; } table.Simple50 { margin: 1.0em auto 1.0em auto; width: 50%; } table.Simple70 { margin: 1.0em auto 1.0em auto; width: 70%; } table.Simple100 { margin: 1.0em auto 1.0em auto; width: 100%; } td.Simple { border: solid 1px #888888; } td.Simple-r { border: solid 1px #888888; text-align: right; } td.Simple-c { border: solid 1px #888888; text-align: center; } td.Simple-w { border: solid 1px #888888; white-space: normal; } td.SimpleHead { border: solid 1px #888888; background-color: #f6e6a6 } td.SimpleHead-r { border: solid 1px #888888; background-color: #e5e0e0; text-align: right; } td.SimpleHead-c { border: solid 1px #888888; background-color: #f6e6a6; text-align: center; } td.SimpleHead-w { border: solid 1px #888888; background-color: #f6e6a6; text-align: left; white-space: normal; } td.SimpleDim { border: solid 1px #888888; color: #999999; } td.SimpleDim-r { border: solid 1px #888888; color: #999999; text-align: right; } td.SimpleDim-c { border: solid 1px #888888; color: #999999; text-align: center; } td.SimpleDim-w { border: solid 1px #888888; color: #999999; white-space: normal; } table.TextOrg { margin: 1.0em auto 1.0em auto; } table.TextOrg50 { margin: 1.0em auto 1.0em auto; width: 50%; } table.TextOrg70 { margin: 1.0em auto 1.0em auto; width: 70%; } table.TextOrg100 { margin: 1.0em auto 1.0em auto; width: 100%; } td.TextOrg { } td.TextOrg-r { text-align: right; } td.TextOrg-c { text-align: center; } td.TextOrg-w { white-space: normal; } /* L I S T S */ ul { margin: 1.0em 0.0em 0.5em 3.0em; padding: 0; } ol { margin: 1.0em 0.0em 0.5em 3.0em; padding: 0; } li { margin: 0.3em 3.0em 0.2em 0.0em; padding: 0; text-align: justify; } li > ul { margin-top: 0.0em; margin-left: 2.0em; } li > ol { margin-top: 0.0em; margin-left: 2.0em; } ul.NoBullet { list-style-type: none; } li.NoBullet { margin: 0.6em 3.0em 0.2em 0.0em; } ul.NestedCounting { counter-reset: nestcount; list-style-type: none; } li.NestedCounting:before { content: counters(nestcount,".")". " ; counter-increment: nestcount; } /* R U L E R S */ hr { background-color: #903000; margin-top: 0.2em; margin-bottom: 0.1em; width: 100%; height: 0.1em; border-width: 0; } hr.Line { background-color: #000000; margin-top: 0.2em; margin-bottom: 0.5em; width: 100%; height: 0.1em; border-width: 0; } /* thin black line */ hr.End { background-color: #903000; margin-top: 2.0em; margin-bottom: 0.1em; width: 30%; height: 0.2em; border-width: 0; } /* end of page */ hr.Print { background-color: #000000; margin-top: 2.0em; margin-bottom: 0.1em; width: 30%; height: 0.2em; border-width: 1px; } /* black print */ /* A N C H O R S */ a:link { } a:visited { } a:hover { } a:active { } /* I M A G E S */ img { border: none; } img.FloatRight { float: right; margin: 0.5em 0.0em 0.5em 1.0em; } img.FloatlLeft { float: left; margin: 0.5em 1.0em 0.5em 0.0em; } /* T E X T S T Y L E S */ /* in alphabetical order */ .Bold { font-weight: bold; } .Code { white-space: pre; font-family: monospace; color: #006600; margin: 0.0em 0.1em 0.0em 0.1em; } .Definition { font-style: italic; font-weight: normal; color: #0000cc; margin-right: 0.2em; } .Emphasis { font-style: italic; font-weight: normal; color: #994400; margin-right: 0.2em; } .Example { font-style: normal; font-weight: normal; font-family: monospace; color: #228800; margin: 0 0.2em 0 0.2em; letter-spacing: -0.1em; } .Italic { font-style: italic; margin-right: 0.2em; } .MonospacePre { color: #007000; white-space: pre; font-size: 1.0em; font-family: monospace; margin: 0 0.2em 0 0.2em; } .Quote { font-style: italic; margin-right: 0.2em; } .Superscript { font-size: 0.8em; vertical-align: super } .Smaller { font-size: 0.7em; } .Snbs { font-size: 0.5em; } /* small non-breaking space */ .TextRed { color: red; } .TextGreen { color: green; } .TextBlue { color: #0000ff; } .TextBlueLight { color: #5555ff; } .TextBlueDark { color: #0000aa; } .TextOrange { color: #dd8800; } /* B L O C K S */ div.Quote { margin: 0.5em 5% 1.0em 5%; font-style: oblique; } /* all content inherits the oblique style */ div.QuoteFramed { margin: 0.5em 5% 1.0em 5%; padding: 0.5em 1.5em 1.0em 1.5em; font-style: oblique; background-color: #f0f0ff; border: solid 1px #555555; } /* S V G D R A W I N G S */ .SVGText { font-family: sans-serif; font-size: 3em; } /* P R O G R A M M I N G */ div.Code { margin: 2.0em 1.0em 3.0em 3.0em; } .CodeEmphasis { white-space: pre; font-family: monospace; color: #660000; margin: 0.0em 0.0em 0.0em 0.0em; } /* N A V I G A T I O N */ table.Navigation { width: 100%; margin: 0.0em auto 0.0em auto; } td.Navigation { background-color: #ffffcc; vertical-align: middle; padding: 0; } hr.Navigation { background-color: #903000; margin-top: 0.0em; margin-bottom: 1.0em; width: 100%; height: 0.1em; border-width: 0; } /* S U B J E C T S P E C I F I C */ /* Calendars */ td.Permanence { background-color: #ffccaa; border: solid 1px #888888; } td.AGM { background-color: #aaccff; border: solid 1px #888888; } td.Party { background-color: #ccffaa; border: solid 1px #888888; } /* Bulletins */ table.Obituary { border: solid 0.3em #bdb3a5; margin: 1.0em auto 1.0em auto; } td.Obituary { margin: 0.1em 1.0em 0.1em 1.0em; } /* Tributes */ h1.Tribute { color: #c42700; font-size: 1.8em; text-align: center; margin: 2.0em auto 1.0em auto; background-color: transparent; border: none; } h1.Tribute:before { content: ""; } table.Tribute { border: solid 1em #dcdca0; margin-left: auto; margin-right: auto; width: 80%; } td.Tribute { vertical-align: top; text-align: left; white-space: normal; padding: 2em; } /* Structure Chart */ table.Org { border: 1px solid #826400; width: 98%; } td.OrgDivision { font-size: 1.2em; font-weight: bold; color: #b41713; background-color: #ffc762; padding: 1.3em 0.5em 0.3em 0.5em; border: 1px solid #826400; text-align: left; } td.OrgFunction { font-size: 1.1em; font-weight: bold; color: #b41713; background-color: #fff193; padding: 0.8em 0.8em 1.0em 0.8em; margin: 0; border-left: none; border-top: 1px solid #826400; border-right: none; white-space: normal; text-align: left; } td.OrgPhoto { background-color: #fff5c4; text-align: right; padding: 0.0em; white-space: normal; border-top: 1px solid #826400 ; } td.OrgPerson { background-color: #fff5c4; padding: 0.5em 0.5em 0.5em 0.5em; white-space: normal; border-top: 1px solid #826400 ; text-align: left; } span.OrgName { color: #666666; } span.OrgFunction { color: #222222; font-weight: bold; } a.OrgEMail { font-size: 0.9em; } span.OrgMandateTerm { font-size: 0.9em; } /* P R E S E N T A T I O N S */ /* The presentation styles are the same for on-screen and for inclusion in site pages; the difference in size is achieved by the bodyfontsize setting which is present and used only in the presentation pages. To adjust the widths a box may be wrapped around the real box. */ div.PresBox50 { width: 50%; margin: 0.5em auto 0.5em auto; } div.PresBox70 { width: 70%; margin: 0.5em auto 0.5em auto; } div.PresBox90 { width: 90%; margin: 0.5em auto 0.5em auto; } div.Pres { width: 100%; border: solid 2px #22aa22; background-color: #f0ffee; padding: 0.5em 1.5em 1.5em 1.5em; } div.Pres > h1 { border: none; text-align: center; width: 100%; background-color: transparent; counter-increment: none; margin-top: 0.2em; } div.Pres > h1:before { content: ""; counter-increment: none; } div.Pres > h2 { border: none; text-align: center; width: 100%; background-color: transparent; counter-increment: none; } div.Pres > h2:before { content: ""; counter-increment: none; } /* body.Presnavigation { font-family: sans-serif; background-color: #ffffff; margin: 50px 0 0 0; } table.Presnavigation { border: none; width: 100%; margin: 0; background-color: #ffffff; } td.Presnavigation { background-color: #ffffff; padding: 0; font-size: 2px; vertical-align: middle; } #PresNavigation { position: fixed; width: 100%; top: 0; } div.Presbody { margin: 0.0em 2.0em 1.0em 2.0em; padding: 0.0em 1.5em 0.0em 1.5em; background-color: #ffffff; } h1.Pres { color: #009f00; font-size: 1.6em; text-align: center; margin-top: 0.3em; background-color: transparent; border: none; } h1.Pres:before { content:""; counter-increment: none; } h2.Pres { color: #009f00; font-size: 1.4em; text-align: center; margin: 0.3em 0 0 0; background-color: transparent; border: none; } h2.Pres:before { content:""; counter-increment: none; } h3.Pres { color: #009f00; font-size: 1.2em; text-align: center; margin: 0.3em 0 0 0; background-color: transparent; border: none; } h3.Pres:before { content:""; counter-increment: none; } h1.Pres-l { color: #009f00; font-size: 1.6em; text-align: left; margin: 0.3em 4.0em 0.1em 0.0em; background-color: transparent; border: none; } h2.Pres-l { color: #009f00; font-size: 1.4em; text-align: left; margin-top: 0.3em; background-color: transparent; border: none; } h3.Pres-l { color: #009f00; font-size: 1.2em; text-align: left; margin-top: 0.3em; background-color: transparent; border: none; } p.Pres { color: #003300; font-size: 1.0em; text-align: center; margin-top: 0.3em; background-color: transparent; border: none; } p.Pres-l { color: #003300; font-size: 1.0em; text-align: left; margin-top: 0.3em; } div.PresPageContent { width: 95%; margin: 1.0em auto 1.0em auto; padding: 0.0em 1.5em 0.0em 1.5em; border: solid 2px #22aa22; background-color: #f0ffee; } */ /* CSS inheritance H1 EM {...} all EM descendants of H1 H1 > EM {...} EM direct child of H1. E1 + E2 {...} E2 immediately preceded by an E1 :first-child :first-letter :first-line */ /* relics: hr.Presnavigation { background-color: #903000; margin: 0; width: 100%; height: 1px; border-width: 0; } .Presexample { font-style: normal; font-weight: normal; color: #883333; font-family: monospace; } .PreseEmphasis { font-style: normal; font-weight: bold; color: #883333; } */