/*
    CSS for my resumé.
    By Jadrian Miles
    http://jadrian.org
*/

@import url(https://fonts.googleapis.com/css?family=Lora|Marcellus);

/* Global defaults */
h1, h2, h3, p, dl, ol, ul, li, hr {
  margin: 0px;
}
small {
  font-size: inherit;
}
address, cite {
  font-style: normal;
}

/* Colors & font styling */
html {
  background-color: hsl(208, 100%, 99.5%);
  font-family: Lora;
  color: hsl(208, 80%, 6%);
}
h2 {
  border-top-color: hsl(208, 10%, 65%);
}
h1, h2, h3, .jobtitle, .institution {
  font-family: Marcellus;
  font-weight: normal;
}
h1 {
  font-size: 1.953125rem;
}
h2 {
  font-size: 1.5625rem;
  text-align: left;
}
h3 {
  font-size: 1.25rem;
  text-align: left;
}
#controls {
  font-size: 0.8rem;
}
#pitch {
  line-height: 130%;
}
section {
  text-align: justify;
}
.jobtitle {
  font-size: 1.25rem;
  font-weight: normal;
  text-align: left;
}
.date {
  font-size: 0.8rem;
  color: hsl(208, 10%, 65%);
}
.institution .dept {
  font-size: 0.8rem;
  color: hsl(208, 10%, 65%);
}
.location {
  color: hsl(208, 10%, 65%);
  font-size: 0.8rem;
}
#education .jobtitle {
  font-size: 1.25rem;
}
#skills b, #education b {
  font-family: Marcellus;
  font-weight: normal;
}
#pubs ul {
  font-size: 89%;
  color: hsl(208, 10%, 35%);
}
#pubs ul .title {
  color: hsl(208, 80%, 6%);
}
#skills li {
  /* Edges are ragged in this list anyway; this prevents inconsistent
     spacing in one-off entries that happen to wrap. */
  text-align: left;
}
a:link, a:visited, a:active {
  color: inherit;
  border-bottom: 1px solid hsla(208, 10%, 65%, 0.3);
  text-decoration: none;
}
a:hover {
  background-color: #FFFF00;
  text-decoration: none;
  border-bottom: 1px solid #FFFF00;
}

/* Controls (Download link) */
#controls {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}

/* Header */
#contact_left {
  display: inline-block;
  width: 25%;
  float: left;
}
#contact_right {
  display: inline-block;
  width: 25%;
  float: right;
  text-align: right;
}
h1 {
  display: inline-block;
  width: 46%;
  margin: -0.5rem 2% 0rem 2%;
  text-align: center;
}
#contact_left p, #contact_right p {
  margin: 0px;
}

/* Pitch section */
section#pitch {
  margin: 0rem 2.8rem;
}

/* Vertical spacing */
main > section {
  margin-top: 2rem;
}
main > section:first-child {
  /* Clear both so that the box for this section buts against the
     bottom of the floating contact blocks, rather than the h1, which is
     a little bit higher. */
  clear: both;
  /* Then fake a 2rem margin using padding instead. */
  margin-top: 0rem;
  padding-top: 2rem;
}
section > ul > li, h3 {
  margin-top: 1rem;
}
#skills li, #pubs li {
  margin-top: 0rem;
}
section li li, #skills li, #pubs li, section#pitch > p {
  padding-top: 1ex;
}
section#pitch > p:first-of-type {
  padding-top: 0ex;
}

/* Dividers (made by <hr/>s in text mode) */
h2 {
  border-top-width: 1px;
  border-top-style: dashed;
  padding-top: 1.5rem;
}

/* Block arrangement for job sections */
.date {
  display: block;
  float: left;
  vertical-align: top;
  text-align: center;
  width: 1.9rem;
  margin-top: 0.8ex;
  margin-right: -1.9rem;
}
.jobtitle {
  display: inline-block;
  margin-left: 2.65rem;
}
.institution {
  display: inline-block;
  float: right;
  vertical-align: top;
  text-align: right;
  margin-top: 0.75ex;
  line-height: 100%;
  margin-left: 1rem;
}
span.dept:before {
  content: '\A';
  white-space: pre;
}
.location {
  display: inline-block;
  display: none;
  float: right;
  margin-top: 0.5rem;
}
ul.joblist {
  padding: 0px;
  list-style-type: none;
}
ul.joblist > li > ul {
  margin-left: 2.65rem;
}
ul {
  padding-left: 2rem;
}

/* Block tweaks for particular jobs */
#bioeng {
  width: 21ex;
}
#vrl {
  width: 23.5ex;
}

/* Block tweaks for education section */
#education .jobtitle {
  max-width: 70%;
}
#education .institution {
  vertical-align: top;
  margin-top: 0.375rem;
}

/* Global overrides */
.hide {
  display: none;
}
.nowrap {
  white-space: nowrap;
}
.txt_only {
  display: none;
}
.cv_only {
  display: none;
}

/* Responsive layout and sizing */

/* 1. Default layout: stretch-to-fill, desktop-sized */
html {
  font-size: 10pt; /* This defines the "rem" unit used everywhere else. */ 
}
body {
  max-width: 55rem;
  margin: 4rem auto 6.15rem auto;
  padding: 0rem 3rem;
}

/* Reverse the order of date ranges since they're stacked vertically. */
.date.range .begin, .date.range .sep, .date.range .end {
  display: block;
  width: 1.9rem;
}
.date.range .begin {
  position: relative;
  top: 1.65rem;
}
.date.range .sep {
  position: relative;
  top: -0.15rem;
}
.date.range .end {
  position: relative;
  top: -1.95rem;
}

