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

#page-1 .green-box {
	left: 9%;
	top: 2%;
	width: 82%;
	height: 15%;
	line-height: 1.1em;
}

#page-2 .green-box {
	left: 9%;
    top: 20%;
    width: 82%;
    height: 28%;
    line-height: 1.1em;
}

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

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

#page-3 p {
    width: 480px;
}

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

#preview {
	transform: scale(0.96);
	top: -10px;
	right: -12px;
}

#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; }