/* Color Palette:
   *
   Color      Foreground/Text      Background
   Blue:      #1c11ab              #d5e1ed
   Orange:    #ed9014              #fff5b2
   Green:     #88cc27              #dbf3b9
   Gray:      #666                 #ccc
h1{font: 22pt courier; color: #000000}
h2{font: 14pt courier; color: #000000; font-weight: bold}
p{font: 12pt courier; color: #000000}
*/

/* Remember: 
   #foo --> foo is ID
   .foo --> foo is class
*/

/* There might be a better way to do the color palette, but this seems to work. */
:root{
  --main-color-dark: #1c11ab;
  --main-color-light: #d5e1ed;
  --sub-color-dark: #ed9014;
  --sub-color-light: #fff5b2;
  --third-color-dark: #88cc27;
  --third-color-light: #dbf3b9;
  --text-color: #666666;
}

/* ============================================ */
/*                                              */
/*              Site-Wide Settings              */
/*                                              */
/* ============================================ */
* {
  padding:0;
  margin:0;
}

body {
  font-family: "Courier New", Courier, monospace;
}

h1 {
    color:var(--main-color-dark);
}

h2 {
    color: var(--main-color-dark);
}

h3 {
    color:var(--sub-color-dark);
}

hr {
  border: 2px solid var(--main-color-dark); /* Make hr a little thick. */
}

p {
    color: var(--text-color);
}

a {
    color: var(--main-color-dark); 
    text-decoration: none;
    target: _blank;
}
a:visited {
    color: var(--main-color-dark); 
    text-decoration: none;
    target: _blank;
}
a:hover {
    color: var(--third-color-dark);
    text-decoration: none;
}
a img {border: none}

/* All of the content on each page goes in a pad-section */
.pad-section {
  padding: 50px 0;
  position: relative; /* Required for proper footer placement */
  min-height: 100vh; /* Required for proper footer placement */
}

/* The container is just inside the pad-section on each page. 
   It gives the effect of adding a margin to the page. 
   It's a Bootstrap thing, but we pad the bottom to make room for the footer. */
.container {
  padding-bottom: 3em; /* Same as footer height */
}

/* Footers are a pain. They should be the last thing that you see when you 
scroll all the way down, and they shouldn't move. */ 
footer {
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
  height: 3em;
}

/* The 'todo' class is useful for adding comments in bright red, using <p> */
.todo {
  color: red;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
}

/* ============================================ */
/*                                              */
/*                 Home Page                    */
/*                                              */
/* ============================================ */
/* To make the images responsive, make them background images in 'div's that 
   have constant aspect ratios, regardless of the screen. To fix a div's 
   aspect ratio, use padding. Both horizontal and vertical padding is set as 
   a percent of the containing div's width:
   'width' is a percentage to keep it responsive.
   'height' is zero for same reason
   'padding' aspect ratio is same as original image
   NOTE: I'm not entirely sure what the 'width' attribute does here :-( */

/* ============ Images that accompany links to other pages ============ */
/* TODO: Add 'click' option to highlight link. */
/* TODO: Activate link:hover when these are hovered */

/* Goes with 'research' */
#peptide{
  width: 80%;
  height: 0;
  padding: 25% 50%; /* Same aspect ratio as original image (1020x500) */
  background: url("../graphics/peptide.png") no-repeat;
  float: left;
  display: block;
  background-position: 0 0;
  background-size: 100%;
}

#hometeam {
  margin: 5%;
}

/* "Team" section on home page */
#hometeam img {
  height: 100px;
  width: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
}

/* Images of lab members to go with "Team" */
#lezonbw{
  padding: 15% 15%; /* Same aspect ratio as original image (942x922) */
  background: url("../graphics/lezon-bw.png") no-repeat;
  float: left;
  background-size: 100%;
}

