/* -- include padding and border in element's total width and height -- */
/* -------------------- I can't see any difference -------------------- */ 
* {
/*  box-sizing: border-box;*/
}
/* ----------- grid of two columns : content and navigation ----------- */
#container {
	align-items: flex-start;
	display: grid;
	grid-template-columns: auto 325px;
	column-gap: 1.5em;
}
/* ------ extra styling for gotop class (declared in places.css) ------ */
/* ------------- (to make sure it is offset from content) ------------- */

div.content {
	margin-top: -0.375em;
	position: relative;
}
/* - default is that elements are positioned static to the 'document' - */
/* ---- with position relative, one can use top/bottom, left/right ---- */
div.navigation {
	position: relative;
}
/* ----------------- and extra margin for link to Top ----------------- */
/* ----- AIH it's is only needed if the top of the page is hidden ----- */
/* ----------- but I can't work out a @media query for that ----------- */
/* --------------- possibly an exercise for Javascript? --------------- */
/* -- aiming for classList.toggle of display: none to display: block -- */
/* ------ (this would be the default, inherited from places.css) ------ */
div.gotop {
	display: none;
	margin-top: 1.15em;
	visibility: hidden;
}
.counties {
	align-items: flex-start;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	grid-auto-flow: row;
	grid-row-gap: .25em;
	width: 100%;
}
.counties ul {
	margin: 0;
}
/* ----- NB using list-style-position: inside; does not look good ----- */
.counties > div.double {
	display: flex;
	justify-self: left;
}
.counties > div.single {
	grid-column: auto / span 2;
	justify-self: center;
}

/* ---------------- styling for "pin" about Sheffield ----------------- */
/* ------------------ thx to CodePen "Pins on Image" ------------------ */
/* -------------- https://codepen.io/Paulie-D/pen/zYELEo -------------- */
/* ----- id="BRI-map" is necessary to position the pin accurately ----- */
#BRI-map {
	border: dashed silver 2px;
	border-radius: 10px;
	display: inline-block;
	margin: 10px 0px;
	padding: .5em;
	position: relative;
}
#BRI-map img {
	max-width: 100%;
	display: block;
}

/* ---------- see ./PinmyMap.html for the basis of this .css ---------- */
.box {
	background: radial-gradient(circle, darkred, red, orange, transparent);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 4%;
	position: absolute;
	width: 4%;
}
/* ---------- size of img is 320 x 400 - aiming for 195, 163 ---------- */
/* ----- but both 195/320 (~=60) and 163/400 (~=40) are imprecise ----- */
/* ------- so what calculation would work to give the % below ? ------- */
/* -- (by trial and error: 195/350 and 163/430 - adding 30 to w x h) -- */
#pin-me {
	top: 38%;
	left: 56%;
}
/* -------------------------------------------------------------------- */