/* 9898.css s70218b */
/*
Warning: Published version of callling html should not reference a local system stylesheet directory ...

Structure plan for the html body element, if all divisions are employed.

All could be embedded label lines ala "<!-- page-header -->".
The actual html code is ala "<div id=page-header class='marginless'>" and its matching "</div>".

Classes employed include .marginless, .marginedlr, .floating, and .nonwrapping.


page-header  div.marginless
 Page Title section (e.g., Labor Beat On-Demand Shows, or img incl alt='Labor Beat' h1 ....
page-body  div.marginless
 pagenavbar-header  div.marginless
 pagenavbar-header  /div
 pagenavbar-body  div.marginless
  links
 pagenavbar-body  /div
 pagenavbar-footer  div.marginless
 pagenavbar-footer  /div
 pagecol1-header  div.marginless
 pagecol1-header  /div
 pagecol1-body  div.marginless
  links
 pagecol1-footer  div.marginless
 pagecol1-footer  /div

 pagecol2-header  div.marginless
 pagecol2-header  /div
 pagecol2-body  div.marginless
  links
 pagecol2-footer  div.marginless
 pagecol2-footer  /div
 maincontentsofpage-header  div.marginedlr
 maincontentsofpage-header  /div
 maincontentsofpage-body
  [do for each articlesgroup]
  articlesgroupnnn-header  div.marginedlr
  articlesgroupnnn-header  /div
  articlesgroupnnn-body  div.marginedlr
   [do for each article]
   articlennn-header  div.marginedlr
   articlennn-header  /div
   articlennn-body  div.marginedlr
    sidebar1ofarticlennn-header  div.marginedlr
    sidebar1ofarticlennn-header  /div
    sidebar1ofarticlennn-body  div.marginedlr
     links
    sidebar1ofarticlennn-body  /div
    other non sidebar content of article1
    sidebar1ofarticlennn-footer
    sidebar1ofarticlennn-footer  /div
    sidebar2ofarticlennn-header  div.marginedlr
    sidebar2ofarticlennn-header  /div
    sidebar2ofarticlennn-body  div.marginedlr
     links
    sidebar2ofarticlennn-body  /div
    other non sidebar content of article1
    sidebar2ofarticlennn-footer
    sidebar2ofarticlennn-footer  /div
   articlennn-body  /div
   articlennn-footer
   articlennn-footer  /div
   [loop back for another article]
  articlesgroupnnn-body  /div
  articlesgroupnnn-footer  div.marginedlr
  articlesgroupnnn-footer  /div
  [loop back for another articlesgroup]
 maincontentsofpage-body  /div
 maincontentsofpage-footer  div.marginedlr
 maincontentsofpage-footer  /div
page-body  /div
page-footer  div.marginedlr
page-footer  /div

======

<!-- page-header  div -->
<!--  Page Title section (e.g., Labor Beat On-Demand Shows, or img incl alt='Labor Beat' h1 .... -->
<!-- page-body  div -->
<!--  pagenavbar-header  div -->
<!--  pagenavbar-header  /div -->
<!--  pagenavbar-body  div -->
<!--   links -->
<!--  pagenavbar-body  /div -->
<!--  pagenavbar-footer  div -->
<!--  pagenavbar-footer  /div -->
<!--  pagecol1-header  div -->
<!--  pagecol1-header  /div -->
<!--  pagecol1-body  div -->
<!--   links -->
<!--  pagecol1-footer  div -->
<!--  pagecol1-footer  /div -->
<!--  pagecol2-header  div -->
<!--  pagecol2-header  /div -->
<!--  pagecol2-body  div -->
<!--   links -->
<!--  pagecol2-footer  div -->
<!--  pagecol2-footer  /div -->
<!--  maincontentsofpage-header  div -->
<!--  maincontentsofpage-header  /div -->
<!--  maincontentsofpage-body -->
<!--   [do for each articlesgroup] -->
<!--   articlesgroupnnn-header  div -->
<!--   articlesgroupnnn-header  /div -->
<!--   articlesgroupnnn-body  div -->
<!--    [do for each article] -->
<!--    articlennn-header  div -->
<!--    articlennn-header  /div -->
<!--    articlennn-body  div -->
<!--     sidebar1ofarticlennn-header  div -->
<!--     sidebar1ofarticlennn-header  /div -->
<!--     sidebar1ofarticlennn-body  div -->
<!--      links -->
<!--     sidebar1ofarticlennn-body  /div -->
<!--     other non sidebar content of article1 -->
<!--     sidebar1ofarticlennn-footer -->
<!--     sidebar1ofarticlennn-footer  /div -->
<!--     sidebar2ofarticlennn-header  div -->
<!--     sidebar2ofarticlennn-header  /div -->
<!--     sidebar2ofarticlennn-body  div -->
<!--      links -->
<!--     sidebar2ofarticlennn-body  /div -->
<!--     other non sidebar content of article1 -->
<!--     sidebar2ofarticlennn-footer -->
<!--     sidebar2ofarticlennn-footer  /div -->
<!--    articlennn-body  /div -->
<!--    articlennn-footer -->
<!--    articlennn-footer  /div -->
<!--    [loop back for another article] -->
<!--   articlesgroupnnn-body  /div -->
<!--   articlesgroupnnn-footer  div -->
<!--   articlesgroupnnn-footer  /div -->
<!--   [loop back for another articlesgroup] -->
<!--  maincontentsofpage-body  /div -->
<!--  maincontentsofpage-footer  div -->
<!--  maincontentsofpage-footer  /div -->
<!-- page-body  /div -->
<!-- page-footer  div -->
<!-- page-footer  /div -->

======

Structure plan for the html body element, just the divisions for lb- documents.

page-header  div.marginless
 "Labor Beat On-Demand Shows" (or img incl alt='Labor Beat') h1
page-body  div.marginless
 maincontentsofpage-body
  articlesgroup1-body  div.marginedlr
   [do for each article]
   articlennn-header  div.marginedlr
    br hr
   articlennn-header  /div
   articlennn-body  div.marginedlr
    sidebar1ofarticlennn-body  div.marginedlr
     prod sidebar1b field contents, for example:
      img for this prod
      text and links under img
    sidebar1ofarticlennn-body  /div
    sidebar2ofarticlennn-body  div.marginedlr
     prod sidebar1b field contents, for example:
      addional img or tex and links
    sidebar2ofarticlennn-body  /div
    other non sidebar content of article1, to wit:
     title and suffixes for a show
     description and suffixes for a show
   articlennn-body  /div
   articlennn-footer
    buttonsbar of links for this show
   articlennn-footer  /div
   [loop back for another article]
  articlesgroup1-body  /div
  articlesgroup1-footer div.marginedlr
   "<!-- articlesgroup1-footer -->"
  articlesgroup1-footer  /div
  [no looping back, add this dissimilar articlesgroup]
  articlesgroup2-header  div.marginedlr
   br hr br "A-Z Index" br
  articlesgroup2-header  /div
  articlesgroup2-body  div.marginedlr
   [create the list of links (to the shows articles)]
  articlesgroup2-body  /div
  articlesgroup2-footer  div.marginedlr
   buttons bar version for "a-z" articlesgroup2-footer
  articlesgroup2-footer  /div
 maincontentsofpage-body  /div
page-body  /div
page-footer  div.marginedlr
 buttonsbar version for page-footer
page-footer  /div

======

Structure plan for the html body element, just the divisions for wt-like documents.
begun
page-header  div.marginless
 "The Wheel Thing" (or img incl alt='The Wheel Thing') h1
page-body  div.marginless
 maincontentsofpage-body
  articlesgroup1-body  div.marginedlr
   [do for each article]
   articlennn-header  div.marginedlr
    br hr
   articlennn-header  /div
   articlennn-body  div.marginedlr
    sidebar1ofarticlennn-body  div.marginedlr
...

======

Structure plan for the html body element, just the divisions for uawcrisis-like document.
begun
page-header  div.marginless
 "UAW Crisis" (or img incl alt='UAW Crisis') h1
page-body  div.marginless
 maincontentsofpage-body
  articlesgroup1-body  div.marginedlr
   [do for each article]
   articlennn-header  div.marginedlr
    br hr
   articlennn-header  /div
   articlennn-body  div.marginedlr
    sidebar1ofarticlennn-body  div.marginedlr
...

=======







*/
body.bluss {}
body.blusf {}
body.grnss {}
body.grnsf {}
body.bluss h1, body.bluss h2, body.bluss h3 {color:blue;}
body.bluss, body.grnss {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnss h1, body.grnss h2, body.grnss h3 {color:green;}
body.grnss h1, body.bluss h1 {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnss h2,     body.bluss h2 {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnss h3, body.bluss h3 {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnss h4, body.bluss h4 {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnss h5 h6, body.bluss h5 h6 {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnss h5, body.grnss h6   /* equivalent to start of the above??? */ {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.bluss h5, body.bluss h6   /* equivalent to start of the above??? */ {font-family:  Arial, Verdana, Helvetica, sans-serif;}
body.grnsf, body.blusf {font-family:  Times, 'Times New Roman', serif;}

body.grnss h1, body.grnss h2, body.bluss h1, body.bluss h2 {text-align:center;display:block;margin-right:auto;margin-left:auto;} /* Imgs seem centered, too. But I add 3 rules in case they help other browsers center imgs. */ 

div.marginspoint7 {margin:0.700em;border:black thin solid;}
div.marginless    {margin-top:0em;margin-right:0em;margin-bottom:0em;margin-left:0em;border:black thin solid;}
div.marginedlr    {margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;border:Yellow thin solid;}
div.header        {margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;border:Orange thin solid;} /* div.header is now just like div.marginedlr */
div.header h1     {font-size:xx-large ! important;} /* E.g., :xx-large ! important; */
div.header h2     {font-size:x-large ! important;} /* E.g., :x-large ! important; */
div.floating      {float:left;clear:left;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;border:black thin solid;}
div.floatingr     {float:right;clear:right;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;border:black thin solid;}
div.sidebar       {float:left;clear:left;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;border:black thin solid;} /* div.sidebar is now just a copy of div.floating */
div.nonwrapping   {white-space:nowrap;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;border:black thin solid;}

p.centered {text-align:center;display:block;margin-right:auto;margin-left:auto;}  /* how assure centerlr? CAN img be within a p, even via span? */

p.inline {display:inline;}  /*  experimenta1    fails         */

/*  pg3c.css-like styles */ 
olddiv.header {clear:both;  text-align:center /* default sb none? */ ;  margin-right:auto;         margin-left:auto;                                  border:solid thin black;}
div.maincontentsofpage {  margin-right:0px;margin-left:0px;    border:solid thin red;}

/* *** article.css-like styles *** */ 
div.article { /* ****** clear:both always  or as a default that can be overridden with none */ clear:both; float:left; margin-right:0px;margin-left:0px; border:solid thin green;}

/* zzzdiv.article zzzp.FirstLineSmallCaps  {display:block;margin-left:44px;padding-left:30px;  color:red;   } */

/* First-letter and first-line custom classes of p by bg */
.FirstLetterLargeAndFirstLineSmallCaps:first-letter {font-size: 200%; float: left;}
.FirstLetterLargeAndFirstLineSmallCaps:first-line {font-variant: small-caps;}
.FirstLetterLarge:first-letter {font-size: 200%; float:left; /* FirstLetterLarge is flawed when window narrows! */}
.FirstLineSmallCaps:first-line {font-variant:small-caps; /* FirstLineSmallCaps is dependent on float left or right! zzzfloat:Left; clear:none;  Float ruins text wrapping sidebar! True! */ }


/* testing size  header h1, header h2 {font-size:70%;}  */
header h1, header h2   {font-size:110%;}  /* As in articlennheader?  h2 sb smaller? */


A:link { color: #0000EE }          /* unvisited link */
A:visited { color: #551A8B }        /* visited links */
A:active { color: #FF0000 }        /* active links */
/* setting the anchor border around IMG elements requires contextual selectors */
A:visited IMG { border: 4px #551A8B }        /* visited links */
A:active IMG { border: 4px #FF0000 }        /* active links */

div.articlefooter {}  /* new */
p.centered {text-align:center;}  /* new  4 htmlbody.css and most every subset that does/will exist... 
 maybe add margin-right:  auto;margin-left:auto;  maybe add display:block;    */ 
/* Size the divisions relatively, starting with the size of 1.000em in BODY

For coding convention I will use length as % for 'font-size' but as em everywhere else.
  */ 
div.maincontentsofpage {font-size:100%;} /* parent is body */
div.header             {font-size:80%;} /* parent is body */
div.footer             {font-size:80%;} /* parent is body */
div.article            {font-size:80%;} /* parent is usually .marginless eg maincontentsofpage */
div.articlefooter      {font-size:100%;} /* parent is usually article */
div.sidebar            {font-size:90%;} /* parent is usually article */

/* testing body.h1               {font-size:.1em;} */

/* testingp                      {font-size:.1em;} */

div.maincontentsofpage img {width:auto;height:22.2em;} /* So lb- lists will default to 20em wide imgs here */

div.sidebar {}  /* Class name different but identical??? to div.floating?? */
div.sidebar {         width:22.2em;} /*  ???  temp, to ck img immok etc and word wrapping width  */


div.floatingr img {   width:auto;height:11.0em;} /* zzzzz So lb- lists will default to imgs of given width here */



div.articlefooter img  {width:auto;height:1.200em;} /* as a default height */

div.nonwrapping {white-space:nowrap;} /* Makes a nonwrappable horizontal bar of the div. Nice. */
div.sidebar            {text-align:center;} /*   elsewhere?    custom for lb  unusual */ 
