elment with CSS columns.
*/
/* required for html 5 */
img { border: 0; }
/* generic font definition for p for the FAQ */
p, p.a, p.q { font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 110%;
line-height: 150%;
font-weight: 400;
font-style: normal; }
p, p.a {
margin-right: 1.5em;
margin-left: 1.04em;
}
/* various overrides for the p.q */
p.q {
margin-left: 0; margin-right: 0;
line-height: 140%;
font-size: 134%;
}
/* 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;
border-radius: 3px;
padding-bottom: 4px; padding-top:4px;
margin-bottom: .5em; }
/* use hanging indent, so that any multiline text wraps correctly respecting the widths of the Q */
p.q { text-indent: -1.55em; padding-left: 1.8em; }
/* fix: must override font-family/size from standard_styles */
li { font-family: Verdana, Arial, Geneva, sans-serif; }
/* prevent cascading font size */
li p, li p.a { font-size: 100%; }
/* 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-type:square; }
ol ul { list-style-type:square; }
ul ol li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
ul ul li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
ol ul li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
ol ol li {font-size: 91%; line-height: 110%;} /* make secondary lists more condensed */
/* in the faq, the outermost ul needs extra padding */
ul { padding-left: 2em; margin-left: 16px; margin-right: 16px; }
ol { padding-left: 2em; margin-left: 16px; margin-right: 16px; }
/* nested list, less padding */
td ul { padding-left: 1em; padding-bottom:.15em;}
td ol { padding-left: 1em; padding-bottom:.15em;}
ul ul { padding-left: 1em; padding-bottom:.15em;}
ol ul { padding-left: 1em; padding-bottom:.15em;}
ol ol { padding-left: 1em; padding-bottom:.15em;}
ul ol { padding-left: 1em; padding-bottom:.15em;}
ul li { padding-left: .15em; margin-left: 0; }
ul p.a, ul p { margin-left: 0em; padding-left: 0em; }
ol p.a, pl p { margin-left: 0em; padding-left: 0em; }
/* this works only for a ul/ol inside a table in a faq */
td ul li {line-height: 125%; }
td ol li {line-height: 125%;}
/* fix: prevent li background from orverrideing "changed" status */
ul.changed li { background-color: inherit; }
ol.changed li { background-color: inherit; }
td ul { padding-left:1em; margin-left:.75px }
/* ensure lists inherit standard font settings */
ul {font-family: Verdana, Arial, Geneva, sans-serif;
line-height: 150%;
font-size: 110%; }
ol { font-family: Verdana, Arial, Geneva, sans-serif;
line-height: 150%;
font-size: 110%; }
/* some custom marker styles */
ol.custom-marker {
counter-reset: list;
}
ol.custom-marker > li {
list-style: none;
counter-increment: list;
}
ol.custom-marker.parens-after.decimal > li::marker {
content: counter(list) ")\a0";
}
ol.custom-marker.parens-after.lower-alpha > li::marker {
content: counter(list, lower-alpha) ")\a0";
}
ol.custom-marker.parens-around.lower-alpha > li::marker {
content: "(" counter(list, lower-alpha) ")\a0";
}
ol.custom-marker.parens-around.decimal > li::marker {
content: "(" counter(list) ")\a0";
}
/* 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; }
h1 { font-weight: normal;
font-size: 180%;
font-family: Verdana, Arial, Geneva, sans-serif;
color: #333;
line-height: 167%;
}
/* match headers other than h1 */
h2 { font-family: Verdana, Arial, Geneva, sans-serif; }
td { font-family: Verdana, Arial, Geneva, sans-serif; }
th { font-family: Verdana, Arial, Geneva, sans-serif; }
/* rationale: the standard_styles does not have a good "basic" table. */
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;
padding:.3em .6em; text-align: left; }
table.faq td {border-width:1px; border-style:solid; border-color:#A0A0A0;
padding:.3em .6em; text-align: left; }
/* rationale: use gray for bold table headings, to differentiate between headings and contents */
table.faq th, table.faq th p { color: #808080; background-color:#F8F8F8; font-weight:bold;}
table.faq th p { font-size: 100%; margin:0;}
table.faq td p { font-size: 100%; margin:0;}
table.faq td p+p {margin-top: 0.25em; }
/* 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" */
/* noborder overrides the table and cell borders, but retains a small border around
to aid contrast */
table.noborder /*, table table.noborder */ { border-style:none; border-width:0; border-collapse:collapse; }
table.noborder th /*, table table.noborder th */ { border:solid 1px #F0F0F0; }
table.noborder td /*, table.table.noborder td */ { border-style:none; }
/* prevent explicit override from outer noborder table. Works for one level of nesting */
table.border, table table.border { border-width:1px; border-style:solid; border-color:#A0A0A0; border-collapse:collapse; }
table.border th /*, table table.border th */ { border-width:1px; border-style:solid; border-color:#A0A0A0; }
table.border td /*, table table.border td */ {border-width:1px; border-style:solid; border-color:#A0A0A0; }
/* tables where headers act as section dividers (mh: multi-header) need a more distinct header style */
table.mh th p.a, table.mh th p {
color:#828282;
font-size:103%;
border-left: solid 4px #D0D0D0;
padding-left: .5em; padding-top:4px; padding-bottom:4px;
}
table.mh th {
border-bottom-color: #606060;
border-bottom-width: 1px;
padding-top:0; padding-left:0; padding-bottom:0;
}
table.mh td p.a, table.mh td p { font-size: 91%;}
table.mh tr td:first-child { padding-left: 1em; }
table.center { margin: 0 auto; }
/* faq-specific tweak for this style, revise if font-family gets changed */
span.name {text-transform: lowercase; font-variant: small-caps; font-size: 100% }
/* for editors notes (not review notes) */
span.note { font-size:80%; line-height:55%; }
pre {margin-left: 16px; margin-right: 16px;}
/* provide a container style to allow font change on other, contained elements */
div.faq {font-family: Verdana, Arial, Geneva, sans-serif;}
div.faq p {font-family: Verdana, Arial, Geneva, sans-serif;}
div.faq td {font-family: Verdana, Arial, Geneva, sans-serif;}
div.faq th {font-family: Verdana, Arial, Geneva, sans-serif;}
/* 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 { margin-top:0; padding-top:0;
margin-left:2px; padding-left:2px;
margin-bottom:.75em; padding-bottom:0em;
margin-right: 0; padding-right:0}
/* these next ones are needed because the li in the navigation list do not contain */
ul.faq li { font-family: Verdana, Arial, Geneva, sans-serif; }
/* tighten up the lines just a bit, 115 is less than if unspecified */
ul.faq li { line-height:115%; font-size: 90%;}
/* min height to fit the background image */
ul.faq li { min-height: 20px; }
/* 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; }
ul.faq li { border-radius: 3px; }
/* style the background and margins */
ul.faq li { background-color: #F5F5F5; }
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(images/q_icon.jpg); background-repeat:no-repeat; background-position: 2px 2px; }
ul.faq li { padding-left: 28px; } /* larger padding to fit image of "Q" */
/* 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; text-decoration:none; }
ul.faq a:hover { color: #1A1A99; text-decoration:underline;/*#ff3333;*/ }
ul.faq a:active { color: #1A1A99; /*#ff3333;*/ }
ul.faq li a:link {color: #333; text-decoration:none; }
ul.faq li a:visited { color: #333; text-decoration:none; }
ul.faq li a:hover { color: #1A1A99; text-decoration:underline; /*#ff3333; */}
ul.faq li a:active { color: #1A1A99; /*#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 paragraph of */
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; }
p a[href*="attribution"] { color: #808080; text-decoration:none; background-color:inherit; }
p a[href*="attribution"] { font-size: 60%; position:relative; top:-.18em; padding-left:1px; padding-right:1px; }
/* styles for the table of contents navigation section which floats right */
nav.faqtoc { float: right; width: 29%; margin-left:2px; padding-left:4px; background-color:#FFFFFE; max-width:33%; }
nav.faqtoc ul.faq { width:auto; float: none;}
nav.faqtoc ul.faq li { margin-top:0 } /* if there are section titles, no margins */
nav.faqtoc h2 { font-size:90%; font-weight:normal;
margin-bottom:0; padding-bottom:0;
position: relative; top: 1em;
background-image:url('images/point_icon.jpg'); background-repeat:no-repeat; background-position:4px 50%;padding-left:1.9em;
border: solid 2px #E0E0E0; /*#660000; */
border-bottom:none; padding-top:6px; padding-bottom: 2px; margin-left:4px; }
nav.faqtoc h2 a { text-decoration: none; }
nav.faqtoc h2 a:hover { text-decoration: underline; }
/* --- the following are currently not used in the FAQ, other than the page about FAQ maintenance */
/* start (unused)
/* 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;}
/* --- end (unused) --- */
dl {
margin-left: 1em;
line-height:150%;
}
dt, dl {
font-family:Verdana, Arial, Geneva, sans-serif;
font-size:110%;
}
dt { font-weight: bold; }
dd { margin-bottom: .5em; }
/* the faqindex is a container for the listings for the main index on the faq */
div.faqindex {
max-width:100%;
padding-left:10px;
padding-right: 10px;
border-top: solid 1px #5555FF; /*#BB0000;*/
border-bottom: solid 1px #5555FF; /* #BB0000; */
}
/* the index is done as a definition list, so set some styles here, for dl, dd and dt elements */
div.faqindex dt { font-weight:normal; }
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%; }
div.faqindex dt a:link{ color:#666; }
div.faqindex dt a:visited{ color: #666;; }
div.faqindex dt a:hover{ color: #1A1A99; /* #880000; */text-decoration: underline; }
div.faqindex dt a:active{ color: #1A1A99; /*#880000; */ text-decoration: underline; }
div.faqindex dl {
line-height:150%; font-family: Verdana, Arial, Geneva, sans-serif;
margin-top: 0;
margin-bottom: 0;
padding: 0;
column-count: 2;
column-rule: solid 1px #5555FF; /* #BB0000; */
column-gap:4em;
column-fill:balance;
}
div.faqindex dt { break-after:avoid; }
div.faqindex dd { break-inside: avoid; }
div.faqindex dt+dd { break-before: avoid; }
/* text at the head of the page that's not in q/a formatting */
div.intro p, div.intro p.a { margin-left: 0; }
/* 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, .fails p { background-color: #FFcccc;
}
.works p.a, .works p { background-color: #ccFFcc;
}
.highlight p.a, .highlight p { background-color: #FFFFcc;
}
/* this is for the main contents, excluding header and footer */
main {
padding-left: 3em;
padding-right: .8em;
padding-top: 0.5em;
padding-bottom: 1em;
vertical-align: top;
}
/* Style settings specific to the page header design. */
/* Note: these will need to also go into standard_styles_5.css */
header {
font-weight: bold;
border-bottom: 10px solid #EAEAFE; /* #999999; */
padding: 3px .5em 2px 3px;
background-color: #5555FF; /* #990000;*/
color: white;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-items: center;
row-gap: 1em;
}
header a:link {
color: white;
}
header a:visited {
color: white;
}
header a:active {
color: white; /*#FF3333; */
}
header a:hover {
color: #B0B0B0; /*#FF3333; */
}
header nav a {
font-size: 90%;
}
#headercore {
/* These three lines keep logo and page title together and on the left side. */
display: inline-block;
flex-grow: 1;
align-self: flex-end;
}
#headercore img {
vertical-align: middle;
margin-right: 10px;
}
/* End header styles */
/* Styles for cleaned up footer element */
footer img
{
padding-top: 2px;
/* change to em based for high DPI devices *
width:216px;
height:50px;*/
width: 21.6em;
height: 5em;
border: 0;
}
footer>div
{
margin: 0 auto;
text-align:center;
}
footer>hr { width:50%; }
/* end footer styles */
/* section styles */
section { padding-bottom: .5em; }
section+section { border-top: 1px solid gray; }
section>h2 { margin-top: 1.75em;}
section table:last-child {margin-bottom: 1em;}
/* end section styles */
/* subtle link for glossed items */
a.glossarylink:link,
a.glossarylink:visited,
a.glossarylink:hover,
a.glossarylink:active
{
color: inherit;
text-decoration: none;
border-bottom: 1px dotted #5555FF;
padding-bottom: 1px;
}
a.glossarylink:hover
a.glossarylink:active
{
background-color: #EEEEEE;
}
/* override main style sheet */
a:link,
a:visited,
a:hover,
a:active
{
color: #3030FF;
/* color gives a contrast of 7:1 on white backgtound
and 3;1 with ordinary text, while only a bit more
saturated than logo color. Flatten link/visited distinciton
as it's not possible to have two distinct values with the
required contrast values by luminance alone. */
}
/* in case we need an override
table.mh td p a:link{
color: #3030FF!important;
}
table.mh td p a:visited {
color: #3030FF!important;
}*/
/* enable for local edits */
.changed { background-color: #FFFF00; border-style: dotted; border-width: 1px; }
.removed { text-decoration: line-through; background-color: #FFFF00; border-style: dotted; border-width: 1px; }
.reviewnote { background-color: #FFFF80; color: #CC0000; border-style: dashed; border-width: 1px; }
/* these @medis instructions are tentative */
@media screen and (max-width: 500px) {
body { font-size: 80%; }
main { hyphens: auto; }
}
@media screen and (max-width: 600px), (orientation: portrait) {
div.faqindex dl {
column-count:1;
}
nav.faqtoc {
display:none;
}
main {
padding-left: 1.5em;
}
@media screen and (min-width: 700px) {
div.faqindex dl {
column-count:2;
}
nav.faqtoc {
display: block;
}
}
|