  <STYLE type="text/css">
  *    { padding:0; margin:0}
  html, body {
    fxnt-size: 16px;
    font-size: 15px;
    fxnt-family: Tahomax,Verdanax,Arialx,Sans-Serifx,Times New Roman;
    font-family: Helvetica Neue,Helvetica,Liberation Sans,Arial,sans-serif;
    cxlor:#000;
    color:#222;
    /* Not Work
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    contentEditable=true must be in HTML TD to work OK
    line-height:19px can try
    */
    background:#e9d2a6;
    pxdding:0;
    margin:0}

  .wrapper {width:100%; margin:0 auto; text-align:left; table-layout:fixed;}
  .collapsable {display:table-cell;}
  .tblcell   {font-size:16px; color:#0C4F1E}
  .colwidth1 { width:20.0%; /*20.6*/}
  .colwidth2 { width:60.0%; /*58.8*/}
  .colwidth3 { width:20.0%;}
  @media screen and (max-width: 1024px){
     /*1024 is WORK machine SCREEN size, so it never see 3 columns
       Make it 1000 originally so it can see 3 column */
     .collapsable {display:none; }
     .colwidth1 { width:0% ;}
     .colwidth2 { width:100%; /*98*/}
     .colwidth3 { width:0% ;}
     .tblcell {font-size:28px; color:#101453}
   }

  .Imgblock   { display: block; margin: auto; width: 65%;}
  .CellTop    { vertical-align: top; }
  .CellBottom { vertical-align: bottom; }


  h1 {font-size:14px; text-align:center; color:blue;}


  a {text-decoration:none }
  a:link    {color:#003300}
  a:hover   {color:#996633; /*old=brownish-light-red OK*/}
  a:visited {color:#4d0000; /*darker-red than #990000*/}
  a:hxver   {color:#cc0000; /*bright-red nogood*/}
  a:vxsited {color:#990000; /*old=dark-red*/}

  hrx{/*UnUsed*/ height: 2px;
      background-color:#000;
      border: 0;
      /*HR only accept background-color and FFOX force it to use
        User-Defined-Background-Color, so it end up not visible.
        GGLE does not force background-color, so it work OK. Can not
        make it work on both FFOX and GGLE using background-color.

        The only way is to avoid background-color and use border color.
      */
     }

  hr2{/*Unused*/ height: 0px;  /*End up getting 2px high*/
      display: block;
      border: 1px solid #000; /*both top and bottom are 1px total=2*/
     }

  hr {height: 0px;  /*End up getting 1px high*/
      display: block;
      border-top: 1px solid #000; /*make top border 1px solid black*/
      border-bottom: 0px;  /*remove bottom border*/
     }


  ol    {text-align:left;font-size:19px;margin-bottom:20px;color:#000}

  p     {text-align:left;font-size:16px;margin-bottom: 8px;color:#000}
 .ParaN {text-align:left;font-size:19px;margin-bottom:20px;color:#000}
 .ParaL {text-align:left;font-size:19px;margin-bottom:20px;
         margin-left:10px;}
 .ParaLS{text-align:left;font-size:16px;margin-bottom:20px;
         margin-left:10px;letter-spacing:-0.7px;}
 .ParaH {text-align:left;font-size:21px;margin-bottom:25px;
         margin-left:10px;font-weight:bold; }
 .ParaC {/*HOME Page Next Ptr use*/
         text-align:center;font-size:19px;margin-bottom:20px;
         fxnt-family:Tahomax,Verdanax,Arial,Sans-Serifx,Times New Roman ;
         font-weight:bold;letter-spacing:-1px;}
 .Gap  {margin:0; height:1px;}


 .TopBanner {width:100%; /*useby headerah headerxa headerxh*/ }

 .SnippetPara {/*UnUsed*/ margin-left:15px;}

 .LinkImgLeft {/*Useby Index Page JPG eye catcher image*/
                 float:left;width:35%;margin-right:5px;margin-left:10px;}
  @media screen and (min-width:1024px) { /*ge 1004px*/
   .LinkImgLeft {float:left;width:35%;margin-right:5px;margin-left:10px;}}
  @media screen and (max-width:1024px) { /*le 1000px*/
   .LinkImgLeft {float:left;width:30%;margin-right:5px;margin-left:10px;}}
  @media screen and (max-width: 800px) { /*le 680px 35%*/
   .LinkImgLeft {float:left;width:33.5%;margin-right:4px;margin-left:8px;}}
  @media screen and (max-width: 640px) { /*le 640px*/
   .LinkImgLeft {float:left;width:38.5%;margin-right:4px;margin-left:8px;}}
  @media screen and (max-width: 520px) { /*le 480px 45.5*/
   .LinkImgLeft {float:left;width:45.0%;margin-right:4px;margin-left:8px;}}
  @media screen and (max-width: 480px) { /*le 480px 45.5% 50%*/
   .LinkImgLeft {float:left;width:45.5%;margin-right:4px;margin-left:8px;}}
  @media screen and (max-width: 440px) { /*le 440px  48%*/
   .LinkImgLeft {float:left;width:48.0%;margin-right:4px;margin-left:8px;}}

 /*Useby all SNIPPETS above JPG eye catcher image*/
 /*Img-VIEW no longer use it*/
 .ImgHdrLink{ fxnt-family:Tahoma, Verdana,Arial,Sans-Serif,Times New Roman ;
      text-align:left; font-size: 20px; font-weight:bold;
      margin-left:10px;
      }

  /*Menu line after the Top Banner*/
  .MenuHdr {
    /*margin-left:10px; font-size: 16px; text-align: left; cursor:default;
    */
      margin:0; font-size: 16px; text-align: left; cursor:default;
      }

  /*CopyRight Statement and Resource PTRs at End*/
  .pagend   {font:normal 13px Verdana,Arial,Helvetica,sans-serif;
             /* this formats | */
             line-height:13px; padding:0;}
  .pagend a {font:normal 13px Verdana,Arial,Helvetica,sans-serif;
            /* this formats Link Literals */
            }


   /*Use by [Reader Feedback Section] Hdr and
     [Terms and Condition of Use] Hdr*/
  .infohead {font-size:14px;fxnt-family:Arial; text-align:center;
            font-weight:bold; /*color="#404"*/}

   /*Useby DETAILS after [Reader Feedback Section] HDR & [SiteRef] at
     end Chrome does not Show difference becuse width cannot be shrink
     to le 500. Change to 600 will show that it is working */

  .siteRef  {font:normal 11px Verdana,Arial,Helvetica,sans-serif;
             padding:0 2em;margin:0 2em; color:#003300;}

  @media screen and (max-width: 640px) { /*le 500px changed*/
    .TopBanner {height:80%; /*Not work*/}
    .pagend   {font:normal 16px Verdana,Arial,Helvetica,sans-serif;
               line-height:16px; padding:0; /* this formats | */}
    .pagend a {font:normal 16px Verdana,Arial,Helvetica,sans-serif;
               }
    .siteRef  {font:normal 14px Verdana,Arial,Helvetica,sans-serif;
             /*green:#003300 red:#990000*/
             padding:0 2em;margin:0 2em; color:#003300;}
  }

  .siteCommentH {font:normal 15px Verdana,Arial,Helvetica,sans-serif;
       font-weight:bold;
       padding:0 0em;margin:0.5em 0.5em; color:#003300;}
  .siteComment  {font:normal 15px Verdana,Arial,Helvetica,sans-serif;
       padding:0 0em;margin:0.5em 0.5em; color:#003300;}
       }
  @media screen and (max-width: 640px) { /*le 500px changed*/
  .siteCommentH {font:normal 16px Verdana,Arial,Helvetica,sans-serif;
       font-weight:bold;
       padding:0 0em;margin:0.5em 0.5em; color:#003300;}
  .siteComment  {font:normal 16px Verdana,Arial,Helvetica,sans-serif;
       padding:0 0em;margin:0.5em 0.5em; color:#003300;}
       }

  /*Below for local HomePage with Group Boxes of pointer MYHOMEV2 */
  .boxTitleLeft   {border:none; text-align:left;
           fxnt-family: Verdanax,Arialx,Sans-Serifx,Times New Roman;
           font-size: 16 px; font-weight:bold}
  .boxTitleCenter {border:none; text-align:center;
           fxnt-family: Verdanax,Arialx,Sans-Serifx,Times New Roman;
           font-size: 16 px; font-weight:bold}
  .boxTitleRight  {border:none; text-align:right;
           fxnt-family: Verdanax,Arialx,Sans-Serifx,Times New Roman;
           font-size: 16 px; font-weight:bold}

  .contentBox {border:1px solid red; border-right:none;
       padding:2px; /*wihtout this FFOX lost border line. Chrome OK*/
       fxnt-family: Tahomax,Verdana,Arialx,Sans-Serif,Times New Roman;
       font-weight:normal; font-size:14px;
       /*font-height:12px; not sure if this tag is valid */
       line-height:18px;
       /* line-height:22px; OK when font-size is 14px
          otherwise everything look funny.
          Better leave it to default*/
       text-align:left}
  .contentBoxRight{border:1px solid red;
       padding:2px; /*wihtout this FFOX lost border line. Chrome OK*/
       fxnt-family: Tahomax,Verdana,Arialx,Sans-Serif,Times New Roman;
       font-weight:normal; font-size:14px;
       /*font-height:12px; not sure if this tag is valid */
       line-height:18px;
       /* line-height:22px; OK when font-size is 14px
          otherwise everything look funny.
          Better leave it to default*/
       text-align:left}
  /*Above for local HomePage with Group Boxes of pointer MYHOMEV2 */

  /*This for IMG-VIEW TileImages */
  .TileImgLeft { float: left;
     width:32.5%;margin-right:2px;margin-left:2px;
     }

  /*This are new test stuff */
  .TestFmt {
    font-weight: 700;
    fontxfamily: DINOT,Impact,sans-serif;
    text-transform: uppercase;
    pxdding: 0;
    padding-left: 6px; /*manually force it to center*/
    /*margin:4px disabled the center thing*/;
    text-align: center;
    font-size: 16px;
    color: #222;
    transition: background .2s;
    letter-spacing: -0.7px;
    line-height: 36px;
  }
  .NoSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  .OK2Edit {
    /*both contentEditable=true;contentEditable:true Not work here
      contentEditable=true in the actual HTML TD code work OK */
    contentEditable:true;
  }
  </STYLE>
