/* STYLES USED ON MOST PAGES (variant default-l used on index.htm):  */   

.default {
  color: black;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: center;  
  margin-left: 2.5%;
  margin-right: 2.5%;
    }
    
.default-l {
  color: black;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: left;  
  margin-left: 2.5%;
  margin-right: 2.5%;
    }
.heading {
  color: #800040;
  font-size: 2em;
  font-style: italic;
  font-weight: bold;
  margin: 16px;
    }
.sig {
  font-size: 3em;
  font-family: "Mistral", "Comic Sans MS";
  color: #800040;
  margin: 15px 0px 0px 0px;
    }    

/* MAIN TITLE STYLES:
these have margins of 16px to replicate spacing of non-CSS version of site, but if they are used in a single line with others (ie not as simple centred subheading etc), left and/or right margin may need extra style to make it 0px */

.title {
  font-size: 2em;
  font-weight: bold;
  text-decoration: underline;
  margin: 16px;
    }
.title2 {
  font-size: 2em;
  font-weight: bold;
  margin: 16px;
    }    
.title3 {
  font-size: 3em;
  font-weight: bold;
  margin: 16px;
    }        
/* use .title4 for non-CSS size="5" */

.title4 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 16px;
    }

/* OTHER TEXT SIZES & STYLES */
    
/* .gensub - equivalent to size="4" in non-CSS version of site and used for generation subheadings in extended family pages and in charts; also subheadings in Yalding Solman index page (solman1) and possibly occasionally elsewhere */
             
.gensub {
  font-size: 1.2em;
  font-weight: bold;
    }

/* class .small equivalent to size="2" in non-CSS; line-height 1.15 added to make it look less squashed, but this can be varied */
.small {
  font-size: 0.8em;
  line-height: 1.15;
    }
.small-l {
  font-size: 0.8em;
  line-height: 1.15;
  text-align: left;
    }
.xs {
  font-size: 0.75em;
    }

/* larger text: .large for size 4, .xl for size 5 (note that .gensub has 1.2em for size 4) */
.large {
  font-size: 1.15em;
    }
.xl {
  font-size: 1.5em;
    }

.left {
  text-align: left;
    }        
.center {
  text-align: center;
    }        
.red {
  color: #FF0000;
    }

/* FAMILY PAGES */    
    
.father {
  font-size: 2em;
  font-weight: bold;
  color: #0000FF;
    }
.father2 {
  font-size: 0.8em;
  font-weight: bold;
  color: #0000FF;
    }
.father3 {
  font-size: 2em;
  font-weight: bold;
  color: #000080;
    }    
.mother {
  font-size: 2em;
  font-weight: bold;
  color: #FF0000;
    }
.mother2 {
  font-size: 0.8em;
  font-weight: bold;
  color: #FF0000;
    }
.mother3 {
  font-size: 2em;
  font-weight: bold;
  color: #FF0080;
    }
.spouse {
  font-size: 2em;
  font-weight: bold;
    }    
.fp-marr {
  font-size: 1.5em;
  font-weight: bold;
  color: #00FF00;
    }

/* see also class .gensub above (line 61) for generation subheadings */    

    
/* CHARTS */

/* Table classes for chart pages identified by max number of cells; tr styling makes vertical alignment top, but class .nk applies middle to cells with NOT KNOWN  */
    
.chart1 tr, .chart2 tr, .chart4 tr, .chart8 tr, .chart16 tr {
  vertical-align: top;
    }
td.nk {
  vertical-align: middle;
    }

table.chart1 {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid;
  border-color: #C0C0C0 #808080 #808080 #C0C0C0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.15;
  border-spacing: 7px;  
  padding: 1px;  
    }
.chart1 td {
  width: 100%;
  border: #0000FF 1px solid;
  padding: 6px;
    }

table.chart2 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid;
  border-color: #C0C0C0 #808080 #808080 #C0C0C0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.15;
  border-spacing: 7px;  
  padding: 1px;  
    }
.chart2 td {
  width: 50%;
  border: #0000FF 1px solid;
  padding: 6px;
    }

table.chart4 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid;
  border-color: #C0C0C0 #808080 #808080 #C0C0C0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.15;
  border-spacing: 7px;  
  padding: 1px;  
    }
.chart4 tr:nth-child(1) td {    
  width: 50%;
  border: #0000FF 1px solid;
  padding: 6px;
    }
.chart4 tr:nth-child(2) td {    
  width: 50%;
  border: #FF0000 1px solid;
  padding: 6px;
    }

