body {
  background: #252525; }
body.bkg {
  background: #252525; }


#navlink {
  color:black;
  font-family: "cormorant garamond", "merriweather";
  font-weight: 900;
  font-size: 2rem; }
  #navlink:hover {
    color:white;
    text-decoration: underline; }


/* MEDIA QUERIES */
@media (max-width: 600px) {
  /* nav graphics start to wrap to a second row below this width */
  nav {
    max-width: 600px; }
    nav ul {
      display: none; }
    nav select {
      display: block;
      float: right;
      margin-right: 50px; } }
/* max-600px needs to appear before max-480px */
@media (max-width: 600px) {
  /* content becomes full width and margins drop out */
  #wrapper {
    padding-bottom: 0; }

  nav {
    padding-top: 0;
    padding-bottom: 10px; }

  nav select {
    margin-right: 5%; }

  #main {
    margin: 0;
    width: 100%; }

  #left-background {
    display: none; }

  #right-background {
    top: 65px;
    left: 0;
    height: 400px;
    width: 100%; }

  #pane header {
    -moz-box-shadow: 0 0 10px 0px #333;
    -webkit-box-shadow: 0 0 10px 0px #333;
    box-shadow: 0 0 10px 0px #333; }

  #pane-content {
    margin-top: 292px; }

  #bottom {
    /* inherits width:100% from #main */
    padding-left: 15px;
    padding-right: 5px; }
    #bottom #university {
      width: auto; } }
@media (max-width: 480px) {
  header {
    /* these need to be nested so the more specific css overrides previous properties */ }
    header #picture {
      background-size: 100%;
      height: 65px;
      width: 52px; }
    header #logo {
      /* crop and scale to 75% */
      height: 70px;
      margin: -8px 0 0 14%;
      width: 276px;
      background-size: 100%; }

  #right-background {
    top: 65px;
    left: 0;
    height: 200px; }

  #pane-content {
    margin-top: 192px; } }
@media (max-width: 395px ) {
  div.biography .portrait {
    float: none;
    margin: 0 0 20px 0; } }
@media (min-width: 1050px) {
  #bottom {
    position: absolute;
    width: 460px;
    background: none;
    left: 550px;
    top: 325px; }
    #bottom #ucsf {
      opacity: .15; } }
@media (min-width: 1200px ) {
  /***  scaled 75%  ***/
  #wrapper {
    max-width: 1325px; }

  #main {
    margin-left: 75px;
    /* matches width of #left-background */ }

  .background {
    height: 450px; }

  #right-background {
    margin-left: 25px;
    width: 750px; }

  #bottom {
    left: 575px;
    top: 475px; } }
/*	#bottom { @include width( 13 ); } */
@media (min-width: 1420px) {
  /***  full size (no scaling)  ***/
  #wrapper {
    max-width: 1600px; }

  #main {
    margin-left: 100px;
    /* matches width of #left-background */ }

  #bottom {
    left: 600px;
    top: 635px; } }
@media (min-width: 1420px) {
  /* standard large desktop 1410px */ }
@media (min-width: 1600px ) {
  /* extra large monitor = full size artwork and content */
  #wrapper {
    max-width: 1600px;
    /* setting this manually because with width(), 40 => 1580 and 41 => 1620 */ } }

html {
  font-size: 62.5%; }

a, a:visited {
  color: #3016b0;
  text-decoration: none; }
a:hover {
  color: grey;
  text-decoration: underline;
}

body {
  font-family: "cormorant garamond", "merriweather";
  font-weight: 300;
  font-size: 2rem;
  line-height: 2.6rem;
  background-color: white;
  color: #333;
  margin: 0 0 1px;
  height: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: "cormorant garamond", "merriweather";
  position: relative;
  font-weight: 600;
  color: #222;
  margin: 0;
   }

h1 {
  font-size: 4.25rem;
  line-height: 5rem;
  margin-bottom: 15px; }

h2 {
  font-size: 4rem;
  line-height: 4.3rem;
  margin-top: 0;
  margin-bottom: 5px; }

h3 {
  color: #111;
  font-size: 2rem;
  line-height: 3rem;
  margin-bottom: 2px; }

/* h4-h6 are all the same size, but progressively lighter greys*/
h4, h5, h6 {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 2px;
  padding-top: 3px;
  letter-spacing: 1px; }

h5 {
  color: #888; }

h6 {
  color: #aaa; }

p {
  margin: 5px 0 18px 0; }


ul, ol, dl, dialog {
  font-size: 1.3rem;
  line-height: 1.8rem;
  position: relative;
  top: 5px;
  margin-top: 18px;
  margin-bottom: 18px; }


/* my stuff */
a.twitter {
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  /*bord*/er-radius: 50%;
  background: url("twitter_small.png") 0 0;
  background-size: 100px 50px;}
  
a.twitter:hover {
  background-position: -50px 0px; }

a.email {
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  /*border-radius: 50%;*/
  background: url("email_small.png") 0 0;
  background-size: 100px 50px;}
  
a.email:hover {
  background-position: -50px 0px;}
  
a.linkedin {
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  /*border-radius: 50%;*/
  background: url("linkedin_small.png") 0 0;
background-size: 100px 50px;}
  
a.linkedin:hover {
  background-position: -50px 0px; }

a.facebook {
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  /*border-radius: 50%;*/
  background: url("facebook_small.png") 0 0;
  background-size: 100px 50px;}
  
a.facebook:hover {
  background-position: -50px 0px; }

#index-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg_bacteria5.png") no-repeat;
  background-position: bottom;
}

#contact-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg_infotaxis_network.png") no-repeat;
  background-size: 809px 434px;
  background-position: bottom;
  /*1619x869*/
}

#research-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg_mood.png") no-repeat;
  background-size: 809px 434px;
  background-position: 50px 50px;
  /*1619x869*/
}

#publications-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg_network_neuron2.png") no-repeat;
  background-size: 1021px 823px;
  background-position: -200px 0px;
  /*2043x1647*/
}

#resume-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg_bacteria5.png") no-repeat;
  background-position: bottom;
}

#writing-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg_tripletPicture3.png") no-repeat;
  background-position: 0px 70px;
  /*1261x594*/
}

#viz-img {
  padding-top: 100px; 
  width: 1000px;
  height: 400px;
  background: url("bkg-mccarthy.png") no-repeat;
  background-position: 0px 70px;
  /*1261x594*/
}

#header-style {
  vertical-align:center;
  background-color: #ffffff; 
  text-align:center;
  -webkit-box-shadow: 0px 2px 2px;
     -moz-box-shadow: 0px 2px 2px;
          box-shadow: 0px 2px 2px;
}