/* Ditto for date pairs. */
.date.pair {
  width: 1.9rem;
}
.date.pair .first {
  display: block;
  position: relative;
  top: 1rem;
}
.date.pair .first:after {
  content: ' ';  /* This is a UTF no-break space. */
}
.date.pair .second  {
  display: block;
  position: relative;
  top: -1rem;
}
.date.pair .second:after {
  content: ',';
}
.date.pair .sep {
  display: none;
}

/* 2. Skinny windows. */
@media screen and (max-width: 650px) {
  html {
    font-size: 9pt; /* Scale everything down to 90% */
  }
  body {
    margin: 0rem;
    padding: 0.75rem 0.5rem 3rem 0.5rem;
  }
  #controls {
    position: fixed;
    top: auto;
    bottom: 0rem;
    right: 0rem;
    padding: 0.4rem 0.8rem 0.8rem 0.5rem;
    border: 1px dashed hsl(208, 10%, 65%);
    border-right: none;
    border-bottom: none;
    background-color: hsl(208, 100%, 99.5%);
  }
}

/* 3. Very skinny windows; big phones */
@media screen and (max-width: 500px) {
  body {
    margin: 0rem;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
  }
  header {
    display: block;
    width: 100%;
  }
  h1 {
    display: block;
    width: 100%;
    margin: 0rem 0rem -2.5rem 0rem;
    position: relative;
    top: 3.5rem;
  }
  #contact_left, #contact_right {
    width: auto;
    margin-bottom: 4rem;
    font-size: 0.8rem;
    color: hsl(208, 10%, 65%);
  }
  .date {
    display: block;
    float: right;
    position: relative;
    top: -2.5rem;
    width: auto !important;
    margin: 0rem 0rem -1rem 0rem;
  }
  .date * {
    display: inline !important;
    position: initial !important;
    top: 0rem !important;
  }
  .date.pair *:after {
    content: '';
    display: none;
  }
  .jobtitle {
    margin-left: 0rem;
    margin-right: 5rem;
  }
  .institution {
    display: block;
    float: none;
    text-align: left;
  }
  span.dept:before {
    content: ' ';
    display: inline;
    white-space: normal;
  }
  ul.joblist > li > ul {
    margin-left: 1rem;
  }
  #bioeng, #vrl {
    width: auto;
  }
  #education .jobtitle {
    max-width: none;
  }
  #education .accomplishments {
    text-align: left;
  }
}

/* 4. Ridiculously skinny windows; little phones */
@media screen and (max-width: 460px) {
  #education #distinction {
    display: none;
  }
}

/* 5. Unrealistically narrow windows for responsiveness-obsessed psychos */
@media screen and (max-width: 330px) {
  h1 {
    font-size: 1.46484375rem;
    margin: 0rem;
    position: absolute;
    top: 4rem;
  }
}

/* 6. Wide desktop windows. */
@media screen and (min-width: 820px) {
  body {
    margin: 6.5vw auto 10vw auto;
  }
}

/* Special overrides related to printing */
@media screen {
  .print_only {
    display: none;
  }
}
@media print {
  .screen_only {
    display: none;
  }
}

/* Page geometry for WeasyPrint */
/* Note that the desired margins are 0.75 on all sides, except for any headers
   on pages beyond the first one, which should be 0.4 from the top. */
@page {
  size: Letter;
  margin: 0.4in 0.75in 0.75in 0.75in;
}
@media print {
  /* Page geometry */
  body {
    max-width: none;
    width: 100%;
    margin: 0.35in 0in 0in 0in;
    padding: 0rem;
  }
  
  /* Sizing */
  html {
    font-size: 8pt;
  }
  
  /* Spacing */
  main > section {
    margin-top: 1rem;
  }
  main > section:first-child {
    margin-top: 0rem;
    padding-top: 1rem;
  }
  h2 {
    padding-top: 0.75rem;
  }
  section > ul > li, h3 {
    margin-top: 0.75rem;
  }
  #skills li, #pubs li {
    margin-top: 0rem;
  }
  section li li, #skills li, #pubs li, section#pitch > p {
    padding-top: 0.75ex;
  }
  #pitch > p:first-of-type {
    padding-top: 0ex;
  }
  
  /* Page headers */
  .pghead {
    width: 100%;
    font-size: 0.8rem;
    color: hsl(208, 10%, 65%);
    margin-top: 3in;
    /* 3" is overkill to bump the header over the page break.
       WeasyPrint collapses margins at the top of a new page, so the header
       butts right up against the 0.4" page margin. */
  }
  .hdr_left {
    float: left;
    width: 25%;
    text-align: left;
  }
  .hdr_cntr {
    float: left;
    width: 50%;
    text-align: center;
  }
  .hdr_rght {
    float: right;
    width: 25%;
    text-align: right;
  }
  
  /* Page 2 */
  /* All these values are hand-tuned to have page 1 end after the Education
     section, then give a header line 0.4" from the top of the page and the
     Mentor section 0.75" from the top. */
  #mentor {
    margin-top: 0in;
  }
  #mentor > h2 {
    border-top: none;
    padding-top: 0.3125in;
  }
  
  /* Colors */
  hmtl {
    background-color: #FFFFFF;
  }
  body {
    background-color: #FFFFFF;
    color: hsl(0, 0%, 10%);
  }
  a:link, a:visited, a:active {
    border-bottom: none;
  }
  a:hover {
    background: none;
    text-decoration: none;
    border-bottom: none;
  }
  h2 {
    border-top: 1px dashed hsl(0, 0%, 65%);
  }
  .date, .institution .dept, .location {
    color: hsl(0, 0%, 65%);
  }
  #pubs ul {
    color: hsl(0, 0%, 50%);
  }
  #pubs ul .title {
    color: hsl(0, 0%, 10%);
  }
}