/* Reset CSS styling done by browsers (based on HTML5 Doctor CSS Reset). */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
html, body {
  line-height: 1;
  height: 100%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote: before, blockquote: after,
q: before, q: after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}

/**********************************************************************/
/* OVERALL                                                            */
/**********************************************************************/
body {
  font-family: Georgia, serif;
  font-size: 1.1875em; /* 19px */
  line-height: 1.5;    /* 28.5px */
  background-color: #f1f1f1;
  color: #333333;
}
header, footer {
  max-width: 940px;
  margin: 0 auto;
}
/* <div class="main>" should really be <main>, but various browsers
   (such as MSIE and the one in Android 2.3) don't support <main> */
.main {
  text-align: justify;
  max-width: 640px;
  margin: 50px auto;
  padding: 1em 30px;
  background: white;
  border: 1px solid #cccccc;
  box-shadow: 5px 5px 10px #777777;
}
a, a:link {
  color: #377eb8;
  text-decoration: none;
}
a:visited {
  color: #984ea3;
}
a:active, a:hover {
  text-decoration: underline;
}
ul, ol {
  padding-left: 27.5px;
}
table, ul, ol {
  margin: 0.5em 0;
}
article > li {
  margin-top: 0.5em;
}
code, pre, tt {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em; /* 0.9 for <code>...</code>, 0.9*0.9=0.81 for <pre><code>...</code></pre> */
}

/**********************************************************************/
/* HEADER                                                             */
/**********************************************************************/
header img {
  max-width: 100%;
  height: auto;
}
#mainNav, #subNav {
  width: 100%;
  font-family: sans-serif;
  position: relative;
}
nav ul {
  list-style: none;
  padding: 0 10px;
  margin: 0;
  vertical-align: middle;
  position: relative;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
nav li {
  display: inline-block;
  margin-right: 2em;
}
#mainNav ul {
  background-color: #222222;
  padding-left: 20px;
}
nav {
  color: #f1f1f1;
}
nav a, nav a:link, nav a:visited, nav a:hover, nav span {
  text-decoration: none;
  display: inline-block;
  color: #f1f1f1;
}
#mainNav a, #mainNav .selected {
  padding: 7px 0;
}
#mainNav a:hover, #mainNav .selected {
  border-bottom: 7px solid;
  padding-bottom: 0;
}
#mainNav .social-media {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -16px;
  margin-right: 0;
}
#mainNav .social-media a {
  vertical-align: middle;
  padding: 0;
}
#mainNav .social-media a:hover {
  border-bottom: none;
  opacity: 0.8;
  filter: alpha(opacity=80); /* for MSIE <=8 */
}

#mainNav .about a, #mainNav .about .selected {
  color: #ff7f00;
  border-bottom-color: #ff7f00;
}
#mainNav .blog a, #mainNav .blog .selected {
  color: #377eb8;
  border-bottom-color: #377eb8;
}
#mainNav .publications a, #mainNav .publications .selected {
  color: #984ea3;
  border-bottom-color: #984ea3;
}
#mainNav .programming a, #mainNav .programming .selected {
  color: #4daf4a;
  border-bottom-color: #4daf4a;
}

#subNav {
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 4em;
}
/* We want to justify the elements of the subNav menu.  The best
   way to do that is with "text-align-last: justify", but WebKit
   does not support this yet.  So, we need to use a trick. */
#subNav ul {
  position: absolute;
  left: 10px;
  right: 10px;
  text-align: justify;
}
/* To get the "text-align-last: justify" effect, we add a full-
   width element at the end. */
#subNav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
/* This adds a second line, however, so we need to shift the
   menu up one line... */
#subNav ul:before {
  content: '';
  display: block;
  width: 100%;
  margin-bottom: -1.5em;
}
/* ... and then shift its contents down one line again. */
#subNav li {
  margin-right: 0;
  position: relative;
  top: 1.5em;
}
/* Note that shifting #subNav upwards makes it overlap
   #mainNav, which can be corrected by giving #mainNav a
   higher z-index. */
#mainNav ul {
  z-index: 1;
}

#subNav span {
  color: #888888;
}
#subNav .selected {
  color: #f1f1f1;
}
#subNav a:hover, #subNav .selected {
  text-decoration: underline;
}
#subNav .blog {
  background-color: #295f8a;
}
#subNav .publications {
  background-color: #723b7a;
}

/* Brewer Set1 colors */
/*
       original  darkened
red    #e41a1c   #ab1415
blue   #377eb8   #295f8a
green  #4daf4a   #3a8338
purple #984ea3   #723b7a
orange #ff7f00   #bf5f00
*/

