@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap');
@import url("media.css");
:root {
	--archivex-jumplist-panel-background: cyan;
	--main-text: #114ccf; /*default all text all pages*/
	--nav-and-footer-background: #39f;
	--archive-box-background: cyan;

}


* {
	box-sizing: border-box;
	padding: 0;
}
	html {
		height: 100%;
	}
body {
	display: flex;
	flex-direction: column;
	min-height: 100%; /*without this sticky footer fails*/
	/* [disabled]min-height: 100vh; */ /*RWD.css used % here */
	font-size: 20px; /* kevin he had 22 */
	line-height: 24px; /* kevin */
	/*    color: var(--main-text);
*/    
	color: #000;
	font-family: "Quicksand", sans-serif; /* kevin */
	background-color: white;
	margin: 0 10px 1rem 10px; /* gives too wide margins on ipad landscape*/
}

a {
	text-decoration: none;
}


body nav {
	position: sticky;
	top: 0;
}

.MainContent {
	flex: 1; /* grow, shrink, basis all 1 */
	margin: 0 10px 1rem 10px; 
}

/* original sticky footer solution from css tricks */
.wrapper {
	min-height: 100%;
	margin-bottom: -50px;
}

.Footer {
	padding: .5rem;
}
.footer {
	margin-top: auto;
	padding: .5rem; /* was in RWD.css */
}
.footer, .push {
	height: 50px; /* DCH_30 */
}

nav {
	background: var(--nav-and-footer-background); /* dev is #777 live is 036*/
	padding: 0 15px; /* text-align: centre; only centres Four Families text */
	color: white; /* DCH_nnn only affects those with sub -tems (Trees and Four Families */
}

a {
    color: blue;
    font-weight: 900;
}

	.flex-container-for-footer {
	display: flex;
	align-items: center; /* centre vertically (on cross axis) */
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;
}


/*		footer.flex-container-for-footer div {
	padding-right: 25px;
	font-size: 1em;
		}
*/		footer {
			background-color: var(--nav-and-footer-background); 
			color: white;
			height: 50px;
		}
/* ------------------------------------------------------------------------- 
   DCH for archive: entries, set as blue
  -------------------------------------------------------------------------- */
.archive_text {
    font-style: italic;
    color: rgba(102,0,255,0.48);
    font-weight: bold;
    padding-bottom: 10px;
}
.Footer .background_for_archive_items {
    border-radius: 15px;
    padding: 20px;
    background-color: var(--archive-box-background);
}


/* ----------------------------------------------------------------------- 
   for BMD footer
 ------------------------------------------------------------------------- */
.bmd_grid_3_cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}



img.css_icon {
		padding-left: 20px;
		width: 18%;
		display: inline-block;
}
	.css_icon {
		padding-top: 5px;
		padding-left: 20px;
	}



 /* DCH_054   */
/*	img {
	display: block;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	}
*/
img.pad_FB_logo {
	width: 5.5%;
	display: inline-block}


.line_height_1-8rem {
	line-height: 1.8rem;
}
.resp_image {
	width: 100%;
	max-width: 80%;
}
.resp_image_new {
    display: block;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}		
.resp_image_new_full_width {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}		
.resp_image_new_not_centered {
    display: block;
	max-width: 40%;
}

.resp_image_new_lilian {
    display: block;
    max-width: 20%;
    width: 100%;
}
/* ---------------------------------------------------------------------------------------------------------------------- 
  centres each person's main name and birth, death dates, used on all 'people' pages
 ------------------------------------------------------------------------------------------------------------------------ */
