/* This defines the basic theme, not the customisations */

html {
  overflow-y: scroll;
}

body {
    margin: 0px;
    padding: 0px;
}

div.fullpage {
    width: 100%;
    padding: 0px; margin: 0px;
    //margin-top: 105px; /* Add a top margin to avoid content overlay */
}

div.universe {
    width: 95%;
    max-width: 1000px;
    padding-top: 20px;
    padding-bottom: 50px;
    margin: auto;
    background: white;
    //margin-top: 105px; /* Add a top margin to avoid content overlay */
    z-index: 1;
}


div.topmenu {
    width: 100%;
    text-align: center;
    //position: fixed;
    top: 0;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    background: #004e99; //white;// #004e99;
    margin: 0px;
    //height: 105px;
    //top: 0; /* Position the navbar at the top of the page */
    z-index: 1000;
    box-shadow: 5px 5px 5px rgba(1,1,1,.2);
}

div.topmenu img.headerimg {
    //width: 60%;
    width: 95%;
    max-width: 600px;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
}


a {
    padding-left: 10px;
    padding-right: 10px;
}

a:hover {
    background: #ccc;
}


div.universe a {
    text-decoration: none;
}


a.returnlink {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: 10px;
    text-decoration: none;
}


div.menu {
    //padding-top: 10px;
    padding-bottom: 0px;
    display: block;
    width: 100%;
    text-align: center;
    background: #004e99;
    z-index: 1000;
    //vertical-align: top;
}

div.menu div.menuitem {
    font-size: 110%;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    //padding-top: 10px;
    //padding-bottom: 10px;
}

div.menuitem a {
    color: white;// #004e99;
    text-decoration: none;
    background: #004e99;
    border-radius: 3px;
    padding: 10px;
    margin: 2px;
    #box-shadow: 5px 5px 5px #ccc;
    display: inline-block;
    font-weight: bold;
}

div.menuitem a:hover {
    text-decoration: none;
    background: #a21464;
    border: 2px solid #a21464;
    margin: 0px;
    color: white;
}



h1 {
    font-size: 150%;
}

h1.peoplecategory {
    font-size: 150%;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 15px;
}



div.shortpeoplelist {
    //text-align: center;
    margin: auto;
    width: 100%;
    max-width: 700px;
    font-size: 85%;
}


div.peoplecategorybox {
    margin-bottom: 30px;
}





