<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kbrtrm/pen/QdXYvy" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6827072/7087552/css/fonts.css" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.0/flexboxgrid.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css'>
<style class="cp-pen-styles">.tc-grey-10 {
color: #F2F3F4;
}
.tc-grey-20 {
color: #DADEDF;
}
.tc-grey-30 {
color: #C1C7C9;
}
.tc-grey-40 {
color: #A7B0B2;
}
.tc-grey-50 {
color: #8C979A;
}
.tc-grey-60 {
color: #707C80;
}
.tc-grey-70 {
color: #555F61;
}
.tc-grey-80 {
color: #373D3F;
}
.tc-grey-90 {
color: #131516;
}
.tc-indigo {
color: #0D3D56;
}
.tc-kelvin {
color: #0F5B78;
}
.tc-skye {
color: #117899;
}
.tc-alice {
color: #1496BB;
}
.tc-jade {
color: #5CA794;
}
.tc-kelly {
color: #A3B86C;
}
.tc-daisy {
color: #EBC944;
}
.tc-amber {
color: #EDAA38;
}
.tc-april {
color: #F08C2D;
}
.tc-coral {
color: #F26D21;
}
.tc-rowan {
color: #D94E20;
}
.tc-ruby {
color: #C02F1D;
}
.bg-indigo {
background-color: #0D3D56 !important;
}
.bg-kelvin {
background-color: #0F5B78 !important;
}
.bg-skye {
background-color: #117899 !important;
}
.bg-alice {
background-color: #1496BB !important;
}
.bg-jade {
background-color: #5CA794 !important;
}
.bg-kelly {
background-color: #A3B86C !important;
}
.bg-daisy {
background-color: #EBC944 !important;
}
.bg-amber {
background-color: #EDAA38 !important;
}
.bg-april {
background-color: #F08C2D !important;
}
.bg-coral {
background-color: #F26D21 !important;
}
.bg-rowan {
background-color: #D94E20 !important;
}
.bg-ruby {
background-color: #C02F1D !important;
}
.bg-grey-10 {
background-color: #F2F3F4;
}
.bg-grey-20 {
background-color: #DADEDF;
}
.bg-grey-30 {
background-color: #C1C7C9;
}
.bg-grey-40 {
background-color: #A7B0B2;
}
.bg-grey-50 {
background-color: #8C979A;
}
.bg-grey-60 {
background-color: #707C80;
}
.bg-grey-70 {
background-color: #555F61;
}
.bg-grey-80 {
background-color: #373D3F;
}
.bg-grey-90 {
background-color: #131516;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: "Gotham SSm A", "Gotham SSm B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.43;
color: #131516;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 600;
}
h5, h6 {
font-weight: normal;
}
.navbar {
font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif;
}
p {
margin: 1em 0;
}
.ta-left {
text-align: left;
}
.ta-center {
text-align: center;
}
.ta-right {
text-align: right;
}
a {
color: #1496BB;
-webkit-transition: all .25s;
transition: all .25s;
}
a:hover {
color: #083a48;
}
.container {
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 0 1em;
}
.fw .container {
max-width: 1080px;
}
mark {
background-color: #f0d672;
padding: 0.125em;
}
code,
kbd {
background-color: #DADEDF;
padding: 0.125em;
}
pre {
background: #DADEDF;
padding: 1em;
overflow-x: scroll;
}
pre code {
background: none;
}
table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid #DADEDF;
}
table thead th {
border-bottom: 1px solid #A7B0B2;
background: #F2F3F4;
}
table thead th + th {
border-left: 1px solid #DADEDF;
}
table tr {
font-family: "Gotham SSm A", "Gotham SSm B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
table tr + tr td {
border-top: 1px solid #DADEDF;
}
table tr td {
padding: 0.125em;
}
table tr td + td {
border-left: 1px solid #DADEDF;
}
caption,
figcaption {
font-size: .875em;
}
.bleed {
padding: 3em 0;
}
.bleed h1,
.bleed h2,
.bleed h3,
.bleed h4,
.bleed h5,
.bleed h6 {
margin-top: 0;
}
.lead {
font-size: 1.25em;
margin: 1em 0;
}
.context-menu {
padding-left: 0;
font-size: 0.75em;
margin-bottom: 0;
padding: .5em 0;
}
.context-menu li {
display: inline-block;
}
.context-menu li a {
padding: .25em;
display: block;
width: 100%;
text-decoration: none;
border-radius: .25em;
color: #8C979A;
}
.context-menu li a:hover {
color: #373D3F;
background: #F2F3F4;
}
.fw-sub-nav h1,
.fw-sub-nav h2,
.fw-sub-nav h3,
.fw-sub-nav h4,
.fw-sub-nav h5,
.fw-sub-nav h6 {
margin: .75em 0;
}
img {
max-width: 100%;
}
.font-adj-sm {
font-size: .75em;
}
.set {
margin: 1em 0;
}
.set.flex-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.set.flex-grid .set-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: 16.6666%;
}
.set-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .5em;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-grid-2 .set-item {
min-width: 50%;
}
.flex-grid-3 .set-item {
min-width: 33.3333%;
}
.flex-grid-4 .set-item {
min-width: 25%;
}
.flex-grid-5 .set-item {
min-width: 20%;
}
.flex-grid-6 .set-item {
min-width: 16.6666%;
}
table {
margin: 2em 0;
}
.set-list .row + .row {
margin-top: 1.5em;
}
.sub-head {
font-weight: normal;
margin-top: -.5em;
}
.dept-header-dropdown {
margin-top: .75rem;
}
.dept-header-dropdown > a {
color: rgba(255, 255, 255, 0.5);
font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
.ind-event + .ind-event {
margin-top: 1rem;
}
.card-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.card-grid:after {
content: "";
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100%/3 - 14px));
flex: 0 0 calc((100%/3 - 14px));
}
.card-grid .card {
padding: 0;
border-radius: 0;
margin-bottom: 1.5rem;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* Breakpoint for large viewport */
/* Breakpoint for extra-large viewport */
}
.card-grid .card.card--person {
padding: 1em 0;
}
.card-grid .card .card-desc {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@media (min-width: 34em) {
.card-grid .card {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
}
@media (min-width: 48em) {
.card-grid .card {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100%/2 - 14px));
flex: 0 0 calc((100%/2 - 14px));
}
}
@media (min-width: 62em) {
.card-grid .card {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100%/2 - 14px));
flex: 0 0 calc((100%/2 - 14px));
}
}
@media (min-width: 75em) {
.card-grid .card {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100%/3 - 14px));
flex: 0 0 calc((100%/3 - 14px));
}
}
.cc-img {
width: 100%;
overflow: hidden;
position: relative;
height: 0;
padding-bottom: 60%;
max-height: 300px;
/* Breakpoint for large viewport */
/* Breakpoint for extra-large viewport */
}
@media (min-width: 34em) {
.cc-img {
max-height: 300px;
}
}
@media (min-width: 48em) {
.cc-img {
height: 220px;
}
}
@media (min-width: 62em) {
.cc-img {
height: 300px;
}
}
@media (min-width: 75em) {
.cc-img {
height: 250px;
}
}
.cc-img.cc-img-circle {
height: 100px;
width: 100px;
border-radius: 50%;
overflow: hidden;
max-height: initial;
padding-bottom: initial;
margin: 0 auto;
margin-top: -50px;
margin-bottom: .25em;
}
.cc-img img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100px;
min-width: 100px;
max-width: 105%;
}
div.center-cropped {
width: 100%;
height: 25px;
overflow: hidden;
}
div.center-cropped img {
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.dept-header-title h1 {
font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: bold;
border-right: 2px solid rgba(255, 255, 255, 0.3);
padding-right: 1em;
}
.sub-title {
font-weight: normal;
top: 1.5em;
position: absolute;
z-index: 100;
padding-left: 1em;
}
.card-list {
margin: 0 -1px;
}
.card-list .list-group-item {
border-radius: 0;
}
.address {
font-size: .85em;
line-height: 1.3;
}
/*
* mod 3
* first two, common to all queries
*/
.card-block.caption {
padding: .5rem .75rem;
font-size: .8rem;
}
.card-block.caption p {
margin-bottom: 0;
}
.card-profile .card-block {
padding: .75rem 1.25rem;
text-align: center;
}
.feat-work-bg {
width: 100%;
height: 0;
padding-bottom: 50%;
background-size: cover;
background-position: center center;
}
.greedy-nav {
position: relative;
min-width: 250px;
}
.greedy-nav a {
display: block;
padding: 1rem;
font-size: .7rem;
color: #555F61;
text-decoration: none;
}
.greedy-nav a:hover {
color: #131516;
}
.greedy-nav button {
position: absolute;
height: 100%;
right: 0;
padding: 0 20px;
border: 0;
outline: none;
background-color: #F2F3F4;
color: #fff;
cursor: pointer;
}
.greedy-nav button:hover {
background-color: #DADEDF;
}
.greedy-nav button::after {
content: "";
position: absolute;
width: 60px;
height: 100%;
left: -60px;
top: 0px;
text-align: center;
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(rgba(242, 243, 244, 0)), color-stop(50%, #f2f3f4));
background: linear-gradient(to right, rgba(242, 243, 244, 0) 0%, #f2f3f4 50%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f3f4', endColorstr='#f2f3f4',GradientType=1 );
/* IE6-9 */
color: #fff;
font-size: 14px;
line-height: 24px;
font-weight: bold;
}
.greedy-nav .hamburger {
position: relative;
width: 5px;
height: 5px;
background: #aaa;
margin: auto;
border-radius: 5px;
}
.greedy-nav .hamburger:before, .greedy-nav .hamburger:after {
content: '';
position: absolute;
left: 0;
width: 5px;
height: 5px;
background: #aaa;
border-radius: 5px;
}
.greedy-nav .hamburger:before {
left: -8px;
}
.greedy-nav .hamburger:after {
left: initial;
right: -8px;
}
.greedy-nav .visible-links {
display: inline-table;
}
.greedy-nav .visible-links li {
display: table-cell;
}
.greedy-nav .hidden-links {
position: absolute;
right: 0px;
top: 100%;
background: #F2F3F4;
}
.greedy-nav .hidden-links li {
display: block;
z-index: 200;
}
.greedy-nav .hidden {
visibility: hidden;
}
.greedy-nav ul {
margin-bottom: 0;
padding-left: 0;
}
.greedy-nav-container {
padding: 0;
}
.lead {
font-weight: inherit;
}
.my-4 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.card--person {
padding: 1em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.card--person .img-hold {
width: 65px;
padding-top: 20px;
min-height: 50px;
}
.lead .card--person .img-hold {
padding-top: 25px;
}
.card--person .name-hold {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.card--person .cc-img.cc-img-circle {
width: 50px;
height: 50px;
}
.card--person .cc-img.cc-img-circle img {
min-height: 50px;
min-width: 50px;
}
.card--person .card--person-name {
font-size: .75em;
display: block;
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
font-weight: bold;
}
.card--person .card--person-title {
font-size: .75em;
display: block;
color: #aaa;
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
}
.card--person .card--person-action {
font-size: .75em;
display: block;
color: #aaa;
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
margin-top: .5em;
}
.card--person .card--person-action a + a {
margin-left: .5em;
}
.no-border {
border: none;
}
.dept-img {
background: url(http://www.saic.edu/sites/default/files/HPRES_hero%20image_looking%20up.jpg);
background: url(http://www.saic.edu/sites/default/files/Untitled-2.jpg);
background-color: "#000";
background-blend-mode: multiply;
background-size: cover;
margin: -1rem;
position: relative;
opacity: .2;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.dept-img:after {
content: '';
width: 150px;
height: 100%;
position: absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1496bb+0,1496bb+100&1+0,0+100 */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(#1496bb), to(rgba(20, 150, 187, 0)));
background: linear-gradient(to right, #1496bb 0%, rgba(20, 150, 187, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1496bb', endColorstr='#001496bb',GradientType=1 );
/* IE6-9 */
left: 0;
}
.dept-img:before {
content: '';
width: 150px;
height: 100%;
position: absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1496bb+0,1496bb+100&0+0,1+100 */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(rgba(20, 150, 187, 0)), to(#1496bb));
background: linear-gradient(to right, rgba(20, 150, 187, 0) 0%, #1496bb 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00'$bgc-hex, endColorstr=$bgc-hex,GradientType=1 );
/* IE6-9 */
right: 0;
}
.blockquote-bubble {
background: #eee;
padding: 1em;
border-radius: 4px;
position: relative;
}
.blockquote-bubble:after {
content: '';
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #eeeeee transparent transparent transparent;
bottom: -12px;
left: 10px;
display: block;
}
.table {
margin-top: 0;
}
.list--person-card {
list-style-type: none;
padding-left: 0;
}
/*!
* Yamm!3
* Yet another megamenu for Bootstrap 3
*
* https://geedmo.github.com/yamm3
*/
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
}
.yamm .nav.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.yamm .yamm-content {
padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
.list-unstyled,
.list-unstyled ul {
min-width: 120px;
}
@media (min-width: 767px) {
.panel-group {
width: 400px;
}
.thumbnail {
margin: 0;
}
}
/* Grid demo styles */
.grid-demo {
padding: 1em;
}
.m52 {
margin-top: 52px;
}
.dropdown-menu {
border-radius: 0;
margin-top: 0;
padding: 0;
border: 0;
}
img {
max-width: 100%;
}
#aiado-header {
background: url("http://saic.edu/media/saic/gfx/homepage/SAICwhitetorkshelveswateringACJN16.jpg");
height: 400px;
background-size: cover;
background-position: center center;
max-height: 400px;
}
.navbar {
padding: 0 1em;
font-size: .8rem;
}
.navbar.navbar-toggleable-md .nav-item {
padding: .25em .25em;
}
.navbar.navbar-subnav {
font-size: .8em;
padding-left: 16px;
font-size: .8rem;
}
.navbar .navbar-brand {
font-weight: bold;
}
.nav-item.active {
position: relative;
}
p.lead {
font-size: 1.25em;
}
.card--person {
padding: 1em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.card--person .img-hold {
width: 65px;
padding-top: 20px;
min-height: 50px;
}
.lead .card--person .img-hold {
padding-top: 25px;
}
.card--person .name-hold {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.card--person .cc-img.cc-img-circle {
width: 50px;
height: 50px;
}
.card--person .cc-img.cc-img-circle img {
min-height: 50px;
min-width: 50px;
}
.card--person .card--person-name {
font-size: .75em;
display: block;
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
font-weight: bold;
}
.card--person .card--person-title {
font-size: .75em;
display: block;
color: #aaa;
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
}
.card--person .card--person-action {
font-size: .75em;
display: block;
color: #aaa;
font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
margin-top: .5em;
}
.card--person .card--person-action a + a {
margin-left: .5em;
}
.control-toggles {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 100;
background: rgba(220, 220, 220, 0.8);
padding: 1em;
border-radius: 4px;
font-size: .8em;
max-width: 350px;
}
.control-toggles ul {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
.control-toggles label.btn-primary {
border: none;
-webkit-transition: none;
transition: none;
}
.control-toggles label.btn-primary:hover, .control-toggles label.btn-primary:focus, .control-toggles label.btn-primary.active {
background-color: inherit;
-webkit-box-shadow: 1px 1px 0px #000, 0 0 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
box-shadow: 1px 1px 0px #000, 0 0 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
z-index: 200;
cursor: pointer;
}
#apply1 {
border: none;
}
</style></head><body>
<div class="control-toggles">
<small class="mb-2 d-block">Theme Color</small>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-sm bg-indigo" data-color-class="bg-indigo">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-primary btn-sm bg-kelvin" data-color-class="bg-kelvin">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-skye" data-color-class="bg-skye">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-alice" data-color-class="bg-alice">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-primary btn-sm bg-jade" data-color-class="bg-jade">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-kelly" data-color-class="bg-kelly">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-daisy" data-color-class="bg-daisy">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-primary btn-sm bg-amber" data-color-class="bg-amber">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-april" data-color-class="bg-april">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-coral" data-color-class="bg-coral">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-primary btn-sm bg-rowan" data-color-class="bg-rowan">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-primary btn-sm bg-ruby" data-color-class="bg-ruby">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
</div>
<small class="mt-2 mb-2 d-block">Header Style</small>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Full-width hero
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
No hero
</label>
</div>
</div>
<nav class="navbar navbar-toggleable-sm bg-kelvin navbar-inverse py-2" id="main-nav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">SAIC</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav justify-content-between">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Academics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Financial Aid & Tuition</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Student Life</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Continuing Studies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Public Programs</a>
</li>
</ul>
<!-- <form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</nav>
<div class="container-fluid bg-primary hero-header" id="aiado-header">
</div>
<!-- <div class="m52"></div> -->
<nav class="navbar navbar-subnav navbar-toggleable-md navbar-light bg-faded py-2">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar02" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" data-dept-name="Architecture Interior Architecture, and Designed Objects">AIADO</a>
<div class="collapse navbar-collapse" id="navbar02">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Undergraduate Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Graduate Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Students/Alumni</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Faculty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">External Partnerships</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li> -->
</ul>
<a href="#" class="btn btn-primary nav-link" id="apply1">Apply</a>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<p class="lead">
We teach design by asking questions: what is an object, a building, a space?—and by pursuing answers through a commitment to making and a dedication to experimental practice, interdisciplinary study, and community partnership.
</p>
<a href="#" class="link">Read the letter from the director</a>
<span class="card card--person card--person-tiny no-border">
<span class="img-hold">
<span class="cc-img cc-img-circle">
<img src="http://www.saic.edu/sites/default/files/styles/adaptive_style/adaptive-image/public/jonathan%20.jpg?itok=-V8B9MOW" alt="" class="rounded-circle">
</span>
</span>
<span class="name-hold">
<span class="card--person-name">Jonathan D. Solomon</span>
<span class="card--person-title">
Director of Architecture, Interior Architecture, and Designed Objects
</span>
</span>
</span>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script >$('document').ready(function(){
$('.nav-item').each(function(){
$(this).click(function(){
$('.nav-item').removeClass('active');
$(this).addClass('active');
});
});
$('input[type=radio][name=optionsRadios]').change(function() {
if (this.value == 'option1') {
$('.hero-header').show();
}
else if (this.value == 'option2') {
$('.hero-header').hide();
}
});
function changeBgColor(elementId, newColor) {
var classList = document.getElementById(elementId).className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
if (classList[i].indexOf('bg-') > -1) {
classList[i] = newColor;
} else {
classList.push(newColor);
}
}
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
var newClassSet = "";
for (var i = 0; i < classList.length; i++) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;}
newClassSet += classList[i]+" ";
}
window.CP.exitedLoop(2);
window.CP.exitedLoop(2);
$('#'+elementId).removeClass();
$('#'+elementId).addClass(newClassSet);
}
$('.control-toggles .btn').each(function(){
$(this).click(function(){
var newColor = $(this).data('color-class');
changeBgColor('main-nav', newColor);
changeBgColor('apply1', newColor);
});
});
});
//# sourceURL=pen.js
</script>
</body></html>