.centered_text {
    text-align: center;
}
.centered_image {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
figure {
	margin: 0;
}

/* ---------------------------------------------------------------------- 
  miscellaneous float/clear classes 
 ------------------------------------------------------------------------ */

/* ---------------------------------------------------------- */
/* floats left                                                */
/* ---------------------------------------------------------- */
.fltlft_margin_RB {
	margin-right: 18px;
	margin-bottom: 18px;
	float: left;
}
.fltlft_margin_RB_frith {
	margin-right: 18px;
	margin-bottom: 18px;
	float: left;
	width: 600px; /* reduce size to allow text to float up left of photo */
	height: 500px; /* prevents text drifting under the photo */
}
.fltlft_margin_T {
	float: left;
	margin-top: 18px;
}

.fltlft_margin_R {
	float: left;
	margin-right: 18px;
}


.fltlft_margin_TRBL {
	margin-right: 18px;
	margin-bottom: 18px;
	float: left;
	margin-left: 18px;
	margin-top: 18px;
}
.fltlft_margin_RBL {
	margin-right: 18px;
	margin-bottom: 18px;
	float: left;
	margin-left: 18px;
}
.fltlft_no_padding {
	float: left;
}
.fltrt_L {
	float: right;
}
/* ---------------------------------------------------------- */
/* floats right                                               */
/* ---------------------------------------------------------- */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 18px;
}
.fltrt_margin_TLB {
	margin-left: 18px;
	margin-bottom: 18px;
	float: right;
}
.fltrt_margin_RBL {
	margin: 0 18px 18px 18px;
	float: right;
}
.fltrt_margin_R {
	float: right;
	margin-right: 30px;
}
.fltrt_margin_L {
	float: right;
	margin-left: 30px;
}
.fltrt_margin_TB {
	margin-bottom: 18px;
	float: right;
	margin-top: 18px;
}
.fltlft_margin_TRB {
	margin-bottom: 18px;
	margin-top: 18px;
	margin-right: 18px;
	float: left;
}
.fltlft_margin_TR {
	/* [disabled]margin-bottom: 18px;
*/
	margin-top: 18px;
	margin-right: 18px;
	float: left;
}
.float_right {
	float: right;
}
.fltrt_margin_LB {
	margin-left: 18px;
	margin-bottom: 18px;
	float: right;
}
.fltrt_margin_RBL {
	margin-left: 18px;
	margin-bottom: 18px;
	margin-right: 18px;
	float: right;
}
.fltrt_margin_TRBL {
	margin-left: 18px;
	margin-bottom: 18px;
	margin-right: 18px;
	float: right;
	margin-top: 18px;
}
.fltlft_margin_RBL {
	margin-right: 18px;
	margin-bottom: 18px;
	float: left;
	margin-left: 18px;
}
.my_outline_for_NPG {
	border: 1px solid blue;
	padding: 20px;
}
.my_outline {
	border: 1px solid blue;
	padding: 20px;
}

.btn {
	display: inline-block;
	border-radius: 20px;
	color: #fff;
	margin-top: 1em;
	padding: 6px 12px;
	background-color: #A50ED5;
	font-size: 1rem;
	cursor:pointer;
	border: none;
}
.btn_rockliffe {
	display: inline-block;
	border: 2px solid blue;
	padding: 6px 12px;
	font-size: 1rem;
	cursor:pointer;
	border-radius: 4px;
}

.padding_around_image {
	padding-top: .5rem;
	padding-right: .5rem;
	padding-bottom: .5rem;
	padding-left: .5rem;
}
.person_name_line_height {
	line-height: 2.5rem;
	/* [disabled]color: #777777; */
}

/*.pad_FB_logo {
    padding-right: 0;
    padding-left: 70px;
    padding-bottom: 0;
    padding-top: 0px;
}
*/
/*.css_icon {
    padding-left: 20px;
}*/
.sues_letter {
	background-color: aqua;
	width: 300px;
	border-radius: 1rem;
}
aside.sues_letter p {
	padding: 1rem;
}
.uline {
	border-bottom: 2px solid white;
	/*opacity: .5; DCH_058 */
}

	.grid_for_4_col_grid {
	display: grid;
	grid-template-columns: 1% 15% 30% 50%;
	grid-row-gap: .5rem; /* gap between rows */
	}
	

	
	.grid_for_3_col_grid {
	display: grid;
	grid-template-columns: 1% 5% 60%;
	grid-row-gap: .5rem; /* gap between rows */
	}

	.grid_archer {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-gap: 50px; /* gap between rows */
/*			grid-column-gap: 0px; /* careful! it pushes contant along */
		}
div .grid_for_streets .centered_text {
}

