@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@font-face { font-family: 'Roboto Condensed', sans-serif; }


html { overflow-y: scroll; }
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
/* EECS MAIN STYLE SHEET */
body { background-color:white; margin:0; padding:0; font-family:arial,verdana,helvetica,sans-serif; font-size:14px;color:#000000; }
img { border:0; }

/* general layout */
.blue_bar { width:100%; height:45px; background-color:#335270; padding:0; display:block; } /* menu bar */

/* header */
.header_wrapper { background-color:#0d3255; width:100%; height:auto; display:block; overflow:hidden; }
header { width:1024px; margin:0 auto; display:block; height:auto; }
#labs_logo_full { float:left; width:65%; max-width:320px; margin-left:10px; }
#labs_logo_full img { width:100%; }
#logo_retina, #logo_footer_retina { display:none; }

#labs_logo_mobile, .slicknav_menu, div#mobile_hack, .cbd_slicknav_menu { display:none; }

.ai #labs_logo_full { max-width:407px; }
.ce #labs_logo_full { max-width:570px; }
.is #labs_logo_full { max-width:344px; }
.micl #labs_logo_full { max-width:570px; }
.mpel #labs_logo_full { max-width:570px; }
.optics #labs_logo_full { max-width:570px; }
.radlab #labs_logo_full { max-width:570px; }
.ss #labs_logo_full { max-width:324px; }
.toc #labs_logo_full { max-width:370px; }
.theory #labs_logo_full { float:left; width:65%; max-width:381px; margin-left:10px; }
.theory #labs_logo_mobile { margin:10px; }
.security #labs_logo_full { float:left; width:75%; max-width:780px; margin-left:10px; margin-top:2%; margin-bottom:2%; }
.security #logo_retina #labs_logo_full { margin-top:3%; }
.security #labs_logo_mobile { margin:10px; }

/* registration button */
#header_right { float:right; max-width:175px; width:35%; margin-right:40px; }
#reg_button { width:162px; height:45px; background-color:#ffcc00; margin:20% 0 ! important; }
#reg_button a { display:block; line-height:45px; text-decoration:none; text-transform:uppercase; color:#00274c; text-align:center; }
/* reg button */

#header_search { width:100%; }
#mobile_search { display:none; }
/* header search */
#header_search form { margin:20% 0 0 0 ! important; padding:0; border:0 ! important; color:#003366 ! important; }
.security #header_search form { margin:15% 0 ! important; padding:0; border:0 ! important; color:#003366 ! important; }
#mobile_search form { display:none; }
#header_search > #cse-search-box { width:100%; height:auto; border:0 ! important; margin:0; padding:0; color:#003366 ! important; }
#header_search > #cse-search-box { border:none ! important; }
#header_search > input.search_button[type=text], #header_search > #cse-search-box input[type=text] {
	width:100%; height:28px; background-color:#EFEFEF ! important; margin:0; text-align:center; color:#003366 ! important;
	line-height:28px; font-size:16px; border:0 ! important; padding:0; background-image:none ! important;
}
/* end top search */
/* social links */
.social_wrapper { width:100%; margin:8px auto; text-align:center; }
.social-icons em {display: none;}
ul.social-icons { list-style:none; margin:0 auto; padding:0; }
.social-icons li{position: relative;display:inline-block;margin:0 5px;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;width:30px;height:30px;}
.social-icons li i{font-size:20px;line-height:30px;text-align:center;}
.social_wrapper .social-icons li i{padding-left:1px;}
.social-icons li:hover{background-color:#b0b0b0;border-bottom: none;}
.social-icons li .fa-facebook{padding-left:8px;}
.social_wrapper .social-icons li .fa-facebook{padding-left:1px;}
.social-icons li{background-color:#adafb2;}
.social-icons li i{color:#ffffff;}
.social-icons li:hover{background-color:#ffcf06;}
.social-icons li a{text-decoration: none;display:block;}

/* main menu */
#main_menu_holder { width:1024px; height:45px; margin:0 auto; padding:0; }
#main_menu_holder a, #main_menu_holder a:link, #main_menu_holder a:visited  { color:#ffffff; }
#main_menu_holder .selected a, #main_menu_holder a:hover { color:#ffcc33; }
nav.main_menu { float:none; width:100%; max-width:1024px; height:45px; }
nav.main_menu ul { position: relative; margin:0; padding:0; list-style:none; width:100%; }
nav.main_menu ul li { position: relative; display:inline; line-height:45px; width:auto; }
nav.main_menu ul li a, nav.main_menu ul li a:link, nav.main_menu ul li a:active, nav.main_menu ul li a:visited {
	text-decoration:none; font-weight:normal; color:#ffffff; font-size:16px; display:inline-block; padding:0 2%; width:auto; font-family: "Roboto Condensed", arial, sans-serif; text-transform:uppercase; }
nav.main_menu ul li a:hover { color:#ffcc00; background-color:#00274c; }
nav.main_menu ul li a.current { color:#FFCC33; }
/* main drop menu */
nav.main_menu ul li ul {
	display:none; position:absolute; text-align:left; list-style:none; top:25px; left:0px; padding:0; margin:0;
	background-color: #00274c; z-index:999;
}
nav.main_menu ul li ul { width:244px; }
nav.main_menu ul li ul li { display:block; padding-left:4%; }
nav.main_menu ul li ul li a {
	float:none;	font-weight:normal ! important; font-size:14px ! important; color:#ffffff ! important;
	text-align:left ! important; line-height:normal ! important; display:block; padding:5% 1.5%;
}
nav.main_menu ul li ul li a:hover { color:#acc1ea ! important; }
/* end main drop menu */
/* end main menu */

/* slide show */
.container { clear:both; margin:0 auto; width:1024px; max-height:381px; padding:0; height:auto; }
/* Prevent the slideshow from flashing on load */
#slides { display: none; }
.slidesjs-pagination { clear:both; position:relative; top:-3em; margin: 0 20px 0 0; float: right; list-style: none; z-index:998; }
.slidesjs-pagination li { float: left; margin: 0 1px; }
.slidesjs-pagination li a {
	display: block; width: 22px; height: 0; padding-top: 22px; background-image: url(/eecs/images/pagination.png);
	background-position: 0 0; float: left; overflow: hidden;
}
.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -22px; }
.slidesjs-pagination li a:hover { background-position: 0 -44px; }
.slidesjs-navigation { display:none; }
/* end slide show */

/* content area */
#content_holder { width:100%; max-width:1024px; height:auto; min-height:800px; margin:0 auto 30px auto; background-color:#ffffff; line-height:1.5; overflow:hidden; }
#content_holder #feature { width:100%; height:auto; margin:0 auto; }
#content_holder #feature img { width:100%; }
/* content with side menu/s */
.columns { display:table; border-collapse:collapse; }
#content_row { display:table-row; padding:0; }
#content_body { display:table-cell; vertical-align:top; padding:3% 4% 4% 4%; max-width:560px; width:auto; }
.full { max-width:760px ! important; }
#content_body_home { float:left; width:60%; max-width:635px; padding:20px 0 20px 20px; }
#content_body #feature { width:100%; height:auto; }
#content_body #feature img { width:100%; }
/* content with left menu only */
#content_row > #content { padding:3% 4% 4% 4.25%; max-width:820px; }
/* safari hack */
/* safari doesn't do display:table well, so we have to work around it */
_::-moz-svg-foreign-content, :root .full { max-width:760px ! important; padding:3% 2% 2% 2%; }
_::-moz-svg-foreign-content, :root .columns { display:block; }
_::-moz-svg-foreign-content, :root #content_row { display:block; }
_::-moz-svg-foreign-content, :root #content_body { display:block; }

#content_body h1, #content_body_home h1, h1 { font-size:24px; color: #7a121c; }
#content_body h2, #content_body_home h2, h2 { font-size: 22px; color: #7a121c; }
#content_body h3, #content_body_home h3, h3 { font-size: 20px; color:#003366; }

/* no stinkin' italics, please! 
#content_body h4, #content_body_home h4 { font-size:20px; font-style:italic; font-weight:normal; color:#003366; }
*/

/* djh 2/19/15 */
#content_body h4, #content_body_home h4, #content_holder h4 { font-size:20px; font-style:normal; font-weight:normal; color:#003366; }
#content_body h5, #content_body_home h5, #content_holder h5 { font-size:18px; color:#003366; }
#content_body h6, #content_body_home h6, #content_holder h5 { font-size:18px; border-bottom:1px solid #003366; }

/* underlines requested
#content_body a, #content_body a:link, #content_body a:visited, #content_body a:active,
#content_body_home a, #content_body_home a:link, #content_body_home a:visited, #content_body_home a:active { color:#007AF4; }
#content_body a:hover, #content_body_home a:hover { background-color:#007AF4; color:#ffffff; }
*/

/* djh */
#content_body a, #content_body a:link, #content_body a:visited, #content_body a:active,
#content_body_home a, #content_body_home a:link, #content_body_home a:visited, #content_body_home a:active { color:#002467; text-decoration:underline; }
#content_body a:hover, #content_body_home a:hover,
#content_holder a, #content_holder a:link, #content_holder a:visited, #content_holder a:active { color:#002467; text-decoration:underline; }

#content_body h1.red, #content_body_home h1.red { font-size: 24px; font-weight:normal; color:#800000; }
#content_body h2.red, #content_body_home h2.red { font-size: 20px; font-weight:normal; color:#800000; }


/* SIDEBARS */
#left_sidebar, #right_sidebar { display:table-cell; vertical-align:top; padding:3% 1%; }
/* left menu */
#left_sidebar { width:18%; max-width:179px; min-width:120px; }
nav#left_nav { background-color:#ececec; padding-top:10px; padding-bottom:0px; }
nav#right_nav { background-color:#f1ede8; padding:0; margin:0; }
nav#left_nav ul { margin:0; padding:0; list-style:none; width:100%; font-size:13px; }
nav#right_nav ul { margin:0; padding:0; list-style:none; width:100%; font-size:13px; } /* was margin-right:10%; */
nav#left_nav ul li { padding:0; border-bottom:1px solid #c7c7c7; /*#989898;*/  }
nav#left_nav ul li.last { border-bottom:0; }
nav#right_nav ul li { margin:0 ! important; padding:0; border-bottom:1px solid #ffffff; }  /* was margin:5%; djh*/
nav#left_nav ul li.subtitle { font-weight:normal; letter-spacing:normal; display:block; padding:5%; background-color:#a4bcd4; }
nav#right_nav ul li.subtitle { 
    font-weight:bold; letter-spacing:normal; display:block; padding:5%; color:#cc9900; font-size:16px;
    border-bottom:1px solid #cc9900;
}
nav#left_nav ul li a, nav#left_nav ul li a:link, nav#left_nav ul li a:active, nav#left_nav ul li a:visited {
    text-decoration:none; font-weight:normal; color:#000000; display:block; padding:5%; font-size:13px; margin:auto ! important;
}
nav#right_nav ul li a, nav#right_nav ul li a:link, nav#right_nav ul li a:active, nav#right_nav ul li a:visited {
    text-decoration:none; font-weight:normal; color:#000000; display:block; padding:3% 5% 3% 5%; font-size:13px; margin:auto ! important;
}
nav#left_nav ul li a:hover { background-color:#acc1ea; /*#a4bcd4;*/ }
nav#left_nav ul li.last a:hover { } /* this was here from when we added rounded corners */
nav#left_nav ul li a.current, nav#left_nav ul li a.current:visited { color:#ffffff; background-color:#003366; }
/* right menu */
#right_sidebar { width:20%; max-width:200px; }
/* buttons */
#left_sidebar .button, #right_sidebar .button { width:100%; padding:0%; display:block; margin:2% 0; clear:both; }
#left_sidebar .button img, #right_sidebar .button img { width:100%; }
#left_sidebar img { max-width:100%; }
.vcenter { display: inline-block; vertical-align: middle; line-height:normal; }
/* safari doesn't do display:table well, so we have to work around it */
_::-moz-svg-foreign-content, :root #left_sidebar { display:block; width:18%; float:left; }
_::-moz-svg-foreign-content, :root #content_body { display:block; float:left; }
_::-moz-svg-foreign-content, :root #right_sidebar { width:24%; float:right; }



/* RIGHT SIDEBAR (HOME) */
#right_sidebar_home { 
    float:right; width:33%; max-width:338px; padding:0; background-color:#efefef; margin:25px 0 0 0;
}
#right_sidebar_home h3, #right_sidebar_home h4, #right_sidebar_home h5, #right_sidebar_home h6, #right_sidebar_home p,
#right_sidebar_home ul, #right_sidebar_home ol {
    margin-left:12px; margin-right:12px;
}
#right_sidebar_home h2 { font-size: 22px; background-color:#c5d9f2; display:block; color:#003366; padding:10px; margin-top:0; }
#right_sidebar_home h3 { font-size: 20px; }
#right_sidebar_home h4 { font-size:20px; font-style:italic; font-weight:normal; }
#right_sidebar_home h5 { font-size:18px; }
#right_sidebar_home h6 { font-size:18px; border-bottom:1px solid #003366; }

/* replaced 
#right_sidebar_home a, #right_sidebar a:link, #right_sidebar_home a:visited, #right_sidebar_home a:active { color:#007AF4; }
#right_sidebar_home a:hover { background-color:#007AF4; color:#ffffff; }
*/

/* djh 2/19 */
#right_sidebar_home a, #right_sidebar a:link, #right_sidebar_home a:visited, #right_sidebar_home a:active { color:#002467; text-decoration:underline; }
#right_sidebar_home a:hover { text-decoration:underline; color:#002467; }
#right_sidebar_home ul { list-style: none; margin-left:12px; padding:0; }
/* END RIGHT SIDEBAR (HOME) */

/* RIGHT SIDEBAR - 3 column layout */
.right_sidebar_home { 
    padding:0; background-color:#efefef; margin:25px 0 0 0;
}
.right_sidebar_home h3, .right_sidebar_home h4, .right_sidebar_home h5, .right_sidebar_home h6, .right_sidebar_home p,
.right_sidebar_home ul, .right_sidebar_home ol {
    margin-left:12px; margin-right:12px;
}
.right_sidebar_home h2 { font-size: 22px; background-color:#c5d9f2; display:block; color:#003366; padding:10px; margin-top:0; }
.right_sidebar_home h3 { font-size: 20px; }
.right_sidebar_home h4 { font-size:20px; font-style:italic; font-weight:normal; }
.right_sidebar_home h5 { font-size:18px; }
.right_sidebar_home h6 { font-size:18px; border-bottom:1px solid #003366; }

/* djh 2/19 */
.right_sidebar_home a, .right_sidebar a:link, .right_sidebar_home a:visited, .right_sidebar_home a:active { color:#002467; text-decoration:underline; }
.right_sidebar_home a:hover { text-decoration:underline; color:#002467; }
.right_sidebar_home ul { list-style: none; margin-left:12px; padding:0; }
/* END RIGHT SIDEBAR (HOME) */


/* TYPOGRAPHY */
/* LEFT SIDEBAR - outside of menu */
#left_sidebar a, #left_sidebar a:link, #left_sidebar a:visited, #left_sidebar a:active,
#left_sidebar p a, #left_sidebar p a:link, #left_sidebar p a:visited, #left_sidebar p a:active { 
    color:#0066ff; text-decoration:underline;
}
#left_sidebar h1, #left_sidebar h1 a, #left_sidebar h1 a:link, #left_sidebar h1 a:visited, #left_sidebar h1 a:active {
    color:#0066ff; font-size:22px;
}
#left_sidebar h2, #left_sidebar h2 a, #left_sidebar h2 a:link, #left_sidebar h2 a:visited, #left_sidebar h2 a:active {
    color:#003366; font-size:20px ! important;
}
#left_sidebar h3, #left_sidebar h3 a, #left_sidebar h3 a:link, #left_sidebar h3 a:visited, #left_sidebar h3 a:active {
    color:#333; font-size:18px; font-family: "Roboto Condensed", arial, sans-serif; text-transform:uppercase; line-height:1.25;
}
#left_sidebar h4, #left_sidebar h4 a, #left_sidebar h4 a:link, #left_sidebar h4 a:visited, #left_sidebar h4 a:active {
    color:#0066ff; font-size:16px;
}
#left_sidebar h5, #left_sidebar h5 a, #left_sidebar h5 a:link, #left_sidebar h5 a:visited, #left_sidebar h5 a:active {
    color:#003366; font-size:14px;
}
#left_sidebar h6, #left_sidebar h6 a, #left_sidebar h6 a:link, #left_sidebar h6 a:visited, #left_sidebar h6 a:active {
    color:#333; font-size:12px;
}
#left_sidebar h1, #left_sidebar h2, #left_sidebar h3, #left_sidebar h4, #left_siderbar h5, #left_sidebar h6 { 
    padding:0; border:0; margin:auto; letter-spacing:normal;
}
#left_sidebar h1, #left_sidebar h2, #left_sidebar h3 { font-weight:normal; }
#left_sidebar h4, #left_siderbar h5, #left_sidebar h6 { font-weight:bold; }
#left_sidebar h1 a, #left_sidebar h2 a, #left_sidebar h3 a, #left_sidebar h4 a, #left_siderbar h5 a, #left_sidebar h6 a { 
    text-decoration:underline ! important;
}


