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

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

.light-green-box {
	left: 8.9%;
	top: 20%;
	width: 82.3%;
	height: 75%;
}

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

#page-2 .solid-light-purple-box {
	font-size: 2.1em;
}

.welcome-to {
	font-weight: bold;
	position: absolute;
	left: 5%;
	top: 1%;
}

.wavy-bay-maps,
.seal-beach-maps {
	position: absolute;
	top: 7%;
	height: 90.5%;
}

#differenceQuestion-2 {
	background-position-y: 5px;
}

.wavy-bay-title,
.seal-beach-title {
	position: absolute;
	font-weight: bold;
	margin: 0 !important;
	top: 2%;
}

.wavy-bay-title,
.wavy-bay-maps { right: 3.2%; }

.seal-beach-title,
.seal-beach-maps { left: 3.2%; }

.flood-map, .less-flood-map, .shore-map, .more-shore-map { display: none; }

#map-key {
	background-color: #ffffff;
	border-radius: 0.25em;
	position: absolute;
	top: 1%;
	width: 31%;
	padding-bottom: 5px;
	left: 34.5%;
	color: var(--violet-color);
	border: 5px solid white;
}

#map-key .title {
	position: relative;
	width: 100%;
	margin: auto;
	font-size: 0.7em;
}

.key {
	width: 48%;
	height: 40px;
	font-size: 0.55em;
	text-align: left;
	margin: 0;
	display: inline-block;
}

#building-key { margin-top: 9px; }
#building-key p { line-height: 1.15em; }

.key img {
	width: 35px;
	height: 35px;
	margin: 7px 0 0 6px;
	padding: 0;
}

.key p {
	font-size: 0.9em;
	width: 110px;
	line-height: 1.1em;
	float: right;
	margin: 0.4em 0 0 0;
	line-height: 2.5em;
}

#seal-key, #shore-key, #oyster-key, #outfall-key, #flood-key {
	opacity: 0;
	transition: 0.8s linear;
}

#results {
	position: absolute;
	left: 47%;
	top: 10%;
	line-height: 1.25em;
}

#results p { margin-bottom: 1em; }

.text-star { height: 40px; }

.star, .marker {
	height: 40px;
	position: absolute;
}

.seal-marker, .oyster-marker { height: 25px; }

.marker, .result-text, #final, .seal-marker, .oyster-marker, .outfall-marker { display: none; }

#seal-01 { left: 118px; top: 125px; }
#seal-02 { left: 100px; top: 150px; }
#seal-03 { left: 110px; top: 176px; }
#seal-04 { left:  80px; top: 263px; }
#seal-05 { left:  63px; top: 290px; }
#seal-06 { left:  41px; top: 317px; }
#seal-07 { left: 157px; top: 294px; }
#seal-08 { left: 170px; top: 310px; }
#seal-09 { left: 158px; top: 334px; }
#seal-10 { left: 134px; top: 318px; }
#seal-11 { left: 236px; top: 263px; }
#seal-12 { left: 260px; top: 282px; }
#seal-13 { left: 263px; top: 310px; }
#seal-14 { left: 277px; top: 353px; }
#seal-15 { left: 298px; top: 370px; }
#seal-16 { left: 283px; top: 408px; }
#seal-17 { left: 247px; top: 457px; }
#seal-18 { left: 390px; top: 483px; }
#seal-19 { left: 384px; top: 552px; }
#seal-20 { left: 411px; top: 534px; }
#seal-21 { left: 664px; top: 364px; }
#seal-22 { left: 900px; top: 367px; }

#oyster-01 { left: 231px; top: 68px; }
#oyster-02 { left: 190px; top: 88px; }
#oyster-03 { left: 213px; top: 130px; }
#oyster-04 { left: 180px; top: 143px; }
#oyster-05 { left: 154px; top: 190px; }
#oyster-06 { left: 194px; top: 202px; }
#oyster-07 { left: 166px; top: 227px; }
#oyster-08 { left: 130px; top: 273px; }
#oyster-09 { left: 184px; top: 270px; }
#oyster-10 { left: 100px; top: 306px; }
#oyster-11 { left: 108px; top: 343px; }
#oyster-12 { left: 85px;  top: 374px; }
#oyster-13 { left: 100px; top: 405px; }
#oyster-14 { left: 59px;  top: 411px; }
#oyster-15 { left: 79px;  top: 444px; }
#oyster-16 { left: 47px;  top: 458px; }
#oyster-17 { left: 210px; top: 292px; }
#oyster-18 { left: 214px; top: 331px; }
#oyster-19 { left: 243px; top: 351px; }
#oyster-20 { left: 224px; top: 393px; }
#oyster-21 { left: 241px; top: 422px; }
#oyster-22 { left: 216px; top: 448px; }
#oyster-23 { left: 280px; top: 452px; }
#oyster-24 { left: 296px; top: 483px; }
#oyster-25 { left: 331px; top: 507px; }
#oyster-26 { left: 360px; top: 524px; }
#oyster-27 { left: 334px; top: 540px; }
#oyster-28 { left: 323px; top: 600px; }
#oyster-29 { left: 443px; top: 559px; }
#oyster-30 { left: 468px; top: 580px; }
#oyster-31 { left: 432px; top: 589px; }
#oyster-32 { left: 568px; top: 375px; }
#oyster-33 { left: 724px; top: 309px; }
#oyster-34 { left: 777px; top: 292px; }
#oyster-35 { left: 810px; top: 401px; }

#outfall   { left: 563px; top: 287px; }

.marker-1 { left: 12%;   top: 42%; }
.marker-2 { left: 21.5%; top: 23%; }
.marker-3 { left: 69%;   top: 40%; }
.marker-4 { left: 53%;   top: 39%; }
.marker-5 { left: 87%;   top: 18.7%; }

/* ---- Overrides ---- */
.storypage { top: 4% !important; }