table.chart8 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid;
  border-color: #C0C0C0 #808080 #808080 #C0C0C0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.15;
  border-spacing: 7px;  
  padding: 1px;  
    }
.chart8 tr:nth-child(1) td:nth-child(1), .chart8 tr:nth-child(1) td:nth-child(2) {    
  width: 25%;
  border: #0000FF 1px solid;
  padding: 6px;
    }
.chart8 tr:nth-child(1) td:nth-child(3), .chart8 tr:nth-child(1) td:nth-child(4) {    
  width: 25%;
  border: #FF0000 1px solid;
  padding: 6px;
    }
.chart8 tr:nth-child(2) td:nth-child(1), .chart8 tr:nth-child(2) td:nth-child(2) {    
  width: 25%;
  border: #00FFFF 1px solid;
  padding: 6px;
    }
.chart8 tr:nth-child(2) td:nth-child(3), .chart8 tr:nth-child(2) td:nth-child(4) {    
  width: 25%;
  border: #FF00FF 1px solid;
  padding: 6px;
    }

table.chart16 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid;
  border-color: #C0C0C0 #808080 #808080 #C0C0C0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.15;
  border-spacing: 7px;  
  padding: 1px;  
    }
.chart16 tr:nth-child(1) td:nth-child(1), .chart16 tr:nth-child(1) td:nth-child(2) {    
  width: 25%;
  border: #0000FF 1px solid;
  padding: 6px;
    }
.chart16 tr:nth-child(1) td:nth-child(3), .chart16 tr:nth-child(1) td:nth-child(4) {    
  width: 25%;
  border: #FF0000 1px solid;
  padding: 6px;
    }
.chart16 tr:nth-child(2) td:nth-child(1), .chart16 tr:nth-child(2) td:nth-child(2) {    
  width: 25%;
  border: #000080 1px solid;
  padding: 6px;
    }
.chart16 tr:nth-child(2) td:nth-child(3), .chart16 tr:nth-child(2) td:nth-child(4) {    
  width: 25%;
  border: #800000 1px solid;
  padding: 6px;
    }  
.chart16 tr:nth-child(3) td:nth-child(1), .chart16 tr:nth-child(3) td:nth-child(2) {    
  width: 25%;
  border: #00FFFF 1px solid;
  padding: 6px;
    }
.chart16 tr:nth-child(3) td:nth-child(3), .chart16 tr:nth-child(3) td:nth-child(4) {    
  width: 25%;
  border: #FF00FF 1px solid;
  padding: 6px;
    }
.chart16 tr:nth-child(4) td:nth-child(1), .chart16 tr:nth-child(4) td:nth-child(2) {    
  width: 25%;
  border: #008080 1px solid;
  padding: 6px;
    }
.chart16 tr:nth-child(4) td:nth-child(3), .chart16 tr:nth-child(4) td:nth-child(4) {    
  width: 25%;
  border: #800080 1px solid;
  padding: 6px;
    }

/* CENSUS TABLES */

/* Colours for ancestors: */

.anc-m {
  color: #0000FF;
    }
.anc-f {
  color: #FF0000;
    }

/* class .census41 is also used for some earlier US censuses */

table.census41 {
  width: 100%;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: center;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.census41 td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 3px;
    }
.census41 td:nth-child(1) {
    width: 30%;
 }    
.census41 td:nth-child(2) {
    width: 15%;
 }        
.census41 td:nth-child(3) {
    width: 27%;
 }        
.census41 td:nth-child(4) {
    width: 28%;
 }

table.census {
  width: 100%;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: center;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.census td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 3px;
    }
.census td:nth-child(1) {
    width: 26%;
 }    
.census td:nth-child(2) {
    width: 9%;
 }        
.census td:nth-child(3) {
    width: 9%;
 }        
.census td:nth-child(4) {
    width: 8%;
 } 
.census td:nth-child(5) {
    width: 24%;
 }  
.census td:nth-child(6) {
    width: 24%;
 }  

table.census21 {
  width: 60%;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: center;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.census21 td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 3px;
    }
.census21 td:nth-child(1) {
    width: 40%;
 }    
.census21 td:nth-child(2) {
    width: 60%;
 }
 
/* .cens-oth is for little-used censuses with unusual column widths, such as US & Canada in Yalding census pages, and defines everything except column widths. Each census table needs to start with a <colgroup> containing width definitions (as style) on <col> tags. */
         
table.cens-oth {
  width: 100%;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: center;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.cens-oth td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 3px;
    }

    
/* GRO INDEX TABLES */

