/* 
 * Show it is fixed to the top 
 */

 @media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}

body {
  /* min-height: 75rem; */
  padding-top: 4.5rem;

  /* font-family: 'Averia Libre', cursive; */
  /* font-family: 'Averia Serif Libre'; */
  /* font-family: 'Open Sans', sans-serif; */
  /* font-family: 'Cormorant Garamond', serif; */
  /* font-family: 'Lato', Verdana, Helvetica, sans-serif; */
  /* font-family: 'Raleway', sans-serif; */
  /* font-family: 'Source Code Pro', monospace; */
  font-family: "Lato", sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
  /* font-family: "Roboto", sans-serif; */
  font-weight: 400;
  font-style: normal;
}

h2 {
  font-weight: 300;
}

/*
 * Modify fonts for specific type
 */

p {
  /* font-family: 'Open Sans', sans-serif; */
  /* font-family: 'Roboto', sans-serif; */
  /* font-family: 'Raleway', sans-serif; */
  /* font-family: 'Source Code Pro', monospace; */
  /* font-family: 'Lato', Verdana, Helvetica, sans-serif; */
  /* font-family: "Montserrat", sans-serif; */
  font-family: "Lato", sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
  /* font-family: "Roboto", sans-serif; */
  font-weight: 400;
  font-style: normal;
}

/* https://stackoverflow.com/a/18754394 */
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-size: 1.0em;
}
ol li {
  margin-left: 0em;
  position: relative;
  padding-left: 1.0em;
}
ol li:before {
  content:"\2022";
  font-size: 1.0em;
  position: absolute;
  top: 0;
  left: 0;
}

.news-font {
  /* font-family: 'Lato', Verdana, Helvetica, sans-serif; */
  /* font-family: 'Raleway', sans-serif; */
  /* font-family: "Montserrat", sans-serif; */
  font-family: "Lato", sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 150%;
}

.news-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"]
  > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

/* We need ways to change the scroll-top because fixed navbar hide content,
see https://stackoverflow.com/questions/43662832/html-css-link-scroll-not-scrolling-to-correct-position
For scrolling margin: to let it stop somewhere top of the ID
This is not good as when you click the tag, it acutally does not reach the area of the tag,
see https://stackoverflow.com/questions/49331572/offset-scroll-anchor-in-html-with-bootstrap-4-fixed-navbar */
#about {
  scroll-margin-top: 0px;
}

#publications {
  scroll-margin-top: 0px;
}

#slides {
  scroll-margin-top: 0px;
}

/* Please also remember to align the offset value of navbar_height_offsetnavbar_highlight.js */
html {
  scroll-padding-top: 60px;
}

/* .modal-dialog p {
 font-family: 'Raleway', sans-serif;
 font-weight: 300;
} */

.modal-dialog {
  max-width: 970px;
}

.modal-dialog pre {
  /* font-family: 'Roboto', sans-serif; */
  white-space: normal;
  font-family: 'Courier New';
  font-weight: 400;
  font-size: 15px;
}

.modal-header h4 {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
  font-weight: 400;
}

p.my-footer {
  text-align: center;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 13px;
}

/* th {
  font-variant: small-caps;
} */

/* .publication tr {
  position: relative;
  padding: .7rem .7rem .7rem .7rem;
  border-radius: 50%;
} */


td {
  /* font-family: 'Raleway', sans-serif; */
  /* font-weight: 200; */
  /* font-family: 'Lato', Verdana, Helvetica, sans-serif; */
  font-family: "Lato", sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 130%;
}

td.pub_td_idx {
  width: 6%;
  vertical-align: top;
  text-align: right;
}

td.pub_td_snapshot {
  width: 21%;
  vertical-align: top;
  text-align: left;
}

td.pub_td_content {
  width: 73%;
  vertical-align: top;
  text-align: left;
}

/* 
* https://stackoverflow.com/questions/74543724/css-box-shadow-not-working-with-table-row-in-safari
*/
.publication table { 
  box-sizing: border-box; 
}

tr.pub_tr {
  display: block; 
  padding-bottom: 10px;
  /* box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); */
  cursor: pointer; 
}

tr.pub_tr:hover {
  /* h-offset v-offset blur spread color */
  /* -webkit-appearance: none !important;
  -moz-box-shadow: 3px 3px 15px rgba(0,0,0,.15);
  -webkit-box-shadow: 3px 3px 15px rgba(0,0,0,.15); */
  box-shadow: 3px 3px 15px rgba(0,0,0,.15);
}

/* Control snapshot video */
/* https://github.com/jonbarron/website */
.one {
  width: 90%;
  /* This can ensure that even on phone, the snapshot looks big enough */
  /* width: 160px; */
  /* height: 160px; */
  position: relative;
  -moz-box-shadow: 3px 3px 6px #888;
	-webkit-box-shadow: 3px 3px 6px #888;
	box-shadow: 3px 3px 6px #888;
}

