/* ------ Section 1 - Global Body, Font, and Link Settings ------ */

body {

background-color: #0093E9;
background: url(../images/mit-bodybg-blue-palette-2021.jpg) repeat-x left top, linear-gradient(180deg, #96bff2 17%, #ffffff 75%) no-repeat left bottom fixed;

/* #44bab6; */ /* #f4f2ff; */  
margin: 0;padding: 0;
font-family: 'Microsoft Sans Serif', Verdana, Arial, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #333;
font-size: 110%;

}

h1, h2, h3, h4, h5, h6 {background-color: transparent; color: #375C89; /* --  color: #104558;  test color */ clear: both;}

h2, h3, h4, h5, h6 {margin-top: 10px;}

h1 {margin-top: 5px;font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;border-bottom: 0 solid #8f8fb3;font-size:160%;position:relative;top:10px;}

h2 {font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;border-bottom: 1px solid #8f8fb3;position:relative;top:5px;font-size:140%;}

h3 {font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;border-bottom: 0 solid #8f8fb3;font-size:120%;}

h4 {font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;border-bottom: 0 solid #8f8fb3;}

blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px;padding: 0.5em 10px;quotes: "\201C""\201D""\2018""\2019";}
blockquote:before {color: #ccc;content: open-quote;font-size: 4em;line-height: 0.1em;margin-right: 0.25em;vertical-align: -0.4em;}
blockquote p { display: inline;}
code {color: navy;}

/*img{max-width:98%; height:auto;}*/
p{margin:1.2em 0; line-height: 1.6;}
a:link img{opacity:1;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out}
a:hover img{opacity:.5}


img {border: 0 solid #ddd;}

a:link img {border: 0;}


/* -- General Link Styling -- */

a:link {color: blue; text-decoration: underline;}

a:visited {color: purple;text-decoration: underline;}

a:hover {color: red;text-decoration: underline;}

.whitelink a:link {color: #FFFFFF;}

.whitelink a:visited {color: #FFFFFF;}

.whitelink a:hover {color: #FFFFFF;}

/* css to make scrolling smooth when clicking on anchor links */
html
{
  scroll-behavior: smooth;
}

/* -- BREADCRUMB CODE - Added by DJ 6/30/21 -->



/* -- Game Buttons -- */

.gmbuttonposition1 {
	position:relative;
	top:5px;
	left:10px;
	margin-bottom:10px;
}

.gmbuttonposition2 {
	position:relative;
	top:0px;
	left:10px;
	margin-bottom:5px;
}

.gmbuttonposition3 {
	position:relative;
	top:0px;
	left:10px;
	margin-bottom:10px;
}

.gmbutton {
  border-style: solid;
  border-color: gray;
  border-width: 2px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:10px;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.gmbutton1 {
	background-color: #AF0E67; /* Purple */
} 

.gmbutton1:hover {
	background-color: #ec138a; /* Lighter Purple */
	color: white;
}

.gmbutton2 {
	background-color: #0E67AF; /* Blue */
} 

.gmbutton4 {
	background-color: #606060; /* Gray */
} 

.gmbutton2:hover {
	background-color: #138aec; /* Lighter Blue */
	color: white;
}

.gmbutton3 {
	background-color: #67AF0E; /* Green */
} 

.gmbutton3:hover {
	background-color: #8aec13; /* Lighter Green */
	color: white;
}

.gmbutton5 {
	background-color: #FF9901; /* Light Orange USE FOR AMAZON BUY BUTTONS */
} 

.gmbutton5:hover {
	background-color: #E68A00; /* Dark Orange USE FOR AMAZON BUY BUTTONS */
	color: white;
}


/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {width:1250px; margin:0 auto 30px auto; }


/* -- for Sudoku printable pages -- */
#PageWrapperSudoku {width:1150px; margin:0 auto 30px auto; }

#StorePageWrapper {width:1250px; margin:0 auto 30px auto; }

#Header {
height:142px; 
position: relative; top: 1px; 
background:url(../images/new-2021-logo-2.png) 0px 44px no-repeat;
margin-bottom:0px;}

/* #headerlink {display:block;width:1250px;height:90px;margin:0;} */

#header-link {
position:absolute;
top: 45px; 
left: -5px; 
width: 265px; 
height: 94px;
background-color: transparent;}

/* container heights need to be auto not 100% to avoid certain page sizing faults */

#ContentWrapper {float:none;width:1218px;height:auto;background:#fff; margin-top:0px;  display:inline-block; border:0px solid #999999; /* border-radius:8px; */ padding:0 15px;}

/* -- for Sudoku printable pages -- */
#ContentWrapperSudoku {float:none;width:1118px;height:auto;background:#fff; margin-top:-75px;  display:inline-block; border:0px solid #999999; /* border-radius:8px; */ padding:0 15px;}

#StoreContentWrapper{float:none;width:1218px;height:auto;background:#fff; margin-top:-75px;  display:inline-block; border:0px solid #999999; /* border-radius:8px; */ padding:0 15px;}

#ContentColumn {width:810px; padding:0px 40px 0 30px; background:#fff; float:left;display:inline; margin:0 auto; /* border-right: 0px dotted #ccc; */}

/* -- for Sudoku printable pages -- */
#ContentColumnSudoku {width:770px; padding:0 10px 0 0; background:#fff; float:left;display:inline; margin:0 auto; /* border-right: 0px dotted #ccc; */}

#StoreColumn {width:870px; padding:0 10px 0 0; background:#fff; float:left;display:inline; margin:0 auto; border-right:0px dotted #ccc;}

#NavColumn {display:none; }

#StoreExtraColumn {width:330px; float:right; padding-top:10px; padding-left:0; background:#fff;display:inline-block; }


#ExtraColumn {width:330px; float:right; padding-top:10px; padding-left:0; background:#fff;display:inline-block; }

#ExtraColumn h3 {border-top: 1px solid #123456; border-bottom: 1px solid #123456; background: #123456; color:#fff; text-align:center;}

#Footer {clear:both;width:100%;padding:8px 0; background:#fff; margin:10px auto; position:relative; right:2px; display:inline-block; /* border-radius:8px; */ }

.Liner {padding: 2px;}

#Header .Liner {position:relative;padding:1px 0;}

#Footer .Liner {margin: 0;padding: 0;}

/* This is for z-end-file.shtml at the moment */
.bottom {width:100%; background:#031F40; padding:10px 0; color:#fff; overflow-x:hidden; margin: auto;}

/* ------ Section 3 - Page Structure Details ------ */

/* --- Breadcrumb Styles added 6/30/21 per SBI styles -- */
.BreadcrumbBlock .BreadcrumbTiers {
list-style: none;
position:relative;top:5px;
margin:15px 0 0;
padding:0;
}

.BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem {
display: inline-block;
}

.BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before {
padding: 8px;
color: black;
content: "\00BB";
}


/* ------ Section 3.5 - H Text Nav Bar ------ */

#htextnav {width: 100%;height: 20px;float: left;margin: 0px;padding: 0px;list-style: none;background-color: #f2f2f2;border-left: 1px solid #B7BFB5; }

#htextnav ul {list-style: none;width: 890px;margin: 0 auto;padding: 0; }	

#htextnav li {float: left; }

#htextnav li a {display: block;margin-top: 3px;padding-right:12px;padding-left:12px;text-decoration: none;font-weight: bold;font-size:11px;color: #069;border-left: 1px solid #B7BFB5; }

#htextnav li:first-child a {border-left: 0px solid #ccc;padding-left: 0px; }	

#htextnav li a:hover {color: #c00;background-color: #fff; }


/* ------ Section 4 - Left Column Navigation ------ */

.Navigation {width: 100%;font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;background-color: transparent;}

/* -- Nav Headers -- */

.Navigation h3 {padding: 0;font-size: 110%;color: #375C89;border-bottom: 1px solid #fff;margin: 12px 0;}

.Navigation h4 {padding: 0;font-size: 100%;color: #bfbfbf;border-bottom: 1px solid #bfbfbf;margin: 12px 0;}
/* -- Nav List -- */

.Navigation ul {list-style-type: none;padding: 0 0 8px 5px;margin: -6px 0 0 0;}

.Navigation li {background-color: #1094BE;      border: 1px solid white;margin-bottom: 3px;}

/* -- Navigation Link styles -- */

.Navigation a:link {color: #FFFF9C;display: block;     /*  this makes the whole box highlight rather than just the text */padding: 3px 0 3px 4px;text-decoration: none;}

.Navigation a:visited {color: #FFFF9C;display: block;     /*  this makes the whole box highlight rather than just the text */padding: 3px 0 3px 4px;text-decoration: none;}

.Navigation a:hover {color: red;display: block;     /*  this makes the whole box highlight rather than just the text */padding: 3px 0 3px 4px;background-color: #d3e4fb;  text-decoration: underline;}



/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {text-align: center;}

.ThumbnailLink a:link {text-decoration: none;}

.ThumbnailLink a:hover .Caption {text-decoration: underline;color: red;}


/* -- Horizontal Text NavBar -- */

.ExtraNav {font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;}

.ExtraNav ul {list-style-type: none;padding: 0;}

.ExtraNav ul li {display: inline;position:relative;bottom:4px;}

.ExtraNav a:link {color: white;background-color: transparent; text-decoration: underline;padding: 0 4px;}

.ExtraNav a:visited {color: white;background-color: #092A17;}

.ExtraNav a:hover {color: red;background-color: #d3e4fb;}

#Header .ExtraNav {font-size: 85%;position: absolute;top: 5px;left: 10px;}

#Header .ExtraNav ul { margin: 0;}

#Footer .ExtraNav {margin: 12px auto;}


.ExtraNav2 {font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;}

.ExtraNav2 ul {list-style-type: none;padding: 0;}

.ExtraNav2 ul li {display: inline;text-align: center;position:relative;bottom:4px;left:660px;}


.ExtraNav2 a:link {color: white;background-color: #092A17;text-decoration: underline;text-align: center;padding: 0 4px;}

.ExtraNav2 a:visited {color: white;background-color: #092A17;text-decoration: underline;}

.ExtraNav2 a:hover {color: red;background-color: #d3e4fb;text-decoration: underline;}

#Header .ExtraNav2 {font-size: 85%;position: absolute;top: 5px;left: 10px;}

#Header .ExtraNav2 ul { margin: 0;}

#Footer .ExtraNav2 {margin: 12px auto;}


/* Class for Header Link */

.ExtraNav3 {font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;}

.ExtraNav3 ul {list-style-type: none;padding: 0;}

.ExtraNav3 ul li {display: inline;text-align: center;}

.ExtraNav3 a:link {color: white;background-color: transparent;text-decoration: none;text-align: center;padding: 0 4px;}

.ExtraNav3 a:visited {color: white;background-color: transparent;text-decoration: none;}

.ExtraNav3 a:hover {color: red;background-color: transparent;text-decoration: none;}

#Header .ExtraNav3 {font-size: 85%;position: absolute;top: 5px;left: 10px;}

#Header .ExtraNav3 ul { margin: 0;}

#Footer .ExtraNav3 {margin: 12px auto;}


/* ------ Sect 5.5 - Bullets ------ */

ul.greentriangle li{
  list-style:none;
  padding-left:40px;
  background-image:url(../images/bullet-green-triangle.gif);
  background-repeat:no-repeat;
  height:40px;
}


/* ------ Section 6 - Boxes ------ */


.largetext {
font-size:25px;}

.mediumtext {
font-size:18px;}

.CalloutBox {
background-color: #5A93A6;width: 85%;border: 1px dotted white;margin: 18px auto 24px auto;padding: 4px;color: black;}

div.CalloutBox p {margin: 13px;}

p.CalloutBox {padding: 13px;}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {margin: 13px 0 0 13px;}

/* ----- Title Bar for Right Column Boxes, Updated 3/16/20 DJ ----- */
.SideTitle {
background-color:#375C89;
color:#ffffff;
position:relative;
bottom:3px;
padding:6px;
text-decoration:none;
font-size:115%;
margin-bottom:0px;
margin-top:17px;
font-weight:bold;
}

/* ----- Thumbnail Image Styles for HTML5 Games listing ----- */
.GameBox {
text-align:center; 
float:left;
width:170px;
margin:15px;
padding:0px;
}

.GameBox2 {
text-align:center; 
float:left;
margin-top:10px;
margin-bottom:5px;
width:300px;
position:relative;
left:12px;
}

/* non-centered */
.GameBox3 { 
text-align:left;
float:left;
width:170px;
margin:15px;
padding:0px;
}

.ReminderBox {          background-color: #218FB6;width: 24%;border: 1px solid #8f8fb3;margin: 0 0 12px 18px;float: right; color: white;}

.ReminderBox h4 {margin: 0;padding: 2px;text-align: center;background-color: #083E50;}

.ReminderBox p {font-size: 80%;padding: 0 4px;line-height: 120%;}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {padding: 5px;background-color: transparent;border: 0px;}

.AdSenseBoxLeft {margin: 0 18px 12px 18px;float: left;}

.AdSenseBoxRight {margin: 0 18px 12px 18px;float: right;}

.AdSenseBoxCenter468 {width: 468px;margin: 0 auto 12px auto;clear: both;}

.AdSenseBoxExtraColumn {margin: 10px auto;clear: both; border:1px solid #999; border-top:10px  solid #999; border-radius:0; background:#fff;  padding:5px; text-align:center; width:92%; font-size:110%; color:#999;}

.ReturnToNavBox {background-color: #ffffff;width: 90%;border-top: 1px solid #8f8fb3;border-bottom: 1px solid #8f8fb3;margin: 0 auto 12px auto;padding: 15px;}


/* -- Extra Default Nav Box -- */


#ExtraNavbox {
width: 150px;background-color: #E6ECEE;border: 1px solid #8f8fb3;margin: 5px auto 5px 0px;padding: 10px 5px 10px 5px;font-size: 90%;color: black;line-height: 120%;text-align: left;}

#ExtraNavboxThumb {width: 150px;background-color: #1094BE;border: 1px solid #ffffff;margin: 5px auto; padding: 10px 5px;font-size: 90%;color: black;line-height: 120%;text-align: left;}

#ExtraNavboxThumb2 {width: 150px;background-color: #1094BE;border: 1px solid #ffffff;margin: 0px auto 5px 0px;padding: 10px 4px 10px 6px;font-size: 90%;color: black;line-height: 120%;text-align: left;}

#ExtraNavboxThumbWide {width: 158px;background-color: #1094BE;margin: 5px auto 5px 0px;padding: 10px 5px 10px 5px;}


/* ------ Section 7 - Frequently Used Styles ------ */


.Super-Italic {font-size:small;position:relative;bottom:2px;font-style:italic;}

.main-image {   }

sup {vertical-align: super;font-size: smaller; }

.Byline {font-size:95%;color:#375C89;font-weight:bold;font-style:italic;text-decoration:none;}

.Clear {clear: both;}

.Cite {font-size:95%;margin-top:5px;margin-bottom:5px;}

.Caption {font-size: 105%;font-weight: bold;color: #375C89;display: block;line-height: 150%;margin-bottom:3px;}

.Bluebold {font-size: 105%;font-weight: bold;color: #375C89;}

.ParaStart {font-weight: bold;color: #375C89;}

.Viswhite a:visited {color: #FFFFFF;text-decoration: underline;}

.Viswhite a:link {color: #FFFFFF;; text-decoration: underline;}

.Viswhite a:hover {color: #FFFFFF;;text-decoration: underline;}

/* -- floats -- */

.ItemRight {float: right;margin: 2px 0 12px 18px;text-align: center;}

.ItemCenter {margin: 2px auto 12px auto;text-align: center;clear: both;}

.ItemLeft {float: left;margin: 2px 18px 12px 0;text-align: center;}





/* -- What's New Block -- */

.WhatsNew {border: 1px solid #ccc;margin: 0.5em 0;position: relative;right:3px;}

#PageWrapper .WhatsNew img {border: 0;}

/* -- Main Headline -- */

#PageWrapper .WhatsNew h2 {margin: 0;padding: 0.3em 24px 0.3em 4px;_padding-right: 4px;background: #ccc;line-height: 1.2;font-size: 120%;text-align: center;}

#PageWrapper .WhatsNew ol,#PageWrapper .WhatsNew ul,#PageWrapper .WhatsNew li {margin:0; padding:0; list-style:none; *zoom: 1;}

#PageWrapper .WhatsNew ol {margin: 0 10px;overflow: hidden;}

#PageWrapper .WhatsNew ol li {display: block;padding-bottom: 1px;border-top: 1px solid #ccc;margin-top: -1px;}

/* -- Item Headlines -- */

#PageWrapper .WhatsNew h3 {font-size: 115%;line-height: 1.2;margin-bottom: 0;}

/* -- Date and Time -- */

.WhatsNew-time {font-size: 85%;color: #888;margin-top: 0.5em;}

/* -- Read More Text -- */

.WhatsNew-more {text-align: right;margin: 1em 0;}

/* -- RSS Icon and Subscription Options -- */

.WhatsNew-subscribe {position: absolute;z-index: 2;top: 0;right: 0;text-align: right;_display: none;}
.WhatsNew-icon {padding: 4px 4px 2px;}

#PageWrapper .WhatsNew-subscribe ul {display: none;padding: 2px 4px;background: #ccc;}

#PageWrapper .WhatsNew-subscribe ul li {display: block;background-image: none;}

#PageWrapper .WhatsNew-subscribe:hover ul {display: block;}

#PageWrapper .WhatsNew-subscribe ul img {display: block;padding: 2px 0;}

/* -- Main Headline in Mobile-- */

.mobile #PageWrapper .WhatsNew h2 {padding-right: 4px;}

/* -- RSS Icon and Subscription Options -- */

.mobile .WhatsNew-subscribe {position: static;}

.mobile .WhatsNew-icon {display: none;}

.mobile #PageWrapper .WhatsNew-subscribe ul {display: block;text-align: center;}

.mobile #PageWrapper .WhatsNew-subscribe ul img {display: inline-block;}

/* -- Left Alignment -- */

.WhatsNewLeft {float: left;margin-right: 0.5em;}

/* -- Right Alignment -- */

.WhatsNewRight {float: right;margin-left: 0.5em;}

/* -- Centered -- */

.WhatsNewCenter {margin-left: auto;margin-right: auto;}

div.clear{clear:both;background-color:transparent}div.clear10{clear:both;height:10px;background-color:transparent}div.clear20{clear:both;height:20px;background-color:transparent}div.clear30{clear:both;height:30px;background-color:transparent}div.clear40{clear:both;height:40px;background-color:transparent}div.clear50{clear:both;height:50px;background-color:transparent}div.clear60{clear:both;height:60px;background-color:transparent}div.clear70{clear:both;height:70px;background-color:transparent}div.clear80{clear:both;height:80px;background-color:transparent}div.clear90{clear:both;height:90px;background-color:transparent}div.clear100{clear:both;height:100px;background-color:transparent}

/* Use this to hide desktop items on mobile, selectively */
.mobile-only{display:none;}


/************************
CSS DROP MENU - DESKTOP
************************/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 0.3;display: block;position: relative;top:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,
#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu #menu-button {display: none;}
#cssmenu {z-index:10 !important;width: 100%;background: #375C89; /* #666; gray test */}
#cssmenu > ul {z-index:10 !important;background-image: url();background-repeat:repeat-x;}
#cssmenu.align-right > ul > li {z-index:10 !important;float: right;}
#cssmenu > ul > li {z-index:10 !important;float: left;display: inline-block;font-size:80%;color:#fff;}
#cssmenu.align-center > ul {z-index:10 !important;float: none;text-align: center;}
#cssmenu.align-center > ul > li {z-index:10 !important;float: none;}
#cssmenu.align-center ul ul {z-index:10 !important;text-align: left;}
#cssmenu > ul > li > a {z-index:10 !important;padding: 13px 10px 24px 10px;border-right: 0px solid #333;text-decoration: none;font-size: 1.1em;font-weight: 400;color: #fff;font-family:  'Trebuchet MS', sans-serif;text-transform: uppercase;letter-spacing: 1px;}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {text-decoration:none;z-index:10 !important;color: #fff;}
#cssmenu > ul > li.has-sub > a {z-index:10 !important;padding-right: 25px;}
#cssmenu > ul > li.has-sub > a::after {z-index:10 !important;content: "";position: absolute;width: 0;height: 0;border: 6px solid transparent;border-top-color: #375C89;right: 7px;top: 22px;}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {z-index:10 !important;border-top-color: #ffffff;}
#cssmenu ul ul {z-index:10 !important;margin-top:-15px;position: absolute;left: -9999px;top: 60px;padding-top: 6px;font-size: 13px;opacity: 0;-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;-moz-transition: top 0.2s ease, opacity 0.2s ease-in;-ms-transition: top 0.2s ease, opacity 0.2s ease-in;-o-transition: top 0.2s ease, opacity 0.2s ease-in;transition: top 0.2s ease, opacity 0.2s ease-in;}
#cssmenu.align-right ul ul {z-index:10 !important;text-align: right;}
#cssmenu > ul > li > ul::after {z-index:10 !important;content: "";position: absolute;width: 0;height: 0;border: 5px solid transparent;border-bottom-color: #ffffff;top: -4px;left: 20px;}
#cssmenu.align-right > ul > li > ul::after {z-index:10 !important;left: auto;right: 20px;}
#cssmenu ul ul ul::after {z-index:10 !important;content: "";position: absolute;width: 0;height: 0;border: 5px solid transparent;border-right-color: #ffffff;top: 11px;left: -4px;}
#cssmenu.align-right ul ul ul::after {z-index:10 !important;border-right-color: transparent;border-left-color: #ffffff;left: auto;right: -4px;}
#cssmenu > ul > li > ul {z-index:10 !important;top: 120px;}
#cssmenu > ul > li:hover > ul {z-index:10 !important;top: 52px;left: 0;opacity: 1;}
#cssmenu.align-right > ul > li:hover > ul {z-index:10 !important;left: auto;right: 0;}
#cssmenu ul ul ul {z-index:10 !important;padding-top: 0;padding-left: 6px;}
#cssmenu.align-right ul ul ul {z-index:10 !important;padding-right: 6px;}
#cssmenu ul ul > li:hover > ul {z-index:10 !important;left: 250px;top: 0;opacity: 1;}
#cssmenu.align-right ul ul > li:hover > ul {z-index:10 !important;left: auto;right: 100%;opacity: 1;}
#cssmenu ul ul li a {z-index:10 !important;text-decoration: none;font-weight: 400;font-size: 15px;padding: 11px 25px;width: 250px;color: #666;background: #eff1ff;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {z-index:10 !important;color: #333;background: #fff;text-decoration:underline;}
#cssmenu ul ul li:first-child > a {z-index:10 !important;border-top-left-radius: 3px;border-top-right-radius: 3px;}
#cssmenu ul ul li:last-child > a {z-index:10 !important;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}
#cssmenu > ul > li > ul::after {position: absolute;display: block;}
#cssmenu ul ul li.has-sub > a::after {z-index:10 !important;content: "";position: absolute;width: 0;height: 0;border: 4px solid transparent;border-left-color: #777777;right: 17px;top: 14px;}
#cssmenu.align-right ul ul li.has-sub > a::after {z-index:10 !important;border-left-color: transparent;border-right-color: #777777;right: auto;left: 17px;}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {z-index:10 !important; border-left-color: #333333;}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {z-index:10 !important; border-right-color: #333333; border-left-color: transparent;}
/* end Desktop CSS Menu */


/*********************
MOBILE MEDIA QUERIES
**********************/ 

/* BIGSCREENS - Not sure my site implements the bigscreens class... this may have no effect */
@media screen and (max-width:1250px){
.bigscreens{display:none;}
}
/* end Bigscreens */


/* MOBILE - BACKGROUND & OTHER SETTINGS, Phones and Tablets Width */
@media screen and (max-width:768px){

.mobile-only{display:block;}
.desktop-only {display:none;}
img{max-width:100%!important;height:auto!important;-ms-interpolation-mode:bicubic;padding:4px;clear:both;display:inline !important;}
#menu {
display:none;
}

body{
font-size: 100%; 
background: linear-gradient(180deg, #96bff2 17%, #ffffff 75%) no-repeat left bottom fixed !important;
background-image: none; 
} 

#PageWrapper {
width:96%; 
margin:0 auto 0px auto; 
background-image: url('../images/mit-bodybg-blue-palette-mobile-2025-4.jpg');
background-repeat: repeat-x;
border-width:2px;
border-color:#C0C0C0;
}
#Header {
height:199px; 
background:url(../images/new-2021-logo-2.png); 
background-repeat: no-repeat;
background-position: left center !important; 
}
.Liner {padding: 2px;}
#Header .Liner {position:relative;padding:0px 0;}

.ExtraNav, .ExtraNav2, .ExtraNav3 {display:none !important;}
#Header .ExtraNav2 {display:none !important;}
#tswcsstabs {display:none !important;}

#ContentWrapper {display:inline-block; padding:0; width:100% !important; background:#fff; float:none;margin-left:0; margin-right:0;  background-image:url();overflow-x:hidden;border:none;position:relative;top:-49px}

#ContentColumn  {display:block; width:95% !important; padding:0; float:none;margin-left:auto; margin-right:auto; background-image:url();overflow-x:hidden;position:relative;top:0px;}

#NavColumn{display:none; float:none; background-image:none !important; width:100% !important; overflow-x:hidden !important; margin-left:0; margin-right:0;}

/* Hide extra right column on mobile */
#ExtraColumn{display:none; float:none; background-image:none !important; width:90% !important; overflow-x:hidden !important; margin-left:auto; margin-right:auto; padding-top:20px;}

#Footer, #Footer.Liner {display:block; float:none; background-image:none !important;  background-color :#022334;  width:100% !important; overflow-x:hidden !important;}

.search{position:relative; top:-45px;}
table{width:95%; max-width:95% !important;}
tr {border-top:1px solid #666;}
.stickySocializeIt {display:none;}
form > div {max-width:90% !important;margin-left:2px!important; padding-left:5px !important; padding-right:5px !important; }
form td{display:block !important; width:90%; text-align:center;}
.videowrap{position:relative; left:-8px;padding-bottom:56.25%;padding-top:25px;height:0; }
.video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.AdSenseBoxLeft{float:none;display:block;width:250px;margin:10px auto;border:transparent}

/* Mobile Hamburger Menu from https://codepen.io/alvarotrigo/pen/yLzaPVJ */
#menu__toggle {
  opacity: 0;
  overflow-y: hidden;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0px !important;
}
.menu__btn {
  position: absolute;
  overflow-y: hidden;
  top: 60px;
  right: 12px;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  top:10px;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: absolute;
  top: 45px;
  left: -100%;
  width: 190px;
  height: 120%;
  margin: 0;
  padding: 40px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
  z-index:1000;
}
.menu__item {
  display: block;
  position:relative;
  bottom: 30px;
  padding: 8px 24px;
  color: #375C89 !important;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none !important;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
  color: navy !important;
}
/* end Mobile Hamburger */

}

/* MOBILE - BACKGROUND & OTHER SETTINGS, Small phones-width Only */
@media screen and (max-width:480px){
.ItemRight {border-top:2px solid #eee; border-bottom:2px solid #eee; border-left:transparent; border-right:transparent; padding:5px;width:100%;margin-left:0px; margin-right:0px;}
}
/* end Small Mobile Phones Only */

/* PRINTING - SUPPRESSING OBJECTS AND ADS FROM PRINTING */
@media print {   
iframe  {display: none !important;}
.no-print, .no-print * {display: none !important;}
.js-socializeit {display: none !important;}
.universal-js-insert {display: none !important;}
.adsbygoogle {display: none !important;}
.stickySocializeIt {display: none !important;}
.hideButton {display: none !important;}
.sticky {display: none !important;}
.stickySideBarLeft {display: none !important;}
.ready {display: none !important;}
.socialMedia {display: none !important;}
.shareHeader {display: none !important;}
.textads {display: none !important;}
.banner-ads {display: none !important;}
.banner_ads {display: none !important;}
.ad-zone {display: none !important;}
.ad-space {display: none !important;}
.ad-box {display: none !important;}
.CAN_ad {display: none !important;}
.universal-js-insert {display: none !important;}
.ez-video-center {display: none !important;}
.ezmobfooter {display: none !important;}
.ezmobdesktop {display: none !important;}
.ezoic-floating-bottom {display: none !important;}
.ezmob-footer-desktop {display: none !important;}
.ezo_ad {display: none !important;}
.ezmobtrans {display: none !important;}
.ezmob-footer {display: none !important;}
.GoogleActiveViewElement {display: none !important;}
.GoogleActiveViewInnerContainer {display: none !important;}
#socializeit_ {display: none !important;}
#container {display: none !important;}
#bg_clickthrough {display: none !important;}
#ezoic-pub-ad-placeholder-115 {display: none !important;}
#ezoic-pub-ad-placeholder-131 {display: none !important;}
#ez-sidebar-wall-right {display: none !important;}
#ez-video-outstream-wrap {display: none !important;}
#ez-video-wrap-ez-4998 {display: none !important;}
#ez-video-container-ez-4998 {display: none !important;}
#ez-floating-placeholder-ez-4998 {display: none !important;}
#ez-video-ez-4999 {display: none !important;}
#ez-video-wrap-ez-4999 {display: none !important;}
#ez-vid-preview-ez-4999 {display: none !important;}
#ez-video-links-ez-4999 {display: none !important;}
#ez-video-ez-stuck-bar-ez-4999 {display: none !important;}
#ez-video-ad-container-ez-4999 {display: none !important;}
#ezmobfooter {display: none !important;}
#ezmob-footer-close {display: none !important;}
#ezmob-footer-wrap {display: none !important;}
#ad_unit {display: none !important;}
#canvas {display: none !important;}
#animation_container {display: none !important;}
#div-gpt-ad-memory_improvement_tips_com-medrectangle-2-0 {display: none !important;}
#google_ads_iframe_/1254144,136261988/memory_improvement_tips_com-medrectangle-2_0__container__  {display: none !important;}
}