/* RESET - http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } 
/* Bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
/* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
textarea { overflow: auto; }
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; border: 1px solid @border_main; padding: 10px; margin-bottom: 20px; } 
/* Normalize monospace sizing: en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, @sans; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { font-size:50%; vertical-align: super; }
sub { font-size:50%; vertical-align: sub; }

@import 'mixins';

@page_width: 540px;
@content_width: 480px;
@menu_height: 30px;
@secondary_menu_height: 58px;
@footer_height: 40px;

@gutter: 8px;
@modulo: 6px;
@white: #ffffff;
@black: #000000;
@red: #C0171D;
@grey-d: #D9D9D9;
@grey-f: #F5F5F5;

/* DEFAULTS */
html {
  font-size: 62.5%; // Reset font size to 10px for easy calculation
  height: 100%;
}

body  {
  padding: 0;
  margin: 0;
  font-size: 1.4em; // 14 px
  line-height: 1.618; // golden ratio
  color: @black;
  font-family: "NovelPro-Light";
  -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  position: relative;
  background: #fff;
  word-wrap:break-word;
  height: 100%;

  font-feature-settings: "onum", "ss01", "ss03", "liga", "kern";
  -moz-font-feature-settings:  "onum", "liga", "ss01", "ss03";
  -ms-font-feature-settings:  "onum", "ss01", "ss03", "liga", "kern";
  -webkit-font-feature-settings:  "onum", "ss01", "ss03", "liga", "kern";
  -o-font-feature-settings:  "onum", "ss01", "ss03", "liga", "kern";
  text-rendering: optimizeLegibility;
}

.smallcaps{
  font-feature-settings: "smcp", "onum", "ss01", "ss03", "liga", "kern";
  -moz-font-feature-settings: "smcp", "onum", "liga", "ss01", "ss03";
  -ms-font-feature-settings: "smcp", "onum", "ss01", "ss03", "liga", "kern";
  -webkit-font-feature-settings: "smcp", "onum", "ss01", "ss03", "liga", "kern";
  -o-font-feature-settings: "smcp", "onum", "ss01", "ss03", "liga", "kern";
  text-rendering: optimizeLegibility;
  text-transform: lowercase;
}

.no-smallcaps{
  font-feature-settings: "onum", "ss01", "ss03", "liga", "kern";
  -moz-font-feature-settings:  "onum", "liga", "ss01", "ss03";
  -ms-font-feature-settings:  "onum", "ss01", "ss03", "liga", "kern";
  -webkit-font-feature-settings:  "onum", "ss01", "ss03", "liga", "kern";
  -o-font-feature-settings:  "onum", "ss01", "ss03", "liga", "kern";
  text-rendering: optimizeLegibility;
}

strong {
  font-weight: normal;
  font-family: 'NovelPro-SemiBold';
}

em {
  font-style: normal;
  font-family: 'NovelPro-It';
}

.bold{
  
}

::selection, ::-moz-selection  {
  background: @color_links;
  color: #fff;
}

img  { vertical-align: bottom; max-width: 100%; }
hr { background-color: @border_main; border:0; height: 1px; margin-bottom: 1.618em; }

/* Hyperlinks */

a {
  color: @black;
  text-decoration:none;

  &:hover {
    color: @red;
  }

  &.to-anchor{
    display: inline-block;
    border-bottom: 1px solid transparent;
    
  }

  &.button{
    color: @red;
    font-family: 'NovelSansPro-Regular';
    font-size: 1.4rem;
    .smallcaps();

    .fa{
      font-size: 1.4rem;
    }
  }

  &.active{
    border-bottom: 1px solid @red;
  }
  &.read-more{
    font-family: 'NovelSansPro-Regular';
    font-size: 1.2rem;
    line-height: 1.618em; 
    .smallcaps;
    text-align: center;
    display: block;
  }
}

/* Typography */
/*
  All typography (and layout) based on a modular scale using 12 & 14 px values scaled in accordance the golden ratio (1.618)
  http://modularscale.com/scale/?px1=14&px2=12&ra1=1.618&ra2=0
  Remember to keep margins consistent and try to avoid margin-top. If everything has an appropriate margin-bottom we don't need one and vertical rhythm will be kept consistent
*/

