/**/

.border-radius (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.border-radius-bottom (@radius) {
  -moz-border-radius-bottomright : @radius;
  -moz-border-radius-bottomleft : @radius;
  -webkit-border-bottom-left-radius : @radius;
  -webkit-border-bottom-right-radius : @radius;
  border-bottom-left-radius : @radius;
  border-bottom-right-radius : @radius;
}
.vertical-gradient (@color_a, @color_b) {
  background: @color_a;
  background: -moz-linear-gradient(top, @color_a 0%, @color_b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color_a), color-stop(100%,@color_b));
  background: -webkit-linear-gradient(top, @color_a 0%,@color_b 100%);
  background: -o-linear-gradient(top, @color_a 0%,@color_b 100%);
  background: -ms-linear-gradient(top, @color_a 0%,@color_b 100%);
  background: linear-gradient(top, @color_a 0%,@color_b 100%);
}
.horizontal-gradient (@color_a, @color_b) {
  background: @color_a;
  background: -moz-linear-gradient(left, @color_a 0%, @color_b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,@color_a), color-stop(100%,@color_b));
  background: -webkit-linear-gradient(left, @color_a 0%,@color_b 100%);
  background: -o-linear-gradient(left, @color_a 0%,@color_b 100%);
  background: -ms-linear-gradient(left, @color_a 0%,@color_b 100%);
  background: linear-gradient(left, @color_a 0%,@color_b 100%);
}
.clearfix () {
  &:after {
    display:block;
    clear:both; content:".";
    visibility:hidden;
    font-size:1px;
    height:0;
  }
}
.tuck () {
  position: absolute;
  right: 9999em;
  left: auto; 
}
.list-reset () {
  padding : 0;
  margin : 0;
  list-style : none;
}


/**/

body {
  font-size : 14px;
  line-height : 1.3;
  font-family: sans-serif;
  margin : 0;
  padding : 0;
  background : #fff;
  color : #444;
  border-top : 3px solid #000;
}
.print { display : none; }
.aux { .tuck; }


h1 {
  font-size: 2.86em;
  font-weight: normal;
  line-height: 1;
  margin: 0;
}

a {
  color : #33a;
  text-decoration : none;
  
  &:hover,
  &:target,
  &:focus {
    color : #383;
    text-decoration : underline;
  }

  &[rel=tag]:before {
    content: '#';
  }
  
}

hr {
  border : 0;
  height : 0;
  border-top : 1px solid #ddd;
}


table {
  border-collapse : collapse;
  border : 1px solid #aaa;
  margin : .7em 0;

  td, th {
    padding : .2em .4em;
    border : 1px solid #aaa;
    text-align : left;
  }
  
  td[align], th[align] {
    text-align : attr(align);
  }
  
}

