/* `EXCLUSIONS by window size Window size breakpoints: <500, 500-800, 800-1200, >1200 I use three classes to control which elements display in different window sizes. The most common usage pattern is to declare that a larger element will small windows "never" ("swnj"), but then also define another element to replace it on small windows only ("swoj"). dev only sizes swoj swnj xlwoj xlwnj mwoj lwoj -500 ✓ × × ✓ × × 500-800 × ✓ × ✓ ✓ × 800-1200 × ✓ × ✓ × ✓ 1200+ × ✓ ✓ × × × swoj = small window only (formerly win_s_only) swnj = small window never (formerly no_small_window) xlwoj = extra large windows only (formerly big_window_only and win_xl_only) swnj = small window never (formerly no_small_window) Some dev-only ones… mwoj = medium window only, dev only, never used in practice lowj = large window only, dev only, never used in practice (the j is a convention I use sometimes to distinguish short strings from other word fragments) CHANGELOG 2021-03-05 — uc3, css3, ecom2, pagespeed1, major stylesheet de-crufting, published in several stages Mar 1–5 2020 * Simplified responsive CSS, "one size fits all (but fits mobile best)". * Way fewer @media declaration. One body width (86vw) to rule them all, limited by a max-width (800). That necessitated careful checking of margin-busters, most of which had to be reeled in: sidebar, sidebar-box, and pull quotes. Also made those all one-size-fits-all while I was at it. * First uses of clamp() for bracketing, but minimally. I don’t trust it yet. * One font-size/line-height: 21/1.5. I’d really like to use clamp() here, but not yet. * Greatly simplified footnote list: sacrificed the lovely custom list counters, made it responsive in just one way, a switch from list-style-position from inside to outside at 700px. Finally, minor savings of characters: replaced "media screen and" with just "media". * Link styles polish, especially simpler new styling of all anchor links (now using a[href^='#'] to select toc, and backrefs); simpler backrefs. * Killed or moved many classes: * char_bullet_compact, char_checkmark, char_bullet_fat * .inline-list (moved to custom css for the 2 articles using the class) * .audio_downloads and bookmarking styles (.sec_bookmark_icon etc, moved to custom css for logged in users) * deleted quite a bit of unnecessary .zoomer stuff * show more/less sections now only in books.php * eliminate 'pupb nostyle' (the only use of nostyle, to negate one property of pupb when pupb isn't even needed there in the first place) * A bunch more minor stuff: * Simplification of asides. * Greatly simplified styling of abstracts, removed ALL related classes. * Eliminated lighter text colour of li, blockquote. * Fix for minor IE 11 hack for 'main' element. * Moderately simplified badge classes. * Fine-tuned heading sizes, dropped tweaks for desktop. * Removed unnecessary nostyle class from ccs-badge and stylesheet * Shortened a bunch of widely used classnames: popup_c>pupw, pupb_c>pupb, yt_embed_width_limiter>ytebox, yt_embed>ytemb, link_info_button>linksbutn, curncySelecBox>csbox. * Eliminated some minor duplicated styles 2021-02-26 — Aggressive simplification of masthead and nav. Site now has only a logo that links to the home page on most pages. The home page has a tagline and menu. */ html {scroll-behavior: smooth} @media (max-width: 500px) { /* in windows up to 500px wide... */ .swnj {display:none} /* small-window-never will not display */ } @media (max-width: 1200px) { /* in windows up to 1200px wide... */ .xlwoj {display:none} /* XL-windows-only will not display */ } @media (min-width: 1200px) { /* in windows up to 1200px wide... */ .xlwnj {display:none} /* XL-windows-only will not display */ } @media (min-width: 500px) { /* in windows at least 500px wide... */ .swoj {display:none} /* small-window-only gets display turned off */ } /* ======= ↓ MAIN STYLESHEET ↓ ======= */ /* This is the main CSS stylesheet for PainScience.com. css-critical.css is inlined in , while the main styles are linked with preload and applied onload (see my inclood function for more detail on this method). Misc notes and reference material: Key terms are prefixed with a ` (tick) symbol to make them easy to find. Although most important elements are mentioned in several places, there is usually a main location in the stylesheet where most of the declarations about it are made, and you can find that quickly by searching for, say, ` + navlinks or popup. The 'cs' prefix for class and ID names is basically saying that it’s a stylesheet thing. This facilitates global find-change, and discriminates the label from identical terms that may appear frequently in other contexts. For instance, searching for “notes” across the whole site gets 385 hits; search for “csfns” gets only the 131 that I need. If I ever need to change class name, it is a WAY easier to do so if it has a distinctive prefix. (The main reason it isn’t used more widely is just that’s a shitload of work to change all the legacy labels.) main fonts and most likely fallback: font_body Palatino, Constantia (currently doing #sans_vs_serif experiment; if sans wins, I’ll thinking harder about that stack) font_accent Gill Sans font_heads AvenirNextCondensed-Bold font_narrow AvenirNextCondensed, HelveticaNeue standard colours… main blue 369 bright blue 69C gray blue 79B neon blue 27D link blue 47A alt blue 1F6494 just a blue I like, a bit greyer than the main blue soft red C66 bright red C01 light sage 81AD81 dark sage 4B7B49 rich green 1F6494 dark gray 666 light gray 999 faint gray CCC */ body, .font_body, .pupw /* popup gets declared here because otherwise popups inherit whatever font their parent has, which is often wrong */ /* {font-family: "Avenir Next", Helvetica, Candara, Trebuchet, sans !important} /* #sans_vs_serif */ {font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Constantia, Georgia, serif !important} /* `ACCENT — A few select page elements are set in Gill Sans (first choice), a "pretty" and fairly websafe font, a decent replacement for Prenton, which I used via for many years via Typekit. Gill Sans is on all iThings and ~97% of desktop systems. */ .font_accent, .capt, .sidebar, .preamble, .short {font-family: GillSans, "Gill Sans", "Gill Sans MT", Calibri, HelveticaNeue, sans-serif-condensed, Arial, sans-serif !important; font-style: italic} /* stronger accent font */ .font_accent strong, .pq {font-family: GillSans-SemiBoldItalic, "Gill Sans", "Gill Sans MT", Calibri, HelveticaNeue, Arial, sans-serif !important; font-weight: 600} /* rather than actually emboldening the text, which defaults to Gill Sans BOLD, which is a bit excessive when contrasted Light Italic , just use the lighter weight font GillSans-Italic; */ h1, #subtitle, h2, .font_heads, h3, h4, .sidebar .runin, button { font-family: AvenirNextCondensed-Bold, "Arial Narrow", "DejaVu Sans Condensed", "Helvetica Narrow", HelveticaNeue-Thin, sans-serif-condensed, /* this appears to be the only way to specify the thin version of Roboto on Android */ Calibri, "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif; font-weight: bold; /* AvenirNextCondensed-Bold will mostly be unaffected by the “bold” declaration, except that child will inherit it bold too; if “normal” is declared here, that’s fine in general, but for you get a true normal font-weight because reasons. So declaring bold is an otherwise harmless fix for that Avenir edge case. Arial Narrow behaves more predictably: normal is always normal, bold is always bold. */ font-stretch: condensed; } .font_metadata {font-family: GillSans, "Gill Sans", "Gill Sans MT", Calibri, HelveticaNeue, sans-serif-condensed, Arial, sans-serif;} .font_narrow, .nav, #toc ul, label, table, .sidebar-box, .img_byline { font-family: AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, Tahoma, Arial, sans-serif; font-weight: normal; font-stretch: condensed} .pupb, a[id^="frj"], .badge { /* An edge case of a font-stack for popup buttons, footnote references, and badges. I wish I could use the narrow font stack for all of these, but the top font in that stack, Avenir, has some vertical positioning weirdness that doesn't play nicely with text-borders */ font-family: Tahoma, Verdana, "DejaVu Sans", sans; } /* elements with smaller/smallest font-sizes and corresponding tighter line-height; “important” because they are often used to over-ride other styles */ .smaller, .preamble, .capt, aside, .abstract { font-size:.9em !important; line-height:1.3 !important;} .smallest, .attr, #csfns>li, #csfns>div>li { font-size:.8em !important; line-height:1.2 !important;} /* <##>== ↓ DOC `STRUCTURE, MAJOR PAGE ELEMENTS ↓ == */ body { margin: 0 auto; width: 86vw; max-width: 800px; font-size:20px; line-height:1.3 } @media (min-width: 500px) { body {font-size: 21px; line-height:1.4} } main { display: block; /* declaring block is for fucking IE 11, still ~300/week in early 2021 */ margin: 8vh 0 12vh 0; } #endmark {margin: 10vh 0 20vh 0} footer { border-top: 4px #CCC solid; padding-top:2em; text-align: center; color: #666; font-size: .9em; } /* <##>== ↓ `NAVIGATION and `LINKS ↓ == */ /* a:link — a normal, unvisited link a:visited — a link the user has visited a:hover — a link when the user mouses over it a:active — a link the moment it is clicked */ /* link defaults: */ a:link {text-decoration: none} /* nuke underlining in general + navlinks */ nav a, .backref {text-decoration: none !important} /* nuke underlining for some links (importantly, to pre-empt the restoration of underling for hover and focus comin up soon) */ a {color: #47A} /* primary link color, persistent in visited navlinks and some other special links */ a:visited {color: #55A} /* visited color, purple */ a:hover, a:focus {color: #27D; text-decoration: underline} /* restore underlining back on for hover/focus (hover for mousers, focus for keyboarders) */ a:active {color: #69C} /* bright blue */ #metadata a {color: #999} /* understated links in gray text */ a.disabled {pointer-events: none; color:#999 !important} /* nav link exceptions, special underlining: */ .nav a {text-decoration: none} .nav a:visited, #footer a:visited {color: #47A} /* primary link color is persistent in visited navlinks and some other special links */ .nav a:hover {border-bottom: 2px solid #79B} /* nicer underlining of navlinks */ .nav a:visited {color: #47A} /* primary link color, persistent in visited navlinks and some other special links */ .nav .key {pointer-events: none; cursor: default; color: #8895A2 !important} /* color is important because it must override more specific declarations */ /* nav link layout: */ .nav {list-style-type: none; padding: 0} .nav li {display: inline; padding: 0} .nav li+li {margin-left:2vw} /* This is an elegant solution to an annoying puzzle, by declaring a left margin on all li items that follow li items in the list… which doesn't apply to the first item. So centred nav lists don't get shoved around by a margin on either the first or last item, and even in non-centred nav lists, there's no extraneous right-margin dangling off the end of the list (usually not a problem, but sometimes). */ /* Links to document anchors are shades of green: */ a[href^='#'] {color:#81AD81} /* sage green */ a[href^='#']:hover {color:#009051 !important} /* richer green */ a[href^='#']:active {color:#00F900} /* neon green */ a[href^='#']:visited {color:#9EB89A} /* muted grey green */ .backref {float:right; margin: 0 -4vw .5em .5em} /* backref anchors are inserted into footnotes by footnotes.js */ .camo:link, .camo:visited {color: inherit; text-decoration: underline} /* camoflaged link, same colour as parent text, highlighted with underline instead */ .authanc:link, .authanc:visited {color: #036} /* "authority anchor," a link that's there just for the association with an authoritative source, not really a link I actually want visitors to click; so, understated links in body text, still clearly visible, but less bright than the default link colour */ /* <##>== ↓ `FRONTMATTER, `TITLES, `HEADINGS, `SECTIONS ↓ == */ h1, #subtitle, h2, h3, h4, .part-subhead {color: #336699; line-height: 1.2} #title, #subtitle {margin: .3em 0} h1#title {font-size: 1.5em; font-weight: 700;} #subtitle {font-size: 1.1em; color: #79B} /* AvenirNextCondensed-Bold will mostly be unaffected by the “bold” declaration, except that child will inherit it bold too; if “normal” is declared here, that’s fine in general, but for you get a true normal font-weight because reasons. So declaring bold is an otherwise harmless fix for that Avenir edge case. Arial Narrow behaves more predictably: normal is always normal, bold is always bold. */ #metadata {color: #888} .first {margin-top:5vh} /* the first element of content, manually set for each page as needed */ .chapter {margin-top: 10vh} h2, .chapter h3 { /* H2s and H3s are identical in un/structured pages */ margin: 7vh auto 3vh auto; font-size: 1.2em; color: #369; /* color must be stated explicitly here, or it will be over-ridden by the regular H3 colour set below) */} section { /* any part or chapter in a structured doc */ clear:both; padding-top: .1em; /* this padding forces the div to encompass the margin on the heading, which it contains, so part link to the section anchor leave some space above the heading; it only needs to be a sliver */} /* H3s and H4s are identical in unstructured pages (both subheads), but different in structured pages (chapter head and subhead); the more specific declaration of .chapter h3 will override these styles in a structured doc; */ h3, h4 { color: #79B; font-size: 1.1em; margin: 5vh auto 1em auto} .part {margin-top: 15vh} .part header {text-align: center} .part header h2 { /* some things about H2 are different in the context of the part-head */ margin: 8vh auto 1em auto; letter-spacing: -.5px; text-transform: uppercase} .part header h2~p { /* part subheadings

