/* WebAwesome styles.css 20230317 by Dan Guenther */ 

:root {
    color-scheme: light dark;
}

/* reset initial values ............................................ */
html {
	scroll-behavior: smooth; /* enables scroll to anchor on full page load -- fix for Chrome; doesn't work for Safari */
}
* { 
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
img {
	max-width: 100%;
	border: 0;
	width: auto;
	height: auto;
}
.hero img { width: 100%; }
.triple img { width: 100%; }
.quadruple img { width: 100%; }
@-moz-document url-prefix() { /* fix for firefox max-width */
	/* img { width: auto; } */
	.form-error-message img { width: inherit; } /* fix for other inline images */
}

@media \0screen { /* ie 8 hacks */
}
iframe { 
	margin: 0; 	
	border: 0;
}
iframe.hd {
	display: block; /* allows height to be set */
	border: none;
	width: 1260px;
	height:709px;
}
iframe.widescreen {
	display: block; /* allows height to be set */
	border: none;
	width: 960px;
	height: 540px;
	margin-left: 150px;
}
iframe.portrait {
	display: block; /* allows height to be set */
	border: none;
	width: 720px;
	height: 540px;
	margin-left: 270px;
}
ol {
	counter-reset: section;
	margin-bottom: 1em;
	margin-left: 46px; /* OLD: 38px matches .indent */
	margin-right: 0px; /* fix for right side of nearby p tags */
	padding: 0px;
	width: auto;
}
ol>li {
	list-style: none;
	text-indent: -36px;
	margin-bottom: 0.5em;
}
ol>li:before {
	content:counter(section, decimal);
	counter-increment:section;
	margin-right: 10px;
	font: 700 24px 'Open Sans', 'Helvetica Neue', sans-serif;
	padding: 0px 4px;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	font-size: 16px;
}
ol>li>p:first-child {
	margin-top: -1.3em;
}
ol>li p { /* fixes */
	margin-right: 0;
	text-indent: 0;
}
li>h5:first-child { /* don't understand why this must be */
	margin-top: -1em;
	margin-right: 0;
	text-indent: 0;
}
ul {
	/* margin-bottom: 1em; */
	margin-left: 38px;
	margin-right: 0px;
	padding: 0px;
}
ul>li {
	list-style:disc;
	text-indent: 0px;
	/* margin-bottom: 0.5em; */
}
ul>li:before {
	content: none;
}
/*li:last-child {
	margin-bottom: 1em;
}*/

/* markdown image alignment */
img[name~="right"] { 
	float: right; 
	margin-left: 30px;
	margin-right: 0px;
	margin-bottom: 20px;
}
img[name~="rightcenter"], img[name~="rightcenterfull"] { 
	float: right; 
	margin-left: 15px;
	margin-right: 0px;
	margin-bottom: 20px;
}
img[name~="left"] { 
	float: left; 
	margin-right: 15px;
	margin-left: 0px;
	margin-bottom: 20px;
}
img[name~="leftcenter"], img[name~="leftcenterfull"] { 
	float: left; 
	margin-right: 15px;
	margin-left: 0px;
	margin-bottom: 20px;
}
img[name~="lefthalf"] { /* mobile will be half width */
	float: left; 
	margin-right: 15px;
	margin-left: 0px;
	margin-bottom: 20px;
}
img[name~="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}
img[name~="centercenter"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}
img[name~="centerinline"] {
	display: inline-block;
}
img[name~="univlogo"] {
	display: block;
	width: 220px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	/* height: auto !important; */
}
img[name=""] {
	margin-left: 5px;
	margin-right: 5px;
}

img[title~="important" i][title~="example" i] { } /* don't know what this is */

/* uses markdown ![](http://test.com/image.jpg "title1 title2") using the title attribute, then converted in post-markdown to a name attribute. (~= includes) */
img[name~="5"]  { width: 5px; }  img[name~="10"]  { width: 10px; }  img[name~="15"]  { width: 15px; }  img[name~="20"] { width: 20px; } 
img[name~="25"]  { width: 25px; } img[name~="30"]  { width: 30px; } img[name~="35"]  { width: 35px; } img[name~="40"]  { width: 40px; }
img[name~="45"]  { width: 45px; } img[name~="50"]  { width: 50px; } img[name~="55"]  { width: 55px; } img[name~="60"]  { width: 60px; } 
img[name~="75"]  { width: 75px; } img[name~="90"]  { width: 90px; }  img[name~="105"] { width: 105px; } img[name~="120"] { width: 120px; } 
img[name~="150"] { width: 150px; } img[name~="180"] { width: 180px; } img[name~="210"] { width: 210px; } img[name~="240"] { width: 240px; } 
img[name~="270"] { width: 270px; } img[name~="300"] { width: 300px; } img[name~="330"] { width: 330px; } img[name~="360"] { width: 360px; } 
img[name~="390"] { width: 390px; } img[name~="420"] { width: 420px; } img[name~="450"] { width: 450px; } img[name~="480"] { width: 480px; } 
img[name~="510"] { width: 510px; } img[name~="540"] { width: 540px; } img[name~="570"] { width: 570px; } img[name~="600"] { width: 600px; } 
img[name~="660"] { width: 660px; } img[name~="720"] { width: 720px; } img[name~="780"] { width: 780px; } img[name~="840"] { width: 840px; }
img[name~="900"] { width: 900px; } img[name~="1024"] { width: 1024px; }
/* percentage */
img[name~="100%"] { width: 99%; margin-left: 0; margin-right: 0; } img[name~="90%"] { width: 89%; margin-left: 0; margin-right: 0; }
img[name~="80%"] { width: 79%; margin-left: 0; margin-right: 0; } img[name~="70%"] { width: 69%; margin-left: 0; margin-right: 0; } 
img[name~="60%"] { width: 59%; margin-left: 0; margin-right: 0; } img[name~="50%"] { width: 49%; margin-left: 0; margin-right: 0; } 
img[name~="40%"] { width: 39%; margin-left: 0; margin-right: 0; } img[name~="30%"] { width: 29%; margin-left: 0; margin-right: 0; } 
img[name~="20%"] { width: 19%; margin-left: 0; margin-right: 0; } img[name~="10%"] { width: 9%; margin-left: 0; margin-right: 0; }

img[name~="3+"] { vertical-align:  3px; }
img[name~="3-"] { vertical-align: -3px; }
img[name~="5+"] { vertical-align:  5px; }
img[name~="5-"] { vertical-align: -5px; }


/* font-awesome icons */
a .fas, a .fab { border-bottom: 0px !important; }


/* general formatting .............................................. */
body {
	font: 20px 'Lato', 'Helvetica Neue', 'Segoe UI', sans-serif; /* size and color in theme css */
	overflow-y: auto;
}
p.alt-head { font-size: 26px; }

#menucontainer { /* full size */
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	max-width: 1800px;
}
#container { /* full size */
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/* max-width: 1600px; */
	text-align: center;
}
#container.staffcontainer { margin-top: 32px; }
#container.showmenucontainer { margin-top: 52px; } /* used where menu shows on sub-pages but not on main page */

blockquote { /* for all */
	margin-bottom: 1.0em;
	text-indent: 0px;
}

blockquote[alt="inset"], blockquote[alt="inset-0"] {
	margin-left: 8%;
	margin-right: 8%;
	padding: 2%;
	padding-left: 2.5%;
	border-left: none;
	border-right: none;
	border-top: 4px solid #DDD;
	border-bottom: 4px solid #DDD;
	font: 200 24px 'Open Sans', 'Helvetica Neue', sans-serif;
	color: #666;
	font-style: italic;
}
blockquote[alt="inset"] { /* border on regular inset */
	border-left: none;
	border-right: none;
	border-top: 4px solid #DDD;
	border-bottom: 4px solid #DDD;
}
blockquote[alt="inset-0"] { /* larger font, no border on inset-0 */
	font-size: 26px;
}
blockquote[alt="inset-1"] {
	font-size: 16px;
	margin-left: 25px;
	margin-bottom: 0;
	padding-left: 15px;
	padding-top: 15px; 
	padding-bottom: 0; 
	/*border-left: 4px solid #DDD;
	border-left-color: rgba(200,200,200,0.25);
	/*border-top: 1px solid #DDD;
	border-top-color: rgba(200,200,200,0.15);*/
	line-height: 1.5em;
}
blockquote[alt="inset-1"] a {
	font-weight: 300;
	border-bottom: none;
}
blockquote[alt="inset-1"] a::before {
	content: "\000BB \00A0 \00A0"; /* same as » and $nbsp; */
}
blockquote[alt="inset-1"] b { font-size: 18px; }

