element had been given a class (either a or q). Even inside a table cell or list element. That made it easier to modify the style. This scheme will have to be retained for this style sheet to work, even though the font is now very similar to the font in the main part of the website. Other assumptions made: the main text on each FAQ page is inside a table cell with the class contents and further, all contents inside that td is surrounded by a
. Multi-section table of contents must be enclosed in aand consist ofand
. Single level toc are a single
. To use this style sheet requires the use of a no-quirks mode doctype, the removal of internal stylesheet for table styles, and linking this style sheet. Finally, the list of links at the top must be changed to
This style sheet uses two images: q_icon.jpg and point-icon.jpg NOTE: in the following comments "fix:" indicates a style override to the standard stylesheet. if the standard_styles.css is updated, these would be duplicate and can be removed. The index page now uses floats to create multiple columns, the first of which must be given the id="firstpart" so that the styles work correctly. */ /* fix: in the nav bar, multiline entries should wordwrap */ td.navColCell { padding-left:1.1em; text-indent:-1em; } /* fix: prevent list items from spreading vertically, just because they contain
elements */ li p {margin:0; } /* fix: make nested lists use squares, not open circles */ ul { list-style: disc; } ul { margin-left:.25em; padding-left:0em; } ol { margin-left:.5em; padding-left:0em; } ul ul { list-style:square; } ol ul { list-style:square; } ul ol li {line-height: 110%;} /* make secondary lists more condensed */ ul ul li {line-height: 110%;} /* make secondary lists more condensed */ ol ul li {line-height: 110%;} /* make secondary lists more condensed */ ol ol li {line-height: 110%;} /* make secondary lists more condensed */ /* in the faq, the outermost ul needs extra padding */ blockquote ul { padding-left: 2em;} blockquote ol { padding-left: 2em;} blockquote ul ul { padding-left: 1em; padding-bottom:.15em;} blockquote ol ul { padding-left: 1em;} blockquote ol ol { padding-left: 1em;} blockquote ul ol { padding-left: 1em;} ul li { padding-left: .15em; margin-left: 0; } ul p.a { margin-left: 0em; padding-left: 0em; } ol p.a { margin-left: 0em; padding-left: 0em; } /* this works only for a ul/ol inside a table in a faq (which is always in a blockquote)*/ blockquote td ul li {line-height: 125%; } blockquote td ol li {line-height: 125%;} /* fix: the standard style doesn't validate for UL.One and UL.Two */ /* these are here for documentation only, they are not used in the faq */ UL.one { FONT-SIZE: 90%; MARGIN-LEFT:20px; TEXT-DECORATION: none; LIST-STYLE-TYPE: none } UL.two { FONT-SIZE: 85%; TEXT-DECORATION: none; TEXT-ALIGN: left; LIST-STYLE-TYPE: none; MARGIN-LEFT:20px } /* fix: the standard_styles is missing a style for character names */ /* to use this style, type the name in UPPER CASE */ span.name {text-transform: lowercase; font-variant: small-caps; font-size: 95% } /* fix: the standard_styles does not define this value, so it becomes browser dependent */ /* later: do this for all heading styles... */ h1 { margin-top: .45em; margin-bottom: .25em; } /* rationale: the standard_styles does not have a good "basic" table. */ /* these table styles currently exist in internal stylesheets in several FAQ files. this version is updated to use a slightly lighter border color. */ /* NOTE: for the faq, the tables need to be indented. Suggest: create another style table.basic and table.basic-nb that is otherwise formatted the same way, but without the left margin on the table */ /* or add an id="faqpage" on the outer blockquote, and make the indent based on that ?? */ table.faq { border-width:1px; border-style:solid; border-color:#A0A0A0; border-collapse:collapse; padding:0.2em; margin-left:1em; font-size:1em} table.faq th { border-width:1px; border-style:solid; border-color:#A0A0A0; font-weight:bold; padding:5px; text-align: left; } table.faq td {border-width:1px; border-style:solid; border-color:#A0A0A0; padding:5px; text-align: left; } /* Why is there a border on the header in the no-border header style? The color is so close to the background color that it's not seen as a border, rather it serves to make the background rectangle look more "crisp" */ table.faq-nb { border-style:none; border-width:0; border-collapse:collapse; margin-left:1em;} table.faq-nb th { border:solid 1px #F2F2F2; font-weight:bold; padding:5px; text-align:left; } table.faq-nb td { border-style:none; font-weight:normal; padding:5px; text-align:left; } /* prevent interference from outer table */ table.faq-nb table.faq th { border-width:1px; border-style:solid; border-color:#A0A0A0; padding:5px; } /* rationale: use gray for bold table headings, to differentiate between headings and contents */ table.faq th { color: #808080; background-color:#F8F8F8;} table.faq-nb th { color: #808080; background-color:#F8F8F8;} /* the faq uses class=a on a number of th/td elements, so need to provide a more specific selector */ table.faq th p.a { color: #808080; background-color:#F8F8F8; } table.faq-nb tr th p.a { color: #808080; background-color:#F8F8F8; } table.faq th p.a { margin:0; } table.faq-nb th p.a { margin:0; } table.faq td p.a { margin:0; } table.faq-nb td p.a { margin:0; } table.faq td ul { margin-top:0; margin-bottom:0;} table.faq-nb td ul { margin-top:0; margin-bottom:0;} /* tables where headers act as dividers (mh: multi-header) need a more distinct header style */ table.mh th p.a { color:#787878; font-size:103%; border-left: solid 4px #c0c0c0; padding-left: .5em; padding-top:4px; padding-bottom:4px; } table.mh th { border-bottom-color: #990000; padding-top:0; padding-left:0; padding-bottom:0; } table.mh td p.a { font-size: 91%;} table.mh tr td:first-child { padding-left: 1em; } /* use a sans-serif font. */ p.q { FONT-WEIGHT: bold; FONT-STYLE: italic; FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif } p.a { MARGIN-LEFT: 16px; MARGIN-RIGHT: 16px; FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif; } /* match headers other than h1 */ h2 { FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif; } /* provide a container style to allow font change on other, contained elements */ div.faq {FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif;} div.faq p {FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif;} div.faq td {FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif;} div.faq th {FONT-FAMILY: 'Trebuchet MS', Arial, Georgia, sans-serif;} /* faq-specific tweak for this style, revise if font-family gets changed */ p.a span.name {text-transform: lowercase; font-variant: small-caps; font-size: 100% } /* some color changes to make the "Q" parts stand out more */ p.q { color: #606060; background-color: #FAFAFA; } /* a light border and breathing room */ p.q { border: solid 1px #D9D9D9; } p.q { padding-bottom: 4px; padding-top:4px; } /* use hanging indent, so that the Q's wrap correctly */ p.q { text-indent: -1.3em; padding-left: 1.55em; } /* Styles for the opening ul containing the table of contents, to make it a series of boxes running down the left */ /* define a floting list without bullets */ ul.faq { width:29%; float: right; list-style:none; } /* with removal of right margin go to 29% */ /* position so the stack of boxes starts slightly below the first Q */ ul.faq { position:relative; top:1.1em;} /* set a white backround for the entire list, so Q headings don't visbly dive under the stack of boxes */ ul.faq { background-color: #FFFFF8; } /* set margins and paddings to separate the list from surrounding text */ ul.faq { padding-top:0; margin-top:0; margin-left:2px; padding-left:2px; margin-bottom:.75em; padding-bottom:0em; } /* these next ones are needed because the li in the navigation list do not contain
*/ ul.faq li { font-family: 'Trebuchet MS', Arial, Georgia, sans-serif; } /* tighten up the lines just a bit, 108 is less than if unspecified */ ul.faq li { line-height:108% } /* define the look of each list item as a box */ ul.faq li { border: solid 1px #D5D5D5; } /* try to give the nav boxes just a hint of a raised appearance */ ul.faq li { border-bottom-color: #909090; } ul.faq li { border-right-color: #989898; } ul.faq li { border-right-width: 2px; } ul.faq li { border-bottom-width: 2px; } /* style the background and margins */ ul.faq li { background-color: #F0F0F0; } ul.faq li { padding-bottom: 4px; padding-top:4px; padding-right:4px; padding-left:4px; padding-left: .5em; } ul.faq li { margin-bottom: 5px; margin-top:2px; } /* use a background image to mark navigation boxes as "Q" */ ul.faq li { background-image:url(q_icon.jpg); background-repeat:no-repeat; background-position: 2px 2px;} ul.faq li { padding-left: 1.6em; } /* larger padding to fit image of "Q" */ /* fixes an IE problem (do not remove) */ ul.faq li { zoom:1; } /* other browsers will ignore, as it's unrecognized, but it will fail validation */ /* match "link" to "visited" color in navigation list for faq - these links are all targeting the current page after all, and having checkerboard of colors in this case isn't really useful */ /* because of the way pseudo elements work, best to repeat the full set of styles in order LoVe, HAte NOTE: the order of active and hover is wrong in standard_style.css, preventing active from being triggered. */ ul.faq a:link { color: #660000; text-decoration:none; } ul.faq a:visited { color: #660000; } ul.faq a:hover { color: #ff3333; } ul.faq a:active { color: #ff3333; } ul.faq li a:link {color: #660000; text-decoration:none; } ul.faq li a:visited { color: #660000; } ul.faq li a:hover { color: #ff3333; } ul.faq li a:active { color: #ff3333; } /* this is a nifty little style to turn the attribution links into something less prominent than the red link NOTE: make sure the link is inside a paragrph of class="a" */ p.a a[href*="attribution"] { color: #808080; text-decoration:none; background-color:inherit; } p.a a[href*="attribution"] { font-size: 60%; position:relative; top:-.18em; padding-left:1px; padding-right:1px; } div.faqtoc { float: right; width: 29%; margin-left:2px; padding-left:4px; background-color:#FFFFFE; } div.faqtoc ul.faq { width:auto; float: none;} div.faqtoc ul.faq li { margin-top:0 } /* if there are section titles, no margins */ div.faqtoc h2 { font-size:90%; font-weight:normal; margin-bottom:0; padding-bottom:0; position: relative; top: 1em; background-image:url('point_icon.jpg'); background-repeat:no-repeat; background-position:4px 50%;padding-left:1.9em; border: solid 1px #660000; border-bottom:none; padding-top:6px; padding-bottom: 2px; margin-left:4px; } div.faqtoc h2 a { text-decoration: none; } /* the "contents" cell of the FAQ is filled with a singgle blockquote. This gives a nice left margin, but the right margin is too generous. The following attempts to fix this */ td.contents blockquote { padding-right:4px; margin-right:4px; } /* set the right margin/padding narrow */ td.contents blockquote blockquote { margin-right: 3em; } /* restore the padding for nested quotes */ /* The right way to do this would be with a direct descender selector, but thatsnot expected to work in IE6 but the above should work. */ /* --- this section is for the index page --- */ /* fix: reduce the width of standard sidebar notes, add margin */ /* rationale: the current "note" is too wide and has no margin so text can bump into it, especially, when it's justified. Having a more narrow note would improve other pages on the site as welll */ table.sidebar { width:30%; margin-left:15px; margin-top:0; margin-bottom: .5em; padding-top:0;} td.sidebar { padding-left:.30em; padding-top:.25em; padding-bottom:.25em; padding-right:.15em;} td.sidebarTitle { padding-left:.20em; } /* fix: alternative version - less color, slight 3D by wider bottom/right borders */ table.sidenote { width:30%; float:right; margin-left:15px; margin-top:0; margin-bottom: .5em; margin-right:4px; padding-left:.30em; padding-top:.25em; padding-bottom:.25em; padding-right:.15em; border: solid 1px #C0C0C0; border-collapse:collapse; border-bottom-width:2px; border-right-width:2px } td.sidenoteTitle { border-bottom: solid 1px #808080; background-color:#D8D8d8; color: #787878; } td.sidenote { padding-left:.20em; background-color: #FEFEFE; border:none; color: #505050;} /* the faqindex is a container for one column of the index on the faq */ /* the leftmost column must have id="firstpart" /* the max-width fixes an IE problem with floats, do not remvove even though redundant */ div.faqindex { float:left; width:46%; padding-left:10px; padding-right: 10px; max-width: 46%; } div.faqindex#firstpart { border-right: solid 1px #BB0000; margin-left:5px; padding-left:5px; } div.faqindex { border-top: solid 1px #BB0000; padding-top: 0em;} /* the index is done as a definition list, so set some styles here, for dl, dd and dt elements */ div.faqindex dl { padding-top: .5em; margin-top:0em; } div.faqindex dt a {padding-left:.25em;} div.faqindex dt a { text-decoration: none; font-weight:bold; } div.faqindex dt { text-indent: -1.25em; margin-left: 1em; } /* handle wrapping faq topics */ div.faqindex dd { padding-left: .5em; margin-bottom: .35em; } div.faqindex dd { color: #606060; } div.faqindex dd { font-size:95%; } /* fix: coloring red/green for table cells */ .fails { background-color: #FFcccc; } .works { background-color: #ccFFcc; } .highlight { background-color: #FFFFcc; } /* make sure these styles work within an answer */ .fails p.a { background-color: #FFcccc; } .works p.a { background-color: #ccFFcc; } .highlight p.a { background-color: #FFFFcc; }