// colors
@txt: #333333;
@links: #000;
@links_hover: black;
@highlight_bg: yellow;
@highlight_txt: black;
@background: #FCFCFC;
@subtitles: #11425e;

// dimensions
@layout_width: 650px;
@push: 20px;
@margins: 20px;

html {
  background: #eaeaea;
}
body {
  /* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
  font: 16px/22px Helmet, Freesans, sans-serif;
  width: @layout_width;
  margin: 0 auto;
  background: @background;
  padding: 10px 0 0 0;
  border-top: none; border-bottom: none;
}

/* we like off-black for text */
body, select, input, textarea { color: @txt; }

a { color: @links; }
a:hover { color: @links_hover; }

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{ background: @highlight_bg; color: @highlight_txt; text-shadow: none; }
::selection { background: @highlight_bg; color: @highlight_txt; text-shadow: none; } 

ins { background-color: #FDFFC1; color: @txt; text-decoration: none; }
mark { background-color: #FDFFC1; color: @txt; font-style: italic; font-weight: bold; }

.separator {
  width: 100%;
  height: 5px;
  opacity: 0.3;
  background: url(themes/julien/img/dotted.gif) repeat;
}

header {
  margin-top: 7px;
  margin-bottom: 10px;
  padding: 0 @margins;
  .site-name {
    margin: 0 0 0 0;
  }
  h1 a,.site-name a { 
    padding: 0;
    display: block;
    margin: 0px 0 0 0 ; 
    background: url(themes/julien/img/julien-desrosiers-logo.gif) no-repeat -3px top;
    width: 360px;
    height: 47px;
    text-indent: -9999px;
  }
  .description { margin-top: 0; color: lighten(@txt, 42%); }
  a { color: @txt; text-decoration: none; }
  p { margin: 12px 0; }
  nav {
    text-align: right;
    float: right;
    a:hover { 
      background: @highlight_bg;
    }
  }
}

body.blog nav .blog,
body.about nav .about,
body.contact nav .contact { 
  background: @highlight_bg;
  &:hover {
    color: @highlight_txt;
  }
}

.main {
  padding: 0 @margins;

  h1 { font-size: 18px; margin: 24px 0 19px 0; }
  h2 { 
    font-size: 18px; 
    font-weight: normal;
    margin: 24px 0 10px 0; 
    a { text-decoration: none; }
    color: @subtitles; 
  }
  h3 { font-size: 17px; margin: 24px 0 17px 0; }
  h3.date { 
    font-size: 15px; 
    font-weight: normal; 
    margin: 12px 0 18px 0; 
    color: lighten(@txt, 40%);
  }
  h4 { font-size: 16px; margin: 23px 0 16px 0; }
  h5 { font-size: 15px; margin: 22px 0 15px 0; }
  h6 { font-size: 14px; margin: 22px 0 14px 0; }

  p { 
    margin: 13px 0; 
    line-height: 24px;
  }

  ul, ol {
    margin-left: @push;
  }
  ul { list-style: disc; }

  dl dd { 
    margin-left: @push;
    margin-bottom: 5px;
  }

  pre, code {
    color: #000;  
    background: #eee; 
    font-weight: normal;
    font-family: 'Bitstream Vera Sans Mono', Courier, monospace;
    font-size: 15px;
  }
  pre {
    margin: 12px 0; 
    // padding: 7px 10px; 
    overflow-x: auto;
    border: 1px solid #aaa;
  }
  p > code {
    padding: 1px 3px;
    margin: 0 1px;
  }

  p.comments {
    color: lighten(@txt, 20%);
  }

  img.full-width {
    width: 100%;
  }

  .post {
    border-top: 1px dotted #333;
    margin-bottom: 39px;
    &:first-child {
      border-top: none;
    }
  }

  .post-title {
    font-size: 22px; 
    line-height: 32px;
    font-weight: bold;
    margin: 24px 0 10px 0; 
    a { color: @subtitles; text-decoration: none; }
    color: @subtitles; 
  }

  #disqus_thread {
    border-top: 1px dotted #aaa;
    padding-top: 10px;
    margin-top: 20px;
  }

}

.pagination {
  text-align: center;
  margin-left: 0 !important;
  padding: 10px 0 10px 0;
  border-top: 1px dotted #777;
  li { 
    display: inline;
    a, span {
      padding: 2px 3px;
      min-width: 19px;
      display: inline-block;
      background: #333;
    }
    a {
      color: #ccc;
      &:hover {
        color: @highlight_txt;
        background: @highlight_bg;
      }
    }
    span {
      color: white;
      background: #ccc;
    }
  }
}

footer {
  font-size: 14px;
  padding: @margins;
  text-align: center;
  color: lighten(@txt, 30%);
  a { color: desaturate(lighten(@links, 30%), 30%); }
}

.pagination ~ footer {
  margin-top: 0;
}