/* Base styles */

body {
  padding: 20px 0;
  background-color: #bab9b9;
}

.allContent {
    background-color: #FFF;
    padding-right:30px;
    padding-left:30px;
}

header {
    padding: 1.25rem 0;
    
    /* CSS Gradient Option 1 */
    background: #FFF;
    background: #C28E0E;
}

.site-name h1 {
    margin-top:15px;
    margin-left: 50px;
    color:#000;
    font-weight:bold;
}

@media only screen and (max-width:767px) {
    
    .site-name h1 {
        margin-left: 0;
    }

}

.research {
    padding: 10px;
    margin-top: 15px;
    margin: auto;
    vertical-align: middle;
}

.thumbnail {
    height: 300px;
    width: 100%;
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
}

.members {
    font-size: 25px;
}

/* Main Navigation */

nav ul {
    list-style: none;
    display: inline-block;
    padding: 1.25rem 1.25rem 1.25rem 0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom:0;
    /* letter-spacing: 1px;
     text-transform: uppercase; */
}

nav li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 0 1.5rem 1.25rem;
}

nav li a:first-child {
    padding-left:0;    
}


nav li a:hover {
    color: #000;
}

@media only screen and (max-width:767px) {
    nav ul {
        float:none;
        margin-bottom:0;
        padding: 1.25rem 1.25rem 0 0;
    }
    
    nav li {
        padding: 1.25rem;
        padding-left:0;
    }

}

/* 480px */
@media screen and (min-width: 30em) {
    nav li {
        float: left;
    }
    
    nav li a {
        padding-left:0;
    }
    
    .banner {
        margin-bottom: 1rem;
    }

}

/* Sidebar navigation */

.sticky {
    top: 5;
    position: -webkit-sticky;
    position: sticky; 
    z-index:5;
    padding-left:0;
}

.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

.sidebar-nav .navbar ul {
    float: none;
}
  
.sidebar-nav .navbar ul:not {
    display: block;
}

.sidebar-nav .navbar li {
    float: none;
    display: block;
}

.sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
}

.sidebar-nav .navbar .dropdown:hover .dropdown-menu{
    display: block;
}

.sidebar-nav li:hover {
    background: #cde;
}

.sidebar-nav li.active:hover  {
    background: #edc;
}

.sidebar-nav .nav .navbar-nav li a {
    background-color:#fff;
    color: #000;
}

.sidebar-nav .nav .navbar-nav li a:hover{
    text-decoration:underline;
}

.sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
}
  

@media only screen and (max-width:767px) {
    .sticky {
        top: 0;
        position: relative; 
        z-index:5;
    }
    
    .sticky:before,
    .sticky:after {
        content: '';
        display: table;
    } 
    
    .navbar-collapse.collapse {
        display: block;
        height: auto;
        padding-bottom: 0;
        overflow: visible;
        visibility: visible;
    }
    
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .navbar-nav {
        float: left;
        margin: 0;
    }

}


/* Breadcrumbs */

.breadcrumbs a {
    text-decoration:none !important;
}

.breadcrumbs a:hover {
    text-decoration:underline !important;
}

.img-responsive {
    display:initial;
}

.wenthold-group {
    margin-left: 10px;
    border-radius: 50px;
}

/* Sidebar navigation */

.sticky {
    top: 5;
    position: -webkit-sticky;
    position: sticky; 
    z-index:5;
    padding-left:0;
}

.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

.sidebar-nav .navbar ul {
    float: none;
}
  
.sidebar-nav .navbar ul:not {
    display: block;
}

.sidebar-nav .navbar li {
    float: none;
    display: block;
}

.sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
}

.sidebar-nav .navbar .dropdown:hover .dropdown-menu{
    display: block;
}

.sidebar-nav li:hover {
    background: #cde;
}

.sidebar-nav li.active:hover  {
    background: #edc;
}

.sidebar-nav .nav .navbar-nav li a {
    background-color:#fff;
    color: #000;
}

.sidebar-nav .nav .navbar-nav li a:hover{
    text-decoration:underline;
}

.sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
}
  

@media only screen and (max-width:767px) {
    .sticky {
        top: 0;
        position: relative; 
        z-index:5;
    }
    
    .sticky:before,
    .sticky:after {
        content: '';
        display: table;
    } 
    
    .navbar-collapse.collapse {
        display: block;
        height: auto;
        padding-bottom: 0;
        overflow: visible;
        visibility: visible;
    }
    
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .navbar-nav {
        float: left;
        margin: 0;
    }

}


/* Other Styles */

#mainContent {
    font-size: 1.2em;
    padding: 1.25rem;
}

.maincontent h1 {
    font-size: 32px;
    margin-top:0;
}

.maincontent a {
    text-decoration: underline;
}

.maincontent a:hover {
    text-decoration:underline;
    color: #23527c;
}

hr {
    border: 1px solid #444;
}

.peopleRow {
    margin-bottom: 20px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Research Cards */

.research-areas .grid {
    margin-bottom:20px;
    display:flex;
    display:-webkit-flex;
}

.research-areas .grid .column {
    display:flex;
    display:-webkit-flex;
    flex:1;
}

/* IE 11 doesn't fully support flexbox, so it's not being used */

_:-ms-fullscreen, :root .IE-noFlex {
    display:inherit !important;
}

_:-ms-fullscreen, :root .IE-FlexFix {
    /* flex-wrap:wrap;
    overflow:hidden; */
    display: inherit !important;
}

/* End of browser hack */

.research-area {
    border: 1px solid #444;
    text-align:center;
    padding:10px;
}

.research-area h2 {
    font-size: 24px;
    margin-top:0;
}

@media (max-width: 991px) and (min-width: 768px) {
    .research-areas .grid {
        margin-bottom: 20px;
        display:inherit;
    }
    
    .research-areas .grid .column {
        margin-bottom:20px;
        display:inherit;
    }
}

@media only screen and (max-width:767px) {
    .research-areas .grid {
        margin-bottom: 20px;
        display:inherit;
    }
    
    .research-areas .grid .column {
        margin-bottom:20px;
        display:inherit;
    }    
}

#footer{
    text-align: center; 
    background: #e7e7e7; 
    padding: 10px;
    font-size: 12px;
}

#footer a {
    color: #23527c;
    text-decoration:underline;
}

#footer a:hover{
    text-decoration:none;
}

    
.reset-box-sizing,
.reset-box-sizing * {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
    width: 150px;              
}    
    

@media print {
    header {
        display: none;
    }
    
    /*
	header .logo {
        width: 100%;
    }
	
	header .logo img {
        display: none;
    } 
    
    header .logo img a {
        display:none;
    }
    
    
    header:after {
        content: "Purdue College of Science: Department of Chemistry: J Laskin Lab";
        font-size: 24pt;
        color: #000000;
        font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    */
    
    a, a:visited {
         text-decoration: underline;
         color: #000;
    }
    
    a[href^="http://"]:after, a[href^="https://"]:after {
        content: " (" attr(href) ")" !important;
        font-size: 90%;
        word-wrap: break-word;
    }  
    
    /* Hide side navigation */
    .sticky {
        display:none !important;
    }
    
    .sidenav {
        display:none !important;
    }
    
    .maincontent {
        font: 14pt Georgia, "Times New Roman", Times, serif !important;
        line-height: 1.3;
        margin: 0;
        padding: 0;
        float: none !important;
        width: 100%;
    }
    
    .maincontent img {
        /*min-width: 200px;*/
        max-width: 500px;
        border: 0;
        page-break-inside: avoid !important;
    }
    
    h1 {font-size: 24pt !important;}
    
    p a {
        color: #000000;
        text-decoration: none !important;
    }
    
    ul li a {
        color: #000000;
        text-decoration: none !important;
    }
    
    table {
        width: 100%;
        table-layout: auto;
        border: 0;
    }
    
    td {
        word-break: break-all;
        overflow: hidden;
    }
    
    footer {
        display: none;
    }
    
}