body {
    background-color: #fbfbf9;
    margin: 0px;
    padding: 0px;
    font-family: Source Sans Pro;
}

.textCenter {
    text-align: center;
}

#container {
    max-width: 900px;
    margin: 0 auto;
}

#pageHeader {
    position:relative;
    text-align:center;
}

#imageHeader1 {
    display: block;
    /*margin: 0px auto;*/
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}
#imageHeader2 {
    display: block;
    /*margin: 0px auto;*/
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

.menu-icon-container {
    background-color: #eee6cb;
    height: 40px;
    display: block;
}

#menu-icon {
    float: right;
    color: white;
    font-size: 40px;
    background-color: #820000;
    border: 2px solid none;
    border-radius: 10px 10px 10px 10px;
    margin-right: 15px;
    cursor: pointer;
}

#menu-icon:hover {
    color: lightgray;
}

.display-nav {
    display: none;
    margin: 0px;
}

.small-nav-container {
    display: none;
    /*
    position: absolute;
    width: 100%;
    z-index: 3; */
}


#small-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

#small-nav li a {
    display: block;
    
    padding: 8px 16px;
    text-decoration: none;
}

#small-nav li a:not(#activeTab) {
    color: white;
}

#small-nav li {
    text-align: center;
    border-bottom: 1px solid #eee6cb;
    background-color: #820000;
}

#small-nav li:last-child {
    border-bottom: none;
}

#small-nav li a.active {
    background-color: #4CAF50;
    color: white;
}

#small-nav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.email a {
    color: #820000;
}


/* Nav bar */
#nav {
    width:400px;
    margin:0 auto;
    list-style:none;
}

#nav li {
    float:left;
}

#nav ul {
    width:1200px;
    padding: 0px;
}

ul {
    padding: 0px;
}


#nav a {
    display:block;
    text-align:center;
    width:66.67px; /* fixed width */
    height: 40px;
    padding-top: 10px;
    text-decoration:none; 
    background-color: #eee6cb;
    color: #820000;
    font-size: 11px;
}


#nav a:hover:not(#activeTab) {
    background-color: #F2F1EB;
}

a#activeTab {
    background-color: #fbfbf9;
    color: black;
}

.person-image-big {
    float: left;
    max-width: 300px;
    height: auto;
    margin-right: 15px;
}

.person-image-medium {
    float: left;
    max-width: 200px;
    height: auto;
    margin-right: 15px;
}

.aboutus-person-container {
    margin-bottom: 20px;
    min-height: 300px;
}

.red-letter {
    color: #820000;
}

.crNotice {
    font-style: italic;
}

.link-display {
   /* margin-top: 45px;*/
    display: block;
    width: 400px;
    font-size: 16px;
    margin-bottom: 15px;
}

.link-display p {
    display: inline-block;
    color: #820000;
    font-size: 16px;
}

.link-display-final {
    margin-top: 0px;
}

h1.link-display {
    color: #555555;
}

.link-display a {
    font-size: 18px;
    color: #555555;
    text-decoration: none;
    font-size: 16px;
}

.tech-list li {
    display: inline;
    list-style-type: none;
}

.tech-list a {
    text-decoration: none;
    color: #820000;
}

.tech-image img {
    width: 375px;
}


p.link-display-arrows {
    color: black;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 12px;
}

.entryContent {
    display: block;
}

.mainContent {
    max-width: 910px;
    float: left;
    display: block;
    font-size: 18px;
    padding:10px;
}

#home.mainContent {
    max-width: 900px;
}

#research.mainContent {
    max-width: 615px;
}

#research-alone.mainContent {
    max-width: 900px;
}

#technologies.mainContent {
    max-width: 300px;
}


#publications.mainContent {
    max-width: 400px;
}

#tidbits.mainContent {
    max-width: 1000px;
}

#aboutus.mainContent {
    max-width: 300px;
}



#aboutus a:link {
    color:#820000;
}
#aboutus a:visited {
    color:#820000;
}

.email-display {
    height: 300px;
}

.quote {
    font-size: 24px;
    font-style: italic;
    font-family: sans-serif;
}

.side-menu {
    display: block;
    float: left;
    width: 275px;
    height: 300px;
    margin-right: 10px;
    padding:10px;
}

.side-menu .floating-box {
    max-width: 200px;
    min-width: 100px;
    height: 60px;
    margin-left: 0px;
}

.side-menu h1 {
    color: #555555;
    font-size: 22px;
}



img.side-menu-image{
    width: 65px;
    height: auto;
    padding-bottom: 0px;
    padding-top: 0px;
}

.tech-side-menu {
    display: block;
    float: left;
    width: 150px;
    height: 50px;
    margin-right: 10px;
}

.tech-side-menu .floating-box {
    max-width: 200px;
    margin-left: 0px;
    height: 50px;
}

.f {
    float: left;
    width: 175px;
    margin-right: 50px;
    font-size: 22px;
}

.f h1 {
    color: #555555;
    font-size: 22px;
    margin-bottom:  0px;
    padding-bottom: 0px;
}

.f ul {
    list-style-type: none;
    margin-top: 3px;
}

.f ul a {
    color: #820000;
    list-style-type: none;
    font-size: 16px;
    text-decoration: none;
}

.f li {
    
}

.person-box {
    float: left;
    width: 125px;
    height: 190px;
    margin-right: 15px;
    margin-left: 0px;
    text-align: center;
}

.people-container {
    display: block;
    min-width: 350px;
    padding: 25px;
}

.people-container img {
    height: 125px;
    border-radius: 20%;
}

.people-container h1 {
    color: black;
    font-size: 20px;
}

.people-container.main-people {
    min-height: 1200px;
}
.people-container.alumni-people {
    min-height: 250px;
}
.people-container.affiliates-people {
    min-height: 325px;
}


