/* ********************************************************** */
/* iphone portrait                                            */
/* ********************************************************** */
@media screen and (min-width:320px) and (orientation:portrait) {
	body {
		margin: 0 10px 0 10px;
	}
	.logo {
		color: white;
		padding: 7.5px 10px 7.5px 0;
	}
	/* DCH  set color #cc when hover over links, but not the two btns */
	/* use ::after to style the down chevrons */
	.item:not(.button) a:hover, .item a:hover::after {
		color: #ccc;
	}
	.my_toggle_space {
		padding-right: 50px;
	}
	menu li a {
		display: block; /* DCH  default is inline use block so we can add padding, margin etc */
		padding: 15px 5px;
	}
	.menu li.submenu a { /* DCH do the same for the sub-items */
		padding: 15px;
	}
	/* DCH  9.36 re-order menu items positions - use flexbox order */
	.toggle {
		font-size: 20px; /* increase size of hamburgher bars */
	}
	.item {
		width: 100%; /* now items vertical! */
		text-align: center; /* within the column */
		display: none; /* hides them all !! will use javascript to show them */
	}
	.active .item {
		display: block;
		padding: 10px; /* DCH_058 spaces out nav when on mobile */
	}
	/* seperator line 
.button.secondary {
	border-bottom: 1px #444 solid;
} */
	/* 12.23 now to style the sub-menus */
	.submenu {
		display: none; /*hide while we work*/
	}
	.submenu-active .submenu {
		display: block;
	}
	.has-submenu > a::after { /* add down chevron on items with sub-menus */
		font-family: "Font Awesome 5 Free";
		font-size: 12px;
		line-height: 16px;
		font-weight: 900;
		content: "\f078"; /* down chevron @14.50 */
		color: white;
		padding-left: 5px; /* DCH move down-chevron left a bit  */
	}
	.item_mine {
	width: 100%;
	text-align: center;
}
	.subitem a {
		padding: 10px 15px;
	}
	li.subitem {
		padding: 10px;
	} /* DCH 21 */
	/* 16.17 */
	/* applies to the sub-menu currently open */
	.submenu-active {
		background-color: #515f9c;
		border-radius: 3px;
	}
	.where_they_lived_intro {
		padding: 0 1.5rem 1.5rem;
	}
	.text_300 {
		display: inline;
		padding: 0 0 0 30px;
		font-size: 10px;
	}
	.text_480 {
		display: none
	}
	.text_768 {
		display: none
	}
	.text_992 {
		display: none
	}
	.text_1024 {
		display: none
	}
	/* Home Archive Trees etc */
	ul.menu a {
		color: #fcf;
	}
	.col_binning {
		column-width: 19em;
		line-height: 50px;
		column-rule: 1px solid;
		font-size: 22px; /* DCH_27 */
		margin-left: 2rem;
	}
	.col_higgs {
		column-width: 19em;
		/* line-height: 50px; 	line-height: 50px; too big for phone vertical now 24px inherited from body DCH_052 */

		column-rule: 1px solid;
		font-size: 22px; /* DCH_27 */
		margin-left: 2rem;
	}
	.col_peterson {
		font-size: 22px;
		line-height: 50px;
		column-width: 19em;
		margin-left: 2rem;
		column-rule: 1px solid;
	}
	.col_rockliffe {
		font-size: 22px;
		line-height: 50px;
		column-width: 19em;
		margin-left: 2rem;
		column-rule: 1px solid;
	}
	.rockliffe_comment {
		padding-left: 0.7rem; /* ...note spelling different... */
		text-align: center;
	}
	.col_others {
		font-size: 22px;
		line-height: 50px;
		column-width: 19em;
		margin-left: 2rem;
		column-rule: 1px solid;
		margin-bottom: 50px;
	}
	.centered_text_person_heading {
		text-align: center;
		line-height: 3rem;
	}
	.main_content_alice {
		padding: 1.5rem;
	}
	.four_families_title {
		line-height: 3rem;
	}
	.community_content {
		padding: 1em;
	}
	/* iphone portrait */
	#formWrap {
    width: 20.2rem;
    margin-left: 5px; /* DCH from 35 to 5 23/10/22 */
	margin-top: 2rem;
	}
	.detail {
		width: 260px;
		padding: 7px 8px;
		margin: 0;
		display: block;
		border-radius: 5px 5px 5px 5px;
		background: #e9e9e9;
		border: 1px solid #ccc;
	}
	#form .row .label {
		font-weight: bold;
		text-align: right;
		float: left;
		padding-right: 10px;
		margin-right: 10px;
	}
	.mess {
		width: 296px;
		max-width: 450px;
		height: 140px;
		overflow: auto;
		padding: 7px 8px;
		line-height: 1em;
		margin: 0;
		display: block;
		border-radius: 5px 5px 5px 5px;
		background: #e9e9e9;
		border: 1px solid #ccc;
	}

	.my_strong {
		font-weight: bold;
	}
	.pad_btm_notes {
		padding-bottom: 2rem;
	}
	/* hover over harry */
	img:hover [src*="400_young"] {
		border: 12px solid blue;
	}
	.harry_element {
		opacity: 1;
		transition-property: opacity;
	}
	.harry_element:hover {
		opacity: 0.5;
	}
	/* content_rockliffes */
	#myDIV {
		display: none;
	}
	/* content_rockliffe */
	.btn_rockliffe {
		margin-left: 7rem;
	}
	.memories {
		padding: 1rem;
	}
	.ui-tabs .ui-tabs-panel {
		padding: 1em 0; /*DCH_050 remove left & right padding */
	}
	/*this is the thin border around the tabs container*/
	.ui-widget-header {
		border: 1px solid blue;
		background: #e9e9e9;
		color: #333333;
		font-weight: bold;
	}
	.ui-tabs .ui-tabs-nav li {
		list-style: none;
		float: left;
		position: relative;
		top: 0;
		margin: 1px .8em 0 0; /* tab width, was .2em */
		border-bottom-width: 0;
		padding: 0;
		white-space: nowrap;
	}
	.ui-tabs .ui-tabs-nav {
		margin: 0;
		padding: .2em 4.0em 0;
	}
	.format_hotel_text_panel {
		padding: 10px;
		margin: 10px;
		border: thin;
		background-color: #f0f8ff;
	}
	.aside_harry_panel {
		padding: 10px;
		border: thin double;
		margin-right: 25px;
	}
	.panel_for_harrys_dates {
		list-style: none;
		margin-left: 40px;
	}
	.grid_for_4_col_anc_grid {
	display: grid;
	grid-template-columns: 3% 30% 30% 40%;
	grid-row-gap: .5rem; /* gap between rows */
	}
	.grid_for_3_col_grid {
	display: grid;
	grid-template-columns: 1% 15% 80%;
	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 */
		}
	
 /* DCH next few for Where they Lived  */
	.grid_for_streets {
	display: grid;
	grid-template-columns: 100%;
	grid-row-gap: 1rem;
	}

	.remove_bullets {
	list-style: none;
	}
	.street_inner {
	border: 1px solid;
	border-radius: 15px;
	background-color: #6ff;
	padding: 10px;
	}
	.underline {
	border-bottom: 1px solid blue;
	}

	.margin_gap {
	margin-bottom: 10px;
	}
 /* end of where they lived rules   */
	
 /* DCH next few for Introduction page  */
	.introduction-mygrid {
		display: grid;
		grid-template-columns: 1fr;
	}
	.introduction-mygrid> div {
		padding: 1em;
	}
	ul.ul_content li {
		padding: 10px;
		}
	
 /* DCH for Uncle Daves page    */
		.flex-container-for-uncle-dave {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25px;
}
			.dave-as-a-boy {
/*				width: 30%;*/
			}
			
