* {
  box-sizing: border-box;
}

body {
  font-family: Georgia, Times New Roman, Arial, Garamond,  Helvetica, sans-serif;
  margin: 0;
  width:90%;
  max-width: 1300px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: auto;
  letter-spacing: 0px;
  line-height: 1.2;
  font-size: 106%;
  background-color: white;

  height:110vh;
  display:block;
  position: relative;
}

/* Style the header */
.header {
  padding: 1px;
  padding-left: 50px;
  text-align: left;
  background: white; 
  color: black;
}

/* Increase the font size of the h1 element */
.header h1 {
  font-size: 40px;
}

.header h2 {
  font-size: 30px;
  color: #006eb3;
}

.header h3 {
  font-size: 20px;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden;
  background-color: white; /* #006eb3 */
  padding-bottom: 20px;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: #000000; /* #004f80 #005e99 #006eb3 */
  font-size: 106%;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
  margin-top: 0px;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #336699;
  color: white;
  border-radius: 4px;    
  text-decoration: none;
  transition: all 0.35s;
}

.navbar-right {
  float: right;
}

.navbar-right a.active {
  background-color: #336699;
  color: white;
  border-radius: 4px;    
}

/* Left-aligned link */
.navbar a.left {
  float: left;
  /* font-size: 20px; */
}

.navbar a.left:hover {
  background-color: white;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 18px;
  border: none;
  color: black;
  padding: 9.2px 15px;
  background-color: inherit;
  font-family: inherit;
}

.dropbtnActive {
  font-size: 18px;
  border: none;
  color: white;
  padding: 9.2px 15px;
  border-radius: 4px;
  background-color: #006eb3;
  font-family: inherit;
}

.dropdown:hover .dropbtn:hover {
  background-color: #006eb3;
  color: white;
  font-size: 18px;
  padding: 9.2px 15px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.35s;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  z-index: 1;
  margin: inherit;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  text-align: left;
  margin: inherit;
}

.dropdown-content a:hover {
  background-color: #006eb3;
  border-radius: 2px;
  transition: all 0.35s;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.personal_links {
  padding-left: 20px;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: none;
}


/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Sidebar/left column */
.side1 {
  flex: 23%;
  background-color: white;
  padding-left: 20px;
  float: right;
}

/* Main column */
.main1 {   
  flex: 77%;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
}

.side2 {
  flex: 30%;
  background-color: white;
  padding: 20px;
  float: left;
}

/* Main column */
.main2 {   
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.main1 h2 {
  font-size: 25px;
  color: #006eb3;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 40%;
  background-color: white; /* #f1f1f1 */
  padding: 20px;
  padding-right: 2px;
  padding-left: 50px;
}

/* Main column */
.main {
  flex: 60%;
  background-color: white;
  padding: 20px;
}

.one_column {   
  flex: 100%;
  background-color: white;
  padding-left: 12%;
  padding-right: 0%;
}

.bio_column {   
  flex: 100%;
  background-color: white;
  padding-left: 4%;
  padding-right: 4%;
}

button {
  border: none;
  color: white;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  font-family: Georgia;
  border-radius: 2px;
}

.button1 {background-color: #006eb3;} /* 336699 */
.button2 {background-color: #a6a6a6;} /* gray */


table, th, td {
  border: 0px solid black;
  border-collapse: collapse;
}

td {
  text-align: left;
  vertical-align: top;
  padding-bottom: 5px;
}
th {
  text-align: left;
  vertical-align: top;
}

li + li { 
    margin-top: 0px;
}

.paperitem {
	padding-bottom: 15px;
}

.papertitle{
	color: #000000;
}

.publisher{
	color: #333333;
	font-style: italic;
}

/*
*, ::after, ::before {
    box-sizing: border-box;
}

ol {
    counter-reset: list;
}

ol > li {
    list-style: none;
    position: relative;
}

ol > li:before {
    content: "[" counter(list) "]";
    counter-increment: list;
    left: -40px;
    padding-right: 10px;
    position: absolute;
    text-align: right;
    width: 40px;
}
*/

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  flex: 100%;
  font-size: 15px;
  text-align: center;
  background: white;
  height: 10vh;
  padding-top: 20px;
  padding-bottom: 50px;
}

.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
}

.active, .collapsible:hover {
  background-color: #006699;
  color: white;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #0077b3;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #004466;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width:100%;
  }
}