/* ************************************************************************** */
/* hunn-ons-20.css                                              11 April 2020 */

/* ------------------ Global variables specific to this site ---------------- */
:root {
/* --------------- Over-ride variables set in p-variables.css --------------- */
  /* 3-column layout
     NOTE Change this and you should change break-points in p-3col-flex.css   */
  --w-l-col: 15;                        /* 3-col: width of left column (rem)  */
  --w-r-col: 0;                         /* 3-col: width of right column (rem) */

/* ----------------- Other variables you may want to change -----------------
  --spacing: 0.75rem;                     default size of padding and margins
  --border: 1px solid gray;                                    default border
  --border-radius: var(--spacing);                      default border radius
  --box-shadow: 2px 5px 20px 0 rgba(0,0,0,0.4);            default box shadow
  --bg-object: rgba(255,255,255,0.50);      default background for panel etc.
  --figcap-font-size: 0.8em;
  
/* -------------------- New variables just for this site -------------------- */

  /* Maximum overall page width on wide screens */
  --w-page: calc(var(--page-max) * 1rem);


  /* background colours */
  --bg-header: #f0f0f0;
  --bg-midcol: #ccffff;
  --bg-menu: #ffffcc;
  
  /* left column menu */
  --mm-l: 0.8rem; /* li - margin to left of lower levels */
  --mm-r: 0.2rem; /* li - margin to right of lower levels */
  --m-rad: 0.4rem; /* li - border radius */
  --m-vgap: 0.1rem; /* li - vertical gaps */
  
  /* will index lists */
  --w-list-spacing: calc(var(--spacing) / 3);
  --w-list-line-ht: 1.2;
  --w-list-bg: rgba(255, 255, 255, 0.5);
  --w-list-min-w: 12rem;
}
/* -------------------------------------------------------------------------- */

#backdrop {
  background-image: linear-gradient(var(--bg-header),white);
  height: 800px;
  height: 80vh;
  z-index: -10;
}

#wrapall {
  max-width: var(--w-page);
  margin: 0 auto;
}

/* Top Row - header and menu buttons etc. */
#site-header {
  position: relative;
  background: #F0F0F0 url(../art/names2.gif) repeat center bottom;
}
#site-header h1 {
	font-family: "Times New Roman", Times, serif;
  color: #470;
/*  font-weight: bold;
  font-style: italic;
  font-family: Baskerville, "Palatino Linotype", Palatino,
    "Century Schoolbook L", "Times New Roman", "serif";
  text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.25);
  margin: 0;
  text-align: center; */
}

#midcol {
  background-color: var(--bg-midcol);
}

/* Accordion menu in left-hand column */
/* additional layout styles */
.my-menu-v {
  padding: var(--spacing) 0;
}
.my-menu-v > ul {
  width: 100%;
}
.my-menu-v ul ul {
  margin: 0 var(--mm-r) 0 var(--mm-l);
  width: calc(100% - var(--mm-r) - var(--mm-l));
}
.my-menu-v li {
  border: var(--border);
  border-radius: var(--m-rad);
  margin: var(--m-vgap) 0;
}
.my-menu-v li.title {
  border: none;
  text-align: center;
}
.my-menu-v a {
  padding: 0 var(--spacing);
  border-radius: var(--m-rad);
}
/* colours */
.my-menu-v { background-color: var(--bg-midcol); }
.my-menu-v li {
  background-color: var(--bg-midcol);
}
.my-menu-v li li {
  background-color: rgba(0,0,0,0.1);
}
.my-menu-v li.title {
  background-color: transparent;
  color: brown;
}
.my-menu-v a:hover {background-color: #c4e3ed;}
.my-menu-v a.active {color: forestgreen;}
.my-menu-v a::after {color: cornflowerblue;} /* sub-menu arrows */

/* menu styling unused in this site? 
.my-menu-v a.extra::before {content: "\2003-\2002";}
.my-menu-v li.generation {
  border-top: var(--border);
}
.my-menu-v hr {
  margin: 0 1rem 0;
  border-color: #999999;
}
.my-menu-v ul ul hr {margin-left: 2rem;}
.my-menu-v ul ul ul hr {margin-left: 3rem;}*/

#content-footer,
#site-footer {
  text-align: center;
}
#content-footer p {
  font-size: 0.7rem;
  line-height: 1em;
}
#site-footer,
.sticky-footer {
  height: var(--sticky-foot-height);
}
.sticky-footer {
    background: white;
    position: fixed;
    bottom: calc(1 - var(--sticky-foot-height));
    transition: bottom 0.5s ease-in-out;
    width: 100%;
    max-width: var(--w-page);
}
.sticky-footer.showfooter {
  bottom: 0;
}
.sticky-footer p {
  text-align: center;
  margin:0;
}
.sticky-footer a {
  background-color:palegreen;
  padding: 2px 1rem;
}

/* Styles for 'midcol' content */