blockquote[alt="backset"]{
	padding: 35px;
	padding-bottom: 30px;
	border: 1px solid #999;	border-bottom: 1px solid #999; border-radius: 8px; border-color: rgba(128, 128, 128, 0.35);
}
blockquote[alt="backset"] h5 { margin-bottom: 1.2em; } /* NEW --> */

.footer blockquote {
	margin-bottom: 0;
}
.tall blockquote {
	margin: 0 !important; /* this fix exists because blockquotes currently are assigned in Markdown as blockquote[alt=inset] for some reason... */
}
hr {
	border: none;
	border-bottom: 4px solid #666;
	margin-top: 1em;
	margin-bottom: 1em;
	min-width: 90%;
	clear: both;
}
hr.thin-hr {
	border-bottom: 2px solid gray; 
	border-bottom-color: rgba(127,127,127,0.25);
	clear: both;
}
hr.thinnest-hr {
	border-bottom: 1px solid gray; 
	border-bottom-color: rgba(127,127,127,0.25);
	margin-top: 2em; margin-bottom: 2em;
	clear: both;
}

.hide {
     display: none;
}
.bump {
	clear: both;
	margin-bottom: 0px;
	width:100%;
}
.blip { 
	clear: both;
	width:100%;
	height: 10px; 
}


/* email obfuscation */
cite { font-style: normal; }
.spec_plus {
	display: none;
}
.spec_back {
	margin:0 !important;
	padding:0 !important;
	margin-left: -0.62em !important;
}
.spec_up {
	display: inline-block;
	margin:0 !important;
	padding:0 !important;
	margin-left: 0.13em !important; /* doesn't work? */
}


/* typography ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, */
/* font: 'Roboto' was offline fall-back for OS X ttf Roboto Condensed */

p { margin-bottom: 1em; }
h1 { font: 700 36px 'Open Sans', 'Helvetica Neue', sans-serif; color: #555; text-transform: uppercase; line-height: 1.0; margin-bottom: 0.65em; margin-top: 0.65em; clear: both; } /* keep same as h3 */
h2 { font: 700 56px 'Open Sans', 'Helvetica Neue', sans-serif; color: #555; text-transform: uppercase; line-height: 1.0; margin-bottom: 0.65em; margin-top: 0.65em; }
h3 { font: 700 36px 'Open Sans', 'Helvetica Neue', sans-serif; color: #555; text-transform: uppercase; line-height: 1.0; margin-bottom: 0.65em; margin-top: 0.65em; clear: both; } /* keep same as h3 */
h4 { font: 700 32px 'Open Sans', 'Helvetica Neue', sans-serif; color: #555; text-transform: uppercase; line-height: 1.0; margin-bottom: 0.2em; margin-top: .2em; clear: both; }
h5 { font: 600 24px 'Open Sans', 'Helvetica Neue', sans-serif; color: #555; text-transform: uppercase; line-height: 1.0; margin-bottom: 0.8em; margin-top: .2em; clear: both; }
h6 { font: 600 16px 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.1em;; text-transform: uppercase; margin-top: -0.9em; margin-bottom: 1em; }
h6 a { font-weight: 600; }
h4.alt-head {
	font-size: 30px;
}
h5.alt-head { 
	display: inline-block;
	padding: 0;
	min-width: 295px;
	max-width: 100%;
	text-align: center;
	padding: 2px;
	border: 2px solid rgba(0, 0, 0, 0);
	border-radius: 5px;
	font-size: 21px;
	background-color: #444;
	color: white;
}
.staffcontact h5 { clear: none; }

.staffcontact a { display: block; float: left; margin-right: 6px !important; /* overrides wrapper p a */ }
.staffcontact code { display: none; font-size: 14px; font-weight: 400; margin-left: 8px; margin-top: 5px; }
.staffcontact a:nth-of-type(1):hover ~ code:nth-of-type(1) { display: block; float: left; } /* matches nth hover element with nth hidden element */
.staffcontact a:nth-of-type(2):hover ~ code:nth-of-type(2) { display: block; float: left; } /* matches nth hover element with nth hidden element */
.staffcontact a:nth-of-type(3):hover ~ code:nth-of-type(3) { display: block; float: left; } /* matches nth hover element with nth hidden element */
.staffcontact a:nth-of-type(4):hover ~ code:nth-of-type(4) { display: block; float: left; } /* matches nth hover element with nth hidden element */

code ~ a { border-bottom: none !important; } /* targets email links on normal box */
code ~ a:hover { color: #d33 !important; } /* targets email links on normal box */
code + a, code + a + a, code + a + a + a { border-bottom: none !important; color: rgba(128, 128, 128, 0.45) !important; } /* targets email links on dark box (Contacts page) */
.wtdk-trans code + a { color: black !important; border-bottom: 1px dotted #BBB !important; }
.wtdk-trans code + a:hover { color: black !important; }
code + a:hover, code + a + a:hover, code + a + a + a:hover { color: rgba(128, 128, 128, 1.0) !important; } /* targets email links on dark box */
em > code + a { color: #111 !important; text-decoration: underline; }	
@media (prefers-color-scheme: dark) {
	em > code + a { color: white !important; text-decoration: underline; }	
}

.titlelink { font: 400 24px 'Open Sans', 'Helvetica Neue', sans-serif; }

a { 
	text-decoration: none; font-weight: 400; 
	-ms-word-break: break-all; word-break: break-all; 
	word-break: break-word; /* webkit nicer */ 
	-moz-hyphens: auto; /* firefox */ 
}
a:hover { text-decoration: none; } /* default for menus */

.named-anchor { position:relative; display:inline-block; top:-140px; } /* for scrolldown to hidden named anchors in menu */
.named-anchor.anchor-top { margin-top: -32px; padding-top: 32px; } /* matches height of #submenu */

.wrapper p a { margin-left: 1px; margin-right: 1px; } /* for body text in boxes */
i+a { text-decoration: none; } /* body links with fontawesome icon in front */

/* a.current { border-bottom: 3px solid #555; } */
#topbar a { font-family: 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: 700; text-transform: uppercase; }
#rightmenu a { font-weight: 700; font-size: 18px; text-transform: uppercase; }

.footer a { font-weight: inherit; margin-left: 0px; margin-right: 13px; padding-left: 7px; border-left: 1px solid #999; }
.contactwrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: -5px; /* used for stack of 5 */
}
.contact a, .contactnext a { 
	font: 400 18px 'Lato', 'Helvetica Neue', 'Segoe UI', sans-serif; 
	position: absolute;
	display: flex;
	align-items: center;
	top: 0; bottom: 0; left: 0; right: 0;
	padding-left: 24px; padding-top: 0px; padding-bottom: 0px;
}
.contact a:hover, .contactnext a:hover { /* text-decoration: none; */ }
blockquote[alt="inset"] a, blockquote[alt="inset-0"] a {
	font-size: 16px;
	font-weight: 400;
}
code {
	font-family: 'Lato', 'Helvetica Neue', 'Segoe UI', sans-serif;
	font-size: smaller;
	font-weight: 300;
}
b { 
	font-weight: 400; 
}
b code { font-weight: 400; }
strong {
	color: #d33 /* #ed584b  #E53424 */ ;
	font-weight: 300;
}
strong a { color: #d33 /* #ed584b */; font-weight: 400; border-bottom: none !important; }
strong a:hover { border-bottom: 1px dotted #bbbbbb !important; }

em {
	font-style: italic;
}
.gray { opacity: 0.50; }

.smaller { font-size: smaller; }
.small { font-size: small; }


/* menu bar ........................................................ */
#topbar {
	position: fixed;
	top: 0px;
	z-index: 99;
	width: 100%;
	height: auto;
	padding-top: 7px;
	padding-bottom: 7px;
}
#topbar a {
	margin: 28px;
	vertical-align:sub;
	padding-left: 8px; padding-right: 8px;
}

#leftmenu {
	font-size: 24px;
	float: left;
	width: auto;
	margin-left: 0;
	white-space: nowrap;
	-webkit-animation-name: fadeIn; /* Fade in the background */
	-webkit-animation-duration: 0.4s;
	animation-name: fadeIn;
	animation-duration: 0.4s
}
#leftmenu.leftmenuinner {
	-webkit-animation-name: slideIn;
	-webkit-animation-duration: 0.4s;
	animation-name: slideIn;
	animation-duration: 0.4s
}
#leftmenu a.notmobile:hover { border-bottom: none !important; } /* negates changes to #rightmenu .notmobile */
#rightmenu {
	/* font-size: 24px; */
	float: right;
	width: auto;
	margin-right: 1%;
	padding-top: 0px; /* vertically center smaller icon size, was 3*/
	text-align: right;
}
#rightmenu img { vertical-align: middle; }
#rightmenu a span:hover { border-bottom: 3px solid #555; }
#rightmenu a span.homeicon:hover { border-bottom: none; }
#rightmenu a.notmobile { margin: 0 !important; padding-left: 0; }
#rightmenu a.notmobile:hover span { border-bottom: 3px solid #555; } /* solo rightmenu item */
#rightmenu a.notmobile:hover ~ span.notmobile { border-bottom-width: 3px; border-bottom-style: solid; } /* multiple rightmenu items */
#rightmenu span.notmobile { vertical-align: sub; font-size: 18px; font-weight: 700; text-transform: uppercase; font-family:"Open Sans"; margin-right: 15px; }

#mobilemenu {
	display: none;
	float: left;
	margin-left: 2%;
	font-size: 20px;
	font-weight: 400;
	width: auto;
	white-space: nowrap;
	overflow-x: hidden;
}
#mobilemenu i {
	margin-right: 10px;
	margin-top: 6px;
}


#spacer { /* match height of fixed #topbar */
	height: 76px;
}
#spacer.shortspacer { } /* add submenu height */
.mobile {
	display: none;
}
img[name~="centercenter"].mobile { /* fix issue of higher priority on name */
	display: none;
}
.desktop-block { } /* see 1x for display:none */
.mobile-block  {
	display: none;
}
.notmobile {
	/* display: inherit; /* BREAKS MENU */ 
}
.gap { /* smooth scroll gap when anchor clicked and linkbox is active */
	/* scroll-margin-top: 50px; 
	scroll-snap-margin-top: 50px; /* snap = Safari */
	padding-top: 45px !important;
	margin-top: -45px !important; 
}
.homeicon {
	position: relative;
	display: inline-block;
	top: 0px;
	width: 72px;
	height: 62px;
	vertical-align: middle;
	background-image: url("/admin/graphics/home-icon.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
@media (prefers-color-scheme: dark) {
	.homeicon { background-image: url("/admin/graphics/home-icon-inverse.png"), url("/admin/graphics/home-icon.png"); } /* with fallback image */
}
.homespacer {
	position: relative;
	top: 0px;
	height: 50px;
	width: 2px;
	vertical-align: middle;
}


/* content boxes ................................................... */
#login-container {
	position:fixed; 
	width:100%; 
	top:100px; 
	bottom:100px; 
	z-index: 2; /* not needed? */
}
#login-content {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%) !important;
}
#login-content ul { margin-left: 0; }
.box {
	position: relative;
	display: block; /* hides unclassed and/or unsized box types */
	margin: 0px; /* NEW */
	/* overflow-x: hidden;
	overflow-y: hidden; */
}
.float { float: left; } /* to add .box float; when float is NOT used provides rollover parallax effect on hero image */
.wrapper {
	position: relative;
	width: 100%; /* fix for ie 8 image in standards mode, default is already 100% */
	/* overflow-x: hidden; */
	overflow-y: hidden; /* TRIED TO FIX PROBLEM AFTER EXPANDED BOXES WERE FIXED FOR EXPAND/COLLAPSE IN STYLES.CSS */
	text-align: left;
	margin-bottom: 0px;
}

.copy { display: none !important; } /* hides copies of files which break next boxes */
.shadow { 
	-webkit-box-shadow: inset 0px 0px 2px #999; 
	box-shadow: inset 0px 0px 2px #999;
}

.contact .wrapper, .contactnext .wrapper { /* forces square box when followed by .next */
	width: 100%; 
}
.contact .next, .contactnext .next {
	display: inherit;
	margin-top: 20px;
}

.next:last-child {
	margin-right: 0px;
}

.pad {
	position: relative;
	padding: 25px;
}
.next .pad {
	padding: 25px;
}
.footer {
	display: block;
	position: sticky;
	bottom: 0px;
	z-index: -100;
	float: left;
	clear: both;
	width: 100%;
	margin-top: 0px;
	text-align: left;
}
.footer .pad {
	padding-left: 40px;
	padding-right: 20px;
	padding-top: 20px;
	/* padding-top: 30px; */
	/* margin-bottom: 40px; */
}
.footer p {
	line-height: 1.4em;
}
.footer blockquote { font-size: 16px }
.footer blockquote:first-child {
	float: left;
	border: none;
	width: 45%;
	margin-right: 5%;
	padding: 0;
	/* font-size: 16px; */
}
.footer blockquote:last-of-type {
	float: left;
	border: none;
	width: 50%;
	margin-right: 0;
	padding: 0;
	/* font-size: 16px; */
}
.footer h6 { float: left; margin-left:0; margin-right: 25px; margin-top: 3px; /* margin-bottom: 20px; */ line-height: 1.0em;  }
.fixfooter { position: fixed; bottom: 0; z-index: 999; }

.header {
	display: block;
	width: 1260px;
	height: auto;
}
.hero {
	display: block;
	width: 100%;
	height: 600px;
	margin-top: 0px; /* -54 old */
	margin-bottom: -5px;
	position: -webkit-sticky;
	position: sticky; 
	z-index: -99;
	top: 76px; /* 76px;*/
	background-image: url("/hero-full.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.subhero {
	display: block;
	width: 100%;
	margin-top: 0px; /* -54 old */
	position: -webkit-sticky;
	position: sticky; 
	z-index: -99;
	top: 76px; /* 76px;*/
}
.subhero.submenu-bump { top: 108px; } /* for when submenu is present*/
/* see .linkbox ~ .subhero for when linkbox is present */

/* STAFF SUBMENU, auto created in staff directory */
#submenu {
	position: fixed;
	z-index: 3;
	top: 76px;
	width: 100%;
	height: 31px;
	border-top: 1px solid gray;
	border-top-color: rgba(255,255,255,1);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0px;
	font-size: 20px;
	text-align: left;
}
@media (prefers-color-scheme: dark) {
#submenu { border-top-color: rgba(0,0,0,1); }
}
#submenu ~ .hero { top: 108px; } /* bumps down only when #submenu is present */
#submenu .pad { margin-left: 43px; padding: 0; }
#submenu a {
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	margin-right: 30px;
	border-bottom: none;
	padding: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius:4px;
}
#submenu a:first-of-type { /* margin-right: 45px; */ }
#submenu a:last-of-type { margin-right: 0px; }
#submenu span { 
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	margin-right: 50px;
}