h1, h2, h3, h4, h5, h6  {
  margin: 0 0 .618em;
  //font-family: 'NovelPro-Bold';
  font-weight: normal;
  color: darken(@color_body, 100%);
  a {
    text-decoration: none;
    color: darken(@color_body, 100%);
    &:hover {
    }
  }
}
h1  {
  font-size: 1.618em;
  line-height: 1.387em;
}
h2  {
  font-size: 1.387em;
  line-height: 1.387em;
}
h3  {
  font-size: 1.15em;
}
h4  {
  font-size: 1em;
}
h5  {
  font-size: 1em;
}
h6  {
  font-size: 0.857em;
}
p {
  /*-webkit-hyphens : auto;
  -webkit-hyphenate-character : "\2010";
  -webkit-hyphenate-limit-after : 1;
  -webkit-hyphenate-limit-before : 3;
  -moz-hyphens : manual;
  orphans : 3;
  widows : 3;*/

}
// Set up consistent margins for all relevent block level elements
ul,ol,dl,
p,
table,
form,
pre,
hr {
  margin: 0 0 1.618em 0;
}

ol, ul  {
  margin: 0;
}

dl {
  dt {
    font-weight: bold;
  }
  dd {
    margin-bottom:1.618em;
  }
}

blockquote  {
  margin: 0;
  padding: @modulo*3 @modulo*4;
  background: @grey-f;
  font-style: none;
  font-family: 'NovelSansPro-Regular', sans-serif;
  font-size: 1.2rem;
}

/* LAYOUT */
#head{
  width: @page_width;
  margin: @gutter auto;
  text-align: center;
}

#the-red-line{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 6px;
  background-color: @red;
  border-bottom: 1px solid @white;
  z-index: 99999;
}

#wrapper  {
  margin: 0;
  padding: 0;
  width: 100%;
  // height: 100%;
  position:relative;
}

#footer{
  a{
    .smallcaps();
  }
}

#the-end{
  a{
    padding: 0;
    .smallcaps();
  }
}

.anchor{
  display: block;
  position: relative;
  top: -@menu_height - @secondary_menu_height - 24px;
  visibility: hidden;

  &.below{
    top: -@menu_height - @secondary_menu_height - 70px;
  }
}

.mode, .modes{
  font-family: 'NovelMonoPro-Bold', sans-serif;
  .smallcaps();
  a {
    text-decoration: none !important;
  }
}

.ellipsis{
  font-size: 1.0rem;
  text-align: center;
}

.content p a{
  text-decoration: underline;
}