h2 {color: #740;} /* page headers */

figcaption {
  color: brown;
}

/* Transcripts of letters, wills etc. */
.transcript {
  margin: 0 0 var(--spacing);
  padding: var(--spacing) var(--spacing) 0;
  font: 1em/1.3 'LCALLIG';
	background-image: url("../art/goldparchment.jpg");
	background-repeat: repeat;
}
.transcript span.note {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
}
.transcript p.floatr {margin-bottom: 0;}

/* Births & baptisms flexible layout */
.births {
  display: table;
  margin: 0 auto var(--spacing) 2rem;
}
.births div { margin-bottom: calc(var(--spacing) / 2); }
.births div::after {clear:both;}
.births div p {
  line-height: 1;
  margin-bottom: 0;
  float:left;
}
.births div p:nth-child(1) { width:6em; }
.births div p:nth-child(2) { width:8em; text-align: right; }
.births div p:nth-child(3)::before { content: var(--content-emsp)var(--content-ensp); }

.births-1w4 div p:nth-child(1) { width: 4em; }

.births-1w8 div p:nth-child(1) { width: 8em; }
.births-1w10 div p:nth-child(1) { width: 10em; }
.births-1w12 div p:nth-child(1) { width: 12em; }
.births-1w14 div p:nth-child(1) { width: 14em; }

.births-2w10 div p:nth-child(2) { width: 10em; }

/* Details of children */
ul.children li { margin-bottom: var(--spacing); }
ul.children li > ul { margin-top: calc(var(--spacing) / 2); }
ul.children li p,
ul.children li section.births { margin-bottom: calc(var(--spacing) / 2); }
ul.children li section.births p { margin-bottom: 0; }

section.sources p {
	font-size: 0.85em;
}

section.reference {
  margin: 0 0 var(--spacing);
  padding: var(--spacing) var(--spacing) 0;
	border: var(--border);
}
section.reference p {
	font-size: 0.9rem;
	color: #663300;
}




/* Newspaper Extracts */
section.newspaper {
  margin: 0 0 var(--spacing);
  padding: var(--spacing) var(--spacing) 0;
	border: var(--border);
	font-family: "Times New Roman", Times, serif;
}

section.clipping { /* for some reason this works - above doesn't!! */
  margin: 0 0 var(--spacing);
  padding: var(--spacing) var(--spacing) 0;
	border: var(--border);
	font-family: "Times New Roman", Times, serif;
}
section.clipping.columns {
  padding-bottom: var(--spacing);
}
section.clipping p.credit {
  font-size: 0.8em;
  color: brown;
  text-align: right;
}

/* headstone pairs (figure & div) */
section.heads { 
  align-items: center;
  align-content: center;
}
section.heads figure, 
section.heads div.card {
  background-color:azure;
  text-align: center;
}
section.heads div.card p {
  margin-bottom: 0.25em;
}
section.heads div.card p:last-child {
  margin-bottom: var(--spacing);
}
section.heads div.card p.quo,
section.heads div.card span.quo{
  font-size: 0.85em;
  font-style: italic;
  line-height: 1.1;
}

section.shrink-text div p { font-size: 0.85em; }

.credit {
  font-size: 0.8em;
  color: darkblue;
}

.quotation {
  margin-left: 3em;
}

/* ---------------------------- Places Pages ----------------------------- */
article.places p.comment{
	font-size: 0.9em;
	color: #900;
}
article.places p.attrib {
	font-size: 0.8em;
	color: #666;
}
article.places h3 {
  margin-top: calc(var(--spacing) * 2);
}

/* --------------------- Links Page & Books Page ----------------------- */
section.link,
section.book {
  margin: 0 0 var(--spacing);
  padding: var(--spacing) var(--spacing) 0;
	border: 1px solid #933;
	border-radius: 15px;
	background-color: Cornsilk; /* #FFF8DC; cf #FFD; */
}
section.book h5 { margin-bottom: 0.2rem; }


/* -------------------------- Gallery Pages ---------------------------- */
section.galpics {
  align-items: center;
}

/* --------------------- Richard's Inventory Page ---------------------- */
table.stock,
table.terms,
table.inventory { 
  margin: 0 0 var(--spacing);
}
table.inventory td { 
  vertical-align: bottom;
  text-align: right;
  width: 2rem;
}
table.inventory td:first-child { 
  text-align:left;
  width: auto;
}
table.inventory h3 { 
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}
table.inventory p { 
  margin-bottom: 0.2rem;
}

table.stock td {
  padding-left: 2rem;
}

table.terms td:first-child {
  width: 10em;
  vertical-align: top;
}

/* ------------------------ Will Listings Pages ------------------------ */
  .w-list {
    column-width: var(--w-list-min-w);
    column-gap: var(--w-list-spacing);
    margin: 0 0 var(--spacing);
    padding: 0; 
}
  .w-list ul {
    margin: 0;
    padding: 0; 
    list-style-type: none; 
    width: 100%;
  }
  .w-list li {
    margin: 0 0 var(--w-list-spacing);
    break-inside: avoid;
    border: var(--border);
    background-color: var(--w-list-bg);
  }
  .w-list li:after {clear: both;
    display: table;
    content: " ";
  }
  .w-list p {
    padding: 0 var(--w-list-spacing);
    margin: 0;
    line-height: var(w-list-line-ht);
  }
  .w-list p:first-child {
    font-weight: bold;
  }
  .w-list p:nth-child(2):before { content: "of ";}
  .w-list p:nth-child(2):after { content: ", ";}
  .w-list p:nth-child(3):before,
  .w-list p:nth-child(4):before,
  .w-list p:nth-child(5):before { content: " ";}
  .w-list p:nth-child(2),
  .w-list p:nth-child(3),
  .w-list p:nth-child(4),
  .w-list p:nth-child(5) { float: left; }