/* Normal styles for the modal */

#modal {
	background:#fff;
	left:50%;
	margin:-9999px 0 0 -40%;
	position:fixed;
	top:-50%;
	width:80%;
	border-radius:5px;
	box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	-moz-box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	z-index:100;
}
/* Make the modal appear when targeted */
.all p {margin-bottom:20px!important; color:#333!important;}
	#modal:target {
	top:50%;
	margin:-250px 0 0 -40%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#modal header, #modal footer {
	background:#f7f7f7;
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}
#modal footer {
	border:none;
	border-top: 1px solid #e7e7e7;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
#modal section, #modal header, #modal footer {
	padding:15px;
	z-index:200;
}
#modal h2 {
	margin:0;
}
#modal .btn {
	float:right;
}
#fade {
	display: none;  /* ensures it's invisible until it's called */
	position: fixed;  /* makes the div go into a position that's absolute to the browser viewing area */
	left: 0%; /* makes the div span all the way across the viewing area */
	top: 0%; /* makes the div span all the way across the viewing area */
	background-color: black;
	-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
	opacity: .70;
	filter: alpha(opacity=70);
	width: 100%;
	height: 100%;
	z-index: 90; /* makes the div the second most top layer, so it'll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
#modal2 {
	background:#fff;
	left:50%;
	margin:-9999px 0 0 -40%;
	position:fixed;
	top:-50%;
	width:80%;
	border-radius:5px;
	box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	-moz-box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	z-index:100;
}
/* Make the modal appear when targeted */

	#modal2:target {
	top:50%;
	margin:-250px 0 0 -40%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#modal2 header, #modal footer {
	background:#f7f7f7;
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}
#modal2 footer {
	border:none;
	border-top: 1px solid #e7e7e7;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
#modal2 section, #modal2 header, #modal2 footer {
	padding:15px;
	z-index:200;
}
#modal2 h2 {
	margin:0;
}
#modal2 .btn {
	float:right;
}
#fade {
	display: none;  /* ensures it's invisible until it's called */
	position: fixed;  /* makes the div go into a position that's absolute to the browser viewing area */
	left: 0%; /* makes the div span all the way across the viewing area */
	top: 0%; /* makes the div span all the way across the viewing area */
	background-color: black;
	-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
	opacity: .70;
	filter: alpha(opacity=70);
	width: 100%;
	height: 100%;
	z-index: 90; /* makes the div the second most top layer, so it'll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */}
.all {
	max-height:70%;
	overflow:auto;
	background:#fff;
	left:57%;
	margin:-9999px 0 0 -40%;
	position:fixed;
	top:-50%;
	width:60%;
	border-radius:5px;
	box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	-moz-box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, .25);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	z-index:100;
}
/* Make the modal appear when targeted */

	.all:target {
	top:50%;
	margin:-250px 0 0 -40%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
.all header, #modal footer {
	background:#f7f7f7;
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}
.all footer {
	border:none;
	border-top: 1px solid #e7e7e7;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
.all section, .all header, .all footer {
	padding:15px;
	z-index:200;
	padding-bottom:10px;
}
.all h2 {
	margin:0;
	color:#0070ba!important;
}
.all .btn {
	float:right;
}
#fade {
	display: none;  /* ensures it's invisible until it's called */
	position: fixed;  /* makes the div go into a position that's absolute to the browser viewing area */
	left: 0%; /* makes the div span all the way across the viewing area */
	top: 0%; /* makes the div span all the way across the viewing area */
	background-color: black;
	-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
	opacity: .70;
	filter: alpha(opacity=70);
	width: 100%;
	height: 100%;
	z-index: 90; /* makes the div the second most top layer, so it'll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */