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

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

// mixins
.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @ie_opacity: @opacity * 100;
  filter: ~"alpha(opacity=@{@ie_opacity})";
}

html {
  background: #eaeaea;
  background-image: url(themes/julien/img/struckaxiom_transparent.png), url(themes/julien/img/cardboard.jpg);
  background-attachment: fixed;
}
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: 16px 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 {
  clear: both;
  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: 49px;
    text-indent: -9999px;
  }
  .description { margin-top: 0; color: lighten(@txt, 30%); }
  a { color: @txt; text-decoration: none; }
  p { margin: 12px 0; }
  nav {
    text-align: right;
    float: right;
    a {
      -webkit-transition: background-color 0.2s ease-out;  
      -moz-transition: background-color 0.2s ease-out;  
      -o-transition: background-color 0.2s ease-out;  
      transition: background-color 0.2s ease-out;  
      &:hover {
        background-color: @highlight_bg;
      }
    }
  }
}

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

.main {
  padding: 0 @margins;

  h1 { font-size: 19px; margin: 24px 0 19px 0; }
  h2 { 
    font-size: 19px; 
    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%); }
  #powered { 
    display: block; text-align: right; color: lighten(@txt, 65%); 
    a { 
      color: desaturate(lighten(@links, 65%), 65%); text-decoration: none; 
      &:hover { text-decoration: underline; }
    } 
  }
}

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

// Page-specific styles

// Portfolio 

#portfolio {
  float: left;
  display: block;
  width: 610px;
  clear: both;
  margin: 0; padding: 0;
  & > li {
    display: block;
    float: left;
    width: 300px;
    height: 190px;
    padding-right: 10px;
    padding-bottom: 10px;
    position: relative;
    a {
      display: block;
      img {
        width: 298px;
        height: 188px;
        border: 1px solid #ccc;
      }
    }
    &:hover a img {
      border-color: white;
    }
    &.last {
      padding-right: 0;
    }
    .bg {
      .opacity(0.92);
      background-image: url(themes/julien/img/ricepaper2.jpg);
      width: 300px;
      height: 190px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .description {
      display: none; // will be overriden by script
      position: absolute;
      left: 0;
      top: 0;
      color: #333;
      padding: 10px;
      width: 280px;
      height: 170px;
      cursor: pointer;
      z-index: 2;
      h2 {
        margin: 0 0 5px 0;
        color: #000;
      }
      .idid, ul {
        color: #555;
        margin: 0px;
        font-size: 14px;
      }
      ul { margin-left: 18px; }
    }
  }
}