/*			.daves-text {
				width: 40%;
				padding-left: 20px;
				padding-right: 20px;

			}
*/			
/*			.dave-and-mary-pat {
				width: 30%;
			}
*/

 /* DCH for Kitty's page  */
	.flex-container-for-kitty {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25px;
}

/* DCH for Iris Peterson's page  */
		.flex-container-for-iris-peterson {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
}
		.iris-peterson-flex-item-1 {
		}
		.iris-peterson-flex-item-2 {
		}
		.iris-peterson-flex-item-3 {
		}
		div.iris-peterson-flex-item-2 > p {
			margin-top: 0;
		}

 /* DCH  for Richard Edward Higgs's photos */
		.flex-container-for-Richard-Higgs-photos {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25px;
}

 /* DCH for Charles Edward Higgs page   */
		.flex-container-for-charles-edward-higgs {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25px;
}
	
	img.pad_FB_logo {
	width: 1.5%;
	display: inline-block}

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

/*used on extras.html, no grid columns for iphone portrait*/
.grid_for_external_sources {
	display: grid;
	 grid-template-columns: 1fr; 
}
	.grid_archer {
			display: grid;
			grid-template-columns: 1fr;
			grid-row-gap: 40px; /* gap between rows */
/*			grid-column-gap: 0px; /* careful! it pushes contant along */
		}
	.flex-container-for-footer {
		font-size: 15px; /* reduce the text items in the footer to better fit, from 20px */
	}
	