.two {
  width: 100%;
  /* height: 160px; */
  position: absolute;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;

  /* -moz-box-shadow: 3px 3px 6px #888;
	-webkit-box-shadow: 3px 3px 6px #888;
	box-shadow: 3px 3px 6px #888; */
}

/* Change ratio when it is on small screen, e.g., phones */
@media screen and (max-width: 970px) {
  td.pub_td_idx {
    width: 15%;
    /* min-width: 2%;
    max-width: 2%; */
    vertical-align: top;
    text-align: right;
  }
  
  td.pub_td_snapshot {
    width: 35%;
    /* min-width: 50%; */
    /* max-width: 50%; */
    /* width: 120px; */
    vertical-align: top;
    text-align: left;
  }
  
  td.pub_td_content {
    width: 50%;
    /* min-width: 45%; */
    /* max-width: 45%; */
    /* width: 120px; */
    vertical-align: top;
    text-align: left;
  }

  .one {
    width: 100%;
    /* width:120px; */
    position: relative;
    -moz-box-shadow: 3px 3px 6px #888;
    -webkit-box-shadow: 3px 3px 6px #888;
    box-shadow: 3px 3px 6px #888;
  }
  
  .two {
    width: 100%;
    position: absolute;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
  }

  .modal-dialog {
    max-width: 100%;
  }
}


/* .papericon {
	border-radius: 8px;
	-moz-box-shadow: 3px 3px 6px #888;
	-webkit-box-shadow: 3px 3px 6px #888;
	box-shadow: 3px 3px 6px #888;
} */



a {
  color: #1772d0;
  /* color: #179cd0; */
}

a:focus, a:hover {
  color: #f09228;
  text-decoration: underline;
}

pubdesc {
  color: #000000;
}

authors {
  color: #aaaaaa;
}

authors a, author p {
  color: #aaaaaa;
}

authors me {
  color: #000000;
  font-weight: bold;
}

authors a:focus, authors a:hover {
  color: #f09228;
  text-decoration: underline;
}

/*
 * Add shadow to panel
 */


publabel {
  font-weight: 500;
}

/* https://stackoverflow.com/a/67282713 */
publabel a:link {
  /* color: #FF552E; // UIUC orange */
  /* color: #13294B;   // UIUC blue */
  background-color: transparent;
  text-decoration: none;
}
publabel a:visited {
  /* color: #13294B; */
  background-color: transparent;
  text-decoration: none;
}
publabel a:hover {
  /* color: #13294B; */
  background-color: transparent;
  text-decoration: underline;
}
publabel a:active {
  /* color: #13294B; */
  background-color: transparent;
  text-decoration: underline;
}

/* a.bibtex:link {
  background-color: transparent;
  text-decoration: none;
}
a.bibtex:visited {
  background-color: transparent;
  text-decoration: none;
}
a.bibtex:hover {
  background-color: transparent;
  text-decoration: underline;
}
a.bibtex:active {
  background-color: transparent;
  text-decoration: underline;
} */


/*
* Change navbar height
*/

#navbar_root {
  min-height: 65px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
  /* border-color: #b2b2b2; */
  border-bottom: 2px solid #EAEAEA;
}

#navbar_root .navbar-nav > li > a, .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 65px;
}

@media (max-width:768px) {
  /* For some reasons, the min-height must be smaller than line-height.
  Otherwise, the navbar toggler will move when being clicked. */
  #navbar_root {
    min-height: 40px;
  }
  #navbar_root .navbar-nav > li > a, .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 0px;
    line-height: 55px;
  }
  #navbar_root .navbar-nav > li {
    margin-left: 0px;
    padding-left: 0px;
  }
  #self_bio {
    padding-top: 20px;
  }
}

.navbar-brand {
  font-size: 30px;
  font-variant: small-caps;
}


/* brand */
/* Set brand color */
#navbar_root .navbar-brand {
  color: #4c4c4c;
  /* font-family: 'Cormorant Garamond', serif; */
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
  font-weight: 400;
}
/* Set color when hover on brand */
/* #navbar_root .navbar-brand:hover,
#navbar_root .navbar-brand:focus {
  color: none;
} */

/* navbar item */
/* Set color when navbar item is active */
#navbar_root .navbar-nav > li > a {
  color: #4c4c4c;
  padding-left: 20px;
  padding-right: 20px;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  /* font-family: "Proza Libre", sans-serif; */
}
#navbar_root .navbar-nav > li > .active {
  color: #fff;
  background-color: #b2b2b2;
}
/* Set color when hovering on navbar item */
#navbar_root .navbar-nav > li > a:hover,
#navbar_root .navbar-nav > li > a:focus {
  color: #f09228;
}
#navbar_root .navbar-nav > li > .active:hover,
#navbar_root .navbar-nav > li > .active:focus {
  color: #f09228;
  background-color: transparent;
}
/* Set color when navbar item is active */
#navbar_root .navbar-nav > li > .active > a, 
#navbar_root .navbar-nav > li > .active > a:hover, 
#navbar_root .navbar-nav > li > .active > a:focus {
  color: #fff;
  background-color: #b2b2b2;
}