section{
  width: @page_width;
  margin: 0 auto;
  position: relative;

  &.below{ // footer sections
    h1, h2, h3 {
      font-family: "NovelSansPro-Semibold", sans-serif;
      .smallcaps;
    }
    .content{
      font-family: "NovelSansPro-Regular", sans-serif;
      font-size: 1.1rem;
      p{
        margin: 0 0 10px 0;
      }


    }
  }

  &.introduction{
    margin-bottom: 20px;
    .content{
      //font-size: 1.6rem;
    }
    .middot{
      margin: 10px 0;
    }
  }

  &.post-thumbnail, &.post{
    .published_at{
      .smallcaps();
      text-align: center;

    }
    >a:hover{
      color: @black;
    }
    .content a{
      text-decoration: underline;
    }
    .tags{
      font-family: "NovelSansPro-Regular", sans-serif;
      text-align: center;
      .tag{
         .smallcaps();
      }
    }

    img{
      box-shadow: 0 0 0px 5px @grey-d;
      margin: @modulo*4 0;
    }

    iframe{
      margin: @modulo*4 0;
    }
    ul{
      margin: @modulo*2;
    }

    
  }



  h1, h2, h3 {
    font-family: "NovelPro-SemiBoldIt", serif;
    margin: @modulo*4 @modulo*5 @modulo*3 @modulo*5;
    text-align: center;
    color: @red;
    font-size: 2.2rem;
  }

  h2 {
    color: @black;
    margin-top: @modulo*5;
  }

  h3, h4, h5, h6{
     font-family: "NovelSansPro-Regular", sans-serif;
     font-size: 1.4rem;
     line-height: 1.618em;
     

    .bold{
      font-family: "NovelSansPro-Semibold", sans-serif;
     
    }
  }

  h3 {
    color: @red;
    text-align: center;
    margin: 0 30px;
    /*border-bottom: 1px solid @grey-d;*/
    .smallcaps();
  }

  h4{
    font-size: 1.2rem;
    color: @black;
    margin: 0 40px;

    
  }

  h5{
    color: @red;

  }

  h6{
    text-align: center;
    .smallcaps();
  }
  .part{
    //margin-top: 20px;

    h5, h6{
      
      .smallcaps();
      text-align: center;
    }
  }

  img.floating{
    width: 50%;
    float: left;
    margin-right:10px;
  }


  .exagon{
    position: relative;
    height: 185px;
    font-family: 'NovelSansPro-Light', sans-serif;
    font-size: 2.4rem;
    line-height: 38px;

    color: @red;
    .smallcaps();

    .first-name{
      position:absolute;
      top:50%;
      width: 50%;
      right: 50%;
      margin-right: 82px;
      text-align: right;
      margin-top: -16px;
    } 
    .last-name{
      position:absolute;
      top: 50%;
      
      left: 50%;
      margin-left: 82px;
      margin-top: -16px;
    }
    img{
      position:absolute;
      height: 185px;
      width: 164px;
      left: 50%;
      margin-left: -82px;
      
    }    
  }

  .published_at{
    font-family: "NovelSansPro-Regular", sans-serif;
    color: @red;
    .smallcaps();
  }

  .middot{
    text-align: center;
    color: @red;
    font-size: 4.0rem;
    line-height: 1em;

  }

  .content{
    margin: 0 auto;
    width: @content_width;

    p{
      margin: @modulo*2 0;
    }

    .anchor{
      top: -@menu_height - @secondary_menu_height - 12px;
    }

   
  }

  #fetched_contributions_list_div {
    width: 100%;
    font-size: 0.85em;

    .author, .title, .lang {
      display: inline-block;
    }
    .lang {
      font-family: "NovelMonoPro-Regular";
    }
    .title {
      text-align: left;
      font-family: "NovelSansPro-Regular";
      .smallcaps();
      font-weight: normal;
      padding-right: 5px;
    }
/*    td.title {
      text-align: left;
      font-size: 0.8em;
      .smallcaps();
      font-family: 'NovelSansPro-Regular';     
    }*/
    .author {
      text-align: right;
      font-family: "NovelSansPro-Light";
      color: @red;
      text-decoration: underline;
      font-weight: normal;
      padding-right: 12px;
      &.opak {
        opacity: 0;
      }
    }
/*    td.author {
      text-align: right;
      font-size: 0.8em;
    }*/
  }

  .tweet{
    .author{
      font-family: "NovelSansPro-SemiBold", sans-serif;
      .smallcaps();
    }

    
  }

  #tweets{
    height: 100px;
    overflow: hidden
  }
  .mode{
    text-align: center;
  }

  
}

.menu, .header-blog-menu{
  width:100%;
  height: @menu_height;
  background: @white;//#fafafa;
  

  &.scroll-to-fixed-fixed{
    background: #fafafa;
    ul{
      width: 100%;
    }
  }
  ul{
    list-style-type: none;
    width: @page_width;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    height: @menu_height;
      border-bottom: 1px solid @grey-d;
    
    li{
      display: inline-block;
      margin: 0 11px;
      height: @menu_height - 1px;
      font-family: 'NovelSansPro-Regular';
      font-size: 1.30rem;
      text-align: center;
      line-height: @menu_height - 1px;
      color: @black;

      .smallcaps();
      &:hover{
        color: @red;
      }

      a{
         .dualtransition(color ease-in-out .35s, border-color ease-in-out .35s);
 
        border-bottom: 3px solid transparent;
        &.active{
          border-bottom: 3px solid @red;
        }
      }
    }
  }
}

.summary{
  position: absolute;
  margin-left: -200px;

  width: 200px;

  ul{
    margin-top: 92px;
    list-style-type: none;
    font-family: 'NovelSansPro-Regular';
    .smallcaps();
    text-align: right;
  }
  //.transition(margin-top, linear, .35s);
  &.stickit {
    //margin-top: 12px;
    margin-left: -200px;
    position: fixed;
    top: 0;
  }

  &.stickit-end {
    bottom: 0px;
    //position: absolute;
    //right: 0;
  }

  a.to-anchor{
    border-width: 0;
    padding: 0 @modulo*2;

    &.active{
      background: @red;
      color: @white;

    }
  }
}

.header-blog-menu{
  position: fixed;
  top: 6px;
  z-index: 1002;
}


