div.contentframe {
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 120px);	/* view height minus footer */
}
#content {
	width: 100%;
	max-width: 1080px;
	padding-top: 80px;					/* default, override for subnav */
	margin: 0 20px 15px 20px;			/* see @media override */
}

/* Modal window */
.modal-bg {
	display: none;
	position: fixed;
	z-index: 1024;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(110, 110, 110, 0.6);
	justify-content: center;
}
.modal-frame {
	position: relative;
	width: 100%;
	max-width: 1080px;
	display: flex;
	justify-content: center;
}
.modal-box {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	background-color: var(--header-bg);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow-y: auto;
}
.modal-box.screen-centered {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.modal-box.upper-right {
	top: 20px;
	right: 0;
	transform: none;
}
.modal-close {
	position: absolute;
	top: 0;
	right: 8px;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.modal-prev,
.modal-next {
	position: absolute;
	top: 50%;
	left: 16px;
	margin-top: -50px;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.modal-next {
	left: inherit;
	right: 16px;
}

/* Modal slideshow */
.modal-box.screenshot {
	top: 20px;
	padding: 0;
	margin: auto;
	width: 100%;
	max-width: 1028px;
	min-width: 600px;
	background-color: var(--header-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}
.modal-box.screenshot p {
	margin: 20px 0 0 0;
	min-height: 54px;	/* consistent room for 2 lines of text */
}
.slides {
	display: none;
	max-width: 920px;
	margin: 12px auto;
}
#theslide {
	width: 100%;
}
.numbertext {
	position: fixed;
	top: 10px;
	left: 18px;
	color: rgb(200, 200, 200);
	font-size: 1.5em;
}

/* Thumbnail images */
.thumb-container {
	display: flex;
	flex-wrap: wrap;
}
.thumbnail {
	width: 250px;
	margin: 8px 16px 16px 0;
	padding: 0;
	font-size: 0.9em;
}
.thumbnail-img {
	width: 100%;
	transition: 0.3s;
	cursor: pointer;
	border:1px solid var(--border-color);
}
.thumbnail-img:hover {
	border:1px solid var(--link-color);/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}