/* ---------------------------------------------------------- */
/* formats the Introduction page                              */
/* ---------------------------------------------------------- */
		p[title="guide"] {
			border: 10px solid rgba(0,0,255,0.15);
			margin: 0;
			text-align: center;
		}
		
		.introduction-image-and-text {
			background-color: aqua;
			border: 10px solid rgba(0,0,255,0.1);
	}
		.introduction-image-and-text p {
			padding: 0 10px 0 10px;
		}

div.flex-item-2 > p {
	margin-top: 0;
}

.extras_grid_3_cols {
	display: grid;
	justify-content: center;
	/* auto-fill: create as many columns as will fit, including empty columns! */
    /* auto-fit does not create extra columns - but neither centre it */
	grid-template-columns: repeat(1fr,3);
	grid-column-gap: 20px;
	
}
	/* The Book of CSS3 p.173 */
	.my_transition {
		border: 5px solid aqua;
		opacity: .5;
		transition-property: opacity;
		transition-duration: 2s;
		transition-timing-function: ease-in-out;
		transition-delay: 250ms;
		
		transition-property: border;
		transition-duration: 1s;
		transition-timing-function: ease-in-out;
		transition-delay: 250ms;
	}
	
.my_transition:hover {
	opacity: 1;
	border-color: blue;
	}

.same_time_place-container p {
	display: block;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
		}

	.willie-where-he-lived-list-of-dates a {
		padding-right: 1em}


		img[title="charlies-marriage-certificate"] {
				border: 2px solid aqua;
		}

img.pad_FB_logo {
	width: 1.5%;
	display: inline-block}

img.css_icon {
		padding-left: 20px;
		width: 1.5%;
		display: inline-block;
}

		
 /* DCH for Libbi Peterson's page  */
	.flex-container-for-libbi {
		display: flex;
		flex-direction: row;
		justify-content: space-around; /* format main axis */
		flex-wrap: wrap;
		/*margin: 25px;*/
}

 /* button for contact form   
.button {
	background-color:#114CCF;
	border: none;
	color: white;
	padding: 12px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	border-radius: 5px 5px 5px 5px;
	font-weight: bold;letter-spacing: 1pt;
} */

/*used on extras.html*/
.grid_for_external_sources {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.grid_for_external_sources> div {
	padding: 1em;
}
	p.col_higgs:hover{
		background-color:darkgray;
		opacity: 0.5;
	}
	
	.col_binning a:hover{
		background-color:darkgray;
		opacity: 0.5;
	}

	.col_peterson a:hover{
		background-color:darkgray;
		opacity: 0.5;
	}
	#myDIV a:hover{
		background-color:darkgray;
		opacity: 0.5;
	}
	.col_rockliffe a:hover{
		background-color:darkgray;
		opacity: 0.5;
	}
	.col_others a:hover{
		background-color:darkgray;
		opacity: 0.5;
	}

/* ---------------------------------------------------------------------------------------------------------------------- 
  italicise my text
 ------------------------------------------------------------------------------------------------------------------------ */
.myitalics {
	font-style: italic;
}
/* ---------------------------------------------------------- */
/* used in same time & place                                  */
/* ---------------------------------------------------------- */
.grid_for_same_time_place {
    display: grid;
    grid-template-columns: repeat(3, 33%);
}

.grid_for_same_time_place a {
    color: blue;
}
.grid_for_same_time_place.image_responsive_std .stap_padding_top {
    padding-top: 20px;
}

/* ---------------------------------------------------------- */
/* put kitty's pics in a grid -                               */
/* ---------------------------------------------------------- */
		.mygrid_for_kittys_photos {
			display: grid;
			align-items: center;
			grid-template-columns: 60% 40%;
			grid-row-gap: 50px;
			/* gap between rows */
			grid-column-gap: 20px;
			/* careful! it pushes contant along */
		}
.census_background {
	color: white;
	background-color: #3399FF;
}
.test {
	width: 26%;
	
}
/* ------------------------------------------------------- 
   for table of where they lived
 --------------------------------------------------------- */
#grid_for_where_they_lived_higgs_w_frederick {
	display: grid;
	grid-template-columns: 10% 95%;
	grid-row-gap: 20px;
}
.grid-container-for-charles {
	display: grid;
	grid-template-columns: 40% 20% 40%;
	grid-row-gap: 50px;
	grid-column-gap: 20px;
}
.margin-left_for_Fred_Higgs {
			margin-left: 3em;
		}