/* Classes .gro-b .gro-m .gro-m2 (for 1911+) and .gro-d (with associated td and child definitions) define BMD index tables, including borders, cell widths etc, and Bold in top row */     
    
table.gro-b {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: left;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.gro-b tr:first-child {
  font-weight: bold;
    }
.gro-b td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 5px;
    }
.gro-b td:nth-child(1), .gro-b td:nth-child(2) {
  width: 6%;
   }    
.gro-b td:nth-child(3) {
  width: 12%;
  }    
.gro-b td:nth-child(4), .gro-b td:nth-child(5) {
  width: 19%;
  }    
.gro-b td:nth-child(6) {
  width: 18%;
  }    
.gro-b td:nth-child(7), .gro-b td:nth-child(8) {
  width: 10%;
  }      

table.gro-d {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: left;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.gro-d tr:first-child {
  font-weight: bold;
    }    
.gro-d td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 5px;
    }
.gro-d td:nth-child(1), .gro-d td:nth-child(2), .gro-d td:nth-child(5) {
  width: 6%;
   }    
.gro-d td:nth-child(3), .gro-d td:nth-child(8) {
  width: 13%;
  }    
.gro-d td:nth-child(4) {
  width: 24%;
  }    
.gro-d td:nth-child(6) {
  width: 20%;
  }    
.gro-d td:nth-child(7) {
  width: 12%;
  }        
  
table.gro-m {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: left;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.gro-m tr:first-child {
  font-weight: bold;
    }
.gro-m td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 5px;
    }
.gro-m td:nth-child(1), .gro-m td:nth-child(2) {
  width: 6%;
   }    
.gro-m td:nth-child(3), .gro-m td:nth-child(7) {
  width: 13%;
  }    
.gro-m td:nth-child(4), .gro-m td:nth-child(5) {
  width: 25%;
  }    
.gro-m td:nth-child(6) {
  width: 12%;
  }    

table.gro-m2 {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: left;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.gro-m2 tr:first-child {
  font-weight: bold;
    }
.gro-m2 td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 5px;
    }
.gro-m2 td:nth-child(1), .gro-m2 td:nth-child(2) {
  width: 6%;
   }    
.gro-m2 td:nth-child(3), .gro-m2 td:nth-child(8) {
  width: 13%;
  }    
.gro-m2 td:nth-child(4), .gro-m2 td:nth-child(5) {
  width: 15%;
  }    
.gro-m2 td:nth-child(6) {
  width: 20%;
  }    
.gro-m2 td:nth-child(7) {
  width: 12%;
  }        

  
/* ADDITIONAL STYLES FOR YALDING PAGES */

/* see note on .gensub (line 61)
table.index used for navigation indexes at top of Yalding GRO pages (date spans) & other index/list pages (A,B,C etc). Cell widths in these tables differ so are defined by colgroup/colspan tags at the top of each table. */

table.index {
  border: #800040 2px solid;
  border-spacing: 5px;
  margin-left: auto;
  margin-right: auto;  
    }
table.index td {
  border: #800040 1px solid;
  padding: 5px 4px;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
   }   

/* YALDING PRs (etc) PAGE:
table.ypr used for navigation index at top;
.list used to indent <div> containing content
.witness used for further indent with marriage listings and people named in wills
.will for each will (as a separate <p>) */

table.ypr {
  width: 550px;
  border: #800040 2px solid;
  border-spacing: 5px;
  margin-left: auto;
  margin-right: auto;  
    }
table.ypr td {
  border: #800040 1px solid;
  padding: 5px 4px;
  text-align: center;
  font-size: 0.8em;
   }      
.ypr td:nth-child(1) {
  width: 44%;
  }       
.ypr td:nth-child(2), .names td:nth-child(3) {
  width: 28%;
   }
          
.list {
  margin-left: 75px;
   }   
.witness {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 115px;
   }
.will {
  margin-bottom: 0;
   }

/* YALDING NAME INDEXES:
.names used for indexes to Yalding Solmans & their spouses. (Modelled on GRO tables but with different table & column widths) */   
   
table.names {
  width: 750px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #B0B0B0 black black #B0B0B0;
  text-align: left;
  font-size: 0.8em;
  border-spacing: 3px;  
  padding: 1px;
    }
.names tr:first-child {
  font-weight: bold;
    }
.names td {
  border: 1px solid;
  border-color: black #B0B0B0 #B0B0B0 black;
  padding: 5px;
    }
.names td:nth-child(1) {
  width: 30%;
  }       
.names td:nth-child(2), .names td:nth-child(3) {
  width: 17%;
   }    
.names td:nth-child(4) {
  width: 36%;
  }