/* rgg.css ver190127v. 0517t foldertab ivory now, was yellow.. For inline objects and a containing object: - 2. w3-show-inline-block - w3-show-inline-block is just display:inline-block!important. - Often used with rg-artmmnb rg-w2up - 1. w3-display-container. Often combined with w3-center. - w3-display-container is position:relative, and adds some :hover rarities Many -art... articles are demoed in caps\index.htm when xh-developer display:none is disabled. index-show-xh-developer.htm. - - - - - - - ??? sb all -art to get display:inline-block; w3-display-position and w3-display-topleft, etc.use position:absolute w3- fontclassnames w3-[], px, % of -medium: -tiny 10 10% -small 12 80% -medium 15 100%! -large 18 120% -xlarge 24 160% -xxlarge 36 240% -xxxlarge 48 320% -jumbo 64 426.66666%. rg-w45em etc, *.rg-w2up etc, *.rg-w1up-narrow, rg-maskit, rg-hide-developer etc are newest. rg-talign-center, etc., rg-valign-middle, etc began May/3/18 Note: - Sb stored as c:\lborg\wwwroot\3\rgg.css. - Always preserve .mht or _files versions of important HTML pages in case files sources are moved or deleted. - ? or an email way?? - Copy latest ver to some non-../3 dirs unless may introduce issues. lborg\wwwroot\caps\rggthisdir.css lborg\wwwroot\caps\rgg.css . . . rgg.css or rggthisdir.css in the html. - sb clean up. rid rules never needed, even by old pages. rg- for some and keep non rg- in case something needs that. 20180309j rg-maskit are new.. ..20160803m..161023b..161023not4c rg-foldertab ..161024j..1101 rg-centered maybe not as advertised?..20161229j..170425j..170526k..171011jgr-maskmyparentunfinished..20180220z rg-warning text color .. Remember, keep rgg.css style definitions existing bec some old .htm[l] pages may rely on linking rgg.css for definitions. - 201701177 RESTYLING of rg-artmmnb20. Is that okay in all pages using rg-artmmnb20? Probably? w3-css ..v2..v4.., and now rg-css, are (but absolute measures sb changed to relative ala em %. font-size:100?% effect?): tiny 10px small12 medium15 large18 xlarge24 xxlarge36 xxxlarge48 jumbo64 w3-card are: none -2 -4 -8 -12 -16 -24 - Some rg rule-name prefix conventions and sources: w3- are from w3.css. w3-theme-black are from w3-theme-black.css. rg- are from rgg.css. Use themes - - w3-theme-l5, lightest, through -d5, darkest, return background: and color: values based on last loaded w3-theme-black etc. */ /* Gather classes to demonstrate. ...jun29... BUT sb find that superfluous list gather line Firefox includes a styles editor that crudely shows check css comments tags pairiNG. Easier than last-rule-works-ok testing? More CSS CHECKERs ONLINE? w3.css and w3-theme-black etc are now normally linked before rgg.css but sb avoid exact same style names in case not exist - - w3- === w3-container w3-display-padding? within a -row-??? overlays ?? w3-tab w3-card-24 ?? w3-float?? rg- === HTML normal article/article is display:BLOCK. So, RG will very often: style=display:inline-block or class=w3-container?? or class=rg-ib defines an inline-block class *.rg-arts2col, *.rg-artmmnb20, *.art01, *.art02, *.03, *.art04, *.rg-artserifspacey, *.rg-artserif2spacey2, *.rg-art1, *.rg-art2, *.rg-art3, *.rg-art4, *.rg-art10, *.rg-art20, *.rg-art30, *.rg-art40 , *.rg-article, *.rg-art44em, *.rg-artplacard01, *.rg-art-rg001, *.???iclemenupad, *.rg-art-rg001, *.rg-art2uil, *.rg-art2uir, *.rg-art2u, *.rg-artOLDTESTbodyrg2013, *.rg-artrce01 , *.rg-blb, *.rg-pad, *.rg-foldertab , *.rg-, *.rg-, *.rg,- *.rg-, *.rg-, *.xh- === *.rg-art sb resolve these - Is the link order nonintuitive, giving the first, not last, link src the highest? prioroty in the cascade????? RX. Pby... DISPLAYNONE like all rule names is pby not case sensitive?? Cascade ascending authority may be style/style in head. class= style= or not? Javascript note. First failure of a function, even bec a single source file does not exist, may without notice turn OFF that function (whole .js maybe?) at that point. sb RECHECK now that *. for every single . has been repaired . . . . Someday sb? import html40css2.css at top? Or keep separately linking somesuch? Multipe classes. Some that test ok? body id="htmlbody" class="w6157 centerthese" - Nonalternate stylesheets DO persist, as earlier in the css cascade, when an alternate stylesheet is chosen. sb comments here where w3.css has exact equivalents. w3.css top begins, after HTML normalizing rules and before all w3.css or rgg.css or ... inline restylings, with -- -------------------------------------------------------------------------------------------------------- html, body {font-family:Verdana,sans-serif;font-size:15px;line-height:1.5} html {overflow-x:hidden} h1, h2, h3, h4, h5, h6, .w3-slim, .w3-wide {font-family:"Segoe UI",Arial,sans-serif} h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px} .w3-serif{font-family:"Times New Roman",Times,serif} h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0} .w3-wide{letter-spacing:4px} h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit} Will hr remain unlike normal HTML? hr{height:0;border:0;border-top:1px solid #eee;margin:20px 0} img{margin-bottom:-5px} a{color:inherit} table{border-collapse:collapse;border-spacing:0;width:100%;display:table} table,th,td{border:none} */ /* THIS CSS DOCUMENT, rgg.css - - - Revised ..20150930j..1114v[fixed some remark endflags issues]..151117Tu[good containers development] ..20151119s..20151207c[DISPLAYNONE is new]..20151215..1218g..1228..160402f..160421g..0426k..o502bw3-afew.. 20160509k..20160530z....20160628j gathrg-art still an unnec list line?.... - Rgg.css is within our standard .css startup cascade w3[, w3-theme-grey], .css, rgg.css. [Has been, e.g.: html40css2.css w3.css rgg.css, rce.htm] - HTML5 has added these special block elements - - article, aside, details, figcaption, figure, footer, header, hgroup, main,menu, nav, section, summary. - Gonna use html5 new elements names as divs' id=s, to help show html structure. aside asideleft asideright . sectrion article main header footer someday... = left etc are good in a position absolute block, overlaying in their order in the html. - 20151114 1730 Fixes were needed, so remark starts and ends using / are truely alternating __X__. Can foxpro, csevalidator pro, and cse or w3 online checks spot such disasters quickly? - Button and buttontab inline blocks rules work. So, for a menu bar, put multiple within an *.display inline-block block. Does .,, divdiv.htm. Work ok in IE8? - Will not need those of these that a linked w3.css can do them - - - Shadowed blocks ('cards') ala w3.css - motion backgrounds ala css3 cf w3.css? - layered blocks using z-index [p-p as container? position necly absolute? bleeds?] - Is position:absolute for the tag as a whole, or for the contents within the tag??? - sb try to learn which help of nesting: *.containerstrict *.containerrelative *.containerabsolute - html40css2.css used always to be linked first, to assure browsers of all brands start similarly. - w3.css linked before this .css. maybe obviates the html40css2.css need? - gt can be used to mean child but not grandchildren - Can anticipate class= with multiple classes. class= can have style= after. Blocks that centerlr and middletb [notes ala rce.htm jan 2015] use these styles, all in this rgg.css. So copy and reedit blocks from rce.htm of 2015012? .. - sb someday consolidate the *.center *.centerer *.centered *.centerlr *.centertb rules. - sb someday consolidate the *.art1 *...9? and *.art10 20 30 40 arts incl xhart or .,, divdiv rules. span spans should not contain blocks class="ilblockspan centered centerer vatop w2950e" style=" zzzzzzvertical-align:middle; slantasterisk class vatop/bottom work for vertical-align:top for ib asteriskslant slantasterisk vabottom and even vertical-align:bottom FAIL, going below bottom asteriskslant max-width:29.50em;min-width:29.50em;margin:0;padding:0;" div class="artrce01 centerer centered zzzvamiddle pct100 w2950e" style="zzzvertical-align:top;margin-right:.002em;margin-left:.002em; zzzoutline:thick yellow dashed; width:90% slantasterisk W of 90% helps ff separate articles! asteriskslant ; slantasterisk height: 9% asteriskslant slantasterisk Class vamiddle failing? asteriskslant " h3 b 1/30/2013 Chicago events on National Day of Action against cuts /b /h3 img class="wah1200e centered" title="." alt="[videographer]" src="../3/tvcamdem.jpg" / br a href="http://chicago/" Chicago Sun-Times /a article, photos. br a href="http://www.peoplesworld.org/unions-and-allies-to-gop-stop-holding-americans-hostage/" People's World /a photo, article. br /div /span Sb Make * globals explicit, as in *.myclassname and *#mytagid. ..20150109 1338 major comments have now been moved out ... major major Sb. Reintroduce some rgg.css top comments from htmcssrg.doc. sb. get a multiple classes Class= clause to include the last styles in [div and?] span and div which are still needing style=. Good menu pads example is ...11:57 AM 11/18/2015 Good article blocks are [xh...?] in rce.htm of ..jan 15 '15.. How restate the way multiple classes works? Be careful not to cause any unpaired style/stytle comment tag or html comment characters Sb find and move to htmcssrg.doc all the best and other notes about tabbarendr centered */ *.rg-display-container {position:relative} /* == w3-display-container except :hover. relative is normal default anyway maybe must be explicitly styled in order to get overlaid by any? absolute?? */ *.rg-show-inline-block {display:inline-block!important} /* == w3-show-inline-block. oft add ala rg-artcaps */ *.rg-show {display:block!important} /* NEW 20180509 Learn prority vs w3-hide rg-hide w3-show if linked rgg.css after w3.css . . . . . . */ /* say, do blank lines and whitespaces within linked .csses cause newlines in body ????????? */ /* ***** 20160531 insight rgg.css ahould presume a preceding normalizing .css, and not style basic html tag names ****** */ /* Headings. Other heading rules will be added later. Disabling, with some risk of affecting old pre-2016May rg projects, in favor of a presumed prior normalizing .css . . . The -size settings may not yet be our best starting values? w3.css normalizing startup is h1-6 as 36px 30 24 20 18 16px. h1 {font-size:200%} h2 {font-size:120%} h3 {font-size:95%} h4, h5, h6 {font-size:60%} */ /* These major arts have most every possible style value specified as normal values before restylings Art articles should style at least x h3 and x img. Arts now have rg- names, too. */ *.artserifspacey, *.artserif2spacey2, *.art1, *.art2, *.art3, *.art4, *.art10, *.art20, *.art30, *.art40, *.rg-artserifspacey, *.rg-artserif2spacey2, *.rg-art1, *.rg-art2, *.rg-art3, *.rg-art4, *.rg-art10, *.rg-art20, *.rg-art30, *.rg-art40 { visibility:visible; color:black; font-family:'times new roman',serif; background:transparent; line-height:normal; letter-spacing:0.000em /* 0 very unlikely??? */; margin:0.500em; border:0.100em black solid; padding:0.500em; font-weight:500; zzztext-decoration:zzz ; display:inline-block; } *.artserifspacey, *.artserifspacey2, *.rg-artserifspacey, *.rg-artserifspacey2 {/* restyling */ letter-spacing:0.100em;line-height:2.100em} /* * NOTE: * :hover does NOT seem to work in IE8, though it does in FireFox. * But isn't a:hover ok in IE*?? * */ *.borderthis {border:medium blue solid} /* WHEN SHOULD these borderings be OUTLINEings? - - Outlines take no space at all sb try demo blocks with each and with none. Then describe... */ *.rg-DEVELOPER, *.DEVELOPER *.rg-dottedthickred {border:thick red dotted!important} /* Not case sensitive. */ *.outlinedashed {border:thin green dashed} /* 'Inverse' fails. Not case sensitive. */ *.oldashed, *.DEVELOPER2 {border:thin green dashed!important} /* 'Inverse' fails. Not case sensitive. */ /* * * * */ /* blocksbordered container. * - Will border most every HTML block within. .,, blocks within blocks. even div in div in div etc? * - container gets bordered, and divs and ul, ol, dl, li, table, th, tr, td, * at all contained levels, such as div in div in div * - omits h1-6, p, * - may sometimes get changed later in the css cascade, even inline * * sb Pby deprecate or add naming as 'art' ... */ /* *.blocksbordered {margin:0;border:thin black solid;padding:0} *.blocksbordered div {margin:0;border:thin black solid;padding:0} *.blocksbordered ul {margin:0;border:thin black solid;padding:0} *.blocksbordered ul li {margin:0;border:thin black solid;padding:0} *.blocksbordered ol {margin:0;border:thin black solid;padding:0} *.blocksbordered ol li {margin:0;border:thin black solid;padding:0} *.blocksbordered dl {margin:0;border:thin black solid;padding:0} *.blocksbordered dl li {margin:0;border:thin black solid;padding:0} *.blocksbordered table {margin:0;border:thin black solid;padding:0} *.blocksbordered table th {margin:0;border:thin black solid;padding:0} *.blocksbordered table tr {margin:0;border:thin black solid;padding:0} *.blocksbordered table tr td {margin:0;border:thin black solid;padding:0} */ *.blocksbordered, *.blocksbordered div, *.blocksbordered ul, *.blocksbordered ul li, *.blocksbordered ol, *.blocksbordered ol li, *.blocksbordered dl, *.blocksbordered dl li, *.blocksbordered table, *.blocksbordered table th, *.blocksbordered table tr, *.blocksbordered table tr td {/* restyling */ margin:0;border:thin black solid;padding:0} /* * This. must regather the this damn centerthis verticalmiddle, outline, ... * */ *.centerthis, *.centered, *.center, *.header, *.bodyheader, *.mcopheader, *.footer, *.bodyfooter, *.mcopfooter, *.banner {margin-right:auto;margin-left:auto} *.leftthis, *.lefted, *.left {margin-left:0} *.verticalmiddle, *.vamiddle {vertical-align:middle} *.verticaltop, *.vatop {vertical-align:top} *.verticalbottom, *.vabottom {vertical-align:bottom} *.outlinethis, *.outlined, *.outline {outline:thin dotted} *.oldashed {border:thick CYAN dashed} /* * NOTE: * Outline seems NOT to be effective at all in IE8, though Firefox honors it. * Outlines of contiguous blocks overlap in firefox but borders do not . . . * Outline may seem? not to be effective where BORDER exixts and dominates. * Outline defaults to an inverse color if NO color (nor 'inverse') is specified! * outline:thin outset *** Omit color for inverse. White or black often is ok *** * * Outlines seem to overlap in firefox but borders assert a separation. * BORDER pby cannot generate the inverse color even in Firefox? untested? * * * question: Does outline need all 3 for style rule shorthand? length color borderstyle? */ *.outlineonhover:hover {outline:thin cyan dashed} /* hover oft is a problem w touch screens */ *.rightmaxthis {clear:both;float:right} /* EXPERIMENTAL */ *.leftmaxthis {clear:both;float:left} /* EXPERIMENTAL */ /* * These. must regather the these rules lost during work, damn * ----- * * and ... * Text-align affects NOT the current object but rather objects within it. */ *.centerthese, *.centerer, *.header, *.footer, *.banner, *.mcopheader, *.mcopfooter, *.bodyheader, *.bodyfooter, h1, h2, h3, h4, *.mcopheader, *.mcop100, *.mcop200, *.mcop300, *.mcop400, *.mcopfooter, *#mcopheader, *#mcop100, *#mcop200, *#mcop300, *#mcop400, *#mcopfooter {text-align:center} /* Subhead .,, for h1 span before a br font-style:normal sb none pby huh */ *.subhead { font-family:'courier new',courier,monospace; font-size:33%; font-weight:100; color:navy; font-style:normal; } *.subhead {color:navy} *.clearboth, *.clearall {clear:both;margin:0;border:0;padding:0} /* sb rid this ambiguous rule replace in old pages with centerthis or centerthese */ *.centerlr { margin:0 auto 0 auto;border:0;padding:0;} /* * * Major bg page section rules. Pages may sometimes change these with xhheader etc. * */ *.header, *.bodyheader { margin:0 auto 0 auto; border:0;padding:1em; font-size:120%; text-align:center} *.banner { width:35em; background:white; margin:0 auto 0 auto; border:thick silver outset; padding:1.5em; font-size:166%; text-align:center; } /* sb someday do not force border anything except 0 0 0 0 */ /* sb pby use a p class= instead of styling all *.banner p the same . . . */ *.zzzbannertext, *.zzzbanner p, *#zzzbanner p { font-size:60%;font-style:italic;margin:0;border:0;padding:0;text-align:center} /* * * *.artsomename * width:88%;text-align:center;padding:1em;background:white; * border:thin white outset;border:0.68em white outset * */ /* == These are effective from here whenever later than duplicate styles above === */ /* Modify some, including bg standard divs */ *.fixedwidth1, *.fixedwidtha {width:12em} *.fixedwidth2, *.fixedwidthb {width:13em} *.fixedwidth22pc {width:22%} *.rg-ib {display:inline-block} /* w3- equivalent pby w3-container? w3-display...? */ /* * * *#pagecolumns *#maincontentsofpage * width:auto * sb test width sb expands to a max % of width * * *#pagecolumns td * width:55em * noclass width sb what? * * *.pagecolumns *.maincontentsofpage * width:auto * * sb test width sb expands to a max % of width * * *.pagecolumns td * width:55em * * noclass width sb what? * * *rgg.css now can support table - - MORE TESTS NEC *pagecolumn-left, pagecolumn-right sb sidebar widths *All cols but one sb fixed widths *table id="pagecolumns" and/or class="pagecolumns" * tr * td class=fixedwidth1 * div * td zzzclass=classlessoraclassforexpandingtoamaxwidth * div id=maincontentsofpage * td class=fixedwidth2 * divt *AND /tr /td /table as nec * ****** */ /* * * * */ /* These are some active style rule defs */ *.DISPLAYNONE, *.NOT_DISPLAYED_ {display:none} *.pagecolumns, *#pagecolumns { width:100%} *.pagecolumns *.maincontentsofpage, *#pagecolumns *#maincontentsofpage { width:auto} /* sb test width sb expands to a max % of width */ *.pagecolumns td, *#pagecolumns td { width:55em;vertical-align:top} /* noclass width sb what? */ *.fixedwidth1 {width:22em} *.fixedwidth2 {width:33em} *.fixedwidth22 {width:22em} *.fixedwidth33 {width:33em} /* * * * */ *.maincontentsofpage, *#maincontentsofpage, *#main { background:white;border:thin blue solid;padding:1em;font-size:120%;text-align:left} *.maincontentsofpage div, *#maincontentsofpage div { border:0} *.maincontentsofpage h2, *#maincontentsofpage h2 { color:black} *.maincontentsofpage a, *#maincontentsofpage a { color:navy} *.mcopheader h3, *#mcopheader h3 { color:navy;font-size:150%;text-align:center} /* */ /* */ /* Note that many (too many?) rgg.css vertical-align:middle were changed to vertical-align:top on 20170526 */ *.art01, *.art02, *.zzzxhart00, *.art03, *.art04, *.article, *.rg-art01, *.rg-art02, *.zzzrg-xhart00, *.rg-art03, *.rg-art04, *.rg-article { /* zzzdisplay:inline-block; */ text-align:CENTER;vertical-align:top; font-size:120%; margin:1.5em; border:thin gray solid; padding:.5em; } /* ok */ /* sb test the a */ *.art01 img, *.art02 img, *.art03 img, *.art04 img , *.rg-art01 img, *.rg-art02 img, *.rg-art03 img, *.rg-art04 img { font-size:120%;margin:.5em .5em .5em .5em;border:0;padding:.5em .5em .5em .5em } *.art44em, *.rg-art44em { width:44em; margin-right:auto;margin-left:auto; border:thick dashed magenta; padding:.5em .5em .5em .5em; text-align:left;} /* auto auto works sb cf laborbeatorg for how text along right of img */ *.art44em img, *.rg-art44em img { display:inline-block; width:auto;height:8.00em;} /* zzzfloat:left;zzzclear:none; thumbnail float nec? MAKE THIS inline-block bob 40em? */ *.artplacard01, *.rg-artplacard01 { background:white; width:45%; border:thin white outset; padding:1.5em; text-align:center; } /* * * div twoup aka arttal20em stuff note: * USEFUL. 20em wide blocks wrap at 2-up in my 100% 1nnn x 7nn display * */ *.twoup, *.arttal20em, *.arttal44em, *.rg-arttal20em, *.rg-arttal44em { text-align:left; /* zzzwidth:22em; */ display:inline-block; min-height:6.66em; /* zzzmargin-right:auto;zzzmargin-left:auto; */ padding:0.5em 0.5em 0.5em 0.5em; vertical-align: top; background:white; /* zzzwidth:20em; */ max-width:20em; margin:0.1em; border:thick white outset; } /* width as 22em kinda worked once in labitn.htm */ *.twoup img, *.arttal20em img, *.arttal44em img , *.rg-arttal20em img, *.rg-arttal44em img { float:left;clear:none; border:thin black solid; height:7.77em; /* zzzwidth:auto; */ margin:0 0.5em 0 0; padding:.2em; max-width:19em; } /* Useful? for areas of m..c..ofpage besides *#mcopheader? */ /* * Pby most styles are best used not as *# single instances but . for div class anywhere * Or define BOTH ways, to cover past and future uses? */ /* Active style defs affect rg standard named divs sb avoid rules by *#... if possible Any old pages depend on these *#... ?? */ *.sidebar, *.sidebar2, *#sidebar, *#sidebar2 ,*.sidebary, *.sidebarz, *#sidebary, *#sidebarz { text-align:left} *.footer, *.bodyfooter { margin:0;border:0;padding:1em;font-size:120%;text-align:center} /* * a * * The best a... for rgg.css is not finally determined. 20131017f note. Use more2.htm for tests. * Link (unvisited), visited, hover, active. * Maybe do want underline before and after visited?... * * LVHA. The order lvha of these rules affects results when more than one is true at once. * A:link unvisited link A:visited visited link A:hover user hovers A:active active link */ /* seems now this does have an effect?: a {text-decoration:underline;} */ /* disabled via commenting - - - a:link {zzzzzzcolor: gray ;zzzzzzfont-weight:700} To navy 20110211 bold feb13. Long had been #0000EE a blue?, ala HTML2.0.. */ /* unvisited link Rid underlining in rgg.css ============ ? */ /* WASa:link {color: gray;font-weight:700} gray, bold. Long had been #0000EE a blue?, ala HTML2.. WASa:link {color: gray;font-weight:500;text-decoration:underline;} 20131017f note visited links no color change here to a current visited style except img */ /* WASa:visited img {border: 1px #551A8B} */ /* WASa:hover {background-color:#eee ;text-decoration:underline;} #eee is light gray WASa:active {color:red} */ /* active img. Setting the anchor border around IMG elements requires contextual selectors */ /* WASa:active {text-decoration:underline;} 20131017f note */ /* WASa:active img {border: 1px red} */ /* links */ /* LVHA. The order lvha of these rules affects results when more than one is true at once. And see buttons' links */ /* a unvisited HTML2.0 had #0000EE, a blue? */ a:link {/* restyling */ color:black;font-weight:600 ;text-decoration:none} /* New, for any img within an a. ok? */ a:link img {/* restyling */ background-color:transparent} /* a visited - HTML2.0 had *#?, a ? - Old note untrue?: text-decoration:none fails to stop underlines why? once had bodys before rem a, a:visited { color:gray; text-decoration:none; } */ /* visited links no color change here to a current visited style except img border */ a:visited img {background-color:cornsilk} /* a hover #eee is light gray */ a:hover {/* restyling */ background-color:#eee;text-decoration:underline;} /* a active While loading target */ a:active {/* restyling */ color:blue;text-decoration:underline} /* * Developer. * * Sometimes active style defs Modify/add styles sb Move some out and up * * Does a comment within/around brackets really disable that style, or not? * ! Do blank lines in style (except in remarks?) cause blank lines atop page? * * Styles not in use. * Maybe useful examples for rules in Heads, with xh... naming. * * *.xhheader {margin:0 auto 0 auto;text-align:center} * *.xhsubpagebanner { * width:88%;text-align:center;padding:1em;background:white;border:thin white * outset;border:0.68em white outset"} * zzzh3 {font-style:italic;font-size:122%;color:pink;text-align:left} * zzzh3 zzza {font-style:bold;font-size:122%;color:cyan} * * h1.xhh1 { text-align:center;font-size:400%;font-family:'Todds Manuscript';color:navy} * *.xhh1span2 {font-size:40%;font-family:'Times New Roman';color:brown} * h2.xhh2 {font-style:italic;font-size: 100%;color:black} * h3.xhh3 {font-style:italic;font-size:120%;text-align:left} * h3.xhh3 span {font-size:80%;color:black} * hr.xhhrthin {margin:0;height:0.1em;width:66%;color:black} * hr.xhhrthick {margin:0;height:1.0em;width:66%;color:black} * *.borderthick {margin:10.3;border:thick black solid;padding:10.3} * * * *.borderthin {margin:10.41;border:thin black solid;padding:10.41} * *.bodyhead {background:cyan;border:thick navy solid;margin:1em;padding:111em} * *.zzzbanner {text-align:center;background:cyan;border:thick navy solid;margin:1em;padding:111em} * *.zzzbanner {background:#e9e9e9;border:0.4em white outset;padding:2em} * *.banner {font-size:80%;text-align:center;margin:1em;zzzpadding:111em; * background:*#e9e9e9;border:0.4em white outset;padding:2em} * *.maincontentofpage {border:thick navy outset;margin:1em;font-size:820%;} * *.bodyfoot {text-align:left ; border:thin black solid;margin:1em;padding:1em;font-size:120%} * *.bordered {border:thick navy outset;padding:1em} * *.bh {color:red;background:cyan;border:22em navy solid;margin:1em;padding:111em} * */ *.ilb000 {margin:0;border:0;padding:0;} *.ilb1h1 {margin:1em 1em 1em 1em;border:thin black solid;padding:1em 1em 1em 1em;} ul.illthumb {list-style-image:none; text-align:center; } ul.illthumb li { display:inline-block; vertical-align: top;} ul.illthumb li { display:inline-block; margin:.5em .5em .5em .5em; border:0;padding:.5em .5em .5em .5em; vertical-align: top;} ul.illthumb li img {width:auto;height:4em;} /* **** but img size sb an art issue instead */ /* sb An img.thumbnail rule to exist?? */ *.aligncenter { text-align:center;margin:0;border:0;padding:0; } /* Center things that are within this object */ *.alignmiddle { vertical-align:middle; margin:0;border:0;padding:0; } /* Fails often, whenever what? * Vertically middle this object on the line */ /* rem in css do not use lt!-- INLINELIS CLASS RULES FOLLOW sb perfect fine in rgg.css and sometimes paste rules into docs for adjustments on a given page *.inline div and *.inline ul li, ul.inline li can be (re)styled as reusable art/blocks. - */ /* ILBGROUP: 20130708..9.. * Subsequent in cascade might be * padding size top right bottom left * text centering * borders on divs and or imgs * width maybe fixed and maybe at 55.55em? as a normal 2-up wrapping for 100% at 1nnn x nnn? * img resizing differently * possible art layout within a div, such as whether float left clear none * other? * *NEED Width tests for best default whether word pads or graphical buttons . . . * Would 27em be a good width if whole page font-sizes %s adjusted? or not. * ***** too small width causes overlapping ***** * ul way always nec? * div issues unlike ul? .,, not honoring border * */ /* inlinelis. Temply aka ilgroup or ilbgroup * * menubar any different? better for minimal pads * */ *.ilbgroup, *.ilgroup, *.zzzinlinelis { text-align:center;margin:0; border:thick dashed magenta;padding:0; } *.ilbgroup ul li, *.ilgroup ul li, *.zzzinlinelis ul li { display:inline-block;vertical-align: top;margin:0; /* zzzwidth:000.55em;zzzheight:000.55em; */ padding:1em; width:1em; border:thick orange dashed; } /* ***** Border ZERO? unless developer work. Too small width causes overlapping ***** */ /* * * * INLINELIS, MENUBAR * * *.inlinelis and *.inlinelis div, *.inlinelis li are below. * */ /* **** Oft wrap inline pads or blocks in a div that has text-align and vertical-align **** * See the simple inline buttons approach herein */ ul.zzzinlinelis {font-size:1em /* zzdisplay:inline-list */} /* inline-list seems NOT a possibility! * How use? How rg7.css affected? */ *.menubar, *#menubar , *.zzzmyinlinelis { text-align:center } /* a tags work ok as menu pads */ *.menubar ul, *#menubar ul, *.myzzzinlinelis ul { list-style-image:none; } *.menubar li, *#menubar li, ul.zzzinlinelis li, *.myzzzinlinelis li { display:inline-block; padding-right:1em; padding-left:1em; background: white; border:0 silver solid; /* ZZZFAILStext-decoration:italic; */ font-style:italic; margin:.1em .1em; /* zzzfaILSline-height:90%; */ } /* LI. Works as an inline-block tada sb avoid font-size herein */ /* * ******** overview? ****** can a menu bar or blocks flow simply be divs or lis of style display:inline-block? with vertical-align:top or :middle can a wrapper, pby div, for that have text-align:center and be a way to make rule for divs or lis within to have same styles? Learned: inline-block avoids the lines overlapping that inline would do - inlinelis is styled for general use. docs may modify - sb retire *.menubar *.ilgrp *.ilgroup everywhere, all *.htms!, in favor of inlinelis! - block size and center alignment within are still issues 130715 13:00 - a menubar has pads with padding 0. Maybe will be white on navy? * */ /* * * *.tacenter is now usable for many divs and other objects * */ *.tacenter, *.inlinelis, *.menubar, *.ilgrp { text-align:center; } /* wrapper for wholesale div, li rules */ *.inlinelis div, *.inlinelis ul li, ul.inlinelis li, *.ilgrp div, *.ilgrp ul li { /* zzzdisplay:inline-block; */ display:inline-block; padding:0 0.1em 0 0.1em; /* zzzborder:0 red solid; */ margin:0.1em 0.1em; vertical-align: top; width:00.30em;height:00000.3em; text-align:center; background: white; border:thin white outset } /* sb avoid font-size herein ilgrp to be inlinelis risk any old stuff surprises? */ /* inlinelis etc., except when for a simple menubar, have some padding */ *.inlinelis div, *.inlinelis ul li, ul.inlinelis li, *.ilgrp div, *.ilgrp ul li {padding:1em 1em 1em 1em} *.inlinelis div img, *.inlinelis ul li img, ul.inlinelis li img, *.ilgrp div img, *.ilgrp ul li img {width:auto;height:9em} /* height here is to be a good common height. 9em? * would width and height respect a max-width: of, say, 8em? * * - events blocks and menu pad blocks align things in center * - other blocks usually align things left * Will do - - - - rgg.css defaults center * then leftward uses will depend on restyling the li or div, *or inclucing an art-styled div in the li or div * */ /* * * * Now, many imported from rg7.css for edits after july 16 2013 * * * */ /* added 20091207 20151030 but can just use btn styles for menu pads */ *.menupad, *.articlemenupad, *.rg-articlemenupad {margin-right:1.50em;margin-left:1.50em;border:none medium transparent;background-color:transparent;padding:8pt} img.ccards {margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em; border-width:0em;width:auto;height:2.00em} *.qqqrg-art-rg001, *.qqqrg-arttal20em, *.qqqrg-arttal44em , *.art-rg001, *.rg-art-rg001 { background:white; margin-top:0em;border:thin solid navy;padding:.5em; clear:both} /* * * Art0n series was new in rg7.css 20110211.. * */ /* * * About *.art01 * * [NOW overspecific if in rgg.css?? Rename something. The rgg.css version above to become art01b * ??] * * for the MAIN article in a div, and usually only that one main article. */ /* With subsequent articles likely best as art02 and art03. */ *.art01, *.art02, *.art03, *.art04, *.rg-art01, *.rg-art02, *.rg-art03, *.rg-art04 {font-family: Arial, Verdana, Helvetica, sans-serif} *.art01, *.rg-art01 {font-size:100%} *.art01 img, *.rg-art01 img {width:1.1111em;height:9.6em;text-align:center;vertical-align:middle;border:thick solid gray} /* * * About *.art02 * */ *.art02, *.rg-art02 {font-size:100%} /* * * About *.art03 * */ *.art03, *.rg-art03 {background:transparent;margin:0px;padding:0px; font-size:100%;} *.art03 span, *.rg-art03 span {font-size:80%} *.art03, *.rg-art03 img { text-align:center;vertical-align:middle;width:auto;height:9em;float:left;clear:none} /* s * * About *.art04 * */ *.art04, *.rg-art04 { width:77%;font-size:110%;background:white;clear:both;min-height:4.5em ;margin-top:0.5em;margin-bottom:0.5em;margin-left:auto;margin-right:auto ;border:thick silver outset;padding:1.5em 1.5em 1.5em 1.5em } *.art04 img, *.rg-art04 img { width:auto;height:5.5em; float:left;clear:none; margin:0 .5em .5em 0;border:0;padding:0 } /* workerschicago index.htm */ /* Create *.artplayer and more someday? */ /* ok too */ *.borderridgesilver {border:ridge 0.200em white;background:silver} /* added 20091207 has ended */ /* not added 20091207 bec pby already accomplished in this .css * body.bluss {background:silver;max-width:76.00em;margin-left:auto;margin-right:auto;background: *url("../3/bkg-blu2wht.gif") repeat-x #fffffe;} */ /* Modifying body.bluss style definition already here from rg7.css */ /* added 20100128 */ /* a good tab bar ..20101107 .,, mcpmn library page, needs * no div nor ul nor li nor table, but * all spans herein must be of styling classes: * *.tabendl *.tabspacer *.tab *.tabactive *.tabendr*. * * NOTE: I do menubar these days with inline buttons. Could have buttons set look ala tabs . . . . */ *.tabsbar {margin: 0px; border:0px /* IS a comment within curlybrackets a problem??????? * zzzborder-bottom: 1.5em solid pink; * zzzpadding: 1em; * * PROBLEM - linewrap of tabs is horrible. nbsp help?? * Spans work much better in wrap. * Now try as divs displaying inline-block????? ........ * */ ; font-size:120%; text-align:center; } /* * *.tabsbar rules group. For a tabs bar as an inline list .,, menubar. * But could easily be by inline blocks, as seen where? * The active tab will be page background color * and have transparent bottom border */ *.tabsbar li { display:inline-block; border-top: .1em solid yellow; border-left: .1em solid yellow; border-right: .1em solid yellow; } *.tab, *.rg-tab, *.rg-foldertab { width:33.333em; background:ivory; padding-right:1em;padding-left:1em; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid gray; border-right: .1em solid gray; border-bottom: .1em solid navy; border-left: .1em solid gray; } *.tabactive, *.rg-tabactive, *.rg-foldertabtabactive { width:33.333em; background:cornsilk; padding-right:1em;padding-left:1em; font-size:133.333%; margin-top: 1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid navy; border-right: .11em solid navy; border-bottom: .1em dashed transparent; border-left: .11em solid navy; } *.tabedge { /* THIS version without r or l is not ready to use yet */ background: red; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid transparent; width:1em; border-right: 1em; border-bottom: .1em solid navy; border-left: 0px solid navy; } *.tabedger { width:22.333em; background:transparent; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid transparent; border-right: 0px; border-bottom: .1em solid navy; border-left: .1em solid navy; } *.tabedgel { width:22.333em; background:transparent; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid transparent; border-right: .1em solid navy; border-bottom: .1em solid navy; border-left: 0px; } *.tabspacer { width:22.333em; background:transparent; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid transparent; border-right: 0px; border-bottom: .1em solid navy; border-left: 0px; } *.tabbarendr { width:22.333em; background:transparent; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid transparent; border-right: .1em solid transparent; border-bottom: .1em solid navy; border-left: 0px; } *.tabbarendl { width:22.333em; background:transparent; margin-top:1em;margin-right:0px;margin-bottom:1em;margin-left: 0px; border-top: .1em solid transparent; border-right: 0px; border-bottom: .1em solid navy; border-left: .1em solid transparent; } /* Leading underlines _ are bad xhtml. But here in case old pages need these styles. */ /* ok through here? yes */ /* * * some notes on inlinelis stuff * * [div id="" class="inlinelis"] * [div id="" ] * [div id="" class="arttal44em"] * [/div] * [/div] * [ul id=""] * [li id=""] * [div id="" class="arttal44em"] * [/div] * [/li] * [/ul] * [/div] * */ /* * * * * * PROBATION. Whether permanent rgg.css is uncertain for now. * * */ /* *** Active rule defs *** */ *.inlinelis ul li { width:29.5em;height:00000.3em; } /* Note: block width of .,, 000.1em works and gets expanded. 29.5em works for 2-up at first. */ /* * * hr.trib by rg * sb deprecate hr class=double it may have been used about once somewhere * */ *.rg-trib, *.rg-double, *.trib, *.double { margin:0; border-top:0.10em black solid; border-right:0; border-bottom:0.01em black solid; border-left:0;padding:0; height:.4em; } hr.rg-hrofbigdots {margin:0;border:0;border-top:thick dotted red;padding:0} /* * * * *.hasmbp by rg * A div, or any html object, can be made to have a margin and border and padding. * sb in rgg.css always as * margin:2em 2em 2em 2em;border:thin black solid;padding:1em 1em 1em 1em * *** */ *.hasmbp { margin:2em 2em 2em 2em;border:thin black solid;padding:1em 1em 1em 1em;} /* 5pm test above here is ok */ /* Some articles for 2-up at 1nnnx7nn replaced twoup class= in labitnhtm * sb now confer rce.htm * was inline-block, but that is for spans */ /* so what the hell is wrong with this - - - - - - - *.art2u, *.art2uil, *.art2uir, *.rg-art2u, *.rg-art2uil, *.rg-art2uir { AMAZING *.art2uil as a rule BLANKS THE HTML PAGE ENTIRELY (art2upil may work or not? ) - - - - - - SOMEHOW disabling *.art2uil here prevents whole page being blank - - - - - - - - - - */ *.art2u, *.art2qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqquil , *.rg-art2u, *.rg-art2qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqquil { display:inline; vertical-align: top; text-align:left; background:white; width:18.3em; max-width:18.3em; height:auto; margin:.5em;border:thick white outset; padding:1em; outline:medium white outset; } /* closing in seems above here too */ /* * WHY ONLY 18.3 em wide lest 1-up? * OUTLINE bec BORDER thickens a block and seems to fail anyway */ /* article for 2-up at 1nnnx7nn, and imgs leftward */ *.art2u img, *.art2uil img img , *.rg-art2u img, *.rg-art2uil img img { float:left;clear:none; margin:0.5em; border:0;padding:0; width:8.00em;max-width:8.00em;height:auto;max-height:11em; } /* ok three nooooooo so error is above here */ /* article for 2-up at 1nnnx7nn, and imgs rightward */ *.art2uir img, *.rg-art2uir img { float:right;clear:none; margin:.5em; border:0;padding:0; width:8.00em;max-width:8.00em;height:auto;max-height:11em; } /* ul.toc - - * HTML h1-h7? headings are to display inline-block instead of block. *** wrong? if inline-block is for spans only in IE8 * Oft h1 will not be within a ul.toc for a Table of Contents. */ ul.toc li h1, ul.toc li h2, ul.toc li h3, ul.toc li h4, ul.toc li h5, ul.toc li h6 { /* display:inline-block; */ display:inline-block; } /* *** * BODY.rg2013 is a new rg development standard, ok with html40css2.css 20130918 * * 61.569em * is the max displayable line width without horizontal scrolling * for ie8 html40css2.css on the 726 system monitor! * * Therefore 61.569em is a good rg standard fixed body width * to prevent other systems displaying too wide. * * - But values go up to 62.069em when html40css2.css is not imported or linked. * - And width will grow wider, and '100%' is wider, * whenever some IE8? FF? block content is wider and max-width: allows. * - So, MAYBE oft need min-width:61.569em; max-width:61.569em; width:61.569em; * * *** */ *.bodyrg2013 { width:61.569em; max-width:61.569em; min-width:61.569em; } *.artOLDTESTbodyrg2013, *.rg-artOLDTESTbodyrg2013 { background:#f0f9ff; color:#000000; font-family: Arial,Helvetica,'Arial Narrow',sans-serif; font-style: normal; font-weight: 500; width:61.569em; max-width:61.569em; min-width:61.569em; font-size:100%; } /* *.inlinethis. *.inlinevathis. New rules 20131217. * A wrapper to force a div to be inline-block. * The div can contain multiple blocks with group vertically middled. * Fails if float. cf bobgallie\.htm. Nesting is untested yet. */ *.inlinethis { display:inline-block; clear:none; float:none; margin:0;border:0;padding:0; } *.inlinevathis { display:inline-block; clear:none; float:none; margin:0;border:0;padding:0; vertical-align:middle; } *.w45e {width:45em} *.width45pc, *.width45c {width:45%} *.width90pc, *.width90c {width:90%} *.art61, *.rg-art61 { font-size:100.00%; text-align:center; margin:0; border:medium lightblue outset; padding:1.9em 1em 1.9em 1em; color:navy; background:white; } *.art61 h1, *.rg-art61 h1 { font-size:130%; } *.art61 img, *.rg-art61 img { width:auto;height:3em; margin:1em; } /* *.inlinethis, ilblock is inlinethis better? widths changes or dropping?? */ *.inlinethis, *.ilblock { display:inline-block; } /* * Sizing relative using font-size * * Many unproven * Tested: courier, xxl, * Need test or fix?: centerthis * Plan always to minimize .htmls needing .xh... */ *.smaller {font-size:80%} *.larger {font-size:120%} *.font70percent {font-size:70%;color:black;font-weight:300} *.xxs, *.xxsmall, *.pct040, *.pct40 {font-size:40%} *.xs, *.xsmall, *.pct060, *.pct60 {font-size:60%} *.small, *.smaller, *.pct080, *.pct80 {font-size:80%} *.medium, *.pct100 {font-size:100%} *.large, *.big, *.bigger, *.pct120 {font-size:120%} *.xl, *.xlarge, *.pct180 {font-size:180%} *.doublesize {font-size:200%} *.xxl, *.xxlarge, *.pct220 {font-size:220%} *.sans-serif {font-family:helvetica,arial,sans-serif} *.serif {font-family:'times new roman',serif} *.gothic {font-family:'todds manuscript','times new roman',serif} *.courier {font-family:courier,monospace} *.italic {font-style:italic} *.grnylw {color:green;background:yellow} *.whtblk {color:white;background:black} *.blkwht {color:black;background:white} *.brnylw {color:brown;background:yellow} *.navtra {color:navy;background:transparent} *.rg-bkg1, *.rg-bkg0001, *.bkg0001 {background:#cde url("../3/bkg0001.jpg")} /* mmnb4 .jpg == bkg0001.jpg. Both #cde */ *.wah300e {width:auto;height:3.00em} /* Height of 3.00em with width of auto */ *.wah600e {width:auto;height:6.00em} /* Height of 6.00em with width of auto */ *.wah900e {width:auto;height:9.00em} /* Height of 9.00em with width of auto */ *.wah1200e {width:auto;height:12.00em} /* Height of 12.00em with width of auto */ *.wah1500e {width:auto;height:15.00em} /* Height of 15.00em with width of auto */ *.wah1800e {width:auto;height:18.00em} /* Height of 18.00em with width of auto */ *.wah2100e {width:auto;height:21.00em} /* Height of 21.00em with width of auto */ *.w2950e {width:29.50em} /* Width 29.50em is good for 2-up blocks on IE8 standard startup body */ *.classhowhuh6 {width:29.50em;max-width:29.50em;min-width:29.50em;margin:0;padding:0} /* Tried for rce.htm to lose many style= on jan 13 2015 eg rce.htm */ *.w5060e {width:50.60em} /* Width 50.60em is good what? text line in IE8 standard startup body */ /* Firefox (bec optional 726 setting?) is currently showing alt= contents as img subtitles. ? or shown when the given graphic filespec is not available? */ /* IE8 is making div containers overwide */ /* * *.artrce01 is vvvuseful * Some rems were once within the rule braces - - * This look is ala rce.htm articles as 2015 begins, maybe as 2014 began * Often the article is within 29.50em width blocks? * fffff9 = white less a bit of blue * font-style -weight -transform allcaps . . . * centered centerer valign issues? * avoiding specifying width and height in this article 'look' rules group */ *.artrce01, *.rg-artrce01 { background:#fffff9 ; margin-right:20em;margin-left:20em; border: thiCK white outset; padding:1.20em; font-family:'times new roman',serif; } /* *** Chicklets blocks, my best currently, are inline-block spans, and v-a middle, and bordered outset These inline-block spans can contain divs of most any styles. wrapper, has align rule span, inline-block, so can treat as div article, e.g a div/div *** */ span.ilblockspan {display:inline-block ;vertical-align:middle} /* Handle a span as if an inline block FF via div too maybe? */ /* art... feb 2014 new group */ /* *********** */ /* widths available as classes for objects, in em: * e.g.?: class="w6157 centerthese" */ /* 61.57em may generally be a good fixed page width. Do tests with IE8 browser app launches. /2=3078.5 /3=2052.3 /4=1539.25 x2/3=4104.7 x3/4=4617.75 . */ *.w6157, *.w3078, *.w2052, *.w1539, *.w4104, *.w4617, *.w5790, *.w5790bos, *.w5790bosdib { width:57.90em;height:auto; margin:0; } *.w2625, *.w2625bos, *.w2625bosdib { width:26.25em;height:auto; margin:0; } /* div of width nn.nnem and border outset: */ *.bos, *.bosdib, *.w5790bos, *.w2625bos, *.w5790bosdib, *.w2625bosdib { /* restyling */ border:medium white outset; padding:1em; background:white; color:navy; } /* div of width nn.nnem and border outset, and display inline-block: */ *.dib, *.bosdib, *.w5790bosdib, *.w2625bosdib { /* restyling */ display:inline-block; text-align:center; vertical-align:middle; } /* div img ht in these divs */ *.w5790bos img, *.w2625bos img, *.w5790bosdib img, *.w2625bosdib img { /* restyling */ width:auto;height:11em; } *.menubar div { color:navy; background:cornsilk; padding-top:0; padding-bottom:0; } *.menubar div a { font-weight:700; } *.bkg0001jpg {background:#cde url("../3/bkg0001.jpg")} /* mmnb4 .jpg == bkg0001.jpg. */ /* Note: A page might often use body as the cascade has styled it. A page might often use its own classes named *.xhbody or *.xhalabody or body.xh or body.xhbody. Body and other blocks can use the classes found in cascaded stylesheets. */ *.tvframe { margin-bottom:0; background:gray; text-align:center; border:0.9em silver ridge; width:48em;height:27em; } *.tvframe { /* restyling */ background:lime;} /* HOW less height??? */ *.pedestalcolumn { margin-top:0;margin-bottom:0; border:0; padding:0; background:silver;text-align:center; font-size:222.22%; width:13em; color:white; } *.pedestalbase { margin-top:0; background:silver;text-align:center; border:thick white outset; width:44.0em;height:0.005em; } /* ****** div id=tvscreen zzzstyle= margin-bottom:0; background: green;text-align:center; border:1.00em RIDGE white; width:48em;height:27em; TV Screen /div div id=tvstandcolumn HOW less height??? style= zzzheight:0.001em; zzzmax-height:0.001em; margin-top:0;margin-bottom:0; zzzborder:.001em solid silver; border:0; padding:0; background:silver;text-align:center; font-size:222.22%; width:13em; color:white; TV AD /div div id=tvstandbase style= margin-top:0; background:silver;text-align:center; border:0.05em ridge silver; width:44.0em;height:0.005em; /div doesthisrulework rule can be a way of testing rules are created through a .css place ***** */ *.doesthisrulework {background:red} /* XH xhinline temp group . . . sb someday no xh in .csses, and as an art????? */ /* was for a test *.inlinelis {color:red} */ /* moot? *.inlinelis {text-align: center; */ /* MARGIN-RIGHT: auto; MARGIN-LEFT: auto; BORDER:thick solid silver; PADDING-TOP: 1.600em; PADDING-RIGHT: 1.600em; PADDING-BOTTOM: 0.000em; PADDING-LEFT: 0.00em; background: cornsilk url("clothcreambkg.gif") repeat; WIDTH: 95%; VERTICAL-ALIGN: middle; */ /* Eyeball 726 sez use asymetrical padding values */ /* The parent of this div should? often to have text-align center ?? */ *.inlinelis UL { LIST-STYLE-TYPE: none; } *.inlinelis UL LI { Margin: 0.750em; border: 0.00em solid black; padding: 0.75em; DISPLAY: inline-block; VERTICAL-ALIGN: middle; text-align: center; FONT-WEIGHT: bold; BACKGROUND: transparent} /* *.inlinelis UL LI IMG {} */ *.inlinelis UL LI P {WIDTH: auto} /* Was 1px, but auto works okay here. */ /* A *.inlinelis OL group just like the UL group ******** */ *.inlinelis OL { LIST-STYLE-TYPE: none; } *.inlinelis OL LI { Margin: 0.750em; border: 0.00em solid black; padding: 0.75em; DISPLAY: inline-block; VERTICAL-ALIGN: middle; text-align: center; FONT-WEIGHT: bold; BACKGROUND: transparent} /* *.inlinelis OL LI IMG {} */ *.inlinelis OL LI P {WIDTH: auto} /* Was 1px, but auto works okay here. */ /* end of inline temp group . . . sb notes where if anywhere these work */ /* * * * */ /* Containers. Some basic containers. And see ibed and arts. sb have rg- too? */ *.m0b0p0, *.ibed, *.container, *.containervatop, *.containervamiddle, *.containervabottom, *.containerstatic, *.containerrelative, *.containerabsolute, *.centerer, *.centerthese, *.leftthese, *.lefter, *.rightthese, *.righter, *.justifythese, *.justifier {margin:0;border:0;padding:0;background-color:transparent ;text-align:justify} *.centerer, *.centerthese {/* restyling */ text-align:center} *.leftthese, *.lefter {/* restyling */ text-align:left} *.rightthese, *.righter {/* restyling */ text-align:right} *.justifythese, *.justifier {/* restyling */ text-align:justify} *.containerstatic {/*restyling */ position:static} *.containerrelative {/*restyling */ position:relative} *.containerabsolute {/*restyling */ position:absolute} *.ibed {display:inline-block} /* container is an inline block */ *.redbackground {background:red} *.containervatop {/* restyling */ vertical-align:top} *.containervamiddle {/* restyling */ vertical-align:middle /* use rg-ibvamiddle instead */} *.containervabottom {/* restyling */ vertical-align:bottom} /* unready imitation of MS Office Help styles */ /* sb name this as artmsoh?? */ *.msoh_body {font-family:arial,sans-serif;font-size:100%;font-weight:normal;} *.msoh_h1 {font-family:serif;color:blue;font-size:155%;font-weight:bold} *.msoh_pre {font-family:monospace; font-size:100%;font-weight:normal} *.msoh_ul_pre {font-family:monospace; font-size:122%;font-weight:bold} *.msoh_ul_li {font-family:arial,sans-serif;font-size:100%;font-weight:normal;} *.msoh_li {font-family:arial,sans-serif;font-size:100%;font-weight:normal;} *.msoh_ul_li_nt {font-family:arial,sans-serif;color:pink ;font-size:122%;font-weight:normal;} *.msoh_ul_li_lt1 {font-family:arial,sans-serif;font-size:100%;font-weight:normal;} *.msoh_p_t {font-family:arial,sans-serif;font-size:100%;font-weight:normal; font-style:italic;} /* * * * */ /* btns, buttons, and pads - Sb Always wrap the text or anchor in a class=containervamiddle? - sb Use or emulate w3-btn-... pby... Wrap in a w3-row[-padding] often? - Also available is the a tag, which may be styled. */ *.btn, *.button, *.button2, *.buttontab, *.buttontab2 { display:inline-block; color:black;background:lightblue;width:auto;height:1.5em;margin:0.0em 0.0em 0.0em 0.0em ;border:black thin outset;padding:0.0em 0.5em 0.0em 0.5em;font-weight:900; box-shadow:0.0em 0.0em 0.1em 0.1em ;text-align:center;vertical-align:middle; } *.buttontab, *.buttontab2 {/* restyling */ background:yellow;border-radius:0.666em 0.666em 0 0} /* buttons' links */ /* a unvisited HTML2 had #0000EE, a blue? */ *.button a:link, *.buttontab a:link {/* restyling */ color:black;font-weight:600;text-decoration:none} /* New, for any img within an a. ok? */ *.button a:link img, *.buttontab a:link img {/* restyling */ background-color:transparent} /* visited links no color change here to a current visited style except img border */ *.button a:visited img, *.buttontab a:visited img {background-color:cornsilk} /* a hover #eee is light gray */ *.button a:hover, *.buttontab a:hover {/* restyling */ background-color:#eee;text-decoration:underline;} /* a active While loading target */ *.button a:active, *.buttontab a:active {/* restyling */ color:blue;text-decoration:underline} *.rg-btn, *.rg-button, *.rg-button2, *.rg-buttontab, *.rg-buttontab2 { display:inline-block; color:black;background:lightblue;width:auto;height:1.5em;margin:0.0em 0.0em 0.0em 0.0em ;border:black thin outset;padding:0.0em 0.5em 0.0em 0.5em;font-weight:900; box-shadow:0.0em 0.0em 0.1em 0.1em ;text-align:center;vertical-align:middle; } *.rg-buttontab, *.rg-buttontab2 {/* restyling */ background:yellow;border-radius:0.666em 0.666em 0 0} /* rg-buttons' links */ /* a unvisited HTML2 had #0000EE, a blue? */ *.rg-button a:link, *.rg-buttontab a:link {/* restyling */ color:black;font-weight:600;text-decoration:none} /* New, for any img within an a. ok? */ *.rg-button a:link img, *.rg-buttontab a:link img {/* restyling */ background-color:transparent} /* visited links no color change here to a current visited style except img border */ *.rg-button a:visited img, *.rg-buttontab a:visited img {background-color:cornsilk} /* a hover #eee is light gray */ *.rg-button a:hover, *.rg-buttontab a:hover {/* restyling */ background-color:#eee;text-decoration:underline;} /* a active While loading target */ *.rg-button a:active, *.rg-buttontab a:active {/* restyling */ color:blue;text-decoration:underline} /* ********* sb move these to rgg.css someday ******** */ *.w800px {width:800px;max-width:800px;min-width:800px;margin:0;border:0;padding:0} *.w888px {width:888px;max-width:888px;min-width:888px;margin:0;border:0;padding:0} *.w1third {width:32.44%;max-width:32.44%;min-width:32.44%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w2third {width:66.00044%;max-width:66.00044%;min-width:66.00044%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w1fourth {width:22.00044%;max-width:22.00044%;min-width:22.00044%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w3fourth {width:72.00044%;max-width:72.00044%;min-width:72.00044%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w1half {width:48.00044%;max-width:48.00044%;min-width:48.00044%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w1fifth {width:19%;max-width:19%;min-width:19%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w2fifth {width:38.00044%;max-width:38.00044%;min-width:38.00044%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w3fifth {width:57%;max-width:57%;min-width:57%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} *.w4fifth {width:77.00044%;max-width:77.00044%;min-width:77.00044%;display:inline-block;vertical-align:top;margin:0;border:0;padding:0} /* columns based on style3.css see if can do without style3.css now. were ala #column_r P rule became *. rules try disabling parts */ *.column_l,*.aside,*.asideleft { PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #fff; MARGIN: 0px; PADDING-LEFT: 15px; WIDTH: 728px; PADDING-RIGHT: 15px; FLOAT: left; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px } *.column_r, *.asideright { POSITION: relative; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #a9a9a9; MARGIN: 0px; PADDING-LEFT: 4px; WIDTH: 250px; PADDING-RIGHT: 4px; FLOAT: right; TOP: 0px; PADDING-TOP: 4px; LEFT: -6px } *.column_r P {MARGIN: 7px; FONT-SIZE: 11px} *#column_l { PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #fff; MARGIN: 0px; PADDING-LEFT: 15px; WIDTH: 728px; PADDING-RIGHT: 15px; FLOAT: left; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px } *#column_r { POSITION: relative; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #a9a9a9; MARGIN: 0px; PADDING-LEFT: 4px; WIDTH: 250px; PADDING-RIGHT: 4px; FLOAT: right; TOP: 0px; PADDING-TOP: 4px; LEFT: -6px } *#column_r P {MARGIN: 7px; FONT-SIZE: 11px} *.tlabsolute {position:absolute;top:0em;left:0em} /* A block, e.g. #banner2, that contains absolutely positioned objects should itself be position:relative and have a specified height */ /* * * height:0.099em here is vs [conflicting..........] a prior w3.css forcing of height as 0 * */ hr {height:0.099em} /* Some ruless now Unnec here in rgg.css since have begun presuming and favoring a prior link to 2016 w3.css. */ /* CARDS from w3.css 2016april. Cards have box-shadow 2 4 8 12 16 24px. No -20. */ *.rg-card{border:1px solid #ccc} *.rg-card-2,*.rg-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important} *.rg-card-4{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important} *.rg-card-2,*.rg-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important} *.rg-card-4{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important} *.rg-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important} *.rg-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important} *.rg-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21) !important} *.rg-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22) !important} /* ANIMATION from w3.css 2016april */ *.WASw3-animate-opacity, *.rg-animate-opacity { -webkit-animation-name:opac;-webkit-animation-duration:4s;animation-name:opac;animation-duration:4s} /* ***** rg-artmmnb20. RG uses often. Big img. Shadow. Nice. ok now tho some % widths sb 28.000em - - mmnb\index.htm 3\labitn.htm ccom\index.htm 3\rce.htm ... rg-artmmnb20 group includes the object, its img, and its h3. E.g., index.htm of mmnb\. Note that later restylings overrule earlier stylings. Plan need testing ??? ?? art are not to set width or height? Or may set them and may be overruled by page HEAD style/style sedtion having a restyling ala rg-artmmnb20 width: 25em?; height: how?. width of 25?em seems good for inline objects just below 2-across on normal user screen? */ *.rg-artmmnb, *.rg-artmmnb20 { margin:1em; padding:1em; background:ivory; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important} *.rg-artmmnb, *.rg-artmmnb20 {display:inline-block; margin:0.5em 0.5em 0.5em 0.5em;vertical-align: top} *.rg-artmmnb, *.rg-artmmnb20 {width:100%; max-width:100%} /* ***** testing new width since 2017oct13 45em oft triggering just 1 block across. so, 44em. *** New. *.rg-artmmnb [no 20] will not designate a width, leaving that for class=... or style=.... sb Someday drop class rg-artmmnb20 universally, when width is everywhere by class= style= . */ *.rg-artmmnb20 {width:44em;max-width:44em;min-width:44em} /* not for *.rg-artmmnb20 */ *.rg-artmmnb, *.rg-artmmnb20 {text-align:center} *.rg-artmmnb, *.rg-artmmnb20 {margin:0.50000em /* DISABLING BEC \MMNB\index.htm, etc., will do with a restyle of *rg-artmmnb20 for maybe width:28.000em 20170117 edited. was45% what sets the height? */} /* Hover was long for just divs. sb avoid making hovered exactly like nonhovered */ *.rg-artmmnb:hover, *.rg-artmmnb20:hover{ box-shadow:0 14px 18px 0 rgba(0,0,0,0.2),0 11px 33px 0 rgba(0,0,0,0.29)!important} *.rg-artmmnb, *.rg-artmmnb20 { border-radius: 4% } *.rg-artmmnb > h3, *.rg-artmmnb20 > h3 { font-size:125%; color:navy;font-weight:700;font-family:verdana,arial,sans-serif;text-align:center} /* sb? But maybe AVOID using >s, bec sometimes an a tag encoloses the image? What is css + for? Double check liunl order vss css cascade priority. How clone with another name a rule preexisting in the cascade? */ /* 20170722 additions. may change some rules above - - - - */ *.rg-artmmnb > h1, *.rg-artmmnb20 > h1, *.rg-artmmnb > h2, *.rg-artmmnb20 > h2, *.rg-artmmnb > h3, *.rg-artmmnb20 > h3, *.rg-artmmnb > h4, *.rg-artmmnb20 > h4, *.rg-artmmnb > h5, *.rg-artmmnb20 > h5, *.rg-artmmnb > h6, *.rg-artmmnb20 > h6 {color:navy;font-weight:700;font-family:verdana,arial,sans-serif;text-align:center} /* w3.css defaults to body 15px, h1 36px, h2 30px, h3 24px, h4 20px, h5 18px, h6 16px */ *.rg-artmmnb > h1, *.rg-artmmnb20 > h1 {font-size:2.40000em} *.rg-artmmnb > h2, *.rg-artmmnb20 > h2 {font-size:2.00000em} *.rg-artmmnb > h3, *.rg-artmmnb20 > h3 {font-size:1.60000em} *.rg-artmmnb > h4, *.rg-artmmnb20 > h4 {font-size:1.30333em} *.rg-artmmnb > h5, *.rg-artmmnb20 > h5 {font-size:1.20000em} *.rg-artmmnb > h6, *.rg-artmmnb20 > h6 {font-size:1.06667em} *.rg-artmmnb > h3 > span, *.rg-artmmnb20 > h3 > span {font-size:75%} *.rg-artmmnb > img, *.rg-artmmnb20 > img {width:93%;height:auto; unnecoverflowsbwhat:none; max-width:93%; max-height:22.22222em} /* 20170722 changed to em - - - - */ *.rg-artmmnb > img, *.rg-artmmnb20 > img {width:9.30000em;height:auto; unnecoverflowsbwhat:none; max-width:9.30000em; max-height:22.22222em} *.zzzzzzzzzzzzzzzzzzzzzznotforsignszzzzzzzrg-artmmnb20 > img { border:thick outset silver;margin:0.25em;border-radius:08%;padding:0} /* mmnb group has ended */ *.developing, *.developing div, *.divs div, *.bordered, *.bordered * {border:1.00000px magenta solid} /* To test here: bordered *. universal object outlining ... Time consumong? Affects many objects. Is w3-border similar, better? Can use page HTML HEAD style/style redefinitions. for thick blue dotted or ... */ /* * * * */ /* ANIMATIONS. w3-animate-... based on w3.css ver271 Pby will all test ok as rg- . . . zoom opacity fading top bottom right left input spin */ /* NOTES - SOME animate below were customized by rg after w3- vers . . . - Is there any {} nesting issue?????? - xh- ver is being used now in caps/index.htm */ *.rg-spin{animation:rg-spin 2s infinite linear;-webkit-animation:rg-spin 2s infinite linear} @-webkit-keyframes rg-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}} @keyframes rg-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}} *.WASw3-spin{animation:w3-spin 2s infinite linear;-webkit-animation:w3-spin 2s infinite linear} @-webkit-keyframes w3-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}} @keyframes w3-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}} *.rg-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite} *.rg-animate-fading{animation:fading 0s infinite}@keyframes fading{0%{opacity:0}50%{opacity:0.660}100%{opacity:0}} @-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} @keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} *.WASw3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite} @-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} @keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} *.rg-animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s} @-webkit-keyframes opac{from{opacity:0} to{opacity:1}} @keyframes opac{from{opacity:0} to{opacity:1}} *.WASw3-animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s} @-webkit-keyframes opac{from{opacity:0} to{opacity:1}} @keyframes opac{from{opacity:0} to{opacity:1}} *.rg-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s} @-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} @keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} *.WASw3-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s} @-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} @keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} *.rg-animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s} @-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} *.WASw3-animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s} @-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} *.rg-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s} @-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} @keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} *.WASw3-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s} @-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} @keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} *.rg-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s} @-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}} @keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} *.WASw3-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s} @-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}} @keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} *.rg-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s} @-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}} @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} *.WASw3-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s} @-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}} @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} *.rg-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out} *.WASw3-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out} *.rg-animate-input:focus{width:100%!important} *.WASw3-animate-input:focus{width:100%!important} /* - - - */ *.rg-animate-opacity /* w3- has 4s 4s 0 1 0 1 */ { -webkit-animation-name:opac;-webkit-animation-duration:4s;animation-name:opac;animation-duration:4s} @-webkit-keyframes opac{from{opacity:0} to{opacity:1}} @keyframes opac{from{opacity:0} to{opacity:1}} *.rg-animate-opacity50pc{ -webkit-animation-name:opac;-webkit-animation-duration:8s;animation-name:opac;animation-duration:8s} @-webkit-keyframes opac{from{opacity:0} to{opacity:.5}} @keyframes opac{from{opacity:0} to{opacity:.5}} *.rg-transparent{background-color:transparent!important} *.WASw3-transparent{background-color:transparent!important} /* ***** rg-arts2col. A block of ul articles with li columns */ /* ala w3- container? w3-??? .... cf. 3dems\demo- ...htm */ *.rg-arts2col {width:100%} *.rg-arts2col ul {display:inline} *.rg-arts2col ul li {width: 45.00000%; display:inline-block;vertical-align:top} /* Same-width cols. In same line/row. */ *.rg-arts2col ul li h3 {font-size:1.5em} *.rg-arts2col ul li img, *.rg-arts2col ul li p {width:100%;text-align:left} /* navigation block, for #navh1, navhbot, etc. - the navigation pads can be any inline blocks, or from here, subordinate article pads on line bottoms - containing nav or article or div or any block can do text-align:center or w3-center - pads can be A tags - pads can be class=rg-foldertab... - pads can be class=rg-foldertabactive????????... - nav with vertical list is done how ... */ nav, *.nav, *.navh {text-align:center;border:thin silver solid} nav article, *.nav article, nav *.rg-pad, *.nav *.rg-pad {display:inline-block;margin:0 .1em 0 .1em;border:thin silver solid;padding:0 .1em 0 .1em;text-align:center;vertical-align:bottom} *.rg-foldertab {vertical-align:bottom;display:inline-block;padding:0 3em 0 3em;background:ivory;color:navy;border:thin silver solid;border-radius:1em 1em 0 0;min-width:1em;max-width:44.44444%;text-align:center;border-bottom:0} /* note for where? display: is normally block - - div p hr br h123456 header main section footer #id= that begin with bwb- blb- (A bwb- trilevel family is often: section > #bwb-wmyartgroup > section #myartgroup > article #myart99) table? row? cell? ul ol li [unless -inline] caption? display: is normally NOT block - - (rg is normally to avoid using any nonblock as the immediate child of body/body, instead always using a nonblock, nonabsolute container) a/a article button scan video audio canvas progress w3-button w3-btn w3-tag w3-badge w3-card w3-display-[all except w3-display-container] bs-[many] Sb Recheck these table button w3-button cell w3-card style [maybe with scoped=scoped] */ *.bwb, *.rg-bwb, *.blb, *.rg-blb { display:block;width:100%; position:relative; margin:0;border:0;padding:0; font-size:100%; clear:both;float:none;background-color:transparent; text-align:center /* but often sub blocks should be made left, not center */; } /* E.g., a section or span or ib set ala a body-width block */ /* unready 171011j ************* #ids for absolute are to begin z_ *************** */ *.rg-maskmyparentWAS { position:absolute;top:0em;left:0em; background-color:gray; background-position:50% 50%; background-size:55.11111%; } *.rg-centeredlr, *.rg-centered {margin:0 auto 0 auto} /* not for inlines? testing nec. fails when, why??? */ *.rg-valign-middle {vertical-align:middle!important} /* not -top */ *.rg-valign-top {vertical-align:top!important} *.rg-valign-bottom {vertical-align:bottom!important} *.rg-talign-center {text-align:center!important} /* w3-center adds important */ *.rg-talign-left {text-align:left!important} /* w3-left-align adds important */ *.rg-talign-right {text-align:right!important} /* w3-right-align adds important */ *.rg-talign-justify {text-align:justify!important} /* w3-justify adds important. does justify work?? */ *.rg-wirepaper {text-align:left;border-right:1em dotted gray;border-left:1em dotted gray;background:white;padding:1em;font-family:monospace,serif; zzzzzzzzzwidth:100%} *.rg-reddots, *.rg-reddotted {outline:thick red dotted} /* theme demo development but rg- cannot incorporate or substitute w3.css styles?????????? */ *.rg-artw3theme {font-size:11%} *.rg-artw3theme h3, *.rg-artw3theme h4, *.rg-artw3theme h5, *.rg-artw3theme h6 {font-size:1444.44%} *.rg-m0b0p0 {margin:0;border:0;padding:0} /* new to rgg.css butsb just not w3- way, hr class= w3-row?? w3-white w3-jumbo */ *.rg-divider-white, *.rg-divider-black, *.rg-divider-grey , *.rg-divider-red, *.rg-divider-orange, *.rg-divider-yellow, *.rg-divider-blue, *.rg-divider-green, *.rg-divider-violet {background:black;width:100%;height:1em} *.rg-divider-white {background:white} *.rg-divider-black {background:black} *.rg-divider-red {background:red} *.rg-divider-orange {background:orange} *.rg-divider-yellow {background:yellow} *.rg-divider-blue {background:blue} *.rg-divider-green {background:green} *.rg-divider-violet {background:violet /* magenta? indigo? */} /* */ *.rg-backgroundredgif {background:url("../3/red.gif")} /* rg-artcaps 20180504 - may add e.g., rg-w2up rg-artcaps is preferred to rg-artcaps20 */ *.rg-artcaps, *.rg-artcaps-il, *.rg-artcaps-ir, *.rg-artcaps-ij, *.rg-artcaps-in, * *.rg-artcaps-ic /* whaaa?? */ { display:inline-block; zzzwidth:66.33333%; color:black;background:ivory; margin:1.00em;padding:1.88em;border-radius:0.70em; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important; font-family:'times new roman', serif ;vertical-align: top } *.rg-artcaps h1, *.rg-artcaps h2, *.rg-artcaps h3, *.rg-artcaps h4, *.rg-artcaps h5, *.rg-artcaps h6, *.rg-artcaps-il h1, *.rg-artcaps-il h2, *.rg-artcaps-il h3, *.rg-artcaps-il h4, *.rg-artcaps-il h5, *.rg-artcaps-il h6, *.rg-artcaps-ir h1, *.rg-artcaps-ir h2, *.rg-artcaps-ir h3, *.rg-artcaps-ir h4, *.rg-artcaps-ir h5, *.rg-artcaps-ir h6 {color:navy;background:transparent;text-align:center; font-size:188%} *.rg-artcaps h1, *.rg-artcaps-il h1, *.rg-artcaps-ir h1 {font-size:300%} *.rg-artcaps h2, *.rg-artcaps-il h2, *.rg-artcaps-ir h2 {font-size:200%} *.rg-artcaps h3, *.rg-artcaps-il h3, *.rg-artcaps-ir h3 {font-size:188%} *.rg-artcaps h4, *.rg-artcaps-il h4, *.rg-artcaps-ir h4 {font-size:080%} *.rg-artcaps h5, *.rg-artcaps-il h5, *.rg-artcaps-ir h5 {font-size:060%} *.rg-artcaps h6, *.rg-artcaps-il h6, *.rg-artcaps-ir h6 {font-size:040%} *.rg-artcaps img, *.rg-artcaps-il img, *.rg-artcaps-ir img, *.rg-artcaps-ij img, *.rg-artcaps-ic img, *.rg-artcaps-in img {width:auto;height:6.33333em; float:left /* invalid seems when float: justify, center, or none */;margin:1.30em 1.33333em 1.33333em 1em /* trbl pby */} *.rg-artcaps-il img {float:left} *.rg-artcaps-ir img {float:right} *.rg-artcaps-in img {float:none /* none */} *.rg-artcaps p, *.rg-artcaps-il p, *.rg-artcaps-ir p {font-size: 133%;text-align:left} /* css uses > for immediately under, but blank for any under */ *.rg-artcaps div, *.rg-artcaps-il div, *.rg-artcaps-ir div {outline:thick transparent dotted} /* transparent unless is red to flag divs */ /* 20170722 additions. may change some rules above - - - - */ *.rg-artcaps > h1, *.rg-artcaps > h2, *.rg-artcaps > h3, *.rg-artcaps > h4, *.rg-artcaps > h5, *.rg-artcaps > h6 {color:navy;font-weight:700;font-family:verdana,arial,sans-serif;text-align:center} /* w3.css defaults to body 15px, h1 36px, h2 30px, h3 24px, h4 20px, h5 18px, h6 16px */ *.rg-artcaps > h1 {font-size:2.40000em} *.rg-artcaps > h2 {font-size:2.00000em} *.rg-artcaps > h3 {font-size:1.60000em} *.rg-artcaps > h4 {font-size:1.30333em} *.rg-artcaps > h5 {font-size:1.20000em} *.rg-artcaps > h6 {font-size:1.06667em} *.rg-artcaps > h3 > span {font-size:75%} /* 20170722 changed to em - - - - */ *.rg-artcaps > img {width:9.30000em;height:auto; unnecoverflowsbwhat:none; max-width:9.30000em; max-height:22.22222em} /* rg-artcaps20 20170508 BUT deprecate the 20. prefer rg-artcaps. */ *.rg-artcaps20, *.rg-artcaps20-il, *.rg-artcaps20-ir, *.rg-artcaps20-ij, *.rg-artcaps20-in, * *.rg-artcaps20-ic { display:inline-block; zzzwidth:66.33333%; color:black;background:ivory; margin:1.00em;padding:1.88em;border-radius:0.70em; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important; font-family:'times new roman', serif ;vertical-align: top } *.rg-artcaps20 h1, *.rg-artcaps20 h2, *.rg-artcaps20 h3, *.rg-artcaps20 h4, *.rg-artcaps20 h5, *.rg-artcaps20 h6, *.rg-artcaps20-il h1, *.rg-artcaps20-il h2, *.rg-artcaps20-il h3, *.rg-artcaps20-il h4, *.rg-artcaps20-il h5, *.rg-artcaps20-il h6, *.rg-artcaps20-ir h1, *.rg-artcaps20-ir h2, *.rg-artcaps20-ir h3, *.rg-artcaps20-ir h4, *.rg-artcaps20-ir h5, *.rg-artcaps20-ir h6 {color:navy;background:transparent;text-align:center; font-size:188%} *.rg-artcaps20 h1, *.rg-artcaps20-il h1, *.rg-artcaps20-ir h1 {font-size:300%} *.rg-artcaps20 h2, *.rg-artcaps20-il h2, *.rg-artcaps20-ir h2 {font-size:200%} *.rg-artcaps20 h3, *.rg-artcaps20-il h3, *.rg-artcaps20-ir h3 {font-size:188%} *.rg-artcaps20 h4, *.rg-artcaps20-il h4, *.rg-artcaps20-ir h4 {font-size:080%} *.rg-artcaps20 h5, *.rg-artcaps20-il h5, *.rg-artcaps20-ir h5 {font-size:060%} *.rg-artcaps20 h6, *.rg-artcaps20-il h6, *.rg-artcaps20-ir h6 {font-size:040%} *.rg-artcaps20 img, *.rg-artcaps20-il img, *.rg-artcaps20-ir img, *.rg-artcaps20-ij img, *.rg-artcaps20-ic img, *.rg-artcaps20-in img {width:auto;height:6.33333em; float:left /* invalid seems when float: justify, center, or none */;margin:1.30em 1.33333em 1.33333em 1em /* trbl pby */} *.rg-artcaps20-il img {float:left} *.rg-artcaps20-ir img {float:right} *.rg-artcaps20-in img {float:none /* none */} *.rg-artcaps20 p, *.rg-artcaps20-il p, *.rg-artcaps20-ir p {font-size: 133%;text-align:left} /* css uses > for immediately under, but blank for any under */ *.rg-artcaps20 div, *.rg-artcaps20-il div, *.rg-artcaps20-ir div {outline:thick transparent dotted} /* transparent unless is red to flag divs */ /* 20170722 additions. may change some rules above - - - - */ *.rg-artcaps20 > h1, *.rg-artcaps20 > h2, *.rg-artcaps20 > h3, *.rg-artcaps20 > h4, *.rg-artcaps20 > h5, *.rg-artcaps20 > h6 {color:navy;font-weight:700;font-family:verdana,arial,sans-serif;text-align:center} /* w3.css defaults to body 15px, h1 36px, h2 30px, h3 24px, h4 20px, h5 18px, h6 16px */ *.rg-artcaps20 > h1 {font-size:2.40000em} *.rg-artcaps20 > h2 {font-size:2.00000em} *.rg-artcaps20 > h3 {font-size:1.60000em} *.rg-artcaps20 > h4 {font-size:1.30333em} *.rg-artcaps20 > h5 {font-size:1.20000em} *.rg-artcaps20 > h6 {font-size:1.06667em} *.rg-artcaps20 > h3 > span {font-size:75%} /* 20170722 changed to em - - - - */ *.rg-artcaps20 > img {width:9.30000em;height:auto; unnecoverflowsbwhat:none; max-width:9.30000em; max-height:22.22222em} /* Special :first-letter and :first-line text rules by bg But float nec huh ????? FirstLineSmallCaps is dependent on float left or right! float:Left; clear:none; Float ruins text wrapping sidebar! True! FirstLetterLarge is flawed when window narrows! */ *.FirstLetterLargeAndFirstLineSmallCaps:first-letter {font-size: 200%; float: left} *.FirstLetterLargeAndFirstLineSmallCaps:first-line {font-variant: small-caps} *.FirstLetterLarge:first-letter {font-size: 200%; float:left} *.FirstLineSmallCaps:first-line {font-variant:small-caps} /* SB Reset these values huhhhhhh sb?? Rid the importants huhhhhhhhhh */ /* Work okay. Tested.: 72em 99.11111 45 29.11111 19.11111 13.11111. */ /* formla is huhhhhhhhhhh width = (097.11111??/2 ... ) = 45em. /3 = em. /4 = em. /5 = em. */ *.rg-1up {width:99.11111em!important} /* WHATTTTTTTTTTTTTTTTem 99?? seems a good normal rg-w1up */ *.rg-w1up-narrow {width:73em!important} /* 72em seems a good normal rg-w1up-narrow */ *.rg-w59em {width:59em} /* 45em width for 2-up if with rg-m0b0p0 ?? For browser FireFox. Chrome duz what?? IE8 duz what?? */ *.rg-w45em, *.rg-w2up {width:45em} /* width of 45em is for 2-up objects in body/body after margins, at desk or laptop browser startup */ *.rg-w3up {width:29.11111em!important;} /* 28em width for 2-up when? 59em for 2-up as mormal browsers begin???? with rg-m0b0p0 ?? */ *.rg-w28em {width:28em} *.rg-w4up {width:19.11111em!important;} *.rg-w5up {width:13.11111em!important;} /* Warning. Developer, always test the integrity of this .css stylesheet. Lest some rules fail after an error. They likely will fail with NO ERROR MESSAGES given. Do FireFox source pages reveal with red text the style rule tag unpairings????????? Here is how: Enable and then try to use the bottommost css style rule/class definition. In the .htm put - - lt div class=stylefromcssend gt XXXXXX lt div gt Then must see the expected background .gif. This tests most of the syntax of the .css file above that for a certain likely kind of corruption, such as when UNPAIRED comment ends somewhere above leave all the subsequent rules here actually UNDEFINED - - But remember that the online html validator service www.cse? pby does easily validate most .css syntax, too? Fierfox Tools Developer can check for what css??? Worry? Do blank .css stylesheet or style/style lines put blank lines in the page??? */ /* rg- important font-size are now ala w3.css ..v2..v4.. testthem... */ *.rg-tiny{font-size:10px!important}*.rg-small{font-size:12px!important}*.rg-medium{font-size:15px!important}*.rg-large{font-size:18px!important} *.rg-xlarge{font-size:24px!important}*.rg-xxlarge{font-size:36px!important}*.rg-xxxlarge{font-size:48px!important}*.rg-jumbo{font-size:64px!important} *.rg-quarterfontsize {font-size:25.00000%} /* */ *.rg-thirdfontsize {font-size:33.33333%} /* */ *.rg-halffontsize {font-size:50.00000%} /* */ *.rg-twothirdfontsize, *.rg-tinyfontsize {font-size:66.66667%} /* 10px/15px */ *.rg-threequarterfontsize {font-size:75.00000%} /* 10px/15px */ *.rg-smallfontsize {font-size:80.00000%} /* 12px/15px */ *.rg-mediumfontsize {font-size:100.00000%} /* 15px/15px */ *.rg-largefontsize {font-size:120.00000%} /* 18px/15px */ *.rg-xlargefontsize {font-size:160.00000%} /* 24px/15px */ *.rg-xxlargefontsize {font-size:240.00000%} /* 36px/15px */ *.rg-xxxlargefontsize {font-size:320.00000%} /* 48px/15px */ *.rg-jumbofontsize {font-size:426.66667%} /* 64px/15px */ rg-shadowed {box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} /* w3-card-2 and w3-hover use this box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) */ *.rg-ib {display:inline-block} /* inline-block; no explicit v-a baseline */ *.rg-ibvabaseline {display:inline-block;vertical-align:baseline} /* Inline line tops: E.g., caps site? */ *.rg-ibvatop {display:inline-block;vertical-align:top} *.rg-ibvamiddle {display:inline-block;vertical-align:middle} *.rg-ibvabottom {display:inline-block;vertical-align:bottom} /* rg-width as % by code names ala w3.css */ *.rg-width1{width:8.33333%!important /* FAILS */;outline:thick orange solid;} *.rg-width2{width:16.66666%} *.rg-width3, *.rg-width-quarter{width:24.99999%} *.rg-width4, *.rg-width-third{width:33.33333%} *.rg-width5{width:41.66666%} *.rg-width6, *.rg-width-half{width:49.99999%} *.rg-width7{width:58.33333%} *.rg-width8, *.rg-width-twothird{width:66.66666%} *.rg-width9, *.rg-width-threequarter{width:74.99999%} *.rg-width10{width:83.33333%} *.rg-width11{width:91.66666%} *.rg-width12, *.rg-width-full{width:99.99999%} /* rg-fontsize as % codes ala w3.css sb add greater than 100 percent ---- */ *.rg-fontsize1{font-size:8.33333%!important /* FAILS */;outline:thick orange solid;} *.rg-fontsize2{font-size:16.66666%} *.rg-fontsize3, *.rg-fontsize-quarter{font-size:24.99999%} *.rg-fontsize4, *.rg-fontsize-third{font-size:33.33333%} *.rg-fontsize5{font-size:41.66666%} *.rg-fontsize6, *.rg-fontsize-half{font-size:49.99999%} *.rg-fontsize7{font-size:58.33333%} *.rg-fontsize8, *.rg-fontsize-twothird{font-size:66.66666%} *.rg-fontsize9, *.rg-fontsize-threequarter{font-size:74.99999%} *.rg-fontsize10{font-size:83.33333%} *.rg-fontsize11{font-size:91.66666%} *.rg-fontsize12, *.rg-fontsize-full{font-size:99.99999%} /* gt 100pc: */ *.rg-fontsize13, *.rg-fontsize-108pc{font-size:108.33333%} *.rg-fontsize15, *.rg-fontsize-125pc{font-size:124.99999%} *.rg-fontsize24, *.rg-fontsize-double{font-size:199.99999%} article {/* sb important!? */ display:inline-block;text-align:center /* defeatable */;vertical-align:top /* defeatable */; /* FAILS EVEN IF !important */ font-size:78%!important } /* sb ala caps/index.htm top demo ok if ul overwide lines are cut? else? */ /* gathering rg-art */ hr.rg-developer-hr-hey {height:5.55555em;background:gray; display:none /* - - HEY, BEFORE PUBLISHING SET THIS AS DISPLAY:NONE - - */ } *.rg-memo {display:block;margin-right:auto!important;margin-left:auto!important;padding:1.00000em!important;background:yellow;color:black!important; width:50%; border-left:1.00000em red solid!important;border-color:red;qqqqqqqborder:0 0em 0 2em!important} /* these begin ala a w3- resources page */ *.rg-note{padding:1.00000em!important;background-color:#ffffcf;color:black!important;border-left:6px solid #ffeb3b} *.rg-warning{padding:1.00000em!important;background-color:#ffdddd;color:red!important;border-left:6px solid #f44336} *.rg-info{padding:1.00000em!important;background-color:#ddffdd;color:black!important;border-left:6px solid #4CAF50} *.rg-note, *.rg-warning, *.rg-info{text-align:left} /* rg-maskit seem vvgood */ *.rg-maskit, *.rg-maskitw100pc, *.rg-maskitw90pc, *.rg-maskitw50pc, *.rg-maskitw30pc, *.rg-maskmyparent {/* mask the parent */ z-index:000990;position:absolute;width:100% /* % of parent block */;height:inherit /* height of parent block */;top:0%;left:0% /* = begin at left % of parent */;background:magenta;} *.rg-maskitw90pc {/* restyling centering l=100%-w-2l */ width:90%;left:5%} *.rg-maskitw50pc {/* restyling */ width:50%;left:25%} *.rg-maskitw30pc {/* restyling */ width:30%;left:35%} *.rg-overlayb25pc, *.rg-baseballsuper {/* overlay the bottom 25% of the containing parent relative or static? or ? block */ z-index:000990;position:absolute;width:100% /* % of parent block */;height:25% /* % of parent block height */;top:75%;left:0% /* = begin at left % of parent */;background:transparent;} *.rg-border-roundedx {border:thick dashed cyan;border-radius:33.11111%;} /* ala w3.css 20180411j */ *.rg-hide, *.rg-hide-small, *.rg-hide-medium, *.rg-hide-large {display:none!important} *.rg-container {padding:0.01em 16px} *.rg-display-container{position:relative} *.rg-display-position{position:absolute} /* Pages are often to use xh- versions of these rules. */ *.rg-hide-developer, *.rg-hide-developer6666, *.rg-hide-developer666, *.rg-hide-developer665, *.rg-hide-developerx, *.rg-hide-developerxx, *.rg-hide-developerHEY {display:none!important} #rg-thebody {/* unnec */ position:relative;font-size:100%;} #rg-thebody {margin:0;border:0;padding:1em;background:gray;} /* rg-thebody note: Try adding class="w3-theme w3-theme " */ #rg-thebody article {position:relative;margin:1em;} #rg-thebody article {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} #zzzrg-thebody article {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(255,0,0,0)} #rg-thebody article {zzzzzzzzzdisplay:none} #rg-thebody h1 {/* rg-thebody layouts will usually force the h1/h1 to be small */ font-size:5555%;} #rg-thebody #theh1 {font-size:5555%;} #rg-thebody article h3 {} #rg-thebody article img {} *.rg-dlindent dl dl {margin-left:5em;} /* SEE W3.CSS FOR some interesting w3- for possible emulation - - .ZZZNOTFORRGGCSS-MAKESABRUPTw3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} */ *.rg-thebodybackground {/* sb similar in rgg.css background ../3/mmnbbkg4.jpg works */ background:url('../3/mmnbbkg4.jpg') #def center center;} /* E.g., mmnbbkg4.jpg mmnbbkg4.jpg mmnbbkg1.gif mmnbbkg3.gif. */ *.rg-buttontab {/* restyling */ margin:0 0.02em 0 0.02em;height:auto;vertical-align:bottom;background:cornsilk} /* some into rgg.css??? */ *.rg-buttontab > a > img {/* restyling ok thin outset white */ border:thin outset white;margin:1.11111em;height:auto;} /* *.rg-accordion{} *.rg-accordion{} *.rg-accordion:after{*.rg-accordion:after} */ /* rg-, xh-, style= middle overlay masks might imitate w3.css use of trnslate amd transform: *.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} sb css3 arithmetic way someday */ *.rg-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} *.rggcssbottom, *.doesthisrulework, *.bkgdimg, *.stylefromcssend {/* If rgg.css pairs its comment syntax okay, do background url */ background:url("../3/green.gif") green}