/* SIDE NAV HEADINGS */
#left_nav a, #right_nav a, 
#left_nav a:link, #right_nav a:link, 
#left_nav a:active, #right_nav a:active, 
#left_nav a:visited, #right_nav a:visited { 
    text-decoration:none;
}

#left_nav h3 { 
    color:#003366; margin:0 0 0 0; padding:0 0 4% 5%; font-size:20px; font-weight:normal !important; letter-spacing:normal;
    display:block; border-bottom:1px solid #c7c7c7;
}
#right_nav h3 { 
    font-weight:normal; letter-spacing:normal; display:block; padding:5%; color:#cc9900; font-size:16px;
    border-bottom:1px solid #cc9900;
}
/* END SIDE NAV HEADINGS */




/* FOOTER */
.footer_bar { clear:both; width:100%; background-color:#0d3255; height:auto; font-size:14px; }
#footer { 
    clear:both; width:100%; max-width:1024px; padding:4px 0; height:auto; margin: 0 auto; font-size:14px;
}
#logo_footer_regular #footer_logo_cse {
    margin:15px 0 0 15px; width:363px; height:47px; background:url(/eecs/images/CSE-Logo-Lab-Footer.png) top left no-repeat;
}
#logo_footer_retina #footer_logo_cse {
    margin:15px 0 0 15px; width:363px; height:47px; background:url(/eecs/images/CSE-Logo-Lab-Footer-Hi.png) top left no-repeat; background-size:363px 47px;
}
#footer_left { clear:both; width:49%; float:left; margin:0 0 0 15px; padding:0; }
#footer_right { width:48%; float:right; margin:0 15px 0 0; padding:0; }
nav.footer { clear:both; width:98%; height:auto; }
nav.footer ul, #copyright ul { position: relative; padding:0; list-style:none; }
nav.footer ul li, #copyright ul li { position: relative; display:inline-block; line-height:20px; padding:0; color:#ffffff; }
nav.footer ul li a, nav.footer ul li a:link, nav.footer ul li a:active, nav.footer ul li a:visited,
#copyright ul li, #copyright ul li a, #copyright ul li a:link, #copyright ul li a:active, #copyright ul li a:visited {
	text-decoration:none; font-weight:normal; color:#ffffff; font-size:14px;
}
nav.footer ul li.first a { padding:0 14px 0 0; }
nav.footer ul li.middle a { padding:0 13px 0 13px; }
nav.footer ul li.last a { padding:0 0 0 14px; }
nav.footer ul li a:hover, #copyright ul li a:hover { color:#ffcc33; }
#copyright { clear:both; text-align:right; color:#ffffff; line-height:20px; font-size:12px; }
#copyright p, #copyright ul, #copyright li { font-size:12px ! important; }
#copyright a, #copyright a:link, #copyright a:active, #copyright a:visited { color:#ffffff; font-size:12px ! important; }
/* end footer menu */
#footer_logo_ece { 
    margin:15px 0 0 0; width:50%; max-width:363px; height:47px; background:url(/eecs/images/ECE-Logo-Lab-Footer.png) top left no-repeat;
}
#footer_logo_cse {
    margin:15px 0 0 0; width:50%; max-width:363px; height:47px; background:url(/eecs/images/CSE-Logo-Lab-Footer.png) top left no-repeat;
}