#contacts{
  float:left;
  right:0px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 1px;
  text-align: center;

  .left, .right{
    position: absolute;
    text-align: center;
    width: 80px;
    margin-left: -40px;
    left: 45%;
    .smallcaps();
    color: @red;
    height: @secondary_menu_height;
  }
  .left{
    left: 55%;
  }
  .separator{
    position: absolute;
    text-align: center;
    left: 50%;
    color: @grey-d;
    height: @secondary_menu_height;
  }

}

#secondary-menu, #blog-secondary-menu{
  width: 100%;
  height: @secondary_menu_height;
  font-family: "NovelSansPro-Light", sans-serif;
  font-size: 1.4rem;
  background-color: @white;
  line-height: @secondary_menu_height;
  
  &.scroll-to-fixed-fixed{
    >.inner{
      border-color: @grey-d;
    }

    >.shadow{
      top: @secondary_menu_height + 1;
    }
  }

  >.inner{
    width: @page_width;
    height: @secondary_menu_height;
    border-bottom: 1px solid transparent;
    .transition(border-bottom, ease-in-out, .35s);
  }

  .access {
    position:absolute;
    
    &.thetext {
      left:0px;
      text-align: right;  
    }
    &.thecrossings {
      left:50%;
      text-align: left;
    }

    top:0;
    width: 50%;
    height: @secondary_menu_height;
    text-align: center;
      
    a {
      font-size: 1.1em !important;
      margin-left: 35px;
      margin-right: 35px;
    }

/*      &:first-child {
        color: @red;
        font-family: 'NovelSansPro-Regular';
        font-size: 1em;
        line-height: 39px;
        .smallcaps();
      }*/
      
/*      .sep {
        color: @grey-d;
        margin-left: 7px;
        margin-right: 7px;
      }*/
  }

  #logo{
    position:absolute;
    left: 50%;
    top: 0px; //handcrafted
    margin-left: -25px;
    width: 50px;
    height: @secondary_menu_height;
    img{
      vertical-align: middle;
    }
    a.active{
      border-width: 0;
    }
  }

  a.button, a.button .fa{
    font-size: 1.8rem;
    .transition(color ease-in-out .35s);
  
    &:hover{
      color: @black;
    }
  }
}

#blog-secondary-menu{
  z-index: 1001;
  top: 37px;
  position: fixed;
  width: 100%;

  >.inner{
    border-color: @grey-d;
  }
}

.fixed-menu{
  &.scroll-to-fixed-fixed{
    //background-color: @white;

    >.shadow{
      display:block;
    }
  }
  
  >.inner{
    margin: 0 auto;
    position: relative;
    background-color: @white;
    z-index: 1;
    .transition(top, ease-in-out, .35s);
  }

  >.shadow{
    position: absolute;
    display:none;
    top: @secondary_menu_height - 10;
    left: 50%;
    margin-left: -@page_width/2;
    height: 10px;
    width: @page_width;
    background: url('/images/shadow.png');
    z-index:0;
    .transition(top, ease-in-out, .35s);
  }

  .fa{
    font-size: 1.2rem;
  }

 
}

@blog_menu_height: 30px;
#blog-menu, #blog-categories-menu{
  >.inner{
    width: @page_width;
    height: @blog_menu_height;
    border-bottom: 1px solid transparent;
    background: transparent;
    .transition(border-color, ease-in-out, .35s);
    font-family: 'NovelSansPro-Light', sans-serif;
    text-align: center;
    
    a{
      display: inline-block;
      margin: 0 10px;
      line-height: @blog_menu_height;
      .smallcaps();
    }
  }
  &.scroll-to-fixed-fixed{
    >.inner{
      border-color: @grey-d;
    }

    >.shadow{
      top: @blog_menu_height + 1;
    }
  }
}


#blog-categories-menu{
  width: 100%;
  background: @white;
  z-index:1003;
  >.inner a{
    line-height: @blog_menu_height;
    height:@blog_menu_height - 1px;
    &.active{
      border-width: 3px;
    }
  }
}

.site-header  {
  margin: 0 0 3.631em;
  padding: 2.618em 0;
  text-align: center;
  border-bottom: 5px solid @border_main;
  .transition;
  img  {
    margin: 0 0 1.618em;
  }
  h1  {
    margin: 0;
    font-size: 1.2em;
    font-weight: 900;
    text-transform: uppercase;
  }
  h2  {
    font-size: .8em;
    text-transform: uppercase;
    color: lighten(@color_body, 30%);
  }
}