/* ---------------------------------------------------------- */
/* put kitty's pics in a grid -                               */
/* set one column on;ly for phone portrait                    */
/* ---------------------------------------------------------- */
		.mygrid_for_kittys_photos {
			display: grid;
/*			align-items: center;*/
			grid-template-columns: 1fr;
/*			grid-row-gap: 50px;
*/			/* gap between rows */
/*			grid-column-gap: 20px;
*/			/* careful! it pushes contant along */
		}
	
/* ------------------------------------------------------- 
   for table of where they lived
 --------------------------------------------------------- */
#grid_for_where_they_lived_higgs_w_frederick {
	display: grid;
	grid-template-columns: 20% 80%;
	grid-row-gap: 20px;
}
	
.margin-left_for_Fred_Higgs {
			margin-left: 1em;
		}
/* ------------------------------------ 
   use 100% to go from 2col to one col
 -------------------------------------*/
.grid-container-for-charles {
	display: grid;
	grid-template-columns: 100%;
	grid-row-gap: 50px;
	grid-column-gap: 20px;
	align-items: flex-start;
}
.grid-container-for-patbrock {
		display: grid;
		grid-template-columns: 100%;
		grid-row-gap: 50px;
		grid-column-gap: 20px;
		align-items: flex-start;
}
/* ------------------------------------------------------- */ 
/*  3 cols, photo, text, photo                             */
/* ------------------------------------------------------- */
.mygrid_for_sarah_rosson {
	grid-template-columns: 1fr;
	grid-column-gap: 25px;
}
	
.color_blue_border {
  border: 4px solid blue;
}
.steady_image {
	position: fixed;
	top: 550px;
	left: 1px; /* iPhone portrait */
}
/* ---------------------------------------------------------- */
/* put lilians pics in a grid - curtis_lilian_maud            */
/* ---------------------------------------------------------- */
    .mygrid_uncle_bob {
        display: grid;
		flex-direction: row; /* default, items go in a row */
        grid-template-columns: 1fr;
    }
