style_overlay.css

.grayScreen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
}

#overlayContainer{
	position:absolute;
	top:0;
	width:100%;
}

.overlayText, .setupText {
	width: 90%;
	background:#567e7e;
	display:inline-block;
	border-radius: 6px;
	border: 3px solid #3f5f5f;
	padding: 10px;
	text-align: left;
}

.overlayText {
	max-width: 600px;
	margin-top:30px;
	margin-bottom:30px;
}

.setupText {
	max-width: 600px;
	margin-top:10px;
	margin-bottom:10px;
}

div.fadeInOut {
	animation: fadeInOut 2s;
	-webkit-animation: fadeInOut 2s;
	-moz-animation: fadeInOut 2s;
	-o-animation: fadeInOut 2s;
	-ms-animation: fadeInOut 2s;
}

@keyframes fadeInOut {
	0% {opacity:0;}
	15% {opacity:1;}
	65% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}

@-moz-keyframes fadeInOut {
	0% {opacity:0;}
	15% {opacity:1;}
	65% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}

@-webkit-keyframes fadeInOut {
	0% {opacity:0;}
	15% {opacity:1;}
	65% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}

@-o-keyframes fadeInOut {
	0% {opacity:0;}
	15% {opacity:1;}
	65% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}

@-ms-keyframes fadeInOut {
	0% {opacity:0;}
	15% {opacity:1;}
	65% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;}
}

div.fadeIn, div.overlayText, div.grayScreen {
	animation: fadeIn 0.3s;
	-webkit-animation: fadeIn 0.3s;
	-moz-animation: fadeIn 0.3s;
	-o-animation: fadeIn 0.3s;
	-ms-animation: fadeIn 0.3s;
}

@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-moz-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-o-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}