#nafshibw{
  padding: 15% 15%; /* Same aspect ratio as original image (942x922) */
  background: url("../graphics/nafshi-bw.png") no-repeat;
  float: left;
  background-size: 100%;
}

#dibiasibw{
  padding: 15% 15%; /* Same aspect ratio as original image (942x922) */
  background: url("../graphics/dibiasi-bw.png") no-repeat;
  float: left;
  background-size: 100%;
}

/* Size the CoBB/Cubs logo. */
.cobblink img {
  height: 140px;
  width: 140px;
  display: inline-block;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
}

/* Goes with 'publications' */
#pen{
  width: 80%;
  height: 0;
  padding: 30% 12% 10% 12%; /* Same aspect ratio as original image (450x178) */
  background: url("../graphics/pen.png") no-repeat;
  float: left;
  display: block;
  background-position: 0 0;
  background-size: 100%;
}

/* ============================================ */
/*                                              */
/*    Miscellaneous pics to fill in the gaps    */
/*                                              */
/* ============================================ */
/* NOTE: These can be reused on multiple pages on the site,
   if there aren't enough images to go around */

#ringplanet{
  width: 80%;
  height: 0;
  padding: 34% 50%; /* Same aspect ratio as original image (361x244) */
  background: url("../graphics/ringplanet.png") no-repeat;
  float: left;
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#mucow{
  width: 80%;
  height: 0;
  padding: 26% 50%; /* Same aspect ratio as original image (740x393) */
  background: url("../graphics/mu.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#springmass{
  width: 80%;
  height: 0;
  padding: 28% 50%; /* Same aspect ratio as original image (363x195) */
  background: url("../graphics/springmass.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#hydrophobe{
  /*width: 80%;*/
  height: 0;
  padding: 10% 50%; /* Same aspect ratio as original image (2500x500) */
  background: url("../graphics/hydrophobe.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}

/* ============================================ */
/*                                              */
/*             For my personal page             */
/*                                              */
/* ============================================ */
#tim img {
  height: 140px;
  width: 140px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* -------------- Below here is my attempt at animating the old man ----------- */
#oldman {
  position: relative;
  left: 0%;
}

/* Why does left: -50% actually mean "align left" here? */
#oldman2 {
  position: relative;
  left: -50%; 
}


/* ============================================ */
/*                                              */
/*                   Research                   */
/*                                              */
/* ============================================ */
#hdpath{
  /*width: 80%;*/
  height: 0;
  padding: 38% 50%; /* Same aspect ratio as original image (675x389) */
  background: url("../graphics/hd_pka.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#pmfsurf{
  /*width: 80%;*/
  height: 0;
  padding: 38% 50%; /* Same aspect ratio as original image (675x389) */
  background: url("../graphics/pmf_surf.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}

/* From 2020 */
#combo{
  /*width: 80%;*/
  height: 0;
  padding: 41% 50%; /* Same aspect ratio as original image (744x607) */
  background: url("../graphics/locks.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#bispecific{
  /*width: 80%;*/
  height: 0;
  padding: 29% 50%; /* Same aspect ratio as original image (675x389) */
  background: url("../graphics/bispecific.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#spacealien{
  /*width: 80%;*/
  height: 0;
  padding: 15% 50%; /* Same aspect ratio as original image (881x260) */
  background: url("../graphics/spacealien01.png") no-repeat;
  /*float: left;*/
  display: block;
  background-position: 0 0;
  background-size: 100%;
}

/* ============================================ */
/*                                              */
/*                     Team                     */
/*                                              */
/* ============================================ */
#team {
  color: #1c11ab;
}

#team .glyphicon {
  border: 2px solid var(--main-color-dark);
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}
#team img {
  height: 140px;
  width: 140px;
  display: inline-block;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
}


/* ============================================ */
/*                                              */
/*                 Publications                 */
/*                                              */
/* ============================================ */
/* NOTE: This is used in 'teaching,' too, so maybe it should be renamed. */
#publications img {
  width: 100%;
}

