@import url(./ensconce/stylesheet.css);

*, *:before, *:after	{box-sizing: inherit;}
html	{
	font-family: -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, system-ui, "Segoe UI", "Helvetica Neue", Roboto, "Noto Sans", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 100%; box-sizing: border-box;
}
body, table, input, select, textarea, button	{font-family:inherit; font-size:inherit;}

body	{margin:0 auto; padding:0; border:0;}

/****
mint green: #006f3d
ultramarine: #00387b
signal yellow: #f9a800
traffic red: #bb1e10
pantone 424C: rgb(108,111,112)
pantone 421C: rgb(181, 183, 180)
pantone 425C: rgb(87, 90, 93)
****/

a	{display:inline-block; position:relative; color:#00387b;}
a:hover	{color:#f9a800;}

img	{max-width:100%; height:auto;}

.cf:before, .cf:after	{content:' '; display:table;}
.cf:after	{clear:both;}

.cf>.fl	{float:left;}
.cf>.fr	{float:right;}

.l	{text-align:left;}
.c	{text-align:center;}
.r	{text-align:right;}
.j	{text-align:justify;}

.disclaimer	{font-size:75%; font-style:italic;}

.skew-up	{transform:skewY(-10deg);}
span.skew-up	{display:inline-block;}

.wr	{margin:0 auto; max-width:1024px;}

#hdr	{}
	#hdr h1	{margin:0 auto; padding:1em 0 0.5em; font-family:"Ensconce Sans Condensed", sans-serif; font-weight:normal; text-transform:uppercase; font-size:32pt;}
	#hdr .wr	{box-shadow:0 4px 16px rgba(0,0,0,0.25);}	
	#hdr .wr h1	{}
	#hdr #logo	{
		display:block; max-width:100%; width:400px; height:400px;
		margin:0 auto; padding:0;
		text-indent:-999em; text-align:left;
		background:url('../img/asr-logo-art.png') center center no-repeat;
		background-size:cover;
	}
#nav	{/*background:#44e;*/  background:#00387b; color:#eee;}
#nav .announce	{background:#44e; font-weight:bold; font-size:90%;}
#nav ul	{list-style:none; margin:1em auto 1em; padding:0; font-weight:bold; font-size:90%;}
#nav li	{display:inline-block; margin:0 1em;}
#nav a	{color:#eee; text-decoration:none;}
#nav a:hover	{color:#f9a800;}

#ftr	{}
#ftr .copy	{font-size:75%;}

#in	{}
#in a	{}
#in .font-list a:before	{
	position:absolute; top:0; left:0;
	width:100%; height:100%; display:inline-block;
	content:' '; overflow:hidden;
	background:rgba(87, 90, 93, 0.95);
	text-align:center; vertical-align:middle;
	opacity:0; transition:opacity 0.2s ease;
}
#in .font-list a:after	{
	position:absolute; top:50%; left:0;
	display:inline-block; width:100%; height:48pt;
	font-size:48pt; line-height:1; content:'info'; 
	font-family:"Ensconce Sans Condensed", sans-serif;
	margin-top:-24pt; text-align:center; vertical-align:middle;
	text-shadow:0 0 4px rgba(181, 183, 180, 0.95);
	opacity:0; transition:opacity 0.2s ease;
}
#in .font-list a:hover:before	{opacity:1.0;}
#in .font-list a:hover:after	{opacity:1.0;}

#ext	{margin:1em auto; max-width:100%; width:960px;}

.announce	{box-sizing:border-box; padding:0.5rem 0; line-height: 1;}
.announce > *[data-ticker]	{transition:1s ease opacity, 1s ease max-height; box-sizing:border-box; margin:0 auto; text-overflow:ellipsis; height: 1em;}
.announce.scriptable	{min-height: 1.9rem;}
.announce.scriptable > *[data-ticker]	{opacity:0.0; overflow:hidden; max-height:0; position: absolute;}
.announce.scriptable > .active[data-ticker]	{opacity:1.0; overflow:visible; max-height:1.5em; position: relative;}
.announce.scriptable > .in-progress[data-ticker]	{position: absolute; left: 0; right: 0;}