.space_out {
    padding-left: 5px;
    padding-right: 5px;
}
.my_grid_3_cols {
	display: grid;
	grid-template-columns: 1fr;
	margin: 20px;
	}
	.flex-conald {
		flex-direction: column;
	}
		.flex_for_tommyr {
		flex-direction: column;
	}
		.flex_for_rosina {
		display: flex;
		flex-direction: column;
		}
		.flex_for_polly {
		flex-direction: column;
		}
		.flex_for_bill {
		flex-direction: column;
	}
	.menu {
		padding: 10px 10px; /* DCH_059 widen mobile hamburgher */
	}
			.flex_for_dowling {
		flex-direction: column;
	}
		.flex_for_theo {
		flex-direction: column;
	}
	
		.flex_for_pics_violet {
		display: flex;
		gap: 1rem;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		}
	
		#a {
			/* background: pink; /* see item space */
			flex-grow:  1; /*defailt is 0 nogrow*/
			flex-shrink: 1; /*default is 1*/
			padding: 30px; /* gives a pink border to pics */
		}
		
		#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_linda {
		display: flex;
		justify-content:center;
		flex-direction: column;
		flex-wrap: wrap;

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

	}
}
/* ********************************************************** */
/* iphone landscape - #pl                                     */
/* ********************************************************** */
@media screen and (min-width:481px) and (orientation: landscape) {
	.menu {
		display: flex; /* DCH  items now in the flex default of Row */
		flex-wrap: wrap; /* DCH items wrap to next line */
		/*DCH_057 justify-content removed */
		align-items: center;
		padding-top:10px;
		padding-bottom: 10px;
		padding-left: 20px;
	}
	.my_toggle_space {
		padding-right: 350px;
	}
	.text_300 {
		display: none
	}
	.text_480 {
		display: inline;
		padding: 0 0 0 60px;
		font-size: 10px;
	}
	.text_768 {
		display: none
	}
	.text_992 {
		display: none
	}
	.text_1024 {
		display: none
	}
	/*	img.four_families_mobile {
		src: url("../archive/four_families_landscape_2.png")
	}
*/ .menu, .submenu {
		list-style-type: none;
	}
	.logo {
		color: white;
		padding: 7.5px 10px 7.5px 0;
	}
	.item {
		padding: 10px;
	}
	/* DCH  set color #cc when hover over links, but not the two btns */
	/* use ::after to style the down chevrons */
	.item:not(.button) a:hover, .item a:hover::after {
		color: #ccc;
	}
	/* @7.26 lets create the mobile navigation  Mobile menu*/
	menu li a {
		display: block; /* DCH  default is inline use block so we can add padding, margin etc */
		padding: 15px 5px;
	}
	.menu li.submenu a { /* DCH do the same for the sub-items */
		padding: 15px;
	}
	/* DCH  9.36 re-order menu items positions - use flexbox order */
	.toggle {
	font-size: 20px; /* increase size of hamburgher bars */
	color: #0000FF;
	}
	.item {
		width: 100%; /* now items vertical! */
		text-align: center; /* within the column */
		display: none; /* hides them all !! will use javascript to show them */
	}
	.active .item {
		display: block;
	}
	/* seperator line 
.button.secondary {
	border-bottom: 1px #444 solid;
} */
	/* 12.23 now to style the sub-menus */
	.submenu {
		display: none; /*hide while we work*/
	}
	.submenu-active .submenu {
		display: block;
	}
	.has-submenu > a::after { /* add down chevron on items with sub-menus */
		font-family: "Font Awesome 5 Free";
		font-size: 12px;
		line-height: 16px;
		font-weight: 900;
		content: "\f078"; /* down chevron @14.50 */
		color: white;
		padding-left: 5px; /* DCH move down-chevron left a bit  */
	}
	.subitem a {
		padding: 10px 15px;
	}
	li.subitem {
		padding: 10px;
	}
	/* 16.17 */
	/* applies to the sub-menu currently open */
	.submenu-active {
		background-color: #515f9c;
		border-radius: 3px;
	}
	.col_higgs {
		font-size: 22px;
		column-width: 20rem;
		padding-left: 9rem;
	}
	.col_peterson {
		font-size: 22px;
		column-width: 21rem;
		padding-left: 9rem;
		line-height: 3rem;
	}
	.col_binning {
		column-width: 19em;
		line-height: 50px;
		column-rule: 1px solid;
		font-size: 22px;
		margin-left: 12rem; /* DCH_047 */
	}
	.col_rockliffe {
		font-size: 22px;
		line-height: 50px;
		column-width: 19rem;
		margin-left: 9rem;
		column-rule: 1px solid;
	}
	.rockliffe_comment {
		padding: 0.5rem;
	}
	.col_others {
		column-width: 10em; /* DCH_28 */
		line-height: 2rem;
		column-rule: 1px solid;
		padding-left: 3rem;
		font-size: 22px;
		margin-left: 2rem;
		margin-bottom: 50px;		
	}
	.htc_border_for {
		border: 2px solid blue;
	}
	/* 16.33 add toggle functionality Javascript */
	/* DCH_034 iphone landscape */
	#formWrap {
		width: 39rem; /* DCH_035 */
		/* margin-top: 30px; DCH_036 */
		margin-left: 100px;
		/* background: #6ff; DCH_037 */
		/* border: 1px solid #f1f1f1; DCH_038 */
		/* next three not needed DCH_039 
	border-radius: 20px;
	box-shadow: 2px 2px 50px #999;
	padding: 16px 10px 40px; */
	}
	/* Home Archive Trees etc DCH_047 */
	ul.menu a {
		color: white;
	}
	.pad_btm_notes {
		padding-bottom: 2rem;
	}
	/* content_rockliffes */
	#myDIV {
		display: none;
	}
	.rockliffe_list {
		margin-left: 5rem;
	}
	/* content_rockliffe */
	.btn_rockliffe {
		margin-left: 16rem;
	}
	.doughty_mews_left_padding {
		padding-left: 7rem;
	}
	div#panel1 p img {
		max-width: 100%; /*use full width of the tab area*/
	}
	div#panel2 p img {
		max-width: 100%; /*use full width of the tab area*/
	}
	div#panel3 p img {
		max-width: 100%; /*use full width of the tab area*/
	}
	div#panel4 p img {
		max-width: 100%; /*use full width of the tab area*/
	}
	div#panel5 p img {
		max-width: 100%; /*use full width of the tab area*/
	}
	div#panel6 p img {
		max-width: 100%; /*use full width of the tab area*/
	}
	.ui-tabs .ui-tabs-nav {
		margin: 0;
		/* padding: .2em .2em 0; */
	}
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		float: left;
		padding: .5em 1em;
		text-decoration: none;
	}
	 /* DCH_053   */
	div.aside_harry_panel aside {
		padding: 1rem;
		background-color: var(--asides);
		border-radius: 1rem;
	}
	.panel_for_harrys_dates {
		list-style: none;
		margin-left: 40px;
	}
	.padding_top_kirk_street {
		padding-top: 3rem;
	}
	.grid_for_4_col_anc_grid {
	display: grid;
	grid-template-columns: 3% 15% 30% 54%;
	grid-row-gap: .5rem; /* gap between rows */
	}
	.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: 10% 15% 80%;
	grid-row-gap: .5rem; /* gap between rows */
	}
	
			.flex-container-for-iris-peterson {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
}
		.iris-peterson-flex-item-1 {
		}
		.iris-peterson-flex-item-2 {
		}
		.iris-peterson-flex-item-3 {
		}
		div.iris-peterson-flex-item-2 > p {
			margin-top: 0;
		}