.articles  {
  margin: 0 auto;
  width: 100%;
  max-width: 740px;
}

article  {
  margin: 0 0 3.631em;
  header  {
    span  {
      display: block;
      margin: 0 0 1.387em;
      font-size: .8em;
      font-family: @sans;
      font-weight: 600;
      text-transform: uppercase;
      color: lighten(@color_body, 30%);
    }
  }
}

.home-template  {
  article  {
    p:after  {
      content: '…';
    }
    .read-more  {
      &:after  {
        .iconafter;
        content: "\f0da";
        width: auto;
        vertical-align: middle;
        font-size: .9em;
      }
    }
  }
}

nav  {
  .clearfix;
  margin: 0 1.618em 3.631em;
  a  {
    text-transform: uppercase;
    font-family: @sans;
    font-size: .8em;
    font-weight: 900;
    color: lighten(@color_body, 30%);
    &:hover  {
      color: darken(@color_body, 100%);
    }
  }
  .prev  {
    float: left;
    &:before  {
      .iconbefore;
      content: "\f053";
      font-size: 1.4em;
      line-height: .4;
    }
  }
  .next  {
    float: right;
    &:after  {
      .iconafter;
      content: "\f054";
      font-size: 1.4em;
      line-height: .4;
    }
  }
}

aside  {
  margin: 0 0 3.631em;
  padding: 4.236em 2.618em 1em;
  border-top: 5px solid @border_main;
  text-align: center;
  font-size: .9em;
  img  {
    margin: 0 0 1.618em;
    max-width: 80px;
    .border_radius(300px);
  }
  p  {
    margin: 0 auto;
    width: 75%;
  }
}

footer  {
  margin: 0;
  padding: 0;
  height: @footer_height;
  width: 100%;
  color: @black;
  clear: both;
  text-align: center;
  font-family: 'NovelSansPro-Regular';
  line-height:1.618em * 2;
  font-size: 1.2rem;


  &.scroll-to-fixed-fixed {
    >.inner{
      border-bottom: 1px solid @grey-d;
    }
    >.shadow{
      top: @footer_height + 1;
    }
  }

  &.active >.inner{
    top: 0px;
  }

  >.inner{
    border-top: 1px solid @grey-d;
    border-bottom: 1px solid transparent;
    width: @page_width;
    height: @footer_height;
    margin: 0 auto;
    top: 40px;
    .transition(border-color, ease-in-out, .35s);
  }

  >.shadow{
    top: @footer_height - 10;
  }

  a{
    display: inline;
    padding: 0 20px;
    
    &.to-anchor{
      height: @footer_height;
      &.active{
        //border-bottom: 1px solid @grey-d;
      }
    }
  }
}

/* SINLGE ARTICLE */
.single-header  {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 0 3.631em;
  padding: 1em 2.618em;
  color: #fff;
  background: @color_links;
  .opacity(0.97);
  .transition;
  h1, a  {
    color: #fff;
  }
  h1  {
    float: left;
    margin: 0;
    font-size: 1em;
    line-height: 2.2;
  }
  img  {
    float: left;
    margin: 0 1.618em 0 0;
    max-height: 35px;
  }
  nav  {
    float: right;
    margin: .5em 0 0;
    a  {
      span  {
        display: none;
      }
      &:before, &:after  {
        margin: 0;
        font-size: 1.618em;
      }
    }
  }
}

.single-article  {
  margin: 6.854em auto 6.854em;
  width: 100%;
  max-width: 740px;
  header  {
    h1  {
      margin: 0 0 1.2em;
    }
  }
  section  {
    > p:first-child  {
      font-size: 1.1em;
      font-weight: 600;
    }
  }
}

/* RESPOND */

@media only screen and (min-width: 769px)  {

  body  {
    font-size: 1.4em; // 14 px
    line-height: 2.4rem; //
  }
  
  h1  {
    font-size: 2.244em;
    line-height: 1.387em;
  }
  h2  {
    font-size: 1.618em;
    line-height: 1.387em;
  }
  h3  {
    font-size: 1.387em;
  }
  h4  {
    font-size: 1em;
  }
  h5  {
    font-size: 1em;
  }
  h6  {
    font-size: 0.857em;
  }
  
  .site-header  {
    margin: 0 0 5.874em;
    padding: 5.874em 0;
  }
  
  article  {
    margin: 0 0 5.874em;
  }
  
  aside  {
    padding-left: 20%;
    padding-right: 20%;
  }
  
  .single-article  {
    margin: 9.505em auto 9.505em;
  }
  
}

