/*SheGui\css\sg_-19216B.css

It is intended that this will replace sg_-19216.css (the version of this with almost same name, just no "B"), as and when I can change calls.

(Change calls Po_snImages-WpFlag.css to at same time. Again, just add a B.)

Version: 28 May 20.. plus tweak to "pre" def 27 Oct 20
Started: "B version": 26 May 2016 Feb 19, which in some ways was only a slight evolution of sg_-19216.css, which began 16 Feb 19, but the "pre "B" version" of DigressionBoxWrapper/ DigressionBox was suspect, and the "improvements" may have an impact on things using the CSS which had been kludged to make up for what was in the CSS.

To validate: put this in a page, then run http://jigsaw.w3.org/css-validator on that page.

---
This CSS written for CSS3.

---
One "not backward compatable" factor, i.e. one place where a page "upgraded" to the "B version" won't "survive" seamlessly: Before the B versions of this and Po_snImages-WpFlagB.css:

The Wikipedia link tweaker was present both of them. Now only Po_snImages-WpFlagB has it. (Just putting Po_snImages-WpFlagB.css into the page being upgraded will fix the minor thing that arises if it isn't present.) (Search on gotoWikipedia for further information.)

---
This stylesheet provides some CSS classes with with broad applicability across lots of what I've done on all of my sites.

I should not to duplicate what's here in other, "lower" sheets, but SHOULD do "lower" sheets for, say, ardu, laz/delphi, fdb with things defined ONCE there, things like how to display code. 

At one point, I wanted to evolve my image display .css, Po_snImages-WpFlagB.css, into something that ONLY did the image positioning, but decided to leave the Wikipedia link tweaker in that for the quiet life. As things stand, I only have to add "B" to the links to upgrase a page.

---
While the old page should continue to work after JUST adding a "B" to this CSS file's name, any calls of "pre" may be affected: This file has tweaks to "pre" that change the color (and other aspects?) of the pre tag's effect, across the board... but only to things I've long found desirable in "pre" text.

The page's performance can be improved if earlier internal or in-line definitions of pre are removed.

A similar situation exists in respect of classes I've made but before 28 May 20 were supplied to pages as internal or inline CSS. This provides code for...

tbtbl (and how some elements inside a tbtbl div behave).

---
See...

   https:bit.ly/CssBoxesInBoxes
   
...for many general points for novices (and for things I want to remind my novice-self of!) about CSS issues.

(aka http://sheepdogguides.com/hh/html-css/BoxesInBoxes.htm)


====================================
SECTION HEADING: SUMMARY of what sg_-19216B.css provides, and their requirements. The summaries also give an exemplar.

(Further details are further down this file. Search on "goto[classname]" to jump down to details of implementation and further documentation.)

Short list of classes, CSS work...

(Wikipedia... part of "pre version B" sg_-19216.css)
Pre (global properties)
Header (wasn't yet defined, 28 May 20)
Footer (and FooterTkb)
TbTbl
DigressionBox(and .. Wrapper)

===============================
Summaries...

=========

wikipedia-----------------
(See notes in "details" section. Search on gotoWikipedia)

pre-----------------------
The CSS in this sets anything in an "ordinary" pre element so it is... green, bold, and monospace ("courier new", if available.)

header/footer/footerTkb-
This is a work in progress, currently changing the color of anything...
HTML 4 pages: In <div class=footer>...</footer>
HTML 5 pages: A "footer" element.

TbTbl----------------------
  (last character: "ell", as in TaBLe) 

Exemplar...

<div class="tbtbl">
(REM OUT.. but include in files which use this)
Remember: 1) In text editor, font may be proportional, messing up column alignment. In browser, a mono-space font is used. (Use "show visible spaces" when editing, if your editor provides that... as the excellent TextPad does!
2) Although some characters, e.g. &, < and >, may "work", they can be problematic.. if only to validation tools.They should be changed to, e.g. &amp;, even in a <pre> block.(/REM  OUT)
<pre>
FamID  Path  Moth
<span class="bdy">
  A     Z12   4wwwww
</span>
<span class="bdy2">
   1      2ww  4iiiii
   www    iii  4iwiwi
</span></pre></div>


digressionBoxWrapper, digressionBox-------------------
(This is SUMMARY!...)
 
class=digressionBoxWrapper...
    with R,L, or C appended to name:
    
Displays some text in a form that I hope suggests it is a digression, a remark, a sidebar.
   R: Pushes text to near right side of space
   L: Pushes text to near left side.
   C: Centers the text
   
N.B.: A "plain" digressionBoxWrapper remains. (No R, L or C.) This is for backwards compatiblilty, but is DEPRECATED. (Use "C" in general, "L" or "R" to put a digression beside another element.)

---
Old and new digressionBoxWrappers share one digressionBox (the material to go inside the box). Any old digressions, i.e. those "only" wrapped in digressionBoxWrapper (no R, L or C) will display "okay", but without padding. (The text will "push up", right against the edges of the area with a background color. Think very carefully before messing with that. It will just be easier to upgrade the old calls.)
    
(Detail: SEVERAL digressionBoxWrapper "R"s (or "L"s) "alongside" one another" will go "one above another" if the horizontal space is inadequate; they will "slide" down, if necessary to respect min-width settings. If there's enough horizontal space, they just "stack" across the page. A default min-width is built in. A default width is built in. Note: "width" would normally be expressed as a %, and if you say 33%, the digressionBoxWrapper will appear to fill a little less than 1/3 of width of WHOLE WINDOW, because the default margin (outside region, same color as parenet's background) is set to 0. (If "stacking" (horizontally) several digressionBoxWrapperL's (or R's), change the default left/right margins of the Wrapper, and allow for this "extra width". (If Wrapper.width+10% and left and right border-width and margin-widths are all 5%, the whole wrapper will use 30% of width of window (5+5+10+5+5)... I think. Haven't (yet!) tested exhaustively.  
    
Exemplars...

1) "C" variant. A centered digression.

<div class="digressionBoxWrapperC>"
<div class=digressionBox>
   (stuff)
</div></div>

The above gives you the "default" digression. It has default border-widths as follows:

border-width 1px 1px 1px 1px;

Ordinarily, you will want to tweak the border widths, to suppress some of the colored bits around edges.

(See https://bit.ly/CssBoxesInBoxes for reminder of tricks for easy specification of a variety of choices to spec properties of things that exist in top, right, bottom and left variants.)

There are TWO background colors you may want to change... They are normally set to the same color, as one is used for the "padding" of the text. Normally, you make each the same as the other. You can change bc for both digressionBox and digressionBoxWrapper. Change diregressionBoxWarpper's BORDER color, to change color outside of main box, if you have an digressionBoxWrapper's border width >0. For digressionBox, the width of padding, border and margin are all usually kept at zero, to reduce "error" in result of changes to digressionBoxWrapper's width. (Which, as ever, does not account for width of margin or border. If you aren't using an R or L varialnt, to put more than one digression beside, say, an Adsense panel, leave dirgressionBoxWrapper margin zero, too.

WHY DID I GO WITH div-in-div solution? I don't know. I knew little when I started this, and not a lot more now. I think it gains you little over just putting the text of the digression inside a digressionBoxWrapper.

2) "R" and "L" variants. (They work the same way. (Use one of them and do an in-line width change, using a percent, to put something beside, say, an Adsense skyscraper. That % will be the % of the //whole window's// width.)

<div class="digressionBoxWrapperL>" (... or ...pperR)
<div class=digressionBox>
   (stuff)
</div></div>

Before the "R" and "L" variants were available, if a digression box was wanted alongside an Adsense box, it "sort of" worked if you said...

<div class="digressionBoxWrapper" <div class="digressionBoxWrapper"  style="width:50%;clear:left;margin-left:20px">

.. but today use a R or L digressionBoxWrapper, and all will be well.

The digressionBoxWrapper (no R, L or C) variant remains, for backward compatability, but don't use in new pages.*/