preceded by h2 contained in a .part */ margin: 1em auto 4vh auto; font-size: 1.1em; color: #79B} h3.q {font-size: 1.1em; margin-bottom: -0.4em} /* headings that are "questions" in Q&A, critical above the fold only a couple places */ .secnav { text-align:right; color:#999; font-size:11px; } /* <##> Some adjustments for larger-than-common-mobile windows: */ @media (min-width: 500px) { div.sidecap img {float: left; margin: 0 1.5em 1em 0} .imgbox.sidecap {text-align: left} h1#title {font-size: 1.8em} #subtitle {font-size: 1.3em} h2, .chapter h3 {font-size: 1.4em} h3, h4 { font-size: 1.3em} } /* I could bump all the heading sizes up again for even bigger windows, but I'd really rather use clam() for everything, but the browser support still not there, and in the spirit of one-size-fits-all-but-fits-mobile-best... it's "fine" without bumping everything up for h1#title @media (min-width: 800px) { {font-size: 1.8em} #subtitle {font-size: 1.5em} h2, .chapter h3 {font-size: 1.4em} h3, h4 { font-size: 1.3em} } */ /* <##>== `CONTENT: `BLOCKQUOTES, `QUOTATIONS, `LISTS (there's a bunch of other block level content, of course, just not above the fold) */ blockquote.short {margin: 2em 10% 2em 8%; font-size: 1.4em; color:#059} .short .attr {margin: -.8em 10% 0 30%} .attr { margin: -.8em 10% 0 30%; text-indent: -0.2em; color: #999; } .attr::before {content: '~ ';color: #79b} @media (max-width: 500px) { /* rare use of max-width here: these styles are declared only for windows under 500 so that default styles will still apply in larger windows */ ul, ol {margin: 1em 1em 1em 0; padding: 0 0 0 .5em} } li {margin: 0.4em 0; padding-left: 0; font-size:.95em; line-height: 1.3} /* `PULL QUOTES, `PQs */ /* pq = pull quote */ .pq { display: none } /* no pull quotes by default, because there's no way to do pull quotes right on the smallest screens; minimum window is the bigger smartphones... */ @media (min-width: 390px) { .pq { /* pq = pull quote */ display:block; /* necesssary because many pull quotes are still spans */ float:right; font-style:italic; line-height: 1.4; color: #609C60; width: 50%; font-size: clamp(1.2em, 3vw, 1.8em); margin: 1.4em -4vw 1em 1.2em; /* slight margin-busting */ } .pq strong, .pq em {color: #4B7B49} } /* <##>== ↓ `IMAGES `IMGS ↓ == Markup for images and captions generated by php function img(), from the file img.php. It's old and janky but still churns out viable markup after a decade. The styles here assume a generous window size, and then some adjutsing declarations are made for images/layouts that are too large for their window (mostly removing floats and sidecaps where there's no room for them, or scaling images down if they are too big for their window. */ .imgbox {text-align: center; margin: 1.4em auto; position:relative; clear: both} .imgbox.right.w100 {float: right; margin: 0 -2vw 2vh 4%} /* the teensiest imgbox can float to the right by default, in any window; larger images will be floated in windows big enough for them; the rules are more restrictive for titleimages (which have less room to work with) */ @media (min-width: 398px) {.right.w160 {float: right; margin: 0 -3vw 2vh 4%}} @media (min-width: 500px) {.right.w200 {float: right; margin: 0 -4vw 2vh 4%}} @media (min-width: 700px) {.right.w300 {float: right; margin: 0 -4vw 2vh 4%}} @media (min-width: 900px) {.right.w400 {float: right; margin: 0 -4vw 2vh 4%}} /* doc width max 800, so 400 wide images are the largest floatable imgbox */ .pupw .right, .meta .right {margin-right:0} /* don't bust out of bordered boxes like popup windows and meta */ .imgbox.center {margin: 3em auto} img {border: 0; vertical-align: 0; max-width: 100%; height: auto;} .capt {color:#666; margin: .5em auto} .caphead {padding: 0; /* ←? */ color:#79B} .img_byline {line-height:1.2; opacity: .6; margin-top:0; font-size: 12px} /* a unique typesetting challenge here, must be as small as possible but still legible; not a modification of .capt */ /* Styles for captions under large centered images, a little more room underneath, slightly larger for roomier caption format */ .imgbox.center .capt.below {margin: 1em 10% 0 10%; width:auto} /* see below for special cases in windows at least 500px wide. */ /* 2021-03-05 The zoomer stuff was in a state of half-implemented mess. I had removed buttons from most pages last fall, but not the styles, because they were still needed for cart pages. This time I removed the "fancy" zoomer styles, and went back to the ancient plus-sign-in-a-popup-button styles. The fancier zoomer styles still exist in one place: the store page. */ .zoomer {position: absolute; left:-15px;} .zoomer:link {color:grey; text-decoration:none; cursor: zoom-in} @media (max-width: 500px) { /* Some hacky limits for zoomed images in small windows; the right way to do this would be to modify the script so that it calculates size/position correctly for small windows, which it clearly wasn't built for. But that's hard. So this. */ #ZoomBox { max-width:96% !important; left:2% !important; } img#ZoomImage { max-width: 85% !important; height: auto !important; padding: 6% !important } } /* <##>== ↓ `NOTES (footnote list, not popups) ↓ == */ #csfns {padding:0; list-style-position:inside} /* Footnote list is info dense and does not need visual separation from body content, and so I want it to use the whole width of the body. */ #csfns>li, #csfns>div>li { /* this selects all footnote li elements that are direct children of the footnote list (#csfns); '#csfns li' would style lists inside of footnotes as well */ margin: 2em 0 /* much more top/bottom margin than default list items */ } #csfns>li::marker, #csfns>div>li::marker {color:#369} /* colour the marker in supported browsers */ #csfns ul, #csfns ol {list-style-position:outside} /* Nested lists should still have 'outside' markers. */ @media (min-width: 700px) { /* at 700 wide, move list markers out into the margin */ ol#csfns {list-style-position:outside}} #csfns>li blockquote, #csfns>div>li blockquote {margin: 1em} .sidebar ul, .sidebar ol {padding-left:1em} /* <##>== ↓ `POPUPS ↓ == */ /* Popup buttons (.pupb) and footnote references (.frj) are very similar properties, so I define them together here, starting with a few cosmetic refinements that weren't made in css-critical. */ .pupb, a[id^="frj"], .zoomer { /* uses the Tahoma etc font-stack */ z-index: 10; margin: 0 0 0 2px; padding: 0 2px; border: 1px solid #AAA; vertical-align:.1em; font-size: .85em; line-height:1; font-style:normal; cursor: help; color: #47A; background-color: white; border-radius: 3px; white-space: break-spaces; } a[id^="frj"] {font-weight: bold} /* a.noteworthy {font-weight: bold;} 2021-02-26 experiment, now making ALL footnotes bold, only distinction between noteworthy and boring is colour */ a.boring {color: #999} /* Some declarations about foonote references in different states are !important because they have to override default declarations made explicitly for first five note reference IDs in css-critical. */ .pupb:hover, .frj:hover { border-color: #69C !important; color: #69C !important; text-decoration:none; } .pupb:active, .frj:active { color: #336699 !important; border-color: #336699 !important; background-color: #FFFF66 !important; } .img-box .pupb {z-index: 1; /* this fixes a rare edge case: when a popup overlaps a zoom button, the zoom button is on the same level as the popups close button, because they are styled the same way; the only fix I can think of is to push zoom buttons right down to the bottom of the stack to live below popups */} .pupx { /* “pupx” = popup close button */ display: inline-block; cursor:pointer; position: absolute; z-index: 30; /* button size is a function of the size of the center × symbol, which is defined by the height and width, plus the border thickness: 14px + 8px = 22px diameter; that is then subtly increased on hover */ height: 14px; width: 14px; /* determines the size of the center × */ top: -24px; /* determines the vertical offset, which should be 2x button size -4px */ left: 0; right: 0; /* required for centering an absolutely positioned block */ margin: 0 auto; padding: 0; border: 8px solid #79b; /* border radius functions like "padding" around the × */ border-radius: 100%; /* makes the button completely round */ background: linear-gradient(-45deg, transparent 0%, transparent 43%, white 43%, white 57%, transparent 57%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 43%, white 43%, white 57%,transparent 57%, transparent 100%); background-color: #69c; transition: width .3s, height .3s, margin-left .3s, top .3s, bottom .3s; box-shadow: 0 0 0 3px rgba(256,256,256,1); } .pupx:hover { height: 18px; width: 18px; /* a subtle increase in the size of the × */ top: -26px; /* change the offset by half the size increase: (18px -14p = a 4px size increase, so divide that in half to 2px, and then change the top value by 2px so that the vertical offset "follows" in the increase in size, allowing it to "grow from the centre" */ border-color: #27d; background-color: #27d; } .pupx:active {border-color: #008000} .pupw { /* `popup defaults for medium (non .large, non .small). This is one of the trickiest elements in the stylesheet. Many of these declarations seem redundant, but they have to be restated for the popup, or the popup will inherit values from whatever context the popup is in. I will declare dimensions AFTER these*/ position: absolute; display:none; z-index: 120; left:0; right: 0; /* required for centering an absolutely positioned div */ /* width, padding, font size and line height declared below for readability of variations for pupw size */ margin: 1.5em auto; padding: 1em; background-color: #FFFFFF; border-radius: 2vw; /* scale roundness of corners with screen width */ text-align: left; font-weight: normal; font-size: 19px; /* manually set somewhat lower than body font size */ line-height:1.3; font-style: normal; color: #666; box-shadow: 0 0 60px 65px rgba(200, 200, 200, 0.95); text-indent: 0; /* resets indentation when popups inherit it from sidebars */ white-space: normal; } .sidebar .pupw em:not(.runin) {text-decoration: none} /* Calculating max-widths for the popups: small max-width = 800−((1-.60)×800)−(.10×800) med max-width = 800−((1-.72)×800)−(.08×800) large med-width = 800−(.06×800) /* using % for the padding here is clevar, because it effectively ties it to the max-width of the div, because it's a % of the div width */ */ .pupw.small { width: 60vw; max-width:400px; padding: 2em 5%; font-size: 1em} .pupw { width: 72vw; max-width:512px; padding: 2em 4%} .pupw.large { width: 88vw; max-width:752px; padding: 2em 3%; font-size: .85em} /* For popups that contain other block elements (p, ul, blockquote, etc), eliminate their standard top and bottom margins when they are the first or "last" (technically 2nd to last, because the pupx button is always the last child, but we also do :last-child to capture the final items in nested blocks like the last item in a list or the last para in a blockquote). disabled 2021-05-21 because I found an example of breakage that I could not work around, see §massage#j2 (attribution of quote overlapping quote) */ /* .pupw p:first-child {margin-top: 0; color:green} .pupw p:last-child {margin-bottom: 0; color:red} .pupw p:nth-last-child(2) {margin-bottom: 0; color:orange} */ .pupw h3 {margin-top:1.5em; font-size:1.1em} .pupw h3:first-of-type {margin-top:.5em} /* <##>== ↓ `TOCs, TABLES OF CONTENTS ↓ == */ #toc {padding:2vw} #toc ul {margin:0; padding-left:0} #toc ul > li > ul {padding-left:1.5vw; margin-top: 1em} /* l1 headings */ #toc ul > li {font-weight:bold; font-size: 1.1em; list-style:none; margin-top:2em; /*color:blue */} /* l2 headings (must over-ride l1 styles) */ #toc ul > li > ul > li {font-weight: normal; font-size: .95em; margin-top: 0; margin-bottom:.7em; line-height:1.1; color:#666; } .badge { /* uses the Tahoma etc font-stack */ color: white; background-color: #bbb; padding: .15em .4em; border-radius: 3px } .badge.light { background-color: #d4d4d4; font-size: .9em; font-weight: normal; padding: 1px 3px } .badge.blue, h2 .badge, h3 .badge {background-color: #79B} blockquote blockquote {margin: 1em 2em; font-size: .9em} blockquote.featured {margin: 2.2em 1.6em; line-height: 1.6; font-size: 1.2em; color:#059} /* used only in blog for years, a useful class I simply neglected, a compromise between a plain blockquote and the much more decorative “short” class */ .runin {font-style: normal; font-weight: bold; color: #333} div.runinheadings .runin {font-size: 1.1em; color: #369} /* <##>== ↓ THE `ASIDES: `META, `SIDEBARs, `SIDEBAR-BOX `WIDEBARs ↓ == */ /* The .meta and .widebar classes have different purposes, but look very similar (both full-column-width divs): • .meta: information about the document or website, rather than the topic, very bold • .widebar: intended for relevant digressions, visually similar to meta but much less prominent (widebar.intersection gives a generous top margin so it is set aside between sections more prominently) */ aside { /* all meta and widebar and sidebar blocks are modified