/* ---------------------------------   General Use --------------------------------- */
* {
	margin: 0px;
	padding: 0px;
}
*:hover {
	cursor: default;
}
input, textarea {
	font-family: "Lucida Console", Monaco, "Courier New", monospace;
	font-size: 18px;
	padding: 4px;
}
input:hover, textarea:hover {
	cursor: text;
}
/* ---------------------------------   Full Page   --------------------------------- */
body {
	background-color: hsl(60, 100%, 97%);
	font-family: Tahoma, Geneva, sans-serif;
}
#bg_main {
	width: 1000px;
	min-height: 700px;     /* enables the vertical scroll bar to stay visible all of the time  */
	margin: 10px auto;
}
/* ---------------------------------   Page Header   --------------------------------- */
#page_header {
	color: hsl(210, 80%, 30%);
	padding: 0px 10px;
	width: 980px;
	height: 78px;
}
#page_header figure {
	width: 100px;
	float: left;
}
#site_info {
	float: left;
}
#site_info p:first-child {
	font-size: 50px;
	padding: 0px 0px 0px 15px;
	margin-top: -10px;
}
#site_info p:last-child {
	font-size: 20px;
	padding-left: 19px;
}
/* ---------------------------------  Backgrounds  --------------------------------- */
#bg_1, #bg_2, #bg_hello{
	opacity: 0.4;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
#bg_1 {
	background-color: hsl(210, 80%, 70%);
}
#bg_2{
	background-color: hsl(210, 80%, 35%);
	display: none;
}
#bg_hello {
	background-color: hsl(210, 80%, 35%);
}
/* ---------------------------------  Wrappers and headers  --------------------------------- */
#pop_wrap, #msg_wrap, #hello_wrap {
	position: fixed;
	width: 200%;
	height: 100%;
	left: 0px;
	top: 0px;
}
#msg_wrap {
	display: none;
}
#pop_wrap section, #msg_wrap section, #hello_wrap section {
	position:absolute;
	left:25%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	background-color:hsl(210, 80%, 98%);
	border: 4px solid hsl(210, 80%, 30%);
	max-height: 95%;
	color: hsl(210, 80%, 30%);
}
#pop_wrap header, #msg_wrap header, #hello_wrap header {
	margin: 0px;
	padding: 10px;
	text-align: center;
	background-color: hsl(210, 80%, 30%);
	color: hsl(210, 80%, 98%);
	font-family: "trebuchet MS", Helvetica, Geneva, sans-serif;
	font-size: 24px;
}
/* ---------------------------------  pop_wrap general  --------------------------------- */
#pop_wrap .note {
	font-style: italic;
	font-size: 16px;
	text-align: center;
}
/* ---------------------------------  pop_wrap article  --------------------------------- */
#pop_wrap article button {
	background-color: hsl(30, 100%, 90%);
	color: hsl(30, 100%, 20%);
	font-size: 16px;
	font-family: "Lucida Console", Monaco, "Courier New", monospace;
	padding: 6px 8px 4px 8px;
	margin: 0px 15px;
}
#pop_wrap article button:hover {
	background-color: hsl(30, 100%, 70%);
}
#pop_wrap article p {
	margin-left: 10px;
	margin-right: 10px;
}
#pop_wrap article p:nth-child(odd) {
	margin-top: 18px;
}
#pop_wrap article p:nth-child(even) {
	margin-top: 3px;
}
/* ---------------------------------  pop_wrap footer  --------------------------------- */
#pop_wrap footer {
	margin-top: 20px;
	color: hsl(210, 80%, 30%);
	text-align: center;
}
#pop_wrap footer p {
	margin: 10px 10px;
}
#pop_wrap footer button {
	background-color: hsl(210, 80%, 88%);
	color: hsl(210, 80%, 30%);
	padding: 4px 6px 2px 6px;
	font-size: 18px;
	margin: 0px 10px 0px 10px;
}
#pop_wrap footer button:hover {
	background-color: hsl(210, 80%, 70%);
	color: hsl(210, 80%, 15%);
}
#pop_wrap footer span {
	text-decoration: underline;
	padding: 2px 4px;
}
#pop_wrap footer span:hover {
	background-color: hsl(210, 80%, 50%);
	color: hsl(210, 80%, 90%);
}
/* ---------------------------------  Msg and Hello Specifics --------------------------------- */
#msg_wrap p, #hello_wrap p {
	margin: 15px 40px;
}
#hello_wrap p {
	text-align: center;
}
#hello_wrap button {
	background-color: hsl(210, 80%, 88%);
	color: hsl(210, 80%, 30%);
	padding: 4px 6px 2px 6px;
	font-size: 18px;
}
#hello_wrap button:hover {
	background-color: hsl(210, 80%, 70%);
	color: hsl(210, 80%, 15%);
}