#teaching img {
  width: 100%;
}

/* NOTE: To get a thin border around each publication, it may be necessary
to insert another div into each col, and give that div a border. For now, we'll adjust the style of the cols themselves. */
.pubtile {
  padding-top: 2em;
  padding-bottom: 2em;
  /*
  padding: 1em;
  border-width: thin;
  border-style: solid;
  margin: 2px;
*/
}

/* These 'publist' guys are depricated in 2021. Get rid of 'em. */
.publist div{
    /*font-family: Arial, Lucida Grande, Tahoma, sans-serif;*/
    font-size: 16px;
    line-height: 1.6em;
    color: var(--text-color);
    overflow: hidden;
}

.publist ul{
    display: block;
    margin: 0;
    padding: 0;
}

.publist li{
    list-style: none;
    margin: 12px;
    font-size: 16px;
}

  

/* ============================================ */
/*                                              */
/*                  Animations                  */
/*                                              */
/* ============================================ */

/* This is an animation that goes with 'teaching' link on the home page. */
#atombox{
    background: url("../graphics/atoms.png") no-repeat;
    width: 125px;
    height: 125px; 
    display: inline-block;
    background-position: 0 0;
}

/* ===== Here's the RESPONSIVE computer/eye animation on the home page. ===== */
/* 'compic' is a div that holds the canvas that displays the eyeball. Its background
   image is the computer. 
   The padding is set to keep its aspect ratio equal to that of the background
   image, even when the screen is resized.
   It must have non-static (here, relative) positioning so that 'eyebox' can be positioned 
   relative to it.
   NOTE: 'absolute' positioning is always relative to the first positioned ancestor. */
#compic_home{
  width: 20%;
  height: 0;
  padding: 40% 51%; /* Same aspect ratio as original image (372x292) */
  background: url("../graphics/computer_eye.png") no-repeat;
  float: left;
  display: block;
  background-position: 0 0;
  background-size: 100%;
  position: relative;
}
/* 'eyebox' is the canvas element onto which the eyeball is rendered. 
   It has absolute position relative to its container, 'compic'. The 'top'
   and 'left' values, provided as percents, keep it fixed over one part of 
   the background image of 'compic'.
   Its padding decides its size. */
/* IS THIS EVEN NECESSARY? 
#eyebox_home{
  width: auto;
  height: 0;
  position: absolute;
  top: 33%;
  left: 54%;
  padding: 3%;
}
*/
#compic{
  width: 20%;
  height: 0;
  padding: 40% 51%; /* Same aspect ratio as original image (372x292) */
  background: url("../graphics/computer_eye_color.png") no-repeat;
  float: left;
  display: block;
  background-position: 0 0;
  background-size: 100%;
  position: relative;
}

/* ============================================ */
/*                                              */
/*                   Old Stuff                  */
/*                                              */
/* ============================================ */

/* OBSOLETE: Used to go with 'research' on main page. Replaced by 'peptide'. */
#quixote{
  width: 80%;
  height: 0;
  padding: 30% 43%; /* Same aspect ratio as original image (251x426) */
  background: url("../graphics/quixote.png") no-repeat;
  float: left;
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
/* *NOT USED* */
#wormapple{
  /*width: 80%;*/
  height: 0;
  padding: 8% 8%; /* Same aspect ratio as original image (126x141) */
  background: url("../graphics/wormapple.png") no-repeat;
  display: block;
  background-position: 0 0;
  background-size: 100%;
}
#saucer{
  width: 80%;
  height: 0;
  padding: 22% 46%; /* Same aspect ratio as original image (460x215) */
  background: url("../graphics/flyingsaucer.png") no-repeat;
  display: block;
  background-position: 0 0;
  background-size: 100%;
}

/*
#f {
  width: 200px;
  height: 30px;
  background-image: url(../graphics/freenergy.svg);
  background-repeat: no-repeat;
}
  */