/* ALERT BANNER */

#alert_banner {
	display: none;
	position: relative;
	width: 100%;
	z-index: 2;
}

#alert_banner.modal {
	background: rgba(0,0,0,0.5);
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 999;
}

	#alert_banner .content {
		border: none;
		box-shadow: 0 0 1px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.25);
		padding: 1em 7.5%;
	}

	#alert_banner.modal .content {
		border: none;
		box-shadow: 10px 10px 50px rgba(0,0,0,0.5);
		overflow: auto;
		position: absolute; top: 120px; right: 20%; bottom: auto; left: 20%;
		min-height: 50%;
		width: 60%;
	}

		#alert_banner .content header {
			margin: 0;
			padding: 0;
			position: relative;
			text-align: center;
			z-index: 1;
		}

			#alert_banner .content header * {
				display: inline;
				margin: 0 !important;
				padding: 0 !important;
			}

			#alert_banner.toggle header > * { cursor: pointer; }
			#alert_banner.toggle header > *:hover, #alert_banner.toggle header > *:focus
			{ border-bottom: 1px solid #ffffff; }

		#alert_banner .content article {
			font-size: 100%;
			line-height: 1.5em;
			margin: 0;
			padding: 0;
			position: relative;
			text-align: center;
			z-index: 1;
		}

			#alert_banner .content article > *:last-child { margin-bottom: 0 !important; }

		#alert_banner.toggle .content article { display: none; }

		#alert_banner .content .dismiss {
			background: transparent url('../images/ui/close_x.svg') center center no-repeat;
			background-size: 16px 16px;
			cursor: pointer;
			height: 40px;
			overflow: hidden;
			position: absolute; top: 0; right: 0;
			text-indent: -9999px;
			width: 40px;
			z-index: 2;
		}
		
		#alert_banner .content .dismissal_wrapper {
			display: table;
			margin: 2em 0 0 0;
			table-layout: fixed;
			width: 100%;
		}
		
		#alert_banner .content .dismissal_confirm, #alert_banner .content .dismissal_fail {
			cursor: pointer;
			display: table-cell;
			vertical-align: top;
			width: 50%;
		}
	
	#alert_banner.modal + #wrapper { filter: blur(15px); }


/* CSS3 MEDIA QUERIES */

/* LARGE SCREENS (content area over 1600 pixels) */
/*
@media screen and (min-width: 1600px) {

}
*/


/* SMALLER COMPUTERS (content area under 1200 pixels) */
/*
@media screen and (max-width: 1200px) {

}
*/


/* TABLETS (content area under 1024 pixels) */
@media screen and (max-width: 1024px) {

	#alert_banner.modal .content {
		top: 120px; right: 10%; left: 10%;
	}

}


/* NON-PHONES (content area over 783px) */
@media screen and (min-width: 783px) {

	#alert_banner[data-breakpoint="phone"] { display: none !important; }

}


/* PHONES (content area under 782 pixels) */
@media screen and (max-width: 782px) {

	#alert_banner {
		font-size: 80%;
		line-height: 1.5em;
	}

	#alert_banner[data-breakpoint="desktop"] { display: none !important; }

	#alert_banner .content .dismiss {
		background-size: 16px 16px;
	}

	#alert_banner.modal .content {
		top: 15px; right: 15px; left: 15px;
		width: calc(100% - 30px);
	}

	#alert_banner .content .dismissal_wrapper {
		display: block;
	}
		
		#alert_banner .content .dismissal_confirm, #alert_banner .content .dismissal_fail {
			display: block;
			width: 100%;
		}

}


/* MEDIUM PHONES (content area under 640 pixels) */
/*
@media screen and (max-width: 640px) {

}
*/


/* SMALL PHONES (content area under 480 pixels) */
/*
@media screen and (max-width: 480px) {

}
*/