/*===START section "Thoughts at 31 Oct 21"---
<!--possible "boilerplate", to go in pages using this CSS...
<div class=digressionBoxWrapper style="width:90%;clear:left; margin-left:20px;background-color:#dbf0f0;">
-->
<!--//background-color:#ffd966, with the standard margins, creates the bars of mustardy color, left and right of text box.
Make width 50% if alongside an Adsense panel.-->
<!--
<div class=digressionBox>
  STUFF
</div></div>
-->
<!--My thanks to https://lefkomedia.com/adding-external-link-indicator-with-css/  and https://stackoverflow.com/questions/26898931/is-it-possible-to-style-external-html-links-differently-to-relative-links-us for way to tweak href links to add icon.

31 Oct 21: Background color in the digressionBoxWrapper style, with the standard margins, creates bars of color, left and right of text box. Use #dbf0f0 to have side border of the same color as that behind the text. Leaving background-color out does not mean, with standard margins, you'll have no colored side-bars... it just means that you will get the color the system gives you! (That color was #ffd966 for a long time (and still) at 31 Oct 21.
DO USE <p> tags within the digression... PLUS a <br> at top and/or bottom, if you want "margins" there.

I am probably still not doing these things completely right yet. See...

https://en.wikipedia.org/wiki/CSS_box_model  and
https://www.w3schools.com/css/css_boxmodel.asp

.. and be particularly careful about what happens when you make the browser window narrow.
-->

<!-- ======================================
PosnImages-WpFlagB.css provides... I think... for images display.
And... I think!... sg-19216B.css is complementary to PosnImages-WpFlagB.css.
See http://sheepdogguides.com/hh/html-css/TestStyleSheet.htm
for use of image css.
-->

---END "Thoughts at 31 Oct 21...."=== */
/*======================================
  ======================================
    CSS AND FURTHER DETAILS
  --------------------------           */


/*=========== gotoWikipedia
====  (deprecated, removed) Wikipedia links tweak...

The tweak adds an icon to say "external link, to Wikipedia page" to any link with "wikidepia" in it. Case sensitive.

There **WAS** one here, before the "B" versionS of this page of external CSS and of Po_snImages-WpFlag.css. Now it is only present in Po_snImages-WpFlagB.css. If that isn't called by the page with a link to a Wikipedia article, no "harm" arises, but you don't get the ad hoc link icon.*/


/*=========== gotoPre (global tweaks) =====
====  tweak of global "pre" style...

My use of CSS to tweak pre style goes way back, originally as inline CSS, then internal, and now, finally, (c. 5/20) in this external sheet.

Inspired by www.w3.org/MarkUp/Guide/Style.*/

pre {color:#33CC00;font-weight:bold;
  font-family:"Lucida Console",Monaco,monospace,monospace;}
  
  /*Before 27 Oct 20, font-family was just "Courier New" */
  

/*=========== gotoFooter (and FooterTkb) (and gotoHeader) ============
"Header" styling not yet implemented, but when Footer styling mature, it is something to consider doing.

"Footer" styling...

New in HTML 5, there's a "footer" tag.

This started life, stupidly(?), like this: "Until I switch to HTML 5, I can style footers with <div class=footer>, by adding..."

In THIS one, we are re-styling an existing tag, so NO DOT in front of "footer"*/

