/*
main width           : 36em
border gray          : #e4e4e4
border hover (blue)  : #aec6e5
border 2 gray        : #eeecea
light text gray      : #828282
lighter text gray    : #aaaaaa
copy text            : #2a2a2a
active (red)         : #f0462a
link (blue)          : #334D78
link hover (blue)    : #2d6bbb
ultralight bg        : #fbfaf9
*/

*
{
  margin: 0;
  padding: 0;
}

body
{
  font-family: "PT Serif", Georgia, serif;
  font-size: 20px; /* change this to globally change all dimensions */
  color: #2a2a2a;
  background-color: #fffefd;
  line-height: 1.75em;
}

a
{
  text-decoration: none;
  color: #334D78;
  padding-bottom: 0.125ex;
  border-bottom: 1px solid #e4e4e4;
}

a:hover
{
  color: #2d6bbb;
  border-bottom: 1px solid #aec6e5;
}

a.anchor,
a.anchor:hover
{
  border-bottom: none;
}

a.imglink
{
  border: none !important;
}

a.external:after
{
  content: "\2197";
  font-weight: bold;
  font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", sans-serif;
  font-size: .75em;
  color: #f0462a;
  vertical-align: middle;
}

a.continue:after
{
  content: "\2192";
  font-weight: bold;
  font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", sans-serif;
  color: #f0462a;
}

p
{
  color: #2a2a2a;
  line-height: 1.75em;
  margin: 0 0 1.75em 0;
  padding: 0;
}