/* ---------------------------------------------------------- */
/* for Uncle Daves page                                       */
/* ---------------------------------------------------------- */
	.flex-container-for-uncle-dave {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 25px;
}
			
/*	.dave-and-mary-pat {
		width: 30%;
	}
*/
	.grid_archer {
			display: grid;
			grid-template-columns: 1fr;
			grid-column-gap: 50px; /* gap between rows */
/*			grid-column-gap: 0px; /* careful! it pushes contant along */
		}
div .grid_for_streets .centered_text {
}
/* ------------------------------------------------------- 
   for table of where they lived
 --------------------------------------------------------- */
#grid_for_where_they_lived_higgs_w_frederick {
	display: grid;
	grid-template-columns: 10% 85%;
	grid-row-gap: 20px;
}
	
.color_blue_border {
  border: 4px solid red;
}
.steady_image {
	position: fixed;
	top: 200px;
	left: 65px;
}
.padding_on_link_for_photos {
    padding-left: 28px;
}
	.flex-conald {
		flex-direction: column;
	}
		.flex_for_polly {
		flex-direction: column;
		}
		.flex_for_theo {
		flex-direction: column;
}


} /* DCH_040 */
/* DCH_030 */
/* ********************************************************** */
/* iPad portrait - #iv                                        */
/* ********************************************************** */
@media all and (min-width: 769px) and (orientation:portrait) {
	/*	.menu {
		justify-content: center; /* DCH centres Four Families text and the hamburgher  
	}
*/
	.logo {
		flex: 1; /* flex default is grow */
	}
	/* DCH hamburgher  */
	.toggle {
		flex: 1;
	}
	/* DCH here he styles the two buttons @25.40  */
	li.subitem {
		padding: 10px;
	} /* DCH 24 */
	.col_peterson {
		column-width: 15em;
	}
	.col_higgs {
		column-width: 14rem;
		line-height: 1.5rem;
		column-rule: 1px solid;
		font-size: 22px; /* DCH_27 */
	}
	.col_binning {
		column-width: 12em; /* DCH_28 */
	}
	.col_rockliffe {
		column-width: 12em; /* DCH_28 */
	}
	.col_others {
		column-width: 14rem;
		line-height: 2rem;
		column-rule: 1px solid;
		padding-left: 3rem;
	}
	/* DCH_043 */
	#formWrap {
		width: 43.5rem;
		margin-left: 10rem;
	}
	#comments_form {
		margin-left: 3rem; /* DCH_044 */
	}
	/* content_rockliffes */
	#myDIV {
		display: none;
	}
	.rockliffe_list {
		margin-left: 2.5rem;
	}
	.btn_rockliffe {
		margin-left: 21rem;
	}
	.doughty_mews_left_padding {
		padding-left: 11rem;
	}
	.ui-tabs .ui-tabs-nav {
		padding: .5em 7em 0;
	}
	.grid_for_4_col_anc_grid {
	display: grid;
	grid-template-columns: 3% 15% 30% 54%;
	grid-row-gap: .5rem; /* gap between rows */
	}