footer {background-color:#fff2cc;} /*e5f9ff*/

/*BUT LEAVE THIS IN PLACE, here in the external CSS, against the day I have some <footer> tags in some HTML5 pages. At one point, I was wondering whether I should switch to...

In THIS one, we are creating a new class (and re-styling it, away from the defaults), so ther IS a DOT in front of "footerTkb"*/

div.footerTkb {background-color:#fff2cc;}

/*... (and use "div class=footertkb") for HTML4, to leave what I do in HTML5 a matter for me to choose at my leisure. I THINK that "all" I'll need to do is to replace the HTML4 <div class=footer (or footerTkb)>...</div> with <footer>...</footer> to convert the page to HTML 5, if I go that route.

Or maybe I can skip the "tkb" suffix pfff??*/


/*=========== gotoTbTbl
==== ".tbtbl", ".tbtbl" added to sg_-19216B.css 28 May 20, having first appeared as internal CSS in FDB7-FamTree, 27 Jun 2020, and later been used in s0_MySqlFrmBase.htm*/

.tbtbl pre {color:#009933;
  font-weight:bold;font-family:"courier new",monospace;}
.tbtbl span.bdy{color:#59b300;
  font-weight:bold; font-family:"courier new",monospace;}
.tbtbl span.bdy2{color:#59b3F0;
  font-weight:bold; font-family:"courier new",monospace;}

/* NOTA BENE the detials of the notation being used above ^ ^ ...

The dot in front of .tbtbl says "this defines (or further defines) a new class".
(When, in a .css file, you are altering the properties of an existing tag, you start the line with the tag, dot-less. (See how pre redefined, earlier in this file.))

Within that line, we are saying, "and when you are in an element of that class, the already-known tag "pre" is redefined as follows..."*/



/*=========== gotoDigressionBox

------ new digressionBoxWrappers (And old, for backwards compatibility)... variants begun 27 May 20, with much struggle... DUH! ALMOST ALL I NEEDED WAS WHAT I'd been doing with images!!!

Set common values...*/
div.digressionBoxWrapperR,
   .digressionBoxWrapperL,
   .digressionBoxWrapperC {
     background-color:#dbf0f0;
     border-style:solid;
     border-color:#ffd966;/*#ffd966 was my long-at-May2020 traditional color for color at ends (and/or top/botton) of digression*/
     /*Typically, this will be "turned off" by making the widths, zero. Leave the default/exemplar be "with color borders" to help users remember it is a built-in option.*/
     min-width:150px;max-width:3500px;
     width:60%;
     padding:10px; 
     border-width:7px 22px 12px 22px;
     margin:4px 20px 6px;
     }

/*Some "clever stuff" is going on here...

All necessiated because padding, border, and margins are not "counted" in an element's width.

So that digression box can be "fitted" inside digressionBoxWrapper, IT'S padding, borders, margins are set to width ZEROS.

But that would be unattractive, making the text run right up to the sides of the container.

SO: The BoxWRAPPER's background color is set the same color as the Box's background, and the WRAPPER's padding "does for" padding around the text in the box. Hurrah! (So keep the background color of both of them the same.) 

The Wrapper's border can be used... or not, as you like, to put a different color around the text. The easiest way to manage this is to leave the color, leave it -style:solid, and play with the widths of the various borders. (top, right, bottom, left)

This isn't a 100% solution. But it is close. The flaw is: If you set the width of the digressionBoxWRAPPER to 100%, it "spills over", "takes" "more than 100%"... because width border and margins not counted in "div's" "width".

You can use a % specified width to get a good result. Use the "R" or "L" variants for this. (The "C" variant no use, because the digression will be using x % of the width OF THE WINDOW. As the window gets narrower, if the width of other thing, the thing alongside the digression is fixed, in pixels, it will take a greater and greater PERCENT of the width of the screen, and evenually the digression will slip under it.

.... END "... some clever stuff" */


/*Then refine, with specifics. (The ORDER of the margin settings in the lines below is IN REVERSE //ON PURPOSE//... so same numbers in equiv places*/

div.digressionBoxWrapperR {
      float:right;
      margin-right:4%;
           margin-left:2%;}
           
div.digressionBoxWrapperL {
      float:left;
      margin-left:4%;
           margin-right:2%;}
              
              
/*Class to display a centered digressionBox:*/

div.digressionBoxWrapperC {
  display: block;
  margin:2px auto 5px auto;}
  /*top, right, bottom, left*/

/*Setting right and left margins to auto is what centers the box. See... https://medium.freecodecamp.org/how-to-center-things-with-style-in-css-dc87b7542689*/
  
/*-----------------
/*"digressionBoxWrapper" (no R,L or C)
Being kept so old pages run with MERELY adding "B" to the external .css file which many pages import. Consider the ramifications carefully before you make any changes to it.

DEPRECATED... don't use in new pages....*/
.digressionBoxWrapper {width:80%;
margin:5px 4%;/*top&bott, left&right*/
padding:0px 20px;/*top&bott, left&right*/
background-color:#ffd966;
/*border-color:##ffd966;##ffd966 is my long-at-May2020 traditional color*/
}

/*-----------------
The following, digressionBox definition, IS SHARED by 19216.css and 19216B.css.

Consider the ramifications carefully before you make any changes to it, remembering that it is shared. (It is nearly time to start a new "digressionBox" solution, anyway. Probably a SIMPLE one, that does not involve a div-in-a-div!
 
Tweaked 30 May 20 since "known good for old pages". Old Known Good was...
.digressionBox {
background-color:#dbf0f0;
padding:6px 20px 16px 20px;
margin-top:6px;}
*/
.digressionBox{
   background-color:#dbf0f0;
   width:100%;/*This sets how much of width inside WRAPPER the digression itself takes, including padding/border/margin. (only 100% would ever make sense)*/ 
   display: block;
   margin-left:auto;margin-right:auto;
   padding:0px;/*6px 20px 16px;*/
     /*Space around text, to inner side of border...
       top,left&right, bott, */
   border-width:0px;
   margin:0px;}

/*Things you might want to add... probably as internal or in-line redefinitions of the digressionBox properties:

font-size:12px;
line-height:17px;
min-width:[some number of] px;*/

  
/*================================================
The first use ever of .digressionBoxWrapper was in sheepdogsoftware.co.uk webc1_lookfar.htm. Introduced 16 Feb 19. My first really clever CSS.

With a few tweaks to digressionBoxWrapper I suspect I can create my long-wanted sidebar class, or even just a simpler "digression box"... doing away... at what cost?.. with the box-in-box design.*/

/*Details of digressionBoxWrapper / digressionBox inspired by friend's site... Goblet of Fire friend.*/

/*New understanding... perhaps flawed!... at 5/20: the Box element is an entity INSIDE BoxWrapper. **Both have a full complement of properties.**

If the whole package, the BoxWrapper (with wholely contained Box) is put anywhere on page, with, say, "width:60%" specified, that 60% os 60% of what is AVAILABLE at that location.

To get coloured bars at ends, or indeed above and below Box", you first give BoxWrapper and Box different lengths, and use different background colors in the BoxWrapper and the box, use the box's background color in the Box. The color aroundthe digression comes from the BoxWrapper's padding region.*/

/*In BoxWrapper, padding determines color between Wrapper border and Box's contents...and Box has margin, border and padding set to 0, so Wrapper's padding looks like margin and or padding to Box's contents, as long as there is no Box border. ALL of these sources of possible confusion probably unnecessary, AND without benefit. All arise from box-in-box design.

End of digressionBox CSS and details.
... and...
End of sg-19216B.css
*/