.green-box p {
	margin: 20px;
	line-height: 1.25em;
	text-align: left;
	clear: both;
}

#page-1 .green-box {
	left: 8.9%;
	top: 2.3%;
	width: 82.3%;
}

#page-1 img {
	width: 250px;
	height: 185px;
	float: left;
	margin-right: 20px;
	margin-top: 7px;
	margin-bottom: 20px;
}

#page-2 .green-box {
	top: 50.3%;
	left: 5.6%;
	width: 88.7%;
	height: 45.6%;
}

#page-1 img{
	height: auto;
}

#page-2 p { width: 470px; }

#xr-2 .solid-light-purple-box { top: 20%; }

#preview {
	position: absolute;
	height: 438px;
	right: 0%;
	margin: 20px;
}

#preview, .preview-image {
	width: 585px;
	height: 420px; /* for placeholder */
}

.preview-image {
	float: right;
	margin-left: 20px;
}

#preview .click, #preview .hover {
	position: absolute;
	top: 150px;
	width: 160px;
	display: inline-block;
	left: 230px;
	pointer-events: none;
}

#preview:hover .click { display: none; }
#preview:not(:hover) .hover { display: none; }

.solid-light-purple-box {
	top: 11%;
	left: 11%;
	position: fixed;
	width: 76%;
}

.solid-light-purple-box.sect2{ top: 40%; }

textarea {
	line-height: 1.1em;
	height: 3.7em;
}

/* ---- XR PLACEHOLDER ---- */

#page-xr {
	font-size: 0.9em;
}

.site-image {
	width: 555px;
	margin-block: 0.5em;
}

#wavy-bay-label { float: left; }

.site-label {
	font-weight: 600;
	margin-left: 0.5em;
	margin-top: 0.5em;
}

#page-xr-1 {
	top: 14%;
}

#page-xr-3 {
	top: 0.5%;
}

#page-xr-2 {
	top: 52%;
	width: 89%;
	left: 5.3%;
}

.answer-marker {
	height: 45px;
	margin: 0px 20px;
	border-radius: 50%;
	position: absolute;
}

.click-button { width: 400px; }

/* ---- XR PLACEHOLDER ---- */
/* ---- Overrides ---- */
#preview {
	transform: scale(0.96);
	top: -10px;
	right: -12px;
}