/* mcgoodwin_HTML5.css is the CSS for the McGoodwin Family Website and other McGoodwin uses 

Outline of Contents with Search Keys (9//2026):
INTRODUCTORY COMMENTS @INT@
HTML @HTM@
BODY @BOD@
MULTIUSE BLOCKS @MBB@
DIV @DIV@
CHARACTER STYLES @CHS@
P PARAGRAPH STYLES @PAS@
A ANCHORS AND HYPERLINKS [incl. dnavbar links] @ANH@
HEADINGS H1-H6  @H16@
TABLES @TBL@
TABLES OF THUMBS @TTH@
HEADERS for TABLES @HDT@
MYHEADER TABLE HEADERS (for TH or TD) @MTH@ 
TD TABLE ENTRY CELLS @TAD@
NAVBAR DIV (excl. links) @NAV@
TITLEBAR DIV @TBD@
SITEMAP TABLE  @SMT@
TOC TABLE OF CONTENTS  @TOC@
IMAGES IMG  @IMG@
FLOATED IMAGES and FIGURES  @FIF@
PHOTOS AND THUMBNAILS IN TABLES  @PTT@
PHOTOS AND THUMBNAILS OUTSIDE TABLES  @PTO@
EPIGRAPHS  @EPI@
FOOTERS  @FOO@
LISTS  @LIS@ 
HORIZONTAL RULERS @HOR@
BUTTONS AND SLIDESHOWS @BSS@ 



INTRODUCTORY COMMENTS @INT@
Validated by W3C https://jigsaw.w3.org/css-validator/#validate_by_input
    for "grammar, properties and values defined in the CSS 2.1 specification"
    as "CSS level 3 + SVG !"

REVISIONS HISTORY:  
    (1) 2016-2019: Extensive revisions for HTML5 & CSS3; 
    (2) Sept. 2026 Tweaking and Cleanup, validated by W3C 
       for "grammar, properties and values defined in the CSS 2.1 specification"

Edit in Notepad++, avoid Dreamweaver editing or use of Tabs, these cause irregular whitespace formatting

MASTER and CLONE COPIES IN CURRENT USE: 
       ... Photo ... Fam ... mcgoodwin_HTML5.css            COPY from MASTER
       ... Web ... mcgoodwin_HTML5.css                      MASTER, edit here and test first
       http://mcgoodwin.net/shared/mcgoodwin_HTML5.css      UPLOAD MASTER TO WEB

Specificity [dominance hierarchy] of Selectors (written as ID - CLASS - TYPE): 
      Inline styles in HTML, highest:  <h1 style="color: pink;">
      Internal styles in HTML written inside the <head><style> section 
      ID selectors, 0-1-0:  #dnavbar
      Class Selectors (.intro), attribute selectors and pseudo-classes, 0-1-0:  .class, [attr=value], :hover 
      Elements and pseudo-elements, 0-0-1:  h1, ::before, ::after
      Universal selector * and :where, 0-0-0:  *, where()
      Rules that appear later in the code override earlier rules if they  have the same specificity.
      A CSS rule with !important attribute always takes precedence:  p {color: blue !important;

Combinators:   (see https://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#type-selectors) 
      (,) Commas separate independent selectors and are NOT Combinators: h1, h2
      ( ) Descendant: Match elements contained within another "ancestor" selector: h1 em {}   [significant whitespace]
             ul.mythings li {margin: 2em}  |result: List items li that are descendants of the "mythings" list ul|
             div p *[href]: |result: matches any element that has the "href" attribute set and is inside a P that is itself inside a DIV|
      (>) Direct Child: div > p {}     div ol>li p {} 
             |result: between two CSS selectors, matches only those second selector elements that are the direct children
             of elements matched by the first.  This is more restrictive than Descendant.|
      (+) Next (Adjacent) Sibling:  img + p {font-weight: bold}
             |result: Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. 
             The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2,
             ignoring non-element nodes (such as text nodes and comments)|
      (~) Subsequent-sibling:  div ~ p {} 
             |result: match ALL instances of 2nd element p following the 1st element div (not necess. immediately) 
             & share same parent element div|  

Combined Class Selectors
   Can specify more than one separately defined class selector or multiple classes simultaneously: 
      see https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_class_more2 and 
          https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors
      ex. for [CSS p.red] + [CSS p.fancy] or [CSS p.fancy.red], <p class="red fancy"> means p has red text and fancy styling
      ex. CSS name1.name2 selects all elements with both name1 and name2 set within its class attribute
   NOTE: This CSS has NOT YET been fully revised to recognize this capability, do this gradually.

Size Lengths: Relative sizes (scale with zoom easier): em, ex [height of the lowercase "x"]
      These are relative to the computed font size of the current element.  em = height of the font in nominal points or inches.
      Recc for Screens: Use em, [px], % (but not pt, cm, mm, in, p, or rem)
         for Print:  Use em, cm, mm, in, pt, pc, %
         em is the body height of the typeface, one em of height or width in a 16-point typeface is 16 points, (not width of M, obsolete)
Spacing: 3 linefeed before All Cap sections, 2 linefeed between selector groups, 1 between closely related items

NOAUTOSITEMAP 



/* @HTM@  HTML    HTML    HTML    HTML    HTML    HTML    HTML    HTML    HTML    HTML    HTML    HTML    HTML @HTM@ */

html {
/* browser default usu. 16px=1em; avoid rem; em and % best for screen, pt for print;  
      The em size unit is recommended by the W3C. */
   font-size: 16px; 
   margin: 0;  /* PROBLEM: specifying ANY non-zero margin sometimes causes white space to be inserted at Top in Firefox and Chrome */
   padding: 0; /* Avoid problems with navbar but must add padding for individual elements etc. */
   box-sizing: border-box;   /* width and height include content, padding, and border */
   /* font-synthesis: none;   Consider to prevent unattractive font synthesis of bold or italic etc. */
}


*, *:before, *:after {   /* "width" includes padding and border width 
   allows pseudo element normalizing as well w border-box, https://css-tricks.com/box-sizing:  */
   box-sizing: inherit;  
}


