/* Illinois Tech global header & footer styling (2025 site style)
   Written for https://itm.iit.edu/zheng/ - used by index2.html */

:root{
	--it-red:#cc0000;
	--it-red-dark:#a30000;
	--it-red-deep:#8f0000;
	--it-black:#000000;
	--it-ink:#1f1f1f;
	--it-gray:#76777b;
	--it-bar:#6d6e72;
	--it-bar-line:#5a5b5f;
	--it-line:#dcdcdc;
	--it-footer-bg:#111111;
	--it-btn-hover:#4d4d4d;
	--it-msg-bg:#4d4d4d;   /* JS replaces this with the real .row.header colour */
	--it-msg-accent:#333333;  /* heading + links inside the messages panel */
	--it-sans:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,"Open Sans",sans-serif;
	--it-slab:"Roboto Slab",Georgia,"Times New Roman",serif;
	--it-wrap:1170px;
}

/* ---------- shared ---------- */
.it-wrap{max-width:var(--it-wrap);margin:0 auto;padding:0 15px;box-sizing:border-box;}
.it-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.it-skip{position:absolute;left:-9999px;top:0;z-index:3000;background:#fff;color:var(--it-red);padding:12px 18px;font:600 14px/1 var(--it-sans);}
.it-skip:focus{left:0;}
.it-header *,.it-footer *{box-sizing:border-box;}
.it-header,.it-footer{font-family:var(--it-sans);-webkit-font-smoothing:antialiased;}
.it-header a:focus-visible,.it-footer a:focus-visible,.it-header button:focus-visible{outline:2px solid var(--it-red);outline-offset:2px;}

.it-ctas{display:flex;align-items:center;gap:8px;}
.it-ctas .it-cta+.it-cta{margin-left:8px;}
@supports (gap:1px){.it-ctas .it-cta+.it-cta{margin-left:0;}}
.it-cta{
	display:inline-block;font:600 13px/1 var(--it-sans);
	padding:9px 16px;border:1px solid var(--it-gray);border-radius:2px;
	color:var(--it-ink);text-decoration:none;white-space:nowrap;background:#fff;
	transition:background-color .15s,color .15s,border-color .15s;
}
.it-cta:hover,.it-cta:focus{background:var(--it-ink);border-color:var(--it-ink);color:#fff;text-decoration:none;}
.it-cta-solid{background:var(--it-red);border-color:var(--it-red);color:#fff;}
.it-cta-solid:hover,.it-cta-solid:focus{background:var(--it-red-dark);border-color:var(--it-red-dark);color:#fff;}
.it-cta-ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff;}
.it-cta-ghost:hover,.it-cta-ghost:focus{background:#fff;color:var(--it-red);border-color:#fff;}

.it-caret{display:inline-block;width:7px;height:7px;margin-left:8px;
	border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
.it-nav-item.it-open .it-caret{transform:translateY(1px) rotate(-135deg);}

/* ---------- header shell ---------- */
.it-header{background:#fff;position:relative;z-index:1000;}

/* gray utility bar */
/* Measured off www.iit.edu: bar = 10px padding + 46px of content = 66px,
   links are 16px/700 with line-height 16px. Spacing comes from the links'
   own horizontal padding (15px a side = 30px between labels), not from gap. */
.it-utility{background:var(--it-bar);padding:10px 0;}
.it-utility-inner{display:flex;align-items:center;justify-content:flex-end;min-height:46px;}
.it-utility-links{display:flex;flex-wrap:wrap;align-items:center;}
.it-utility-links>a,.it-audience-toggle{
	font-family:var(--it-sans);font-size:15px;font-weight:700;line-height:16px;
	color:#ffffff;text-decoration:none;}
.it-utility-links>a{display:inline-block;padding:15px;}
.it-utility-links>*:last-child{padding-right:0;}
.it-utility-links>a:hover,.it-utility-links>a:focus{color:#fff;text-decoration:underline;}
.it-utility .it-audience.it-nav-item{position:relative;display:inline-flex;}
.it-audience-toggle{display:inline-flex;align-items:center;background:none;border:0;padding:15px 18px;cursor:pointer;
	font-family:var(--it-sans);font-size:15px;font-weight:700;line-height:16px;color:#ffffff;}
.it-utility-links>.it-audience:last-child .it-audience-toggle{padding-right:0;}
.it-audience-toggle:hover,.it-audience.it-open .it-audience-toggle{color:#fff;text-decoration:underline;}


/* wordmark + search */
.it-masthead{background:#fff;}
.it-masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:36px;padding-bottom:36px;}
.it-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.it-logo img{height:37px;width:auto;display:block;}
.it-logo .it-logo-text{display:none;}
.it-logo.it-logo-fallback .it-logo-text{display:inline;font:700 30px/1 var(--it-sans);letter-spacing:-.02em;color:var(--it-red);}
.it-footer .it-logo-fallback .it-logo-text{color:#fff;font-size:22px;}

.it-search{display:flex;align-items:stretch;flex:0 1 400px;}
.it-search input[type="search"]{
	flex:1 1 auto;min-width:0;height:42px;padding:0 14px;font:400 15px/1 var(--it-sans);
	border:1px solid var(--it-line);border-right:0;border-radius:2px 0 0 2px;background:#fff;color:var(--it-ink);
	-webkit-appearance:none;appearance:none;
}
.it-search input[type="search"]:focus{outline:none;border-color:var(--it-gray);}
.it-search button{height:42px;padding:0 20px;border:0;border-radius:0 2px 2px 0;cursor:pointer;
	background:var(--it-ink);color:#fff;font:600 13px/1 var(--it-sans);}
.it-search button:hover{background:var(--it-red);}

.it-burger{display:none;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:8px 0;color:var(--it-ink);}
.it-burger-bars{display:inline-block;width:24px;}
.it-burger-bars i{display:block;height:2px;background:var(--it-ink);margin:5px 0;transition:transform .2s,opacity .2s;}
.it-burger-label{font:700 13px/1 var(--it-sans);text-transform:uppercase;letter-spacing:.08em;}
.it-burger[aria-expanded="true"] .it-burger-bars i:nth-child(1){transform:translateY(7px) rotate(45deg);}
.it-burger[aria-expanded="true"] .it-burger-bars i:nth-child(2){opacity:0;}
.it-burger[aria-expanded="true"] .it-burger-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* red main nav bar */
.it-navbar{background:var(--it-red);}
.it-nav{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.it-nav-item{position:static;display:flex;align-items:stretch;margin:0;list-style:none;}
.it-nav-link{
	display:inline-flex;align-items:center;padding:13px 6px 13px 20px;
	font:700 18px/1.75 var(--it-sans);color:#fff;text-decoration:none;
}
.it-nav-item:first-child .it-nav-link{padding-left:0;}
.it-nav-link:hover,.it-nav-link:focus{color:#fff;text-decoration:underline;}
.it-nav-toggle{display:inline-flex;align-items:center;background:none;border:0;cursor:pointer;
	padding:13px 20px 13px 0;color:#fff;}
.it-navbar .it-nav-item.it-open{background:var(--it-red-deep);}
.it-nav-item.it-open .it-nav-link,.it-nav-item.it-open .it-nav-toggle{color:#fff;}

/* dropdown panels */
.it-sub{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
	border-bottom:4px solid var(--it-red);box-shadow:0 14px 26px rgba(0,0,0,.16);}
.it-nav-item.it-open>.it-sub{display:block;}
.it-sub--audience{left:auto;right:0;width:auto;min-width:200px;max-width:340px;border-top:0;border-bottom:4px solid var(--it-red);
	box-shadow:0 12px 24px rgba(0,0,0,.22);}
.it-sub--audience .it-sub-inner{max-width:none;padding:0;}
.it-sub--audience .it-sub-inner ul{display:block;padding:10px 20px 14px;}
.it-sub--audience .it-sub-inner ul>li{width:auto;padding-right:0;}
.it-sub--audience .it-sub-inner a{font-size:15px;padding:8px 0;white-space:nowrap;}
.it-sub-inner ul{display:flex;flex-wrap:wrap;margin:0;padding:26px 15px 30px;list-style:none;}
.it-sub-inner ul>li{width:33.333%;padding-right:40px;list-style:none;}
@supports (display:grid){
	.it-sub-inner ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;}
	.it-sub-inner ul>li{width:auto;padding-right:0;}
	.it-sub--audience .it-sub-inner ul{display:block;}
}
.it-sub-inner a{display:block;padding:9px 0;font:400 16px/1.35 var(--it-sans);color:var(--it-ink);
	text-decoration:none;border-bottom:1px solid #eee;}
.it-sub-inner a:hover,.it-sub-inner a:focus{color:var(--it-red);text-decoration:none;}

/* ---------- personal page header ---------- */
#header-wrapper.it-pagehead{background:#fff;margin-bottom:0!important;border-bottom:1px solid var(--it-line);}
/* Only the container keeps a gutter; every wrapper inside it is flattened, so
   the <h2> and the section nav below it share the same left edge. base.css
   styles these with id-heavy selectors, hence the !important. */
#header-wrapper.it-pagehead .container,
#header-wrapper.it-pagehead .container.clearfix{
	padding-left:15px!important;padding-right:15px!important;margin-left:auto;margin-right:auto;}
#header-wrapper.it-pagehead #header,
#header-wrapper.it-pagehead .iit-page-header,
#header-wrapper.it-pagehead #iit-department-header-branding{
	padding:0!important;margin:0!important;text-indent:0!important;
	border:0!important;background:none!important;float:none!important;}
#header-wrapper.it-pagehead .iit-page-header h2{
	font-family:var(--it-slab)!important;
	font-size:38px!important;
	font-weight:700!important;
	line-height:1.15!important;
	letter-spacing:0!important;
	text-transform:none!important;
	color:var(--it-black)!important;
	margin:34px 0 8px!important;padding:0!important;text-indent:0!important;
	border:0!important;background:none!important;
}
#header-wrapper.it-pagehead .iit-page-header h2 font[color],
#header-wrapper.it-pagehead .iit-page-header h2 span{color:var(--it-red)!important;}

nav.it-localnav{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
	margin:0!important;width:100%!important;min-height:0!important;}
nav.it-localnav .container-fluid{padding:0!important;margin:0!important;width:auto;}
nav.it-localnav .nav{display:flex;flex-wrap:wrap;margin:0;padding:0;float:none;list-style:none;}
nav.it-localnav .nav>li{float:none;list-style:none;}
nav.it-localnav .nav>li>a{
	display:block;padding:14px 18px 12px;font:600 16px/1 var(--it-sans);color:var(--it-ink);
	background:transparent;border-bottom:3px solid transparent;text-decoration:none;
}
nav.it-localnav .nav>li:first-child>a{padding-left:0;}
nav.it-localnav .nav>li>a:hover,nav.it-localnav .nav>li>a:focus{background:transparent;color:var(--it-red);border-bottom-color:#e9b8b8;}
nav.it-localnav .nav>li.active>a,nav.it-localnav .nav>li.active>a:hover,nav.it-localnav .nav>li.active>a:focus{
	background:transparent;color:var(--it-red);border-bottom-color:var(--it-red);
}

#cv #content-wrapper{padding-top:26px;}

/* ---------- footer ---------- */
.it-footer{margin-top:48px;color:#fff;background:var(--it-footer-bg);}
.it-footer a{color:#fff;text-decoration:none;}
.it-footer a:hover,.it-footer a:focus{color:#fff;text-decoration:underline;}

.it-footer-cta{background:var(--it-red);padding:56px 0;text-align:center;}
.it-footer-cta h2{font:700 34px/1.2 var(--it-slab);color:#fff;margin:0 0 14px;padding:0;border:0;text-transform:none;}
.it-footer-cta p{max-width:760px;margin:0 auto 26px;font:400 17px/1.6 var(--it-sans);color:rgba(255,255,255,.95);}
.it-footer-cta .it-ctas{justify-content:center;flex-wrap:wrap;}
.it-footer-cta .it-cta-solid{background:#fff;border-color:#fff;color:var(--it-red);}
.it-footer-cta .it-cta,
.it-footer-cta .it-cta-ghost,
.it-footer-cta .it-cta-solid{transition:background-color .15s,color .15s,border-color .15s;}
.it-footer-cta .it-cta:hover,.it-footer-cta .it-cta:focus,
.it-footer-cta .it-cta-ghost:hover,.it-footer-cta .it-cta-ghost:focus,
.it-footer-cta .it-cta-solid:hover,.it-footer-cta .it-cta-solid:focus{
	background:var(--it-btn-hover);border-color:var(--it-btn-hover);color:#fff;}

.it-footer-main{padding:56px 0 44px;}
.it-footer-grid{display:flex;flex-wrap:wrap;margin:0 auto;}
.it-footer-grid>*{width:20%;padding-right:28px;margin-bottom:28px;}
@supports (display:grid){
	.it-footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px;}
	.it-footer-grid>*{width:auto;padding-right:0;margin-bottom:0;}
}
.it-footer-brand img{width:300px;max-width:100%;height:auto;display:block;}
.it-footer-col h3{font:700 13px/1 var(--it-sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 16px;padding:0;border:0;}
.it-footer-col ul{margin:0;padding:0;list-style:none;}
.it-footer-col li{margin:0 0 10px;list-style:none;}
.it-footer-col a,.it-footer-col p{font:400 15px/1.6 var(--it-sans);color:rgba(255,255,255,.85);}
.it-footer-col p{margin:0 0 10px;}
.it-footer-address strong{color:#fff;font-weight:600;}

.it-footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding:18px 0;}
.it-footer-bottom-inner{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
	font:400 13px/1.5 var(--it-sans);color:rgba(255,255,255,.7);}
.it-footer-bottom a{color:rgba(255,255,255,.9);text-decoration:underline;}

/* ---------- "Messages from Dr. Yong Zheng" panel ---------- */
#messages{background-color:var(--it-msg-bg)!important;color:#fff;padding:12px 16px!important;}
#messages,#messages b,#messages strong,#messages li,#messages p,#messages small{color:#fff;}
#messages font[color]{color:var(--it-msg-accent)!important;}
#messages ul{margin:8px 0 6px;padding-left:22px;}
#messages li{margin-bottom:6px;}
#messages a,#messages a:visited{color:var(--it-msg-accent)!important;text-decoration:underline;}
#messages a:hover,#messages a:focus{color:var(--it-msg-accent)!important;text-decoration:none;}

#backToTop{z-index:1200;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
	.it-nav-link{padding-left:14px;font-size:16px;}
	.it-nav-toggle{padding-right:14px;}
	.it-footer-grid>*{width:33.333%;}
}
@media (max-width:1100px) and (min-width:1px){
	@supports (display:grid){.it-footer-grid{grid-template-columns:1fr 1fr 1fr;}.it-footer-brand{grid-column:1 / -1;}}
}
@media (max-width:900px){
	.it-utility-inner{flex-wrap:wrap;justify-content:flex-end;padding-top:6px;padding-bottom:6px;min-height:0;}
	.it-utility-links{display:none;}
	.it-masthead-inner{flex-wrap:wrap;padding-top:20px;padding-bottom:20px;}
	.it-logo img{height:30px;}
	.it-burger{display:inline-flex;order:2;margin-left:auto;}
	.it-search{order:3;flex:1 1 100%;margin-top:14px;}
	.it-navbar{display:none;}
	.it-navbar.it-navbar-open{display:block;padding-bottom:10px;}
	.it-nav{flex-direction:column;}
	.it-nav-item{display:block;border-bottom:1px solid rgba(255,255,255,.25);position:relative;}
	.it-nav-link{padding:13px 50px 13px 0;width:100%;line-height:1.5;}
	.it-nav-item:first-child .it-nav-link{padding-left:0;}
	.it-nav-toggle{position:absolute;right:0;top:0;height:100%;padding:0 6px 0 18px;}
	.it-navbar .it-nav-item.it-open{background:transparent;}
	.it-sub{position:static;box-shadow:none;border-bottom:0;background:transparent;}
	.it-sub-inner{padding:0;}
	.it-sub-inner ul{display:block;padding:0 0 14px 14px;}
	.it-sub-inner ul>li{width:auto;padding-right:0;}
	.it-sub-inner a{color:#fff;border-bottom-color:rgba(255,255,255,.18);font-size:15px;}
	.it-sub-inner a:hover,.it-sub-inner a:focus{color:#fff;text-decoration:underline;}
	#header-wrapper.it-pagehead .iit-page-header h2{font-size:28px!important;margin-top:24px!important;}
	.it-footer-cta h2{font-size:26px;}
}
@media (max-width:900px){
	@supports (display:grid){.it-sub-inner ul{display:block;}}
}
@media (max-width:640px){
	.it-footer-grid>*{width:100%;}
	.it-utility .it-ctas{justify-content:flex-start;flex-wrap:wrap;}
}
@media (max-width:640px){
	@supports (display:grid){.it-footer-grid{grid-template-columns:1fr;gap:28px;}}
}

/* ---------- print ---------- */
@media print{
	.it-header,.it-footer,.it-skip,nav.it-localnav{display:none!important;}
	.it-pagehead{border:0!important;}
}