.color_blue_border {
  border: 4px solid yellow;
}


}
/* ********************************************************** */
/* tablet iPad landscape #il  1024?                           */
/* ********************************************************** */
@media screen and (min-width:1025px) and (orientation: landscape) {
	.col_higgs {
		column-width: 20rem;
		line-height: 1.5rem;
		column-rule: 1px solid;
	}
	.col_binning {
		column-width: 16em; /* DCH_28 */
		margin-left: 8rem; /* DCH_048 */
	}
	.col_peterson {
		column-rule: 1px solid;
	}
	.col_rockliffe {
		column-width: 16em; /* */
		font-size: 20px;
	}
	.col_others {
		column-width: 20rem;
		padding-left: 4rem;
	}
	/* DCH_045 */
	#formWrap {
		margin-left: 40rem;
		margin-top: 10rem;
	}
	/* DCH_045 */
	#comments_form {
		margin-left: 4.5rem;
	}
	/* Home Archive Trees etc */
	ul.menu a {
		color: white;
	}
	/* content_rockliffe */
	.btn_rockliffe {
		margin-left: 30rem;
	}
	.doughty_mews_left_padding {
		padding-left: 18rem;
	}
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		float: left;
		padding: .5em 0.2em;
		text-decoration: none;
	}
	/* mums memories: increase space around the tabs */
	.ui-tabs .ui-tabs-nav {
		margin: 0;
		padding: .2em 4.6em 0;
	}
	
	.my_toggle_space {
		padding-right: 700px;
	}
	.index_pic2 {
		width: 100%;
	}
	.grid_for_3_col_grid {
	display: grid;
	grid-template-columns: 1% 7% 90%;
	grid-row-gap: .5rem; /* gap between rows */
	}
	
	
/* ---------------------------------------------------------- */
/* 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 */
		}
	
}

/* ********************************************************** */
/* Desktop                                                    */
/* ********************************************************** */
/* DCH  @26.30 Desktop menu */

@media all and (min-width: 1200px) {
	
	/* make all desktop views 1200px wide for readability */
.width_1200_centered {
	width: 1200px;
	margin: 20px auto 0 auto; /* p.177 css */
}

	.item {
		position: relative;
		display: block;
		width: auto; /* previously was 100% */
	}
	.submenu-active .submenu {
		display: block;
		position: absolute;
		left: 0;
		top: 49px; /* DCH 23 so sit just below parent element */
		background: #515f9c;
		/*		line-height: 120px; DCH 22*/
	}
	.toggle {
		display: none;
	}
	.submenu-active {
		border-radius: 0;
	}
	/* Home Archive Trees etc DCH047 */
	ul.menu a {
		color: white;
	}
	.text_300 {
		display: none
	}
	.text_480 {
		display: none
	}
	.text_768 {
		display: none
	}
	.text_992 {
		display: none
	}
	.text_1024 {
		display: inline;
		padding: 0 0 0 2rem;
		font-size: 0.7rem;
	}
	.col_peterson {
		line-height: 2.3em;
		column-width: 25rem;
	}
	/* DCH_29 */
	.col_binning {
		line-height: 2.3em;
		font-size: 1.5em;
		/*		column-width: 25rem;  DCH_049 */
	}
/*	.col_rockliffe {
		column-width: 14em; 
		font-size: 20px;
	}
*/	.rockliffe_comment {
		text-align: center;
	}
	.col_others {
		column-width: 16rem;
	}
	.htc_border_for {
		border: 2px solid blue;
	}
/*	#formWrap {
		margin-left: 36rem;
	}
*/	/* DCH_045 */
	#comments_form {
		margin-left: 4.5rem;
	}
	.centre_harrys_war_record {
		margin-left: 10rem;
		margin-right: 10rem;
	}
	.same_time_or_place_image1 {
		padding-left: 30rem;
	}
	/* content_rockliffes */
	#myDIV {
		display: none;
	}
	.rockliffe_list {
		margin-left: 5rem;
	}
	.btn_rockliffe {
		margin-left: 50rem;
	}
	.doughty_mews_left_padding {
		padding-left: 28rem;
	}
	table.archive_table {
		padding-left: 50px;
		padding: 50px;
		line-height: 20px;
	}

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