/**********************************************************************/
/* MAIN                                                               */
/**********************************************************************/
h1, h2, h3, h4, h5, h6 { color: #222; }
h1 { font-size: 2em; line-height: 1.25; margin-bottom: .67em; }
h2 { font-size: 1.5em; margin: .75em 0; }
h3 { font-size: 1.17em; margin: .83em 0; }
h4, p { margin: 1.12em 0; }
h5 { font-size: .83em; margin: 1.5em 0; }
h6 { font-size: .75em; margin: 1.67em 0; }
.subheader {
  font-size: .75em;
  margin-top: -1.5em;
  margin-bottom: 2em;
  color: #555555;
}
li > p {
  margin-bottom: 0;
}
img {
  display: inline-block;
  vertical-align: middle;
}
figure {
  text-align: center;
}
figure img {
  margin: 0 auto;
  display: block;
}
figcaption {
  font-size: 0.9em;
  margin-top: 15px;
}

/* About */
hr {
  margin: 0;
}
aside {
  display: block;
  float: right;
  margin-left: 2.25em;
  margin-bottom: 1em;
}
#my-name {
  font-size: 1.2em;
  color: #377eb8;
}
#my-passion {
  font-size: 2em;
  position: relative;
  top: 0.125em;
  color: #377eb8;
}
.highlight {
  color: #377eb8;
}
.midtone {
  color: #984ea3;
}
#contact {
  font-size: 0.9em;
  width: 250px;
  overflow: visible;
}
#contact a {
  width: 15.5em;
  display: block;
  margin-bottom: -1.25em;
}
#contact a span {
  margin-left: 0.5em;
}
#contact img {
  width: 19px;
  height: auto;
}
.column1, .column2 {
  width: 50%;
  text-align: left;
  margin-bottom: 1em;
}
.column1 {
  float: left;
}
.column2 {
  float: right;
}
.column1 > ul {
  margin-right: 1em;
}
.column2 > ul {
  margin-left: 1em;
}
.column1 ul li ul {
  list-style-type: disc;
}
.column1 ul li ul li {
  float: left;
}
section, li {
  clear: both;
}

/* Blog */
tr > .date {
  text-align: right;
  padding-right: 1em;
}
tr > .title {
  text-align: left;
}

/* Publications */
.note {
  font-style: italic;
}
.note, .longnote {
  font-size: 0.9em;
  color: #666666;
  margin-bottom: 0.25em;
}
.unpublished {
  color: #377eb8;
}
.workshop {
  color: #4daf4a;
}
.conference, .msc-thesis {
  color: #984ea3;
}
.journal, .phd-thesis {
  color: #ff7f00;
}

/* Programming */
tr > .project, tr > .source {
  padding-right: 1em;
}
tr > .languages {
}

/**********************************************************************/
/* FOOTER                                                             */
/**********************************************************************/
#container {
  min-height: 100%;
}
#content {
  padding-bottom: 2.5em;
}
footer {
  text-align: center;
  font-size: 0.75em;
  height: 2.5em;
  margin-top: -2.5em;
}
footer p {
  padding: 0.5em 0;
  margin: 0;
}
.back-top, .back-top:link, .back-top:visited {
  width: 14px;
  height: 15px;
  position: relative;
  top: 50%;
  margin-top: -7.5px;
  background: url('/images/top-icon.png') 0 0;
}
.back-top:hover {
  background: url('/images/top-icon.png') 14px 0;
  text-decoration: none;
}
.left {
  float: left;
  margin-left: 0;
}
.right {
  float: right;
  margin-right: 0;
}
footer {
  color: #f1f1f1;
  background-color: #222222;
  padding: 0 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* WORKAROUND: "text-decoration: line-through;" doesn't seem centered vertically */
del {
  text-decoration: none;
  position: relative;
}
del:after {
  border-bottom: 1px solid #333333;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 60%;
}

/* Syntax highlighting (generated by Pandoc) */
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre
   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
td.sourceCode { padding-left: 5px; }
.sourceCode span.kw { color: #007020; font-weight: bold; }
.sourceCode span.dt { color: #902000; }
.sourceCode span.dv { color: #40a070; }
.sourceCode span.bn { color: #40a070; }
.sourceCode span.fl { color: #40a070; }
.sourceCode span.ch { color: #4070a0; }
.sourceCode span.st { color: #4070a0; }
.sourceCode span.co { color: #60a0b0; font-style: italic; }
.sourceCode span.ot { color: #007020; }
.sourceCode span.al { color: red; font-weight: bold; }
.sourceCode span.fu { color: #06287e; }
.sourceCode span.re { }
.sourceCode span.er { color: red; font-weight: bold; }