/* Alert Banner CSS */

#alert_banner {
	display: none;
	position: relative;
	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: 99;
}

	#alert_banner .content {
		background: rgb(255,255,255);
		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 {
			background: rgb(255,255,255);
			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 rgb(255,255,255); }
		
		#alert_banner .content article {
			font-size: 100%;
			line-height: 1.625em;
			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: -999px;
			width: 40px;
			z-index: 2;
		}


/* 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%;
	}

}


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

	#alert_banner {
		font-size: 80%;
		line-height: 1.625em;
	}
	
	#alert_banner .content .dismiss {
		background-size: 16px 16px;
	}

	#alert_banner.modal .content {
		top: 100px; right: 5%; left: 5%;
	}

}


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

}