/* St. Patrick's Blue (#252580), Munsell Red (#f2003c). */ /* @@@ Tag Selectors @@@ */ HTML, BODY { background-color: #FFFFFF; color: #000000; font-size: 100%; } /* font-family specified in responsive.css */ P, DIV, SPAN, CAPTION, TD, .stripped { font-size: 1rem; text-align: left; white-space: normal; letter-spacing: .12rem; line-height: 1.5rem; margin: 0; padding: 10px 5px; /* default CSS margins */ word-spacing: .12rem; /* leftmargin="0" topmargin="5" rightmargin="10" bottommargin="0" | */ /* It is usually a better idea to use padding on the , rather than margin. This is because any background properties you set (background-color, background-image) will be displayed within the bounds of the padding, but not within the margin. Since the usual desired behavior is for the background to fill the entire viewport (browser window), padding is usually the best choice. Read more: https://html.com/attributes/body-topmargin/#ixzz81oFHh5P1 */ /* margin: 0; */ /* padding: 0 auto 0 auto; */ /* WCAG 2.1 1.4.12 Spacing o Line height (line spacing) to at least 1.5 times the font size; o Spacing following paragraphs to at least 2 times the font size; o Letter spacing (tracking) to at least 0.12 times the font size; o Word spacing to at least 0.16 times the font size. */ } P { display: block; /* Spacing following paragraphs to at least 2 times the font size; */ margin-bottom: 2rem; } /* font-size: 1.6rem; white-space: normal; text-align: left; word-spacing: 2.4; letter-spacing: .192Rem; */ /* p, td, th, ul, ol, li, dl, dt, dd, span, div, caption {} For DIV styles, see divs.css */ TH { font-size: 1.5rem; font-weight: bold; /* WCAG wcag2.1 SC 1.4.12 Text Spacing (Level AA) Line height (line spacing) to at least 1.5 times the font size; Spacing following paragraphs to at least 2 times the font size; Letter spacing (tracking) to at least 0.12 times the font size; Word spacing to at least 0.16 times the font size.*/ letter-spacing: 0.12rem; /* letter-spacing: normal; letter-spacing: 0.1rem; letter-spacing: 1.232Rem; */ line-height: 1.65Rem; margin-bottom: 2.2Rem; text-align: center; white-space: normal; word-spacing: .176REM; } /* Google recommends a minimum tap target size of about 7mm, or 48 pixels wide – at least for the most important tap targets, like frequently used buttons, navigational links, search bars and form fields. Google Recommendation 3.2 Touch Target Size and Spacing: 9mm by 9mm WCAG 2.1 recommends a target size of at least 44 x 44 pixels. However, the button can be smaller in the following scenarios: * Equivalent - there is another button that serves the same purpose and is at least 44 x 44 pixels * Inline - it's a link in a block of text * User agent control - the size of the button is set by the user * Essential - a certain presentation is essential WCAG 2.1 2.5.8 Target Size * 48px x 48px * Use px for buttons. Not ems or rems * Paul's take away: 48px WCAG be darned. That can be 44px in width + 2px margin right and 2px margin left So "min-width: 44px;" ? */ button, .targetsize { min-width: 44px; margin-left: min(2px); margin-right: min(2px); } /* List Elements */ UL, OL, DL { text-align: left; line-height: 1.5Rem; } UL { list-style-image:url(../images_arch/bullet_bdsm_symbol_blue_20pix.gif); } /* adds "VIDEO: " to LI with the class "video." */ .video::before { content: "VIDEO: "; } DT { font-weight: bold; } DD { margin-left: 40px; margin-bottom: 1.125rem; } IMG { background-repeat: no-repeat; background-size: cover; border : none; font-style: italic; /* for ALT text */ height: auto; max-width: 100%; shape-margin: 1rem; vertical-align: middle; /*Replaces display: block; */ } SVG, VIDEO { /* display: block; */ height: auto; max-width: 100%; } q { /* color: gray; */ display: inline; /* font-style: italic; */ } q:before { content: open-quote; } q:after { content: close-quote; } /* Standard Links */ /* To avoid behavior overlapping, these states should go in the following order: 1. a:hover should go after a:link and a:visited. 2. a:active should go after a:hover. Default links have the following properties: - Links are underlined. - Unvisited links are blue. - Visited links are purple. standard link - #0000FF //blue visited link - #800080 //purple active link - #f2003c //red The default colours in Gecko, assuming the user hasn't changed their preferences, are: standard link: #0000EE (blue) visited link: #551A8B (purple) active link: #EE0000 (red) */ a { text-decoration: underline; } a:link { color: #0000EE; /* recommended */ } a:visited { color: #800080; /* purple */ } a:hover { color: #551A8B; /* recommended for focus */ outline: thin dotted invert; } a:active { color: #E80035; /* no recommendation */ /* EE0000 */ } a:focus { color: #00EE00; outline: 3px solid #E80035; } /* Standard links. Utilized */ /* Essential Page Elements (begin) */ textarea { /* font-family: Calibri, "Trebuchet MS", Arial, Georgia, "Times New Roman", Helvetica, Serif; */ font-size: 1rem; color: #E80035; background-image: url(../images_bg/bg06.gif); } FORM { margin: 0px } I, /* Italic. Italic by default. */ CITE, /* The HTML element is used to mark up the title of a cited creative work (e.g., book, play, film.) */ EM, .booktitle, .foreign, .italic /*span:lang(zh-Hans)*/ { font-style: italic; } .noitalics { font-style: normal; } /* Heading Elements */ /* General Reset for Headings */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.5; /* Ensures sufficient line spacing for readability */ color: #333; } /* Common font-family for all headings */ h1, h1 span, .pseudo-h1, .subtitle, h2, h2 span, .pseudo-h2, h3, h3 span, .pseudo-h3, h4, h4 span, .pseudo-h4, h5, h5 span, .pseudo-h5, h6, h6 span, .pseudo-h6 { font-family: Trajan, "Trajan Pro", "Burton's Nightmare", Goodfellow, Morpheus, Creepygirl, Dauphin, "Times New Roman", arial, helvetica; } .subtitle { display: block; font-size: 2rem; line-height: 2.5rem; text-align: center; } /* H1 styles */ h1, h1 span, .pseudo-h1 { font-size: 2.5rem; font-weight: bold; line-height: 2.75rem; text-align: center; } .pseudo-h2 { display: block; text-align: center; } h2, h2 span, h3, h3 span, .pseudo-h3, h4, h4 span, .pseudo-h4, h5, h5 span, .pseudo-h5, h6, h6 span, .pseudo-h6 { display: block; text-align: left; } /* H2 styles */ h2, h2 span, .pseudo-h2 { font-size: 2rem; line-height: 2.5rem; } /* H3 styles */ h3, h3 span, .pseudo-h3 { font-size: 1.75rem; font-weight: bold; line-height: 2.25rem; } /* H4 styles */ h4, h4 span, .pseudo-h4 { font-size: 1.5rem; font-weight: bold; } /* H5 styles */ h5, h5 span, .pseudo-h5 { font-size: 1.25rem; font-weight: bold; } /* H6 styles */ h6, h6 span, .pseudo-h6 { font-size: 1rem; font-weight: bold; } details.hamburger-bun { box-sizing: border-box; /* include border and padding in the overall height and width of the element. */ margin-left: auto; margin-right: auto; width: 98%; } details.hamburger-bun summary.hamburger-patty { background: #edf2ff; border: 3px ridge blue; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: block; margin-bottom: 1.125rem; margin-left: auto; margin-right: auto; margin-top: 1.125rem; width: 96%; outline: none; padding: 15px; } details summary > * { display: inline; /* Keeps the content next to the arrow marker when Nesting a block-level element (e.g., heading, image) inside the summary */ } /* Eliminates the italic formatting for text within the ADDRESS tags. */ ADDRESS { text-decoration: none; } ABBR, ACRONYM, /* depreciated in XHTML */ .abbr, .help { border-bottom: 1px dotted #333; /* border-bottom: 1px dotted #666666; */ color: #00ff00; cursor: help; display: inline; font-variant: none; /* Some browser put ABBR text in small caps */ /* text-decoration: underline; */ } /* Horizontal rules */ /* All the attributes for HR were deprecated in HTML 4. */ /*

*/ HR { margin-top: 2.2rem; margin-bottom: 2.2rem; margin-left: auto; margin-right: auto; border-width: 0px; } hr.pb { border: none; border-bottom: thin solid; margin-bottom: 1rem; } /* For psychopathia_sexualis */ /* Text-align: center */ .centext, #pg-footer div.agate, #pg-footer div.secthead, #pg-footer #project-gutenberg-license, .xhtml_center, #pg-header-heading, #pg-footer-heading, /* Layout containers */ .lg-container-b, .lg-container-l, .lg-container-r { text-align: center; } .displaynone, /* placeholder entry */ /* .x-ebookmaker hr.pb and.covernote are used in psychopathia_sexualis */ .x-ebookmaker hr.pb, .covernote { display: none; } .clearboth, /* placeholder */ /* "clear: both" in psychopathia_sexualis */ div.pbb, .chapter, .section .x-ebookmaker .lg-container-b, .x-ebookmaker .lg-container-l, .x-ebookmaker .lg-container-r { clear: both; } .breakbefore /* placeholder entry */ /* Page breaks and chapters in psychopathia_sexualis */ div.pbb, .chapter, .section { break-before: always; } .no-break /* Venus in Furs */ { page-break-before: avoid } .strong /* placeholder entry */ /* bold text in psychopathia_sexualis */ #pg-footer div.secthead, #pg-footer #project-gutenberg-license, #pg-header-heading { font-weight: bold; } /* display: block */ .displayblock /* placeholder */ /* bold text in psychopathia_sexualis */ #pg-header div, #pg-footer div, .xhtml_center, #pg-footer li, .x-ebookmaker .linegroup, .x-ebookmaker .covernote { display: block; } .x-ebookmaker .covernote { visibility: visible; } .fourletterstall { display:block; margin-top:4rem; } /* Highlight depreciated elements in red */ /* BASEFONT, BIG, CENTER, DIR, FONT, FRAME, FRAMESET, ISINDEX, MENU, NOFRAMES, S, STRIKE, TT, U { background: red; color: white; } */ /* HR.end, HR.three-hash-tags, HR.book, HR.chain, HR.chain-pb, HR.three-hash-tags, HR.chain-pb, HR.knotted_rope, HR.lion, HR.fish, HR.crop, HR.redline, HR.blackrose03, HR.nyt, HR.dragon, HR.dec15, HR.dec20 */ /* HTML */ /* Internet Explorer for Windows does not support the element that should be used for proper markup of abbreviations but even though IE ignores the element itself, other elements nested in the work fine. Wrap the content of the with and set its title and class attribute so the tag behaves like it should. */ /* @@@ Essential Page Elements (end) @@@ */ /* @@@ Pseudo-Class Selectors : @@@ */