@import url('//fonts.googleapis.com/css?family=Open+Sans:400,500,500i,600,700,700i');
 @import url('//fonts.googleapis.com/css?family=Roboto+Mono:500');
/* Tweaked (heavily) by Mike Hanley for SCS Help Pages */
/* Last Modified: October 8, 2019 */
/* Based on campus templates dated 2017-05-25 */
/* Customized Normalization */
 article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
	 display:block 
}
 audio,canvas,video{
	 display:inline-block;
	 *display:inline;
	 *zoom:1 
}
 audio:not([controls]){
	 display:none;
	 height:0 
}
 [hidden]{
	 display:none 
}
 html{
	 font-size:100%;
	 -ms-text-size-adjust:100%;
	 -webkit-text-size-adjust:100% -moz-osx-font-smoothing: grayscale;
}
 html,button,input,select,textarea{
	 font-family:sans-serif 
}
 body{
	 margin:0 
}
 a:focus,a:active,a:hover{
	 outline:0 
}
 h1{
	 font-size:2em;
	 margin:.67em 0 
}
 h2{
	 font-size:1.5em;
	 margin:.83em 0 
}
 h3{
	 font-size:1.17em;
	 margin:1em 0 
}
 h4{
	 font-size:1em;
	 margin:1.33em 0 
}
 h5{
	 font-size:.83em;
	 margin:1.67em 0 
}
 h6{
	 font-size:.67em;
	 margin:2.33em 0 
}
 abbr[title]{
	 border-bottom:1px dotted 
}
 b,strong{
	 font-weight:bold 
}
 blockquote{
	 margin:1em 40px 
}
 dfn,address{
	 font-style:italic 
}
 hr{
	 -moz-box-sizing:content-box;
	 box-sizing:content-box;
	 height:0 
}
 mark{
	 background:#ff0;
	 color:#000 
}
 p,pre{
	 margin:1em 0 
}
 code,kbd,pre,samp{
	 font-family:monospace,serif;
	 _font-family:'courier new',monospace;
	 font-size:.9em 
}
 pre{
	 white-space:pre;
	 white-space:pre-wrap;
	 word-wrap:break-word 
}
 q{
	 quotes:none 
}
 q:before,q:after{
	 content:"";
	 content:none 
}
 small{
	 font-size:80% 
}
 sub,sup{
	 font-size:75%;
	 line-height:0;
	 position:relative;
	 vertical-align:baseline 
}
 sup{
	 top:-0.5em 
}
 sub{
	 bottom:-0.25em 
}
 dl,menu,ol,ul{
	 margin:1em 0 
}
 dd{
	 margin:0 0 0 40px 
}
 menu,ol,ul{
	 padding:0;
	 list-style-position:inside 
}
 nav ul,nav ol{
	 list-style:none;
	 list-style-image:none 
}
 img{
	 border:0;
	 -ms-interpolation-mode:bicubic 
}
 svg:not(:root){
	 overflow:hidden 
}
 figure{
	 margin:0 
}
 form{
	 margin:0 
}
 fieldset{
	 border:1px solid silver;
	 margin:0 2px;
	 padding:.35em .625em .75em 
}
 legend{
	 border:0;
	 padding:0;
	 white-space:normal;
	 *margin-left:-7px 
}
 button,input,select,textarea{
	 font-size:100%;
	 margin:0;
	 vertical-align:baseline;
	 *vertical-align:middle 
}
 button,input{
	 line-height:normal 
}
 button,select{
	 text-transform:none 
}
 button,html input[type="button"],input[type="reset"],input[type="submit"]{
	 -webkit-appearance:button;
	 cursor:pointer;
	 *overflow:visible 
}
 button[disabled],html input[disabled]{
	 cursor:default 
}
 input[type="checkbox"],input[type="radio"]{
	 box-sizing:border-box;
	 padding:0;
	 *height:13px;
	 *width:13px 
}
 input[type="search"]{
	 -webkit-appearance:textfield;
	 -moz-box-sizing:content-box;
	 -webkit-box-sizing:content-box;
	 box-sizing:content-box 
}
 input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
	 -webkit-appearance:none 
}
 button::-moz-focus-inner,input::-moz-focus-inner{
	 border:0;
	 padding:0 
}
 textarea{
	 overflow:auto;
	 vertical-align:top 
}
 table{
	 border-collapse:collapse;
	 border-spacing:0 
}
 html, body {
	 height: 100%;
	 font-family: 'Open Sans', 'Helvetica', sans-serif;
}
 html, button, input, select, textarea {
	 color: #000;
	/* why make #555 the default for everything? */
	 font-family: 'Open Sans', 'Helvetica', sans-serif;
}
/* UNIQUE SCS STUFF */
 .bigvideowrapper {
	 width: calc(40vw + 100px);
	 max-width: 720px;
	 margin-left: auto;
	 margin-right: auto;
	 margin-bottom: 1em;
}
 .bigvideowrapper iframe, .bigvideowrapper img {
	 box-shadow: 0px 2px 6px gray;
	 margin-bottom: .5em;
}
 ol.steps {
	/* reset */
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
	 list-style: none;
	/* actual styles */
	/* margin-top: 3em;
	 */
	 counter-reset: stepcounter;
}
 ol.steps>li {
	/* reset */
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
	 text-indent: 0;
	/* actual styles */
	 margin: 2em;
	 display:table;
	 width:90%;
	 background:#eee;
	 border-radius:5px;
	 font-family: 'Open Sans', sans-serif;
	 font-weight: 600;
	 font-size: 11pt;
	 line-height: 1.5;
	 overflow: hidden;
	 box-shadow: 0px 2px 6px gray;
	 position: relative;
	 min-height: 7em;
}
 ol.steps>li>span {
	 display:table-cell;
	 padding: 1rem;
	 z-index: 1;
	 position: relative;
	 box-sizing: border-box;
	 vertical-align: top;
	 min-height: 5em;
}
ol.steps>li>span:before {
	 content: counter(stepcounter);
	 counter-increment: stepcounter;
	 position: absolute;
	 font-size: 100pt;
	 font-family: arial, sans-serif;
	 font-weight: normal;
	 color: #ddd;
	 z-index: -1;
	 top: -0.13em;
	 left: -0.05em;
	 line-height: 1;
}
ol.steps>li>div {
	 display:table-cell;
	 width:50%;
	 height:auto;
	 position: relative;
	 z-index: 1;
}
ol.steps>li>div>img {
	 width:100%;
	 height:auto;
	 margin-bottom: 1em;
}
ol.steps>li>div>img:last-of-type {
	 width:100%;
	 height:auto;
	 margin-bottom: 0;
}
pre {
    padding: .75em !important;
    font-family: "Roboto Mono","Courier New", monospace;
    font-weight: 500;
    color: #333;
    border: solid 1px #ccc;
    border-radius: .5em;
    background: #f7f7fd;
    margin-left: 1em !important;
    margin-right: 1em !important;
}
	 code, kbd, samp, var {
        font-family: "Roboto Mono","Courier New", monospace;
        font-weight: 500;
        color: darkblue;
        border: solid 1px #88d;
        background: #eef;
        border-radius: .3em;
        padding-left: .3em;
        padding-right: .3em;
	}
	/* fallbacks for if images are put in the wrong places */
	 ol.steps>li>img {
		 display: block;
		 max-width: 100%;
		 margin-left:auto;
		 margin-right:auto;
	}
	 ol.steps>li>span>img {
		 display: block;
		 max-width: 100%;
		 margin-left:auto;
		 margin-right:auto;
	}
	/* Mobile steps layout */
	 @media only screen and (max-width : 900px) {
		 ol.steps>li {
			 width: 90%;
			 margin-left: 0.5em;
		}
		 ol.steps>li>span {
			 display: block;
			 width: 100%;
		}
		 ol.steps>li>div {
			 display: block;
			 width: 100%;
		}
	}
	/* Shrink down all the roof stuff on tinier screens */
	 @media only screen and (max-width: 600px) {
		 .roof .quicklinks>span{
			 display: none 
		}
	}
	 @media only screen and (max-width: 450px) {
		 .roof a.wordmark {
			 width: 0px !important;
			 opacity: 0;
		}
	}
	/********* Feedback Form Box *********/
	 .grid.column2.red.nav, feedback-section {
		/* convoluted selector for our "optional footer" */
		 box-shadow: 0px -2px 10px rgba(0,0,0,0.5);
		 position: relative;
		 overflow: hidden;
		 clear: both;
	}
	 .grid.column2.red.nav > div {
		 position: relative;
		 z-index: 1;
		 overflow: visible;
	}
	 .grid.column2.red.nav > div:first-child:after {
		 content: "?";
		 color: rgb(130, 0, 0);
		 font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
		 font-size: 250px;
		 position: absolute;
		 top: 50px;
		 left: 0;
		 z-index: -1;
	}
	 .feedback-instructions {
		 height: 1em;
		 overflow: visible;
	}
	 .feedback-instructions h2 {
		 margin-bottom: 1em;
	}
	 #feedback-form {
		 max-height: 0;
		 opacity: 0;
		 transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
		 display: block;
		 margin-bottom: 0;
	}
	 .feedback-button {
		 display: block;
		 color: white;
		 padding: .5em;
		 border: solid 2px white;
	}
	 .feedback-button:hover {
		 background: #FFF;
		 color: #900;
	}
	 .feedback-section input[type=checkbox]:checked ~ #feedback-form {
		 max-height: 300px;
		 opacity: 1;
	}
	 .feedback-button::before {
		/* the triangle */
		 content: ' ';
		 display: inline-block;
		 border-top: 5px solid transparent;
		 border-bottom: 5px solid transparent;
		 border-left: 5px solid currentColor;
		 vertical-align: middle;
		 margin-right: .7rem;
		 margin-left: 1rem;
		 transform: translateY(-2px);
		 transition: transform .2s ease-out;
	}
	 input[type=checkbox]:checked + .feedback-button{
		 border: solid 2px transparent;
	}
	 input[type=checkbox]:checked + .feedback-button:hover{
		 color: #FFF;
		 text-decoration: underline;
		 background: none;
	}
	 input[type=checkbox]:checked + .feedback-button::before {
		 transform: rotate(90deg) translateX(-3px);
	}
	 @media only screen and (max-width: 767px) {
		 .feedback-instructions p {
			 opacity: 0;
		}
	}
	/********* REST OF NORMAL STYLES (albeit heavily modified) *********/
	 body {
		 background-color:#FFF;
		/* #333 for header match */
		 font-size: 15px;
		/* was 1em. 1em of WHAT? */
		 font-weight:500;
		 line-height: 1.35em;
		 margin: 0 auto;
		 max-width: 2580px;
		/* cap the width just above our largest popular resolution */
		 position: relative;
		 word-wrap: break-word;
	}
	 #container {
		 background-color:#FFF;
	}
	 fieldset {
		 border: 0;
		 margin: 0;
		 padding: 0;
	}
	 .chromeframe {
		 margin: 0.2em 0;
		 background: #ccc;
		 color: #000;
		 padding: 0.2em 0;
	}
	p, pre {
		 margin: 0;
		 padding: .5em 0;
	}
	ul {
		 list-style-type: disc ;
		 margin: 1em 2em;
	}
	ol {
		 margin: 1em 2em;
	}
	ul ul, ol ol, ul ol, ol ul {
		 margin-top: .35em;
		 margin-bottom: 0;
	}
	li {
		 margin: 0;
		 margin-left: 1em;
		 text-indent: -1em;
		 padding: .35em 0;
		 line-height: 1.65em;
	}
	/*li li {
		 margin-left: 2em;
	}*/
	li>p+p {text-indent:0}
	img {
		 max-width:100%;
		 vertical-align: middle;
		 height: auto;
	}
	#content a:focus img {
		 outline:1px dotted 
	}
	b, strong {
		 letter-spacing: .025em;
		 ;
		 font-weight:700;
	}
	mark {
		 color: inherit;
		 padding: .25em;
	}
	.invert mark {
		 background-color: yellow;
		 color:#555;
	}
	hr {
		 clear:both;
		 display: block;
		 height: 1px;
		 border: 0;
		 border-top: 1px solid rgba(0,0,0,.2);
		 margin: 1em 0;
		 padding: 0;
		 max-width: 100% !important;
	}
	 .invert hr {
		 border-color: rgba(255,255,255,.5) 
	}
	/*table, table.fancy {
		 border: 0;
		 clear:both;
		 display:block;
		 max-width: 100%;
		 margin: 1em 0;
		 text-align:left;
		 overflow: auto;
	}
	 */
	/* SCS TABLE STYLES */
	 table, table.fancy {
		 border-collapse: collapse;
		/* margin: auto;
		 */
		 margin-top 2em;
		 border: none;
		 border-top: solid 2px #333;
		 border-bottom: solid 2px #555;
		 box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	}
	 thead {
		 background-color: #333 !important;
		 -moz-osx-font-smoothing: grayscale;
	}
	 table tr:nth-child(even) {
		 background-color: #F7F7F7 
	}
	 table tr:nth-child(odd) {
		 background-color: #FFF 
	}
	 thead tr {
		 background-color: #333 !important;
		 color: white;
		 padding-top: .5em;
		 padding-bottom: .5em;
		 font-weight: bold;
		 position: -webkit-sticky;
		 position: -moz-sticky;
		 position: -o-sticky;
		 position: -ms-sticky;
		 position: sticky;
		 top: 53px;
		 z-index: 10;
	}
	 table.alt tr:nth-child(even), tr.alternateRow {
		 background-color: rgba(0,0,0,.1);
	}
	 table.plain {
		 border: 0;
	}
	 table.plain tr {
		 background-color: none !important;
	}
	 th, td {
		/* border: 1px solid #bbb;
		 */
		 border: none;
		 padding: .5em .65em;
		 vertical-align: top;
	}
	 td {
		 min-width:1em;
		 min-height:1em;
	}
	 nav ul, nav ul ul {
		 list-style: none;
		 padding: 0;
		 margin: 0;
	}
	 iframe {
		 border: none 
	}
	/* ========== Typography! ============ */
	 h1, h2, h3, h4, h5, h6 {
		 clear: both;
		 font-size: 1em;
		 font-weight: 700;
		 line-height: 1.35em;
		 margin: 0;
		 padding: 1em 0 .65em;
		 word-wrap: normal;
		/* prevent weird breaks on huge text */
	}
	 h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
		 font-weight:inherit;
		 letter-spacing:inherit;
	}
	 h1 {
		 font-size: 2.15em;
		 font-weight: 700;
		/*300*/
		 color: rgb(153,0,0);
	}
	 .content .sidebar div h1 {
		 font-size: 1.5em;
		/* was 1.8 */
		/* color: #555;
		 */
		/* See, this is less important. This can be less prominent. */
		 font-weight: 500;
	}
	 h2 {
		 font-size: 1.6em;
		 font-weight: 500;
		 color: rgb(153,0,0);
	}
	/* h1 b, b h1, h1 strong, strong h1, h2 b, b h2, h2 strong, strong h2 {
		 font-weight:300 
	}
	 */
	 h3 {
		 text-transform: none;
		 letter-spacing: 0;
		 font-weight: 700;
		 font-size: 1.15em;
		 line-height: 1.5em;
	}
	 h4 {
		/* .cta style */
		 font-size: 1em;
		 letter-spacing: .025em;
		 padding-bottom: 0;
		 text-transform: uppercase;
		 line-height: 1.5em;
	}
	 h1+h2 {
		 clear: none;
		 padding-top: 0;
	}
	 h2+h3 {
		 clear: none;
		 padding: 0 0 .65em;
		 margin-top: -.65em;
	}
	 h2+h3+p {
		 padding-top: 1em 
	}
	 p, .rule-bottom + p, pre, address {
		 line-height: 1.65em;
		 padding:1em 0;
	}
	 .content > :last-child, p:last-child, address:last-child, pre:last-child, h1:last-child, h2:last-child {
		 padding-bottom:0;
	}
	 .float-right {
		 float: right;
		 margin-left: 2em;
		 margin-right: 0;
		 margin-bottom: 2em;
		 padding-top: 1em;
		 max-width: 45%;
		 box-sizing: border-box;
		 clear: both;
	}
	 .float-left {
		 float: left;
		 margin-right: 2em;
		 margin-left: 0;
		 margin-bottom: 2em;
		 padding-top: 1em;
		 max-width: 45%;
		 clear: both;
	}
	 .centered {
		 display: block;
		 margin-left: auto;
		 margin-right: auto;
		 max-width: 90%;
		 clear: both;
	}
	/* BLOCKQUOTES and NOTES */
	 blockquote, .blockquote {
		 padding-left: .5em;
		 margin-left: .5em;
		 position: relative;
		 font-size: 1.15em;
		 font-style: oblique;
		 color: #333;
		 border-left: solid #333 40px;
		 min-height: 32px;
	}
	 blockquote:before, .blockquote:before {
		 content:open-quote;
		 font-family: "Times New Roman", Times, serif;
		 font-size: 65pt;
		 color: white;
		 position: absolute;
		 left: -52px;
		 top: 25px;
		 z-index: 1;
		 text-indent: 0;
	}
	 blockquote:after, .blockquote:after {
		/* This is a stupid hack to override "smart" quotes... */
		 content:close-quote;
		 color: rgba(255,255,255,0);
	}
	 .invert blockquote, .invert .blockquote {
		 color: white;
		 border-left: solid rgba(255,255,255,0) 40px;
	}
	 table:last-child, blockquote:last-child, .blockquote:last-child {
		 margin-bottom:0;
	}
	 h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, h1 + p, h2 + p, h3 + p, address:first-child, h1 + address, h2 + address, h3 + address, pre:first-child, h1 + pre, h2 + pre, h3 + pre, img.floatleft ~ h1, img.floatleft ~ h2, img.floatleft ~ h3, img.floatleft ~ h4, img.floatleft ~ h5, img.floatleft ~ h6, img.floatleft ~ p, h1 + .floatleft + p, h1 + .floatright + p, h2 + .floatleft + p, h2 + .floatright + p, h3 + .floatleft + p, h3 + .floatright + p {
		 padding-top: 0;
	}
	 h1 + ul, h2 + ul, h3 + ul, h1 + ol, h2 + ol, h3 + ol {
		 margin-top: 0;
	}
	 small, div:not(.hero) .small {
		 font-size:90%;
		 letter-spacing:.025em;
		 line-height: 1em;
	}
    .note {
	     clear: both;
	     color: #000;
		 background: rgb(255, 255, 224);
		 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
		 padding-top: 1em !important;
		 padding-bottom: 1em !important;
		 margin-left: 2em;
		 margin-right: 2em;
		 padding-left: 3em;
		 padding-right: 1em;
		 position: relative;
		 margin-bottom: 1.5em;
		 text-indent: 0;
		 overflow: auto;
	}
	.note:before {
		 position: absolute;
		 content: "i";
		 left:.3em;
		 font-size: 32pt;
		 font-family: "Roboto Mono", monospace;
		 color: rgb(220,220,172);
	}
	/* ======================================================================= Page Width (optimized for Macbooks & standard desktop screen resolutions) ========================================================================== */
	 .roof, header > div, header nav, .hero > .text, .hero .caption, .grid, .content {
		/*GUTTER*/
		 padding: 2em 9%;
		 width: auto;
	}
	 .breadcrumbs {
		 padding: 0;
		 padding-left: 9%;
		 margin-top: -1em;
		 width: auto;
	}
	 .menu-on .roof, .menu-on header > div, .menu-on header nav, .menu-on .hero > .text, .menu-on .hero .caption, .menu-on .grid, .menu-on .breadcrumbs, .menu-on .content {
		/* GUTTER */
		 padding-left: 2%;
		 padding-right: 2%;
	}
	 .menu-on .homeside-bottom {
		 right: 2%;
	}
	/* ============================== Header & Roof (wordmark, search, header nav) =============================== */
	 #container > header.float {
		 background-color: rgba(255,255,255,.9);
		 position: absolute;
		 top: 0;
		 width: 100%;
		 z-index: 10;
	}
	 header {
		/*border-bottom: solid 8px #900;
		 */
		 padding-bottom: 8px;
		 background: rgb(153,0,0);
		 background-image: url("../site-images/headerbgphoto.jpg");
		/* linear-gradient(to right, rgb(153,0,0) 5%, rgb(53,53,53) 95%);
		 */
		 background-repeat: no-repeat;
		 background-position: right center;
		 background-size: 50vw;
		/* dragon had been pos 25px -23px and size 20vw */
		 box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
		 -webkit-font-smoothing: antialiased;
		 -moz-font-smoothing: grayscale;
		 -moz-osx-font-smoothing: grayscale;
	}
	 .homepage header {
		 background-image: url("../site-images/dragon-watermark.png"), url("../site-images/headerbgphoto.jpg");
		/* linear-gradient(to right, rgb(153,0,0) 5%, rgb(53,53,53) 95%);
		 */
		 background-repeat: no-repeat, no-repeat;
		 background-position: 50px 10px, right center;
		 background-size: 30vw, 66vw;
		 position: relative;
	}
	/*** Active Alerts (main) ***/
	/* alert animation... */
	 @-webkit-keyframes slideIn {
		 from {
			 opacity:0;
			 left:300px;
		}
		 to {
			 opacity:1;
			 left: 0px;
		}
	}
	 @-moz-keyframes slideIn {
		 from {
			 opacity:0;
			 left:300px;
		}
		 to {
			 opacity:1;
			 left: 0px;
		}
	}
	 @keyframes slideIn {
		 from {
			 opacity:0;
			 left:300px;
		}
		 to {
			 opacity:1;
			 left: 0px;
		}
	}
	 .alerts {
		 display: block;
		 padding: 0;
		 padding-top: 1em;
		 margin-right: 9%;
		/*GUTTER*/
		 width: 41%;
		/* 100-50-9 */
		 min-height:150px;
		 margin-bottom: -6em;
		 position: relative;
		 left: 50%;
		 box-sizing: content-box;
	}
	/* .alerts:after {
		 content: "PLACEHOLDERS";
		 display: block;
		 position: absolute;
		 color: rgba(100,100,255,0.5);
		 font-weight: 700;
		 font-size: 32pt;
		 top: 60px;
		 right: 50px;
		 transform: rotate(-15deg);
	}
	 */
	 .menu-on .alerts {
		 margin-right: 2%;
		/*GUTTER*/
		 left: 57%;
		/*50+9-2*/
		 padding-left: 0;
		 padding-right: 0;
	}
	 .scscf-alert {
		 background: rgba(0,0,0,.66) 
	}
	 .cmu-alert {
		 background: rgba(53,53,53,.8) 
	}
	 .alerts div[class$='alert'] {
		 background-image: url("../site-images/warning.png");
		 background-repeat: no-repeat;
		 background-size: 40px 40px;
		 background-position: 7px center;
		 padding: .6em;
		 padding-left: 55px;
		 margin-bottom: 1em;
		 box-sizing: border-box;
		 width: 100%;
		 max-width: 550px;
		 margin-left: auto;
		 line-height: 1 !important;
		 position: relative;
		 box-shadow: 0 0 16px rgba(0,0,0,0.2);
		 opacity:0;
		/* make things invisible upon start */
		 -webkit-animation:sideIn ease-in 1;
		/* call the slideIn keyframe, use ease-in, repeat once */
		 -moz-animation:slideIn ease-in 1;
		 animation:slideIn ease-in 1;
		 -webkit-animation-fill-mode:forwards;
		/* stay at last keyframe when animation finishes */
		 -moz-animation-fill-mode:forwards;
		 animation-fill-mode:forwards;
		 -webkit-animation-duration:0.5s;
		 -moz-animation-duration:0.5s;
		 animation-duration:0.5s;
		 -webkit-animation-delay: 0.2s;
		 -moz-animation-delay: 0.2s;
		 animation-delay: 0.2s;
	}
	 .calendar-alert {
		 background-color: rgba(0,0,0,.66);
		 background-image: url("../site-images/calendar.png") !important;
		 background-repeat: no-repeat;
		 background-size: 40px 40px;
		 background-position: 7px center;
	}
	 .alerts div[class$='alert'] h2 {
		 color: rgb(240,254,8);
		 font-size: 14px;
		 font-weight: 700;
		 line-height: 1;
	}
	 .alerts div[class$='alert'] h2 a {
		 color: rgb(240,254,8);
		 text-decoration: underline;
	}
	 .calendar-alert h2 a {
		 color: #E33 !important;
		 text-decoration: underline;
	}
	 .alerts div[class$='alert'] p {
		 color: lightgray;
		 margin-top: -2px;
		 padding-bottom: 0;
		 line-height: 1;
		 font-size: 14px;
		 margin-right: 4em;
	}
	 .all-alerts {
		 display: block;
		 font-size: 12px;
		 line-height: 1.2;
		 color: rgb(102,102, 102) !important;
		/*text-decoration: underline;
		 */
		 position: absolute;
		 right: .5em;
		 text-transform: uppercase;
		 font-weight: 500;
		 bottom: .5em;
		 cursor: pointer;
		/* not sure where this got overidden... */
	}
	 .all-alerts:hover {
		 color: #c00 !important;
	}
	 .roof {
		 border-bottom: 1px solid rgba(0,0,0,.2);
		 font-size: 90%;
		 line-height: 0;
		 padding-top: 0;
		 padding-bottom: 0;
		 z-index: 10000;
		/* for mobile nav */
		/* We're just gonna go ahead and set this explicitly, instead of letting the University CMS "generate" it for us... */
		 height: 57px;
		 background: rgb(51,51,51) !important;
		 position: -webkit-sticky;
		 position: sticky;
		/* For Walt */
		 top: 0;
		 box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
		 overflow: hidden;
		/* 7-31-18 */
	}
	 .search > label:not(.searchSite) > span {
		 display: none !important;
		/* the search label outside the box */
	}
	 .roof > div {
		/* border-bottom: 1px solid rgba(0,0,0,.2);
		 */
		 position: relative;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: nowrap row;
		 -ms-flex-flow: nowrap row;
		 -webkit-flex-flow: nowrap row;
		 flex-flow: nowrap row;
		 -moz--moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
		 -moz-justify-content: flex-start;
		 -ms-justify-content: flex-start;
		 -webkit-justify-content: flex-start;
		 justify-content: flex-start;
	}
	 .float .roof > div {
		 border-bottom: 1px solid rgba(0,0,0,.2);
	}
	 .roof.invert, .float .roof, .float .roof.invert > div {
		 border-bottom: 0 none;
	}
	 .roof.invert a, .roof a, .roof a:focus, .roof a:hover, #container > header a, #container > header a:focus, #container > header a:hover {
		 border-bottom-color: transparent;
	}
	 .roof a.wordmark, .roof form {
		 display: inline-block;
		 width: 25%;
		 -webkit-box-flex: 0 1 auto;
		 -moz-box-flex: 0 1 auto;
		 -webkit-flex: 0 1 auto;
		 -ms-flex: 0 1 auto;
		 flex: 0 1 auto;
	}
	/* Wordmark Image for all browsers except IE */
	 body:not(.ie) .roof a.wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	 body:not(.ie) .roof.invert .wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	/* IE doesn't scale images well =( */
	/* Doesn't seem critical to our usage - used to be ../site-images/cmu/cmu-wordmark-small.png */
	 body.ie .roof a.wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	 body.ie .roof.invert .wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	 .roof a.wordmark {
		 border-bottom: none 0;
		 min-height: 3em;
		 margin: 1em 0 .65em;
		 text-indent: -9999px;
		 width: 31.333%;
		 min-width: 300px;
	}
	 .roof.invert .wordmark {
		 margin: 6px 0 2px;
		 width:25%;
	}
	/* http://webaim.org/techniques/css/invisiblecontent/ */
	 #skipnav {
		 position:absolute;
		 left:-10000px;
		 top:auto;
		 width:1px;
		 height:1px;
		 overflow:hidden;
	}
	 .roof form {
		 position: relative;
		 left: -1.5em;
		/*was 2*/
		 top: 0;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: nowrap row;
		 -ms-flex-flow: nowrap row;
		 -webkit-flex-flow: nowrap row;
		 flex-flow: nowrap row;
		 -moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
		 -moz-justify-content: flex-start;
		 -ms-justify-content: flex-start;
		 -webkit-justify-content: flex-start;
		 justify-content: flex-start;
		 height: calc(100% - 1.6em);
		 padding: .8em 0;
		 max-width: 300px;
	}
	 .roof.invert form {
		 height: 100%;
		 padding: 0;
	}
	 .roof .menu-btn + form {
		 right: 3em 
	}
	 .search label {
		 height: 100%;
		/* for Safari */
		 width: 100%;
	}
	 .roof input[placeholder="Search"] {
		 background-color: #404040;
		 border: 1px solid rgb(128,128,128);
		 color: #fff;
		 height: 25px;
		 margin-top: 10px;
		 padding: 4px;
		 width: calc(100% - 38px);
		 -webkit-box-flex: 0 1 auto;
		 -moz-box-flex: 0 1 auto;
		 -webkit-flex: 0 1 auto;
		 -ms-flex: 0 1 auto;
		 flex: 0 1 auto;
		 box-shadow: 0 2px 4px #000;
	}
	 .roof input[placeholder="Search"]:focus {
		 outline: 0 none;
		 background-color: rgba(0,0,0,.5);
	}
	/* override webkit autocomplete ugly pastel yellow background color */
	 .roof input[placeholder="Search"]:-webkit-autofill {
		 -webkit-box-shadow: 0 0 0px 1000px #999 inset;
		 box-shadow: 0 0 0px 1000px #999 inset;
	}
	 .roof input::-webkit-input-placeholder {
		 color:#fff 
	}
	 .roof input:-moz-placeholder {
		 color:#fff;
		 opacity: 1 
	}
	 .roof input::-moz-placeholder {
		 color:#fff;
		 opacity: 1 
	}
	 .roof input:-ms-input-placeholder {
		 color:#fff 
	}
	 .search button {
		 background: url(../site-images/cmu/icon-magnify.png) scroll no-repeat transparent 50% 50%;
		 background-size: 50%;
		 height: calc(100% - 1.6em);
		 margin: .8em 0;
		 padding: 0 14px;
		 text-indent: -9999px;
		 width: auto;
		 display: none !important;
		/* not needed. was block*/
		 position: absolute;
		 right: 0;
		 top: 0;
		 border: 0 none;
		 background: green;
	}
	 .roof.invert .search button {
		 height: 100%;
		 margin: 0;
	}
	 .search button:focus, .search button:hover {
		 border: 0 none;
		 outline: 0 none;
	}
	/* hide hover state because clicking the menu button makes it focus. */
	 .search button:hover {
		 background-color: inherit 
	}
	 body:not(.mobile) #sitename {
		 display: block !important 
	}
	 #sitename div, #sitename a {
		 display: inline-block;
		 vertical-align: middle;
	}
	 #sitename, #sitename a {
		 box-sizing: border-box;
		 color: white;
		/* rgb(153,0,0);
		 */
		/* #222;
		 */
		/*font-size: 36px;
		 line-height: 36px;
		 */
		/* text-shadow: 1px 1px 9px rgb(255,255,255);
		 */
		 font-weight: 400;
		/* 200 */
		/*600*/
		 border: 0;
		 padding-top: 0;
		 padding-bottom: 0;
	}
	 #sitename {
		 padding-top: .5em;
		 padding-bottom: .5em;
		 text-shadow: 0 0 1px black;
	}
	 #sitename a:focus, #sitename a:hover {
		 color: #fff;
	}
	 #sitename > div {
		 padding-right: 2%;
		 width:66.666%;
	}
	 #sitename > a {
		 padding: .5em 0 0 0;
		 max-width: 31.333%;
		 width: 100%;
		 text-align: right;
	}
	 #sitename img {
		 max-height: 150px 
	}
	/* Should match #content .hero > div.text h1 & h2 */
	 #sitename h1, #sitename h2 {
		 font-size: 3.15em;
		 padding:.15em 0;
		 clear: none;
		 line-height: 1.25em;
	}
	 #sitename h2 {
		 font-size: 1.65em;
		 padding-top:0;
	}
	 nav h1 {
		 font-size: 1.65em;
		 padding: 0;
	}
	/* Quick Links in Roof */
	 .roof .quicklinks {
		 display: block;
		 position: absolute;
		 top: 2em;
		 right: 4em;
		 font-size: 14px;
		 color: rgb(204, 204, 204) 
	}
	 .roof .quicklinks a {
		 color: white;
		 padding: .5em;
		 border-left: solid 1px #555;
	}
	 .roof .helpbutton {
		 border-radius: 1em;
		 color: #FFF;
		 padding: .2em !important;
		 padding-left: .4em !important;
		 padding-right: .4em !important;
		 border-left: none !important;
		 margin-left: .5em;
		 text-decoration: none;
		 background: #900;
		 background: linear-gradient(#C23, #900);
		 border-bottom: none;
	}
	 .roof .quicklinks a:first-of-type {
		 border-left: none 
	}
	 .roof .quicklinks a:hover {
		 text-decoration: underline 
	}
	 .menu-on .roof .quicklinks {
		 right: -0.5em 
	}
	/* move over because menu button has moved into the menu */
	/* ======================= Primary, Header Navigation (The Horizontal Navigation thing) =========================== */
	 header nav {
		 clear: both;
		 padding-top: 0;
		 padding-bottom: 0;
		 overflow: visible;
		 background: rgba(153,0,0,.5);
		 z-index: 100;
		 width: 100%;
		 margin-left: 0;
		 box-sizing: border-box;
		 box-shadow: 0 0 32px rgba(0,0,0,0.2);
	}
	 #sitename + nav {
		 padding-top: 0 
	}
	 header .ancestor, header .active {
		 border-bottom-color:transparent;
	}
	/* for sites w/o a sitename */
	 .roof + nav ul li a {
		 padding-top: 0;
	}
	 #greatest-hits, #greatest-hits li {
		 list-style: none;
		 margin: 0;
		 padding: 0;
		 display: block;
		 text-indent: 0 !important;
	}
	 #greatest-hits li.menuparent label {
		 display: block;
		 box-sizing: border-box;
		/*background: #d00;
		 */
		 border-top: solid 1px rgba(100,0,0,.5);
		 width: 100%;
		 height: 3em;
		 line-height: 3em;
		 color: #FFF;
		 font-weight: 600;
		 cursor: pointer;
	}
	 #greatest-hits a {
		 color: #FFF !important;
	}
	 #greatest-hits ul.menuchild {
		 display:block;
		 box-sizing: border-box;
		 width: 100%;
		 max-height: 0px;
		 overflow: hidden;
		 transition: max-height .25s ease-in-out;
		 background: rgb(135,0,0);
		 box-shadow: inset 1px 6px 10px -6px rgba(0,0,0,.5), inset 0px -3px 10px -8px rgba(0,0,0,.5);
		 padding-left: 3em;
		 z-index: 100;
		 position: relative;
		 font-weight: 600;
	}
	 ul.menuchild li {
		 line-height: 3em !important;
	}
	 ul.menuchild li:hover {
		 text-decoration: underline;
	}
	 #greatest-hits .menuparent>a {
		 display: none;
	}
	 #greatest-hits input[type=checkbox]:checked ~ .menuchild {
		 max-height: 400px;
	}
	 #greatest-hits .topnav-open::before {
		/* the triangle */
		 content: ' ';
		 display: inline-block;
		 border-top: 5px solid transparent;
		 border-bottom: 5px solid transparent;
		 border-left: 5px solid currentColor;
		 vertical-align: middle;
		 margin-right: .7rem;
		 margin-left: 1rem;
		 transform: translateY(-2px);
		 transition: transform .2s ease-out;
	}
	 #greatest-hits input[type=checkbox]:checked + .topnav-open::before {
		 transform: rotate(90deg) translateX(-3px);
	}
	 @media only screen and (min-width: 768px) {
		 #greatest-hits {
			 height: 3em;
		}
		 #greatest-hits li.menuparent label {
			 display: none;
		}
		 #greatest-hits input[type=checkbox] {
			 display: none;
		}
		 #greatest-hits input[type=checkbox]:checked ~ .menuchild {
			 max-height: 0px;
		}
		 #greatest-hits .menuparent {
			 float: left;
			 position: relative;
			 box-sizing: border-box;
			 width: 20%;
			 height: 3em;
			 line-height: 3em;
			 font-weight: 700;
			 text-align: center;
		}
		 #greatest-hits .menuparent a {
			 display: block;
		}
		 #greatest-hits ul.menuchild {
			 box-shadow: 0px -3px 10px -8px rgba(0,0,0,.5);
			 padding-left: 0;
			 box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
			 transition: max-height .25s ease-in-out;
			 background: rgb(153,0,0);
		}
		 #greatest-hits .menuparent:hover .menuchild {
			 position: absolute;
			 max-height: 800px !important;
		}
		 #greatest-hits .menuchild li:first-of-type {
			 display: none;
		}
	}
	 @media only screen and (max-width: 767px) {
		 header nav {
			 padding: 0 !important;
		}
	}
	/* ====================================== Side Navigation ========================================= */
	 .menu-btn {
		 color: #555;
		 display: block;
		 font-size: 2.5em;
		 line-height: .85em;
		 float: right;
		 right: 0;
		 top: 0;
		 margin-top: 13px;
		 display: block;
		 position: absolute;
		 z-index: 102;
		/* transition: right linear 0.2s;
		 stop making me dizzy! */
	}
	 div.invert .menu-btn {
		 margin-top:12px 
	}
	/* the inverted roof's menu-btn */
	 .menu-on .menu-btn {
		/* the "X" */
		 color: #ddd;
		 right: 11px;
		 margin-top: 13px !important;
		/* OVERRULED so it's always is the same place when opened, even with the changed mobile roof layout. */
		 position: fixed;
		 font-size: 2em;
	}
	 nav.tree form, 
	/* the mobile menu search box */
	 nav.tree .menu-btn {
		/* the mobile "X" */
		/* display: none;
		 keep this */
	}
	 .menu-btn:visited, .menu-btn:focus, .menu-btn:hover {
		 color: inherit;
	}
	 .menu-on .menu-btn:focus, .menu-on .menu-btn:hover {
		 color: #fff;
	}
	 .menu-on .roof form {
		 display: none;
		/* hide this when menu open */
		 right: 0;
	}
	 .menu-btn b {
		 display: block;
		 font-weight: normal;
		 line-height: 7px;
	}
	 .invert .menu-btn, .invert .menu-btn:focus, .invert .menu-btn:hover {
		 color:#fff !important;
		 text-shadow: none !important;
	}
	 #container {
		 position: relative;
		/* transition: width 0.3s ease;
		 stop making me dizzy! */
		 width: 100%;
		 z-index: 100;
	}
	 #overlay {
		 position: fixed;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100vh;
		 background-color: transparent;
		 z-index: 99;
		 transition: background-color ease 0.3s;
	}
	 .menu-on #container {
		 width: calc(100% - 300px);
		 z-index: 101;
	}
	 .menu-on footer {
		 border-right:1px solid rgba(255,255,255,.15) 
	}
	/* This controls the Navigation Side Bar */
	 nav.tree {
		 position: fixed;
		 top: 0;
		 z-index: 101;
		/* I'm on top of the world! */
		 right: -300px;
		 width: 300px;
		 height: 100vh;
		 background-color: rgb(51,51,51) !important;
		 overflow: hidden;
		 box-sizing: border-box;
		 opacity: 0;
		 padding-top: 3.25em;
		/* transition: right 0.2s ease;
		 stop making me dizzy! */
		/* for touch */
		 box-shadow: -2px 0px 15px rgba(0,0,0,0.4);
	}
	/* Added this search box... */
	 nav input {
		 background: #404040;
		 border: 1px solid rgb(128,128,128);
		 color: #fff;
		 height: 25px;
		 margin: 0px !important;
		 margin-top: 5px !important;
		 margin-left: 1em !important;
		 margin-right: 5em !important;
		 padding: 4px;
		 width: calc(75%);
		 -webkit-box-flex: 0 1 auto;
		 -moz-box-flex: 0 1 auto;
		 -webkit-flex: 0 1 auto;
		 -ms-flex: 0 1 auto;
		 flex: 0 1 auto;
		 box-shadow: 0 2px 4px #000;
		 font-size: .8em !important;
		 position: absolute;
		 top: .5em;
	}
	 nav input:focus {
		 background: #000;
	}
	 .menu-on > nav.tree {
		 right: 0;
		 opacity: 1;
	}
	 nav.tree h1 {
		 padding: 0 1em .35em 
	}
	 nav.tree li.active:not(.ancestor):not(.arrow) > a, nav.tree li > a:hover:not(.arrow), nav.tree li > a:focus:not(.arrow), .no-js footer nav li.active > a, .no-js footer nav li > a:hover, .no-js footer nav li > a:focus {
		 background-color: #666;
	}
	 nav div > ul > .ancestor, nav div > ul > .active.parent {
		 background-color:rgba(255,255,255,.1);
	}
	 nav a {
		 border: none !important;
		 display: block;
		 transition: background-color 0.1s ease;
	}
	 .nav nav li ul {
		 display: none 
	}
	 .no-js .nav nav li ul {
		 display: block 
	}
	 .nav nav li li a, footer nav li a, nav.tree li a {
		 padding: .5em 2em;
		 padding-bottom: .5em !important;
		 line-height: 1.5em;
	}
	 footer nav li a {
		 margin-left: -1em 
	}
	 .nav nav li li li a, footer nav li li a, nav.tree li li a {
		 padding-left: 3em 
	}
	 .nav nav li li li a, footer nav li li li a, nav.tree li li li a {
		 padding-left: 4.5em 
	}
	 .nav nav li li li li a, footer nav li li li li a, nav.tree li li li li a {
		 padding-left: 6em 
	}
	 .nav nav li li li li li a, footer nav li li li li li a, nav.tree li li li li li a {
		 padding-left: 7.5em 
	}
	 .nav nav li li li li li li a, footer nav li li li li li li a, nav.tree li li li li li li a {
		 padding-left: 9em 
	}
	 footer nav li li li li li li li a, nav.tree li li li li li li li a {
		 padding-left: 10.5em 
	}
	 nav.tree li a {
		 padding-right: 220px 
	}
	 nav.tree div > ul > li > a:not(.arrow), footer nav > ul > li > a {
		 font-weight: 700;
	}
	 nav.tree li:not(.ancestor):not(.active) > ul {
		 display: none;
	}
	 nav.tree div {
		 position: relative;
		 overflow: hidden;
	}
	 nav.tree div > ul {
		 border-top: 1px solid rgba(255,255,255,.15);
		 font-size: 85%;
		 width: 500px;
		 overflow: auto;
		 position: relative;
	}
	 nav.tree ul {
		 display: block;
	}
	 nav.tree div > ul > li:last-child {
		 margin-bottom: 2em 
	}
	 nav.tree ul li, nav.tree ul li ul li {
		 padding: 0;
		 margin-left: 0;
		/*unlike regular content li's */
	}
	 .grid.nav nav h1 {
		 font-size: 100%;
		 text-transform: none;
	}
	 nav.tree div > ul > li:not(.secondary) > a {
		 letter-spacing: .05em 
	}
	 nav.tree div > ul > li, nav.tree div > ul > li.active {
		 border-bottom: 1px solid rgba(255,255,255,.15);
	}
	 nav.tree div > ul > li.secondary {
		 border:none;
		 transition: padding-top 0.3s ease;
	}
	 nav.tree div > ul > li.secondary > a:not(.arrow) {
		 font-weight:normal 
	}
	/* li:not(.secondary) + li.secondary {
		 padding-top: .65em 
	}
	 li.expand:not(.secondary) + li.secondary {
		 padding-top: 1em 
	}
	 */
	 nav a {
		 -webkit-tap-highlight-color: transparent 
	}
	 nav.tree li.parent {
		 overflow: hidden;
		 position: relative;
	}
	 nav.tree a.arrow {
		 font-size: 200%;
		 padding: 0;
		 position: absolute;
		 top: 0;
		 left: 260px;
		 display: block;
		 background-color: transparent !important;
		 transition: color 0.3s ease, transform 0.2s ease;
		 width: 40px;
		 height: 40px;
		 box-sizing: border-box;
	}
	 nav.tree a.arrow:after {
		 content:'\203a';
		 display:block;
		 text-indent: 0;
		 line-height: 0;
		 position: absolute;
		 left: 20px;
		 top: 14px;
		 transition: left 0.2s ease;
	}
	 nav.tree .expand > a.arrow {
		 transform: rotate(90deg) 
	}
	 nav.tree .expand > a.arrow:after {
		 left:13px 
	}
	 nav.tree .scrolldown {
		 transition: opacity 0.3s ease;
		 opacity: 0;
		 color: #555 !important;
	}
	 nav.tree .scrolldown:hover, nav.tree .scrolldown:focus {
		 background-color: #fff;
		 color: #555 !important;
		 text-shadow: none;
	}
	 nav.tree div.top .scrolldown.up, nav.tree div.bottom .scrolldown {
		 opacity: 0;
		 z-index: 0;
	}
	 nav.tree div.top .scrolldown, nav.tree div.middle .scrolldown, nav.tree div.bottom .scrolldown.up {
		 opacity: 1;
		 z-index: 1;
	}
	 .scrolldown.up {
		 transform: rotate(180deg) 
	}
	/* ================ Main page #content ================== */
	 .breadcrumbs {
		 font-size: 90%;
		/* was 80 */
		 letter-spacing: .025em;
		 color: #F99;
		/* d66 */
		 text-shadow: 0 0 1px black;
	}
	 .breadcrumbs a, .breadcrumbs a:visited {
		 color: #FBB;
		/* f99 */
	}
	 .breadcrumbs a:hover {
		 color: white;
		 text-decoration: underline;
	}
	 .breadcrumbs + div.boxes:not(.grey):not(.darkgrey):not(.red):not(.gold):not(.teal):not(.blue):not(.green):not(.darkgreen), .breadcrumbs + div:not(.grey) {
		 padding-top: 0;
	}
	 #content > div, form, table {
		 line-height: 1.65em 
	}
	 #content > div.content:first-child, #content > div.grid:first-child:not(.invert) {
		 padding-top:3em 
	}
	 header.float + #content {
		 height: 100vh 
	}
	/* ======================== Rules for Hero Height Fullscreen - height: 100vh Float - height: 75vh - min-height: 500px Non-float (always 2:1) - height: 50vw Non-float Mobile - min-height: 400px ======================== */
	 #content .hero, #content > .js-flickityCustom:first-child {
		 background-color: #000;
		 background-position: center center;
		 background-repeat: no-repeat;
		 background-size: cover;
		 height: 49.5vw;
		/* .5 is to compensate for scroll bar */
		 overflow: hidden;
		 position: relative;
		 z-index: 1;
	}
	 header.float + #content .hero, header.float + #content > .js-flickityCustom:first-child {
		 background-position: center 0;
		 height: 75vh;
		 min-height: 500px;
	}
	 .tall .flickity-viewport, header.float + #content .tall .hero, header.float + #content > .js-flickityCustom.tall:first-child, header.float + #content .tall {
		 height: 100vh;
		 max-height: 1500px;
	}
	 .scrolldown {
		 position: absolute;
		 left: calc(50% - 25px);
		 bottom: 0;
		 background-color: rgba(255,255,255,.75);
		 z-index: 20;
		 padding: 0 10px 5px;
		 font-size: 250%;
		 color: #858585;
		 border: 0 none;
	}
	 .scrolldown:hover, .scrolldown:focus {
		 color:#333;
		 background-color: #fff;
	}
	 .scrolldown.up {
		 bottom: auto;
		 top: 0;
	}
	 nav .scrolldown {
		 font-size: 200%;
		 padding: 0 .25em .15em;
		 transform-origin: center;
	}
	 #content .hero .text {
		 bottom: 0;
		 box-sizing: border-box;
		 color: #fff;
		 position: absolute;
		 text-align: center;
		 text-shadow: 0 0 1em #000;
		 width: 100%;
		 z-index: 10;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: wrap row;
		 -ms-flex-flow: wrap row;
		 -webkit-flex-flow: wrap row;
		 flex-flow: wrap row;
		/* For IE 10? https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx http://stackoverflow.com/questions/18711282/ie10-and-flexboxes-nightmare */
		 -moz-align-items:center;
		 -ms-align-items:center;
		 -ms-flex-align: center;
		 -webkit-align-items:center;
		 align-items:center;
		 -moz-align-content:center;
		 -ms-align-content:center;
		 -ms-flex-pack:center;
		 -webkit-align-content:center;
		 align-content:center;
	}
	 header.float + #content .hero .text {
		 bottom: 8% 
	}
	 header:not(.float) + #content .hero > div.text {
		 height: 100% 
	}
	/* Trick to tame Tubular YouTube iframe inspired by ... https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/ */
	 #content .hero iframe {
		 max-width: none;
		 position: absolute;
		 width: 100%;
		 height: 100%;
		 left: calc((100% - 100vw) * -.5) !important;
		/* 100% of container - 100% of viewport * -.5 = centered */
	}
	 #tubular-container {
		 opacity: 1;
		 overflow: hidden;
		 z-index: 1;
		 position: relative;
		 top: 0;
		 height: 75vh;
		 min-height: calc(100vw * .5625);
		/* ensure 16:9 */
		 width: calc(75vh * 1.78);
		/* 1.78? ... don't ask why;
		 it just works! */
		 min-width: 100vw;
	}
	 .tall #tubular-container {
		 height: 100vh;
		 width: calc(100vh * 1.78);
	}
	 #tubular-shield {
		 width: 100%;
		 height: 100%;
		 z-index: 2;
		 position: absolute;
		 left: 0;
		 top: 0;
	}
	 #content .hero > div.text h1, #content .hero > div.text h2 {
		 -webkit-box-flex: 0 0 100%;
		 -moz-box-flex: 0 0 100%;
		 -webkit-flex: 0 0 100%;
		 -ms-flex: 0 0 100%;
		 flex: 0 0 100%;
		 padding: 0;
	}
	/* Should match #sitename h1 & h2 */
	 #content .hero > div.text h1 {
		 font-size: 3.15em 
	}
	 #content .hero > div.text h2 {
		 font-size: 1.65em 
	}
	 #content .hero .box {
		 background-color: rgba(255,255,255,.9);
		 bottom: 3.5em;
		 color: #555;
		 padding: .65em 1em;
		 position: absolute;
		 border-bottom-color: transparent;
		 width: calc(41% - 2em);
		 z-index: 10;
	}
	 #content .hero .small {
		 width:calc(33.333% - 2em) 
	}
	 #content .hero .large {
		 width:calc(66.666% - 2em) 
	}
	 #content .tall .box {
		 bottom: 20% 
	}
	 #content .hero .box.right {
		 right: 9% 
	}
	 #content .hero .box.left {
		 left: 9% 
	}
	 .menu-on #content .hero .box.right {
		 right: 2% 
	}
	 .menu-on #content .hero .box.left {
		 left: 2% 
	}
	 #content .hero .box h1 {
		 line-height: 1.25em;
		 margin: 0;
		 padding: 0;
		 border-bottom-color: transparent;
	}
	 #content .hero .box p {
		 padding: .65em 0 0;
		 margin: 0;
	}
	 #content .hero a.box:hover, #content .hero a.box:focus {
		 background-color: #fff;
	}
	 #content .hero a.box:hover h1, #content .hero a.box:focus h1 {
		 color: #c00;
	}
	 .hero .caption, #content .hero caption {
		 background-color: rgba(255,255,255,.9);
		 bottom: 8%;
		 display: block;
		 font-size: 80%;
		 left: 0;
		 padding: .5em 1em .35em 9%;
		 position: absolute;
		 font-style: italic;
		 z-index: 50;
		 width: 50%;
		 box-sizing: border-box;
	}
	/* ================== Grid Areas ===================== */
	 .grid {
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: wrap row;
		 -ms-flex-flow: wrap row;
		 -webkit-flex-flow: wrap row;
		 flex-flow: wrap row;
		 -moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
	}
	 .grid > h1 {
		 -webkit-box-flex: 0 0 100%;
		 -moz-box-flex: 0 0 100%;
		 -webkit-flex: 0 0 100%;
		 -ms-flex: 0 0 100%;
		 flex: 0 0 100%;
		 line-height: 1.15em;
	}
	 .grid > div {
		 display: inline-block;
		 overflow: hidden;
		 padding-top: 1.5em;
		 padding-bottom: 1.5em;
		 padding-right: 3%;
		 position: relative;
		 vertical-align: top;
	}
	 .column2 > div {
		 width:48% 
	}
	 .column2 > div:nth-of-type(2n-1) {
		 padding-right: 4% 
	}
	 .column3 > div {
		 width: 31.333% 
	}
	 .column4 > div {
		 width: 22.75% 
	}
	/* Photo Grid */
	 div.photo {
		 background-color: #000;
		 margin: 1.5em 0;
		 padding:0 !important;
		 height: 100%;
		 min-height: 100px;
		 overflow: hidden;
	}
	 .column2 div.photo {
		 margin-right: 4% 
	}
	 .column3 div.photo, .column4 div.photo {
		 margin-right: 3% 
	}
	 .photos div.photo {
		 margin: 0 
	}
	 .column2.photos div.photo {
		 -webkit-box-flex: 0 1 50%;
		 -moz-box-flex: 0 1 50%;
		 -webkit-flex: 0 1 50%;
		 -ms-flex: 0 1 50%;
		 flex: 0 1 50%;
	}
	 .column3.photos div.photo {
		 -webkit-box-flex: 0 1 33.333%;
		 -moz-box-flex: 0 1 33.333%;
		 -webkit-flex: 0 1 33.333%;
		 -ms-flex: 0 1 33.333%;
		 flex: 0 1 33.333%;
	}
	 .column4.photos div.photo {
		 -webkit-box-flex: 0 1 25%;
		 -moz-box-flex: 0 1 25%;
		 -webkit-flex: 0 1 25%;
		 -ms-flex: 0 1 25%;
		 flex: 0 1 25%;
	}
	 .grid > div.photo div, .grid.photos > div div {
		 background: linear-gradient(transparent, rgba(0,0,0,.65), #000);
		 bottom: 0;
		 color: #fff;
		 padding: 3em 1.5em 1.15em;
		 position: absolute;
		 width: calc(100% - 3em + 1px);
		/* add extra pixel for bug in Safari */
		 z-index:1;
	}
	 .photo a, .invert .photo a, .photo a:focus, .photo a:hover {
		 border-color: transparent;
		 border: 0 none !important;
		 color: #fff;
	}
	 .grid > div.photo > a:hover h2, .grid > div.photo > a:focus h2 {
		 color: #fff;
	}
	 .grid > div.photo > a:hover span, .grid > div.photo > a:focus span {
		 opacity: .5;
		 z-index:0;
		 position:relative;
	}
	 .grid > div.photo div h2, .grid > div.photo div p {
		 line-height: 1.35em;
		 padding: 0;
		 border: 0 none;
		 z-index:1;
		 position:relative;
		 color: #FFF !important;
		/* override the red headers everywhere else */
	}
	 .grid > div.photo > div {
		 padding: 1.5em 
	}
	 .grid div.photo img {
		 max-width: 100%;
		 width: 100%;
	}
	/* this is how columns work */
	 .column2 > div:nth-of-type(2n), .column3 > div:nth-of-type(3n), .column4 > div:nth-of-type(4n) {
		 margin-right: 0;
		 padding-right:0;
	}
	/* ========= Events ========= */
	 .events ul {
		 list-style: none;
		 padding: 0;
		 margin: 0;
	}
	 .events li {
		 position: relative;
		 padding: 0;
		 text-indent: 0;
		/* override the base style */
	}
	 .events ul li a, .events ul li i {
		 display: block;
		 font-weight: 400;
		 margin-bottom: 1em;
		 min-height: 4.15em;
		 text-transform: none;
		 width: auto;
		 border-bottom-color: transparent;
		 padding: 0 .25em .25em 85px;
		 font-style: normal;
	}
	 .events ul li a:hover, .events ul li a:focus {
		 background-color: rgba(0,0,0,.1);
	}
	 .invert .events ul li a:hover, .invert .events ul li a:focus {
		 background-color: rgba(0,0,0,.5);
	}
	 .events ul li a:after {
		 display: none 
	}
	 .events ul li a > span, .events ul li i > span {
		 left: 0;
		 position: absolute;
		 top: .5em;
		 text-shadow:none;
	}
	 .events ul li a:hover > span, .events ul li a:focus > span {
		 left: .5em;
		 box-shadow: 0 0 5px rgba(0,0,0,.2);
	}
	 .events li span {
		 background-color: rgba(255,255,255,.9);
		 border: 1px solid rgba(0,0,0,.2);
		 color: #c00;
		 display: block;
		 font-size: 90%;
		 padding: 0 0 .5em;
		 line-height: 1em;
		 text-align: center;
		 width: 70px;
	}
	 .invert .events li span {
		 border: none 
	}
	 .events li span span {
		 background-color: #ccc;
		 border:0 none;
		 color: #555;
		 font-size: inherit;
		 margin-bottom: .5em;
		 padding-top: .5em;
		 width: 100%;
	}
	/* Boxes: Fixed-height Grids */
	 .boxes {
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: wrap row;
		 -ms-flex-flow: wrap row;
		 -webkit-flex-flow: wrap row;
		 flex-flow: wrap row;
		 -moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
		 -moz-justify-content: flex-start;
		 -ms-justify-content: flex-start;
		 -webkit-justify-content: flex-start;
		 justify-content: flex-start;
		 padding-bottom: 0;
	}
	 .boxes > div {
		 background-color: #fff;
		 border: 1px solid rgba(0,0,0,.2);
		 box-sizing: border-box;
		 margin: 0 2% 2em 0;
		 padding: 1vw !important;
		 font-size:90%;
		 -webkit-box-flex: 0 0 auto;
		 -moz-box-flex: 0 0 auto;
		 -webkit-flex: 0 0 auto;
		 -ms-flex: 0 0 auto;
		 flex: 0 0 auto;
	}
	 .column2.boxes > div {
		 width:49% 
	}
	 .column4.boxes > div {
		 width:23.5% 
	}
	 .column2.boxes > div:nth-of-type(2n), .column3.boxes > div:nth-of-type(3n), .column4.boxes > div:nth-of-type(4n) {
		 margin-right:0 
	}
	 .column3.boxes > div {
		 margin-right:0;
		 width: 32%;
	}
	 .column3.boxes > div:nth-of-type(3n-1) {
		 margin-left:2%;
		 margin-right:2%;
	}
	 .boxes > div:last-child {
		 margin-right: 0 
	}
	/* Footer Nav */
	 .grid.nav {
		 font-size: 100% 
	}
	 .grid.nav > div {
		 padding-top:0;
		 padding-bottom:0;
	}
	 .grid.nav nav h1 {
		 font-size: 1em;
		 font-weight: 700;
		 letter-spacing: 1px;
		 padding-top: .2em;
		 padding-bottom: .8em;
		 text-transform: uppercase;
	}
	 .grid.nav nav ul li:first-child {
		 padding-top:0 
	}
	 .grid.nav nav ul li:last-child {
		 padding-bottom: 0;
		 margin-bottom: 1px;
	}
	 .grid.nav nav ul li a {
		 border-bottom-color: transparent 
	}
	 .grid.nav nav ul li a:hover, .grid.nav nav ul li a:focus {
		 border-bottom: 1px solid 
	}
	/* Grid & Sidebar Lists */
	 .content .sidebar .list {
		 padding-bottom: .5em;
	}
	 .content .sidebar div:not(.simple):not(.left-rule) {
		 box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	}
	 .list ul {
		 list-style: none;
		 text-indent: 0;
		 padding: 0;
		 margin: 0;
	}
	 .list li {
		 border-top: 1px solid rgba(0,0,0,.2);
		 padding: 0;
		 position: relative;
		 margin: 0;
		 text-indent: 0;
	}
	 .sidebar .list > ul:first-child > li:first-child {
		 border:0;
		 margin-top: -1em;
	}
	 .invert.list li, .invert .list li {
		 border-top: 1px solid rgba(255,255,255,.5);
	}
	 .grid .list ul:last-child {
		 border-bottom: 1px solid rgba(0,0,0,.2) 
	}
	 .invert .list ul:last-child {
		 border-bottom: 1px solid rgba(255,255,255,.5) 
	}
	 .list li a, .list li a:visited {
		 border-bottom: 0 none;
		 color: rgba(0,0,0,.6);
		 display: block;
		 letter-spacing: .025em;
		 line-height: 1.35em;
		 margin: 0;
		 padding: 1.5em 0 !important;
		 width: 92%;
	}
	 .list li a:after {
		 content: " \25BA";
		 font-size: .65em;
		 position: absolute;
		 right: 0;
		 top: 39%;
	}
	 .list li a:focus:after, .list li a:hover:after, .list li a:focus, .list li a:hover {
		 border-bottom: 0 none;
		 color: #c00;
	}
	 .invert .list li a, .invert.list li a {
		 color: rgba(255,255,255,.85);
		 border-bottom:0 none;
	}
	 .invert .list li a:focus:after, .invert .list li a:hover:after, .invert .list li a:focus, .invert .list li a:hover, .invert.list li a:focus:after, .invert.list li a:hover:after, .invert.list li a:focus, .invert.list li a:hover {
		 color: #fff;
		 border-bottom:0 none;
	}
	/* Lists on the landing page items */
	 .landing .list {
		 margin-top: 5px;
	}
	 .landing .list li {
		 border-top: 0 none;
		 padding: 0;
		 position: relative;
		 margin: 0;
		 line-height: 1em !important;
	}
	 .landing .list ul:last-child {
		 border-bottom: 0 none;
	}
	 .landing .list li a, .landing .list li a:visited {
		 border-bottom: 0 none;
		 color: rgba(0,0,0,.6);
		 display: block;
		 letter-spacing: .025em;
		 line-height: 1em;
		 margin: 0;
		 padding: .5em 0 !important;
		 width: 92%;
		 text-decoration: underline;
	}
	 .landing .list li a:after {
		 content: " \25BA";
		 font-size: .65em;
		 position: static;
		 top: 39%;
		 margin-left: 1em;
		 display: inline-block;
		 text-decoration: none important;
	}
	 .landing .list li a:hover {
		 color: #c00 
	}
	/* "Get Help" list in wide areas */
	 .gethelpwide ul {
		 width: 100%;
		 text-align: left;
		 margin-left: 1%;
	}
	 .gethelpwide ul li {
		 width: 30%;
		 display: inline-block;
		 margin-right: 1%;
		 margin-left: 1%;
		 vertical-align: text-top;
	}
	 .gethelpwide.list li a, .gethelpwide.list li a:visited {
		 padding: 1.1em 0 !important;
	}
	 @media only screen and (max-width : 768px) {
		 .gethelpwide ul li {
			 width: 100%;
			 display: block;
			 margin-left: 0;
		}
	}
	/* News Grid! */
	 .news > div {
		 -webkit-box-flex: 0 0 auto;
		 -moz-box-flex: 0 0 auto;
		 -webkit-flex: 0 0 auto;
		 -ms-flex: 0 0 auto;
		 flex: 0 0 auto;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
	}
	 .news > h1 {
		 padding-bottom:0;
		 z-index: 2;
	}
	 .news div.img {
		 background: scroll center center no-repeat #bbb;
		 background-size: cover;
		/* text-indent: -9999px;
		/* WHY was this -9999??????? */
		 width: 100%;
		 transition: filter 0.25s;
	}
	 .news.column2 div.img {
		 height: 300px 
	}
	 .news.column3 div.img {
		 height: 225px 
	}
	 .news.column4 div.img {
		 height: 150px 
	}
	 .news div a {
		 display: block;
		 border: 0 !important;
		 padding-bottom: 0 !important;
		 width: 100%;
	}
	 .news div a small, .news div a span {
		 color: #555;
		 line-height: 1.65em;
	}
	 .news div a small {
		 padding-top: .5em 
	}
	 .news:not(.boxes) a span {
		 padding-bottom: .65em 
	}
	 .news div a:hover, .news div a:focus {
		 border-color: transparent;
	}
	 .news div a:hover div.img, .news div a:focus div.img {
		/* News hover effect */
		/* opacity: .65;
		 */
		 filter: brightness(120%);
		 opacity: .95;
	}
	 .news div a > :not(div) {
		 display: block 
	}
	 .news div a h2 {
		 padding: .5em 0 
	}
	 .news.globe a, .news.plaid a, .news.grey a, .news.darkgrey a, .news.red a, .news.gold a, .news.teal a, .news.blue a, .news.green a, .news.darkgreen a {
		 background-color: #fff;
	}
	 .news.globe:not(.boxes) a > :not(div), .news.plaid:not(.boxes) a > :not(div), .news.grey:not(.boxes) a > :not(div), .news.darkgrey:not(.boxes) a > :not(div), .news.red:not(.boxes) a > :not(div), .news.gold:not(.boxes) a > :not(div), .news.teal:not(.boxes) a > :not(div), .news.blue:not(.boxes) a > :not(div), .news.green:not(.boxes) a > :not(div), .news.darkgreen:not(.boxes) a > :not(div) {
		 padding-left: 4%;
		 padding-right: 4%;
	}
	/* SCS news plain list */
	 .news-list>h2 {
		 padding-bottom: 0.5em;
	}
	 .news-list .newsdate {
		 color: #888;
		 font-style: oblique;
		 padding-left: 0.5em;
	}
	/* homepage specific */
	 .homepage #news {
		 padding: 0px !important;
		 display: block;
		 width: calc(100% - 280px);
		 padding-right: 3%;
	}
	 .homepage .news > div {
		 width: 50% !important;
		 overflow: visible;
		 padding-bottom: 1.5em;
		 padding-right: 1.5em;
		 position: relative;
		 vertical-align: top;
		 display: inline-block;
		 box-sizing: border-box;
	}
	 .news > div > a {
		 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	}
	 .homepage .news div.img {
		/*height: calc(20vw + 80px);
		 max-height: 300px;
		 */
		 height: 300px;
		 position: relative;
	}
	 .homepage .news > div:first-of-type {
		 width: 100% !important;
		 padding-top: 0;
	}
	 .homepage .news > div:nth-of-type(2n) {
		 padding-right: 1.5em;
		/* this is opposite how normal grids work... */
	}
	 .newstextwrapper {
		 position: absolute;
		 bottom: 0px;
		 background: rgba(0,0,0,.65);
		 z-index: 50;
		 width: 100%;
		 padding: .5em;
		 padding-top: 0;
		 box-sizing: border-box;
	}
	 .newstextwrapper * {
		 position: relative;
		 color: white !important;
		 margin-top: 0;
	}
	 .newstextwrapper h2 {
		 font-size: 22px !important;
		 font-weight: 700 !important;
		 -webkit-font-smoothing: antialiased;
		 -moz-font-smoothing: grayscale;
		 -moz-osx-font-smoothing: grayscale;
	}
	 .newstextwrapper span {
		 font-size: 13px !important;
		 font-weight: 400 !important;
		 -webkit-font-smoothing: antialiased;
		 -moz-font-smoothing: grayscale;
		 -moz-osx-font-smoothing: grayscale;
	}
	 .homeside-top {
		 display: block;
		 float: right;
		 width: 280px;
		 padding-bottom: 2em;
	}
	 .homeside-bottom {
		 float: right;
		 width: 280px;
		 box-sizing: border-box;
		 position: absolute;
		 top: calc(3em + 46em);
		/* This has to change to match the height of the .homeside-top sidebar */
		 right: 9%;
		/* This has to change to match the responsive padding-right of the .content class - GUTTER */
	}
	/* systems status dashboard */
	 .dashboard {
		 display: block !important;
		 border: none;
		 padding-bottom: .5em;
		 position: relative;
		 margin-bottom: 1.7em;
	}
	 .dashboard:not(#legend) {
		 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	}
	/* .dashboard:after {
		 content: "PLACEHOLDER";
		 display: block;
		 position: absolute;
		 color: rgba(0,0,255,0.5);
		 font-weight: 700;
		 font-size: 32pt;
		 top: 150px;
		 transform: rotate(-45deg);
	}
	 */
	 .dashboard thead, .dashboard tbody, .dashboard tr, .dashboard td, .dashboard th {
		 display: block;
		 background-image: none !important;
		 background-color: none !important;
		 padding: none;
		 margin: none;
	}
	 .dashboard, .dashboard tbody, .dashboard tbody tr {
		 background-color: #e0e0e0 !important;
	}
	 .dashboard thead, .dashboard thead tr {
		 background: none !important;
		 padding: 0;
	}
	 .dashboard th {
		 background: rgb(128,128,128) !important;
		 color: white !important;
		 font-size: 14pt !important;
		 font-weight: 400 !important;
		 text-decoration: none !important;
		 line-height: 1em;
	}
	 .dashboard th a, .dashboard th a:visited {
		 color: white !important;
		 border-bottom: none !important;
	}
	 tr.status-normal {
		 background-image: url("../site-images/status-normal.png") !important 
	}
	 tr.status-normal-except {
		 background-image: url("../site-images/status-normal-except.png") !important 
	}
	 tr.status-maint {
		 background-image: url("../site-images/status-maint.png") !important 
	}
	 tr.status-incident {
		 background-image: url("../site-images/status-incident.png") !important 
	}
	 tr.status-incident-partial {
		 background-image: url("../site-images/status-incident-partial.png") !important 
	}
	 .dashboard tbody tr {
		/*background: linear-gradient(to bottom,#e66465, #9198e5);
		 */
		 background-repeat: no-repeat;
		 background-position: 12px center;
		 background-size: 32px;
		 position: relative;
		/* to allow the stuff inside to be positioned */
		 padding: 0;
		 height: auto !important;
	}
	 .dashboard:not(.allclosed) tbody tr td:first-child {
		 padding: 0;
		 line-height: 3.5em;
		 font-size: 15px;
		 font-weight:700;
		 margin-left: 55px;
	}
	 .dashboard:not(.allclosed) tbody tr td:last-child {
		 padding: 0;
		 position: absolute;
		 z-index: 10;
		 bottom:-8px;
		 left: 55px;
		 font-size: 13px;
		 display: block;
		 width: 80%;
		 white-space: nowrap;
		 overflow: hidden;
		 text-overflow: ellipsis;
	}
	 .dashboard#legend tbody tr td:last-child {
		 white-space: normal;
		 overflow: visible;
		 position: relative;
		 bottom: auto;
		 line-height: 1.3em;
		 margin-right: 55px;
	}
	 #legend tbody tr td:first-child {
		 line-height: 1.5em;
	}
	 .dashboard#legend tbody tr {
		 height: 5em;
	}
	 #legend, #legend tbody, #legend tbody tr {
		 background-color: #EEE !important;
	}
	 #legend th {
		 background: #D0D0D0 !important;
		 color: #555 !important;
	}
	 @media not speech {
		/* This is useful to hear, but the background image serves the same purpose visibly */
		 .dashboard tbody td span.label {
			 font-size: 0;
			 position: abosolute;
			/* take out of flow entirely */
		}
	}
	 @media speech {
		 .dashboard tbody td span.label {
			 speech: normal;
		}
	}
	/* Hours Dash is different */
	 .hours.dashboard:not(.allclosed) tbody tr td:first-child {
		 margin-left: .6em;
	}
	 .hours.dashboard:not(.allclosed) tbody tr td:last-child {
		 top: 5px;
		 bottom: -1px;
		 left: auto;
		 right: .5em;
		 width: 66%;
		 white-space: normal;
		 text-align: center;
	}
	 .hours.dashboard:not(.allclosed) tbody tr td:last-child span{
		 display: block;
	}
	 .hours.dashboard tbody tr td:last-child .hours{
		 line-height: 1em;
	}
	
	/* When everything is closed */
	.allclosed tbody {
		height: 104px;
		overflow: hidden;
	}
	.allclosed h3 {text-align: center; margin-bottom: -6px;}
	.allclosed tbody td {
		font-size: 13px !important;
		width: 100%;
		box-sizing: border-box;
	}
	.allclosed tbody td span {
		display: inline-block;
		width: 48%;
	}
	.allclosed tbody td .tag {
		font-size: 12px !important;
	}
	.allclosed tbody tr:last-child {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: none !important;
	}
	/* The campus dashboard link */
	 .campuslink.dashboard {
		 padding: .7em;
		 font-size: 10pt;
		 line-height: 1.4em;
		 text-align: left;
	}
	 .campuslink.dashboard .tag {
		 display: block;
		 margin: 1em;
		 margin-bottom: .5em;
		 font-size: 11pt;
		 height: auto;
		 border-radius: 6em;
	}
	
	/* Individual dashboard page styles */
	 .eventstatus {
		margin-bottom: 1em;
	}
	 .eventstatus > p {
		 display: inline;
		 font-style: italic;
		 padding-right: 2em;
		 padding-top: 0;
		 padding-bottom: .35em;
		 line-height: 1em;
	}
	 .tag {
		 display: inline-block;
		 height: 2em;
		 border-radius: 1em;
		 color: #FFF;
		 padding: .4em;
		 padding-left: .7em;
		 padding-right: .7em;
		 font-size: 80%;
		 vertical-align: bottom;
		 box-sizing: border-box;
		 font-style: normal;
		 min-width: 4em;
		 text-align: center;
		 line-height: 1.2em;
		 margin-left: .5em;
		 text-indent: 0 !important;
		 margin-bottom: .25em;
	}
	 .tag>a {
		 color:#FFF !important;
		 text-decoration: underline;
		 text-decoration-color:rgba(255,255,255,.5);
		 -webkit-text-decoration-color:rgba(255,255,255,.5);
		 border-bottom: none 
	}
	 .tag>a:hover {
		 text-decoration-color:#FFF;
		 -webkit-text-decoration-color:#FFF;
	}
	 .dashboard-item {
		 display: block !important;
		 padding: .5em !important;
		 margin-bottom: 1.5em !important;
	}
	 .dashboard-item.active {
		 background: rgb(224,224,224);
		 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	}
	 .dashboard-item.isalert {
		/* nothing */
	}
	/* ================== Content Areas ===================== */
	 .content {
		/* Added this entirely. See next two comments. */
		 display: table;
		 box-sizing: border-box;
		 position: relative;
		 width: 100%;
	}
	 .content > div.content-body {
		 display: table-cell;
		/*inline-block */
		 vertical-align: top;
	}
	 .content-body.withsidebar {
		 width: 70%;
	}
	 .content-body.withsidebar bigvideowrapper {
		 max-width: 100%;
	}
	 .content .sidebar {
		 display: table-cell;
		 vertical-align: top;
		 padding-left: 5%;
		 width: 30%;
	}
	 .content .sidebar div {
		 font-size: 90%;
		 margin-top: 2em;
		 padding: 1.5em;
		 width: auto;
	}
	 .content .sidebar div:after {
		/* to prevent float issues */
		 content:"";
		 display:block;
		 clear:both;
	}
	 .content .sidebar div.simple {
		 margin-top: 3em;
		 padding: 0 0 1.5em 0;
	}
	 .content .sidebar div:first-child {
		 margin-top: 0 
	}
	 .content .sidebar div.left-rule {
		 border-left: 1px solid rgba(0,0,0,.2);
		 padding: 0 0 0 1.5em;
	}
	 div.content:not(:first-of-type) {
		/* fix scroll position of content div's with anchor links. */
		 margin-top: -40px;
		 padding-top: calc(40px + 2em);
		/* maintain the 2em padding normally */
	}
	 .collapsed {
		 clear: both;
		 z-index: 1;
	}
	 .collapsed a:before {
		 color: #c00;
		 content: "\203a";
		 display: block;
		 float: left;
		 font-size: 135%;
		 margin-right: .35em;
		 margin-top: -2px;
		 transform: rotate(0);
		 transform-origin: 60% 60%;
	}
	 .collapsed.open a:before {
		 transform: rotate(90deg);
	}
	 .invert .collapsed a:before {
		 color: rgba(255,255,255,.85) 
	}
	 h2.collapsed {
		 padding-bottom:0 
	}
	 h2.collapsed + div {
		 margin-top:1em !important 
	}
	 .collapsed:hover a {
		 color: #f00;
		 border-bottom: 1px solid;
	}
	
	
	/* ==========------- Internal / Private content -------========= */
	