/* @BOD@   BODY     BODY     BODY     BODY     BODY     BODY     BODY     BODY     BODY     BODY     BODY     BODY     BODY
   Background or background-color may not be observed by some browsers 
   Do not specify just "background" here, it overrides background images
*/       

body {
/* default, white background w black Arial 16px text; body inherits fr. html */   
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;        
   font-size: 100%;               /* i.e., 1em or 16px, per W3C http://www.w3schools.com/css/css_font.asp */
   font-weight: normal;
   font-style: normal; /* not italic; etc. */
   color: black; 
   background-color: white; 
   line-height: normal;
   margin: 0; padding: 0; border: 0;   /* each on all four sides */
}
   

/* body color schemes, fore and background colors */

body.paleblue {
/* black text w pale blue background */
   color: black; 
   background-color: #F1FAFD; 
}

body.white {
/* white text w black background */
   color:white;
   background-color: #000000;
}


/* @MBB@   MULTIUSE BLOCKS     MULTIUSE BLOCKS     MULTIUSE BLOCKS     MULTIUSE BLOCKS     MULTIUSE BLOCKS    */

.max100_1280 {    
/* set 100% max width at 1280 px but does not prevent lower width if adequate 
   Use for <body class="max100_1280">  */
   width: 100%;
   max-width: 1280px;
   margin: 0 auto; /* will center content if reduced in size */
   border-collapse: collapse;   /* merges parent-child borders */
}

.minmax100_1280 {  
/* set 100% max and min width at 1280 px .  Prob. Unused */
   width:100%;
   min-width: 1280px;
   max-width: 1280px;
   margin: 0 auto; /* will center content if reduced in size */
   border-collapse: collapse;
}

.border1blk { 
/* thin 1 px black border PRN.  Prob. Unused */
   border: 1px solid black;
   border-collapse: collapse;
}



/* @DIV@   DIV     DIV     DIV     DIV     DIV     DIV     DIV     DIV     DIV     DIV     DIV     DIV     DIV
   generic styles and classes; see further down for dnavbar and dtitlebar  */

div {
   padding: 0;  /* top right bottom left  */
   margin: 0;   /* top right bottom left  */
}

div.centered {
/* For centering text paragraphs and images outside of tables.  See also p.centered */
   margin-left: auto; 
   margin-right: auto; 
   text-align: center;
   padding: 0 8px;  /* top+bottom right+left  */
}

div.centered table {
/* For centering tables overall;  supplanted by 100_1280 selectors (?) */
   margin-left: auto; 
   margin-right: auto; 
   text-align: left;  /* content in the div is left aligned unless changed by td/th etc. */
   padding: 0 8px;  /* top+bottom right+left  */
}              

div.centeredinline {  
/* for adjacent divs on same line w centered content, such as previous-next ... navigation.  
    Div is not itself centered, use enclosing <div class="centered"> */
   display:inline;
   text-align: center;
   padding: 0 24px;  /* top+bottom right+left  */
}
   


/* @CHS@   CHARACTER STYLES     CHARACTER STYLES     CHARACTER STYLES     CHARACTER STYLES     CHARACTER STYLES
   SPAN and class styles for character formatting (including "initial dot" class selectors, very versatile classes, for paragraphs, span etc.)
   Cannot use span across block element borders  
   Ok to not specify background-color to let underlying background shine through
   Don't provide color for links like HiResLink12 (let the underlying A:Link etc. colors apply)
   9e2960=mauve   217D02=Green   #00ffff=aqua (cyan) */