/* ANIMATE */
@-webkit-keyframes up {
    0% { top: 0; }
    10% { top: 5px; }
    100% { top: -100px; }
}

@-webkit-keyframes down {
    0% { top: -100px; }
    90% { top: 5px; }
    100% { top: 0; }
}

.single-header.hide  {
  -webkit-animation: up 1s;
  -webkit-animation-fill-mode: forwards;
}
.single-header.show  {
  -webkit-animation: down 1s;
   -webkit-animation-fill-mode: forwards;
}


#disqus_thread{
  width: @content_width;
  margin:0 auto;

  h4{
    font-family: 'NovelSansPro-Regular', sans-serif;
    .smallcaps();
  }
}


.nav-to-previous, .nav-to-next{
  position: fixed;
  top:0px;
  height:100%;
  width:30px;
  z-index: 1100;
  overflow: hidden;

  a{
    position:absolute;
    top:274px;
    margin-top: -50px;
    display:block;
    width:30px;
    heigth: 30px;
    line-height: 30px;
    font-size: 1.8rem;

    label{
      font-family: 'NovelSansPro-Regular';
      font-size: 1.2rem;
      .smallcaps();
    }
  }
}

.nav-to-previous{
  left:50%;
  margin-left: -@page_width/2;
  a{
    text-align: left;
  }
}

.nav-to-next{
  left:50%;
  margin-left: @page_width/2-30px;
  a{
    text-align: right;
  }
}

#timelinefullscreentogglediv {
  text-align: center;
  width: 100%;  
}
#timelinefullscreentoggle{
  cursor: pointer;
  
  
  color: @red;
  font-family: 'NovelSansPro-Regular';
  font-size: 1.4rem;
  .smallcaps();
  &:hover {
    color:@black;
  }
}

#timeline {
  border-width:0px;
  height: 600px;
  padding:0;
  border-radius: 0px;

  .vco-slider .slider-item .content .content-container .text .container {

    p {
      font-family: 'NovelPro-Light' !important;
    }

    h2.date{
      font-family: "NovelSansPro-Regular", sans-serif !important;
      color: @red;
      .smallcaps();
    }

    h3 {
      text-align: center;
      font-family: 'NovelPro-It', sans-serif;
      font-size: 1.6rem;
      .no-smallcaps();
    }

  }

  .vco-navigation .timenav .content .flag h3 {
    font-family: "NovelSansPro-Regular", sans-serif !important;
  }

  .vco-storyjs .vco-feature p {
    font-size: 1.4rem;
    line-height: 2.0rem;
    color: @black;
    text-align: justify;
  }
  
  .vco-timeline .vco-navigation .timenav .time .time-interval >div {
    font-family: 'NovelSansPro-Regular' !important;
    font-size: 1.4rem;
    padding-top: @modulo*2;
    .smallcaps();

  }

  .vco-skinny.vco-notouch .vco-slider .nav-previous:hover .nav-container .date,
  .vco-skinny.vco-notouch .vco-slider .nav-next:hover .nav-container .date,
  .vco-skinny.vco-notouch .vco-slider .nav-previous:hover .nav-container .title,
  .vco-skinny.vco-notouch .vco-slider .nav-next:hover .nav-container .title {

  }

  .vco-slider .nav-next,
  .vco-slider .nav-previous {
    background-color: transparent;
    border-radius: 0px;
   /* .transition(background-color, ease-out, .35s);*/

    .nav-container .icon {
      background: transparent;
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #000;
      font-size: 2rem;
      &:before {
      content: "\f105";
      }
      .opacity(1);
    }

    .nav-container {
      .date, .title {
        font-family: 'NovelSansPro-Regular', sans-serif;
        text-align: center;
        font-weight: normal;
        .smallcaps();
        padding-right: 8px;
      }
      .date{
        color: @red;
      }
      .title{
        color: @black;
      }
    }

    &:hover{
      background-color: fade(@grey-f, 93%);

    }

  }

  .vco-slider .nav-previous .nav-container .icon:before {
      content: "\f104";
  }
}