/* ==== START OF CB MASTER EXT STYLE SHEET (MSS) ============================ ---------------------------------------------------------------------------- @140908: XXXXXXXXXXxxx re FP2000 problem: Commented out ALL: - items disabled merely by zz, xx etc - earlier sames - eg font-family below a font-family in same rule. =============== .aaSee-Alsos--SEE-NOTES-file { } .aaToC--CONTENTS-of-this-file { } ========== CONTENTS =========== GEN - Abbrevs. Do pre upload ... SEE cb.css NOTES.{TX do not, do, BDS - SEE elsewhere - !html-tips.txt MISC/PENDING BODY: font-family x x, body-bg-col-white, bg-image-first, serifs, non-serifs, first-line see IHEADER PTOC, PTOCB HEADINGS h1, h2, h3, h4 ... h2gap family hdgs-red strap divREstreet LINES - hr, hr-red, .line, line-snow LISTS - ul, ol, bullet-out, bullet-blue-3d, bullets , ol-upper-alpha ... infosources, redhi, quote, blockquote, title, ExtGT, back arrow, footnote-no-in-text see IFOOTER.TXT -------------------------------------------------------------------------------- RE =Info on specific pages/groups of pages - A-Z by page name : eg Act HOEO (defunct), NEO... multi-cat Media USOI, Whats new: Newpage (rem RES =a RE but only re Section of a page - eg a div) INTERIM CHANGES End of MSS End of Contents. */ .aaaMISC-PENDING-XX { } /* ------------------ MISC / PENDING-XX ------------------------------------- */ /* table ( background-color : #FEFF2B; ) */ /* p:first-letter { Expt from TS F1 WDC. font-size : 300% ; float : left ; vertical-align : top; } */ /* strong {font-weight : bold; font-color: #0000ff;} fails xx */ /* was paragraph styles: --------------------------------------- */ /* was character styles: ----------------------------------------- */ .aaBODY-eg-bgc-margins{ } /* -----------BODY-(TD TH)-------------------------------------------------- */ body { /* @010904: BGC: White (#FFFFFF) is FP's default. Ca 30% of cb pages are white. So make white default, or use ivory etc? Avoids need for (body class=bgc-white) Takes precedence over (body bgcolor=), so override by putting a bgc in head or using a class. (TD added to selector @040904 (recomm of TS style checker re NN4), but removed @0509 ) */ /* background-color : white ; */ background-color : #FFFFF0 ; /* FFFFF0 = Ivory */ background-color : #F8F8F8 ; /* EFEFEF & lighter = 'www.donations' gray, Expt 011108+ */ } /* body { margin-top : 0 } */ /* margin-top 0 as per F1 WDG @140804 */ /* h1 {color: 000000; font-size : 190%; font-family: arial, helvetica; font-weight: bold; margin-bottom: .5em;} changed style to match iestyle.css */ /* body {font-family : 'courier new', courier, monospace;} */ /* body {background : #f8f2ff;} */ /* body {font-family: Verdana, Arial, Helvetica, MS Sans Serif; font-size : 80%; margin-top: 0px; margin-left: 0px; margin-right: 0px;} Off FP-SERK.CSS */ /* body, TD, TH { background : #f8f2ff; font-size : 12px; font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif; } */ .bgc-white { /* PURPOSE: Allows global change eg to Ivory or ChComm lavender, or an image? Started @220804. Converted all site @230808. (Was .body-bg-col-white) USAGE: (body class...) (& ok for div, blockquote?, table? etc prob). USED IN: =default bg color in FP and on Bags (ca 50% of pages @230804). ! Beware if instead use it in (span class...) immed after (body) xxx */ background-color : #FFFFFF ; } .bgc-ivory { /* PURPOSE: For "paper", easier on eyes than white. USAGE: (body/table/div ...) USED IN: Eg table_HOEO, table_Media. =ca pale cream? ! Also may use ivory as default bgc in body anyway. */ background-color : #FFFFF0 ; /* FFFFFF0 = ivory ! Isn't one of the 16 colors so TS advises use # */ } .bgc-lavender { /* @2508, @0309 is EAF1FD =ca lavender. Prob from CharCom site. Chosen for Law_: divREstreet (in 10 TDs) & .doc page - in (body). USED IN: =blue with hint of pink, pale mauve. Dining room at H. */ background-color : #EAF1FD ; /* BACKGROUND-COLOR : Yellow ; */ } .bgc-blue-pale { /* Yet to use xx. */ background-color : #F0FFFF ; /* F0FFFF used as REmedia bgc */ } .bgc-gray { /* Yet to use xx. From www.charity-donation-guide bg - 011108 Eyedropper: says is #e8ece8 / #f0ecf0 / #f0f0f0 FP dropper: same, and can drag area to get #efefef */ background-color : #EFEFEF ; background-color : #F0F0F0 ; background-color : #F8F8F8 ; /* */ } .bg-image-first { /* XXX ....TO FINISH !!! DIY jpeg in PI v3.02SE. Class so named as this was our first background image. PURPOSE: Background image - eg body, div, table? .... =re background image: Can alter path, filename etc, and hide. !USP USAGE: (body class=...). USED IN: About_us__, Whats_new__ @200804. (NB - rem this image used in ptoc too (div) until c @010908.) */ background-image : url(images/page/bgd-1stpi302.jpg) ; } /* MASTER re MARGINS :- ------------------------------------- See: Weblinks_, .infosources in div, .divREstreet, .strap in h1/h2, Index_ in div, .h2gap-minus ... Page body: L and R are 10px auto. T and B are 10 or 15? May need padding adustments - eg 10 10 10 10... (10 to 20). */ .margin-LR-bleed { /* Started @230804. PURPOSE: To bleed any colored bg to edges, eg strap headings. USAGE: (div class...) [& (body class...)?] XXXXX USED IN: Index__ (where had mt and ml as 0 - re top blue table as bodge).. links__ */ /* margin-top : 0px ; */ margin-right : -10px ; /* margin-bottom : 0px ; */ margin-left : -10px ; /* padding : 10px 10px 10px 10px ; */ } .aaaToFinish--table-facts-XX { } .bgc-table-facts { /* Started @060904xxxxxxxxxxxxxxx TO FINISH ... ########## PURPOSE: std bg color for factual tables, esp Char_shops__ page. Initially using pale green color ... (Was .table-facts) USAGE: table class=... USED IN: eg Char_shops__ x4 (prices, hours ...) =DDFFDD green on bgc-lavender. (Initially used D8FFE0 (is system bgc)) Also used E6FFF2/0 (=lighter) - eg Law regs snc__ page */ background-color : #E6FFF2 ; /* zzBORDER-RIGHT : green 5px dotted ; */ /* @240808: REVEAL! by BORDER-RIGHT above */ } .aaBODY-font-family-etc { } /* ---------------- FONT FAMILIES ... --------------------------------------- */ body, table { /* Serif = html default, so don't need to specify it. font-family : 'Times New Roman', 'Times Roman', Times, 'MS Serif', Serif ; */ font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; } /* REVAMP: Above done @240808 to expt with non-serif on all site XXXX */ /* @010908 added table above - expt XXX Ensures that if just change fonts above, body AND table changed together. MASTER of other locations for font-family data: @110908 - h1 to h4 below - (homepage__: @110908 - converted it so it relies 100% on MSS - phew. - (jumble__: @110908 - converted it so it relies 100% on MSS (for font-family, size and line height). - (not in SSIs prob - any in menu_data.js ? XX - etc? XXX */ .Fserifs { font-family : 'Times New Roman', 'Times Roman', Times, 'MS Serif', Serif ; } .Fnon-serifs { font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; } /* Started @180804. (Was called .nonSerifs) +See BODY eg fonts. USAGE: (p class=...) etc. USED IN: Index_ */ /* .nonSerifs a { font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; font-size: 80% } */ /* @1808: Expt: "nonSerifs a" tried on a ptoc - fine. */ /* code {font-family : courier new, courier; font-size: 115%; } from SERK.CSS */ /* body {font-family : courier new, courier; font-size: 12; } orig from SERK.CSS */ /* our Milonic menu_data.js uses: fontfamily="Verdana, Tahoma, Arial"; */ /* body {font-size : 16; font-family : Times New Roman, Times Roman, Times, MS Serif, Serif;} */ /* body { background-color : Silver; } */ .aaBODY-font-size { } /* ----- FONT-SIZE, STYLE , WEIGHT, ... ------------------------------------- */ /* FONT-SIZE:- ! Rem default is vs body size, but eg if in h2 is different (as is relative inline). Expt - changed names of 1 or 2 to "f-size" (XX) */ /* font-size: Master and 1. body: */ body , table , h5 { /* ZZfont-size : 10pt ; */ font-size : 12px ; /* RE ABOVE: XXXX expt ca @250808: Provisionally permanently changed all site to use non-serif. (just by font-family in body above) Size fine in FP Preview and IE. But too big in (FP Normal and) OperaUSB - ouch. (& what re Firefox? xx) - unlike Charity Commission site. So seems must specify size (vs rely on default) if only for non-IE users. POINTS: 10pt seems IDEAL - prob equiv of 12px 12pt is too big =default? (or else 14pt is) PIXELS: 8px (=66.666% of 12px) 10px a bit too small (=83.333% of 12px) 12px seems IDEAL 14px is slightly too big 16px seems ca same as yesterday's Opera (too big) Prob is default. Prob better to use pixels ie px (vs points). SEE ALSO: HEADINGS section below - currently gives absolute values, and uses points - ? better if do relative to std (by %), && use px if ever absolute. XXX ? try Screen Ruler programs so can compare XX -so can choose relative % for each hdg 1-4 to match existing absolutes XXX @170908: Added h5 here. */ } /* font-size: 2. tables: */ /* table {font-size : 12px;} */ /* 12px line to left was there @280808 */ table { /* font-size : 12px; */ } /* @280808: with non-serif: Seems need to add font-size to table as well as body: Not needed in table if FP Preview or IE6. But was needed by FP Normal & Opera 7.51. Now added table to body rule above instead */ /* MASTER re font-size items below: @280808: usage in ifooter.txt re Milonic ack smallprint showed these can be pointless, as name dictates/fixes size anyway. -Seems better just to use an inline style with this info, eg: [span style="font-size=:xx%"] Now convert all existing to this XXXX */ .font-size65pc { /* PURPOSE: If default, makes font size=1 (8pts, =66.6%). Ck: IE ok if 65 (but not 66 or 67). Opera ok at 65,66,67. (Was .font-size70pc) USAGE: eg [span class=...] USED IN: Regulators_ h2's x3 (eg "(a QUANGO)" ). prob also in ifooter.txt_ re Milonic ack smallprint */ font-size : 65% ; } .f-size83pc { /* PURPOSE: Makes font size=2 (10pts, =83.33%). ckd - IS 80 (IE), tho' Opera needs ca 83 (xx). USAGE: eg (span...) USED IN: Index_ */ font-size : 83% ; } /* ( Note: Font-size100pc is size=3 (12pts) =default ). */ .font-size115pc { /* PURPOSE: Makes font size=4 (14pts). ckd - IS 115. ==h3 hdg poss. USAGE: eg (span...) USED IN: To do xxx */ font-size : 115% ; } .font-size150pc { /* PURPOSE: Makes font size=5 (18pts). ckd - IS 150. USAGE: eg (span...) USED IN: SI_. To do xxx */ font-size : 150% ; } .font-size200pc { /* PURPOSE: Makes font size=6 (24pts). ckd - IS 200. USAGE: eg (span...) USED IN: SI_. To do xxx */ font-size : 200% ; } .font-size300pc { /* PURPOSE: Makes font size=7 (36pts). USAGE: eg (span...) USED IN: Index_, SI_. */ font-size : 300% ; } .aaBODY-font-decoration-weight { } /* ---------- font decor'n, weight ... -------------------------------------- */ em { /* Recommended to ensure all browsers display em as ITALIC. EM is ca a synonym for ITALIC. (see also 'strong' below - ca a synonym for BOLD - a similar issue). Beware: 'lorry' vs 'truck': BOTH need to be ckd if alter one XX */ font-style : italic ; /* background-color : olive ; Abandoned */ /* text-decoration : line-through ; */ } .font-weight-normal { /* PURPOSE: Makes it normal weight, overriding any bold, strong etc. USAGE: In Regulators_ case: (span...) USED IN: Regulators_: h2 bracketed info x3 (eg "(a QUANGO)" ) - @210804 */ font-weight : normal ; } strong { /* 'strong' is ca a synonym for BOLD. See 'em' above for explanation. */ font-weight : bold ; /* BACKGROUND-COLOR : Fuchsia ; Abandoned */ /* TEXT-DECORATION : line-through ; */ } .aaTEXT-align--ie-left-C-right { } /* ------- TEXT ALIGN ... --------------------------------------------------- */ .text-center, .text-center h1, .text-center h2, .text-center h3, .text-center p, h1.text-center, h2.text-center, h3.text-center, p.text-center { /* PURPOSE: Overrides (or attempts to) eg our default align-left of h2 and h3, eg to match media original, or if page hdg. +See .text-left. @220804: Added class h1/h2/h3 for media_ tables to force centering. @230804: Added h1/h2/h3.class for media tables to force centering, eg Wolves. USAGE: eg (h2/h3 class=...). Homepage_: (table class=...). Charities_: (td class...) re CC quote. USED IN: Originally only in media_ (in hx headings: h2/h3). Now GLOBAL. (Was called .centers, then .txcenter) @200804: Used it 8 times so far. */ text-align : center ; } .text-left { /* PURPOSE: Eg to override centering of h1, eg in Media_ articles. Was called '.left'. USAGE: (h1/x class=...). USED IN: @200804, seems no usages on the site. */ text-align : left ; } .aaCOLOR-eg-Black-Red { } /* ----- COLOR (=re text)---------------------------------------------------- */ /* +see background color */ .col-black, h1.col-black, h2.col-black, h3.col-black { /* PURPOSE: Will (attempt to) override any h1/h2/h3 page color, so matches original B&W. C=Color. (Was C-black). USAGE: eg (h2/h3 class=...). USED IN: Eg media_ , for hx headings in quoted text, eg ASA and SNC. */ color : Black ; /* color : #000000 ; */ } .col-blue { /* PURPOSE: See C-black. Started @240804. USAGE: SI_ */ color : blue ; /* color : #0000FF ; */ } .col-navy { color : navy ; /* color : #000080 ; */ } .col-bulletMS { /* == SERK square bullet via eyedrop ca indigo or pale navy.. Yet to use */ color : #686898 ; } .col-green , p.col-green { color : green ; } /* @061205: Adding p.col-green above solved bug in 'Char reforms' of only 1st line colored. */ .col-red { /* PURPOSE: See C-black. Started @210804. (Was c-red). Yet to use xx */ color : red ; /* color : #FF0000 ; */ } .col-silver { /* Eg for: rulers, Copyright_ page's h1 symbols, ... USAGE: eg (h1/hr class=... ). USED IN: XXXX */ color : #CCCCCC ; /* zzCOLOR : Yellow ; */ /* @240808: REVEAL! by COLOR above */ /* #CCCCCC=browser-safe, ca Silver (#C0C0C0) */ } .col-gray { color : Gray ; /* #808080 ; */ } .col-white { /* PURPOSE: See C-black. Started @240804. Eg if use reverse ? Yet to use xx */ color : white ; /* color : #FFFFFF ; */ } /* ------------- END of COLOR ----------------------------------- */ .aaHEADERS--ssi-header-shtml--SEE { } /* --------------See the SSI------------------------------------------------- */ /* HEADER =Master of header and footer pair */ .help-symbol { /* 031008 started. PURPOSE: Embellishes the Help symbol on headers & foooters. Question mark currently. USAGE: (span class="") around the symbol. USED IN: iheader, ifooter; Homepage's header and footer. So GT of 4. */ background-color : #0099cc ; color : white ; font-weight : bold ; /* font-style : italic ; */ padding : 0px 2px 1px 2px ; } .aaPTOC--ssi-page-headings-shtml--hdg-above-ptoc-SEE { } /* -------------- See the SSI ---100%---------------------------------------- */ .aaPTOC-FP-Webbot--hdg-above-ptoc-variable-DEFUNCT-SEE { } /* ---------and--See FP webbot variable: !page contents:---0%---------------- */ /* (Value="Contents of this page:" @200804) @201008: Eliminated it, so now DEFUNCT. */ .aaPTOC--page-table-of-contents { } /* --------------PTOC-------------------------------------------------------- */ /* PTOC = 'Page's Table Of Contents' PURPOSE: Most pages have a ptoc at the top. Good if ptoc is easily identifiable by border, bg color, ... USAGE: ' (div class=ptoc)' around UL/OL headings.----------- USED IN: All bar: c30% - eg scans, short pages. NB ! Doesn't affect tables - beware. ! list-style-image failing on ul (OK on ol) xx Now cured ? */ .ptoc { /* background-image : url(images/page/bgd-1stpi302.jpg) ; */ /* @240808: Expt REVAMP: commented out bk-image above XXXX */ /* Seems b-image fails once uploaded xx. */ background-color : #FAF0E6 ; /* border : 1px solid navy ; */ border-top : 1px solid navy ; border-right : 1px solid navy ; border-bottom : 1px solid navy ; /* zzBORDER-BOTTOM : 1px dashed navy ; */ /* ! reminder of margin-bottom gap */ /* @240808: REVEAL! by dashed BORDER-BOTTOM above [can disable eg by zz preface] */ border-left : 1px solid navy ; /* list-style : none; */ /* list-style-image : url(images/page/arrowsx2orange15x13_aaz.gif); */ /* list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif); */ /* list-style-image : url(images/page/bullet_diamond_f.gif); */ /* ! See ul.ptoc expt above */ color : navy ; padding-top : 1px ; padding-bottom : 10px ; /* marXgin-bottom : -20px ; */ /* negative margin-bottom (eg-20px) to give suitable GAP above c41px h2 etc */ margin-bottom : 32px ; /* m-b c40px eg for Act_intro (para text first) */ } div.ptoc ul { /* PURPOSE: In any [div] block, if a class=ptoc, and then a ul list, apply the following : */ /* = list-style-image : url(images/page/bullet_diamond_f.gif); */ list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif); /* font-style: italic; */ /* = font-family : impact; */ /* font-weight : normal; */ } div.ptoc ol ul, div.ptoc ul ul { /* PURPOSE: Defines ul sub-bullet. */ list-style-image : url(images/page/bullet.gif); /* = font-family : "Courier New", Courier, monospace; */ } div.ptoc ol, div.ptoc ol ol, div.ptoc ul ol { /* Added @060804 eg re law page because of a 'bug': "ul ol" was giving 3d bullet (not ol nos) */ list-style-image : none ; } div.ptoc ol ol ul, div.ptoc ol ul ul, div.ptoc ul ol ul, div.ptoc ul ul ul { /* Xpt @170804+ 4 combinations. This deals with sub-sub bullets */ list-style-type : disc ; list-style-image : none ; } div.ptoc ol ol ol ul, div.ptoc ol ol ul ul, div.ptoc ol ul ol ul, div.ptoc ol ul ul ul, div.ptoc ul ol ol ul, div.ptoc ul ol ul ul, div.ptoc ul ul ol ul, div.ptoc ul ul ul ul { /* Xpt @170804+ 8 combinations */ /* MASTER: So ul bullet sequence now is: 3d, square, disc, circle. */ list-style-type : circle ; list-style-image : none ; } /* IDs ='#xxx' ------------------- Expt @20-07+ Yet to use */ /* see HTMLwk p520+ */ /* #ptoc { background-image : url(images/page/bgd-1stpi302.jpg); */ /* list-style-image : url(images/page/arrowsx2orange15x13_aaz.gif); */ /* list-style-image : url(images/page/bullet_diamond_f.gif); */ /* list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif); */ /* } */ /* div#ptoc { / list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif); / list-style-image : url(images/page/bullet_diamond_f.gif); } */ .aaHEADINGS-eg-H1 { } /* ----------------------HEADINGS =Hn --------------------------------------- */ /* @240808: REVAMP: changed bold to normal for h1,h2,h3,h4 as expt XXXX */ /* h1 {font-size : 36;} */ /* h1 {text-transform: uppercase; text-align : center ; font-size : 36px; font-family : 'Times New Roman', 'Times Roman', Times, Serif; font-weight: bold;} */ h1 { text-align : center ; /* font-size : 36px ; */ font-size : 30px ; /* XXX @301105: Expt - reduced 36 to 30px */ font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; /* ZZfont-weight : bold ; */ font-weight : normal ; } h2 { text-align : left ; font-size : 24px ; /* font-family : 'Times New Roman', 'Times Roman', Times, Serif; */ font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; /* ZZfont-weight : bold; */ font-weight : normal ; margin-top : 41px ; /* Until @2808: m-t 41px was in classes .h2gap and .h2gap-BDS. Now trying globally. 41px =(2 x line-spacing of 19px) + 3px +SEE H3 - has similar margin-top system. */ /* BORDER-TOP : dotted 4px #3366FF ; */ /* BORDER-LEFT : solid 1px #0000FF ; */ /* 0000FF = aqua */ } /* H2 :- See below re .hg2 and .hg2BDS etc (to give margin-top spacing). */ h3 { text-align : left ; font-size : 18px ; /* font-family : 'Times New Roman', 'Times Roman', Times, Serif ; */ font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; /* ZZfont-weight : bold ; */ font-weight : normal ; /* !!!! margin-top =xpt @140804+ eg 36px, 30px (or x%?) xxx Ck all pages to remove (br) and (p) (/p) - done @1408 (134 h3's on 28pp). @20-08: ! Beware, eg USOI_ net searching h3's: margin too big xxx So need say opt-out classes as per H2 below xx Doing similar things to H2 @190804+ - see below xx */ margin-top : 30px ; /* 30px =(1.5 x line-spacing of 19px) + 1.5px. */ /* background-color : blue ; */ } h4 { /* @030904: Changed from 14px to 16px (=default body) USED IN: @020804: used ca no h4's yet. @030904: used in TFA_ ("Qs"). */ text-align : left ; font-size : 16px ; /* font-family : 'Times New Roman', 'Times Roman', Times, Serif ; */ /* This was sole hdg in Serif. */ font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; /* ZZfont-weight : bold ; */ font-weight : normal ; font-style : italic ; /* 1211'09 italic added, as too similar to h3 */ margin-top : 28px ; } /* Improve Times list eg H4week p141 xx */ h5 { /* Started @170908: XXXX expt For hdgs which are in body text size. Had just been emboldened black. USED IN: Wandsworth Oasis__ Font-size: added h5 to 'body, table' size rule above. color: added h5 to 'h1, h2...' rule below. So color is sole difference vs body so far. Values below are all/ca all default values anyway. Ensures get what want. */ text-align : left ; /* font-size : 12px ; */ /* font-family : 'Times New Roman', 'Times Roman', Times, Serif ; */ font-family : Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif ; /* ZZfont-weight : bold ; */ /* font-weight : normal ; made bold 1211'09 */ font-weight : bold ; /* margin-top : 28px ; */ } h1, h2, h3, h4, h5 { /* @010904: Red was default for 50% of site. So adding it to the elements saves having to use .hdgs-red on each and saves showall class='s. Then can override on a per-page basis. @170908: added h5. Could transfer font-family of all Hn to here XX */ color : red ; } .aaHEADINGS-gaps-eg-hgap-families { } /* ----------- HEADINGS : H2GAP families --------------------------------------- MASTER INFO re h2gap, h2gap-BDS etc families:- Started @190804. (Were called: .hg2, .hg2BDS, .hr-hg2BDS, .hg2min, .hg2nil, .hg2minus.) PURPOSE: Re VERTICAL SPACING between H2 headings etc and text etc above. Previously used nothing, or (p) (/p) and/or (br)'s as one-offs - messy. h2gap allows global control . Naming ideas: .h2, hg2, hdg2, h2gap/spacing/VS/top/mt/top ... (xx) Problems: If an hr present immed above h2 - ca solve by adding hg2 to hr instead. if eg a ptoc immed above - ca solve by using h2min instead. if h2 is in a div [eg a usoi section] - ca solve by adding h2gap to the div instead ... ... and hence created ...min and ...nil variants. Could add other items eg margin-bottom ... xx? (See also eg H2 element defns.) (See also H3 - we'd done similar things to h3 defn 5 days ago (forgot ! xx) ) Arbitrary whether apply spacing in: - MSS's H2 element defn (as per h3 above) =simplest. Initially felt it might be too wide and unpredicable. But switched to it @2908+. - or body of chosen pages - by "(body class="h2gap-BDS")", with opt-outs - my choice until @2908. - and/or indiv h2's - by "(h2 class="h2gap")". 'Weird' disclosing coloring etc @240804 :- dashed = BDS class in body (h2 or hr) dotted = indiv class added to an indiv h2 tag (none created yet for hr). h2's - green, lime, black, red hr - yellow (== wooden ruler) @290804 - summary :- m-t gap in h2 and h3 defns in MSS works fine for most gaps, esp if hdg below body text (& not using hr's). Exceptions:- (Tools: GAP, MIN, NIL, MINUS: To reduce: NIL MINUS. To Increase: GAP. To reduce or increase: MIN) h1 immed above h2 - can use eg .MIN or NIL (or ! MINUS if strap) h2 immed above h3 - can use MIN or NIL ptoc etc above h, needing less gap - ditto !! start of div &/or table above h : (eg as a RH graphic or USOI section) - use NIL in h (or MINUS if strap etc), and - use GAP in div or table (or if class= in use, use P-nbsp-P) hr's now mostly phasing out (using h-bt-line instead). ie some DEFUNCT ! margin is NOT inherited (vs eg color and font-size). */ /* .h2gap-BDS h2, / .h2gap h2, / h2.h2gap, hr.h2gap, div.h2gap, table.h2gap ( ) */ .h2gap, p.h2gap { /* (@300804: Was: ".h2gap-BDS h2, .h2gap ( )" ) (1) ".h2gap-BDS h2" :- =Body Demon Seed PURPOSE: Formerly used (versus lots of .h2gap's in indiv h2's) if most/all h2's need a gap above, so then you only have to opt-OUT a few. USAGE: [body class=...], then all the page's h2's adopt the settings. USED IN: Disclaimer_, About_us, Acts_regs. !! @290804+: h2 defn in MSS now gives the same gap. So class will be used rarely or never. xx @0809: .h2gap-BDS not used anywhere on the site. So we removed -BDS variant here. (2) .h2gap (Was called ".hg2") :- Started @190804 for USOI_ eg ca 7 h2 hdgs eg Govt x3, + 2-3 hr's instead (if above h2's). (So removed existing spacers [p-nbsp-p's and (br)'s] above each.) USAGE: ([[h2]] / hr / div / table class=...) ie put in each appropriate hr etc = opt IN. NB: Only meant to affect the object, not any children (eg with div / table) - ie intended as an EC. ! @290804+: h2 defn now gives the margin-top gap above all h2's, so don't need this class for h2's. USED IN: USOI_, Charities, Char_shops (incl USOI div!), Word_help, Probs_regs, Act_intro, Collect_stats. @2908+: Removed from most of these. (3) p.h2gap : Started @060904. for Watchdog_ (para immed under top h1) Wouldn't work until added "p" pre .IT */ margin-top : 41px ; /* margin-top: @210804: 41px seems best. Ensure matches m-t in h2 defn (xx) */ } .h2gap { /* For Discloser (different one to ...-BDS sibling) : B-L OK for hdgs, but need B-T if it is in an hr. */ /* border-left : dotted 1px green ; */ /* ZZborder-top : dotted 1px green ; */ /* @240808: REVEAL! by BORDER-TOP above */ } /* .h2gap-BDS h2 ( /For Discloser. This -BDS phased out @0809. / border-top : dashed 1px green ; ) */ .h3gap { /* PURPOSE: Gives same gap as h3 element. Analogous to .h2gap USAGE: Eg (div/table? class...) if h3 at top of a table: Then, use h-gap-nil on it, and add .h3gap to div. Could limit selector eg h2/h3/div/table.IT xxx?. USED IN: Started @030904 for Char_shops__ */ margin-top : 30px ; } h2.h2gap-min, div.h2gap-min, table.h2gap-min, h3.h2gap-min, hr.h2gap-min { /* tight, min, narrow, small, ... PURPOSE: For h2, h3, div etc when normal vertical spacing is too much - eg under ptoc ... or h2 immed below an h1. So allows use of .h2gap-BDS in body, then opt-OUT 1 or 2 objects with this class. USAGE: eg (h2/h3/div class=...) - ie same usage as h2gap. !! .h2gap-min overruled by h2gap-BDS, so had to make it h2.h2min (or could try as ID?). USED IN: Disclaimer_ (h2 x1) xx */ margin-top : 20px ; /* Later realised m-t of 20 is ca same as std line-spacing of 19px. */ /* BORDER-TOP : dotted 4px lime ; */ /* BORDER-RIGHT : dotted 4px lime ; */ /* BORDER-LEFT : dotted 2px lime ; */ /* @240808: REVEAL! by BORDER-LEFT above */ } .h-gap-nil h2 , .h-gap-nil h3, h2.h-gap-nil , h3.h-gap-nil { /* .h-gap-nil: Nil, zero, none ... PURPOSE: Ensures that: (1) if it's in ca (body), all h2/h3 have no gaps (eg if using hr-h2gap). (2) given that h2 and h3 in MSS now provide gaps, it results in no (nil) margin-top of an indiv chosen h2, ie opt-out. Use eg if in: table, div, blockquote? @280804 - ! added h3.h-gap-nil for eg Char_shops. @020904: added ".h-gap-nil hx" pair. (hence renamed it from h2gap-nil to h-gap-nil) USAGE: (1) (body/... class=...) (2) (h2/h3 class=...) - similar usage to min above. USED IN: HOEO_intro "List of ..." sample, etc. */ margin-top : 0px ; /* BORDER-TOP : dotted 4px black ; */ /* BORDER-RIGHT : dotted 4px black ; */ /* BORDER-LEFT : dotted 2px black ; */ /* @240808: REVEAL! by BORDER-LEFT above */ } h2.h-gap-minus, h3.h-gap-minus { /* (Was h2gap-minus) Minus, neg(ative) ... xxxxxxxx xxxx USAGE: (h2/h3 class= ...) etc. USED IN: Law_ [as .strap in use] re: (1) 100% closing h1:h2 gap at top, (2) USOI's h2. @140908: Ransack shows .h-gap-minus is still only in Law__, and is defunct there (is in comments). @280804: Yet to use with any h3's */ margin-top : -10px ; /* color : green ; font-style : italic ; */ /* border-top : dotted 4px red ; */ /* border-right : dotted 4px red ; */ /* border-left : dotted 1px red ; */ } .aaLINES-border-top--h-bt-line { } /* .h-bt-line h2, .h-bt-line h3, .h-bt-line div div, h2.h-bt-line, h3.h-bt-line, div.h-bt-line ( ) */ .h-bt-line h2, .h-bt-line h3, h2.h-bt-line, h3.h-bt-line { /* !!! Call it bits of: (hdg) h hx h2 h3 / hr / b-t bt / line bar / pseudo ... Hence: ! h-line ! h-bt-line (h-under-line) h-below-line line-on-h line-over-h line-above-h ... xxx PURPOSE: CREATES "LINE" ABOVE HEADING (PSEUDO HR). Possibly is a solution to perennial problem of h-gap when use an hr line above as well (Previously used hr's and .hr-h2gap-BDS etc - tedious...) Pros vs hr's: neat, simple ... Can add or delete instantly (vs hr's - must insert all, tho' can use display to hide). Cons vs hr's: Can't have 2 or 3 color stripes (hr ? allows via border-top and b-b). Can't alter width (always 100%). USAGE: (1) (body class...) or (body)(span class...) [or in page's top as "h2, h3 (xx ; yy) ] Can vary color, height, style. (2) (h2/h3 class...) - ie in indiv hdg(s). +REM STRAP i/c any conflicts (xx). +REM care re if hdg is in a div, table etc (xx) USED IN: (c) Expt started @290804 in Glossary_ */ /* margin-top - used for GAP - see MSS's hx defns for this. */ border-top : #AAAAAA 2px solid ; /* b-t size: raised from 1 to 2px as compromise. */ /* color: could use CCCCCC or darker or ... */ padding-top : 10px ; /* padding-top widens the gap between "line" and hdg text. */ /* BORDER-RIGHT : #aaaaaa 1px dotted ; */ /* @240808: REVEAL! by BORDER-RIGHT above [#AAAAAA is gray] */ } .h-bt-line-red h2, .h-bt-line-red h3, h2.h-bt-line-red, h3.h-bt-line-red { /* See .h-bt-line above - same except RED. Expt @300804+ eg in Media_Kosta where hgs navy. */ border-top : red 2px solid ; padding-top : 10px ; /* BORDER-RIGHT : red 1px solid ; */ /* @240808: REVEAL! by BORDER-RIGHT above */ } .h2-bt-line-red h2, h2.h2-bt-line-red { /* See .h-bt-line-red above - same except only affects h2's (not h3's). USED @300804 in Media_Kosta in (body)(span class=...) where hdgs navy. */ border-top : red 2px solid ; padding-top : 10px ; /* zzBORDER-RIGHT : red 3px double ; */ /* @240808: REVEAL! by BORDER-RIGHT double above */ } /* .h-bt-line-nil h2, h2.h-bt-line-nil, h3.h-bt-line-nil { =was @300808 */ .h-bt-line-nil h2, .h-bt-line-nil h3, h2.h-bt-line-nil, h3.h-bt-line-nil { /* PURPOSE: Supresses 1 (or some) "BDS" .h-bt-line's USAGE: (1) (div/etc class ...) or ! (2) In indiv (h2/h3 class...) USED IN: (@300804: Briefly tried in Kosta_ in div of table quote. Now done by .tableREmedia h). */ border-top : lime 0px none ; /* BORDER-TOP : fuchsia 1px solid ; */ padding-top : 0 ; /* BORDER-RIGHT : fuchsia 3px double ; */ /* @240808: REVEAL! by fuchsia BORDER-TOP & BORDER-RIGHT above */ } .gap-over-hr-h2 hr, hr.gap-over-hr-h2 { /* (Was ".hr-h2gap-BDS hr") :- PURPOSE: Pages where most/all h2's have an hr immed above each. ie re hr-h2 sequence. It affects the gap above/over/on the hr (rather than above the h2). USAGE: (1): (body class=...), then all page's hr's adopt settings. Typically paired with .h-gap-nil (eg Char_reforms @0309). ... then use ...min and ...nil to exclude (opt-out) certain hr's. (2): (hr class=...) @2508: added hr.hr-h2... , so can use in indiv hr's eg done in ASA_ . ... so "BDS" suffix not really needed ? xxx ... also could rename so h-gap not h2gap ? xxx USED IN: Help_, Char_reforms (h3!), Definitions_. Rarely needed. !! @290804+ class superseded in most cases by using BORDER-TOP "line" in h2/h3 xxx */ margin-top : 20px ; /* margin-bottom : -16px ; */ /* margin-top - in Help_, settled on say 20px. margin-bottom - expted with Help_ and settled on "-10 to -20px", say -16. @020904: Would it be better to ca remove m-b and adjust h2/h3's instead ? (now that h2 and h3 in MSS get default gap) Yes, doing xx */ /* COLOR : Aqua ; */ /* BORDER-TOP : 2px dashed yellow ! important ; */ /* If hr 4px: Use 1 or 2px (3px b-t yellow reduces red. 4px yellow hides red.) So seems yellow subtracts from red 1-for-1. */ /* zzBORDER-RIGHT : 40px solid yellow ; */ /* zzBACKGROUND-COLOR : Yellow ; */ /* @240808: REVEAL! by BORDER-R & BACKGROUND-COL above */ /* WIDTH : 90% */ } /* - - - - - - - - - - - - - - - - - - - - - - - - - */ .aaHEADINGS-colors--red-etc { } .hdgs-red h1, .hdgs-red h2, .hdgs-red h3, .hdgs-red h4 { /* PURPOSE: Makes headings red (etc). Use instead of "h1, h2, h3 (color: red)" embedded at top of a page. Pros: Can alter color (etc) globally in pages with this class. Red is our most common choice for hdgs. html Default is black. Instead of this class, could add 'red' to hx element (xx), so global, then overrule per page 1 by 1. Could call it "h-red" (xx). USAGE: (body class=hdgs-red). USED IN: Started @210804 in Help_, Acts_, Help_word_. */ color : red ; /* background : #FFB6C1; */ /* FFB6C1 - light pink */ /* border-right : dotted 3px red ; */ /* border-left : dotted 3x red ; */ margin-right : 13px ; /* m-r discloser above: indents RH end. */ } .h-navy h1, .h-navy h2, .h-navy h3, .h-navy h4, th .h-navy { /* For headings. Started @280804. */ color : navy ; } .aaHEADINGS-strap { } /* -------------Headings : STRAP -------------------------------------------- */ .strap h1, .strap h2, .strap-h3 h3, h1.strap, h2.strap, h3.strap, h4.strap, p.strap { /* @091205: xx ".strap-h3 h3" added re Weblinks page */ /* [ Was: .strap h1, .strap h2 ( ) - ie CE ] @0809: converted to CE-EC. Yet to use as EC (ie opt in) xx. Could create a .strap-nil ? (xx) Also added p.IT in case (xx) Ensure foreground color (ie text) is ok tho' (xx) =a DEMON SEED - see info at top. PURPOSE: For "strap" of background color behind eg headings. If used as "BDS" [ie CE], only affects h1 & h2. Pros: Hdgs stand out more, no need for hr's, allows reversing, adds color ... . Cons: Needs margin/padding adjustments if to bleed. Had to adjust margin and padding in .divStreet USAGE: (body class=strap) or (h1/h2/h3/h4/... class=...) USED IN: 1st used on LAW (+rem WEBLINKS pioneer). then in: VARIATIONS_UK, Regulators_. */ /* background : blue; */ background : #6894e0 ; /* ca slate-blue #6894eo off 1x1 gif */ color : #99ff99 ; /* margin : -10px ; */ /* Margins "-10px" so bleeds to edges of page */ /* @210804: Substituted 3x "margin-x" for margin, so we can use .hg2BDS for m-t for gaps above (otherwise it fails to have any effect). */ margin-right : -10px ; margin-bottom : 9px ; margin-left : -10px ; padding : 14px ; /* DISPLAY : none ; */ } .strap h1, h1.strap { /* PURPOSE: To avoid 5px white-space strip at top of page. */ margin-top : -15px ; } .aaLINES-eg-HR-snow { } /* ---------------- LINES --------------------------------------------------- */ /* +SEE border-top "line" expt with h2 and h3 above. */ hr { /* PURPOSE: Creates our own default HR across site, esp color and noshade. +rem: align, size (CSS=height ! ), noshade (CSS equiv is what ? xxx) ... bgcolor and border triplet from campus[1].css model (line 725) - cumbersome, but cures Opera shade OK eg in law_reforms__ */ width : 100% ; /* color : #FF0000 ; */ color : #CCCCCC ; background-color : #CCCCCC ; border : #CCCCCC solid 0px ; /* noshade ; */ /* display : none ; */ /* F1 WDC: display : block | inline | list-item | none */ /* seems 2px is html default @191205: We added height:2px to debug new 'images__' page */ height : 2px ; } .hr-col-red hr { /* PURPOSE: Gives a page RED lines (color [etc] can be changed), (and OK in Opera). (Was .hrRed) USAGE: (body class=...) & use hr (height: ...) in (style) at top if needed. USED IN: LAW_REFORMS__ (defn was embedded in it until @180804). 1st use of ".class_element" without first defining empty class (vs Demon Seed). bgcolor and border x3 from campus[1].CSS specimen. Cures Opera shade problem. */ /* @161205: Seems not used anywhere (xx) */ color : red ; background-color : red ; border : solid 0px red ; /* height : 4px ; */ /* Fail: padding-top : 10px; line-height : 100px; border : green; */ /* display : none ; */ } .hr-col-silver hr { /* & silver is current hr selector choice. (so why is this needed? xx) USAGE: (Body ...) See ...red above. USED IN: index_ */ /* @161205: Acks: hr not visible in Opera xx Expted - seems 'height' cures it. ? So also use height on hr and ...-red (xx) */ color : #CCCCCC ; /* background-color : #CCCCCC ; */ /* border : solid 0px #CCCCCC ; */ height : 1px ; } .line { /* @310704: Created for WHATS_NEW__ !!! 1st-ev such xpt - ie using CSS for a repeating IMAGE: !USP 'background-image' =workaround (seems no 'image:' available) (xx) We replaced (by Ctrl-H) x31+1 the following (below uses 4 attribs): FROM: (p)(img border="0" src="images/page/1x1blue_aaz.gif" width="100%" height="1")(/p) TO: (p)(img class="line")(/p) Moved to MSS. Could use elsewhere? eg instead of HR xx + Added local variation(s) to whats_new style section eg b-top white. PURPOSE: Gives dividing line as per hr, but using image. USAGE: (p)(img class="line")(/p) USED IN: WHATS_NEW__. */ background-image : url('images/page/1x1blue_aaz.gif') ; width : 100% ; height : 1px ; /* border : 10px solid green ; */ /* border : 0 ; */ /* border:0 commented out @040904 as TS prob frowned on 2 (border & b-b) in one rule. (xx) */ /* border-top : 1px solid blue ; */ border-bottom : 1px solid #aaaaaa ; /* display : none; */ } .line-snow img.line, img.line-snow { /* (Was called .line-snow-BDS) [ Was: .line-snow-BDS img.line ( ) ] @030904: Is syntax above correct? - with two classes !xxx 0809: Widened so becomes CE-EC pair. PURPOSE: Adds "snow" to top of ".line". USAGE: (body/span class...) or (img class...) Lines created by: (p)(img class="line")(/p) USED IN: See .line */ border-top : 1px solid red ; } .aaLINKS-LVHA--link-visited-hover-active { } /* ------- LINKS ------------------------------------------------------------ */ /* See W3C page's 'home.css' eg for inspir'n. */ /* Master info re the 4 A: items below: ! Rem the 4 ':x' items below have to be in the order: LVHA ca @010908: Now using border-bottom for (c) pseudo-underline: 1. This allows dotted and dashed options (etc) too. 2. Means 'underline' doesn't have to be same color as text above it. 3. Had to add text-dec to switch solid underline off. Relevants re 'text-decoration' are only underline (=default) or none. @250908: Reverted to conventional underline: Done by commenting out for a:l and a:v the 2 text-dec and border-bottom pairs =GT of 4. (and added QQ prefix) @090908: Added 4 new classes below: !USP a-link a-visited a-hover a-active PURPOSE: Re Help__ page: links - style - coloring guidance egs. - Means the egs always show automatically the true settings for the links. So only have to change them once (ie below). So reduces maintenance time/risk of errors. USAGE: by class= in a span USED IN: Help__ page. @011008: You have to specify 'text-decoration : underline' if you want u/l in Help page's eg's too, because, with a-link and a-visited, they don't automatically do underline by default of course (unlike 'a:'). Variations re links: None bar: lawh2h__ page : '.RElawh2h-ptoc-summary a:hover' rule etc so when hover: (1) font-size enlarges by % (2) navy background =(c) =uses Embedded styles. */ A:link, span.a-link { color : blue ; /* 090908: color above added for new .a-link class */ /* border-bottom : 1px blue dotted ; */ /* QQborder-bottom : 1px #389CFF dotted ; */ /* QQtext-decoration : none ; */ text-decoration : underline ; /* @240808 REVAMP: :link and :visited were empty @260808. Now expting with different 'underline' style: XXXX - dashed or dotted etc - paler u/line */ } A:visited, span.a-visited { color : maroon ; /* 090908: color added for .a-visited */ /* border-bottom : 1px maroon dotted ; */ /* QQborder-bottom : 1px #CC7798 dotted ; */ /* expt - maroon is my guess - ck XX */ /* QQtext-decoration : none ; */ text-decoration : underline ; } A:hover , span.a-hover { color : white ; background : Blue ; /* background : #E8E8FF ; */ /* background : #FFFF99 ; */ /* FFFF99 pale yellow, B-safe */ text-decoration : none ; /* font-weight : bold ; */ } A:active, span.a-active { color : red ; background : #FFCCCC ; /* FFCCCC =cPink, B-safe */ text-decoration : none ; } .aaLISTS-UL-OL-etc { } /* ---------------LISTS = UL (eg bullets), OL ... -------------------------- */ ul { /* (html default is type:disc.) Could alter image to become colored XXXX */ list-style-image : url('images/page/bullet.gif') ; /* body ( list-style-image : url('images/page/bullet.gif'); ) */ } ul li { /* @261105 added m-l (xx) : Default is ca 4 chars in. -1em makes bullets nearly justified */ margin-left : -1em ; } ol li { /* @261105 added m-l (xx) : */ margin-left : -1em ; } ol ul, ul ul { list-style-image : none ; } ol ul, ul ul { list-style-type : disc ; } /* F1 recommends image :none */ /* ul ul { list-style-type : circle; } */ /* ul ul { list-style-image : url(images/page/bullet_diamond_f.gif); } */ /* ol ul { list-style-image : url(images/page/bullet_diamond_f.gif); } */ /* @260704 from TS F1: list-style-image eg. Expt xx see Html4-week p522. ... =our 1st 'compound' style Failing !!! xx */ /* ul.ptoc { list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif); } */ /* .LIST-OUTDENT family :- . . . . . . . . . . . . . . . . . . . . . . . = a "Demon Seed" (see M.info). (Was .bullet-out until @0609, then .list-out) PURPOSE: Reduces indent of lists (default was wasteful) - ie outdents them. Also affects all child levels. All lines of list moved out (incl line 1). USAGE: (body class...) - Was in ul's as (p class=pbullet) per li (GT of ca 20) -groan */ /* margin-left : -17px ; ! now (@270704) is empty, dummy sown in (body class=...) as seed USED IN: WHATS_NEW @230604. @0609: now done embedded. */ .list-outdent ul li { margin-left : -1em ; } .list-outdent ol li { margin-left : -1em ; } .ul-bullet-blue3d ul, ul.ul-bullet-blue3d, .REsite-index ul { /* PURPOSE: ="ulbb3d": Allows changing of image & its path/filename, by changing only once in this M. location. ( BDS bit was: .ul-bullet-blue3d-BDS ul, .REsite-index ul ( ) ) @080904: Combined ulbb3d and ulbb3d-BDS families into one CE-EC selector. Yet to test that all works ok !!xxxx (1) .IT ul :- (Was called .ul-bullet-blue3d-BDS) USAGE: (body class...) or [most:] (body)(span class=...) USED IN: HOEO_INTRO (Bodge @180804), About_us etc. (2) ul.IT :- USAGE: (ul class...) =opt-in USED IN: HOMEPAGE_ - charity list table @130704+. */ list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif) ; /* LIST-STYLE-IMAGE : url('images/page/bullet_diamond_f.gif') ; */ } .ul-bullet-blue3d ol ul, .ul-bullet-blue3d ul ul, ul.ul-bullet-blue3d ul { /* PURPOSE: Ensures sub-bullets and sub-subs etc use ordinary bullet. USAGE: automatic. (Was .ul-bullet-blue3d-BDS) @080904: Added "ul.IT ul" - Yet to ensure it works ok xx */ /* list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif) ; */ list-style-image : url('images/page/bullet.gif') ; } .ul-bullet-diamond-mauve ul , ul.ul-bullet-diamond-mauve { /* Class started @060904. "f", so Image prob from Focus Web Graphics CD. USAGE: (1) (body/span/div... class...) [yet to try xx] mucks up ptoc xx or ! (2) (ul class...) [ Had been (ul imagesrc="images/...") in TFA_ ] USED IN: TFA_ in ptoc's sub-ul (! Beware: seemed to need "...li" to activate [poss due to ptoc] or "! important") Then this image also used in each of the 7 Q/A h4 hdgs. Acts/Regs_ : (span class...) after ptoc. Flyer_late03: (body)(span...) USE MORE (but sparingly, carefully) xxx ! Beware: It was pushing 1st line to RHS so any further lines wrap under : So either reduce image size [esp width] (native=width25,height12) - duly done @0609 in PE3SE (cropped to 12 by 12). or amend indent or only use on 1-line bullets (= was our remedy). ! +see ol ul and ul ul selectors above re sub-bullets ! ! ! Beware: problems with std bullet supressing diamond XXX */ list-style-image : url('images/page/bullet_diamond_f.gif') ! important ; } .ul-bullet-diamond-mauve ol ul , .ul-bullet-diamond-mauve ul ul , ul.ul-bullet-diamond-mauve ul { /* PURPOSE: Ensures sub-bullets and sub-subs etc use ordinary bullet. May not yet have debugged re if a sub-ol - but seems ok ( xx). USAGE: automatic. */ /* list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif); */ list-style-image : url('images/page/bullet.gif') ! important ; } .REabc1 div.ptoc ul.ul-bullet-diamond-mauve { /* (c) ! ! EXPTS RE WS7 PM/LM equiv to align ptoc LIST 2nd+ lines (Q/As) perfectly (only 3rd of 7 Qs wraps. Not really needed, but nice expt..) : USAGE: auto, assuming items exist as above in selector (xx) ! Includes 3 classes in selector - we assume this is ok (xx) USED IN: TFA_ 's ptoc */ /* padding-left : 0px ; */ /* LIST-STYLE-POSITION : inside ; */ text-indent : -26px ; margin-left : 66px ; /* Seems margin-left default is 40px for ul !! Perfect aligning here is T-I: -26 and M-L: 66 (ie 40+26) */ /* zzBACKGROUND-COLOR : #FFFFFF ; */ /* zzBORDER-RIGHT : #D034FF 3px dotted ; */ /* @240808: REVEAL! by BORDER-RIGHT dotted & BACKGROUND-COL above; */ } .ol-upper-alpha ol, ol.ol-upper-alpha { /* (Was simply .IT until @030904) PURPOSE: Re ordered lists (ol) - to give A. B. C. etc. USAGE: (1) (body class...) - yet to use this way (xx) (2) (ol class...) [+rem (ol type="A")] [ rem '(ol start="3")' etc] USED IN: LAW_ page re OL: A. B. C. */ list-style : upper-alpha ; } .list-gaps ol li, .list-gaps ul li, ol.list-gaps li, ul.list-gaps li { /* PURPOSE: With ol and ul lists, gives a one-line gap between each "li" item, so it's easier to read - eg if li's are lengthy or important ... USAGE: (body/div/... class...) or (ol/ul class...) USED IN: W Lancs DC, Char_cards etc. */ margin-bottom : 19px ; /* BORDER : fuchsia 1px solid ; */ /* BORDER-RIGHT : fuchsia 2px solid ; */ /* @240808: REVEAL! by BORDER-RIGHT above */ } .list-gaps ol ol li, .list-gaps ol ul li, .list-gaps ul ol li, .list-gaps ul ul li, ol.list-gaps ol li, ol.list-gaps ul li, ul.list-gaps ol li, ul.list-gaps ul li { /* PURPOSE: Ensures sub-bullets have no gap between each "li" item. USAGE: automatic. USED IN: Help_ */ margin-bottom : 0px ; /* BORDER : fuchsia 1px solid ; */ /* BORDER-RIGHT : black 3px double ; */ /* @240808: REVEAL! by BORDER-RIGHT above */ } /* ol ul ( margin-bottom : 100px ) */ .aaRES-ie-RE-Sections-eg-usoi { } /* ----------------- SECTIONS eg in divs ------------------------------------ */ /* @080904+ calling "RES" - ie RE Section RES is for parts only, of potentially all pages ='horizontal' in analogy (vs RE for part/whole of a page but only some pages) = vertical in analogy */ .RESuseful-sources { /* PURPOSE: Identifies USOI Sections. (Was .infosources) USAGE: (DIV class=...) USED IN: USOI sections of: Chars_, Ch_cards, Ch_shops, Recycling_, FoI_, Law_, probs_regs. =GT of c7 +SEE .REuseful-sources */ /* Seems bgcolor fails on Opera xx */ /* background-color : #ADD8E6 ; */ /* ADD8E6 is ca slate blue */ /* background-image : none ; */ /* background : #ADD8E6 none ; */ background : #D1EAF1 none ; /* margin : 0px -10px 0px -10px ; */ /* 3x "margin-x" substituted for margin (@210804), so that h2's m-t gap works. .... */ /* A m-t was not included below. @310804: Expt - added m-t (51px) instead of p-nbsp-p @080904: Reduced M-T from 51 to 41 to match divREstreet */ margin-top : 41px ; margin-right : -10px ; margin-bottom : 0px ; margin-left : -10px ; /* padding : 10px 10px 10px 10px ; commented out @300804 */ /* Expt @300804 below : eg commented out p-t so h2's gap jumped div. */ padding-top : 10px ; padding-right : 10px ; padding-bottom : 10px ; padding-left : 10px ; } .RESstreet-div { /* PURPOSE: Std color-coding for Street law sections on any page, to differentiate from rest (esp H to H). (As per USOI_ coloring principle.) Same color also used in comparison table and SNC_ street page. (Was .divStreet, .div-RE-street, .divREstreet, .divRESstreet) USAGE: (div class=...) Could call (say) .divRElaw-street ? (xx) Bg-col moved to a new .bgc-RE-street. But then a problem re 2 classes in one div. So moved back here. Con: Margin and Padding settings needed so strap hdgs and div body background coincide. USED IN: Solely in: LAW_: street collections section AND snc_ sequence ! */ background-color : #EAF1FD ; margin : 41px -10px 0px -10px ; /* @3108+: 1st of 4 above gives gap as per .infosources and .h2gap */ /* MARGIN-TOP : 350px ; */ padding : 10px 10px 10px 10px ; } .RESstreet-bgc { /* (Was .bgc-RE-street, bgcREstreet, .bgcRESstreet) @2508 is EAF1FD =ca lavender. +see .RESstreet-div (does margins...). USED IN: Law_street (in 10 TDs) & .doc page - in (body). */ background-color : #EAF1FD ; /* BACKGROUND-COLOR : Yellow ; */ } .div-boxed { /* Expt @080904+: Generic, based on USOI and street pages. xxx USAGE: (span class=snc-sequence)(div class...) USED IN: snc__ and Act_1939__ l and r margins: negative, so bleeds to edge. */ margin-top : 41px ; margin-right : -10px ; margin-bottom : 0px ; margin-left : -10px ; padding-top : 10px ; padding-right : 10px ; padding-bottom : 10px ; padding-left : 10px ; } .RESsnc-sequence div.div-boxed { /* xxx USAGE ETC: See .div-box above */ background-color : #FAF0E6 ; } .aaSPANS-eg--s-redhi { } /* -------- SPANS ... ---------------------------------------------------- */ /* Esp spans of text (1 char+) eg colored, bold, italics, font-size, superscript ... Expt @280804+: Renaming some with prefix "s-" for "span" xx. */ .s-redhi { /* PURPOSE: In-text mega-HI-lite, orig in RED (ff0000). Ca equiv of bold-bold. 1 or 2 are larger font. Started @030804. (Was .redhi) USAGE: (SPAN class=...) (/span ) @060804: Ckd all site and converted appropriate ff0000's to redhi. (c110 cases @0609) @080804: getting less happy with redhi color (better if eg black but bold? XX So replacing some with bold. XX */ color : red ; /* BACKGROUND-COLOR : Yellow ; */ /* BORDER-TOP : red 1px dotted ; */ /* @240808: REVEAL! by BORDER-TOP above */ /* font-weight : bold ; */ /* DISPLAY: block; */ } .s-quote { /* @310704+ eg for Chars_: Char Comm. (Was .quote) +See .title PURPOSE: For QUOTATIONS, esp from documents. USAGE: (SPAN class=...) ... ( ) Human style: double quotes. Using normal (not italic). */ /* COLOR : Fuchsia ; */ color : navy ; /* font-style : italic ; */ } blockquote , .s-blockquote { /* For color s-blockquote: 121008: Expt: started for Clothes Aid__ For inline/spans */ background-color : #E8E8FF ; /* ca Char Comm lavender. CB Default house style? */ /* Also tried /#EAF1FD - slightly paler */ } blockquote { /* Until @180804 -was embedded in CHARITY_LAW_REFORMS_(for quotes from reports). PURPOSE: Indents both sides - hence for quotations etc. Colored bg easy. (USAGE: Currently is element - so is automatic, eg TFA__ leaflet/bag, headington__) Could use as element (or class) (xx) */ /* Poss padding only needed if it has a bg-color. */ padding-top : 1px ; padding-right : 5px ; padding-bottom : 1px ; padding-left : 5px ; /* @220908: above were: 1, 10, 3, 10px */ /* ZZmargin-top : 10px ; */ margin-right : 10px ; /* ZZmargin-bottom : 10px ; */ margin-left : 10px ; /* margins above to widen panel from defaults */ } blockquote p { /* XXXXX Added 220908 EXPT PURPOSE: So text is tighter in the box (as padding-top & padding-bottom in blockquote had failed to sort it out) USAGE: automatic. */ margin : 5px 5px 5px 5px ; } .s-title { /* PURPOSE: To identify TITLE of publications - books, mags, reps etc & radio/TV progs - @120804+. (Was .title) & n/paper article titles ? - adding Human style: Currently (italics), cap initials, and no [double] quotes, no full stop. USED IN: Across all site whenever needed. USAGE: (SPAN class=...) (around outside of any quotes), but inside any bold. Gone thru site & changed ca all to this - @120804. See Reforms: s-title + redhi spans give text red but leaves overline same color as in s-title (eg fuchsia) ! So can get different color text vs decoration ! Wow - Rem !! !USP See also .quote. */ font-style : italic ; /* color : black ; */ /* BACKGROUND-COLOR : #98FB98; */ /* 98FB98=light green */ /* TEXT-DECORATION : overline; */ /* BORDER-LEFT : fuchsia 1px solid ; */ /* BORDER-RIGHT : fuchsia 1px dotted ; */ /* @240808: REVEAL! by 2 BORDERs (T&R) above */ } /* (.ExtGT was here. DEFUNCT. Moved out @270808 as ALL replaced by .extlink + image) */ .footnote-no-in-text { /* PURPOSE: For SUPERSCRIPT numbers leading to footnotes. (Was called .super) USAGE: (SPAN class=...) USED IN: eg CHARITIES_, (Charity_shops: just says x2 "see Footnote") */ vertical-align : super ; /* !USP */ font-size : 70% ; font-weight : bold ; color : red ; } .aaFOOTERS--ssi-footer-shtml--SEE { } /* -----------------see the SSI---------------------------------------------- */ .aaIMAGES { } /* ------------------------------------------------------------------------ */ p.freeimages-credit , p.freefoto-credit { /* Started c @001205. was .freei Changed to .freeimages-credit PURPOSE: For 'freeimages.co.uk' credit at foot of page. So is low-key, but still adequate for the supplier. USAGE: [p class="freeimages-credit"... USED IN: initially on charities__ page (above ifooter). @300808: still only on charities__ page. @211008: Moved the code on the charities page to an SSI. See also Master credit to them on Images__ page. @061008: freefoto-credit class added. eg old red phone box. Initially just on 0870__ page. For now, trying to use same appearance for both freeimages & freefoto credits. However, by using different classes for each, we can treat them differently later if needed (XX) Could convert the freefoto code to an SSI XX */ font-size : 80% ; color : gray ; text-align : right ; margin-top : 27px ; } p.freeimages-credit img.extlink , p.freefoto-credit img.extlink { /* milonic dble arrow: img is w13 x h7 native */ /* PURPOSE: This shrinks the arrow to match the smaller text in rule above */ width : 11px ; height : 6px ; } .floatr { /* @211205: started .floatr for images off Oxfm, Scrn, freeimages ... T4 & L6 seem best PURPOSE: Previously used [img style="float:right;margin-top:4px..."... This is better: Easier, & it puts controls in one place, esp the margin values. It assumes that alignments here work for all situations (XX) - vs bespoking. USAGE: [img class="floatr"... (rem 'Float:right' simplified the site, allowing phasing out of messy tables for images on RHS. Wow.) */ float : right ; margin-top : 4px ; margin-left : 6px ; margin-bottom : 5px ; /* m-b added 310808 re help__ -re gen info in boxes */ } .floatl { /* started @300808 - expt, to match floatr ! REM is an L (not a 'one' char) at end. Beware (vs floatr): excess text will go under the image - ouch XX So far not used it. Could use a table as a solution if ever needed? */ float : left ; margin-top : 4px ; margin-right : 6px ; } /* ------ END of images ---------------------------------------------------- */ .aaREaaxxx-start--ie-RE-specific-pages-A-Z { } /* ============================================================= */ /* BELOW = Only for SPECIFIC WEB PAGES or groups of pages (vs all pages):- */ /* arranged here A-Z by page name */ /* M. "RE" =REgarding , esp in class name: Indicates class etc restricted to a subject/topic eg HOEO, media, street [law]. So prob unique to this website. Used as REx or RE-x. Seems REx is preferable. Now stdised on this. (Also tried as "z-" briefly (ca @0709) re Fern/bowtie). Now 100% phased out.) */ /* -------------------RE ACT_1939 pages ----------------------------------- */ .REact , .REflyer { /* (Was .body-act, .bodyREact) USAGE: (body class=...) USED IN: ACT_1939 scans x11 pages (& rem flyer_ scans). */ background-color : #fdF7D6 ; } .REact-image { /* Gives std border to all 11 or so scans of pages of the Act. */ border : 1px solid green ; } .aaREact--ssi-act-copyright-shtml--HMSO-SEE { } /* ---------- see the SSI ----------------------------------------------- */ .aaRElinks { } /* ------------- RE LINKS PAGE and LINKS SSI FILES -------------------------- */ /* @171008: Started. The original 4 classes were embedded in top of the links page. USED IN: the links__ page, and SSIs files of indiv topics - eg recycling. Classes originally just comprised: .links-cb-pages (called div-bags then) .s-links-name (called s-name then) .s-links-formerly (called s-formerly then) .links-notes (called notes then) ! DO NOT CONFUSE WITH HREF LINKS GENERALLY. */ div.links-cb-pages { /* (Was called '.div-bags'.) PURPOSE: Creates an identifiable panel containing a list of the related cb pages on the topic. (analogous to PTOC panel) USAGE: 'div class=xxx' around the list of pages in a

. Sited immed under a heading, pre links. Was cream, now white. 2nd+ lines are well indented. USED IN: The links__ page AND links_ssi__ pages. Layout: " Related pages on CharityBags website :
- added by an SSI Acts and Regulations
... Definitions " */ /* background-color : #FFFFEA ; */ /* cream */ background-color : #ffffff ; /* padding : 0px 5px 3px 5px ; */ padding : 0px 5px 3px 35px ; /* margin-right : 40px ; */ /* disabled @171008 */ text-indent : -30px ; /* outdents first line */ } div.links-cb-pages p:first-line { /* @181008 started. Expt XXXX PURPOSE: Highlights the 1st line, ie '+see CharityBags...' USAGE: automatic. */ font-weight : bold ; color : red ; } /* div.links-ssi div.links-cb-pages { */ /* PURPOSE: Tell-tale: Discretely indicates in links__ page which sections are ssi's. !USP HA! ouch QQ (Also indicates in links_ssi sections of topic pages, but is implied anyway.) Beware: Won't show if no links-cb-pages section present (XX) See also: mauve diamond bottom-right indicator via background image ))) =in links-ssi rule below @271008: !!! QQ Found this rule was the cause of RH trimming PROBLEM XXXX So STOPPED USING IT (=the border-right line below) */ /* border-right : #c0c0c0 solid 1px ; } */ .s-links-name { /* (was called '.s-name') PURPOSE: Alterable style for name of item (orgn, website etc - eg 'Home Office'). USAGE: Home Office USED IN: Just the links__ page and links_SSI files. */ /* XXcolor : green ; */ /* background-color : white ; */ font-weight : bold ; } .s-links-formerly { /* (was called .formerly, then .s-formerly) */ /* PURPOSE: Style for previous name of an organisation - eg HMSO, LCD. USAGE: (formerly the Consumers Assoc)... USED IN: Just the links__ page and links_SSIs. */ font-style : italic ; /* color : fuchsia ; */ color : #666666 ; margin-left : 10px ; } /* p.links-notes { / (Was called .notes) PURPOSE: For Notes on certain orgns. USAGE:

... after name and link. USED IN: Just the links__ page. @171008: Phased out - too fiddly, not needed ..., esp as now using hr's. Now ! DEFUNCT ! ALL instances removed. XXX Expt: Want indent: do by: ? eg for 2 CBD directories (DL) Defns list as per Glossary - div - blockquote - CSS - display:block where p has a span with class="notes" - or ... ? / margin-left : 25px ; / XXpadding-left : 25px ; / / display : block ; / margin-top : -16px ; background-color : #EEEEEE ; / padding-top : / padding-right : 5px ; padding-bottom : 3px ; padding-left : 5px ; } */ /* .links-non-govt { / @171008 started. (was called .govt) PURPOSE: Controls each hr which divides govt items above it, from NON-govt below. USAGE: add to the hr:

Also used in the Intro explanation (in a span, in a li). Can change color, thickness ... XX @271008 Now DEFUNCT. Using an SSI instead. / color : red ; / border-bottom : red none ; re Intro example line - abandoned / } */ .links-ssi { /* @181008: in charities_ssi__, recycling_ssi__ etc PURPOSE: In case ever want to control font, background etc USAGE: (div class="xxx") & (/div) within each ssi "page" (=file). USED IN: The links_xxx_ssi.shtml__ "pages" @271008: The 3 'QQ' background lines below commented out. Not needed, now that 18 of the 22 Links page sections are SSIs. Now using Purple diamond to mean NOT an SSI. So this rule now does nothing. */ /* Discloser: */ /* background-color : yellow ; */ /* QQbackground-image : url(links_ssi.gif) !important ; */ /* !USP */ /* The image above is the mauve diamond symbol currently XX */ /* (img border="0" src="links_ssi.gif" width="12" height="12") */ /* QQbackground-repeat : no-repeat ; */ /* background-position : top right ; */ /* QQbackground-position : bottom right ; */ /* !USP */ /* padding-bottom : 1px ; */ /* padding-bottom ensures image is below last line of text & won't overlap. */ /* padding-bottom: Abandoned - too fussy ... */ } .RElinks-page { /* Started ca @201008. Expt: PURPOSE: In case want to control the core (=data) of the links page. Analogous to 'links-ssi' class above. USAGE: (div class="xxx") USED IN: Just the links__ page. */ /* background-color : aqua ; */ } div.links-ssi hr { /* @181008: Expt, started XXX PURPOSE: Allows changes to hr's between link items. Fine for HR color, height etc. But so far ca unsuccessful as a way of adjusting gaps XX Currently DISABLED. Not crucial, as default spacing between hr's and items isn't grossly wide. */ /* height : 10px ; */ /* margin-top : -20px ; */ /* margin-bottom : 0px ; */ } /* XXdiv.links-ssi p { / XX PURPOSE: For adjusting gaps between entries and the HR lines. XX Ca unsuccessful, partly as affects all p's, not just the ones immed after hr's. So DISABLED for now (XX) Tried on p's as an alternative to doing it on the hr's. / margin-top : 10px ; margin-bottom : 10px ; } */ .links-rpaul-topic { /* @211008 started. (was called .rpaul-topic) rpaul ='Related Pages And Useful Links' =2nd of 2 lines of each heading. =last section of page. PURPOSE: Allows quick changing of style of all 1st lines eg "Law :(br)" USAGE: span around 1st line. USED IN: Topic pages which have 'includes' for link_ssi's - eg Law__, Recycling - GT of 8 so far. */ color : #888888 ; } .aaREmedia { } /* ------------- RE MEDIA --------------------------------------------------- */ /* MASTER re RE MEDIA: eg press releases, n'paper articles. Page hdgs usually red. Anchors: ca "Article", "Comments". Has imported text as html, in table, in div (except Watchdog). ptoc: Several use webbot hdg. No p-nbsp-p above div/table. (c) Using m-t in tableRE - jumps div !. Hdgs in table use h-gap-min. "Our comments" has h-bt-line. */ .REmedia { /* PURPOSE: Standard bg-color etc for this group of pages. (Was .media) USAGE: (body class="xxx") USED IN: All 9 or so MEDIA_ pages @270704+ */ background-color : #F0FFFF ; /* FONT-STYLE : italic; */ } .REmedia-table { /* PURPOSE: To Imitate original documents - usually B&W. Assumes imported text is typed/OCRd and in the table. (Was .BgPR, .table-media, .tableREmedia) Similar to .REhoeo-table. USAGE: [table class=...]. Converting some to just div's, so [div class=...] XX (so technically some no longer media-table but should be called media-div say? XX) USED IN: In media_ imports. */ /* background-color : #FFFFF0 ; / FFFFF0=Ivory */ background-color : #FFFFFF ; /* @180908: expt - trying white (eg re Wandsworth Oasis) XX */ border : 1px solid black ; /* border-color : Black; */ /* padding : 27px; fails xx */ margin-top : 41px ; /* margin-top c40px added @010904 (xpt) as GAP: neatly jumps empty div. */ margin-bottom : 25px ; color : black ; /* "color : black" added @210804 as expt (xx) re body text, lists, hdgs ... It failed to override .hdgs-red (xx) */ padding : 5px ; /* @180908: padding added, from Wandsworth Oasis__ */ } .REmedia-table h1, .REmedia-table h2, .REmedia-table h3, .REmedia-table hr { /* PURPOSE: To make hdgs more authentic (vs page's: coloreds, any h-bt-line, etc). Articles: (Most origs were aligned left eg n/papers.) Almost all had black ink. Expt: class hr added @010904 re snc_, so lines black too. USAGE: auto */ color : Black ; /* Tried commenting out @210804 */ border-top : blue 0px none ; /* BORDER-TOP : blue 1px solid ; */ /* zzBORDER-RIGHT : blue 3px double ; */ /* @240808: REVEAL! by BORDER-RIGHT double above */ /* border-top to supress any .h-bt-line's (ie "nil") */ /* BORDER-RIGHT : XXX */ } /* ------Media_ - Kosta : --------------------------------------------------- */ .text-indent-line2plus { /* (Was .table-outdent) (Could be .text-outdent-line1) PURPOSE: To get value-added green para .NOS outdented - eg "[12]". Method: Padding shifts all text to right, then text-indent shifts first line out to left. Ca equiv of ".lm +x" in WS7. (+SEE similar .list-out in TFA_) USAGE: Use once, as (TD class...). USED IN: MEDIA_KOSTA__ article (in table). */ padding : 0 50px 20px ; text-indent : -45px ; } .s-nos { /* (Was called .nos) PURPOSE: Differentiates our value-added nos from original imported text. USAGE: "(p)(span class=...)[12](/span) ...[text]" x15 USED IN: MEDIA_KOSTA table: body outdented para nos eg "[12]" */ color : green ; font-style : italic ; } /* ----- SITE_INDEX page =SI -was here, but now defunct ------------- */ /* @270808: moved to archive file */ /* ------TFA_ / abc1_ page: ------------------------------------------- */ /* a poor-value collection (£30/tonne) */ .REabc1 { /* USAGE: [body class="REabc1"] */ background-color : #FFFFE3 ; /* creamy pale yellow */ /* background-color : gray; */ } .REabc1 h1, .REabc1 h2, .REabc1 h3 { color : #0066BC ; /* slate blue */ } .REabc1 h4 { color : red ; /* color : yellow ; */ } .aaREwhats-new { } /* ----- WHATS_NEW__ page: -------------------------------------------------- */ .REwhats-new { /* (c) "Bow-tie/FERN" - reduces classes in Whats_ page's (body) / (body)(span) from ca 4 to 1 ! USAGE: [body class="REwhats-new"] */ background-image : url(images/page/bgd-1stpi302.jpg) ; } .REwhats-new img.line { /* img.line should give same as ".line-snow" PURPOSE: Embelishes the dividing lines - adds a red top. */ border-top : 1px solid red ; } .REwhats-new ul { /* */ list-style-image : url(images/page/bullet_blue3d11x11_aaz.gif) ; } .REwhats-new ol ul, .REwhats-new ul ul { /* xx PURPOSE: Ensures sub-bullets revert to defaults. */ list-style-image : url('images/page/bullet.gif') ; } .REwhats-new ol li, .REwhats-new ul li { /* xxx Comments copied/moved from page's embedded: PURPOSE: Should give same as .list-outdent class ie MOVES LISTS TO THE LEFT. @030904: Re li margin-left below: why is "! important" needed? xx ... Is there a selector in MSS affecting this m-l ? If omit LI, moves further to left (even if ML:0) - why? xx What is px equiv of 1em ? Do an expt xxx */ margin-left : -1em ! important ; /* BORDER : 0px blue dotted ; */ /* BORDER-RIGHT : 3px #FFA500 dotted ; */ /* @240808: REVEAL! by 2nd or both BORDERs above */ } .sp-newpage { /* (Was .newpage, .s-newpage until @110908,) USAGE: (span class=...)New page:(/span ) Rare use by us of text-transform. USED IN: WHATS_NEW__ page ca 20+ occurences. Similar to s-deleted below (paired with it) */ color : red ; text-transform : uppercase ; font-weight : bold ; } .sp-deleted { /* @201205: added '.s-deleted' : */ /* USED IN : WHATS_NEW__ re pages etc deleted */ color : green ; text-transform : uppercase ; font-weight : bold ; } /* ----- End of RE WHATS_NEW page: ----------------------------------- */ /* ------End of RE sections ------------------------------------------ */ .aaaINTERIM-11-11-2005-onwards-XX { } /* xx Below added ca @111105+ as interim/bodge at end of file ========= */ /* Merge them into appropriate positions above eventually? XX */ /* 1. See amdts (renaming) to convert TFA into REabc1 */ /* 2. xx !! below added @111105 =expt for Milonic md menus */ .mm-oinw { /* 'mm-oinw' = Milonic Menus - Opens In New Window" PURPOSE: Gives std appearance to all instances. Eg the popup sitemap. USAGE: around ca '(opens in new window)' text. USED IN: menu_data.js */ /* color : blue ; */ color : #008000 ; font-style : italic ; } /* M. re EXTLINK image expt XXXX @201105+ : (see eg Que HTML4 App B re CSS values) extlink.gif is currently a renamed copy of db_red.gif off Milonic. =double arrow. Currently the file is: images/page/extlink.gif Is w13 x h7, transp, 256cols:8bit, 96res. Ensure is /a>File... 1 having created files with just var or img class=... in them = 1var and 1extlink 140908: XX Expt: added WIDTH & HEIGHT to rule below, so can delete (or override) ' width="13" height="7" ' in every img tag XXX Discovered: 1. if BOTH 'w= h=' AND style="w h" present in an img tag, the style= takes precedence - phew. 2. Similarly, if w & h present below, they take precedence over 'w= h=' in img tag - phew too. And can alter proportions - eg width 13 to 26 stretches it 2x. Rem now have several double-arrows at 2 or 3x usual SIZES, eg Disclaimer__ page. */ /* border : 1px dotted green; */ margin-left : -1px ; margin-right : 6px ; /* width : 26px ; */ width : 13px ; height : 7px ; } img.extlink { /* 140908: EXPT XXXXX 'display : none' hides all double-arrows. Wow. !USP */ /* display : none ; */ } /* 140908 XXXX Expt: wow: !USP [span style="background-image:url(images/page/extlink.gif); background-repeat:no-repeat; background-position:center;"]    [/span] See organisations__ page: ASA col 4 for sole use ))) */ /* RED DOUBLE-ARROWS EXPTs (CONT) :- !USP */ .td a { /* ! Expt: XXXX disabling above sometimes by a dot '.' XXX @231008: expt re red double-arrows XXXXXXXXXXXXXXXXXXXXXX !USP WOW. But snags: - affects 'a name' tags too. Can solve by calling rule eg 'td a' - poor when link goes onto a 2nd+ line. - If use in body text, still need "   around it by: - FP format: tick var box, or - manually type into the code, in code view. =ca 17 chars. Could try a FP2000 VB macro to insert it XX If it's mid-sentence, does we put a space after it? - prob yes say. ADVANTAGES OF 'VAR' METHOD: Easier to insert than More flexible as no content in all the var's specifiying img name etc. Doesn't even restrict you to the sub-dir location or to being a gif. You control via the sole master defn in MSS for var element. No need for extlink class. SNAGS: But still not the ultimate goal of auto-working on 'a' tags. (tho' then still need to specify ext link, ... unless ever did by it recognising '_blank' !) 1. Doesn't show up in FP's Normal view. As is done via CSS. ouch. (seems it needs to be a literal character or a real img image.) 2nd go: It does display chars eg u/l (even on  ) and background color - phew? It doesn't display padding-widened background or arrows - so can't see if you've added it or not, until in preview. char 183 = decimal point, in red is good - arrow hides it. 2. Can't alter size or stretch img? ... so would have to use another image file. - rats? */ background-image: url('images/page/extlink.gif'); background-repeat: no-repeat; /* Original expt: background-position: center 50% ; */ background-position: left ; padding-right : 7px ; /* P-right was 10px until 1011'09. */ padding-left : 6px ; /* 7px hides all line-thru if 6&10px, centered */ /* Discloser: (or eg aqua or yellow ...) */ /* ZZbackground-color : #c0c0c0 ; */ /* background-color : #FFFFFF ; */ /* text-decoration : none ; */ text-decoration : line-through ; /* DISCLOSES in FP's Normal mode */ color : red ; font-weight : bold ; /* font-weight : 100 ; */ /* font-size : 0px ; */ /* display : none ; */ /* ZZvisibility : hidden ; */ /* width : 0px ; fails */ /* word-spacing : 0px ; fails */ /* letter-spacing : 0px ; fails */ } var:first-letter { display : none ; /* FAILING in var XX - as needs to be in a p etc? In P first-line and first-letter: FP and IE show bgc OK But they ignore display: none. */ color : blue ; background-color : #c0c0c0 ; } div.allpage var { /* 'allpage' tag goes from header to footer [var for red double arrow !USP Is only present once 'served', thus adding H & F */ /* ZZbackground-color : #c0c0c0 ; */ /* yellow ; */ text-decoration : none ; /* text-decoration hides the line-through disclosers */ } .s-swmenu { /* @301105+ PURPOSE: Re SoftWare menu option choices eg in Windows and IE6. USAGE: span class= USED IN: esp in Help__ page Eg 'Start Menu ) Settings ) Control Panel ...' */ /* background-color : yellow; */ color : navy ; font-style : italic; } .RESnote-boxout { /* @290808 EXPT: I prefer using the prefix 'RESxx' to s-xx here. PURPOSE: Provides visual difference to indicate: parenthetical NOTE, aside etc ... a sort of BOX-OUT. USAGE: Initially in a

, then converted to a div pair around it. USED IN: Started on Donations__ page re NOTE on cash thefts. Sole use so far. So far a 100% success. Expt: Using navy text. */ background-color : white ; border : solid ; border-color : #cccccc ; border-width : 1px ; padding : 0px 5px 0px 5px ; color : navy ; } .boxout-1percent { /* started @110908. XXXXX PURPOSE: For 1% dress example of to-royalty vs to-charity-shop economics. (Had been a messy table, so as to include Lady in dress on RHS. I converted her to 'floatr'. =KISS) USAGE: class= in div panel USED IN: donations__ page so far MSS's Master BOXOUT info: Similar idea to: BOX-OUT summary panel in lawH2H__ , and box-out cash theft '.RESnote' (donations__ page). box-out of ptoc's */ background-color : #eeeeee ; border : solid #cccccc 1px ; padding : 5px ; /* ZZpadding-top : 0px ; */ } div.allpage { /* @270808 REVAMP xpt: PURPOSE: If user has high res, ensures text etc doesn't spread too wide, and layout is ca same as at 640x480. ie FIXES WIDTH. USAGE: Add a div immed below body (say). Add a /div immed above /body Place class="allpage" in the div USED IN: iheader.txt and ifooter.txt, in core (ie below header and above footer). Initially tried it without a class, by just adding width:xxx in MSS, as 'body div {width:...}' Fine offline (no SSIs added in) But once uploaded, oops! - it made the top MM menu become ca 3000px wide - why? XXX So 1) created a class '.allpage' & 2) added a div for it, immed under body tag -then seems OK For once, done as div.xxx, rather than usual '.xxx' For earlier uses of fixed width, see: homepage -by table - just one item flows 100% (an hr above footer) (XX) jumble sales -by 3 divs & position:absolute (600px wide) (some tables eg 1939 Act images) Width: 590px seems ideal. (XX) Look out for better ways of doing it - eg ck other sites and CSSs XXX eg by body - so not nec to add div pair to every page. Key may be to solve MM menu 3000px problem above XX eg recheck menu_data.js etc XX A bodge would be to put the div a bit lower, namely immed BELOW below iheader.txt ? But it still isn't in the body tag - rats Brainwave: put the div pair of tags in the header and footer SSI's Then only have to do once (plus homepage). 300908 duly done in iheader and ifooter. (XX) So then deleted allpage div's in: law_h2h__, donations__,Whats_new__, help__ etc. Yet to ck/do in homepage XXXX */ width : 590px ; } div.corepage img {border: black 1px solid ; } /* 300908 img =expt XXX PURPOSE: To apply std affects to images on a page with corepage in it. "corepage" means excluding header and footer, ie not 'allpage'. May in future find it useful to add other features to corepage too XX USAGE: Add a (div class="corepage") below iheader and above ifooter (XX) !USP USED IN: charities__ but then DELETED it. Initially just called it 'img ()', but had to change it to 'div.corepage img ()' because it affected images in header (DDM) and footer. Beware: is global, so may want eg different color for border on some pages XX Beware: affects eg red double-arrows XXXXX So seems is better to put an indiv class in each image tag XX So trying .imgborder below instead XX */ .imgborder img { /* 300908 expt XX PURPOSE: Allows changing of all borders on all relevant images on a page(s) by altering it in one place - ie here. USAGE: in a span around an img USED IN: charities__ only so far. snag: often already have a class in img tag - eg floatr So eg seems need to put it in a span Seems don't have to delete any border="0" in the img tag. Not that impressed by this expt so far. Stick to 'black 1px solid' as best prob (XX) */ border : black 1px solid ; } /* ----------- START OF REhelp-gen-info (= HGI) etc --------------------- */ .REhelp-gen-info { /* started @310808 PURPOSE: To identify GEN info (GI) on browsing any website - rather than SPECIFIC info regarding Bags site. =a BOXOUT. USAGE: -in div's: by adding containing div's with: < div class="REhelp-gen-info"> =best -in p's: by FP's drop-down styles - easy, but I phased out. -in li's: could even just put in a list's li line (not done so far - more below) USED IN: help__ page Features in the class initially: -alters background -alters text color -provides a border +see flag class below - provides '[general information]' (or similar) heading too. */ background-color : #faf0e6 ; /* ZZcolor : green ; */ color : navy ; padding : 5px ; padding-bottom : 0px ; border : solid gray 1px ; margin-top : 20px ; margin-bottom : 20px ; /* m-t & m-b apply to the div itself, so get gaps between boxes (else touch). */ } ul li.REhelp-gen-info { /* Expt: PURPOSE: re ul bullet li lines, if apply HGI just to it. =Attempt to restrict WIDTH just to the text width of the line color OK, but width fails - list box always takes full screen width. Rats. Why? ... answers on a postcard please, to ... - forget for now (XX) -not applying gen-info to indiv list items anyway so far. */ /* ZZpadding-right :10px ; */ /* ZZcolor : red ; */ } .REhelp-gen-info h2, .REhelp-gen-info h3, .REhelp-gen-info p { /* PURPOSE: In gen-info div boxes, ensures don't have excessive GAP above hdg. Was used only on h2 and h3. Later added p tag to above. */ margin-top : 0px ; } .REhelp-gen-flag { /* PURPOSE: to control color etc of (c) std text label (=flag) eg '[general information]' used at top of each gen-info section. Currently around 12 instances. USED IN: Just help__ page USAGE: in span around the text heading at ca start of each HGI section. Colors: Avoid blue and red (links), red (hdg) Note: Using a FP SUBSTITUTION WEBBOT for now for the heading eg to call it '[general information]' (XXX) (could instead do it by: - literal text, replacing all instances by search & replace if ever change it. - moving it to an SSI? SEE ALSO: .REhelp-gen-info above ))))) Master Wording of text heading: Alternatives (XX) -general information -general info -hints and tips -tips -notes -background info, background ...? */ color : green ; /* ZZborder-left : 5px solid blue ; */ /* ZZborder-right : 5px solid blue ; */ padding-left : 1em ; /* using em's so proportional to font-size !USP */ /* ZZpadding-right : 5px ; */ /* ZZZmargin-left : 10px ; */ /* ZZfont-size : 90% ; */ font-size : 16px ; /* Decided best if all same size */ /* ZZfont-style : italic ; */ font-weight : normal ; white-space : nowrap ; /* !USP */ text-transform : lowercase ; /* Needed because help__ page's h2's using transform to UPPERcase */ /* Expts: */ /* ZZtext-align : right ; */ /* ZZfloat : right ; */ /* ZZposition : relative ; */ /* ZZtop : 10px ; */ /* ZZright : 400px ; */ } /* ----------- END OF REhelp-gen-info etc ---------------- */ p.CSS2-tips:after { /* @020908 Expt for FUN From Pense CSS bk p408 =CSS2 XXX can use :before or :after Was called '.tips' PURPOSE: Wow - allows insertion at browsing time of specified std/variable text - '*' in eg below USAGE: by adding class="tips" to a p tag. USED IN: I added one to Help__ page: - browsing offline section (end of PAYG para) (XX) !USP Fine in Opera 7 (wow), but alas fails in IE6. So don't use for now. Ca unique in CSS - if a browser fails to display it, the text is omitted - ouch. */ content: "*" ; color : yellow ; font-weight : bold ; } /* Re generating PTOC items from text ----------------------------: @020908 Expt: XXXXX Help__ page: Tried using h6 tag in non h2 or non h3 sections (ie p tags), if want them as items in PTOC so can grab EPP fold of h's etc to make PTOC list semi-automatically. So added h6 to 'body, table' rules in MSS Afterthought: better if add an inline tag instead, for more control. So undid h6 tags. Which inline tag is best to use? - span =failsafe, but fiddly? - 'a name' nice? XX - now using in Help__ XX < < < < < Prob doesn't matter if nothing links to 'name'. */ a { /* PURPOSE: Neat simple tool re generating PTOC items. Use to temporarily DISCLOSE 'A NAME=' tags ie BOOKMARKS, to ck in browser that all hdgs etc have this tag, pre EPP grab of fold for PTOC (SEE ITEM ABOVE) (Bookmarks are invisible except in FP (Normal mode).) Alas also discloses 'a href=' tags. But they do have link underline visible, so can tell them apart - phew. So a success. Use now and again XXXXXXXX */ /* ZZbackground-color : lime ; */ } /* .h-bt-line h3 { / Done @310808 on Help__ page. But relevant to any page using .h-bt-line It neatly eliminated lines above SUB-headings (ie h3's) whilst maintaining them above h2's. Later, added thin, dotted line under h3's here. =HIERARCHY of lines !USP ( Finally, eliminated ALL lines, once started using div box code for 'gen info' in Help__ - by placing class="h-bt-line-nil" in body tag. ) So this rule not needed in Help__ now =DEFUNCT. / ZZborder-top : lime 2px solid ; ZZborder-top : gray 1px dotted ; ZZborder-top : lime 0px none ; } */ ul { /* fails if top of box */ /* ZZmargin-top : 0px */ } li { /* 300808: PURPOSE: To give GAP between BULLETS everywhere, so more readable. USED IN: Help__ page initially (as embedded style in head). USAGE: automatic. Trying in cb.css, so affects all site eg Charity_shops__ XXXX 10px OK, but slightly too generous? 7px seems ideal? Then made it 6. Rem affects sub-bullets too. Also affects PTOC items - but they need less padding - so see rule below XXXX */ /* ZZmargin-top : 6px ; */ margin-bottom : 6px ; } ul li ul, ul li ol, ol li ul, ol li ol { /* Done 030908 XXXXXXXXx So 1st of set of sub-bullets has good (bigger) gap above, between it and the main bullet above. */ margin-top : 6px ; } div.ptoc ul li ul li, div.ptoc ul li ol li, div.ptoc ol li ul li, div.ptoc ol li ol li { /* PURPOSE: Controls GAPS BETWEEN BULLETS just in PTOC. Done to override li rule above. Makes them narrower than in rule above. 2px seems ca ideal: - wide enough so readable - narrow enough so all PTOC ca fits on 1 screen with most pages. 030908: Modified: from 'ul li' to 'ul li ul li' - so only SUB-bullets are narrower (eg see law_h2h__) - better (a compromise). */ /* ZZmargin-top : 2px ; */ margin-bottom : 2px ; } .pecking { /* @060908: EXPT XXXXXXXXXXXXXXX PURPOSE: Codes appropriate sections where pecking order/pail etc dilemma applies. 'Aqua' etc - allow you to see the sections stand out. 'Display:none' - hides them so you can see page without them. Wow. !USP (rem MS Word's similar hide facility) Could improve on aqua as the disclosing colour ? XX USAGE: class= in div class= in span if less than 1 para USED IN: only donations__ page so far Could try in abc1 'poor value' page too, !!! BEWARE !!! When uploading, ensure that style is disabled XXXXXXXXXX */ /* ZZbackground-color : aqua ; */ /* XXXXborder : lime solid 2px ; */ /* ZZdisplay : none ; */ } /* 'cb' family :- = = = = = = = = = = = (=4 rules when last ckd) */ .cb { /* Expt started @061008 XXX MASTER of .cb family of 3 classes. PURPOSE: House style. Identity, logo ... USAGE: in (span class=...) around a 'CharityBags' phrase. USED IN: Homepage__ (in hdg and lowest middle box) menu_data.js__ (in main-heading at RH end). 'cb' =re name 'CharityBags'. Initially only color. Then added Fserifs. Any more to add? XXX (These classes moved from being embedded in Homepage, to MSS) */ color : #0000e9 ; } .cbw { /* PURPOSE: House style for 'www.charitybags.org.uk' name, ie cb's www. USAGE: in span around www.charitybags.org.uk */ color : #888888 ; } .cbw-dot { /* XXX Expt PURPOSE: To enhance the 3 dots in 'www.charitybags.org.uk' !USP USAGE: in 3 spans around the 3 dots (fiddly). */ color : red ; /* font-size : 140% ; */ } .cb , .cbw , .cbw-dot { /* PURPOSE: House style for cb and www.cb USAGE: automatic, on any uses of these classes. USED IN: any page. This rule applies the same fonts as .Fserif (etc? XXX) font-size increased here as need to match default non-serif size. */ font-family : 'Times New Roman', 'Times Roman', Times, 'MS Serif', Serif ; font-size : 120% ; /* font-style : italic ; */ /* discloser */ } p.hide { /* @151008: Started. PURPOSE: Hides text etc except in FP's Normal view. Similar to FP's webbot for comments. USAGE: xx eg in a span or p USED IN: xx ! BEWARE - The hidden text is still in the page's code. (XX) Expts showed .hide was buggy. But seems OK if 'p.hide'. So prob need to add all elements to this rule - ouch XX So rather RISKY. */ display : none ; background-color : #ddddff ; } p.ssi { /* @261008 started. expt XXXX PURPOSE: Discloser while in FP, revealing in-text etc SSIs USAGE: So far as (p class="xxx") (/p) pre each (include) text line. USED IN: So far just in links__ - in Advertising - just once. So-so. Alas   is invisible in FP's Normal view. So tried eg ' ---' to reveal. Could then hide in upload by an 'allpage' rule XX ca DORMANT for now. XX !! BEWARE i/c is displayed in upload !! XX */ /* background-color : #c0c0c0 ; */ background-color : #ffffff ; padding : 10px ; text-decoration : underline ; color : yellow ; display : none ; /* 'display:none' hides it in FP Preview and IE. It just shows in FP:Normal */ } div.caption p, p.caption, p span.caption { /* @1009 started. Inspired by Wigan donotdelay jpg image. Expted on 3 images on nEOs__ & 1 on Azzara__ & Donations__ pages Already do as Alt text. But alt not avail in all browsers (eg Opera), and must pass mouse over anyway. Works OK if use floatr or floatl. May be best also to have 'img {border-color: #cccccc;}' eg in each page at top. Do as a DIV around a 'p' containing the image and caption. EG: (div class=...) (p class='floatr')(img ...)(br)[caption text](/p) (/div) */ border: solid 1px ; border-color: #cccccc ; padding: 3px ; /* optional extras: */ /* background-color: #eeeeee ; */ font-size: 80% ; color: gray ; } .caption img { border-color: #cccccc ; } /* '.problems' & '.solutions' = expt 2710'09+ =USP XXXX Initially in Regulators__ page Re the c10% of site where we criticz. problems = things not right, need changing. solutions = need changing, CB has suggestions to solve it, recomms... */ .problems { border-right : solid 1px red ; padding-right : 8px ; } .solutions { border-right : solid 2px green ; padding-right : 8px ; } .box { /* =USP XX 1011'09: Started for 0870__ page. Do as a div around a key section - eg 2 or 3 paras Similar to the principle in '.strap' re adjusting margins & padding. */ border: solid 1px #ee1111 ; margin-left: -7px ; padding-left: 7px ; padding-right: 7px ; } .donotdelayflyer { /* Interim workaround to remove images Dec09+ XX Doing on all c11 uses of the flyer (see namz mail) by: (div class=...) (p)... =existing (/div) visibility : hidden makes invisible, transparent, but affects layout. display : none supresses 100%, as if not there. */ /* visibility : hidden ; */ display : none ; /* background-image : url(/docs/images/do-not-delay.jpg) ; */ } /* M. Selectors deleted: ca .center-black #left .see */ /* ======= End of ext style sheet (MSS) =================== */