/* COLORS and BOLD (WEIGHT) class selectors; formerly span.aqua etc. */
.aqua       {color: #00ffff; font-weight: normal; }
.boldaqua   {color: #00ffff; font-weight: bold; }
.mauve      {color: #9E2960; font-weight: normal; }
.boldmauve  {color: #9e2960; font-weight: bold; }
.green      {color: #217D02; font-weight: normal; }
.boldgreen  {color: #217D02; font-weight: bold; }
.boldyellow {color: #FFFF00; font-weight: bold; }
.boldred    {color: #FF0000; font-weight: bold; }


/* RESIZING (RELATIVE, retain default relative values, formerly span.smaller etc. ) */
.larger     {font-size: larger;} 
.smaller    {font-size: smaller;}


/* RESIZING (ABSOLUTE), rarely used, formerly default values, converted to pixels for  medium value, somewhat revised */
.xxsmall    {font-size: 9px  ;}
.xsmall     {font-size: 11px ;}
.small      {font-size: 13px ;}
.medium     {font-size: 16px ;} /* medium is default font size 12 pt=16px */
.large      {font-size: 20px ;}
.xlarge     {font-size: 24px ;}
.xxlarge    {font-size: 32px ;}


/* Special Character Formatting
   (the subsequent text wraps around the letter), IN USE*/
.firstcharacter {
  color: #9E2960;
  float: left;
  font-family: "Bodoni MT", "Germany Regular", Georgia, "Times New Roman", Times;
  font-size: 75px;
  line-height: 60px;
  padding-right: 4px;
  padding-left: 3px;
}


/* Hi Resolution HiRes (links are bolded below) UNUSED */
.hireslink12 {font: 12pt "Arial Black", Arial, Helvetica, Tahoma, Verdana, sans-serif;} 
.hireslink10 {font: 10pt "Arial Black", Arial, Helvetica, Tahoma, Verdana, sans-serif;}


/* ABBR: Remove dotted underline from abbr HTML element */
abbr {
   text-decoration: none; 
}


/* PRE HTML element style for fixed width (monospaced) character formatting */
pre {
   font-family: Consolas, "Courier New", Courier, monospace;
   white-space: pre; 
   font-weight: normal; 
}



/* @PAS@   P PARAGRAPH STYLES     P PARAGRAPH STYLES     P PARAGRAPH STYLES     P PARAGRAPH STYLES     P PARAGRAPH STYLES
Paragraph HTML element styles and classes, including some versatile classes starting with initial dot
   Indents are d in px [1em-16px], Hanging Indents="Hind" are shown in First Line em's /Overall em's format 
   Note that Mozilla does not properly position bullets when hanging indent used as LI class, 
      use P class inside LI 
   See additional specialty paragraph classes further below. 
   margin: Top Right Bottom Left  Mnemonic TRBL = Trouble */ 

p {
   font-size: 16px;         /* defines default font size for all paragraphs, redundant per html rule */
   margin: 0 0 16px 16px;   /* top right bottom left;  inherits Arial from body ; width from Div ; no border */  
} 
   
p.centered {
   text-align: center; 
}

p.mauve { 
   color:#9E2960; /* older style, currently in use */
}

   
/* Hanging Indent Paragraphs: hind 33 = overall indent of 3 em with initial (First line) indent of -3 em  */
p.hind33 , p.ar12blkhind33 {   /* Hanging Indent: hind 33 = overall indent of 3 em with initial (First line) indent of -3 em  */
   margin: 0 0 16px 48px;      /* top right bottom left  */
   text-indent: -48px; 
}

p.ar10blkhind33 , p.ar10blkhind33compact {   /* 10pt = 13px; see added rule below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;    
   font-size: 13px;
   color: #000000; 
   margin: 0 0 16px 48px;  /* top right bottom left  */
   text-indent: -48px; 
}
   
p.ar10blkhind33compact {   /* modifying rule */
   margin: 0 0 0 48px;     /* top right bottom left  ; omit spacing between adjacent paragraphs */
}
   
p.ar12blkind3 {  /* 12pt = 16px; all is indented, no hanging */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;    
   font-size: 16px;
   color: #000000; 
   margin-left: 48px; 
}


p.pad0 {
   padding: 0;
} 

   
p.ar12blk , p.ar12mauve, p.ar12ltgray { /* 12pt = 16px; added rules below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-size: 16px;
   color: #000000; 
}
   
p.ar12mauve {   /* modifying rule */
   color: #9E2960; 
}

p.ar12ltgray {   /* modifying rule */
   color: #808080; 
}


p.ar10blk , p.ar10mauve , p.ar10ltgray { /* 10pt = 13px; added rules below */
/* redundant Arial specification given here because specified in tag  */  
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-size: 13px;
   color: #000000; 
}

p.ar10mauve {   /* modifying rule */
   color: #9E2960; 
}
   
p.ar10ltgray {   /* modifying rule */
   color: #808080; 
}


p.lrpadding { /* like blockquote */
   padding: 0 96px 16px 96px;    /* top right bottom left;*/  
} 
   


/* @ANH@   A ANCHORS AND HYPERLINKS       A ANCHORS AND HYPERLINKS       A ANCHORS AND HYPERLINKS     
   #003399 = Dark Blue    #9e2960 = mauve
   Revised to mauve for Active and Hover 
   CSS requires the order to be exactly Link, Visited, Hover, Active
   text-decoration: none; removes underline from link
*/


/* A Anchors Links */
a:link      { color: #003399; text-decoration: none; font-weight: bold;}   /* Dark Blue on White */
a:visited   { color: #003399; text-decoration: none; font-weight: bold;}   /* Dark Blue on White */
a:hover     { color: #9e2960; text-decoration: none; font-weight: bold;}   /* Mauve on White */
a:active    { color: #48D1CC; text-decoration: none; font-weight: bold;}   /* Medium Turquoise on White */


/* Navigation Bar Div anchor tag Hyperlink character formatting. 
   See further NAVBAR DIV below for non-link formatting 
   dnavbar is an ID, not a class; invoke with <div id="dnavbar">
   #99CCFF = Lt. Blue      #707070 =  Gray    #FF0000 = Red    #FFFFFF = White
   CSS requires the order to be exactly Link, Visited, Hover, Active   
   Simplified colors to white except when hovering = Red */
#dnavbar a:link       { color: #FFFFFF; background-color: #707070; text-decoration: none; font-weight: bold;}  /* White on Gray */
#dnavbar a:visited    { color: #FFFFFF; background-color: #707070; text-decoration: none; font-weight: bold;}  /* White on Gray */
#dnavbar a:hover      { color: #FF0000; background-color: #707070; text-decoration: none; font-weight: bold;}  /* Red on Gray */
#dnavbar a:active     { color: #FFFF00; background-color: #707070; text-decoration: none; font-weight: bold;}  /* Yellow on Gray */


/* The following added for hyperlinks of slideshows with black background
   #DDDDDD = Lt. Gray    #99CCFF = Lt. Blue    #9e2960 = mauve
   CSS requires the order to be exacely Link, Visited, Hover, Active    */
a.blkbckgnd:link      { color: #DDDDDD; background-color: #000000; text-decoration: none; font-weight: bold;}
a.blkbckgnd:visited   { color: #DDDDDD; background-color: #000000; text-decoration: none; font-weight: bold;}
a.blkbckgnd:hover     { color: #99CCFF; background-color: #000000; text-decoration: none; font-weight: bold;}
a.blkbckgnd:active    { color: #9e2960; background-color: #000000; text-decoration: none; font-weight: bold;}



/* @H16@   HEADINGS H1-H6      HEADINGS H1-H6      HEADINGS H1-H6      HEADINGS H1-H6      HEADINGS H1-H6      HEADINGS H1-H6
Generic and multipurpose
   9e2960 = mauve, #800000 = Dark Red */


h1 ,  h1.left20armauve {  
/* 20pt = 26px; added rules for color below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-style: normal;
   font-size: 32px;
   font-weight: bold;
   margin: 32px 64px 16px 0; 
   padding: 0 8px;
   text-align: left;
} 

h1.left20armauve {      /* modifying rule */
   font-size: 26px;     /* smaller than h1 default */
   color: #9E2960;
} 

h1.cent20arblk , h1.cent20armauve {  
/* 20pt = 26px, added rules below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;    /* redundant but family in  */
   font-size: 26px;     /* smaller than h1 default */
   text-align: center;
   margin: 64px 64px 16px 64px;    /* top right bottom left;  Redundant, but assure some margin on the sides */
} 

h1.cent20armauve { 
   color: #9E2960;   /* modifying rule */
}


h2 { 
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-style: normal;
   font-size: 24px;
   font-weight: bold;
   margin: 32px 64px 24px 0;   /* top right bottom left  */
   padding: 0 8px;
   text-align: left;
} 

h2.left16arblk { 
/* 16pt = 22px; inherits from h2 */
   font-size: 22px;      /* smaller than default */
   color:#000000; 
   text-align: left;     /* redundant  */
} 

h2.left16armauve {
   font-size: 22px;   /* smaller than default */
   color:#9E2960; 
   text-align: left;  /* redundant  */
}

h2.center16arblk {     
/* 16pt = 22px; inherits from h2 */
   font-size: 22px;    /* smaller than default */
   color:#000000; 
   text-align: center;
   margin: 32px 64px 24px 64px;    /* top right bottom left; but Assure some margin on the sides */
} 
   
h2.center16armauve {
   font-size: 22px;   /* smaller than default */
   color:#9E2960; 
   text-align: center; 
   margin: 32px 64px 24px 64px;    /* top right bottom left;  Assure some margin on the sides */
} 


h3 {
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-style: normal;
   font-size: 20px;
   font-weight: bold;
   color:#000000; 
   margin: 20px 64px 20px 0;    /* top right bottom left  ;  Assure some margin on the sides */
   padding: 0 8px;
   text-align: left; 
} 

h3.left14arblk {
   font-size: 19px;     /* 14pt = 20px; smaller than default */
   text-align: left;    /* redundant  */
} 

h3.left14armauve {
   font-size: 19px;     /* smaller than default */
   color:#9E2960; 
   text-align: left;    /* redundant */
} 

h3.center14arblk {
   font-size: 19px;     /* smaller than default */
   text-align: center;  
   margin: 20px 64px 20px 64px;    /* top right bottom left  ;  Redundant */
} 

h3.center14armauve {
   font-size: 19px;     /* smaller than default */
   color: #9E2960;    
   text-align: center;  
   margin: 20px 64px 20px 64px;    /* top right bottom left  ;  Redundant  */
} 


h4 , h4.left12arblk {   
/* 12pt = 16px; equivalent */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-size: 16px;
   font-weight: bold;
   margin: 16px 64px 20px 0;  /* top right bottom left  */
   padding: 0 8px;            /* top-bottom right-left  */
   text-align: left;    /* redundant but left in  */
} 

h4.left12armauve , h4.left12armauvebold {    
/* 12pt = 16px; equivalent selectors, latter IN USE */
   font-size: 16px;      /* redundant ; already bold */
   color:#9E2960; 
   text-align: left;    /* redundant */
} 

h4.center12armauve {
   font-size: 16px;      /* redundant */
   color: #9E2960; 
   text-align: center; 
   margin: 16px 64px 20px 64px;    /* top right bottom left  ; Redundant, but assure some margin on the sides */
} 


h5 , h5.left13pxarblk {    
/* 10pt = 13px; equivalent selectors */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-size: 13px;
   font-weight: bold;
   margin: 16px 64px 16px 0;  /* top right bottom left  */
   text-align: left;    /* redundant  */
} 

h5.left13pxarmauve {
   font-size: 13px;      /* redundant */
   color:#9E2960; 
   text-align: left;     /* redundant  */
} 

h5.center13pxarmauve {
/* 10pt = 13px; redundant but in  */
   font-size: 13px;      
   color: #9E2960;       
   text-align: center;   /* redundant  */
   margin: 16px 64px 16px 64px;     /* top right bottom left */
} 


h6 , h6.left11pxarblk {  
/* 8pt = 11px; equivalent selectors */
   font-family: "Arial Narrow", Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-size: 11px;
   font-weight: bold;
   margin: 16px 64px 16px 0;   /* top right bottom left  */
   padding: 0 8px;             /* top-bottom right-left  */
   text-align: left;           /* redundant */
} 

h6.left11pxarmauve {
   font-size: 11px;         /* redundant */
   color:#9E2960; 
   text-align: left;       /* redundant */
} 

h6.center11pxarmauve {
   font-size: 11px;         /* redundant but in  */
   color: #9E2960; 
   margin: 16px 64px 16px 64px;    /* top right bottom left  ; Redundant, but assure some margin on the sides */
   text-align: center; 
} 



/* @TBL@   TABLES     TABLES     TABLES     TABLES     TABLES     TABLES     TABLES     TABLES     TABLES     TABLES
  For spacing inside cells, use padding-right etc.
  Note that default table adds top and bottom margins.  Use div#dnavbar and div#dtitlebar for navbar and titlebar */
  
table {
/* default specific table features, font size 16px, does not provide padding, width not specified; generic use */
   margin: 16px 0 16px 0 ;  /* top right bottom left  */
   border: 1px solid black;
   border-collapse: collapse;      /* border-spacing: 0 not applicable w collapse */
   width: auto;
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; 
   font-size: 16px;
   font-weight: normal;
   color: #000000; 
}

table.basic1 {   
/* general purpose 100% width bordered marginless tables 
   incl. photo thumbs [thumbcmauve] + photo descriptions [thumbdescrl80, 1 is ?stray char] etc. */
   width: 100%;  /* Margin will add to this if specified */
   min-width: 1280px;
   max-width: 1280px;
   margin: 0 auto; /* will center content on rt and lt if reduced in size */
   border: 1px solid black;
}

table.tw90 {
/* general purpose 90% width bordered w L-R margin tables  */
   width: 90%;  
   max-width: 1152px;
   margin-top: 16px; margin-bottom: 16px;
   margin-left: 5%; margin-right: 5%; /* centers the table, does not center text in cells */
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
   border: 1px solid black;
}

table.tw70 {
/* general purpose 70% width bordered w L-R margin tables  */
   width: 70%;  
   max-width: 896px;
   margin-top: 16px; margin-bottom: 16px;
   margin-left: 15%; margin-right: 15%; /* centers the table, does not center text in cells */
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
   border: 1px solid black;
}



/* @TTH@   TABLES OF THUMBS     TABLES OF THUMBS     TABLES OF THUMBS     TABLES OF THUMBS     TABLES OF THUMBS */

table.trowsofthumbs5 {
/* successive thumb tables for 5 thumbs per row with no top or bottom margin */
   width: 100%;  /* Margin will add to this if specified */
   margin: 0;
   border: 1px solid black;
   border-collapse: collapse;      /* border-spacing: 0 not applicable w collapse */
}

table.trowsofthumbs4 {
/* successive thumb tables for 4 thumbs per row with no top or bottom margin */
   width: 100%;  /* Margin will add to this if specified */
   margin: 0;
   border: 1px solid black;
   border-collapse: collapse;      /* border-spacing: 0 not applicable w collapse */
}

table.trowsofthumbs3 {
/* successive thumb tables for 3 thumbs per row with no top or bottom margin */
   width:75%;  /* Margin will add to this if specified */
   margin: 0;
   border: 1px solid black;
   border-collapse: collapse;      /* border-spacing: 0 not applicable w collapse */
}

table.trowsofthumbs2 {
/* successive thumb tables for 2 thumbs with no top or bottom margin */
   width:50%;  /* Margin will add to this if specified */
   margin: 0;
   border: 1px solid black;
   border-collapse: collapse;      /* border-spacing: 0 not applicable w collapse */
}

/* .trowsofthumbs2right thumb table waa superceded with divtoright */



/* @HDT@   HEADERS for TABLES (TH and TD CELLS)    HEADERS for TABLES (TH and TD CELLS)    HEADERS for TABLES (TH and TD CELLS) */


th , .headerc , .headercmauve , .headercmauve16 , .headercmauve20 {   
/* Default table header th, is bold text-centered,
added rules follow for color and width etc.; see separate left-aligned header */
   font-size: 16px;
   font-weight: bold;
   color: #000000;  /* modify some later */
   text-align: center; 
   vertical-align: middle; 
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
   border: 1px solid black;
   
}

.headerl , .mauvel , .mauver  {   /* e.g., bold headers for first column, 
added rules follow for color and align) */
   font-weight: bold;
   color: #000000;   /* modify some later */
   text-align: left; 
   vertical-align: middle; 
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
   border: 1px solid black;
}

.mauvel , .mauver , .headercmauve , .headercmauve16  { /* modifying rule */
   color: #9E2960; 
}

.mauver   { /* modifying rule */
   text-align: right; 
}

.headercmauve20  {  /* 14pt = 20px: larger font mauve header */
   font-size: 20px;
   color: #9E2960; 
}

/* Omit th.headerlw20mauvecompact*/



/* @MTH@    MYHEADER TABLE HEADERS (for TH or TD)    MYHEADER TABLE HEADERS (for TH or TD)    MYHEADER TABLE HEADERS (for TH or TD) 
WIDTH % is defined and bold mauve etc.  
It is efficient to set column widths with such headers rather than in any or all of TDs. 
All are bold, mauve, horiz centered & Vertical middle 
Font size is not set */ 
   
.myheader, .myheader10 , .myheader15 , .myheader20 , .myheader30 , .myheader40 , .myheader50 , .myheader60, .myheader70, .myheader80  { 
   text-align: center; 
   vertical-align: middle ;
   color: #9E2960;  /* mauve */
   font-weight: bold;
   font-size: 16px;
}

.myheader   { width: auto; }
.myheader10 { width: 10%; }
.myheader15 { width: 15%; }
.myheader20 { width: 20%; }
.myheader30 { width: 30%; }
.myheader40 { width: 40%; }
.myheader50 { width: 50%; }
.myheader60 { width: 60%; }
.myheader70 { width: 70%; }
.myheader80 { width: 80%; }



/* @TAD@   TD TABLE ENTRY CELLS    TD TABLE ENTRY CELLS    TD TABLE ENTRY CELLS    TD TABLE ENTRY CELLS */

/* Default and Multipurpose td table cells styles and classes, not intended as TH headers
  To Specify inside cell white space, use padding-right: or padding: T R B L instead  */

td , td.entry, td.entryc, td.entryhcvc, td.entryr, td.entry20, td.entry20c , td.entry30
td.entry30vc, td.entry33, td.entry33c, td.entry60, td.entry70, td.entry70vc, td.entry80, td.entry80vc  {  
/* default td, modify color & align below */
   font-size: 16px;
   text-align: left; 
   vertical-align: top; 
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
   border: 1px solid black;
   
}
td.entryc {
   text-align: center; 
}
   
td.entryhcvc {
   text-align: center; 
   vertical-align: middle;
}

td.entryr {
   text-align: right; 
}

td.entry20 {
   width: 20%; 
   text-align: left; 
}

td.entry20c {
   width: 20%;
   text-align: center; 
}

td.entry30 {
   width: 30%;
   text-align: left;
}
   
td.entry30vc {
   width: 30%;
   text-align: left;
   vertical-align: middle;
}
   
td.entry33 {
   width: 33%;
   text-align: left; 
}
   
td.entry33c {
   width: 33%; 
   text-align: center; 
}
   
td.entry60 {
   width: 60%;
   text-align: left; 
}

td.entry70 {
   width: 70%;
   text-align: left; 
}

td.entry70vc {
   width: 70%;
   text-align: left; 
   vertical-align: middle;
}

td.entry80 {
   width: 80%; 
   text-align: left; 
}

td.entry80vc {
   width: 80%; 
   text-align: left; 
   vertical-align: middle;
}



/* @NAV@   NAVBAR DIV    NAVBAR DIV    NAVBAR DIV    NAVBAR DIV    NAVBAR DIV    NAVBAR DIV    NAVBAR DIV  
See earlier for A hyperlink formatting in navbar */

div#dnavbar , div.dnavbarurl, div.dnavbarsitemap {  
/* container div */
   display: inline-block;
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 13px;
   font-weight: bold;
   color: #CCFFFF; /* Light Cyan , Changed from #FFFF00 yellow and #99CCFF powder blue */
   background-color: #707070;   /* charcoal gray */
   vertical-align: middle; 
   width:  100%;  /* extend fully to L R edges but add padding top and bottom in sub-divs */
   height: 21px;
   margin: 0; border: 0; padding: 0;   /* top right bottom left  */
   border-collapse: collapse;
   overflow: hidden;  /* auto and scroll are not ideal  */
   white-space: nowrap;   /* prevent wrap */
}     

div.dnavbarurl {
   color: #00ffff; /* Bold aqua for text that is not a link, i.e., current document */ 
   text-align: left;
   width: 90%;   
   padding: 0 0 0 16px;   /* top right bottom left  */
}

div.dnavbarsitemap {
   display: inline-block;
   color: #00ffff; /* Bold aqua for text that is not a link, i.e., current document */ 
   text-align: right;
   width: 10%; 
   padding: 0 16px 0 0;  /* top right bottom left */
} 

/* Navigation bar table, td.navbarc, td.navbar    SUPERSEDED  */
 


/* @TBD@   TITLEBAR DIV     TITLEBAR DIV    TITLEBAR DIV    TITLEBAR DIV    TITLEBAR DIV    TITLEBAR DIV  */

/* Titlebar Div at top
     003399 = Dk Blue; 9E2960 = Mauve  
     Note that bottom margin is 40px so that spacing to first body content is builtin
     Use the Transparent td for titles that consist of images and when background image is present 
     Note that for transparent background, specify background: transparent 
        per http://www.w3.org/tr/CSS21/cascade.html#value-def-inherit 
*/
div#dtitlebar {
   /* specific div features  */
   width: 100%;
   padding: 16px 0 16px 0;   /* top right bottom left  DO NOT specify R and L, misinterpreted and expands */
   margin: 0;   /* top right bottom left  */
   border: 0 black solid; 
   border-collapse: collapse;
   /* font features to inherit */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 26px;
   font-weight: bold;
   color: white; 
   background-color: #003399; 
   text-align: center; 
   vertical-align: middle; 
} 

div#dtitlebartranspmauve { 
/* Class for Beowulf image with transparent bkgnd, centered, invoke with div id="dtitlebartranspmauve"
       img is inline element, must convert to block element for margin:auto 
       Much trouble getting this to work, 
       margin: auto; and text-align: center; should do the same thing, but keep them both */
   display: block;
   margin: auto;
   width: 90%;
   color: #9e2960;
   text-align: center;
   }
   

/* Titlebar table at top td.titleblue , td.titlebluecomic  td.titletranspmauve  SUPERSEDED  */
   


/* @SMT@   SITEMAP TABLE    SITEMAP TABLE    SITEMAP TABLE    SITEMAP TABLE    SITEMAP TABLE    SITEMAP TABLE     
   Headers have hyperlinks, so keep black */   

table.smfiles {
   width: 100%; 
   border: 1px black solid; 
   border-collapse: collapse;
   margin: 0;
   padding: 8px 0 8px 0;    /* top right bottom left  */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: bold;
   text-align: left; 
} 

td.smheader1 , td.smheader2 {  /* identical definitions */
   text-align: center; 
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: bold;
   border: 1px black solid; 
   padding: 8px 8px 8px 8px;
}

td.smcol1 , td.smcol2 {         /* identical definitions */
   text-align: left; 
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: bold;
   border: 1px black solid; 
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
}

td.smcolsmall { /* bordered, but no Top/Bottom padding */
   font-weight: normal;
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   border: 1px black solid; 
   padding: 0 12px 0 12px;
 }



/* @TOC@   TOC TABLE OF CONTENTS    TOC TABLE OF CONTENTS    TOC TABLE OF CONTENTS    TOC TABLE OF CONTENTS
   Use to display links to page topics in a hyperlinked TOC at the top of the page 
   100% = 1280  width
   TH Mauve bold w black borders, centered & Lt
   Black TD, Lt, vertical-align Top or middle; 
   Use p.Hind22Compact to add a hanging indent to a line inside these cells plus making more compact lists
   Example: vgprogs.html, mcmavdb_manual.html */
   
/* Table of contents at top of page.  Assume it will have external margins and internal padding. 
   Set col widths w headers */
table.toc { 
   width: 90%;
   max-width: 1152px;
   margin-left: 5%; margin-right: 5%; /* centers the table, does not center text in cells */
   margin-top: 16px; margin-bottom: 16px;
   border: 1px solid black; 
   border-collapse: collapse;
   padding: 8px 8px 8px 8px;   /* top right bottom left, may be revised for TD */
}

/* TOC HEADERS (TH), see added rule below */
.toccmauve , .toclmauve  {   
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-weight: bold;
   text-align: center; 
   color: #9e2960;
   vertical-align: middle; 
   padding: 8px 8px 8px 8px;
}

.toclmauve  {   /* toc left column header */
   text-align: left; 
}

/* TOC ENTRIES (TD)*/

.toc33 , .toc33nolink , .toc33wlink , .toc33cwlink , .toc50wlink , .toc50cwlink {  /* see added rules below */
   width: 33%;
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: bold;
   text-align: left; 
   vertical-align: top; 
   padding: 8px 8px 8px 8px;   /* top right bottom left  */
   border: 1px solid black; 
}

.toc33cwlink ,  .toc50cwlink{   /* modifying rule */
   text-align: center; 
}

.toc50wlink , .toc50cwlink {   /* modifying rule */
   width: 50%;
}

.toc50cwlink {   /* modifying rule */
   text-align: center; 
}

td.tochind22compact , p.tochind22compact { /* 2em = 32px hanging indent; see added rule below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 13px;
   font-weight: bold;
   text-align: left; 
   vertical-align: top; 
   text-indent: -2em;
   padding: 2px 2px 2px 2em;   /* SIC: top right bottom left  */
}



/* @IMG@   IMAGES IMG    IMAGES IMG    IMAGES IMG    IMAGES IMG    IMAGES IMG    IMAGES IMG    IMAGES IMG       */
/*   prevent default border, added 12/10/2008, div added 1/2019 */

img {
   border: 0;
}


img.inlinephoto {
   display: inline-block;  /* can set width and height w inline-block but not with inline */
   margin: 10px 10px 10px 10px;     /* top right bottom left  */
}


img.slideshow { /* for C/K wedding */
   height:100% ;
   margin:0 auto;
   padding: 0;
   text-align: center; 
}


   
/* @FIF@   FLOATED IMAGES and FIGURES    FLOATED IMAGES and FIGURES     FLOATED IMAGES and FIGURES     FLOATED IMAGES and FIGURES  */

div.divtoright, div.divtoleft {  
   /* Div method of floating one or more centered thumb photos, figures, or other bold content to the right or left or center position
      No borders or margins; 
      To specify width for img + wider text + L-R padding, use HTML inline style   <div class="divtoright" style="width:193px;">
      Set styled width = 70 + img width, minimum 160px */
   display:inline-block;
   float: right;
   padding: 5px 10px 5px 10px;  /* top right bottom left; */ 
   border: 0; 
   text-align: center;
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: bold;
   margin:  0;  /* revised to 0, use only padding */
}

div.divtoleft  {   /* modifying for left div(s)  */
   float: left;
}



/* @PTT@   PHOTOS & THUMBNAILS IN TABLES    PHOTOS & THUMBNAILS IN TABLES    PHOTOS & THUMBNAILS IN TABLES    
   Captions in tables and free
   Use thumbc20/thumbdescrl80 for 2 col thumb/description table 
   Thumb usually have smaller font than Photo
   Generally do not mix both td and P elements of this type due to margin/padding duplication 
   To specify inline alignment of img in a paragraph in IMG style, 
      use IMG class="inlinephoto" along with style="text-align:left" etc. */
   
td.photocblue {
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #003399; 
   text-align: center; 
   vertical-align: top; 
   padding: 13px 0 13px 0;  /* top right bottom left  */
}

/* Centered bold td's ; added rules below */
td.thumbc ,  td.thumbcmauve  ,  td.thumbcmauvecompact  ,  td.thumbc20 ,
      td.thumbc33 , td.thumbc33mauve  , td.thumbc30mauve ,
      td.thumbc50 , td.thumbc50mauve, td.thumbc50ltgray, 
      td.rowofthumbsc, td.rowofthumbsc20, td.rowofthumbsc25, td.rowofthumbsc33, td.rowofthumbsc50   {     
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 15px;
   font-weight: bold;
   color: #000000; /* black, modify below PRN or as link */
   text-align: center; 
   vertical-align: top; 
   padding: 13px 0 13px 0;   /* top right bottom left  */
}

td.thumbcmauve {   /* modifying rule */
   color: #9E2960;  
}

td.thumbcmauvecompact {  /* modifying rule */
   color: #9E2960;  
   padding: 3px 0 3px 0;   /* top right bottom left  */
}

td.thumbc20 {   /* modifying rule */
   width: 20%; 
}

td.thumbc33 {  /* modifying rule */
   width: 33%; 
}

td.thumbc33mauve {  /* modifying rule */
   width: 33%; 
   color: #9E2960;  
}

td.thumbc30mauve {  /* modifying rule */
   width: 30%; 
   color: #9E2960;  
}

td.thumbc50  {  /* modifying rule */
   width: 50%; 
}

td.thumbc50mauve {   /* modifying rule */
   width: 50%; 
   color: #9E2960;  
}

td.thumbc50ltgray {   /* modifying rule */
   width: 50%; 
   color: #808080;   
}

/* Left-Aligned bold td; added rules below */
td.thumbdescrl80 {
   width: 80%; 
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 15px;
   font-weight: bold;
   color: #000000;  
   text-align: left; 
   vertical-align: middle;   /* note */
   padding: 13px 0 13px 13px;   /* top right bottom left  */
}

td.rowofthumbsc {  
   /* Bold centered, width: not specified  */
     padding: 5px 25px 5px 25px;  /* top right bottom left; */
}

td.rowofthumbsc20 {    
/* use with table class="trowsofthumbs5"> */
   width: 20%; 
   padding: 5px 25px 5px 25px;  /* top right bottom left;  this is a preferred td for use in a row of 5 thumbs; 
      padding is helpful for text */
}

td.rowofthumbsc25 {
/* use with table class="trowsofthumbs4"> */
   width: 25%; 
     padding: 5px 25px 5px 25px;  /* top right bottom left;  this is a preferred td for use in a row of 4 thumbs; 
      padding is helpful for text */
}

td.rowofthumbsc33 {
/* use with table class="trowsofthumbs3"> */  
   width: 33%; 
     padding: 5px 25px 5px 25px;  /* top right bottom left; this is a preferred td for use in a row of 3 thumbs. 
      padding is helpful for text wrapping but cells do not line up precisely with 4 thumbs */
}

td.rowofthumbsc50 {
/* use with table class="trowsofthumbs2"> */
   width: 50%; 
     padding: 5px 25px 5px 25px;  /* top right bottom left; this is a preferred td for use in a row of 2 thumbs
      padding is helpful for text wrapping but cells do not line up precisely with 4 thumbs */
}



/* @PTO@   PHOTOS AND THUMBNAILS OUTSIDE TABLES    PHOTOS AND THUMBNAILS OUTSIDE TABLES    PHOTOS AND THUMBNAILS OUTSIDE TABLES       */

p.thumbc ,  p.thumbcmauve {   
/* Bold centered black,  added rules below */
   font-size: 15px;
   font-weight: bold;
   color: #000000;  /* black */  
   text-align: center; 
   vertical-align: top; 
   margin: 0 0 13px 0;   /* top right bottom left  */
}

p.thumbcmauve {   /* modifying rule */
   color: #9E2960;
}

p.photoc , p.photocmauve , p.photocboldmauve {   
/* centered, not bold, black; added rule below */
   font-size: 16px;
   font-weight: normal;
   color: #000000;  /* black */
   text-align: center; 
   vertical-align: top; 
   margin: 16px 0 16px 0;   /* top right bottom left  */
}

p.photocmauve, p.photocboldmauve {
   color: #9E2960;   /* modifying rule mauve */
}

p.photocboldmauve {
   font-weight: bold; /* modifying rule added 1/2019 */
   color: #9E2960;   /* modifying rule */
}

p.photocsmall , p.photocmauvesmall ,  p.photocltgraysmall {      
/* small print, centered, not bold, black; added rules below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 13px;
   font-weight: normal;
   text-align: center; 
   vertical-align: top; 
   margin: 13px 13px 13px 13px;   /* top right bottom left  */
}

p.photocmauvesmall {
   color: #9E2960;    /* modifying rule mauve */
}

p.photocltgraysmall {
   color: #808080;    /* modifying rule light gray*/
}



/* @EPI@   EPIGRAPHS    EPIGRAPHS    EPIGRAPHS    EPIGRAPHS    EPIGRAPHS    EPIGRAPHS    EPIGRAPHS    EPIGRAPHS      */

p.epigraph , p.epigraphmauve , p.epigraphltgray {      
/*  Bold centered black, added rules below */
   font-family: "Book Antiqua", "Bookman Old Style", "Times New Roman", Garamond, Times, serif;
   font-size: 16px;
   font-style: italic;
   font-weight: bold;
   color: #000000;
   text-align: center; 
   margin: 32px 6em 16px 6em;   /* top right bottom left  */
}

p.epigraphmauve {
   color: #9E2960;  /* modifying rule mauve*/
}

p.epigraphltgray {
   color: #808080;    /* modifying rule light gray*/
}   



/* @FOO@   FOOTERS    FOOTERS    FOOTERS    FOOTERS    FOOTERS    FOOTERS    FOOTERS    FOOTERS    FOOTERS       */

p.footer , p.footermauve , p.footerltgray {
/* bold, centered, black, added rules below */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 13px;
   font-weight: bold;
   color: #000000;  
   text-align: center; 
   vertical-align: top; 
   margin: 32px 16px 16px 16px;   /* top right bottom left  */
}

p.footermauve {
   color: #9E2960;  /* modifying rule mauve */ 
}

p.footerltgray {   /* modifying rule light gray*/
   color: #808080;   
}



/* @LIS@   LISTS    LISTS    LISTS    LISTS    LISTS    LISTS    LISTS    LISTS    LISTS    LISTS    LISTS    LISTS       
   dl = description list w dt = term and dd = description, 
   ul = unordered list w list items li with optional bullets
   ol = ordered list w list items li and numbers or letters
   12pt = 16px is preferred font size, 10pt 13px is compact
   Note that in past Firefox does not properly position bullets when hanging indent used in LI class
   Don't add a <p> element in a <li> unless you wish to have it's font style and other properties prevail  
   Remember that margins for adjacent entries collapse to the margin size of the larger one */

ul , ol , dl  { 
/* default for all lists; left align, not bold, added rules below.  NOTE: dl lists must have one dd for the final dt */
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: #000000; 
   text-align: left; 
   list-style-position: outside;   /* bullet is to left of succeeding lines */
   margin: 0 0 16px 36px;          /* top right bottom left; */
      /* add bottom margin same as <p>; add 36px to move bullet a little inside parent, width from Div ; no border */  
   padding: 0 8px 0 8px;  /* add L - R padding unlike <p> */
}

li > ul , li > ol , li > dl  {
/* modifying rule for each direct child descendant */
   margin-top: 5px; } /* add small space above the new child list (ul/li/ol), the parent li has not been closed  */

li , li.ar12blkbm3 , li.ar12blkboldbm3 {   
/* old names,  bm = 3 pt = ~5 px; modifying rule for li */
   margin-bottom: 5px;  /* 3pt = 4px; add space at bottom of all li's  */
}

li.ar12blkboldbm3 {   /* modifying rule */
   font-weight: bold;
}

li.ar10blk {
   font-size: 13px;  /* 10pt = 13px  */
}

ul.nb , ol.nb {  /* prevent bullet or number in ul or ol */
   list-style-type: none;
}

ul.widerlm , ol.widerlm {  
/* give a wider left margin to ul or ol list items so bullet is indented more relative to parent */
   margin-left: 60px;
}

dt {   
/* bold black description term name, don't indent */
   font-size: 16px;
   font-weight: bold;
   color: #000000;  
   margin-bottom: 5px; 
}

dt.hi  {
/* ? useful for hanging indent of dt's where 1st dt or is hang indented 
     and <br> separates the others.  Don't use for ul and ol lists, bullets overlap text  */   
   margin-left: 48px;   
   text-indent: -48px; 
}

dd , dd.ar12blk , dd.ar10blk  {
   font-weight: normal;
   color: #000000;  
   margin-left: 48px;   /* indent the dd description  */
   margin-bottom: 5px; 
}

dd , dd.ar12blk {
   font-size: 16px;
}
   
dd.ar10blk {
   font-size: 13px;  /* 10pt = 13px;  */
}



/* @HOR@   HORIZONTAL RULERS    HORIZONTAL RULERS    HORIZONTAL RULERS    HORIZONTAL RULERS    HORIZONTAL RULERS    
   <hr> is centered by default.  Use border-top for size and color
   Can't use padding, it enlarges the hr */

hr , hr.mauve , hr.ltgray {    /* added rules below */
    display: block;
    width: 85%;
    margin: 40px auto 40px auto;   /* top right bottom left  ; this centers the paragraph, may be redundant */
    border-top: 2px solid #000000;  /* black , modify to follow */
}

hr.mauve  {    /* modifying rule */
   border-top: 2px solid #9E2960;
}

hr.ltgray  {    /* modifying rule */
   border-top: 2px solid #808080;
}



/* @BSS@   BUTTONS AND SLIDESHOWS    BUTTONS AND SLIDESHOWS    BUTTONS AND SLIDESHOWS    BUTTONS AND SLIDESHOWS        */

.container { /* for images with overlapping L-R buttons */
   position: relative;
   width: 100%;   
}

.container img { /* Make the image responsive */
  width: 100%;
  height: auto;
  position: absolute; /* added 2/14 */
  top: 0;
}

.container .btn { /* Style a button, not yet positioned in the container */
  position: absolute;
  background-color: rgba(224,224,224,0.5) ;
  color: #990000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  width: 6em;
  padding: 12px 0;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 1em;
}

.container .btn.lefttop {  /* create in div container a left top button using two classes , added 2/14 */
   top: 0;
   left: 0;
}

.container .btn.righttop {  /* HTML: <button class="btn righttop"  onclick="myShow.previous()"> */
   top: 0;
   right: 0;
}

 .container .btn:hover {
  background-color: white;
}

button.nextprev { /* Next, Prev, not used, see .btn.lefttop etc. above */
  background-color: #E0E0E0 ;
  border: none;
  color: #990000;
  padding: 5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 6em;
  margin: 0 8px 0 0;
}