/* END FOOTER */

div.image1024, .image1024 { 
    width:100% ! important; max-width:1024px ! important; height:auto; margin:0 auto;
    font-weight:bold; color: #999; text-align: center; font-size:12px ! important;
}
div.image555, .image555 { 
    width:100% ! important; max-width:555px ! important; height:auto; margin:auto auto 10px auto;
    font-weight:bold; color: #999; text-align: center; font-size:12px ! important;
}
div.image760, .image760 { 
    width:100% ! important; max-width:760px ! important; height:auto; margin:0 auto 10px auto;
    font-weight:bold; color: #999 ! important; text-align: center ! important; font-size:12px ! important;
}
div.image161, .image161 { 
    width:100% ! important; max-width:161px ! important; height:auto; margin-bottom:10px;
    font-weight:bold; color: #999 ! important; text-align: center ! important; font-size:12px ! important;
}
div.image50p, .image50p { 
    width:100% ! important; max-width:380px ! important; height:auto; margin-bottom:10px;
    font-weight:bold; color: #999 ! important; text-align: center ! important; font-size:12px ! important;
}
div.image25p, .image25p { 
    width:100% ! important; max-width:190px ! important; height:auto; margin-bottom:10px;
    font-weight:bold; color: #999 ! important; text-align: center ! important; font-size:12px ! important;
}
div.image33p, .image33p { 
    width:100% ! important; max-width:250px ! important; height:auto; margin-bottom:10px;
    font-weight:bold; color: #999 ! important; text-align: center ! important; font-size:12px ! important;
}
.image1024 img, .image760 img, .image555 img, .image161 img, .image50p img, .image25p img, .image33p img {
    width:100% ! important; height:auto; text-align:center; margin: 0 auto ! important;
}
.imageFull img { 
    width:100% ! important; height:auto; text-align:center; margin: 0 auto;
}


