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

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

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

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

.graph-question.solid-light-purple-box {
	top: 44.5%;
	left: 50.7%;
	position: absolute;
	width: 39.5%;
	font-size: 1.5em;
}

.talk-button.floater { margin-top: -0.55em; }

#biodiversity-question,
#floods-question { top: 55.7%; }

#turbidity-question { top: 48.6%; }
#seals-question { top: 46.3%; }


#which-solutions-question.solid-light-purple-box  {
	top: 21.6%;
	left: 51%;
	width: 38%;
	font-size: 1.75em;
}

#which-solutions-question .click-button { width: 88%; }

.graph-question .click-button {
	width: 95%;
	height: 2.75em;
}

.answer-marker {
	width: 35px;
	margin: 0 10px;
}

.selector-holder > .answer-marker {
	position: absolute;
	left: 16px;
	top: 12px;
	height: 35px;
	margin: 0;
}

.wavy-bay-maps {
	position: absolute;
	top: 6.5%;
	height: 91.3%;
}

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

.wavy-bay-title,
.wavy-bay-maps { left: 1.5%; }

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

/* ---- Map Key ---- */
#map-key {
	background-color: #ffffff;
	border-radius: 0.25em;
	position: absolute;
	bottom: 5%;
	width: 28%;
	height: 21%;
	left: 3%;
	color: var(--violet-color);
	border: 5px solid white;
}

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

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

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

.key img {
	width: 32px;
	margin: 1px 0 0 6px;
	padding: 0;
}

.key p {
	font-size: 0.8em;
	width: 90px;
	line-height: 1.1em;
	float: right;
	margin: 0 0 0 0;
	margin-bottom: 0 !important;
	line-height: 2.5em;
}

/* ---- Markers ---- */
.star, .marker {
	height: 40px;
	position: absolute;
}

.seal-marker   { height: 30px; }
.oyster-marker { height: 25px; }
.fish-marker { height: 17px; }
.crab-marker { height: 25px; }

.stop-cso,
.living-shore,
.restore-reef {
	display: none;
}

.fish-01 { left: 283px; top: 294px; }
.fish-02 { left: 63px;  top: 417px; }

.fish-03 { left: 30px;  top: 372px; }

.fish-04 { left: 270px; top: 455px; }
.fish-05 { left: 309px; top: 513px; }

.crab-01 { left: 241px; top: 325px; }
.crab-02 { left: 329px; top: 440px; }

.crab-03 { left: 180px; top: 291px; }

.crab-04 { left: 442px; top: 473px; }

.crab-05 { left: 219px; top: 398px; }

.seal-01 { left: 144px; top: 306px; }
.seal-02 { left: 391px; top: 383px; }

.seal-03 { left: 134px; top: 390px; }
.seal-04 { left: 362px; top: 342px; }
.seal-05 { left: 362px; top: 490px; }
.seal-06 { left: 245px; top: 517px; }

.seal-07 { left: 174px; top: 191px; }
.seal-08 { left: 172px; top: 313px; }
.seal-09 { left: 159px; top: 340px; }
.seal-10 { left: 160px; top: 369px; }
.seal-11 { left: 78px;  top: 383px; }
.seal-12 { left: 347px; top: 387px; }
.seal-13 { left: 380px; top: 450px; }
.seal-14 { left: 184px; top: 511px; }

#oyster-01 { left: 41px;  top: 395px; }
#oyster-02 { left: 208px; top: 316px; }
#oyster-03 { left: 263px; top: 304px; }
#oyster-04 { left: 292px; top: 428px; }

#oyster-05 { left:  85px; top: 327px; }
#oyster-06 { left:  68px; top: 358px; }
#oyster-07 { left:  34px; top: 426px; }
#oyster-08 { left:  61px; top: 440px; }
#oyster-09 { left:  29px; top: 454px; }
#oyster-10 { left: 243px; top: 247px; }
#oyster-11 { left: 207px; top: 269px; }
#oyster-12 { left: 232px; top: 299px; }
#oyster-13 { left: 312px; top: 271px; }
#oyster-14 { left: 222px; top: 342px; }
#oyster-15 { left: 297px; top: 318px; }
#oyster-16 { left: 296px; top: 350px; }
#oyster-17 { left: 267px; top: 373px; }
#oyster-18 { left: 286px; top: 400px; }
#oyster-19 { left: 253px; top: 415px; }
#oyster-20 { left: 318px; top: 457px; }
#oyster-21 { left: 291px; top: 474px; }
#oyster-22 { left: 328px; top: 485px; }
#oyster-23 { left: 352px; top: 513px; }
#oyster-24 { left: 385px; top: 504px; }
#oyster-25 { left: 436px; top: 494px; }
#oyster-26 { left: 480px; top: 482px; }
#oyster-27 { left: 412px; top: 523px; }
#oyster-28 { left: 380px; top: 537px; }
#oyster-29 { left: 470px; top: 510px; }
#oyster-30 { left: 444px; top: 532px; }
#oyster-31 { left: 412px; top: 550px; }