/* ---------------------------------------------------------- */
/* next few for Introduction page                             */
/* ---------------------------------------------------------- */	
	.introduction-mygrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.introduction-mygrid> div {
		padding: 1em;
	}
	ul.ul_content li {
		padding: 10px;
		}
	
/* ---------------------------------------------------------- */
/* for Uncle Daves page                                       */
/* ---------------------------------------------------------- */
		.flex-container-for-uncle-dave {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 25px 
}
			.dave-as-a-boy {
			width: 30%;
			}
			
			.daves-text {
				width: 40%;
				padding-left: 20px;
				padding-right: 20px;

			}
			
			.dave-and-mary-pat {
				width: 30%;
			}

/* ---------------------------------------------------------- */
/* for Kitty's page                                           */
/* ---------------------------------------------------------- */
		.flex-container-for-kitty {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 25px 
}
			.flex-item-1 {
			width: 35%;
			}
			
			.flex-item-2 {
				width: 64%;
			}
/* ---------------------------------------------------------- */
/* for Iris Peterson's page                                   */
/* ---------------------------------------------------------- */
		.flex-container-for-iris-peterson {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
}
		.iris-peterson-flex-item-1 {
			width: 30%;
		}
		.iris-peterson-flex-item-2 {
			width:35%;
		}
		.iris-peterson-flex-item-3 {
			width: 30%;
		}
		div.iris-peterson-flex-item-2 > p {
			margin-top: 0;
		}

/* ---------------------------------- */
/* for Richard Edward Higgs's photos  */
/* ---------------------------------- */
		.flex-container-for-Richard-Higgs-photos {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 25px;
}
	.richard-higgs-item-1 {
		width: 40%;
	}
/* ---------------------------------------------------------- */
/* for Charles Edward Higgs page                              */
/* ---------------------------------------------------------- */
		.space_around {
			margin: 25px;
}

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

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

/* DCH  to centre the navigation */
.menu {
	justify-content: center;
}
	
/*	img {
	display: block;
    max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	}
*/
/* ---------------------------------------------------------- */
/* put lilians pics in a grid - curtis_lilian_maud            */
/* ---------------------------------------------------------- */
    .mygrid_lilian_curtis_photos {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 2em;
		
    }
		div.col_higgs p:hover{
		background-color:darkgray;
		opacity: 0.5;
	}
/* ---------------------------------------------------------- */
/* 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 */
		}
	
.anc020 {
padding-left: 2em;
}
.renees_photos_left_padding {
	padding-left: 10em;
}
.grid_for_ejp {
display: grid;
grid-template-columns: 40% 50%;
grid-row-gap: 50px; /* gap between rows */
grid-column-gap: 50px; /* careful! it pushes contant along */


} 
	.mygrid_for_young_david_photos {
  display: grid;
  align-items: center;
  grid-template-columns: 35% 30% 35%;
  grid-row-gap: 50px;
  grid-column-gap: 20px;
}
		.align-start{
			align-self: flex-start;
		}
	
.steady_image {
	position: fixed;
	top: 480px;
	left: 180px; 
}
.not_much_text {
    margin-left: 100px;
}
		.flex_for_polly {
		flex-direction: row;
		}


} /* end Desktop query*/