/* for odd images */
.wide_image { width:100% ! important; max-width:800px ! important; height:auto; margin-bottom:10px; text-align:center; }
.wide_image img { width:100% ! important; max-width:800px ! important; height:auto; }
img.w75 { width:75px ! important; height:100px; max-width:75px ! important; max-height:100px; min-width:75px; min-height:100px; }

/* generic columns */
.one_column { clear:both; width:100%; margin:18px 0 1px 0; overflow:hidden; height:auto; }
.two_column { float:left; width:45%; margin:0 2.5% 0 2.5%; }
.three_column { float:left; width:30%; margin:1%; }
.four_column { float:left; width:24%; max-width:236px; margin:0.5%; padding:0; }
.five_column { float:left; width:18%; margin:1%; padding:0; max-width:204px; }
.six_column { float:left; width:16%; max-width:158px; margin:0.25%; padding:0; font-size:12px; color:#000000; }
.explore { max-height:145px; }
.four_column img, .six_column img, .five_column img, .three_column img, .two_column img { width:100%; height:auto; border:0; margin:0 auto; }
.numbers img { max-width:159px; }
.steves img { max-width:221px; }
.two_column_25 { float:left; width:25%; margin:1% 1% 3% 1%; clear:both; }
.two_column_75 { float:right; width:71%; margin:1% 1% 3% 1%; }
.two_column_25 img { width:100%; max-width:200px; height:auto; }
.two_column_75 img { width:100%; max-width:500px; height:auto; }
.two_column_50l { float:left; width:48%; margin:1% 1% 3% 1%; clear:both; }
.two_column_50r { float:right; width:48%; margin:1% 1% 3% 1%; }
.two_column_50l img { width:100%; max-width:350px; height:auto; }
.two_column_50r img { width:100%; max-width:350px; height:auto; }
.three_column_33l { float:left; width:31%; margin:1% 1% 3% 1%; clear:both; }
.three_column_33c { float:left; width:31%; margin:1% 1% 3% 1%; }
.three_column_33r { float:right; width:31%; margin:1% 1% 3% 1%; }
.three_column_33l img, .three_column_33c img, .three_column_33r img { width:100%; max-width:233px; height:auto; }
/* end generic columns */

/* flex and tiles */
/* FLEX */
.flex-border { border:1px solid #cccccc; }
.flex-left-border { border-left:1px solid #cccccc; padding-left:15px; margin-left:15px; }
.flex-pad { padding:1%; }
.flex-container { display:-webkit-flex; display:flex; margin:20px auto; -webkit-flex-wrap:wrap; flex-wrap: wrap; width:100%; }
.flex-story { display:-webkit-flex; display:flex; }
.flex-quote { flex-direction:row-reverse; }
.no-flex { -webkit-flex:none; flex:none; }
.flex1 { -webkit-flex:1; flex:1; }
.flex2 { -webkit-flex:2; flex:2; }
.flex3 { -webkit-flex:3; flex:3; }
.flex4 { -webkit-flex:4; flex:4; }

.flex10p { width:10%; margin:5px; }
.flex15p { width:15%; margin:5px; }
.flex20p { width:20%; margin:5px; }
.flex25p { max-width:25%; margin:5px; }
.flex30p { width:30%; margin:5px; }
.flex33p { width:33%; margin:5px; }
.flex40p { width:40%; margin:5px; }
.flex50p { width:50%; margin:5px; }
.ai-home .flex50p { margin-right:40px; }
.flex60p { width:60%; margin:5px; }
.flex66p { width:66%; margin:5px; }
.flex75p { width:75%; margin:5px; }
.flex80p { width:80%; margin:5px; }
.flex90p { width:90%; margin:5px; }
.flex100p { width:100%; }

.flex263, .flex263 img { min-width:263px ! important; max-width:263px; height:145px; }

.flex243, .flex243 img { min-width:243px ! important; max-width:243px; height:145px; margin:5px; }

.flex1 img { max-width:100% ! important; }
.flex-quote blockquote, .story_container blockquote { font-family: 'bebas_neuebold', arial, verdana, sans-serif; border-left:5px solid #ffcb05; padding:0 0 0 1.7rem; margin:0 0 0 1.7rem; font-size:3rem; line-height:.9; }
.flex-quote blockquote p, .story_container blockquote p { font-family: 'bebas_neuebold', arial, verdana, sans-serif; line-height:.9; margin-top:15px; margin-bottom:15px; }
.story_container blockquote p { margin-top:20px ! important; margin-bottom:20px ! important; }
.flex-quote blockquote p { margin-top:0 ! important; margin-bottom:0 ! important; }
.flex-quote .story-caption, .story_container .story-caption { font-size:.8em; display:block; margin-bottom:20px; }

/* tiles */
.tile-container { display:flex; flex-wrap:wrap; align-items: stretch; }
.tile { flex:1 0 300px; align-self:stretch; max-width:100%; min-height: 410px; margin:5px; border: 3px solid #ccc; background:white; transition: box-shadow .25s; border-radius: 2px; background-position: center;
  /* Min width */
  &:nth-child(2n+3) { flex-basis:300px; }
  &:nth-child(4n+5) { flex-basis:450px; }
  /* End Min width */
  /* Color */
  &:nth-child(odd) { border-top-color:teal; }
  &:nth-child(even) { border-top-color:wheat; }
  /* End Color */
}
.tile:hover { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.23), 0 1px 20px 0 rgba(0, 0, 0, 0.18); }
/* flex and tiles */

/*
<div class="cards flex243"><a href="game-design.html"><span class="card_title">Game Design &amp; Development</span><span class="card_date">July 10 - 14</span></a></div>
*/

.cards { background:#163555; min-height:100px ! important; }
.cards a { text-decoration:none ! important; }
.cards a .card_title { display:block; font-family: 'Roboto Condensed', sans-serif; color:#ffffff; font-weight:800; font-size:24px; text-align:center; line-height:1.25; padding:10px 10px 15px 10px; }
.cards a .card_date { display:block; font-family: 'Roboto Condensed', sans-serif; color:#FEC93A; font-weight:800; font-size:20px; text-align:center; line-height:1.25; padding:10px; }

/* home news section */
#news_wrapper { width:65%; margin:0; padding:1%; float:left; height:auto; }
/* end home news section */
/* home events section */
#events_wrapper { width:30%; float:right; margin:0; padding:1% 1% 1% 2%; height:auto; }
#news_wrapper a, #news_wrapper a:link, #news_wrapper a:visited, #news_wrapper a:active,
#events_wrapper a, #events_wrapper a:link, #events_wrapper a:visited, #events_wrapper a:active {
	color:#000000; text-decoration:none; font-size:14px;
}
#news_wrapper a:hover, #events_wrapper a:hover { color:#a4bcd4; }
.wrapper { width:98%; padding:1%; clear:both; }
.icon_left { width:16%; float:left; margin-bottom:2%; }
.item_right { width:82%; float:right; margin-bottom:2%; }
/* end home events section */

/* colors */
.maize_back { background-color:#FFCB05; }
.dark_blue_back { background-color:#00274C; }
.blue_back { background-color:#2878ba; }
.purple_back { background-color:#7408a7; }
.teal_back { background-color:#21c1bc; }
.red_back { background-color:#a4270b; }
.orange_back { background-color:#e96300; }
.dijon_back { background-color:#beb300; }
.coffee_cream_back { background-color:#e4cea2; }
.khaki_back { background-color:#9e9969; }
.gray_back { background-color:#8f9194; }

/* testing only */
#test {
	display:none;
}

/* READ MORE */
.exptext_hidden { display:none; }
.exptext_button {
	cursor:pointer; text-align:center;
	display:block; width:100px; padding:6px; background-color:#003366; color:#ffffff;
	-webkit-box-shadow: 3px 3px 1px 0px rgba(124, 124, 124, 0.75);
	-moz-box-shadow: 3px 3px 1px 0px rgba(124, 124, 124, 0.75);
	box-shadow: 3px 3px 1px 0px rgba(124, 124, 124, 0.75);
}

/* common */
.clear_fix { clear:both; }
.first_item { margin-top:10px; }
.center { text-align:center; }

/* POSITIONING */
.floatleft { float: left; margin-right: 15px; margin-top: 0px; margin-bottom: 3px; }
.floatright { float: right; margin-left: 15px; margin-top: 0px; margin-bottom: 3px; }


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    #logo_retina { display:inline-block; float:left; width:65%; max-width:640px; margin-left:10px; }
    #logo_regular, #logo_footer_regular { display:none; }
    #labs_logo_mobile #logo_retina { width:50%; max-width:246px; margin:3% 2%;}
    #logo_footer_retina { display:block; }
}


/* RESPONSIVE STUFF */
/* 
as soon as screen gets below 1024, but before it hits 924
affects desktop and laptop - not ipad
MUST MAKE ADDITIONS/CHANGES HERE TO THE NEXT SECTION, TOO!
*/
@media only screen and (max-width: 1066px) {
    #content_main { padding:0 20px;}
}
@media only screen and (max-width: 1033px) {
    #footer_left { width:100%; clear:both; }
    #footer_right { margin-right:8px; width:100%; clear:both; }
}
@media only screen and (max-width: 1023px) {
    header, #main_menu_holder, #big_slide_wrapper, .container, nav.main_menu, #footer { width:100%; max-width:1023px; }
    #content_holder { max-width:1000px; }
    .container { height:auto; position: relative; height: 0; overflow: hidden; padding-bottom:37.21%; }
    .container img { width:100%; height:auto; outline:0; }
    _::-moz-svg-foreign-content, :root #content_body { max-width:80% ! important; padding:3% 1% 2% 2%; }
    _::-moz-svg-foreign-content, :root .full { 
    max-width:760px ! important; padding:3% 1% 2% 2%; margin-right:-50px;
    }
}
@media only screen and (max-width: 860px) {
    .security #labs_logo_full { width:65%; max-width:580px; margin-top:4%; margin-bottom:4%; }
}
@media only screen and (max-width: 980px) {
    .hide_mob { display:none; }	
    .flex25p { flex:0 0 50%; width:50%; max-width:400px; }
    .you_tube { width:96%; margin:20px auto ! important; max-width:960px; padding:0 ! important; }
    .you_tube a { display:block; width:100%; margin:0; padding:0; }
    .you_tube a img { width:100%; padding:0 ! important; margin:0 !important; }
}
/*
for ipad in portrait mode
should be okay for iphone 4
and desktops/laptops down to 768 width 
*/
@media only screen and (max-width: 924px) {
    header, #main_menu, #big_slide_wrapper { width:100%; max-width:1020px; }
    #footer_logo_cse {  }
    #footer { max-width:924px; }
    .footer_social_wrapper, nav.footer2 { height:auto; margin-top:1%; margin-bottom:1.25%; }
    #copyright { padding:0; width:100%; }
    #copyright ul li a { padding:0; }
    nav.footer ul, #copyright ul { width:auto; }
    nav.footer ul li, #copyright ul li { line-height:20px; padding:2% 0 0 0; color:#ffffff; }
    nav.footer ul li.first a { padding:0 1em 0 0; }
    nav.footer ul li.last a { padding:0 0 0 1em; }
    nav.main_menu ul li { padding:0 1.125%; }
    nav.main_menu ul li.menu_right {  padding:0 2.25%; }
    nav.main_menu ul li a, nav.main_menu ul li a:link, nav.main_menu ul li a:active, nav.main_menu ul li a:visited { font-size:1em; padding:0 1.125%; }
}
@media only screen and (max-width: 767px) {
    .maize_bar { height:7px; }
    .blue_bar, #labs_logo_full, #main_menu_holder, .hide767 { display:none; }
    .social_wrapper { display:none; }
    header, #slides, #mobile_hack, #footer_bar { width:100% ! important; max-width:760px ! important; height:auto; }
    #content_holder { max-width:760px ! important; margin:0 ! important; }
    div#mobile_hack { display:block; height:auto; margin:0; padding:0; background-color:#335270; }
    .slicknav_menu ul { background-color: #00274c ! important; }
    #header_right { max-width:140px; margin:0 3% 0 0; width:40%; height:auto ! important; }
    #reg_button { height:20%; width:100%; max-width:140px; margin:30% 3% 0 0 ! important; }

    #labs_logo_mobile { float:left; display:block; width:180px; margin:0; padding:0; text-align:center; }
    #labs_logo_mobile img { width:100%; max-width:180px; margin:3% auto; padding:0; border:0; }
    .ai #labs_logo_mobile { width:157px; margin-left:10px; }
    .ai #labs_logo_mobile img { max-width:157px; }
    .ce #labs_logo_mobile { width:250px; margin-left:10px; }
    .ce #labs_logo_mobile img { max-width:250px; }
    .is #labs_logo_mobile { width:250px; margin-left:10px; }
    .is #labs_logo_mobile img { max-width:250px; }
    .micl #labs_logo_mobile { width:250px; margin-left:10px; }
    .micl #labs_logo_mobile img { max-width:250px; }
    .mpel #labs_logo_mobile { width:250px; margin-left:10px; }
    .mpel #labs_logo_mobile img { max-width:250px; }
    .optics #labs_logo_mobile { width:250px; margin-left:10px; }
    .optics #labs_logo_mobile img { max-width:250px; }
    .radlab #labs_logo_mobile { width:250px; margin-left:10px; }
    .radlab #labs_logo_mobile img { max-width:250px; }
    .ss #labs_logo_mobile { width:250px; margin-left:10px; }
    .ss #labs_logo_mobile img { max-width:250px; }
    .toc #labs_logo_mobile { width:250px; margin-left:10px; }
    .toc #labs_logo_mobile img { max-width:250px; }

    #logo_retina { width:50%; max-width:100px; }
    #mobile_search { float:right; text-align:right; margin:0 1% 0 0; padding:1% 2% 1% 1%; width:35%; display:block;	height:3em;	}
    #mobile_search form { float:right; padding:0; border:0; width:90%; display:block; margin: 4% 2% 0 0; }
    input.search_button[type=text] { 
        background-color:#ffffff; color:#003366;
        border:0; outline:0; width:80%; margin:0 5px 0 0; height:1.125em;
        position: relative; vertical-align: middle; padding: 0.438em 0.625em 0.438em 0.625em;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    }
    .js .slicknav_menu { display:block; width:56%; padding:1.5% 1% 1% 1%; margin:0; float:left; }
    .js .cbd_slicknav_menu { display:block; width:56%; padding:1.5% 1% 1% 1%; margin:0; float:left; }
    .js #main_menu { display:none; }
    .js #cbd_mobile { display:none; }

    /* content area */
    #content_body_home { 
        width:96% ! important; max-width:760px ! important; float:none; clear:both; padding:0 2% ! important; margin:0 auto ! important;
    }
    #right_sidebar, #right_sidebar_home { width:96%; max-width:760px; float:none; clear:both; margin:0 auto ! important; }
    .hide767 { display:none ! important; }
    /*#left_sidebar { display:none; }*/
    #left_sidebar { display:none; }
    #content_body { 
        width:96% ! important; max-width:760px ! important; float:none; clear:both; padding:0 2% ! important; margin:0 auto ! important;
    }
    #left_nav { display:none; }

    .columns, #content_row, #content_body { display:block; }
    #content_body { padding:3% 4% 4% 4%; max-width:767px; width:100%; }
    #content_row > #content { padding:3%; max-width:767px; width:100%; }

    .two_column, .three_column, .four_column, .five_column, .six_column,
    .two_column_25, .two_column_75, .two_column_50l, .two_column_50r, 
    .three_column_33l, .three_column_33c, .three_column_33r { float:none; width:90%; margin:1% auto 3% auto; }

    .two_column_25 img, .two_column_75 img, .two_column_50l img, .two_column_50r img, 
    .three_column_33l img, .three_column_33c img, .three_column_33r img { margin:6px auto; }

    /* footer */
    #footer { width:98%; padding:1%; max-width:760px; height:auto; }
    #footer_left { width:100%; max-width:26.25em; float:none; margin:1%; }
    #footer_right, #copyright { float:none; clear:both;  width:100%; max-width:26.25em; margin:1%; text-align:left; }
    nav.footer ul li.first a { padding:0 0.5em 0 0; font-size:1em; }
    nav.footer ul li.last a { padding:0 0 0 0.5em; font-size:1em; }
    nav.footer2 a { font-size:1em ! important; }
    nav.footer2 { float:left; width:25%; max-width:6em; height:auto; text-align:left; }
    .footer_social_wrapper { float:right; text-align:left; margin-top:2%; width:70%; max-width:15em; }
    #copyright ul li, #copyright ul li a, #copyright ul li a:link, #copyright ul li a:active, #copyright ul li a:visited { 
        font-size:1em; padding:0; text-align:left;
    }
    .slidesjs-pagination { display:none; }
    .slidesjs-navigation { display:block; position:relative ! important; top:-2.5em; z-index:998; }
    #slides a.slidesjs-navigation { opacity:0.55; }
    #slides a:hover.slidesjs-navigation { opacity:0.75; }
    #slides a:link, #slides a:visited { color: #ffffff; font-size:4em; text-decoration:none; }
    #slides a:hover, #slides a:active { color: #ffcc33; font-size:4em; text-decoration:none; }
    #slides .slidesjs-previous { float: left; }
    #slides .slidesjs-next { float:right; }
    .flex50p { flex:0 0 100%; width:100%; max-width:400px; }

    .flex10p, .flex15p, .flex20p, .flex25p, .flex30p, .flex33p, .flex40p, .flex50p, .flex60p, .flex66p, .flex75p, .flex80p, .flex90p, .flex100p { width:95%; max-width:95%; margin-right:auto; margin-left:auto; }
    
    .ai-home .flex50p, .ai-home .flex30p, .ai-home .flex20p { width:80%; max-width:80%; flex-basis:100%; }


}
@media only screen and (max-width: 500px) {
    #content_body { max-width:480px; padding:0; clear:both; float:none; width:98%; }
    #right_sidebar { float:none; clear:both; width:98%; max-width:480px; }
    .one_column { margin:2% auto 2% auto ! important; height:auto; }
    .two_column, .four_column { clear:both; float:none; margin:2% auto 2% auto; width:98%; max-width:98%; height:auto; max-height:none;	}
    .five_col { clear:both; float:none; margin:1% auto 1% auto; width:100%; max-width:100%; height:auto; max-height:none; }
    .five_column { width:50%; max-width:50%; margin:1% auto; }
    .grid_left, .grid_right, .grid_mid { clear:both; float:none; width:98%; max-width:98%; height:auto; max-height:none; }
    .wrap_row { margin-top:-3% ! important; }
    .four_column img { margin:0 auto; max-width:100%; width:100%; min-width:236px; max-width:12em; text-align:center; }
    .five_column img { margin:0 auto; max-width:100%; width:100%; min-width:158px; max-width:11.75em; text-align:center; }
    #news_wrapper { clear:both; float:none; width:98%; }
    #events_wrapper { clear:both; float:none; width:98%; margin:1.5% 0 0 0; padding:1%; }
    /* footer */
    #footer { width:98%; padding:1%; max-width:500px; height:auto; }
    #footer_left { width:98%; max-width:500px; float:none; margin:0.5%; }
    #footer_right { float:none; clear:both; width:98%; margin:0.5%; }
    .slidesjs-navigation { top:-1.75em; }
    #mobile_search form { margin: 6% 2% 0 0; }
}
@media only screen and (max-width: 450px) {
    #header_right { height:auto; max-height:100px; }
    #labs_logo_mobile { width:50%; max-width:180px; }
    #labs_logo_mobile img { width:100%; min-width:100px; max-width:180px; }
    #header_right { max-width:120px; margin:0 2% 0 0; }
    #logo_footer_retina { max-width:363px; }
    #logo_footer_regular #footer_logo_cse {
    margin:15px 0 0 4px; width:100%; background:url(/eecs/images/CSE-Logo-Lab-Footer-Hi.png) top left no-repeat; background-size:250px auto; }
    #logo_footer_retina #footer_logo_cse {
    margin:15px 0 0 4px; width:100%; background:url(/eecs/images/CSE-Logo-Lab-Footer-Hi.png) top left no-repeat; background-size:250px auto; }
    nav.footer ul li.first a { padding:0 6px 0 0; }
    nav.footer ul li:nth-child(1):after { content:'|'; }
    nav.footer ul li:nth-child(2):after { content:'|'; }
    nav.footer ul li.middle a { padding:0 6px 0 6px; }
    nav.footer ul li.last a { padding:0 0 0 6px; }
}
@media only screen and (max-width: 363px) {
    #footer_logo_cse { width:94%; max-width:363px; padding:1%; }
}

/* djh 2/16/15 */
#content_body h2.blue,
#content_body .blue, #content_body .blue a:link, #content_body .blue a:visited, #content_body h4 a:link,a:visited {
    font-size: 14px; color: #003366; font-weight:bold; font-family:Arial, Verdana, Helvetica, san-serif; text-decoration: none;
}
#content_body .blue a:active, #content_body .blue a:hover {
    font-size: 14px; color: #003366; font-weight:bold; font-family:Arial, Verdana, Helvetica, san-serif; text-decoration: underline;
}
#content_body .one_column, #content_body .two_column#content_body .three_column, #content_body .four_column,
#content_body .five_column, #content_body .six_column { line-height:normal; }
#content_body p.medium_blue { color: #06F; font-weight: bold; font-size: 16px; line-height: 24px; }

/* djh 2/16/15 */
#content_left_column2, .content_left_column2 {
    float:left; width:500px; height:auto; margin:-25px 0px 0px 0px; padding:20px 25px 0px 23px; background-color:#ffffff;
}
#content_news_holder2, .content_news_holder2 { width:470px; height:auto; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; }
#content_news_image2, .content_news_image2 { float:left; width:130px; height:auto; padding-top:5px; margin:0px; }
#content_news_text2, .content_news_text2 { float:right; width:335px; height:auto; }
#content_news_text2 p, .content_news_text2 p { margin:0px 0px 0px 12px; font-size:12px; color:#000000;}
#content_news_text2 a.readmore, #content_news_text2 a.readmore:link,
#content_news_text2 a.readmore:active, #content_news_text2 a.readmore:visited,
.content_news_text2 a.readmore, .content_news_text2 a.readmore:link,
.content_news_text2 a.readmore:active, .content_news_text2 a.readmore:visited { color:#000000; font-size:12px; font-weight:normal; margin-top:0px; text-decoration:none; }
#content_news_clear2, .content_news_clear2 { clear:both; height:20px; width:430px; }

/*
h4.blue { font-family:Arial, Verdana, Helvetica, sans-serif; color:#000080; font-size: 15px; border: none; line-height: 30%; }
h5.blue { font-family:Arial, Verdana, Helvetica, sans-serif; color:#000080; font-size: 13px; border: none; line-height: 130%; }
*/
h4.news { clear:both; color:#002467; font-size:11px; font-weight:bold; margin:12px auto 0px auto; text-decoration:none; }
.navytxt { font-family:Arial, Verdana, Helvetica, sans-serif; color:#15317E; border: none; font-weight:bold; font-size: 12px; }
.bluetxt {color: #004583}
.bluetxtbold {color: #004583; font-weight:bold;}
.bluebold {color: #000080; font-weight: bold;}


/* GOOD STYLES FOR 2014 AND BEYOND :-) - TMG 08/19/2014 */
a {     word-wrap: break-word; }
a.inline-nav, ul li a.inline-nav { display:inline-block ! important; }
/* GENERIC STYLES -- this line is NOT confirmed */
td, ul, li, ol { color:#000000; font-size: 13px; line-height:15pt; }
.you_tube { margin:0 auto; text-align:center; }
.you_tube1 { display:inline; margin:0 auto; text-align:left; }
.you_tube img { width:100%; max-width:500px; padding:10px 10px 0 10px; margin: auto; display:block; height:auto; }
#slides .you_tube img { max-width:1024px; padding:0; }
.flickr { width:100%; max-width:500px; height:333px; background-color:transparent; margin:0 auto; text-align:center; }

/* RED */
h1.red { font-family:Arial, Verdana, Helvetica, sans-serif; color:#800000; font-size: 20px; border: none; line-height: 140%; font-style: normal; }
h2.red { font-family:Arial, Verdana, Helvetica, sans-serif; line-height:normal; font-size: 30px; color:#900; }
#content_holder h2.red20 { font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: #800000; font-weight: bold; margin:10px 0; }
h3 { color:#800000; font-weight:bold; margin:0px; }
h3.red16 { font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #800000; font-weight: bold; }
h5 { font-size:12px; color:#800000; font-weight:bold; margin-top:3px; }  /*was color:#004583;*/
h4.red2 { color:red; }
h4.fancy { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; color: #800000; line-height: normal; font-weight: normal; }
.boldred24 { font-size: 24px; color: #603; font-weight: bold; }
/* old .title-fancy  (one of two different styles with that same name) */
.title-fancy-old, .title-fancier  {
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 24px; line-height: normal; color: #800000;
        padding-top: 0px; padding-right: 0px; padding-left: 0px;
}