code {
  background : #F8F8FC;
  font-size : 13px;
  font-family: "andale mono", "lucida console", monospace;
}
pre > code {
  display : block;
  padding : 12px;
  
  pre > code span {
    color : #669;
    font-style : normal;
  }

  /* syntax highlighting */
  .reserved { color : #00B; }
  .number, .string { color : #800; }
  .property { color : #292; }
  .comment { color : #aac; }
  .common, .value { color : #369; }
  .constructor { color : #088; text-decoration : underline; }

  /* indicate code type */
  &:before {
    text-align : right;
    opacity : .15;
    color : #004;
    display : block;
    float : right;
    margin-bottom : -.92em;
    font-size: .92em;
    height : 1em;
  }
  &.js:before { content : 'Javascript'; }
  &.css:before { content : 'CSS'; }
  &.html:before { content : 'HTML'; }
  &.python:before { content : 'Python'; }
  &.php:before { content : 'PHP'; }
  &.sql:before { content : 'SQL'; }
  &.vb:before { content : 'VB'; }
  &.bash:before { content : 'Bash'; }
  
}



#top {
  margin: 0 auto;
  width : 42em;
  position : relative;
}

#main {
  padding : 0;
}


header {
  
  padding : 0;
  margin-bottom : 4em;
  margin-top : 0;
  
  h1 {
    font-size : 1em;
    line-height : 1.2;
    text-transform : uppercase;
    padding: 0;
    margin: 0;
    width: 7.6em;
    .border-radius-bottom(4px);
    .vertical-gradient( #000, #333 );
    text-align: center;

    a {
      display : block;
      color : #fff;
      font-size: .84em;
      padding: 2.4em 0 1em;
      &:hover {
        color : #fff;
      }
    }

  }
  
}

#pages {
  position : absolute;
  top : 0;
  left : 7.6em;
  width : 34.4em;
  line-height : 1.2;
  ul { .list-reset; }
  li {
    float : left;
    width: 7.6em;
    margin: 0 0 0 1em;
    a {
      display : block;
      padding: 2.4em 0 .9em 0;
      font-size: .84em;
      border-bottom : .1em solid #ccc;
      color : #aaa;
      &:hover {
        padding-bottom: .8em;
        border-bottom : .2em solid #777;
        text-decoration : none;
        color : #000;
      }
    }
    strong {
      font-weight: inherit;
    }
    &.current a {
      padding-bottom: .8em;
      border-bottom : .2em solid #777;
      text-decoration : none;
      color : #000;
    }
  }
  h1 { .tuck; }
}



p.date { .tuck; }

article {
  margin-bottom : 5em;
  position : relative;
  
  .clearfix;
  
  .post-edit-link {
    display : none;
  }
  &:hover .post-edit-link {
    display : inline-block;
    background : yellow;
    border : 1px solid tan;
    padding : 0 4px;
    position : absolute;
    top : .5em;
    right : 0;
  }
  
  img, iframe {
    float : right;
    margin : 0 0 .8em 1em;
    &[align=left] {
      float : left;
      margin : 0 1em .8em 0;
    }
  }
  h1 {
    letter-spacing: -0.04em;
    margin-bottom : .4em;
    text-transform: uppercase;
    font-weight: 100;
  }
  h1 a {
    color : #444;
  }
  h2, h3 {
    font-weight : normal;
  }
  
  small {
    font-size : .84em;
  }
  .meta {
    margin-top : 1.2em;
    float : left;
    clear : left;

    i, b { .tuck; }
    a { color : #888; }
    .time {
      border-top : 1px solid #ccc;
      padding-top : 1em;
      display : block;
    }
    .tags {
      display : block;
      clear : left;
      padding-top : 4px;
      a { margin-right : .4em; }
    }
  }

  .footnotes {
    hr {
      margin : 4em 0 0 0;
      width: 7.6em;
      border-color : #ccc;
    }
    ol {
      margin-left: 0;
      padding-left: 1.6em;
    }
    li {
      width: 40em;
      font-size : 12px;
    }
    p {
      margin : 0 0 .5em 0;
    }
  }

}


.post-list {
  margin-bottom : 5em;
  
  h1 {
    font-weight: 100;
    margin-bottom: 1em;
    padding-right: 4em;
    text-transform: uppercase;
    a {
      color : #444;
    }
  }
  h2 {
    margin: 0.4em 0;
    clear: left;
    float: left;
    font-size: 1.6em;
    font-weight : normal;
    line-height: 1;
  }
  ul {
    padding: .2em 0 0 0;
    margin: 0 0 3em 0;
    border-top: 1px solid #ccc;
    min-height: 1.6em;
  }
  li {
    list-style: none;
    margin: 0.4em 0 1em 8.6em;
    padding: 0;
    position : relative;
    em {
      color: #aaa;
      float: right;
      font-size: 0.8em;
      font-style: normal;
    }
    h3 {
      font-size : 1.2em;
      font-weight : normal;
      line-height: 1;
      margin : 0;
      a {
        display : block;
        color : black;
        padding-right: 5.6em;
      }
    }
  }
}
body.home .post-list {
  margin-bottom : 9em;
  h2 {
    display : none;
  }
  ul {
    margin: 0;
    padding : 0;
    border : 0;
    min-height : auto;
  }
  li {
    border-top: 1px solid #ccc;
    margin : .4em 0 1em 0;
   padding: .5em 0 0 0;
  }
}



#pager {
  margin-bottom : 5em;
  overflow : hidden;
  text-transform : uppercase;
  font-size : 1.24em;

  a[rel=prev] {
    color : #888;
    float : left;
  }
  a[rel=next] {
    color : #888;
    float : right;
  }
  i { font-style : normal; }  
}



#license {
  margin: 4em 0;
  font-size : .9em;
  line-height : 1.2;
  img {
    opacity: .5;
    float : left;
    margin-right : 1em;
  }
}

#lang {
  background : #eee;
  border : 1px solid #ddd;
  padding : .5em 0;
  margin: 4em 0;
  list-style : none;
  text-align : center;
  font-size : .9em;
  .vertical-gradient(#f8f8f8,#eee);
  .border-radius(4px);
}

#blog-toolbar {
  position : fixed;
  top : 0;
  right : 0;
}