p strong
{
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6
{
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: #2a2a2a;
}

h1
{
  font-size: 1.50em;
  line-height: 1.166em;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0.1em 0;
  /*
    0.1em is a hack to fix a tiny misalignment in the line height that seems
    to be due to Roboto Slab being weird.
  */
}

#header a
{
  padding: 0;
}

#header h1 a
{
  color: #2a2a2a;
  border: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1.166em;
}

h2
{
  display: block;
  font-size: 1.5em;
  text-transform: none;
  line-height: 1.166em;
  font-weight: 300;
  border: none;
  margin: 0;
  padding: 0 0 1em 0;
  padding: 0 0 1em 0;
}

h3
{
  font-family: Roboto, sans-serif;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  line-height: 1.75em;
  font-weight: bold;
}

#all
{
  padding-bottom: 7em;
}

#header
{
  color: #828282;
  width: 36em;
  margin: 3.5em auto 0 auto;
}

#footer
{
  clear: both;
  width: 36em;
  margin: 7em auto 0 auto;
}


#footercard
{
  border-top: 1px solid #e4e4e4;
  padding: 2.333em 0 0 0;
}


#headercard
{
}

#header a
{
  color: #828282;
  border: none;
  line-height: 1.75em;
}

#header a:hover,
#navigation a:hover,
.download a:hover
{
  color: #2d6bbb;
  border-bottom: 1px solid #aec6e5;
}

#navigation a:hover
{
  text-decoration: underline;
}

#headercard p
{
  color: #828282;
  margin: 0;
  padding: 0;
  line-height: 2.3;
}

#footercard p
{
  color: #828282;
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  line-height: 1.3;
}

.download
{
  line-height: 1.3;
  margin: 1.75em 0;
  padding: 0;
}

.download img
{
  float: left;
  border: none;
  margin-right: 0.5em;
  padding: 0.25ex 0;
}

#navigation
{
  padding: 0;
  margin: 3.5em auto 0 auto;
  width: 36em;
}

#navigation ul
{
  display: block;
  margin: 0;
  margin: 0 0 1px 0;
}

#navigation li
{
  padding: 0;
  margin: 0 0 -1px 0;
  border-bottom: 1px solid #eeecea;
  border-top: 1px solid #eeecea;
  border-top: 1px solid #eeecea;
  border-bottom: 1px solid #eeecea;
}

#navigation h2
{
  display: none;
}

#navigation a
{
  display: block;
  color: #828282;
  border: none;
  border-left: 0 solid #fff;
  padding: 0.5em 1.25em 0.5em 1.75em;
  margin: 0;
  line-height: 1.75em;
  transition: border .1s;
}

#navigation .currentpage a,
#navigation .currentpage a:hover
{
  border: none;
  border-left: 0.5em solid #f0462a;
  padding-right: 0.75em;
}

#navigation a:hover
{
  color: #2d6bbb;
  background-color: #fbfaf9;
  border: none;
  border-left: 0.5em solid #e4e4e4;
  padding-right: 0.75em;
}

.download a
{
  color: #2a2a2a;
  line-height: 1em;
  border: none;
}

#maincontents
{
  position: relative;
  top: 0;
  margin: -0.5em auto 0 auto;
  padding: 3.5em 0 0 0;
  margin: 0 auto;
  width: 36em;
}

.section
{
  margin: 0 0 3.5em 0;
  padding: 0;
  clear: both;
}

ul
{
  padding-left: 1em;
}

.floatfix
{
  clear: both;
}

hr.floatfix
{
  visibility: hidden;
  overflow: hidden;
}

.nobullets li
{
  display: block;
  list-style: none;
  list-style-image: none;
}

.nobullets
{
  padding-left: 0;
}

li
{
  line-height: 1.75em;
}

dl li
{
  display: block;
}

dt
{
  display: block;
  padding: 0;
  margin: 1em 0 0 0;
}

pre.windowed
{
  display: block;
  border-left: 2px solid #e4e4e4;
  margin: 1em 0 1em 1em;
  padding: 1em;
  font-size: 0.90em;
  line-height: 1.67em;
  max-height: 20em;
  max-width: 36em;
  overflow: auto;
}

code
{
  border: 1px solid #eeecea;
  font-size: 0.90em;
}

table
{
  border-collapse: collapse;
  margin: 0;
}

th
{
  vertical-align: top;
  text-align: left;
  margin: 0;
  font-weight: normal;
  padding: 0.5em;
  color: #828282;
}

td
{
  vertical-align: top;
  padding: 0.5em;
}

th.leftheader
{
  text-align: right;
}

td.hex
{
  font-family: monospace;
}

#occupation,
#contact
{
  line-height: 1.75em;
  color: #828282;
}

#occupation p
{
  margin: 0;
  padding: 0;
  line-height: 1.75em;
}

.sectioncontents
{
  padding: 0;
  margin: 0;
  clear: both;
}

#intro
{
  position: relative;
  margin-top: 0;
}

#cvsummary
{
  padding: 0.5em 0 1.75em 0;
}

#cvsummary img
{
  width: 100%;
  height: auto;
}

.note
{
  font-size: 0.75em;
  color: #828282;
}

.note:before
{
  content: "\2020";
}

.note-link
{
  border-bottom: 1px dotted #ddd;
}

.note-link:after
{
  content: "\2020 ";
  font-size: 0.5em;
  vertical-align: top;
}

.sectioncontents p .note-link
{
  color: #2a2a2a;
}

.header .note-link
{
  color: #f0462a;
}

h4.related
{
  font-weight: normal;
}

.related li
{
  margin: 0;
  font-size: 0.75em;
  padding: 0;
  font-family: Roboto, sans-serif;
}

.related li strong
{
  font-weight: normal;
}

.publications li:before,
.related li:before
{
  content: "\203a";
  font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", sans-serif;
  color: #f0462a;
  margin-left: -1.25em;
  position: absolute;
}

.award
{
  display: block;
  /*color: #f0462a;*/
}

.publications li
{
  margin: 0 0 1em 1em;
}

.publications .sectioncontents
{
  margin-left: 0.5ex;
}

.comingsoon
{
  color: #322E23;
  border: 1px dotted #E6DAA1;
  background-color: #FCF6D9;
  font-size: 0.75em;
  padding: 0.3 1.33em;
  margin: 0.67em 0;
}

.news
{
  color: #322E23;
  border-top: 1px solid #E6DAA1;
  border-bottom: 1px solid #E6DAA1;
  background-color: #FCF6D9;
  margin: 0 -1.75em 2.5em -1.75em;
  padding: 1em 1.75em 0 1.75em;
}

.teaser
{
  float: left;
  width: 19.25em;
  margin: 1.75em 1.00em 0 0;
  padding: 0;
}

.teaser img
{
  border: 1px solid #eeecea;
  margin: 0 0.5em 0 0;
  background-color: #fff;
  float: left;
}

.teaser img:hover
{
  border-color: #eeecea;
}

.teaser p
{
  margin: 0;
  padding: 0;
  padding-top: 0.5em;
  line-height: 1.5em;
}

.caption
{
  margin: 0;
  padding: 0;
  font-size: 0.75em;
}

.caption p
{
  margin: 0;
  padding: 0;
}

.sectioncontents img
{
  max-width: 100%;
  height: auto;
}

.imgsw-page .caption
{
  margin: 2.3 0 0 0;
}

.download .caption
{
  line-height: 1em;
  color: #828282;
}

.video
{
  position: relative;
  background: #eee;
  margin: 0 -1.75em 1.75em -1.75em;
  padding: 1.75em;
  width: 100%;
  padding-top: 75%;  /* This is 75% of the width, so give a 4:3 aspect ratio. */
  padding-top: calc(75% + 1.75em);
}

.video iframe {
  position: absolute;
  top: 1.75em;
  left: 1.75em;
  width: 100%;
  height: 100%;
  width: calc(100% - 1.75em*2);
  height: calc(100% - 1.75em*2);
}

.fig-title
{
  font-weight: bold;
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width: 1200px),
only screen and (min-device-pixel-ratio : 1.5) and (max-width: 1200px),
only screen and (max-width: 800px)
{
  #header,
  #navigation,
  #maincontents
  {
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
  }

  #footer
  {
    width: auto;
  }
}