/* GENERAL SUBMENU, created with submenu box */
.submenu {
	display: block;
	width: 100% !important;
	height: 40px;
	margin-top: 0;
	margin-bottom: 0;
	position: sticky;
	z-index: 10;
	top: 76px;
	background-color: #444 !important;
	padding: 0 !important;
}
@media (prefers-color-scheme: dark) {
.submenu { background-color: #900; }
}
.submenu .pad { padding:0; padding-top: 5px; }
.submenu p a {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: white;
	margin-right: 50px;
	border-bottom: none;
}
.submenu p a:hover { 
	border-bottom: 2px white solid;
}
.submenu-active {
	border-bottom: 2px solid white !important;
}
.submenu p i {
	display: inline-block;
	font-size: 18px;
	color: white;
	margin-left: 186px;
	margin-right: 10px;
}

.onecol {
	display: block;
	width: 21%;
	padding-left: 2%; padding-right: 2%;
}
.onecol .pad { padding-left: 0px; padding-right: 5px; }
.fourcol {
	display: block;
	width: 80%;
	padding-left: 10%; padding-right: 10%;
}
.contact, .contactnext {
	display: block;
	width: 25%;
	height: auto;
}
.contact { float: left; }
.single {
	display: block;
	float: left;
	width: 25%;
	margin-bottom: -5px;
}
.double {
	display: block;
	float: left;
	width: 50%;
	margin-bottom: -5px;
}
.triple {
	display: block;
	float: left;
	width: 75%;
	margin-bottom: -5px;
}
.quadruple { 
	display: block;
	/* float: left; (not needed) */
	width: 100%;
	margin-bottom: -5px;
}
.item {
	margin-bottom: 5px;
	margin-left: 0px; 
	clear: both;
}
.item i {
	margin-right: 10px;
}
.item-descript {
	margin-top: 0.4em;
	font-size: 16px;
}

.indent, .indent-desktop {
	margin-left: 49px; /* matches ol ?? not any more? */
	clear: both;
	margin-right: 49px;
}
.indent-mobile { /* see 1x mobile for values */
}


.questionbox, .questioncomp {
	cursor: pointer; 
	padding: 15px; 
	padding-bottom: 5px; 
	margin-bottom: 20px; 
	max-width: 980px; 
	border-radius: 12px; 
	border: 2px solid gray; 
	border-color: rgba(128,128,128,.15); 
	background-color: white;
}
.ltdk-trans blockquote[alt="backset"] { background-color: white; } /* for answer page, must be preceded by h5 (OLD) */
@media (min-width: 1025px), (max-width: 640px) {
	.ltdk-trans blockquote[alt="backset"] p:last-of-type { margin-bottom: 0.5em; } /*  */
}
.questionbox:hover { border-left-width: 3px !important; border-left-color: #ed584b !important; padding-left: 14px !important; }
.questionbox:hover a { color: #ed584b; }
.questiondate { float: left; width: 12%; }
.questiondate code { font-weight: 400; }
.questiondesc { float: left; width: 85%; margin-top: 2px; font-size: 18px; }
.questiondesc a { border: none !important; }
.questiondesc a:active { color: #ed584b; }
@media (min-width:1025px) {
	.questiondesc p:last-of-type { margin-bottom: 0.5em; }
} /* <-- NEW */


.timebox {
	display:inline-block; 
	margin-top: 0px;
	margin-bottom:-5px; 
	margin-right:15px; 
	margin-left:20px;
	padding-bottom:0px;
	padding-left:8px; 
	padding-right:8px; 
	border: 1px solid #eee;
	border-bottom-color: #ddd;
	border-radius: 5px;
	background-color:#eee;
	color:#555;
	font-weight:400; 
	font-size:smaller; 
}
.timebox:first-of-type { /* margin-left: 14px; */ }
.timebox:last-of-type { margin-right: 0; }
@media (prefers-color-scheme: dark) {
	.timebox { background-color: #444; color: #eee; border-color: #444; }
}
	
.date {
	display: inline-block;
	width: 100px;
	height: 2em;
	padding-top: 4px; 
	float: left;
	margin-left: 5px;
	margin-right: 10px;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
}
.year { 
	display: inline-block; 
	padding: 15px; 
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #d33;
	color: white;
}
.circled {
	border: 1px solid rgba(127,127,127,0.25);
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	clear: both;
}
.circled > div { float: none; }

.half {
	display: block;
	float: left;
	width: 47%;
	margin-left: 2%;
	margin-right: 1%;
	margin-bottom: 1em;
	height: auto;
}
.half.staffcontact { margin-bottom: 0em !important; }
.half.mhalf a.subtle {
	display: inline-block; 
	font-size: 16px;
	line-height: 0.8em !important;
	text-transform: uppercase;
	margin: 5px; 
	padding: 5px;
	border: 0px rgb(246,246,246) solid !important; /* important negates a link hover border, subtle */
	border-radius: 5px; width: 80%; 
}
.half.mhalf a.subtle:hover { border-color: #aaa !important; }

.third { 
	display: block;
	float: left;
	width: 28%;
	margin-left: 0%;
	margin-right: 5%;
	margin-bottom: 1.0em;
	height: auto;
}
/* .third:first-of-type { margin-left: 0; } */
/* .third:last-of-type { margin-right: 0; } */
.third p:last-child {  } /* negates body p (1em) at bottom of .third */
.twothird { 
	display: block;
	float: left;
	width: 56%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 1.0em;
	height: auto;
}
/* .twothird:first-of-type { margin-left: 0; } */
/* .twothird:last-of-type { margin-right: 0; } */
.twothird p:last-child {  } /* negates body p (1em) at bottom of .third */
.fourth {
	display: block;
	float: left;
	width: 21%;
	margin-left: 0%;
	margin-right: 4%;
	/* margin-top: 0.5em; */
	margin-bottom: 1em;
	height: auto;
}
/* .fourth:first-of-type { margin-left: 0; } */
/* .fourth:last-of-type { margin-right: 0; } */
.fourth p:last-child { margin-bottom: 0px; } /* negates body p (1em) at bottom of .fourth */
.threefourth {
	display: block;
	float: left;
	width: 69%;
	margin-left: 2%;
	margin-right: 4%;
	margin-top: 10px;
	margin-bottom: 1em;
	height: auto;
}
/* .threefourth:first-of-type { margin-left: 0; } */
/* .threefourth:last-of-type { margin-right: 0; } */
.threefourth p:last-child { margin-bottom: 0px; } /* negates body p (1em) at bottom of .threefourth */

.right {
	float: right;
}
.sticky {
	position: sticky;
	top: 76px;
	z-index: 2;
}
.stickyfoot { 
	position: sticky;
	bottom: 90px;
	margin-bottom: -30px;
	z-index: -101;
}

.title {
	position: relative;
}
.title div { 
	position: absolute;
	top: 30px;
	left: 0%;
	width: 100%;
	transform: translate(0%, 0%);
	font: 700 50px 'Open Sans', 'Helvetica Neue', sans-serif; color: white;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
	background-color: transparent;
	line-height: 1.0;
}

.overlink {
	display: block;
	/* position: absolute; */
	background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); /* fix for ie: embeds transparent gif */
	/* bottom: 5px; left: 0px; */
	width: 100%;
	/* height: 300px; */
}
.titlelink {
	position: absolute;
	bottom: 5px;
	left: 0px;
	width: 90%;
	height: auto;
	padding: 5%;
	padding-left: 5%;
	text-align: center;
}
.vidwrapper {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 60px;
}
.vidlink {
	width: 60px; 
	height: 60px;
	margin-top: 100px;
	/* background-image: url("/admin/graphics/play.png") */
}
.linkbox {
	position: sticky;
	top: 108px;
	height: 31px;
	z-index: 2;
	font-size: 15px;
	margin-top: -20px;
	background-color: red;
}
.linkboxsubhero-adj { margin-top: -31px; }  /* for when linkbox is present */
.linkbox ~ .subhero {padding-top: 31px; } /* for when linkbox is present */
.linkbox.nostaff { top: 76px; }
.linkbox p {
	margin-bottom: 0;
}
.linkbox p a {
	display: inline-block;
	margin-top: 5px;
	margin-left: 0; /* 25px; */
	margin-right: 0; /* 15px; */
	margin-bottom: 0px; 
	padding: 0px; 
	padding-left: 2.5%; /* 10px; */
	padding-right: 2.5%; /* inherit */
	font-weight: 400;
	border-left: 1px dotted gray;
	border-bottom: none;
}
.linkbox p a:first-of-type { margin-left: 0px; /* 26px; */ padding-left: 25px; border: 0; }
.linkbox p a:last-of-type { margin-right: 0; }
.linkbox a:hover, a.linkbutton:hover {
	text-decoration: none;
}
.linkboxmargin { padding-left: 2.0%; padding-right: 18%; }
a.linkbutton { /* linkbutton for inline button: links */
	float: left;
	width: auto; 
	margin-left: 25px;
	margin-right: 0px;
	margin-bottom: 5px; 
	padding: 8px; 
	padding-left: 20px;
	padding-right: 20px;
	/* color: white; */
	font-weight: 400;
	border-radius:4px; 
	border-bottom: none;
}
a.linkbutton { display:inline-block; float: none /* negates above */; background-color: #d33; border-bottom: none !important; margin-right: 18px !important; } 
a.download { border-bottom: none !important; padding: 10px; padding-left: 15px; padding-right: 12px; margin-left: -5px; display: inline-block; }
a.download:hover { border-radius:6px; }

/* .linkbox a::before {
	margin-right: 4px;
	font-size: 12px;
	content: "\25B6\20 \a0\20"; /* 25B6 is right triangle emoji, a0 is &nbsb, 20 is extra space; */
/* } */

#report, .report {
	padding: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid gray;
	margin: 0;
	margin-top: 5px;
	margin-bottom: 10px;
	font-weight: 300;
	background-color: #FBFDC4;
	border-radius: 5px;
}
@media (prefers-color-scheme: dark) {
#report, .report { color: black; }	
}


.scroll {
	overflow-y: auto;
}
.contact i, .contactnext i {
	margin-right: 15px;
}

/* see light/dark.css
.hide1x { display: block; }
.hide2x { display: block; }
.hide3x { display: block; }
.hide4x { display: none; }
.show1x { display: none; }
.show2x { display: none; }
.show3x { display: none; }
.show4x { display: block; } 
*/
.zero { height: 0px !important; }
.hidden { display: none; }
.shown { display: block; }

.scrollup {
	position: absolute;
	top: 27px;
	right: 0px;
	width: 100%;
	height: 23px;
	padding: 3px;
	padding-right: 20px;
	font-size: smaller;
	text-align: right;
}
.scrolldown {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: 23px;
	padding: 3px;
	padding-right: 20px;
	font-size: smaller;
	text-align: right;
	background: gray; /* For browsers that do not support gradients */
}

button { margin-top:10px; margin-bottom: 10px; padding: 8px; padding-left: 12px; padding-right: 12px; font-family: 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: 400; color: white; border-radius:3px; text-decoration: none; border: none; background-color: #d33; outline: 0; }
button.textbutton { display: inline; padding: 0; font-family: inherit; font-size: 16px; font-weight: 400; text-transform: inherit; background-color: inherit; border: none; color: inherit; border-bottom: 1px dotted rgba(124,124,124,0.5); }
button.textbutton:hover { color: inherit; background-color: inherit; }

/* local form styles: use class="default" */
form.default { margin-top: 30px; }
form.default li {list-style: none; margin-bottom: 14px; }
form.default label { display: block; font-size: smaller; font-weight: 400; margin-top: 16px; margin-bottom: 3px; } 
/*form.default label {display:block;margin-top:16px;margin-bottom:3px;}*/
form.default select { width: 130px; }
form.default input { background-color: white; color: #222; }
form.default textarea { background-color: white; color: #222; }
@media (prefers-color-scheme: dark)	{
	form.default input { background-color: #282828; color: white; }
	form.default textarea { background-color: #292828; color: white; }
}
form.default input[type="radio"] { background-color: white; display: inline; width: 40px; padding-left: 10px; vertical-align: middle; }
form.default input[type="checkbox"] { background-color: white; display: inline; width: 25px; padding-left: 10px; vertical-align: middle; }
form.default span { font-size: 16px; font-weight: 300; margin-left: 5px; }
form.default input { display: block; width: 175px; height: 25px; padding-left: 5px; padding-right: 5px; font: 300 16px 'Lato', 'Helvetica Neue', 'Segoe UI', sans-serif; border-radius:3px; border: 1px solid #999; }
form.default textarea { width: 450px; max-width: 95%; min-height: 90px; padding:5px; font: 300 16px 'Lato', 'Helvetica Neue', 'Segoe UI', sans-serif; border-radius:6px; border: 1px solid #999; }
form.default button { margin-top:10px; margin-bottom: 10px; padding: 8px; padding-left: 12px; padding-right: 12px; font-family: 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: 400; color: white; border-radius:3px; text-decoration: none; border: none; background-color: #dd0000; }
/* form.default button:hover { color: white; background-color: black; } */
form.default .inline { display: inline; } /* use class="inline" on input tag */
form.default .required { color: rgba(128,128,128,.85); margin-left: 1px; }
form.default .mini { width: 20px; } /* used in admin PHP files */
form.default .short { width: 75px; } /* used in admin PHP files */
form.default .medium { width: 125px; } /* used in admin PHP files */
form.default .long { width: 150px; } /* used in admin PHP files */
form.default .size1  { width: 20px; }
form.default .size2  { width: 35px; }
form.default .size3  { width: 50px; }
form.default .size4  { width: 75px; }
form.default .size5  { width: 100px; }
form.default .size6  { width: 125px; }
form.default .size7  { width: 150px; }
form.default .size8  { width: 175px; }
form.default .size9  { width: 200px; }
form.default .size10  { width: 225px; max-width: 95% }
form.default .size11  { width: 250px; max-width: 95% }
form.default .size12  { width: 275px; max-width: 95% }
form.default .size13  { width: 300px; max-width: 95% }
form.default .size14  { width: 325px; max-width: 95% }
form.default .size15  { width: 345px; max-width: 95% }
form.default .max { width: 450px; max-width: 95%; padding-left: 5px; padding-right: 5px; }
form.default .tall { min-height: 200px; }
form.default .maxtall { min-height: 250px; }
form.default .indent { margin-left: 20px; }

select {
	color: black;
	font-family: 'Open Sans';
	font-size: 16px;
	border-radius: 4px;
}

/* for university logos which function as form buttons to hide link information, email addresses */
.univinfo { display: inline-block; width: 30%; margin-left: 1%; margin-right: 1%; }
.univinfo button { font-family: 'Open Sans'; font-size: 20px; font-weight: 600; color: white; border-radius:3px; text-decoration: none; border: none; padding: 10px; background-color: #dd0000; text-align: center; vertical-align: middle; background-color: inherit; }
.univinfo button:hover { background-color: #e9e9e9; }
.univlogo img { width: 220px; }
/* no campus */
p.univinfo { padding-top: 10px; vertical-align: middle; text-align: left; width: 30%; margin-left: 1.25%; margin-right: 0%; }
p.univinfo a { display: inline-block; border-bottom: none !important; padding: 10px; padding-left: 7px; padding-right: 7px; /* << was 5px; padding-bottom: 0px; */ }
p.univinfo a:hover { background-color: #e9e9e9; }

/* google form iframe height */
.univheight { height: 400px; max-width: 800px; width: 100%; }
@media (min-height: 300px) { .univheight { height: 130px } } 
@media (min-height: 340px) { .univheight { height: 170px } } 
@media (min-height: 380px) { .univheight { height: 210px } } 
@media (min-height: 420px) { .univheight { height: 250px } } 
@media (min-height: 460px) { .univheight { height: 285px } } 
@media (min-height: 500px) { .univheight { height: 325px } } 
@media (min-height: 540px) { .univheight { height: 365px } } /* iPhone 6 */
@media (min-height: 565px) { .univheight { height: 405px } } 
@media (min-height: 605px) { .univheight { height: 450px } } /* iPhone 11 Pro */
@media (min-height: 645px) { .univheight { height: 405px } } 
@media (min-height: 685px) { .univheight { height: 445px } } 
@media (min-height: 725px) { .univheight { height: 485px } } 
@media (min-height: 765px) { .univheight { height: 525px } } 
@media (min-height: 805px) { .univheight { height: 565px } } /* Macbook Air) */
@media (min-height: 845px) { .univheight { height: 615px } } 
@media (min-height: 885px) { .univheight { height: 660px } } 
@media (min-height: 925px) { .univheight { height: 705px } } /* iPad, iPad mini */
@media (min-height: 965px) { .univheight { height: 735px } } 
@media (min-height: 1005px) { .univheight { height: 775px } } 
@media (min-height: 1045px) { .univheight { height: 815px } } 
@media (min-height: 1085px) { .univheight { height: 855px } } 
@media (min-height: 1125px) { .univheight { height: 895px } } 
@media (min-height: 1165px) { .univheight { height: 935px } } 
@media (min-height: 1205px) { .univheight { height: 975px } } 
@media (min-height: 1245px) { .univheight { height: 1015px } } 
@media (min-height: 1285px) { .univheight { height: 1055px } } 
@media (min-height: 1325px) { .univheight { height: 1095px } } 

.googhide { 
	position:relative; 
	top: -60px; 
	padding-top: 20px; 
	padding-bottom: 10px;
	margin-bottom: -60px; 
	/* background-color: rgb(0,0,0,0.5) !important; */
}

/* responsive Google maps */
.map-responsive {
    overflow:hidden;
}
.map-responsive iframe {
	position: relative;
	top: -56px;
    margin-bottom: -61px;
    width: 100%;
    height: 400px;
}
@media (min-height: 350px) { .map-responsive iframe { height: 260px } } /* Moto G4 landscape, 375 iPhone 11 Pro landscape */
@media (min-height: 410px) { .map-responsive iframe { height: 395px } } /* Pixel 2, iPhone 6+ MAX landscape */
@media (min-height: 567px) { .map-responsive iframe { height: 485px } } /* iPhone 5, iPhone 11 Pro (yes?) */
@media (min-height: 639px) { .map-responsive iframe { height: 485px } } /* Galaxy Note 3 */
@media (min-height: 667px) { .map-responsive iframe { height: 505px } } /* iPhone 6 (not?) */
@media (min-height: 730px) { .map-responsive iframe { height: 570px } } /* Pixel 2, Nexus 6 */ 
@media (min-height: 767px) { .map-responsive iframe { height: 570px } } /* iPad, iPad mini landscape */
@media (min-height: 811px) { .map-responsive iframe { height: 625px } } /* iPhone X+, iPhone 11 Pro (not?) */
@media (min-height: 850px) { .map-responsive iframe { height: 660px } } 
@media (min-height: 895px) { .map-responsive iframe { height: 706px } } /* iPhone 11 Pro Max */
@media (min-height: 950px) { .map-responsive iframe { height: 760px } }
@media (min-height: 1000px) {.map-responsive iframe { height: 810px } }
@media (min-height: 1023px) {.map-responsive iframe { height: 834px } } /* iPad, iPad mini */
@media (min-height: 1365px) {.map-responsive iframe { height: 854px } } /* iPad Pro */

/* responsive Vimeo, Youtube */
.video-background { background-color: black; }
.video-center { text-align: center; margin-left: auto; margin-right: auto; }
.video-responsive { /* for YouTube embed */
	position:relative;
	padding:56.25% 0 0 0;
	height: 0;
}
.video-responsive iframe { /* for YouTube embed */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border: 0;
}
.video-center { max-width: 95%; }
.video-center video:active { outline: none; }
.video-center video:focus { outline: none; }
video::-webkit-media-controls-overlay-play-button {
  display: none;
}

/* @media (min-width:  568px) { .video-center { max-width:  464px; max-height: 261px; } } /* iPhone 6,7,8 landscape */
/* @media (min-width:  667px) { .video-center { max-width:  528px; max-height: 297px; } } /* iPhone 6,7,8 landscape */
/* @media (min-width:  731px) { .video-center { max-width:  592px; max-height: 333px; } } /* iPhone 6,7,8 PLUS landscape */
/* @media (min-width:  812px) { .video-center { max-width:  528px; max-height: 297px; } } /* iPhone X landscape; note narrower dimensions */
/* @media (min-width:  823px) { .video-center { max-width:  592px; max-height: 333px; } } /* Pixel 2 landscape */
/* @media (min-width: 1024px) { .video-center { max-width:  896px; max-height: 504px; } } /* classic */
/* @media (min-width: 1152px) { .video-center { max-width: 1024px; max-height: 576px; } } /* Chromebook pixel, Kindle Fire */
/* @media (min-width: 1280px) { .video-center { max-width: 1152px; max-height: 648px; } } /* Chromebook pixel, Kindle Fire */
/* @media (min-width: 1366px) { .video-center { max-width: 1232px; max-height: 693px; } } /* Macbook Air 11 find nearest even units of 16x9 */
/* @media (min-width: 1440px) { .video-center { max-width: 1312px; max-height: 738px; } } /* Macbook Air 13, Pro 15 (1440x900) subtract 128 from width */
/* @media (min-width: 1536px) { .video-center { max-width: 1408px; max-height: 792px; } } /* Macbook Pro 16 (1536x960) subtract 208 from width */


@media (height: 1024px) and (width:768px) { .video-center { max-width: 768px; max-height: 432px; } } /* iPad, mini = 4x3 dimensions */
@media (width: 1024px) and (height:768px) { .video-center { max-width: 1024px; max-height: 576px; } } /* iPad, mini = 4x3 dimensions landscape*/



/* responsive design */
@media (max-width: 1279px) { /* narrow pc, landscape tablet, 3 box wide */
	iframe.widescreen, iframe.hd { width: 940px; height: 529px; margin-left: 0; }
	iframe.portrait { width: 720px; height: 540px; margin-left: 110px; }
	.hidetablet { display: none; }
	#menucontainer { width: 100%; }
	.hero { height: 600px; }
	.title div { font-size: 46px; }
	.footer blockquote:first-child { width: 50%; }
	.footer blockquote:last-of-type { width: 45%; }
	.contact a, .contactnext a { font-size: 16px; }
	.titlelink { font-size: 21px; }
	.quad .next { margin: 0; margin-left: 20px; }
	.next:last-child { margin-top: 20px; }
	/* .half { width: 46%; margin-left: 2%; margin-right: 2%; } */
	/* .pad { padding: 20px; } */
	.hex .pad { padding: 40px; }
	.onecol { }
	.fourcol { width: 86%; padding-left: 7%; padding-right: 7%; }
	.header { width: 100%; }
	.linkboxmargin { padding-left: 2.5%; padding-right: 11.5%; }	

	/* see light/dark.css
	.hide1x { display: block; }
	.hide2x { display: block; }
	.hide4x { display: block; }
	.hide3x { display: none; }
	.show1x { display: none; }
	.show2x { display: none; }
	.show4x { display: none; }
	.show3x { display: block; }
	*/
}
@media (height: 1024px) and (width:768px) { /* iPad, iPad mini = 4x3 dimensions */
	.video-center { max-width: 768px; max-height: 432px; } 
	.half { width: 48%; margin-left: 1%; margin-right: 1%; }
	.half:first-of-type { margin-left: 0%; width: 49%; }
	.half:last-of-type { margin-right: 0%; width: 49%; }
} 
@media (max-width: 959px) { /* portrait tablet, 2 box wide magnified */
	body { font-weight: 300; }
	h1 { font-size: 32px; }
	h2 { }
	h3 { font-size: 32px; }
	h4 { font-size:26px; }
	h4.alt-head {font-size: 25px;}
	
	.midrange { display: block; }
	.footer blockquote { width: 100% !important; margin-right: 0 !important; } /* !important to overrule first-child and last-child from earlier */
	iframe.widescreen, iframe.hd { width: 720px; height:405px; }
	iframe.portrait { width: 720px; height: 540px; margin-left: 0; }
	#topbar a { margin-left: 21px; margin-right: 0px; }
	#topbar a:first-child { margin-left: 15px; }
	#submenu .pad { margin-left: 37px; }
	#submenu a {margin-right: 11px; }
	#submenu a:first-of-type { margin-right: 9px; }
	.submenu p a { font-size: 14px; margin-right: 40px; }
	.submenu p i { font-size: 18px; margin-left: 55px; margin-right: 30px; }
	.hero { height: 422px; background-image: url("/hero-tablet.jpg"), url("/hero-full.jpg"); }
	.title div { font-size: 36px; }
	.contact { width: 50%; }
	.contact .wrapper { /* margin-bottom: -4px; */ }
	.contact a { font-size: 18px; }
	.single { width: 50%; }
	.double { width: 100%; }
	.triple { width: 100%; }
	.wide { width: 100%; }
	.quad { width: 100%; /* height: auto; */ }
	.tall { width: 350px; }
	.quad .next { margin: 0; margin-top: 20px; margin-right: 20px; }
	.next:last-child { margin-right: 0px; }
	.hex { width: 720px; height: auto; }
	.hex .wrapper { height: inherit; }
	.onecol { width: 50%; /* width: 40%; margin-left: 6.66%; */ }
	.twocol { width: 720px; }
	.threecol { width: 720px; }
	.onecol { width: 42%; padding-left: 4%; padding-right: 4%; }
	.fourcol { width: 92%; padding-left: 4%; padding-right: 4%; }
	blockquote[alt="backset"] { /*padding-bottom: 10px;*/ }
	.fixfooter { position:relative; bottom: inherit; z-index: 0; }
	.linkboxmargin { padding-left: 2.7%; padding-right: 5.3%; }	
	/* see light/dark.css
	.hide1x { display: block; }
	.hide3x { display: block; }
	.hide4x { display: block; }
	.hide2x { display: none; }
	.show1x { display: none; }
	.show3x { display: none; }
	.show4x { display: none; }
	.show2x { display: block; }
	*/
	.third { width: 29%; margin-right: 4%; }
	blockquote[alt="inset"], blockquote[alt="inset-0"] { margin-left: 30px; margin-right: 35px; }
	.contact a { font-size: 18px; } /* NEW */
	.tall .wrapper { height: 720px; }
	.quad .pad { padding-bottom: 70px; }
	.vidwrapper { width: 90px; }
	.vidlink { width: 90px; height: 90px; margin-top: 60px; } /* background-image: url("/admin/graphics/play2.png") */
}
@media (max-width: 739px) { /* IN BETWEEN: extra wide phone, small tablet, 2 box wide */
	body { font-size: 18px; }
	#topbar a { margin-left: 10px; font-size: 18px; }
	#topbar a:first-child { margin-left: 8px; }
	#rightmenu a.notmobile { padding-right: 3px; }
	#submenu .pad { margin-left: 27px; }
	#submenu a { margin-right: 4px; font-size: 13px; }
	#submenu a:first-of-type { margin-right: 4px; }
	h2 { }
	h3 { font-size: 27px; }
	iframe.widescreen, iframe.hd { width: 620px; height:349px; }
	iframe.portrait { width: 620px; height: 465px; }
	a.linkbutton { width: 80%; margin-left: 0% !important; margin-right: 0% !important; padding-left: 10%; padding-right: 10%; font-size: 20px; text-align: center; }
	.hero { height: 380px; }
	.title div { font-size: 32px; }
	.titlelink { font-size: 20px; }
	.tall { width: 300px; }
	.hex { width: 620px; }
	.twocol { width: 620px; }
	.threecol { width: 620px; }
	/* .contact a { font-size: 17px; } */
	.tall .wrapper { height: 620px; }
	.quad .pad { padding-bottom: 70px; }
	.vidwrapper { width: 60px; }
	.vidlink { width: 60px; height: 60px; margin-top: 100px; } /* background-image: url("/admin/graphics/play.png") */
}
@media (max-width: 639px) { /* mobile phone, 1 box wide */
	p { margin-bottom: 1em; word-break: break-word; } /* doesn't work? */
	iframe.widescreen, iframe.hd { width: 100%; height: auto; }
	iframe.portrait { width: 100%; height: auto; }

	form.default ul {margin-left: 15px; }
	form.default .short { width: 180px; } /* used in admin PHP files */
	form.default .medium { width: 180px; } /* used in admin PHP files */
	form.default .long { width: 180px; } /* used in admin PHP files */
	form.default .size6  { width: 180px; margin-bottom: 15px; }

	/* see light/dark.css
	.hide2x { display: block; }
	.hide3x { display: block; }
	.hide4x { display: block; }
	.hide1x { display: none; }
	.show2x { display: none; }
	.show3x { display: none; }
	.show4x { display: none; }
	.show1x { display: block; }
	*/
	.gap { padding-top: 67px !important; margin-top: -67px !important; } /* smooth scroll gap when anchor clicked and linkbox is active */
	.scroll { height: auto !important; }
	.moblink, .scroll.moblink { height: 65px !important; overflow-y: hidden; } /* leaves room for header link only */
	.moblink .pad { padding-top: 15px; }
	.scrollup { display: none; }
	.moblink .scrollup { top: 24px; display: block; } /* shows scrollup icon for mobile link only */
	.named-anchor { display: inline-block; top: -100px; } /* for scrolldown to hidden named anchors in menu */
	
	.univinfo { width: 48%; margin-left: 0; margin-right: 1%; }
	p.univinfo { width: 49%; margin-left: 0; }

	/* .overlink { bottom: auto; top: 35px; } /* recenter because single image is vertically smaller, but full-width  NEW */
	
	.third { width: 100%; float: none; margin-left: auto; margin-right: auto; }
	.twothird { width: 100%; float: none; margin-left: auto; margin-right: auto; }
	.fourth { width: 100%; float: none; margin-left: auto; margin-right: auto; }
	.threefourth { width: 100%; float: none; margin-left: auto; margin-right: auto; }
	.third, .third .item { margin-bottom: 5px !important; text-align: left /*center*/ ; } /* was center for SALT Conf links */
	.half { width: 100%; margin-right: auto; margin-left: auto; }
	.half.mhalf { width: 48%; margin-left: 1%; margin-right: 1%; text-align: center; } /* mhalf keeps two columns in mobile */
			
	#topbar { height: 42px; padding-top: 6px; padding-bottom: 8px; }
	#topbar a { margin: 5px; margin-top: 0px; padding-right: 0px; vertical-align: middle; }
	#topbar #leftmenu a { padding-left: 18px; }
	#leftmenu { display: none; z-index: 999; /* over submenu */ font-size: 18px; position: fixed; top: 0px; left: 0px;  width: 100%; height: auto; margin-left: 0%; margin-right: 0%; }
	#leftmenu a { display: block; margin: 0px; padding-top: 9px; padding-bottom: 12px; }
	#leftmenu a:last-child { padding-bottom: 22px; }
	#leftmenu a span { font-size: 17px; }
	#leftmenu .mobile { display: block; margin-top: 0px; } /* hidden toggle at top */
	#leftmenu .mobile:first-child { margin-top: 9px; }
	#rightmenu { position: absolute; top: 0; right: 0; }
	#rightmenu a { font-size: 14px; font-weight: 400; }
	#rightmenu .mobile { display: block; }
	#mobilemenu { display: block; font-variant: small-caps; width: 100%; }
	#mobilemenu span { display: inline-block; position: absolute; z-index: 10; top: 6px; left: 0; width: 97%; text-align: center; font-size: 22px; }
	#mobilemenu a { position: absolute; top: 9px; left: 8px; z-index: 11; /* positioned above #mobilemenu span */ }
	.homeicon { height: 44px; width: 51px; margin-left: 10px; top:0px; vertical-align: middle; z-index: 99; }
	.homespacer { height: 44px; top:0px; }
	a.current, #leftmenu a span.current { border-bottom: none !important; text-decoration: underline; } /* important overrides @media light/dark */
	a.mobile.current { text-decoration: none; }
	#submenu { width: 100%; white-space: nowrap; overflow: auto; padding-top: 3px; top: 56px; font-size: 20px; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }
	#submenu .mobile { display: block; }
	#submenu .pad { margin-left: 17px; line-height: 1.2em; }
	#submenu ~ .hero { top: 88px; }
	#submenu a { font-weight: 400; font-size: 13px; margin-left: 0px; margin-right: 5px; margin-top: 1px; }
	#submenu a.current { text-decoration: none; }
	#submenu a:first-of-type { height: 20px; margin-bottom: 0px; }
	#submenu a:last-of-type { margin-right: 20px; /* float: right; margin-top: 1px; margin-left: 0px; */ } 
	#submenu span { font-size: 13px; font-weight: 300; }
	#submenu.shortsubmenu { height: 32px; }
	#spacer { height: 56px; }
	#submenu ~ #spacer { height: 82px; /*112*/ } /* add submenu height */
	#submenu ~ #spacer.shortspacer { height: 82px; } /* for logged out submenu on mobile */
	#login-container { position: relative; top: auto; bottom: auto; width: 80%; padding: 10%; padding-top: 0;  }
	#login-content { position: relative; top: auto; left: auto; transform: none !important; /* overrides same above */ }

	blockquote[alt="inset"], blockquote[alt="inset-0"] { margin-right: 2.5%; margin-left: 2.5%; font-size: 20px; }
	blockquote[alt="inset-0"] { font-size: 21px; }
	blockquote[alt="inset-1"] { margin-left: 0; padding-left: 0; }
	blockquote[alt="backset"] { padding: 22px; }
	img[name~="right"] { max-width: 35%; margin-bottom: 0em; } /* right-aligned image stays right, no bottom margin */
	img[name~="rightcenter"], img[name~="rightcenterfull"] { float: none; display: block; margin-left: auto; margin-right: auto; margin-bottom: 0.75em; margin-top: -20px; /* neg top adjusts for paragraph spacing issues on right-center img */ } /* right-aligned image moves to center, no bottom margin */
	img[name~="rightcenterfull"] { width: 100%; }
	img[name~="left"] { max-width: 35%; /* margin-left: auto; margin-right: auto; */ margin-bottom: 0em; } /* left-aligned image remains at left, keeps bottom margin*/
	img[name~="leftcenter"], img[name~="leftcenterfull"] { float: none; display: block; margin-left: auto; margin-right: auto; margin-bottom: 0em; } /* left-aligned image moves to center, no bottom  */
	img[name~="leftcenterfull"] { width: 100%; } /* same as rightcenterfull */
	img[name~="lefthalf"] { max-width: 47%; /* margin-left: auto; */ margin-right: 2%; margin-bottom: 0em; } /* left-aligned image remains at left, half width*/
	img[name~="center"] { width: 100%; padding-right: 0; margin-left: 0%; margin-right: 0%; }
	img[name~="centercenter"] { float: none; display: block; margin-left: auto; margin-right: auto; margin-bottom: 0em; } /* center-aligned image moves to center, but keeps size  */
	img[title*='%'] { width: 100%; margin-left: auto; margin-right: auto; }

	.mobile { display: inline; }
	img[name~="centercenter"].mobile { /* fix issue of higher priority on name */
		display: block;
	}
	.blip.mobile { display: block; }
	.desktop-block { display: none !important; }
	.mobile-block { display: block !important; }
	.mobile-center { text-align: center; }

	p.alt-head { font-size: 24px; }
	
	h1 { font-size: 26px; margin-top: 0.2em; clear: none; }
	h2 { font-size: 44px; }
	/* h2.alt-head { font-size: 20px; } */
	h3 { font-size: 26px; margin-top: 0.2em; clear: none; }
	h4 { font-size: 23px; }
	h4.alt-head { font-size: 22px; }
	h5 { font-size: 20px; }
	h5.alt-head {font-size: 18px; margin-right: 0px; margin-left: 0px; width: 95%; } /* was margin-right 5px */
	h6 { font-size: 14px; }
	#report { margin-top: 10px; padding-left: 15px; padding-right: 15px; }
	.footer h6 { float: none; /* margin-bottom: 10px; */ }
	.hero { top: 56px; height: 306px; background-image: url("/hero-mobile.jpg"), url("/hero-full.jpg"); }
	.subhero { top: 56px; }
	.subhero.submenu-bump { top: 88px; } /* for when submenu is present*/
	.stickyfoot { bottom: 215px; margin-bottom: -30px; }
	.fixfooter { position:relative; bottom: inherit; z-index: 0; }
	.title div { width: 92%; font-size: 28px; top: 26px; margin-left: 4%; margin-right: 4%; }
	.title span { line-height: 1.0em; } /* used because .title div doesn't want to select */
	.contact a { height: auto; padding-top: 15px; padding-bottom: 15px; padding-left: 18px; }
	.linkbox .mobile { display: block; }
	.linkbox { font-size: 15px; top: 91px; white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }  
	.linkbox.nostaff { top: 56px; }
	.linkbox p a { margin-top: 7px; padding-left: 5%; padding-right: 5%; /* margin-right: 0px; padding-left: 2.5%; padding-right: 0%; */ clear: both; } /* single line for links */
	.linkbox p a:first-of-type { padding-left: 19px; }
	.linkbox p a:last-of-type { padding-right: 0; }
	.linkboxmargin { padding-left: 1.3%; padding-right: 5.7%; width: 93%; }	
	button.textbutton { width: auto !important; /* overrides button:not slideup (below) */ }
	.box { width: 100%; /* height: auto; */ } /* change dimensions for all boxes */   /* NEW */
	.single { width: 50% }
	.contact { width: 50% }
	.contactwrap { margin-bottom: -6px; }
	.quad { /* width: 100%; */ }
	.threecol .pad, .twocol .pad, .hero .pad, .quad .pad, .footer .pad { padding: 20px; /* padding-bottom: 40px; */ }
	.threecol { min-height: 0px; }
	.onecol { margin-left: 0px; }
	.fourcol { width: 100%; padding-left: 0%; padding-right: 0%; }

	.indent { margin-left: 12px; margin-right: 12px; }
	.indent-desktop { margin-left: 0px; margin-right: 0px; }
	.indent-mobile { margin-left: 12px; margin-right: 12px; }
	.questiondate { width: 100%; margin-bottom: 5px; }
	.questiondesc { width: 100%; }
	.questiondesc p { margin-bottom: 0.5em; }
	.date { margin-right: 0px; }
	.footer p { margin-left: 0px; line-height: 1.3em; }
	.footer a { display: block; margin-bottom: 12px; }
	.footer a:last-of-type { margin-bottom: 1.4em; } /* leave space at bottom of mobile screen (assumes link) */
	.notmobile { display: none !important; } /* hides desktop menu items */
	.hidephone { display: none; } /* hide additional items from mobile */
	.keepphone { display: block !important; } /* keep designated items on mobile (leave this item at bottom of CSS file!!) */
	.vidwrapper { width: 90px; }
	.vidlink { width: 90px; height: 90px; margin-top: 70px; } /* background-image: url("/admin/graphics/play2.png") */
	#gmap { display: none; }
}
@media (max-width: 520px) { .submenu { height: 68px; } }
@media (max-width: 440px) { /* larger mobile phone portrait */
	.titlelink { font-size: 16px; }
	.contact a { font-size: 15px; }
	.title div { top: 20px; }
	/* .map-responsive iframe { height: 480px; } */
	.staffcontact a { margin-right: 6px !important; }
	button:not([name*=slide]) { width: 100%; margin-left: 0%; margin-right: 0%; margin-top: 15px !important; } /* ignore name=slideUp */
}
@media (max-width: 350px) {  /* smallest mobile phone portrait */ 
	#mobilemenu { font-size: 18px; }
	#topbar a { margin-right: 0px; } /* makes the longer mobile title fit */
	.contact a { font-size: 13px; }	
}

@media (max-width: 280px) {  /* mini mobile phone portrait, Galaxy fold */ 
	.contact a { font-size: 11px; }	
}

@media (max-height: 570px) { /* IPHONE 5 mobile device? landscape, and iPhone 5 portrait */
	.footer { position: relative; bottom: auto; }
	/* .map-responsive iframe { height: 480px; } */
}
@media (max-height: 415px) { /* HERO mobile phone landscape */
	.hero { margin-bottom: -135px; }
}


/* --------------- EXPAND css -------------------------------- */ 

.expandable { }
.expand-title { cursor: pointer; padding: 5px; padding-left: 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #fafafa; font-weight: 400; }
.expand-title:hover { border-color: #ccc; background-color: #f2f2f2; }
.expandable.expanded .expand-title { border-color: #ccc; background-color: #e7e7e7; } /*  */
.lt-trans .expand-title {                      border-color: #888; background-color: #eee; border-width: 2px}
.lt-trans .expand-title:hover {                border-color: #888;  background-color: #ddd; }
.lt-trans .expandable.expanded .expand-title { border-color: #777; background-color: #ddd; }
.md-trans .expand-title { color: white; cursor: pointer; padding: 5px; padding-left: 15px; border: 1px solid #555; border-radius: 5px; background-color: #555; font-weight: 400; }
.md-trans .expand-title:hover { background-color: #404040; }
.md-trans .expandable.expanded .expand-title { border-color: #999; background-color: #333; }

.expand-icon { transition: transform 0.5s; }
.expandable.expanded .expand-icon { transform: rotate(45deg); }

.expand-content { padding: 10px; padding-top: 20px; max-height: 0px;   transition: max-height 0.2s, visibility 0.3s; visibility: hidden; overflow: hidden /* KEEP!! */; }
.expandable.expanded .expand-content {             max-height: 5999px; transition: max-height 1.0s, visibility 1.0s; visibility: visible; overflow: auto /* KEEP!! */; }

@media (prefers-color-scheme: dark) {
/*	.lt-trans .expand-title { color: white; background-color: #606060; border-color: #595959; }
	.lt-trans .expand-title:hover { background-color: #505050; border-color: #595959 }
*/
	.expand-title { color: white; background-color: #333; border-color: #595959; }
	.expand-title:hover { background-color: #3d3d3d; border-color: #595959 }
	.expandable.expanded .expand-title { background-color: #444; border-color: #595959 }
	.lt-trans .expand-title { color: black; }
/*	.md-trans .expand-title { border-color: #555; background-color: #555; }
	.md-trans .expand-title:hover { background-color: #b03030; }
	.md-trans .expandable.expanded .expand-title { background-color: #b22; }
*/
}


/* --------------- MODAL css -------------------------------- */ 

button[name='slideUp'] { padding-top: 4px; padding-bottom: 4px; }
span.slideUp { display: inline-block; width: 25%; margin-bottom: 0px; font-weight: 400; }
span.slideUp:hover span { cursor: pointer; }
span.slideUp button { padding-top: 4px; padding-bottom: 4px; }
span.slideUp:hover button { background-color: black !important; color: white !important; }
@media (prefers-color-scheme: dark) { 
	span.slideUp:hover button { background-color: white !important; color: #222 !important; }	
}
@media (max-width: 639px) { /* mobile phone, 1 box wide */
	span.slideUp { width: 40%; }
	span.slideUp button { width: auto; }
}

/* The Modal (background) */
#modal-menu {
  display: none; /* Hidden by default */
  background-color: rgb(0,0,0,0.6); 
  height: 1000px; 
  z-index: -10; 
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable internal scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80%;
  overflow-y: auto;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}
.modal-content h6:first-of-type { margin-top: -4px; }

.modal-header {
	position: fixed; 
 	margin-top: 0; margin-right: 0; /* don't use top or left which positions relative to the window rather than container */
	width: 100%;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-bottom: 8px;
	background-color: rgb(246,246,246);
	color: #d00;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	-webkit-box-shadow: 0px -10px 23px -5px rgba(0,0,0,0.35); 
	box-shadow: 0px -10px 23px -5px rgba(0,0,0,0.35);
	border-bottom: 1px #ddd solid;
}
.modal-spacer { /* used for question slideIn window which fills all of modal-content (i.e. sits above modal-header) */
	height: 50px;
}
@media (max-width: 639px) { 
	.modal-spacer { height: 44px; }
}
.close { /* for modal */
	display: inline-block;
	color: gray;
	vertical-align: middle;
	margin-left: 2%; 
	margin-right: 3%;
	margin-bottom: 3px;
}

.close:hover, .close:focus {
  text-decoration: none;
  cursor: pointer;
}
.rlink { /* for modal */
	float: right;
	vertical-align: middle;
	margin-right: 2%;
	margin-bottom: 3px;
}
.rlink a{ 
	color: gray; 
	border-bottom: none !important; 
}

.modal-body {
	width: 80%;
	margin-top: 50px; 
	padding-left: 10%; padding-right: 10%;
}
.modal-body > p:first-child > img { 
	max-width: none;
	width: 100%;
}

.modal-footer {
  padding: 2px 16px;
}

/* @media (prefers-color-scheme: light) { */
	.modal-content { background-color: white; }
	.close:hover, .close:focus { color: #222; }
	.rlink a:hover, .rlink a:focus { color: #222; text-decoration: none; }
/* } */
@media (prefers-color-scheme: dark) { 
	.modal-content { background-color: #444; }
	.close:hover, .close:focus { color: #eee; }
	.rlink a:hover, .rlink a:focus { color: #eee; }
	.modal-header { background-color: #333; font-weight: 600; border-bottom: 1px #292929 solid; 
	box-shadow: 0px -10px 23px -5px rgba(0,0,0,0.35);
 }
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@media (max-width: 639px) {
	.modal-header { font-size: 18px; }
	.modal-body { margin-top: 45px; }
}

/* -------------END MODAL css ---------------------------*/


.nomargin { margin: 0; padding: 0; width: 100%; } /* applies to entire box so that .iframe box fills the frame */