#technologies h1 {
    color: #820000;
    font-size: 24px;
}

#publications h1 {
    color: black;
    font-size: 22px;
    
}

#publications h2 {
    color: #555555;
    font-size: 24px;
    margin-top: 15px;
}

.mainContent h1 {
    color: #555555;
    margin-top: 15px;
    font-size: 24px;
}


.content-container {
    max-width: 900px;
    
    display:block;
    float: left;
}

.publications {
    display: block;
}

.publications a:link {
    color: #820000;
}

.publications a:visited {
    color: #820000;
}

.publications h1 {
    font-size: 22px;
    color: black;
}

.publications ul {
    margin-left: 20px;
}

.publications li {
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 10px;
    font-size: 16px;
}

.video {
    margin: 0 auto;
    height: 275px;
    display: block;
}

.imageInText {
    float: left;
    padding: 15px;
}

.image-size-small {
    width: 200px;
    height: auto;
}

.image-size-medium {
    width: 300px;
    height: auto;
}

.image-size-big {
    width: 400px;
    height: auto;
    padding-left: 0px;
}

#research .floating-box {
    max-width: 900px;
    min-height: 200px;
    float:none;
    font-size: 16px;
}

/*
#research-alone .floating-box {
    max-width: 900px;
    min-height: 200px;
    max-height: 900px;
    float:none;
    font-size: 16px;
}
*/

.research-floating-box {
    float: none;
    max-width: 900px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 16px;
    font-family: Source Sans Pro;
}




.floating-box {
    float: left;
    max-width: 400px;
    height: 120px;
    margin: 10px;
    margin-bottom: 0px;
    font-size: 16px;
    font-family: Source Sans Pro;
}

.floating-box-image {
    float:left;
    padding-right: 10px;
    padding-bottom: 50px;
    padding-top: 5px;
}

.floating-box-title {
    color: #820000;
}

.floating-box-descrip {
    margin-bottom: 0px;
    margin-top: 5px;
    
}



* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 900px;
  position: relative;
  margin: auto;
  
 /* margin-right: 110px;*/
  margin-top: 10px;
}

.mySlides {
    display: none;
    
}

.slideshow-image {
    width: 100%;
    height: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,0.05);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 26px;
  font-style: bold;
  padding: 12px 12px;
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  
  background-color: rgba(0, 0, 0, 0.5);
}




/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dotContainer {
    text-align:center;
    /*margin-right: 70px;*/
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}


@media screen and (max-width: 870px) and (min-width: 525px) {
    
    .display-nav {
        display: none;
    }
    
    .small-nav-container {
        display: none;
    }
    
    .menu-icon-container {
        display: block;
    }
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 900px;
      position: relative;
      margin: auto;
      
     /* margin-right: 110px;*/
      margin-top: 10px;
    }
    
    
    .slideshow-image {
        width: 100%;
        height: auto;
    }
}


/* For width 749px and larger: */
@media only screen and (min-width: 870px) {
    
    .mainContent {
        max-width: 910px;
        float: left;
        display: block;
        font-size: 18px;
        padding:0px;
    }
    
    .small-nav-container {
        display: none;
    }
    
    .display-nav {
        display: inline-block;
    }
    
    .menu-icon-container {
        display: none;
    }
    
    /* Nav bar */
    #nav {
        width:900px;
        margin:0 auto;
        list-style:none;
    }
    
    #nav li {
        float:left;
    }
    
    #nav ul {
        width:1200px;
        padding: 0px;
    }
    
    ul {
        padding: 0px;
    }
    
    #nav a {
        display:block;
        text-align:center;
        width:150px; /* fixed width */
        height: 40px;
        padding-top: 10px;
        text-decoration:none; 
        background-color: #eee6cb;
        color: #820000;
        font-size: 18px;
    }
    
    #nav a:hover:not(#activeTab) {
        background-color: #F2F1EB;
    }
    
    a#activeTab {
        background-color: #fbfbf9;
        color: black;
    }

    #home.mainContent {
        max-width: 900px;
    }
    
    #research.mainContent {
        max-width: 615px;
    }
    
    #research-alone.mainContent {
        max-width: 900px;
    }
    
    #technologies.mainContent {
        max-width: 615px;
    }
    
    #publications.mainContent {
        max-width: 615px;
        
    }
    
    
    #tidbits.mainContent {
        /*max-width: 615px;*/
        max-width: 615px;
        min-width:400px;
    }
    
    #aboutus.mainContent {
        max-width: 615px;
    }
    
    .side-menu {
        display: block;
        float: left;
        width: 210px;
        height: 450px;
        margin-right: 10px;
    }
    
    .side-menu .floating-box {
        max-width: 200px;
        min-width: 100px;
        height: 60px;
        margin-left: 0px;
    }
    
    .tech-image img {
        width: 600px;
        height: auto;
    }
    
    .video {
        margin: 0 auto;
        height: 400px;
        display: block;
    }
    
    .people-container.main-people {
        min-height: 575px;
    }
    .people-container.alumni-people {
        min-height: 250px;
    }
    .people-container.affiliates-people {
        min-height: 325px;
    }
    
    .people-container {
        display: block;
        min-width: 615px;
        padding-bottom: 25px;
        padding-left: 0;
    }
    
    .link-display {
       /* margin-top: 45px;*/
        display: block;
        width: 800px;
        font-size: 16px;
    }
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 900px;
      position: relative;
      margin: auto;
      
     /* margin-right: 110px;*/
      margin-top: 10px;
    }
    
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.middle-image {
    background-image: url("/assets/ta/backgrounds/bg_briefing-room.png");
    background-color: #cccccc;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}