div.shortpeoplelist .personthumb {
    display: inline-block;
    padding: 5px;
    padding-right: 20px;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

div.shortpeoplelist .personthumb img {
    border-radius: 50%;
    transition: transform .2s; /* Animation */
    box-shadow: 5px 5px 5px #ccc;
}


div.shortpeoplelist .persontext {
    display: inline-block;
    vertical-align: middle;
}


div.shortpeoplelist .oneperson {
    padding: 10px;
}

div.shortpeoplelist .notfirstperson {
    border-top: 1px solid #ddd;
}

div.shortpeoplelist .oneperson a.personbox {
    text-decoration: none;
    color: black;
}

div.shortpeoplelist .oneperson a.personbox:hover {
    background: none;
}


div.shortpeoplelist .oneperson .name {
    font-weight: bold;
    font-size: 130%;
    display: inline-block;
    margin-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
}

div.shortpeoplelist .oneperson .keywords {
    display: block;
    padding-bottom: 3px;
}


div.oneperson:hover .personthumb img {
    filter: brightness(1.1);  transform: scale(1.05);
}

div.oneperson:hover span.name {
    background: #eee;
}






div.persondetails {
    padding: 15px;
}


div.persondetails .personimg {
    display: inline-block;
    vertical-align: top;
    padding-top: 30px;
    float: left;
    margin: 20px;
    margin-right: 30px;
}

div.persondetails .personimg img {
    width: 300px;
    box-shadow: 10px 10px 10px #ccc;
}

div.persondetails .persontext {
    vertical-align: top;
    display: block;
    width: 100%;
    //max-width: 400px;
    padding: 20px;
}


div.persondetails .persontext::after {
  content: "";
  clear: both;
  display: table;
}

 


div.persondetails .personname {
    font-size: 200%;
    font-weight: bold;
    padding: 15px;
    padding-bottom: 0px;
    border-bottom: 5px solid #6ca978;
    margin-bottom: 15px;

}


div.persondetails .affiliation {
    font-size: 70%;
    padding-left: 40px;
    font-weight: bold;
}


div.persondetails .blurb {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
}




.keywords {
}
.keywords .keyword {
    background: #ddd;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 3px;
}



.websites {
}
.websites .websitelink {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 2px;
    vertical-align: middle;
}
.websites .websitelink img {
    vertical-align: middle;
    width: 20px;
}
.websites .websitelink a {
    box-shadow: 3px 3px 3px #aaa;
    vertical-align: middle;
    display: inline-block;
    text-decoration: none;
    color: white;
    background: #427e3e; //009;
    font-size: 90%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 3px;
}
.websites .websitelink a:hover {
    background: #4c006b; //009;
}





.persontitle {
    font-size: 85%;
}


div.errormessages {
    
}


div.errormsg {
    background: red;
    color: white;
    font-weight: bold;
    padding: 10px;
    margin: 10px;
}





div.shortpublist {
    font-size: 95%;
    padding-bottom: 10px;
}

div.shortpublist a.pdflink {
    text-decoration: none;
}

div.shortpublist .onepub {
    display: block;
    padding: 10px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom: 1px solid #ddd;
    text-indent: -20px;
    font-size: 110%;
}

a.citationlink {
    text-decoration: none;
    color: black;
}

a.citationlink:hover {
    background: #efefef;
}


div.topicpanelist {
    text-align: center;
}


div.topicpanelist a.topiclink {
    text-decoration: none;
    color: black;
    margin: 0px;
    padding: 0px;
}
div.topicpanelist a.topiclink:hover {
    background: none;
}


div.topicpanelist div.onetopic {
    vertical-align: top;
    display: inline-block;
    max-width: 250px;
    width: 80%;
    height: 350px;
    background: #ddd;
    //padding: 10px;
    margin: 10px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 30px;
    //border-radius: 15px;
    //border: 3px solid #777;
    /* box-shadow: 5px 10px 8px #aaa; */
    overflow: hidden;
}

div.topicpanelist a.topiclink:hover div.onetopic {
    background: #eee;
}



div.onetopic .topictitle{
    display: block;
    font-size: 100%;
    padding: 10px;
    background: #777;
    color: white;
    font-weight: bold;
}


div.onetopic .topicimgthumb {
    overflow: hidden;
}

div.onetopic .topicimgthumb img {
    width: 100%;
    transition: 0.5s ease;
}


.topicimgthumb img:hover {
    transform: scale(1.05);
}


div.onetopic .imgplusshort {
    //position: relative;
    //height: 100%;
}

div.onetopic .topicshort {
    //position: absolute;
    //vertical-align: bottom;
    //bottom: 0; //-100%;
    transition: 0.5s ease;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 90%;
}


div.onetopic .topicshort:hover {
    //bottom: 0;
    //height: 50%;
    //background: red;
}

div.onetopic .topicshort a {
    display: inline-block;
    padding-top: 5px;
}




div.topicdetails {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
}


.topicimg {
    //float: left;
    //box-shadow: 10px 10px 10px #ccc;
    text-align: center;
    margin: 10px;
    margin-right: 30px;
}

.topicimg img {
    box-shadow: 10px 10px 10px #ccc;
}


div.topicdetails .topictext {
    vertical-align: top;
    display: inline-block;
    width: 95%;
    //max-width: 400px;
    padding: 20px;
}


div.topicdetails .title {
    font-size: 200%;
    font-weight: bold;
    padding: 15px;
    padding-bottom: 0px;
    border-bottom: 5px solid #6ca978;
    margin-bottom: 15px;
    text-align: center;
}


div.topicdetails .description {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    font-size: 110%;
    width: 80%;
    margin: auto;
}




h2 {
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
}

.minipeoplelist {
    text-align: center;
    padding-bottom: 30px;
}


.minipeoplelist a:hover {
    background: none;
}


.namethumb {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    /*margin: 5px;*/
}


a .namethumb {
    color: black;
}



a .namethumb img {
    border-radius: 50%;
    transition: transform .2s; /* Animation */
}

a:hover .namethumb {
    /*color: #00703f;*/
    background: none;
}

a:hover .persontext {
    background: #efefef;
}


a:hover .namethumb img {
    filter: brightness(1.1);
     transform: scale(1.05);
}


.namethumb .personthumb {
    display: block;
    margin: auto;
    text-align: center;
    padding-bottom: 3px;
    width: 105px;
    height: 105px;
}

.namethumb .personthumb img {
    //width: 75px;
    margin: auto;
}


.namethumb .persontext {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    padding: 3px;
}

.persontext .title {    display: block; font-size: 90%; }
.persontext .name  {    display: block; }


.persontext .personname .academictitle { font-size: 85%; }



div.pagecontents {
    padding-top: 20px;
    max-width: 750px;
    margin: auto;
}


div.pagecontents::after {
    /* This is for clearing floats (e.g. the sidebar image */
    content: "";
    clear: both;
    display: table;
}




div.copyright {
    font-size: 50%;
    padding: 10px;
    padding-top: 50px;
    color: #bbb;
    text-align: right;
}






.altimetric { display:inline-block; }

.altimetric a {
    padding: 0px;
}





a.silentlink {
    text-decoration: none;
    background: none;
    color: black;
    margin: 0px; padding: 0px;
}
a.silentlink:hover { background: none }


a.slidelink {
    text-decoration: none;
    background: none;
    color: black;
    margin: 0px; padding: 0px;
}
a.slidelink:hover { background: none }

div.slide {
    overflow: hidden;
    width: 100%;
}

div.slide img {
    transition: transform 1s; /* Animation */
    width: 100%;
}

div.slide:hover img {
    transform: scale(1.03);
}



.sideimg {
    z-index: 0;
    margin-top: 50px;
    float: right;
    position: relative;
    width: 50%;
    max-width: 350px;
    //max-height: 500px;
}






.gallery {
    margin: 0;
    padding: 0;
}

.gallery .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    margin: 0;
}
    
/* Create equal columns that sit next to each other */
.gallery .column {
    flex: 33%;
    max-width: 33%;
    padding: 0 4px;
    margin: 0;
    /* Three lines below are a hack that enables the columns to all fit, otherwise the last column
       gets wrapped to the next line */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
    
.gallery .column img {
    vertical-align: middle;
    width: 100%;
    margin: 0; padding: 0;
    margin-top: 8px;
}
    
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .gallery .column {
	flex: 50%;
	max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .gallery .column {
	flex: 100%;
	max-width: 100%;
    }
}