.content.internal-content {
	background: #e9f1f9;	
	position: relative;
}
.internal-content {	
	border-left: solid 10px #3f739a !important;
	padding-top: 50px !important;
	padding-bottom: 50px;
}

.content.internal-content::before {
	content: "Internal-Only Information";
	color: #3f739a;
	font-weight: 700;
	position: absolute;
	display: block;
	top: 0;
	left: .5em;
}
.content.internal-content ~ .content.internal-content::before {
	content: "";
}
.content:not(.internal-content) ~ .content.internal-content::before {
	content: "Internal-Only Information"";
}	
	
	
	
	
	/* ================== News & Bio ===================== */
	 .indicia {
		 display:inline-block 
	}
	 .content > div > .floatleft + h1, .content > div > .floatleft + h2 {
		 clear: none;
		 padding-top: 0;
	}
	 .contact {
		 clear: both;
		 position: relative;
		 margin: .65em 0;
		 min-height: 2em;
	}
	 .date + h1 {
		 padding-top:0 
	}
	 .contact > p {
		 display: inline;
		 font-style: italic;
		 width: calc(100% - 10em);
		 padding-top: 0;
		 padding-bottom: .35em;
	}
	 body .contact > p a {
		 font-style: normal 
	}
	 body:not(.no-js) .contact > p a {
		 display: inline-block;
		 text-indent: -9999px;
	}
	 .contact address {
		 display: inline-block;
		 padding: 2em 1em 0 0;
		 font-style: normal;
		 width: calc(50% - 1em);
		 vertical-align: top;
	}
	 p+a+.address > address {
		 padding-top: 1em 
	}
	 address strong {
		 display:block 
	}
	 #contact ul, .contact address ul {
		 padding: 0;
		 margin-top: 0;
		 list-style-type: none;
	}
	 .contact .collapsed {
		 position: absolute;
		 top: 0;
		 right: 0;
		 border: none;
	}
	 .inquiry.open:before {
		 transform: rotate(90deg);
	}
	 .no-js .inquiry {
		 display: none 
	}
	/* SCSCF-specific Bio Stuff */
	 .bio.stacked {
		 margin-top: 0 !important;
		 z-index: 0;
	}
	 .bio.stacked .caption.thumb {
		 position: relative;
		 width: 28%;
		 padding-top: 28%;
		 overflow: hidden;
		 border-radius: 50%;
		 box-shadow: inset 0px 0px 2em 2em rgba(0,0,0,0.2);
		 background: none;
		 font-size: 3px;
	}
	 .bio.stacked .caption.thumb img {
		 position: absolute;
		 top: 0;
		 z-index: -1;
	}
	 .bio.grid>div {
		 position: relative;
		 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	 .bio.grid .thumb {
		 position: relative;
		 width: 100%;
		 padding-top: 100%;
		 overflow: hidden;
	}
	 .bio.grid .thumb img {
		 position: absolute;
		 top: 0; /* the rest is new */
		 height: 100%;
		 max-width: 2000px !important;
		 width: auto;
		 left: 50%;
		 transform: translate(-50%,0);
	}
	.bio.grid h3+h3 { /* added for multiple titles */
        margin-top: -.3em;
	    padding-top: 0;
	}
	.bio-single h3+h3 { /* single page */
	    margin-top: -.3em;
	    padding-top: 0;
	}
	.bio-single > div > p+div { /* the block of titles on the single page */
	    display: inline-block;
    	width: 60%;
    	margin-right: -10%;
        text-shadow: 0 0 4px #FFF, 0 0 8px #FFF, 0 0 20px #FFF;
    }
    @media only screen and (max-width: 479px) {
	    .bio-single > div > p+div {
    		display: block;
		    width: 100% !important;
	    }
    }
	.bio.grid h4 {
		 color: #566;
		 margin-top: -1.75em;
	}
	.bio h5, .bio-single h5 {
	    color: #888;
	    padding-top: .5em;
	}
	 .bio.grid .cta {
		 position: absolute;
		 bottom: 0;
		 right: 1em;
	}
	 .bio-single {
		 z-index: 0 
	}
	 .bio-single h1 {
		 color: #000;
	}
	 .bio-single h3 {
		 color: #444;
		 clear: none;
	}
	 .bio-single h4 {
		 color: #444;
		 clear: none;
		 margin-top: -1.75em;
	}
	 .bio-content {
		 display: block;
		 clear: both;
	}
	 .bio-content h2 {
		 color: rgb(153,0,0);
	}
	 @media only screen and (max-width: 767px) {
		 .bio.stacked .caption.thumb {
			 width: 40%;
			 padding-top: 40%;
			 margin-left: auto;
			 margin-right: auto;
		}
		 .bio-single .caption.thumb {
			 /*width: 36% !important;*/
			 margin-right: 2%;
		}
		 .bio-single .caption.thumb img {
			 margin-right: 15px;
		}
	}
	 @media only screen and (max-width: 479px) {
		 .bio-single .caption.thumb {
			 width: 100% !important;
			 /*max-width: 280px;*/
			 display: block;
			 float: none;
			 margin-left: auto;
			 margin-right: auto;
		}
		 .bio-single .caption.thumb img {
			 float: none;
			 margin-right: 0;
		}
	}
	/* Remove link border & padding for AddThis */
	 .atss a, .addthis_toolbox a, .addthis-smartlayers a, #at3win a {
		 border:0;
		 padding:0;
	}
	 .no-js .loadmore {
		 display: none 
	}
	 .loadmore {
		 display: block;
		 margin: 1.5em auto 0;
		 padding: 0 25%;
		 width: 50%;
		 z-index: 2;
	}
	/* I know that this is ridiculous, and I'm sorry. */
	 .darkgrey .loadmore .btn, .red .loadmore .btn, .gold .loadmore .btn, .teal .loadmore .btn, .blue .loadmore .btn, .green .loadmore .btn, .darkgreen .loadmore .btn {
		 color: #fff;
		 border-color: #fff;
	}
	 .darkgrey .loadmore .btn:focus, .darkgrey .loadmore .btn:hover, .red .loadmore .btn:focus, .red .loadmore .btn:hover, .gold .loadmore .btn:focus, .gold .loadmore .btn:hover, .teal .loadmore .btn:focus, .teal .loadmore .btn:hover, .blue .loadmore .btn:focus, .blue .loadmore .btn:hover, .green .loadmore .btn:focus, .green .loadmore .btn:hover, .darkgreen .loadmore .btn:focus, .darkgreen .loadmore .btn:hover {
		 color: #fff;
		 border-color: #fff;
		 background-color: rgba(0,0,0,.35);
	}
	 .boxes > h1.collapsed:not(.open) {
		 padding-bottom:1.6em 
	}
	 .boxes > h1.collapsed {
		 padding-bottom:.65em 
	}
	 .content > div > h1.collapsed:not(.open) {
		 padding-bottom:.5em 
	}
	 .tags {
		 margin-top: 1.5em 
	}
	 .tags .btn {
		 margin-right: .5em 
	}
	 .no-js .tags {
		 display: none 
	}
	/* ========== Contact Icons ============== */
	 .icon {
		 position: relative;
		 margin-left: 40px;
	}
	 .icon:before {
		 background: url(../site-images/cmu/sprites-icons-contact.png) 0 -5px no-repeat;
		 background-size: auto 100%;
		 content: "";
		 display: block;
		 height: 31px;
		 width: 32px;
		 position: absolute;
		 left: -39px;
		 bottom: -5px;
	}
	/* Adds padding to empty a.icon tags */
	 .icon:after {
		 content: "";
		 display: inline-block;
	}
	 address .icon.email {
		 text-indent: -9999px 
	}
	 .icon.tel:before {
		 background-position: -36px 0 
	}
	 .icon.fax:before {
		 background-position: -82px 0 
	}
	 .icon.loc:before {
		 background-position: -116px 0 
	}
	/* ======= Links ======= */
	 a {
		 color: #b00;
		 border-bottom: 1px solid #faa;
		 text-decoration: none;
	}
	 #content a:not(.btn):not(.cta):not(.box):not(.scrolldown) {
		 padding-bottom:1px 
	}
	 .grey a {
		 border-bottom-color: #f77 
	}
	 a:visited {
		 color: #800;
		 border-bottom-color: #c99;
	}
	 a:hover, a:focus {
		 color: #f00;
		 border-bottom-color: #f00;
	}
	/* =================================== Section Background Colors =================================== */
	 .grid {
		 background-attachment: scroll;
		 background-position: center center;
		 background-repeat: no-repeat;
	}
	 .invert thead, .invert h1, .invert h2, .invert h3, .invert h4, .invert h5, .invert h6, .invert b, .invert strong, .invert i, .invert em {
		 color: #fff !important;
	}
	 .invert a, .invert h1 a:not(.btn):not(.cta), .invert h2 a:not(.btn):not(.cta), .invert h3 a:not(.btn):not(.cta), .invert h4 a:not(.btn):not(.cta), .invert h5 a:not(.btn):not(.cta), .invert h6 a:not(.btn):not(.cta), .invert p a:not(.btn):not(.cta), .invert blockquote a:not(.btn):not(.cta), .invert li a {
		 color:rgba(255,255,255,.85);
		 border-bottom: 1px solid rgba(255,255,255,.75);
	}
	 .invert a:focus, .invert a:hover {
		 color: #fff !important;
		 text-shadow:0 0 5px rgba(0,0,0,.5);
	}
	 .invert {
		 background-color:#666;
		 color:rgba(255,255,255,.85);
	}
	 .invert:not(footer) li {
		 color:rgba(255,255,255,.85) 
	}
	 .invert .rule-bottom {
		 border-bottom: 1px solid rgba(255,255,255,.65) 
	}
	 .invert .flickity-page-dots .dot {
		 background-color: rgba(255,255,255,.75) 
	}
	 .invert .flickity-page-dots .dot.is-selected {
		 background-color: #fff 
	}
	/* the grey background doesn't need the invert class */
	 .grey:not(.plaid), .js-flickityCustom.grey .grid, .grey .flickity-viewport {
		 background-color: #e0e0e0 
	}
	/* all other background colors NEED the invert class */
	/* Red has been changed from #b00 to SCS red, because we can. */
	 .darkgrey, .js-flickityCustom.darkgrey .grid, .darkgrey .flickity-viewport {
		 background-color: #666 
	}
	 .red, .js-flickityCustom.red .grid, .red .flickity-viewport {
		 background-color: rgb(153,0,0) 
	}
	 .gold, .js-flickityCustom.gold .grid, .gold .flickity-viewport {
		 background-color: #a60 
	}
	 .gold.invert, .gold.invert a {
		 color: #fff !important 
	}
	/* make text #fff to pass http://webaim.org/resources/contrastchecker/ */
	 .teal, .js-flickityCustom.teal .grid, .teal .flickity-viewport {
		 background-color: #067 
	}
	 .blue, .js-flickityCustom.blue .grid, .blue .flickity-viewport {
		 background-color: #247 
	}
	 .green, .js-flickityCustom.green .grid, .green .flickity-viewport {
		 background-color: #085 
	}
	 .darkgreen, .js-flickityCustom.darkgreen .grid, .darkgreen .flickity-viewport {
		 background-color: #243 
	}
	/* override Christmas combinations ... maybe we should retire this rule? */
	 .red + .green, .red + .darkgreen {
		 background-color: #067 
	}
	 .green + .red, .darkgreen + .red {
		 background-color: #555 
	}
	/* Don't forget to invert for first h1 in colored grids (for .news and .boxes). I know that I should have added a theme class to prevent this. Sorry. */
	 .darkgrey > h1, .red > h1, .gold > h1, .teal > h1, .blue > h1, .green > h1, .darkgreen > h1, .darkgrey > h1 a, .red > h1 a, .gold > h1 a, .teal > h1 a, .blue > h1 a, .green > h1 a, .darkgreen > h1 a, .darkgrey > h1 a:before, .red > h1 a:before, .gold > h1 a:before, .teal > h1 a:before, .blue > h1 a:before, .green > h1 a:before, .darkgreen > h1 a:before {
		 color:#fff;
		 border-color: #fff;
	}
	 .darkgrey > h1:hover a, .red > h1:hover a, .gold > h1:hover a, .teal > h1:hover a, .blue > h1:hover a, .green > h1:hover a, .darkgreen > h1:hover a, .darkgrey > h1 a:focus, .red > h1 a:focus, .gold > h1 a:focus, .teal > h1 a:focus, .blue > h1 a:focus, .green > h1 a:focus, .darkgreen > h1 a:focus {
		 color:#fff;
		 border-color: #fff;
		 text-shadow:0 0 5px rgba(0,0,0,.5);
	}
	/* ========= Footer ========= */
	footer.grid {
		 background-color: #333;
		 color: rgba(255,255,255,.5);
		 font-size: 90%;
		 letter-spacing: .05em;
		 overflow: hidden;
		/* this was causing x-scroll */
	}
	footer.grid h1, footer.grid a, footer.grid a:visited {
		 border-bottom-color: transparent;
	}
	 footer.grid a:focus, footer.grid a:hover {
		 border-bottom: 1px solid;
	}
	footer ul {
		 margin: 0;
		 padding: 0;
	}
	footer div:first-child ul li {
		 display: inline 
	}
	footer div:first-child ul li:after {
		 content: " | ";
		 padding: 0 .5em;
	}
	 footer div:first-child ul li:last-child:after {
		 content: none;
		 padding: 0;
	}
	/* ============= SCS Footer Stuff ============= */
	 .homepage footer {
		/* since we don't have the option red footer here */
		 box-shadow: 0px -2px 10px rgba(0,0,0,0.5) 
	}
	.contactscs {
		 width: 100% !important;
		 overflow: visible !important;
	}
	.contactscs ~ div:not(.legal) {
		/* nav if noJS */
		 margin-left: auto;
		 margin-bottom: -3em;
	}
	.contactscs h2 {
		 font-size: 15px;
		 font-weight: bold;
		 padding: 0;
	}
	.contactscs p {
		 font-size: 14px;
		 color: #FFF;
		 padding: 0;
		 overflow: visible 
	}
	.contactscs description {
		 font-size: 12px;
		 display: block;
		 color: #888;
		 margin-bottom: 7px;
	}
	.contactscs section {
		 box-sizing: border-box;
		 display: inline-block;
		 padding-right: 25px;
		 padding-bottom: 25px;
		 vertical-align: top;
	}
	.specialhours {
		 color: #FF0 !important;
		 font-weight: bold;
	}
	footer .legal {
		 display: block;
		 width: 100%;
		 padding-top: 0;
	}
    footer .legal a {margin-right: 1.5em}
	footer .university-wordmark {
		 position: absolute;
		 right: 1em;
		 bottom: -2em;
		 width: 40%;
		 margin-bottom: 0 !important;
		 display: block;
		 z-index: 5;
		 text-align: right;
		 border-bottom: none !important;
	}
	 .university-wordmark:hover img {
		 opacity: 0.6;
		 border-bottom: solid 1px rgba(255,255,255,.6) !important 
	}
	 .university-wordmark img {
		 border-bottom: solid 1px rgba(0,0,0,0) !important;
		 padding-top: 1em;
		 opacity: .4;
	}
	 @media only screen and (max-width: 768px) {
		 footer .university-wordmark {
			 right: 2em;
			 bottom: -4.8em;
			 width: 50%;
		}
	}
	/* ===================== Social Icons (Three Sizes) Full Size 1/2 Size 1/3 Size ===================== */
	 ul.social {
		 margin: 0;
		 padding: 0;
	}
	 .social a, .social span {
		 background:url(../site-images/cmu/sprites-social.png) 0 0 scroll transparent no-repeat;
		 background-size:auto 100%;
		 border-bottom: 0 none !important;
		 display:inline-block;
		 height:80px;
		 margin: 0 6px 6px 0;
		 padding-bottom: 0 !important;
		 text-indent: -9999px;
		 width:80px;
	}
	 .social a:hover, .social a:focus {
		 opacity:.5;
		 border-bottom: 0 none;
	}
	 ul.social li {
		 display:inline-block;
		 padding:0;
		 vertical-align: top;
	}
	 .social .twitter {
		 background-position: -86px 0 
	}
	 .social .googleplus {
		 background-position: -172px 0 
	}
	 .social .linkedin {
		 background-position: -258px 0 
	}
	 .social .youtube {
		 background-position: -344px 0 
	}
	 .social .itunesu {
		 background-position: -430px 0;
		 border-radius: 50% 
	}
	 .social .rss {
		 background-position: -516px 0 
	}
	 .social .tumblr {
		 background-position: -602px 0 
	}
	 .social .instagram {
		 background-position: -688px 0 
	}
	 .social .flickr {
		 background-position: -774px 0 
	}
	 .social .weibo {
		 background-position: -860px 0 
	}
	 .social .pinterest {
		 background-position: -946px 0;
		 width: 31px 
	}
	 .social .vimeo {
		 background-position: -1032px 0;
	}
	 .social .more {
		 background-position: -1204px 0;
		 position: relative;
		 width: 43px;
	}
	 .invert .social .more {
		 background-position: -1118px 0;
	}
	 .social.half a, .social.half span {
		 height:40px;
		 width:40px;
	}
	 .social.half .twitter {
		 background-position: -43px 0 
	}
	 .social.half .googleplus {
		 background-position: -86px 0 
	}
	 .social.half .linkedin {
		 background-position: -129px 0 
	}
	 .social.half .youtube {
		 background-position: -172px 0 
	}
	 .social.half .itunesu {
		 background-position: -215px 0 
	}
	 .social.half .rss {
		 background-position: -258px 0 
	}
	 .social.half .tumblr {
		 background-position: -301px 0 
	}
	 .social.half .instagram {
		 background-position: -344px 0 
	}
	 .social.half .flickr {
		 background-position: -387px 0 
	}
	 .social.half .weibo {
		 background-position: -430px 0 
	}
	 .social.half .pinterest {
		 background-position: -472px 0;
		 width: 41px 
	}
	 .social.half .vimeo {
		 background-position: -516px 0 
	}
	 .social.half .more {
		 background-position: -602px 0;
		 width: 22px;
	}
	 .invert .social.half .more {
		 background-position: -559px 0 
	}
	 .social.third a, .social.third span {
		 height:30px;
		 width:30px;
	}
	 .social.third .twitter {
		 background-position: -32px 0 
	}
	 .social.third .googleplus {
		 background-position: -65px 0 
	}
	 .social.third .linkedin {
		 background-position: -97px 0 
	}
	 .social.third .youtube {
		 background-position: -129px 0 
	}
	 .social.third .itunesu {
		 background-position: -161px 0 
	}
	 .social.third .rss {
		 background-position: -193px 0 
	}
	 .social.third .tumblr {
		 background-position: -226px 0 
	}
	 .social.third .instagram {
		 background-position: -258px 0 
	}
	 .social.third .flickr {
		 background-position: -290px 0 
	}
	 .social.third .weibo {
		 background-position: -322px 0 
	}
	 .social.third .pinterest {
		 background-position: -354px 0 
	}
	 .social.third .vimeo {
		 background-position: -387px 0 
	}
	 .social.third .more {
		 background-position: -451px 0;
		 width: 17px;
	}
	 .invert .social.third .more {
		 background-position: -419px 0 
	}
	/* =============== Form elements =============== */
	 input, textarea {
		 background: #fff;
		 border: 1px solid rgba(0,0,0,.35);
		 font-size: 1em;
		 margin: .25em 0;
		 padding: .35em .5em;
		 position:relative;
		 display: inline-block;
		 max-width: calc(100% - 6px - .5em);
	}
	 input[type=submit] {
		 margin: 0 
	}
	 input[type="radio"], input[type="checkbox"] {
		 margin-left: 2px;
	}
	 input:not([type="radio"]), textarea, select {
		 border-radius:0;
	}
	 select {
		 background:#fff;
		 border: 1px solid rgba(0,0,0,.35);
		 color:#777;
		 margin: .25em 0;
		 padding: .25em;
		 max-width: 100%;
	}
	 select:focus, input:focus, textarea:focus {
		 background-color:#e5e5e5;
		 outline: none;
	}
	 textarea {
		 max-height: 20em;
		 min-height: 5em;
		 min-width: 50%;
		 max-width:calc(100% - 2px - .5em);
		 overflow: auto;
		 width: 100%;
	}
	/* ================ Buttons & CTAs =============== */
	 a.btn, a.btn:visited, button, input[type=submit] {
		 background-color: rgba(0,0,0,.6);
		 border: 0 none;
		 border-top: 2px solid transparent;
		/* so regular .btn is as tall as ghost */
		 border-bottom: 2px solid rgba(0,0,0,.35);
		 border-radius:0;
		/* override browsers who round teh buttons */
		 color: #fff;
		 display: inline-block;
		 line-height: 1.15em;
		 margin-bottom:1em;
		 padding:1em 1.35em;
		 outline: none;
	}
	 a.btn.small, a.btn.small:visited, button.small, input[type=submit].small {
		 padding: .35em .5em;
	}
	 a.btn:last-child, button:last-child, input[type=submit]:last-child {
		 margin-bottom:0 
	}
	 a.btn.wide {
		 display: block;
		 padding: 1.5em;
		 text-align: center;
	}
	 a.btn.featured {
		 display: block;
		 margin: 2em auto;
		 text-align: center;
		 width: 300px;
		 background-color: #067;
		/* the teal color*/
		 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	}
	 a.btn:hover, a.btn:focus, button:hover, button:focus, input[type=submit]:hover, input[type=submit]:focus {
		 background-color: rgba(0,0,0,.8);
	}
	 a.btn.featured:hover, a.btn.featured:focus, button.featured:hover, button.featured:focus {
		 background-color: #045;
	}
	 a.btn.ghost, a.btn.ghost:visited, button.ghost, input[type=submit].ghost {
		 background-color: transparent;
		 border: 2px solid rgba(0,0,0,.5);
		 color: rgba(0,0,0,.6);
	}
	 a.btn.ghost:hover, a.btn.ghost:focus, button.ghost:hover, button.ghost:focus, input[type=submit].ghost:hover, input[type=submit].ghost:focus {
		 color: #c00;
		 border-color: #c00;
	}
	 .invert a.btn.ghost, .invert a.btn.ghost:visited, .invert button.ghost, .invert input[type=submit].ghost {
		 color: #fff;
		 border-color: #fff;
	}
	 .invert a.btn.ghost:hover, .invert a.btn.ghost:focus, .invert button.ghost:hover, .invert button.ghost:focus, .invert input[type=submit].ghost:hover, .invert input[type=submit].ghost:focus {
		 color: #fff;
		 border-color: #fff;
		 background-color: rgba(0,0,0,.35);
	}
	 .cta, a.cta {
		 border-bottom-color: transparent;
		 color: #555;
		 display: inline-block;
		 font-size: 90%;
		 font-weight: 700;
		 margin-right: .15em;
		 text-transform: uppercase;
	}
	 .cta:after {
		 content: " \25BA";
		 display: inline;
		 position: relative;
		 font-size: 75%;
		 top: -1px;
		 margin-left: .15em;
	}
	 .cta:focus, a.cta:focus, .cta:hover, a.cta:hover, a:focus .cta, a:hover .cta {
		 color: #c00;
	}
	 .invert .cta {
		 border-bottom: none;
		 color: #fff;
	}
	/* ================================ Helper Classes =============================== */
	 .circle img, img.circle {
		 border-radius: 50% 
	}
	 .pointer {
		 cursor:pointer;
		 display: block;
	}
	 .hr {
		 border-bottom: 1px solid rgba(0,0,0,.2);
		 clear:both;
		 display:block;
		 margin-bottom: 1em;
		 max-width: 100% !important;
	}
	 .border {
		 border: 1px solid rgba(0,0,0,.2) 
	}
	 .noborder, .noborder td, .noborder th {
		 border: none !important;
		 padding-left: 0;
	}
	 .noborder td:last-child, .noborder th:last-child {
		 padding-right: 0;
	}
	 .rule-top {
		 border-top: 1px solid rgba(0,0,0,.2);
	}
	 .rule-bottom, p.rule-bottom {
		 border-bottom: 1px solid rgba(0,0,0,.2);
		 padding-bottom: .125em;
	}
	 .invert .hr, .invert .border, .invert .rule-top, .invert .rule-bottom {
		 border-color: rgba(255,255,255,.5);
	}
	 .invert noscript, .invert div[role="alert"], .invert .alert {
		 background-color: #fff;
		 padding: .5em .65em;
	}
	 noscript, noscript a, noscript a:visited, noscript a:hover, noscript a:focus, div[role="alert"], p[role="alert"], p[role="alert"] a, p[role="alert"] a:visited, p[role="alert"] a:hover, p[role="alert"] a:focus, .alert, .alert p, .alert a, .alert a:visited, .alert a:hover, .alert a:focus {
		 color:red !important;
		 text-shadow: none;
	}
	 noscript a, p[role="alert"] a, .alert a {
		 border-bottom: 1px solid !important 
	}
	 div:not(.hero) > .caption {
		 max-width:66%; /* was 36 */
		 font-size:90%;
	}
	.caption img {
		width:120%; /* was 100 */
		max-width: 200%;
        position: relative;
        left: -35%;
        z-index: -1;
	}
	.caption:after {
	    content: "";
	    background-image: linear-gradient(to left, #FFF , #FFF, rgba(255,255,255,.7), rgba(255,255,255,0));
	    position: absolute;
	    right: 0; width: 60%; height: 100%; z-index: -1;
	}
	 .floatleft, img.floatleft, .floatleft img, .floatleft.caption {
		 float:left;
		 margin:0 15px 15px 0;
		 padding-bottom: 0;
	}
	 .floatright, img.floatright, .floatright img, .floatright.caption {
		 float:right;
		 margin:0 0 15px 15px;
		 padding-bottom: 0;
	}
	 .caption.thumb, .thumb img {
		margin-bottom:0;
		margin-right: -28%;
        overflow: hidden;
        position: relative;
	}
	 .aligncenter {
		 text-align:center !important 
	}
	 .alignright {
		 text-align:right !important 
	}
	 .clear {
		 clear:both 
	}
	 .hide {
		 display: none !important 
	}
	 .show {
		 display: block !important 
	}
	 .fixed {
		 position: fixed 
	}
	 .overflow-hidden {
		 overflow: hidden !important 
	}
	 .overflow-auto {
		 overflow: auto !important 
	}
	 .error {
		 background: #fdd;
		 padding: 1em;
		 box-sizing: border-box;
		 display: block;
		 border: 1px solid;
	}
	 a.external:after {
		 background: url(../site-images/cmu/icon-leave-site.png) no-repeat -9999px;
		 content: url(../site-images/cmu/icon-leave-site-grey.png);
		 padding-left: 5px;
		 display: inline;
		 vertical-align: top;
		 border: none;
		 position: relative;
		 top: 0;
		 width: 9px;
	}
	 a.external:hover:after, a.external:focus:after {
		 content: url(../site-images/cmu/icon-leave-site.png);
		 opacity: 1;
	}
	 nav.tree a.external:hover:after, nav.tree a.external:focus:after, nav.tree a.external:after {
		 content: url(../site-images/cmu/icon-leave-site-white.png);
		 opacity: .75;
	}
	/* ========================================================================== Flickity v1.2.1 - http://flickity.metafizzy.co ========================================================================== */
	 .flickity-enabled {
		 position: relative;
	}
	 .flickity-enabled:focus {
		 outline: none;
	}
	 .flickity-viewport {
		 overflow: hidden;
		 position: relative;
	}
	 .flickity-slider {
		 position: absolute;
		 width: 100%;
	}
	/* prevent annoying flickity glitch where slides jump past each other */
	 .flickity-slider, .flickity-slider > div {
		 transition: none !important;
	}
	/* draggable */
	 .flickity-enabled.is-draggable {
		 -webkit-tap-highlight-color: transparent;
		 tap-highlight-color: transparent;
		 -webkit-user-select: none;
		 -moz-user-select: none;
		 -ms-user-select: none;
		 user-select: none;
	}
	 .flickity-enabled.is-draggable .flickity-viewport {
		 cursor: move;
		 cursor: -webkit-grab;
		 cursor: grab;
	}
	 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
		 cursor: -webkit-grabbing;
		 cursor: grabbing;
	}
	/* ---- previous/next buttons ---- */
	 .flickity-prev-next-button {
		 position: absolute;
		 top: 50%;
		 width: 30px;
		 height: 40px;
		 margin: 0;
		 padding: 0;
		 border: none;
		 background: white;
		 background: rgba(255,255,255,.75);
		 cursor: pointer;
		/* vertically center */
		 transform: translatey(-50%);
	}
	 .flickity-prev-next-button:hover, .flickity-prev-next-button:focus {
		 background: white;
	}
	 .flickity-prev-next-button:active {
		 opacity: 0.6 
	}
	 .flickity-prev-next-button.previous {
		 left: 0px;
	}
	 .flickity-prev-next-button.next {
		 transform: rotate(180deg) translatey(50%);
		 transform-origin: center;
		 right: 0px;
	}
	/* right to left */
	 .flickity-rtl .flickity-prev-next-button.previous {
		 left: auto;
		 right: 10px;
	}
	 .flickity-rtl .flickity-prev-next-button.next {
		 right: auto;
		 left: 10px;
	}
	 .flickity-prev-next-button:disabled {
		 filter: alpha(opacity=30);
		/* IE8 */
		 opacity: 0.3;
		 cursor: auto;
	}
	 .flickity-prev-next-button svg {
		 position: absolute;
		 left: 0;
		 top: 15%;
		 width: 100%;
		 height: 70%;
	}
	 .flickity-prev-next-button .arrow {
		 fill: #858585 
	}
	 .flickity-prev-next-button:hover .arrow, .flickity-prev-next-button:focus .arrow {
		 fill: #333 
	}
	/* color & size if no SVG - IE8 and Android 2.3 */
	 .flickity-prev-next-button.no-svg {
		 color: #858585;
		 font-size: 26px;
	}
	/* ---- page dots ---- */
	 .flickity-page-dots {
		 position: absolute;
		 bottom: 1em;
		 left: 51.35%;
		 margin: 0;
		 padding: 0;
	}
	 .flickity-rtl .flickity-page-dots {
		 direction: rtl;
	}
	 .flickity-page-dots .dot {
		 display: inline-block;
		 width: .75em;
		 height: 0.75em;
		 margin: 0 .65em 0 0;
		 background: #858585;
		 border-radius: 50%;
		 cursor: pointer;
		 padding: 0;
	}
	 .flickity-page-dots .dot.is-selected {
		 background-color: #333 
	}
	 .js-flickityCustom .flickity-viewport:after {
		 content: ".";
		 display: block;
		 clear: both;
		 visibility: hidden;
		 line-height: 0;
		 height: 0;
	}
	 .js-flickityCustom {
		 background-color:transparent;
		 position: relative;
		 width: 100%;
		 -ms-touch-action: pan-y;
	}
	 .no-js .js-flickityCustom {
		 cursor: auto;
		 display: block;
		 width: auto;
		 height: auto !important;
	}
	 .js-flickityCustom .flickity-viewport {
		 position: relative;
		 -webkit-transform: translate3d(0px, 0px, 0px);
	}
	 .js-flickityCustom .flickity-viewport {
		 -webkit-backface-visibility: hidden;
		 -moz-backface-visibility: hidden;
		 -ms-backface-visibility: hidden;
		 -webkit-transform: translate3d(0,0,0);
		 -moz-transform: translate3d(0,0,0);
		 -ms-transform: translate3d(0,0,0);
	}
	 .js-flickityCustom {
		 border-color: transparent;
		 margin: 0 auto;
		 padding:0;
		 transition:none !important;
	}
	 .js-flickityCustom:not(.invert) + div:not(.invert), div:not(.invert):not(.breadcrumbs) + .js-flickityCustom:not(.invert) {
		 border-top: 1px solid rgba(0,0,0,.2);
	}
	 #content > div:first-child + div:not(.js-flickityCustom) {
		 border-top: 0 none 
	}
	 .js-flickityCustom .grid > div {
		 padding-top:0;
		 padding-bottom:0;
	}
	 .js-flickityCustom .grid > div:first-child img {
		 width:100% 
	}
	 .js-flickityCustom .grid {
		 padding: 0;
		 width: 100%;
		 max-width: none;
		 margin: 0;
		 font-size: 100%;
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
		 padding-right: 1.25%;
		 width: 50%;
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n) {
		 padding: 1em 0 5em;
		 width: 39%;
	}
	 #content > .js-flickityCustom.tall:first-child, #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom:first-child .hero {
		 width: 100%;
	}
	 #content > .js-flickityCustom:first-child .flickity-page-dots {
		 padding: 0;
		 left: auto;
		 right: 9%;
		 bottom: 0;
		 background-color: rgba(255,255,255,.75);
		 padding: 10px;
		 cursor:default;
		 position: absolute;
		 line-height: 0;
		 transition: background-color 0.3s ease, right 0.3s ease;
	}
	 #content > .js-flickityCustom:first-child .flickity-page-dots:hover {
		 background-color: #fff 
	}
	 .menu-on #content > .js-flickityCustom:first-child .flickity-page-dots {
		 right: 2% 
	}
	 #content > .js-flickityCustom:first-child .flickity-page-dots .dot:last-child {
		 margin-right: 0 
	}
	 #content > .js-flickityCustom:first-child + div.boxes {
		 padding-top: 3.65em 
	}
	 .no-js #content > .js-flickityCustom.tall:first-child, .no-js #content > .js-flickityCustom:first-child .flickity-viewport {
		 height: auto;
		 max-height: none;
	}
	 .no-js #content > .js-flickityCustom:first-child .hero {
		 height: auto;
		 min-height: 700px;
	}
	/* Carousels on larger touch devices ... Be sure to update media query version also (around line 2430)! */
	 .touch .js-flickityCustom .grid > div:nth-of-type(2n) {
		 padding-bottom: 2em 
	}
	 .touch #content > .js-flickityCustom:first-child + div:not(.breadcrumbs) {
		 padding-top: 1.5em 
	}
	/* ========================================== Special CSS Effects for all devices ========================================== */
	 @media not print {
		 iframe {
			/* can you not? transition: height 0.3s ease;
			 */
			 max-width: 100%;
			/* prevent horizontal scrolling */
		}
		 a.arrow, .collapsed a:before, .inquiry:before {
			 -webkit-transition: -webkit-transform 0.3s ease;
			 -moz-transition: -moz-transform 0.3s ease;
			 -o-transition: -o-transform 0.3s ease;
			 transition: transform 0.3s ease;
		}
		/* HOW ABOUT NO! Stop animating all of the things and making the website swim before my eyes... body:not(.touch) h1, body:not(.touch) header, body:not(.touch) div, body:not(.touch) nav, body:not(.touch) span, body:not(.touch) input, body:not(.touch) button, body:not(.touch) a, body:not(.touch) img, body:not(.touch) p, body:not(.touch) strong, body:not(.touch) b, body:not(.touch) em, body:not(.touch) i {
			 transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, margin 0.3s ease, min-height 0.3s ease, max-width 0.3s ease, opacity 0.3s ease, padding-left 0.3s ease, padding-right 0.3s ease, left 0.3s ease, right 0.3s ease, text-shadow 0.3s ease, width 0.3s ease;
		}
		 nav h1, #sitename h1, #sitename h2 {
			 transition: font-size 0.3s ease, height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
		}
		 */
		 body:not(.touch) a.external:after {
			 transition: opacity 0.2s ease 
		}
		 body:not(.touch) .events li a > span {
			 transition: left 0.3s ease, box-shadow 0.3s ease;
		}
		 body:not(.touch) .flickity-page-dots, body:not(.touch) .icon:before {
			 transition: ease background-color .3s, ease box-shadow .3s;
		}
		 body:not(.touch) .flickity-prev-next-button .arrow {
			 transition: fill .3s ease 
		}
		 .videothumbnail img {
			 transition: filter 0.25s;
			 width: 100%;
		}
		 .videothumbnail img:hover {
			 filter: brightness(120%);
		}
	}
	/* ============== Campus Alerts ============== */
	 .campusAlertOn p {
		 background-color: #b00 
	}
	 .campusAlertOff p {
		 background-color: #0b0 
	}
	 #campusAlert p {
		 color: #fff;
		 font-size: 90%;
		 padding: .5em 1em .36em;
		 margin: .35em 0 1em;
	}
	 #campusAlert p:before {
		 border-radius: 100%;
		 border: 3px solid #fff;
		 color: #fff;
		 display: block;
		 float: left;
		 font-weight: 700 !important;
		 height: 30px;
		 padding: 10px 0 0;
		 position: relative;
		 width: 40px;
	}
	 .campusAlertOn p:before {
		 background-color: #f00;
		 content:'!';
		 font-size: 200%;
		 left: -.25em;
		 text-align: center;
		 top: -.5em;
	}
	 .campusAlertOff p:before {
		 background-color: #0f0;
		 content:"\2713";
		 font-size: 150%;
		 left: -.35em;
		 text-indent: .49em;
		 top:-.65em;
	}
	 #campusAlert a {
		 color: #fff;
		 border-bottom: 1px solid;
	}
	 #campusAlert strong {
		 letter-spacing: 1px;
		 text-transform: uppercase;
	}
	/* ============================= Media Queries ============================= */
	/* Only load fonts and background images for screens tablet-sized and larger */
	 @media only screen and (min-width: 300px) {
		/* 768? A little harsh? Let's shrink that... */
		 html, button, input, select, textarea {
			 font-family:'Open Sans', 'Helvetica', sans-serif 
		}
		 .globe {
			 background-image:url(../site-images/cmu/bg-globe.png) 
		}
		 .plaid {
			 position: relative;
			 overflow: hidden;
			 z-index: 1;
		}
		/* http://www.sitepoint.com/css3-transform-background-image/ */
		 .plaid:before {
			 content: "";
			 position: absolute;
			 width: 9999px;
			/* to make sure the plaid repeats over tall grids */
			 height: 9999px;
			/* to make sure the plaid repeats over short, wide grids */
			 z-index: 0;
			 margin: 0 auto;
			 left:0;
			 top:0;
			 background-image: url(../site-images/cmu/bg-plaid-big.png);
			 background-repeat: repeat;
			 background-position: center center;
			 background-size: auto;
			 transform: rotate(41.35deg) translateX(-50%);
		}
		/* text on light grey plaid is very difficult to read, so turn the opacity down */
		 .plaid:not(.invert):not(.boxes):not(.news):before {
			 opacity:.65 
		}
		/* "visual enhancement overlay" makes low-res visuals look crisp (faux-chrispness) */
		 #content .mask:before {
			 content: "";
			 background: url(../site-images/cmu/overlay.png) repeat 0 0 scroll transparent;
			 display: block;
			 position: absolute;
			 top: 0;
			 left: 0;
			 height: 100%;
			 width: 100%;
			 z-index: 5;
		}
	}
	/* For BIG screens */
	 @media only screen and (min-width: 1700px) {
		 .roof, header > div, header nav, .hero > .text, .hero .caption, .grid, .breadcrumbs, .content {
			/* GUTTER */
			 padding-left: 15%;
			 padding-right: 15%;
		}
		 .homeside-bottom {
			 right:15% 
		}
		/* to match above GUTTER */
		 .alerts {
			 margin-right: 15%;
			 width: 35%;
		}
		 .menu-on .roof, .menu-on header > div, .menu-on header nav, .menu-on .hero > .text, .menu-on .hero .caption, .menu-on .grid, .menu-on .breadcrumbs, .menu-on .content {
			/*GUTTER*/
			 padding-left: 10%;
			 padding-right: 10%;
		}
		 .menu-on .homeside-bottom {
			 right:10% 
		}
		/* to match above GUTTER */
		 .menu-on .alerts {
			 margin-right: 10%;
			 left: 55%;
		}
		 .menu-on #container {
			 width: calc(100% - 450px) 
		}
		 nav.tree {
			 right: -450px;
			 width: 450px;
		}
		 nav.tree li a {
			 padding-right: 70px 
		}
		 nav.tree a.arrow {
			 left: 412px 
		}
		 .roof.invert .wordmark {
			 width:23% 
		}
		 header.float + #content .hero {
			 background-position: center center 
		}
		 #content .hero .box {
			 width:calc(35% - 2em) 
		}
		 #content > .js-flickityCustom:first-child .flickity-page-dots, #content .hero .box.right {
			 right:15% 
		}
		 #content .hero .box.left {
			 left:15% 
		}
		 .menu-on #content > .js-flickityCustom:first-child .flickity-page-dots, .menu-on #content .hero .box.right{
			 right: 10% 
		}
		 .menu-on #content .hero .box.left {
			 left: 10% 
		}
		 #content .hero .small {
			 width:calc(27.222% - 2em) 
		}
		 #content .hero .large {
			 width:calc(54.444% - 2em) 
		}
		/* v5.2 nav doesn't play nice with Flickity. The easy fix was to comment out the max-width. This is why slideshows are huge on large screens. */
		/* #content > .js-flickityCustom {
			 max-width: 70% 
		}
		 */
		 #content > .js-flickityCustom:not(:first-child):not(.invert):not(.grey) {
			 border: 1px solid rgba(0,0,0,.2) 
		}
		 .invert + .js-flickityCustom {
			 border: 0 none 
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n) {
			 width: 47.35% 
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
			 padding-right: 1.5% 
		}
		 .js-flickityCustom:not(.invert) + div:not(.invert):not(.js-flickityCustom) {
			 border-top: 0 none 
		}
	}
	/* For smaller, desktop-sized screens */
	 @media only screen and (max-width: 1300px) {
		 .roof, header > div, header nav, .hero > .text, .hero .caption, .grid, .breadcrumbs, .content {
			/*GUTTER*/
			 padding-left: 2%;
			 padding-right: 2%;
		}
		 .homeside-bottom {
			 right:2% 
		}
		/* to match above GUTTER*/
		 .alerts {
			 margin-right: 2%;
			 width: 42%;
			 left: 56%;
			/* different than usual to avoid overlapping the title if multiple */
		}
		 .roof a.wordmark, .roof form {
			 width: 25%;
		}
		 .roof.invert .wordmark {
			 width: 25% 
		}
		/* nav.tree.b is the alternate style for sites with inverted roof */
		 nav.tree.b {
			 padding-top: 3.5em 
		}
		 #content .hero {
			 min-height: 400px 
		}
		 #content .hero .box {
			 font-size: 90%;
			 width:calc(48% - 2em);
		}
		 #content > .js-flickityCustom:first-child .flickity-page-dots, #content .hero .box.right {
			 right:2% 
		}
		 #content .hero .box.left {
			 left:2% 
		}
		 #content .hero .small {
			 width:calc(37.222% - 2em) 
		}
		 #content .hero .large {
			 width:calc(74.444% - 2em) 
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n) {
			 width: 46.5% 
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
			 padding-right: 1.45% 
		}
		/* #sitename h1,*/
		 #content .hero > div.text h1 {
			 font-size: 2.15em 
		}
		 nav h1, 
		/* #sitename h2,*/
		 #content .hero > div.text h2 {
			 font-size: 1.5em 
		}
	}
	/* For tablet-sized screens */
	 @media only screen and (max-width: 960px) {
		 .roof .quicklinks {
			 right: 0em;
			/* move over because menu button has moved down */
		}
		 #sitename h1 {
			 font-size: 2.15em 
		}
		 #sitename h2 {
			 font-size: 1.5em 
		}
		 .breadcrumbs {
			 font-size: 80%;
		}
		 nav.tree {
			 padding-top: 4.5em 
		}
		 nav.tree form {
			 display: block;
			 position: absolute;
			 width: 100%;
			/* was calc(100%-4.5em) */
			/*padding: 13px 0 0 1.5em;
			 */
			 margin: 0;
			 top: 0;
		}
		 nav.tree input[placeholder=Search] {
			/*margin: 0;
			 border: none;
			 /width: 100%;
			 padding-right: 10px;
			 color: #fff;
			 background-color: rgba(255,255,255,.15);
			 */
		}
		 nav.tree input[placeholder=Search]:focus {
			/*color: #fff;
			 background-color: #666;
			 */
		}
		 nav.tree label.siteSearch {
			 display: none;
			 position: relative;
			 width: auto;
			 left: 0;
			 text-align: left;
			 top: 2px !important;
		}
		 nav.tree input[name=site] {
			 float: left;
			 padding: 0;
			 margin: .45em 0 0 0;
		}
		 nav.tree button {
			 height: auto;
			 padding: 6px 14px;
		}
		 nav.tree h1 {
			 display: none;
			 height: 0;
			 line-height: 0;
			 padding:0;
		}
		 .menu-btn {
			/* Menu Button */
			 margin-top: 62px !important;
		}
		 nav.tree.b .menu-btn {
			 margin-top: 13px 
		}
		 nav.tree li > a:hover:not(.arrow) {
			 background-color: transparent 
		}
		 .menu-on #container {
			 width: 100%;
			/* This was auto, I'm unclear why */
			 position: fixed;
		}
		/* .menu-on .menu-btn {
			 display: none 
		}
		 keep this visible */
		/* fixes page resize on mobile */
		 .menu-on table {
			 width: 80vw 
		}
		 .menu-btn, .menu-on nav.tree .menu-btn {
			 display: block 
		}
		 .menu-on #overlay {
			 display: block;
			 background-color: rgba(255,255,255,.65);
			 z-index: 101;
		}
		 .menu-on > nav.tree {
			 z-index: 102;
		}
		 .roof a.wordmark {
			 width: 42% 
		}
		 .roof.invert .wordmark {
			 width: 33.333% 
		}
		 .grid, .content {
			/*not breadcrumbs */
			 padding-top: 1.5em;
			 padding-bottom: 1.5em;
		}
		/* #content > .js-flickityCustom:first-child + div:not(.breadcrumbs) {
			 padding-top: 1.5em 
		}
		 */
		 #container > header .wordmark img {
			 max-width: 33.333% 
		}
		 header nav {
			 font-size: 90% 
		}
		 a.external:after {
			 top: auto 
		}
		/* .content > div:first-child {
			 width: 64.666% I don't think we want this anymore... 
		}
		 */
		 .content .sidebar {
			 margin-left: 4% 
		}
		 a.btn.wide {
			 padding: .65em 
		}
		 .ios .cta:after {
			/* prevent emoji on ios */
			 content: " \25B8";
			 font-size: 100%;
			 margin-left: 0;
		}
		 .column4 > div, .column4 > div:nth-of-type(4n) {
			 padding-right: 3%;
			 width: 31.333%;
		}
		 .column4 > div:nth-of-type(3n) {
			 padding-right: 0 
		}
		 .boxes {
			 padding-bottom: 0 
		}
		 .boxes > div {
			 margin-bottom: 1.5em 
		}
		 .column4.boxes > div {
			 margin: 0 0 1.5em;
			 width:32%;
		}
		 .column4.boxes > div:nth-of-type(3n-1) {
			 margin-left: 2%;
			 margin-right: 2%;
		}
		 .column4.photos div.photo {
			 flex-basis: 50% 
		}
		 .column4 > div.photo:nth-of-type(3n) {
			 margin-right: 0 
		}
		 .content .sidebar div h1, .grid h1 {
			 font-size: 2em 
		}
		 .grid .floatleft, .grid .floatright {
			 float: none 
		}
		 .news.column2 div.img {
			 height: 225px 
		}
		 .news.column3 div.img, .news.column4 div.img {
			 height: 150px 
		}
		 .js-flickityCustom .grid {
			 font-size: 90% 
		}
		 .js-flickityCustom .grid > div {
			 padding: 1.5em 2% 
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n) {
			 padding-top: 1em;
			 width: 42%;
			/* to make room for controls */
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
			 padding-right: 3%;
			 width: 47%;
		}
		 header:not(.float) + #content .hero > div.text, #content .js-flickityCustom .hero > div.text {
			 padding: 0 2%;
			 height: 100%;
		}
		 #content .hero iframe {
			 display: none 
		}
		 .grid.nav nav ul li:first-child, .grid.nav nav ul li:last-child {
			 padding: .35em 0;
		}
		 .contact > p {
			 display: block 
		}
		/* Added, probably overrides things above */
		 .roof {
			 position: sticky;
			 top: -49px;
			 right: 0;
			 height: 103px;
			/* added */
		}
		 .roof a.wordmark {
			 width: 170px;
			/* changed */
			 margin: 10px 0 6px;
			 min-width: 0;
		}
		 .roof form {
			 display: block;
			 padding-top: 0;
			 top: auto;
			 width: calc(100% - 20px);
			 padding: 0;
			 margin: 0;
			 max-width: none;
			 position: absolute;
			 left: 0;
		}
		 .roof div {
			 display: block;
			 padding-bottom: .5em;
		}
	}
	/* For small, mobile-sized screens */
	 @media only screen and (max-width: 767px) {
		 body, html {
			 height: auto 
		}
		 body {
			 background-image: none !important 
		}
		/* h1 {
			 font-size: 2em 
		}
		 */
		 .roof {
			/*position: sticky;
			 top: -50px;
			 height: 125px;
			 already added above */
		}
		 .mobile header > div nav {
			 display: none;
			 z-index: 1;
		}
		 .roof.fixed {
			 box-shadow: 0 0 1em rgba(0,0,0,.2);
		}
		 #sitename > div, #sitename.large > div {
			 width: auto;
		}
		 #sitename > a, #sitename.large > a {
			 padding: 1em 0 .5em;
			 display: block;
			 max-width: 100%;
			 width: auto;
			 text-align: left;
		}
		 #sitename img, #sitename.large img {
			 max-width: 50%;
			 width: auto;
		}
		 #sitename h1 {
			 line-height: 1.15em;
			 padding-bottom: 5px;
		}
		 .roof.fixed + #sitename, header:not(.float) .roof.fixed + #sitename {
			 padding-bottom: 0;
		}
		 .roof.fixed + #sitename h2 {
			 padding-bottom: 0;
		}
		 #sitename, #content {
			 transition: none;
		}
		 #content > .breadcrumbs:first-child {
			 padding-top: 0 
		}
		 #content > .js-flickityCustom:first-child, header.float + #content > .js-flickityCustom:first-child, #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom:first-child .hero, #content > .js-flickityCustom.tall:first-child, #content .hero, #content > .tall, header.float + #content, header.float + #content .hero {
			 background-position: center center;
			 height: auto !important;
			 min-height: 400px;
		}
		 #content .hero .box h1 {
			 font-size:1.5em 
		}
		/* header nav {
			 display: none NO! Who asked you, anyway? ugh... 
		}
		 */
		 #container > header.float {
			 position: initial 
		}
		 .roof:not(.invert) {
			 background-color: #fff 
		}
		 .roof div {
			 display: block;
			 padding-bottom: .5em;
		}
		 .roof.invert .wordmark, .roof a.wordmark {
			/*width: 40%;
			 */
			 min-width: 0;
		}
		/* .roof form {
			 display: block;
			 padding-top: 0;
			 top: auto;
			 width: 85%;
			 padding: 0;
			 max-width: none;
			 position: absolute;
			 right: 0;
		}
		 */
		 .roof .menu-btn + form {
			 right: 0 
		}
		 input[placeholder="Search"] {
			 background-image: url(../site-images/cmu/icon-magnify.png);
			 background-repeat: no-repeat;
			 background-position: 98% center;
			 background-size: auto 75%;
			 font-size: 16px;
			/* prevents browser zoom on iOS */
		}
		 .roof input[placeholder="Search"] {
			 padding-bottom: .35em;
			 padding-top: .35em;
			 background-image: url(../site-images/cmu/icon-magnify.png);
			 background-repeat: no-repeat;
			 background-position: 98% center;
			 background-size: auto 80%;
			 font-size: 13px;
			/* prevents browser zoom on iOS */
		}
		 .search button {
			 height: 100%;
			 margin: 0;
			 display: none;
		}
		 .search input[name=site] {
			 float: left;
			 margin-top: .45em;
		}
		 a.external:after {
			 content: url(../site-images/cmu/icon-leave-site-grey.png);
			 opacity:1;
		}
		 .grid.nav nav h1 {
			 font-size: 100%;
			 text-transform: none;
		}
		 nav ul a {
			 letter-spacing: .05em 
		}
		 nav.tree div > ul > li:not(.secondary) > a {
			 letter-spacing: .075em 
		}
		 .float .roof.fixed:not(.invert) {
			 border-bottom: 1px solid rgba(0,0,0,.2);
		}
		 header:not(.float) #sitename {
			 padding-left: 0;
			 padding-right: 0;
			 margin: 0 2%;
		}
		 nav a {
			 -webkit-tap-highlight-color: transparent 
		}
		 nav.tree {
			/*right: -85%;
			 width: 85%;
			 */
		}
		 nav.tree li a {
			 padding-right: 3em 
		}
		 .scrolldown {
			 display: none 
		}
		 nav.tree div > ul {
			 width: 100% 
		}
		 nav.tree.b .menu-btn, div.invert .menu-btn {
			 margin-top:73px;
			/* was 13 */
		}
		 nav.tree a.arrow {
			 left: auto;
			 right: 0;
		}
		 #content .hero > div.text {
			 bottom: auto !important;
			/* overrides JS */
			 height: calc(100% - 1em);
			 padding-top: .5em;
		}
		 #content .hero .box.left, #content .hero .box.right {
			 background-color: rgba(255,255,255,.85);
			 bottom: 0;
			 display: block;
			 left: auto;
			 right: auto;
			 width: auto;
		}
		 #content > .tall p.caption {
			 bottom: 0;
			 padding-right: 2%;
			 width: 100%;
		}
		 .grid, .grid > div, .content {
			 display: block;
			 padding-bottom: 2em;
			 padding-top: 2em;
		}
		 .column2 > div, .column2 > div:nth-of-type(2n-1), .column3 > div, .column4 > div, .column2.boxes > div, .column3.boxes > div, .column3.boxes > div:nth-of-type(3n-1), .column4.boxes > div, .column4.boxes > div:nth-of-type(3n-1), .content .sidebar, .content > div:first-child, .js-flickityCustom .grid > div:nth-of-type(2n), .js-flickityCustom .grid > div:nth-of-type(2n-1) {
			 display: block;
			 -webkit-box-flex: none;
			 -moz-box-flex: none;
			 -webkit-flex: none;
			 -ms-flex: none;
			 flex: none;
			 margin: 0;
			 padding-right: 0;
			 padding-left: 0;
			 width: auto;
		}
		 .column2 > div:nth-of-type(2n-1), .column4 > div:nth-of-type(2n-1), .column4 > div:nth-of-type(4n) {
			 padding-right: 0;
			 margin-right: 0;
			 width: auto;
		}
		 .grid .list {
			 padding:0 
		}
		 .grid .list:not(:first-child) h2 {
			 padding-top:1em 
		}
		 .grid div:not(.list) + .list ul, .grid .list:not(:last-child) ul {
			 border-bottom: 0 none 
		}
		 .boxes {
			 display: block;
			 padding-top: 1em;
			 padding-bottom: 0;
			 overflow: hidden;
		}
		 .boxes > div {
			 margin-bottom: 1em !important;
			 padding: 1em 4% !important;
			 font-size: inherit;
		}
		 .column4.boxes > div:nth-of-type(2n-1), .column4.boxes > div {
			 margin-right: 0 
		}
		 .grid:not(.boxes) > div:first-child {
			 padding-top: 0 
		}
		 .grid:not(.boxes) > div:last-child {
			 padding-bottom: 0 
		}
		 .grid.photos {
			 padding: 2em 0 0;
			 width: auto;
		}
		 .column2:not(.photos) div.photo, .column3:not(.photos) div.photo, .column4:not(.photos) div.photo {
			 margin:1em 0 !important;
		}
		 .grid.photos h1 {
			 padding-left: 2%;
			 padding-right: 2%;
		}
		 .grid > div.photo > a div, .grid.photos > div > a div {
			 padding: 1.15em 5%;
			 width: 90%;
		}
		 .grid.nav > div {
			 padding-bottom: 2em 
		}
		 .js-flickityCustom {
			 border: 0 none 
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n) {
			 padding: 0 2% 3em;
			 font-size: 100%;
		}
		 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
			 padding: 1em 2% !important;
		}
		 #content > div.content:first-child, #content > div.grid:first-child:not(.invert) {
			 padding-top:1em
		}
		 .content .sidebar {
			 margin-top: 2em 
		}
		 .content .sidebar div {
			 font-size:inherit 
		}
		 .content .sidebar div.left-rule {
			 border-left: 0 none;
			 padding: 0;
		}
		 .content .sidebar div.simple {
			 margin-top: 2em;
			 padding: 0;
		}
		 div:not(.hero) > .caption {
			 max-width:100%;
			 margin-left: 0;
			 margin-right: 0;
			 float: none;
			 margin-bottom: -25%;
		}
		 div:not(.hero) > .caption img {
			 margin-left: 0;
			 margin-right: 0;
		}
		 .collapsed a:focus, .collapsed a:hover {
			 color:#c00;
		}
		 .news.column2 div.img, .news.column3 div.img, .news.column4 div.img {
			 height: 225px;
		}
		 .news.grey a > :not(div), .news.darkgrey a > :not(div), .news.red a > :not(div), .news.gold a > :not(div), .news.teal a > :not(div), .news.blue a > :not(div), .news.green a > :not(div), .news.darkgreen a > :not(div) {
			 padding-left: 3%;
			 padding-right: 3%;
		}
		 .news > div {
			 padding-bottom: 0;
		}
		 .grid.nav nav ul li:first-child, .grid.nav nav ul li:last-child {
			 padding: 0;
		}
		 .loadmore {
			 padding: 0;
			 width: auto;
		}
		 body:not(.no-js) .contact > p a {
			 text-indent:0;
			 margin-bottom: 1em;
		}
		 .contact span {
			 display: block 
		}
		 .contact address {
			 display: block;
			 padding: 1em 0 0;
			 width: auto;
		}
		.thumb img {
			margin-bottom:15px;
			left: 0;
            width: 100%;
		}
		.caption:after {
		    background-image: linear-gradient(to top, #FFF , #FFF, rgba(255,255,255,.7), rgba(255,255,255,0)); position: absolute; bottom: 0; width: 100%; height: 50%; z-index: -1;
		}
		 .flickity-page-dots {
			 display:none 
		}
		/* mobile view for mobile homepage layout */
		 .homeside-top {
			 display: block;
			 float: none;
		}
		 .homeside-bottom {
			 display: block;
			 position: static;
			 float: none;
			 padding-top: 2em;
		}
		 .homepage .news {
			 margin-right: 0;
			 padding-right: 0% !important;
			 width: 100% !important;
		}
		 .homepage .news div {
			 width: 100% !important;
			 padding-right: 0 !important;
		}
		 .homepage .news div.img {
			 height: 280px;
		}
		 .homepage header {
			 background-image: url("../site-images/dragon-watermark.png"), linear-gradient(to right, rgba(153,0,0,1) 20%, rgba(153,0,0,0) 95%), url("../site-images/headerbgphoto.jpg") !important;
			 background-repeat: no-repeat, no-repeat, no-repeat;
			 background-position: 20px 10px, 50% 50%, 50% 0px !important;
			 background-size: 240px, 100%, auto 500px !important;
			/* background-size: 30vw, 100%, auto 500px !important;
			 */
		}
		/* Active Alerts */
		 .alerts {
			 min-height:50px;
			 width: calc(100% - 2em ) !important;
			 margin-bottom: 0em;
			 position: static !important;
			 box-sizing: border-box;
			 margin-left: 1em;
			 margin-right: 1em;
			 padding-left: 0;
		}
	}
	/* =========================================== very small =============================*/
	 @media only screen and (max-width: 600px) {
		 .content .float-right {
			 display: block;
			 float: none;
			 margin-left: auto;
			 margin-right: auto;
			 margin-bottom: 2em;
			 padding-top: 1em;
			 max-width: 75% !important;
		}
		 .content .float-left {
			 display: block;
			 float: none;
			 margin-left: auto;
			 margin-right: auto;
			 margin-bottom: 2em;
			 padding-top: 1em;
			 max-width: 75% !important;
		}
	}
	/* ========================================================================== More Helper Classes (these need to go after the Media Queries) ========================================================================== */
	 .hidden {
		 display: none !important;
		 visibility: hidden !important;
	}
	 .invisible {
		 visibility: hidden !important 
	}
	/* ================== Print styles ================== */
	 #wordmarkPrint, img[alt='print'] {
		 display:none 
	}
	 @page {
		 size: auto;
		/* auto is the initial value */
		/* this affects the margin in the printer settings */
		 margin: 15mm 10mm 15mm 12mm;
	}
	 @media print {
		 * {
			 color:#333 !important;
			 line-height:normal !important;
			/*margin:0px !important;
			*/
			/*padding:0px !important;
			*/
			/*height:auto !important;
			*/
			 min-height:0px !important;
			 max-height:none !important;
			/*width:auto !important;
			*/
			 min-width:0px !important;
			 max-width:8in !important;
			 -moz-transition: none !important;
			 -o-transition: none !important;
			 -webkit-transition: none !important;
			 transition: none !important;
			 position:relative;
			 float:none !important;
			 box-sizing:border-box !important;
		}
		/* let's be more selective */
		 header, footer {
			background: none transparent !important;
		}
		 a:not(.btn) {
			 text-decoration:none !important;
			 border-bottom: none !important;
		}
		/* a:after{
			content:" [" attr(href) "] ";
			font-size:0.8em;
			font-weight:normal;
			color: #444;
		}
		 */
		 header, div, section, article, aside {
			 display:block;
		}
		 header > nav, #nav, .hero .cta, .menu-btn, .icon:before, iframe, #scrolldown, .roof, .loadmore, #navContainer {
			 display:none !important;
		}
		 #sitename h1 {
			 font-size:2.0em !important;
			 padding-top:30px !important;
			 color: #000 !important;
		}
		 body>header.float {
			 position: relative 
		}
		 header > div {
			 display:none !important;
		}
		 #wordmarkPrint {
			 display:block;
			 height:24px !important;
		}
		/*.breadcrumbs {
			 padding:20px 0px 20px 0px !important;
		}
		 */
		 .hero {
			 margin-bottom: 1.5em !important;
			 left: 0 !important;
		}
		 header.float + #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom.tall:first-child, #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom:first-child .hero, .flickity-slider {
			 height: auto !important;
		}
		 .hero .text {
			 position:relative !important;
			 display:block !important;
			 text-align:left !important;
			 margin-top:20px !important;
		}
		 .hero h1 {
			 text-shadow:none !important;
			 margin-bottom: 0 !important;
		}
		 .hero h2 {
			 text-shadow:none !important;
			 margin-bottom:4px !important;
		}
		 .hero p.caption {
			 position:relative !important;
			 font-size:1.0em !important;
		}
		 .content, .grid {
			 margin-bottom:20px !important;
		}
		 h1 {
			 margin-bottom:20px !important;
			 font-size:1.6em !important;
		}
		 h2 {
			 margin-bottom:20px !important;
			 font-size:1.4em !important;
		}
		 .sidebar {
			 display:none !important;
		}
		 .grid {
			 display:block !important;
			 page-break-inside:avoid;
		}
		 .grid.column2 {
			 display:block !important;
			 page-break-inside:auto;
		}
		 .grid.column2.grey > div > p > img {
			 width:100% !important;
		}
		 .grid.column2.red.invert > div {
			 width:50% !important;
			 padding:20px !important;
			 float:left;
		}
		 .grid.column3.boxes > div {
			 width:33% !important;
			 padding:20px !important;
			 float:left;
			 clear:both;
		}
		 .grid.column3.boxes > div > img {
			 width:100% !important;
		}
		 .grid.column4 > div {
			 width:25% !important;
			 padding:20px !important;
			 float:left;
		}
		 .grid.column4.boxes > div {
			 width:25% !important;
			 padding:20px !important;
			 float:left;
		}
		 .grid.column4.boxes > div > img {
			 width:100% !important;
		}
		 .grid.column4 > div > h2 {
			 font-size:1.0em !important;
		}
		 .grid div {
			 overflow:visible !important;
		}
		 .js-flickityCustom, .flickity-viewport {
			 width: auto !important;
			 overflow: visible !important;
			 overflow-y: visible !important;
			 overflow-x: visible !important;
			 transform: translate3d(0px, 0px, 0px) !important;
			 overflow: visible !important;
			 clear: both;
		}
		 .flickity-slider .grid, .hero .text, .hero .box {
			 position: relative !important;
			 left: 0 !important;
			 right: auto !important;
			 bottom: auto !important;
			 top: auto !important;
		}
		 .flickity-slider, .flickity-slider .hero {
			 position: relative !important;
			 transform: translateX(0) !important;
		}
		/* .grid.column4.boxes > div {
			 width: 25% !important;
			 margin: 1em !important;
			 display:block !important;
			 float:left !important;
		}
		 */
		 .grid.column4.boxes > div > h2 > img {
			/* width:40px !important;
			 */
			/* float:left !important;
			 */
			/* margin-right:20px !important;
			 */
			 margin-bottom:20px !important;
			 max-width: 100% !important;
		}
		 .grid.column4.boxes > div .hr {
			 margin-bottom:10px !important;
		}
		 .grid {
			 clear:both !important;
			 float:left !important;
		}
		 .photo {
			 transform:rotate(180deg);
			 max-width:50% !important;
		}
		 .photo h2 {
			 font-size:14px !important;
		}
		 .photo img {
			 transform:rotate(180deg);
			 max-width:100% !important;
		}
		 .photo div {
			 transform:rotate(180deg);
			 position:relative !important;
		}
		 .news {
			 margin-top:30px !important;
		}
		 .news > .photo {
			 width:33% !important;
			 padding:4px !important;
		}
		 .grid.column4 .photo {
			 width:25% !important;
		}
		 .grid.column4.nav {
			 display:none !important;
		}
		 .grid.column3.nav {
			 display:none !important;
		}
		 .events span {
			 position:relative !important;
			 border:1px solid #eee !important;
			 top:0px !important;
			 padding:6px;
			 margin-bottom:10px !important;
			 text-align:center !important;
		}
		 .events span > span {
			 position:relative !important;
			 border:0px !important;
			 top:0px !important;
			 background-color:#fff !important;
			 display:inline;
			 text-align:center !important;
		}
		 .events ul li {
			 display:block !important;
			 margin-bottom:10px !important;
			 padding:20px !important;
			 border:1px solid #ccc;
			 text-align:center !important;
		}
		 footer {
			 border-top: 1px solid #cccccc;
			 display:none !important;
			 clear:both;
		}
		 footer > div:nth-child(1) {
			 width: 100%;
		}
		 footer > div:nth-child(2) {
			 background-color: #00ff00;
			 display: none;
		}
		 .list {
			 display: block !important;
		}
		 .list li a {
			 padding: 6px !important;
		}
		 .grid.column2.boxes {
			 display: flex;
			 flex-wrap: wrap;
		}
		 .grid.column2.boxes div {
			 width: 40% !important;
			 border: 1px solid #ccc;
			 margin: 10px !important;
			 padding: 10px !important;
		}
		 .grid.column2.boxes div img {
			 margin: 0px 10px 10px 0px !important;
		}
		 .content > div:not(.sidebar) {
			 display: block !important;
			 vertical-align: top;
		}
		 .content p {
			 padding: 1em 0 !important 
		}
		 .content > div h2.collapsed {
			 margin-top: 20px !important;
			 font-weight: bold;
		}
		 .sidebar > div {
			 padding: 1em 0 !important 
		}
		 .sidebar img {
			 max-width: 50% !important 
		}
		 .left-rule {
			 border: none !important 
		}
		/* now override a LOT.... #content {
			max-width: 8in !important;
		}
		 */
		 .menu-on #container {
			width: 100% !important
		}
		/* No, no, no! */
		 .feedback-section, .feedback-section.grid.column2, footer > .legal, .contactscs > .university-wordmark {
			display: none !important;
		}
		 header, footer {
			box-shadow: none !important;
		}
		 .contactscs, .contactscs h2 {
			padding-top: 0 !important;
			 color: #333 !important;
			 width: 100%
		}
		 .contactscs > section {
			display: inline-block !important;
			 width: 45%
		}
		 .content p.note {
			 padding-left: 3em !important;
			 padding-right: 1em !important;
		}
		 .note:before {
			color: #888 !important;
		}
		/* open things */
		 .collapsed div[style] {
			display: block !important;
		}
		 .collapsed a::before {
			transform: rotate(90deg);
		}
		 th, .subtable td {
			background-color: #333 !important;
			 color: #FFF !important
		}
		 tr {
			border-bottom: solid 1px #CCC !important
		}
		 .av-table-row.closed {
			height: 400px !important
		}
		 a.pdflink:after{
			content:" - https://computing.cs.cmu.edu/desktop/" attr(href);
			font-size:1em;
			font-weight:normal;
		}
		 .homeside-top, .news, .homeside-bottom {
			width: 100% !important
		}
		 table.dashboard tr {
			height: 3em !important;
		}
		 .dashboard tbody tr td:last-child {
			bottom: 5px !important
		}
		 ol.steps li {
			 page-break-inside: avoid !important;
			 box-shadow: none !important;
			 border: solid 2pt #444 !important;
			 background: none !important;
		}
		 ol.steps > li > span::before {
			 position: initial;
			 font-size: 2em;
			 color: #000;
			 margin-right: .25em;
		}
	}
	/* * * * * * * * * * * ]|o|[ SPECIAL-CASE STYLES ]|o|[ * * * * * * * * * * */
	 .tablewrapper {
		 width: 100%;
		 overflow-x: scroll;
	}
	
	.tag span {
		/* mostly used in AV table, but could be elsewhere */
		background: rgba(250,250,250,0.8) !important;
    	color: #000 !important;
    	border-radius: 0px .9em .9em 0px;
		position: relative;
		left: .3em;
		padding-left: .3em;
		padding-right: 0.5em;
		padding-top: .05em;
		padding-bottom: .05em;
		margin-left: -0.3em;
		display: inline-block;
	}
	/* Special styles just for the AV table */
	 table.av-table {
		 margin: auto;
		 border-bottom: solid 5px #555;
		 background: #EEE;
		 width: 100%;
		 min-width: 300px;
	}
	 .av-table tr.tableheader {
		 background-color: #333 !important;
		 display: block;
		 position: relative;
	}
	 table.av-table th {
		 background-color: #333;
		 color: white;
		 padding-top: 1em;
		 padding-bottom: .5em;
		 border-bottom: none !important;
		 display: inline-block;
		 box-sizing: border-box;
	}
	 .av-table-row.closed:hover {
		 box-shadow: inset 0 -15px 12px -10px hsla(0,0%,0%,.3);
	}
	 .av-table-row:hover {
		 background: #EEE;
	}
	 .av-table-row .location .av-thumb:after {
		 content: "";
		 display: inline-block;
		 width: 4.5em;
		 height: 4.5em;
		 background: rgba(187,0,0,0);
	}
	 .av-table-row:not(.disabled):hover .location .av-thumb:after {
		 background: rgba(187,0,0,0.5);
	}
	 .av-table tbody {
		 display: block;
		 width: 100%;
	}
	 .av-table-row {
		 position: relative;
		 width: 100%;
		 background: yellow;
		 display: block;
		 overflow: hidden;
		 transition: height .2s, box-shadow .2s;
		 transition-timing-function: ease-in-out;
		 cursor: pointer;
	}
	 .av-table-row.closed {
		 height: 4.5em;
		 box-shadow: inset 0 -15px 10px -10px hsla(0,0%,0%,.25);
	}
	 .av-table-row.open {
		 height: 400px;
		 box-shadow: inset 0 -10px 5px -5px hsla(0,0%,0%,.1);
	}
	 .av-table td {
		 display: inline-block;
		 box-sizing: border-box;
	}
	 .av-table-row::before {
		/* the triangle */
		 content: ' ';
		 display: block;
		 position: absolute;
		 top: 1.25em;
		 left: 0.5em;
		 border-top: 1.25em solid transparent;
		 border-bottom: 1.25em solid transparent;
		 border-left: 1.25em solid rgba(255,255,255,.8);
		 vertical-align: middle;
		 margin-right: .7rem;
		 margin-left: 1rem;
		 transform: translateY(-2px);
		 transition: transform .2s ease-out;
		 z-index: 999;
	}
	 .av-table-row.open::before {
		 transform: rotate(90deg) translateX(-3px);
	}
	 .av-table-row .av-thumb {
		 display: inline-block;
		 width: 4.5em;
		 height: 4.5em;
		 background-size: cover;
		 background-position: center;
		 position: absolute;
		 left: 0;
		 top: 0;
	}
	/* b&w key things for browsers that don't support backdrop filters */
	 .av-table-row.disabled td>a {
		 color: #333 !important;
		 border-bottom-color: #666;
	}
	 .av-table-row.disabled .tag {
		 background-color: #333 !important;
	}
	 .av-table-row.disabled .av-thumb {
		 filter: grayscale(100%);
	}
	 .av-table-row.disabled iframe {
		 filter: grayscale(100%);
	}
	 .av-table-row.disabled:before {
		 filter: blur(1px);
	}
	 .av-table-row.disabled:after {
		 content: '';
		 display: block;
		 position: absolute;
		 top: 0;
		 bottom: 0;
		 right: 0;
		 left: 0;
		 background: rgba(160,160,160,.5);
		 z-index: 10;
		 pointer-events: none;
	}
	 .av-table-row.disabled .disabled-text {
		 display: block;
		 position: absolute;
		 text-align: center;
		 z-index: 50;
		 top: 1.5em;
		 width: 12em;
		 color: #FFF;
		 font-size: 16pt;
		 font-weight: 600;
		 opacity: 1 !important;
		 text-shadow: 0px 1px 2px #000000;
		 background: rgba(128,128,128,.5);
		 padding: 5px;
		 border-radius: 1em;
		 backdrop-filter: blur(2px);
		 -webkit-backdrop-filter: blur(2px);
	}
	/* the widths */
	 .av-table .location-header, .av-table .location {
		 width: 22%;
	}
	 .av-table .room-type-header, .av-table .room-type {
		 width: 20%;
	}
	 .av-table .seating-header, .av-table .seating {
		 width: 10%;
	}
	 .av-table .display-type-header, .av-table .display-type {
		 width: 28%;
	}
	 .av-table .audio-header, .av-table .audio {
		 width: 8%;
	}
	 .av-table .reserve-header, .av-table .reserve {
		 width: 12%;
		 text-align: center;
	}
	 .av-table .location {
		 position: relative;
		 padding-left: 5em;
	}
	 .panorama-header, .voip-location-header, .features-header, .last-updated-header {
		/*display: block !important;
		 */
		 position: absolute;
		 opacity: 0;
		/*still want screen readers to read these columns */
		 right: 0;
		/*stack against edge so doesn't leave table*/
	}
	 .av-table .audio span {
		 font-size: 0;
		 position: absolute;
	}
	 .features {
		 display: block;
		 position: absolute;
		 right: 0;
		 top: 5em;
		 width: 40%;
	}
	 .features ul {
		 list-style-type: none;
		 margin: 1em 0;
		 margin-top: .5em;
	}
	 .features::before {
		 display: block;
		 content: "Room features:";
		 border-bottom: solid 1px #BBB;
		 width: 100%;
	}
	 .voip-location {
		 display: block;
		 position: absolute;
		 right: 0;
		 top: 18em; /*14*/
		 width: 40%;
	}
	 .voip-location::before {
		 display: block;
		 content: "VOIP network outlet location:";
		 border-bottom: solid 1px #BBB;
		 width: 100%;
	}
	 .last-updated {
		 display: block;
		 text-align: right;
		 position: absolute;
		 right: 0;
		 top: 24em;
		 width: 40%;
		 opacity: .5;
	}
	 .last-updated:before {
		 display: inline;
		 content: "A/V last refreshed: ";
		 text-decoration: oblique;
	}
	 .panorama {
		 display: block;
		 position: absolute;
		 left: 0;
		 padding-left: 0;
		 top: 5em;
		 width: 60%;
	}
	/* AV Table responsiveness */
	 @media only speech {
		/* act like a normal table */
		 .av-table {
			 display: table !important;
		}
		 .av-table tr {
			 display: table-row !important;
		}
		 .av-table th {
			 display: table-cell !important;
		}
		 .av-table td {
			 display: table-cell !important;
		}
	}
	 @media only screen and (min-width: 2000px) {
		 .av-table .features-header {
			 background-color: #333;
			 opacity: 1;
			/*undo hiding */
			 color: white;
			 padding-top: 1em;
			 padding-bottom: .5em;
			 border-bottom: none !important;
			 display: inline-block !important;
			 box-sizing: border-box;
			 width: 25%;
			 position: relative;
			 right: 10%;
		}
		 .av-table .features {
			 display: inline-block !important;
			 position: relative;
			 width: 25%;
			 top: 0;
			 right: 10%;
		}
		 .av-table .location-header, .av-table .location {
			 width: 16%;
		}
		 .av-table .features::before {
			 display: none;
		}
		 .av-table .features ul {
			 margin: 0;
		}
		 .av-table .room-type-header, .av-table .room-type {
			 width: 16%;
		}
		 .av-table .seating-header, .av-table .seating {
			 width: 8%;
		}
		 .av-table .display-type-header, .av-table .display-type {
			 width: 19%;
		}
		 .av-table .audio-header, .av-table .audio {
			 width: 6%;
		}
		 .av-table .reserve-header, .av-table .reserve {
			 width: 10%; /*15*/
			 position: relative;
			 left: 25%;
		}
	}
	/* Smaller desktops with the menu on */
	 @media only screen and (max-width: 1200px) {
		 .menu-on .av-table .location-header, .menu-on .av-table .location {
			 width: 31%;
		}
		 .menu-on .av-table .room-type-header {
			 position: absolute;
			 opacity: 0;
			/*still want screen readers to read these columns */
			 right: 0;
			/*stack against edge so doesn't leave table*/
		}
		 .menu-on .av-table .room-type {
			 display: block !important;
			 position: absolute;
			 top: 1.5em;
			 padding-left: 5em;
			 width: 50%;
			 color: #555;
			 font-style: italic;
		}
		 .menu-on .av-table .seating-header, .menu-on .av-table .seating {
			 width: 14%;
		}
		 .menu-on .av-table .display-type-header, .menu-on .av-table .display-type {
			 width: 30%;
		}
		 .menu-on .av-table .audio-header, .menu-on .av-table .audio {
			 width: 10%;
		}
		 .menu-on .av-table .reserve-header, .menu-on .av-table .reserve {
			 width: 15%;
		}
	}
	/* Even smaller, menu or not */
	 @media only screen and (max-width: 899px) {
		 .av-table .location-header, .av-table .location {
			 width: 31%;
		}
		 .av-table .room-type-header {
			 position: absolute;
			 opacity: 0;
			/*still want screen readers to read these columns */
			 right: 0;
			/*stack against edge so doesn't leave table*/
		}
		 .av-table .room-type {
			 display: block !important;
			 position: absolute;
			 top: 1.5em;
			 padding-left: 5em;
			 width: 50%;
			 color: #555;
			 font-style: italic;
		}
		 .av-table .seating-header, .av-table .seating {
			 width: 14%;
		}
		 .av-table .display-type-header, .av-table .display-type {
			 width: 30%;
		}
		 .av-table .audio-header, .av-table .audio {
			 width: 10%;
		}
		 .av-table .reserve-header, .av-table .reserve {
			 width: 15%;
		}
	}
	/* Really quite small now, hide most of it below the accordion segments */
	 @media only screen and (max-width: 699px) {
		 .av-table-row.open {
			 height: 800px; /*700*/
		}
		 .av-table .location-header, .av-table .location {
			 width: 40%;
		}
		 .av-table .room-type {
			 top: 4.5em;
			 left: 0;
			 padding-left: 1em;
			 width: 50%;
			 color: #000;
			 font-style: normal;
		}
		 .av-table .seating-header {
			 position: absolute;
			 opacity: 0;
			/*still want screen readers to read these columns */
			 right: 0;
			/*stack against edge so doesn't leave table*/
		}
		 .av-table .seating {
			 display: block;
			 position: absolute;
			 top: 4.5em;
			 right: .5em;
			 width: 50%;
			 text-align: right;
		}
		 .av-table .seating::before {
			 content: "Capacity: ";
		}
		 .av-table .display-type-header, .av-table .display-type {
			 width: 40%;
		}
		 .av-table .audio-header {
			 position: absolute;
			 opacity: 0;
			/*still want screen readers to read these columns */
			 right: 0;
			/*stack against edge so doesn't leave table*/
		}
		 .av-table .audio {
			 display: block;
			 position: absolute;
			 left: 0;
			 padding-left: 1em;
			 top: 6.5em;
			 width: 100%;
		}
		 .av-table .audio span {
			 display: static;
			 font-size: 15px;
			 padding-left: 0;
		}
		 .av-table .audio img {
			 display: none;
		}
		 .av-table .reserve-header, .av-table .reserve {
			 width: 20%;
		}
		 .panorama {
			 left: 0;
			 padding-left: 8%;
			 padding-right: 8%;
			 top: 29em;
			 width: 100%;
		}
		 .features {
			 top: 10em;
			 left: 0;
			 width: 100%;
		}
		 .voip-location {
			 top: 25em; /*17*/
			 left: 0;
			 width: 100%;
		}
		 .last-updated {
			 display: block;
			 text-align: right;
			 position: absolute;
			 right: 0;
			 top: 49.5em;
			 width: 75%;
			 opacity: .5;
		}
	}
	/* Incredibly small. Stop using a cell phone in portrait to view a giant table */
	 @media only screen and (max-width: 499px) {
		 .av-table-row.open {
			 height: 780px;
		}
		 .av-table .reserve-header {
			 position: absolute;
			 opacity: 0;
			/*still want screen readers to read these columns */
			 right: 0;
			/*stack against edge so doesn't leave table*/
		}
		 .av-table .location-header, .av-table .location, .av-table .display-type-header, .av-table .display-type {
			 width: 50%;
		}
		 .av-table .reserve {
			 display: block;
			 position: absolute;
			 top: 6.5em;
			 left: .5em;
			 width: 100%;
			 text-align: left;
		}
		 .av-table .reserve::before {
			 content: "To Reserve: ";
		}
		 .av-table .audio {
			 top:9.5em;
		}
		 .panorama {
			 top: 29em;
		}
		 .features {
			 top: 12em;
		}
		 .voip-location {
			 top: 24em;
		}
	}
	/* Special styles just for the printer table */
	 table.newprinters {
		 border-collapse: collapse;
		 margin: auto;
		 border-bottom: solid 5px #555;
		 max-width: 807;
	}
	 .newprinters tr.tableheader {
		 background-color: #333 !important;
	}
	 table.newprinters th {
		 background-color: #333;
		 color: white;
		 padding-top: 1em;
		 padding-bottom: .5em;
		 border-bottom: none !important;
	}
	 table.newprinters tr.building:not(:first-of-type) {
		 border-top: solid 2px #555 
	}
	 .newprinters tr.tableheader th {
		 position: -webkit-sticky;
		 position: -moz-sticky;
		 position: -o-sticky;
		 position: -ms-sticky;
		 position: sticky;
		 top: 50px;
		 z-index: 1;
		 margin-left: 0;
		 margin-right: 0;
	}
	 table.newprinters tr:nth-child(even) {
		 background: #F0F0F0 
	}
	 table.newprinters tr:nth-child(odd) {
		 background: #FFF 
	}
	 table.newprinters tr:hover {
		 background: #DDDDDD 
	}
	 table.newprinters td {
		 padding-left: 2em;
		 padding-right: 2em;
		 padding-top: .75em;
		 padding-bottom: .75em;
		 vertical-align: middle !important;
	}
	 .newprinters td.scsqueue {
		 background-color: #d82222 
	}
	 table.newprinters tr:hover td.scsqueue {
		 background-color: #c81212 
	}
	 .newprinters td.scsqueue a {
		 color: white;
		 display: block;
		 font-weight: bold;
		 padding: 5px;
		 padding-right: 20px;
		 background-image: url('../site-images/linkarrow.png');
		 background-repeat: no-repeat;
		 background-size: 14px 14px;
		 background-position: right center;
		 text-decoration: none !important;
		 border-bottom: none !important;
	}
	 td.nshqueue {
		 background-color: #2e64ba 
	}
	 table.newprinters tr:hover td.nshqueue {
		 background-color: #1e54aa 
	}
	 td.nshqueue a {
		 color: white;
		 display: block;
		 font-weight: bold;
		 padding: 5px;
		 padding-right: 20px;
		 background-image: url('../site-images/linkarrow.png');
		 background-repeat: no-repeat;
		 background-size: 14px 14px;
		 background-position: right center;
		 text-decoration: none !important;
		 border-bottom: none !important;
	}
	 td.oldqueue {
		 background-color: #666 
	}
	 table.newprinters tr:hover td.oldqueue {
		 background-color: #555 
	}
	 td.oldqueue a {
		 color: white;
		 display: block;
		 font-weight: bold;
		 padding: 5px;
		 padding-right: 20px;
		 background-image: url('../site-images/linkarrow.png');
		 background-repeat: no-repeat;
		 background-size: 14px 14px;
		 background-position: right center;
		 text-decoration: none !important;
		 border-bottom: none !important;
	}
	 td[class$='queue'] a:hover {
		 color: lightskyblue !important;
		 background-image: url('../site-images/linkarrow-hover.png');
		 background-repeat: no-repeat;
		 background-size: 14px 14px;
		 background-position: right center;
	}
	 table.subtable {
		 border-collapse: collapse;
		 margin: auto;
		 margin-right: 1em;
		 border: none !important;
		 box-shadow: none !important;
		 width: 100% !important;
	}
	 table.subtable th {
		 background-color: none;
		 padding: 0;
	}
	 table.subtable tr:nth-child(even) {
		 background: none 
	}
	 table.subtable tr:nth-child(odd) {
		 background: none 
	}
	 table.subtable tr:hover {
		 background: none 
	}
	 table.subtable td {
		 padding-left: 3px;
		 padding-right: 3px;
		 padding-top: 0;
		 padding-bottom: 0;
		 width: 28px;
		 font: small-caps bold 10px sans-serif;
	}
	 .newprinters td[class$='check'] {
		 padding:0px !important;
		 margin: 0px !important;
		 width: 28px;
		 text-align: center;
	}
	 td.tabloidcheck {
		 padding-right: 1em !important 
	}
	 .newprinters td[class$='check'] img {
		 width: 12px;
		 height: 12px;
	}
	 @media only screen and (max-width: 960px) {
		 .newprinters {
			 font-size: 13px;
		}
		 .newprinters td {
			 padding-left: .5em !important;
			 padding-right: .5em !important;
		}
		 table.subtable td {
			 padding-left: 1px !important;
			 padding-right: 1px !important;
		}
		 .newprinters td[class$='check'] {
			 width: 20px;
			 min-width: .5em;
		}
		 td[class$='queue'] a {
			 padding-right: 12px !important;
		}
	}
	 @media only screen and (max-width: 700px) {
		/* Type of printer is semi-redundant, given the link to instructions, so drop it on very small screens */
		 .newprinters>tbody>tr>td:nth-of-type(2), .newprinters th:nth-of-type(2) {
			 display: none !important;
		}
	}
	/*---------- These are the custom styles for the Support Lifecycle table ----------*/
	 table.supporttable {
		 font: 11pt Arial, Helvetica, sans-serif 
	}
	/**** COLORS! ****/
	 td.TESTING {
		 background: #bfbfbf;
		 vertical-align: middle;
		 text-align:center;
		 border-bottom:none !important;
	}
	 td.ACTIVEDEFAULT {
		 background: #3CAF40;
		 vertical-align: middle;
		 text-align:center;
		 border-bottom:none !important;
	}
	 td.ACTIVE {
		 background: #9CCC65;
		 vertical-align: middle;
		 text-align:center;
		 border-bottom:none !important;
	}
	 td.CONTAINMENT {
		 background: #FFEB3B;
		 vertical-align: middle;
		 text-align:center;
		 border-bottom:none !important;
	}
	 td.PHASEOUT {
		 background: #FF9800;
		 vertical-align: middle;
		 text-align:center;
		 border-bottom:none !important;
	}
	/*td.PHASEOUT {
		 background: radial-gradient(#ffdd00,#ddaa00);
		 text-align:center;
		 border-bottom:none !important;
	}
	 */
	 td.EOL {
		 background: #FF2222;
		 vertical-align: middle;
		 text-align:center;
		 border-bottom:none !important;
	}
	/* #ff7c80 */
	/*td.EOL {
		 background: radial-gradient(#ff7c80, #cc0000);
		 text-align:center;
		 border-bottom:none !important;
	}
	/* #ff7c80 */
	/* Rest of the table styles */
	 table.key {
		 border-collapse: collapse;
		 margin: auto;
		 border: solid 2px #555;
		 width: 100%;
		 margin-left: auto;
		 margin-right: auto;
		 table-layout: fixed;
		 max-width: 1200px;
		 min-width: 800px;
	}
	 table.key tr td {
		 border-bottom: solid 1px #DDD;
		 padding: .5em;
	}
	 table.key tr td:first-child {
		 width: 15%;
		 min-width: 6em;
	}
	 table.supporttable {
		 border-collapse: collapse;
		 margin-left: auto;
		 margin-right: auto;
		 border-bottom: solid 5px #555;
		 width: 100%;
		 max-width: 1200px;
		 min-width: 800px;
		 table-layout: fixed;
	}
	 table.supporttable tr {
		 height:3.05em;
	}
	 table.supporttable tr.tableheader {
		 background-color: #333 !important;
	}
	 table.supporttable td, tbody th.os {
		 padding:.5em;
		 border-bottom: 1px solid #DDD;
		 font-weight: normal;
		 vertical-align: middle;
	}
	 table.supporttable th:not(.os), .supporttable thead th {
		 background-color: #333;
		 color: white;
		 padding-top: 1em;
		 padding-bottom: .5em;
		 vertical-align: middle;
		 z-index: 5;
	}
	 .supporttable thead {
		 position: -webkit-sticky;
		 position: -moz-sticky;
		 position: -o-sticky;
		 position: -ms-sticky;
		 position: sticky;
		 top: 50px;
		 z-index: 50 !important;
		 margin-left: 0;
		 margin-right: 0;
	}
	 table.supporttable tr td[rowspan] {
		 background-color: #333;
		 color: white;
		 z-index: 1;
		 vertical-align: middle;
	}
	 table.supporttable tr th[rowspan] {
		 position: relative;
	}
	 table.supporttable tr th[rowspan] p {
		/*rotate the next of the left-side headers (in <p> tags) */
		 font-weight: normal;
		 text-align: center;
		 vertical-align: center;
		 -moz-transform: rotate(-90.0deg) translateY(-6em) translateX(1em);
		/* FF3.5+ */
		 -o-transform: rotate(-90.0deg) translateY(-6em) translateX(1em);
		/* Opera 10.5 */
		 -webkit-transform: rotate(-90.0deg) translateY(-6em) translateX(1em) !important;
		/* Saf3.1+, Chrome */
		 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
		/* IE6,IE7 */
		 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
		 display: block;
		 width: 14em;
		 white-space: nowrap;
		 position: absolute;
		 z-index: 5;
	}
	/* widths for big desktop */
	 .supporttable .spacer {
		 width: 2em;
	}
	 .supporttable .spacer span {
		 font-size: 0 
	}
	 .supporttable .update {
		 width: 10%;
	}
	 .supporttable .status {
		 width: 12%;
	}
	 .supporttable .vendorstart {
		 width: 12%;
	}
	 .supporttable .scsstart {
		 width: 12%;
	}
	 .supporttable .scsend {
		 width: 12%;
	}
	 .supporttable .vendoreol {
		 width: 12%;
	}
	 table.supporttable tbody th.os {
		 text-align: left;
	}
	 table.supporttable tr.new {
		 border-top: solid 3px #333;
		 margin-top: -1px;
	}
	 tr.tableheader th .supporttable thead, .supporttable thead tr {
		 position: static;
		 top: 0px;
		 z-index: 2;
	}
	 .supporttable .date {
		 text-align: right;
		 padding-right: 1em !important;
	}
	 a.mac-eol-link {
		 font-variant: small-caps;
	}
	 .highsierra-upgrade-link {
		 font-variant: small-caps;
		 font-size: 75%;
	}
	 #maceol {
		 margin: auto;
		 text-align:right;
		 display:block;
		 font: 9pt Arial, Helvetica, sans-serif;
		 width: 100%;
		 max-width: 1200px;
		 min-width: 800px;
	}
	/* Responsive layouts for the support table */
	 @media only screen and (max-width: 1165px) {
		/* with menu on do it earlier */
		 .menu-on .supporttable, .menu-on .key, .menu-on #maceol {
			 min-width: 250px !important;
			 box-sizing: border-box;
			 width: 90% !important;
			 margin: auto;
			 position: relative;
			 display: block;
		}
		/* it's weird that we have to switch these on mobile, and FF doesn't like it, but there you are */
		 .menu-on .supporttable thead th {
			 position: static;
		}
		 .menu-on .supporttable thead {
			 display: block;
			 position: -webkit-sticky;
			 position: -moz-sticky;
			 position: -o-sticky;
			 position: -ms-sticky;
			 position: sticky;
			 top: 50px;
			 z-index: 25;
			 padding-left: 3em;
		}
		 .menu-on .supporttable thead th.spacer {
			 position: absolute;
			 width: 0%;
		}
		 .menu-on .supporttable thead th.os {
			 width: 40%;
		}
		 .menu-on .supporttable thead th.update {
			 width: 30%;
		}
		 .menu-on .supporttable thead th.status {
			 width: 30%;
		}
		 .menu-on .supporttable th.vendorstart {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .menu-on .supporttable th.scsstart {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .menu-on .supporttable th.scsend {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .menu-on .supporttable th.vendoreol {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .menu-on .supporttable tbody {
			 display: block;
		}
		 .menu-on table.supporttable tbody tr {
			 display: block;
			 height: 7em;
			 position: relative;
			 border-left: solid #333 3em !important;
		}
		 .menu-on .supporttable thead {
			 display: block;
			 position: -webkit-sticky;
			 top:50px 
		}
		 .menu-on table.supporttable tr th[rowspan] {
			 top: 2.5em;
			/*This works for one row, but will be overridden by Cascade depending on how many rows there are */
			 width: 3em;
			 z-index: 5;
			 box-sizing: border-box;
			 left: -3em;
			 position: absolute;
			 text-align: center;
		}
		 .menu-on table.supporttable tr th[rowspan="2"] {
			 top: 6em 
		}
		 .menu-on table.supporttable tr th[rowspan="3"] {
			 top: 9.5em 
		}
		 .menu-on table.supporttable tr th[rowspan="4"] {
			 top: 12em 
		}
		 .menu-on table.supporttable tr th[rowspan="5"] {
			 top: 14.5em 
		}
		 .menu-on table.supporttable tr th[rowspan="6"] {
			 top: 17em 
		}
		 .menu-on table.supporttable tr th[rowspan="7"] {
			 top: 19.5em 
		}
		 .menu-on table.supporttable tr th[rowspan="8"] {
			 top: 22em 
		}
		 .menu-on table.supporttable tr th[rowspan="9"] {
			 top: 24.5em 
		}
		 .menu-on .supporttable td, .menu-on tbody th.os {
			 border: none !important;
			 text-align: left;
			 display: block;
			 position: absolute;
			 width: 45%;
		}
		 .menu-on tbody th.os:first-child {
			 border-top: 1px solid #DDD !important;
		}
		/* This selector is confusing, but being first-child means there was NOT a rowspan'ed th in front of it, so it is NOT the beginning of a section. */
		 .menu-on tbody th.os:first-child ~ td.update {
			 border-top: 1px solid #DDD !important;
		}
		 .menu-on tbody th.os:first-child ~ td.status {
			 border-top: 1px solid #DDD !important;
		}
		 .menu-on td.update {
			 left: 46%;
			 width: 25% !important;
		}
		 .menu-on td.status {
			 right: 0;
			 width: 30% !important;
			 text-align: center;
			 height: 2em;
		}
		 .menu-on .supporttable td.vendorstart {
			 display: block;
			 position: absolute;
			 left: 0;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
			 text-align: left;
		}
		 .menu-on .supporttable td.vendorstart::before {
			 content: "Release";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
		 .menu-on .supporttable td.scsstart {
			 display: block;
			 position: absolute;
			 right: 50%;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
			 text-align: left;
		}
		 .menu-on .supporttable td.scsstart::before {
			 content: "SCS Start";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
		 .menu-on .supporttable td.scsend {
			 display: block;
			 position: absolute;
			 right: 25%;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
		}
		 .menu-on .supporttable td.scsend::before {
			 content: "SCS End";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
		 .menu-on .supporttable td.vendoreol {
			 display: block;
			 position: absolute;
			 right: 0;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
		}
		 .menu-on .supporttable td.vendoreol::before {
			 content: "Vendor EOL";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
	}
	 @media only screen and (max-width: 869px) {
		 .supporttable, .key, #maceol {
			 min-width: 250px !important;
			 box-sizing: border-box;
			 width: 90% !important;
			 margin: auto;
			 position: relative;
			 display: block;
		}
		/* it's weird that we have to switch these on mobile, and FF doesn't like it, but there you are */
		 .supporttable thead th {
			 position: static;
		}
		 .supporttable thead {
			 display: block;
			 position: -webkit-sticky;
			 position: -moz-sticky;
			 position: -o-sticky;
			 position: -ms-sticky;
			 position: sticky;
			 top: 50px;
			 z-index: 25;
			 padding-left: 3em;
		}
		 .supporttable thead th.spacer {
			 position: absolute;
			 width: 0%;
		}
		 .supporttable thead th.os {
			 width: 40%;
		}
		 .supporttable thead th.update {
			 width: 30%;
		}
		 .supporttable thead th.status {
			 width: 30%;
		}
		 .supporttable th.vendorstart {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .supporttable th.scsstart {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .supporttable th.scsend {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .supporttable th.vendoreol {
			 display: block;
			 position: absolute;
			 opacity: 0;
			 width: 0;
		}
		 .supporttable tbody {
			 display: block;
		}
		 table.supporttable tbody tr {
			 display: block;
			 height: 7em;
			 position: relative;
			 border-left: solid #333 3em !important;
		}
		 .supporttable thead {
			 display: block;
			 position: -webkit-sticky;
			 top:50px 
		}
		 table.supporttable tr th[rowspan] {
			 top: 2.5em;
			/*This works for one row, but will be overridden by Cascade depending on how many rows there are */
			 width: 3em;
			 z-index: 5;
			 box-sizing: border-box;
			 left: -3em;
			 position: absolute;
			 text-align: center;
		}
		 table.supporttable tr th[rowspan="2"] {
			 top: 6em 
		}
		 table.supporttable tr th[rowspan="3"] {
			 top: 9.5em 
		}
		 table.supporttable tr th[rowspan="4"] {
			 top: 12em 
		}
		 table.supporttable tr th[rowspan="5"] {
			 top: 14.5em 
		}
		 table.supporttable tr th[rowspan="6"] {
			 top: 17em 
		}
		 table.supporttable tr th[rowspan="7"] {
			 top: 19.5em 
		}
		 table.supporttable tr th[rowspan="8"] {
			 top: 22em 
		}
		 table.supporttable tr th[rowspan="9"] {
			 top: 24.5em 
		}
		 .supporttable td, tbody th.os {
			 border: none !important;
			 text-align: left;
			 display: block;
			 position: absolute;
			 width: 45%;
		}
		 tbody th.os:first-child {
			 border-top: 1px solid #DDD !important;
		}
		/* This selector is confusing, but being first-child means there was NOT a rowspan'ed th in front of it, so it is NOT the beginning of a section. */
		 tbody th.os:first-child ~ td.update {
			 border-top: 1px solid #DDD !important;
		}
		 tbody th.os:first-child ~ td.status {
			 border-top: 1px solid #DDD !important;
		}
		 td.update {
			 left: 46%;
			 width: 25% !important;
		}
		 td.status {
			 right: 0;
			 width: 30% !important;
			 text-align: center;
			 height: 2em;
		}
		 .supporttable td.vendorstart {
			 display: block;
			 position: absolute;
			 left: 0;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
			 text-align: left;
		}
		 .supporttable td.vendorstart::before {
			 content: "Release";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
		 .supporttable td.scsstart {
			 display: block;
			 position: absolute;
			 right: 50%;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
			 text-align: left;
		}
		 .supporttable td.scsstart::before {
			 content: "SCS Start";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
		 .supporttable td.scsend {
			 display: block;
			 position: absolute;
			 right: 25%;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
		}
		 .supporttable td.scsend::before {
			 content: "SCS End";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
		 .supporttable td.vendoreol {
			 display: block;
			 position: absolute;
			 right: 0;
			 bottom: 0;
			 width: 20%;
			 font-size: 10.5pt;
		}
		 .supporttable td.vendoreol::before {
			 content: "Vendor EOL";
			 display: block;
			 color: rgb(130,130,130);
			 font-style: oblique;
			 padding-bottom: .2em;
		}
	}
	 @media only screen and (max-width: 520px) {
		 .supporttable td.vendoreol, .supporttable td.scsstart, .supporttable td.scsend, .supporttable td.vendorstart, .supporttable tbody .status {
			 font-size: 10pt;
		}
		 table.supporttable tbody tr {
			 height: 9em;
		}
		 td.status {
			 display: table;
			 box-sizing: border-box;
			 height: 4em;
			 vertical-align: middle;
		}
		 td.status span {
			 display: table-cell;
			 vertical-align: middle;
			 padding: .25em;
			 line-height: 1.3em;
		}
	}
	/* for printing to PDF... */
	 @media print {
		 .noprint {
			 display:none !important;
		}
		 body {
			 font: 11pt Arial, Helvetica, sans-serif;
			 width:1000px;
			 margin-top: 0mm;
			 margin-bottom: 0mm;
			 margin-left: 0mm;
			 margin-right: 0mm 
		}
		 h3 {
			 display: inline-block;
			 margin-bottom: 3px;
		}
		 h3::before {
			 content:"SCS Computing Facilities " 
		}
		 p.sidedate {
			 display: inline-block;
			 float:right;
		}
		 table.supporttable {
			 margin-left:0;
			 border-bottom: solid 5px #555 !important;
			 width: 100%;
		}
		 td.TESTING {
			 background: #bfbfbf;
			 text-align:center;
			 border-bottom:solid 1px #bfbfbf !important;
		}
		 td.ACTIVEDEFAULT {
			 background: #19b719;
			 text-align:center;
			 border-bottom:solid 1px #19b719 !important;
		}
		 td.ACTIVE {
			 background: #c4d79b;
			 text-align:center;
			 border-bottom:solid 1px #c4d79b !important;
		}
		 td.CONTAINMENT {
			 background: #ffcc00;
			 text-align:center;
			 border-bottom:solid 1px #ffcc00 !important;
		}
		 td.PHASEOUT {
			 background: #e26b0a;
			 text-align:center;
			 border-bottom:solid 1px #e26b0a !important;
		}
		 td.EOL {
			 background: #ff3333;
			 text-align:center;
			 border-bottom:solid 1px #ff3333 !important;
		}
		/* #ff7c80 */
		 tr.tableheader {
		}
		 tr.tableheader th {
			 position: static;
			 top: 0px;
			 z-index: 2;
		}
		 table.supporttable th {
			 padding: .3em;
		}
		 .mac-eol-link {
			 text-decoration: none;
			 color: black;
			 font-variant: normal !important;
			 text-align:right;
			 margin-right: -1ex;
		}
		 .mac-eol-link::after {
			 content:" *";
		}
		 .highsierra-upgrade-link {
			 display: none;
		}
		 #maceol {
			 font-size: 9pt;
		}
		 #maceol::before {
			 content:"* ";
		}
	}
	/*----------------- End of custom Support Lifecycle table styles ------------------*/