.outfall { left: 38px; top: 300px; }

.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%; }

/* ---- Number Input ---- */
.underlined-input {
	text-align: center;
	margin-bottom: 0.125em;
	width: 20%;
	font-size: 2em;
	background-image: repeating-linear-gradient(transparent,transparent 53px,#FFFFFF 54px,#FFFFFF 56px,transparent 57px);
	background-position-y: 0;
}

.underlined-input-area {
	font-size: 2.2em;
	width: 20%;
}

.underlined-input-area .underline {
	position: absolute;
	top: 0.3em;
	left: 0.125em;
}

.underlined-input-area input {
	position: absolute;
	left: 0.15em;
	border: none;
	background-color: transparent;
	font-size: 1em;
	letter-spacing: -0.01em;
	font-family: Raleway;
}

.underlined-input-area input:disabled {
	color: #000000;
	-webkit-text-fill-color: #000000;
	opacity: 1;
}

.underlined-input-area .underlines {
	position: absolute;
	top: 0.25em;
	left: 0.1em;
	letter-spacing: 0.04em;
}

/* ---- Graphs ---- */
#graph-holder {
	position: absolute;
	top: 18%;
	left: 51.3%;
	height: 77%;
	width: 39%;
}

.graph-before-label, .graph-after-label {
	position: absolute;
	color: #FFFFFF;
	font-size: 1.25em;
	font-weight: bold;
	top: -7%;
}

.graph-before-label { left: 12%; }

.graph-after-label {
	left: 58.4%;
	display: none;
}

#graph-1, #graph-2, #graph-3, #graph-4 {
	display: none;
	position: absolute;
	width: 87%;
	height: 27.5%;
	top: 2.6%;
}

.show-graph-at-top { top: 2.6% !important; }

.graph-line {
	height: 10%;
	margin-left: 8.4%;
	border-bottom: 2px solid #FFFFFF80;
}

.graph-line.thick {
	margin-left: 7%;
	border-bottom: 4px solid white;
}

.graph-label {
	font-size: 1.25em;
	font-weight: 600;
	color: #FFFFFF;
	position: relative;
	top: 0.15em;
	left: -1.1em;
}

.graph-vert {
	width: 1%;
	height: 100%;
	position: absolute;
	left: 8.6%;
	top: 8%;
	border-left: 4px solid white;
}

.graph-title-box {
	transform: rotate(90deg);
	transform-origin: top left;
	top: 8%;
	position: absolute;
	left: 113%;
	height: 57px;
	display: inline;
	width: 208px;
}

.graph-title-box p {
	line-height: 1.2em;
	margin: 0.5em;
	font-size: 1.1em;
	color: #FFFFFF;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}

.graph-bar-before,
.graph-bar-after {
	position: absolute;
	height: 98.9%;
	width: 32%;
	top: 10%;
}
.graph-bar-before { left: 15%; }
.graph-bar-after { left: 60%; }

.filler {
	position: absolute;
	top: 100%;
	bottom: 1%;
	width: 100%;
	transition: 0.2s linear;
}

.count {
	font-weight: normal;
	text-transform: none;
}

.before { transition: 0.5s linear; }

#graph-1 .graph-bar { background-color: var(--yellow-color); }
#graph-2 .graph-bar { background-color: var(--green-color); }
#graph-3 .graph-bar { background-color: var(--blue-color-hover); }
#graph-4 .graph-bar { background-color: var(--purple-color); }

#graph-2 .graph-label { left: -1.7em; }
#graph-2 .graph-line:not(.top) { height: 16.66%; }
#graph-2 .graph-line:not(.top) .graph-label { top: 0.85em; left: -1.4em; }

/* ---- Map ---- */
#seal-key {
	position: absolute;
	top: 20px;
}

#species-key {
	position: relative;
	top: 10px;
}

/* ---- Overrides ---- */
#button-holder {
/*
	display: none;
*/
	position: absolute;
	top: 78%;
	left: 35.1%;
	width: 12.6%;
/*
	height: 30%;
*/
}

.small-ui-button {
	position: unset;
	width: 100%;
	font-size: 1.2em;
	margin: 6px 4px;
	outline: none !important;
}

.selector-holder { width: 625px; }