/* ------------------------------------------------------- */ 
/*  2 cols, 1 for photo and 1 for text                     */
/* ------------------------------------------------------- */
.grid-container-for-patbrock {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-row-gap: 50px;
	grid-column-gap: 20px;
	align-items: flex-start;
	}

/* ------------------------------------------------------- */ 
/*  3 cols, photo, text, photo                             */
/* ------------------------------------------------------- */
.mygrid_for_sarah_rosson {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 25px;
}

.rare_johnny {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
/*figcaption { 
	display: block;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;

}
*/.bord_2SB {
	border: 2px solid blue;	
}
.bord_2SW {
	border: 3px solid blue;	
}
/* ---------------------------------------------------------- */
/* put uncle bobs pics in a grid                              */
/* ---------------------------------------------------------- */
    .mygrid_uncle_bob {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-column-gap: .5em;
		grid-row-gap: .3em;
    }
/* ---------------------------------------------------------- */
/* put auntu pat pics in a flex                               */
/* ---------------------------------------------------------- */
.flex_for_boxes {
	display: flex;
	flex-direction: row; /*default*/
	flex-wrap: wrap; /* nowrap is default */
	justify-content: space-around;
}
.flex1 {
	width: 48%;
}
.flex2 {
	width: 48%;
}
.flex3 {
	width: 48%;
}
.flex4 {
	width: 48%;
}
.flex5 {
	width: 48%;
}
.padding_on_link_for_photos {
    padding-left: 95px;
}
.flex-container-for-footer div a {
    /* [disabled]text-decoration: underline; */
}
.my_grid_3_cols {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 50px;
	}

	.flex_for_tommyr {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

}
	.box_tommy {
		margin: 0.5rem;
		flex-grow:  1; /*defailt is 0 nogrow*/
		flex-shrink: 1; /*default is 1*/
		flex-basis: 10px; /*how much space should item take up*/
	}
		.flex_for_rosina {
		/* background: pink; /* see whole container space */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		}
		.box1_for_rosina {
			/* background: yellow; /* see item space */
			margin: 0.5rem;
			flex-grow:  1; /*defailt is 0 nogrow*/
			flex-shrink: 1; /*default is 1*/
			flex-basis: 10px; /*how much space should item take up*/
			}

		.flex_for_polly {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		}
		.box1 {
			margin: 0.5rem;
			flex-grow:  1; /*defailt is 0 nogrow*/
			flex-shrink: 1; /*default is 1*/
			flex-basis: 10px; /*how much space should item take up*/
			}

			.flex_for_dowling {
		background: pink; /* see whole container space */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;

	}
		.dowling_box1 {
			background-color:aqua ; /* see item space */
			margin: 0.5rem;
			flex-grow:  1; /*defailt is 0 nogrow*/
			flex-shrink: 1; /*default is 1*/
			flex-basis: 10px; /*how much space should item take up*/
		}
	.flex_for_linda {
		display: flex;
		justify-content:center;
		flex-direction: row;
		flex-wrap: wrap;

	}
		.chris1 {
			padding: 8px;
			margin: 0.5rem;
			flex-grow:  0; /*defailt is 0 nogrow*/
			flex-shrink: 1; /*default is 1*/
			flex-basis: 500px; /*how much space should item take up*/
			align-self: auto;
		}
		.chris2 {
			margin: 0.5rem;
			flex-grow: 0;
			flex-shrink: 1;
			align-self: auto;
		}
/* --------------------------------------- 
   used to centre img tags on two pages
   ------------------------------------- */
.image_centre {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.margin_1em {
	margin: 1em;
}

/* --------------------------------------- 
   for violet dowling
   ------------------------------------- */

		.flex_for_pics_violet {
		display: flex;
		gap: 1rem;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		}
	
		
		#b {
			/* background: pink; /* see item space */
			flex-grow:  1; /*default is 0 nogrow*/
			flex-shrink: 15; /*default is 1*/
			/*padding: 10px; /* gives a pink border to pics */
		}

	.flex_for_everyone {
		display: flex;
		justify-content:center;
		flex-direction: row;
		flex-wrap: wrap;

	}