.wf-loading body, .wf-inactive body {
  font-family: Arial, sans-serif; }

.wf-active body {
  font-family: "museo-sans"; }

.wf-loading .year, .wf-inactive .year {
  font-family: Arial, sans-serif; }

.wf-active .year {
  font-family: "museo-slab"; }

.wf-loading .header, .wf-inactive .header {
  font-family: Times, serif; }

.wf-active .header {
  font-family: "museo-slab"; }

body {
  margin: 0px;
  font-size: 12pt;
  font-weight: 300; }

.header > .header-main {
  float: left;
  background-color: #1dafec;
  padding: 8px;
  padding-left: 48px;
  margin-top: 24px; }
  .header > .header-main > .logo {
    font-size: 20px;
    text-decoration: none;
    color: white;
    letter-spacing: -1px; }
.header > .header-main-right {
  float: right;
  background-color: #1dafec;
  padding: 8px;
  padding-right: 32px;
  margin-top: 8px; }
  .header > .header-main-right > .reflink {
    margin-right: 8px; }
.header > .intro-wrapper {
  clear: both;
  text-align: right;
  color: white; }
  .header > .intro-wrapper > .intro {
    float: right;
    background-color: #1dafec;
    display: inline-block;
    text-align: left;
    max-width: 640px;
    padding: 8px;
    padding-right: 48px;
    margin-top: 16px;
    margin-bottom: 32px; }
    .header > .intro-wrapper > .intro h1 {
      margin: 8px 0px; }

.content {
  margin: 8px 5% 8px 5%;
  padding-top: 8px;
  clear: both; }
  .content > .year {
    margin-bottom: 96px;
    position: relative; }
    .content > .year > .year-header {
      font-weight: 700;
      font-size: 64px;
      color: #1dafec; }
    .content > .year > .article {
      display: inline-block;
      position: relative;
      text-decoration: none;
      width: 256px;
      height: 256px;
      margin: 8px; }
      .content > .year > .article > .image {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 50%;
        border: 2px solid #1dafec;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #1dafec; }
      .content > .year > .article > .date {
        font-weight: 700;
        position: absolute;
        top: 4px;
        left: 0;
        padding: 4px 16px;
        color: white;
        background-color: #1dafec; }
      .content > .year > .article > .title {
        font-weight: 700;
        position: absolute;
        bottom: 4px;
        right: 0;
        padding: 4px 16px;
        color: white;
        background-color: #1dafec;
        max-width: 192px;
        text-align: right; }
  .content > .year:nth-child(odd) {
    text-align: left;
    padding-left: 96px; }
    .content > .year:nth-child(odd) > .year-header {
      text-align: left;
      position: absolute;
      left: -40px;
      top: 64px;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg); }
  .content > .year:nth-child(even) {
    text-align: right;
    padding-right: 96px; }
    .content > .year:nth-child(even) > .year-header {
      text-align: right;
      position: absolute;
      right: -40px;
      top: 64px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); }

table td {
  padding-left: 16px;
  padding-right: 16px; }

.syntaxhighlighter, code {
  font-size: 15px; }