/*

  Author: Fred Wu
  Contact: ifred@gmail.com

*/

/* ------------------------------
  Base Structure
------------------------------ */

body {
  font-family: 'jaf-bernino-sans', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', Helvetica, Verdana;
  color: #111;
}

.container_12 {
  position: relative;
}

/* ------------------------------
  Base Elements
------------------------------ */

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

pre {
  overflow-x: auto;
  font-size: 15px;
}

p > code {
  background: #fbf9f7;
}

a {
  color: #642;
  text-decoration: none;
}

a:hover {
  color: #975;
  text-decoration: underline;
}

ul li ul,
ul li ol,
ol li ul,
ol li ol {
  margin-bottom: 0;
}

table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
table > thead > tr > th {
  text-align: left;
  font-weight: bold;
  vertical-align: bottom;
  background: #eee;
  border-bottom: 2px solid #ddd;
}
table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
table > tbody + tbody {
  border-top: 2px solid #ddd;
}
table table {
  background-color: #fff;
}

/* ------------------------------
  Header
------------------------------ */

section#header {
  height: 300px;
  background: url('../img/ptn-sky.png') repeat-x bottom;
}

  section#header .container_12 {
    *z-index: 1;
  }

  a#page-top,
  a#page-about {
    position: absolute;
  }

  section#header h1 {
    margin: 0;
    width: 0;
  }

    section#header h1 a {
      position: absolute;
      display: block;
      top: 110px;
      width: 460px;
      height: 81px;
      background: url('../img/txt-hero.png') no-repeat;
      text-indent: -9999px;
    }

    ul#social-icons {
      position: absolute;
      top: 276px;
      left: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      z-index: 1;
    }

      ul#social-icons li {
        float: left;
      }

      ul#social-icons-footer li {
        display: inline-block;
      }

      ul#social-icons li,
      ul#social-icons-footer li {
        margin: 0 5px 0 0;

        *display: block;
        *float: left;
        *padding-right: 2px;
      }

      ul#social-icons li a,
      ul#social-icons-footer li a {
        display: block;
        width: 32px;
        height: 32px;
        background-position: top left;
        background-repeat: none;
        text-indent: -9999px;
      }

      ul#social-icons li.social-linkedin   a { background-image: url('../img/social-icons/32px/linkedin.png'); }
      ul#social-icons li.social-github     a { background-image: url('../img/social-icons/32px/github.png'); }
      ul#social-icons li.social-twitter    a { background-image: url('../img/social-icons/32px/twitter.png'); }
      ul#social-icons li.social-googleplus a { background-image: url('../img/social-icons/32px/googleplus.png'); }
      ul#social-icons li.social-forrst     a { background-image: url('../img/social-icons/32px/forrst.png'); }
      ul#social-icons li.social-tumblr     a { background-image: url('../img/social-icons/32px/tumblr.png'); }
      ul#social-icons li.social-rss        a { background-image: url('../img/social-icons/32px/rss.png'); }
      ul#social-icons li.social-email      a { background-image: url('../img/social-icons/32px/email.png'); }

  #character {
    margin: 0;
    width: 0;
  }

    #character {
      position: absolute;
      display: block;
      top: 43px;
      width: 150px;
      height: 258px;
      background: url('../img/ele-fredwu.png') no-repeat;
      text-indent: -9999px;
      z-index: 3;
    }

    #avatar {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 175px;
      right: 50px;
      background: #333;
      z-index: 4;
    }

      #avatar-inner {
        position: absolute;
        width: 100px;
        height: 100px;
        background: url('../img/img-avatar-100px.jpg') no-repeat;
        z-index: 5;
      }

    #about-me-link {
      position: absolute;
      margin-left: 15px;
      margin-top: 40px;
      font-weight: bold;
      color: #fff;
      z-index: 6;
    }

  #grass {
    position: relative;
    top: 271px;
    height: 29px;
    background: url('../img/ptn-grass.jpg') repeat-x;
  }

/* ------------------------------
  Search
------------------------------ */

section#search {
  position: relative;
  padding-top: 50px;
  background: url('../img/ptn-soil.jpg') repeat-x 0 -1px;
  z-index: 2;
}

  section#search .container_12 {
    padding-top: 35px;
    margin-bottom: 40px;
    background: url('../img/ele-shadow-search_bar.png') no-repeat bottom;
  }

  section#search form label {
    position: absolute;
    top: 15px;
    display: block;
    width: 426px;
    height: 69px;
    background: url('../img/txt-fred_wus_blog.png') no-repeat;
    text-indent: -9999px;
  }

  section#search form input {
    top: -5px;
    color: #321;
    font-size: 20px;
    width: 170px;
    padding: 10px 10px 10px 40px;
    border: 0;
    background: url('../img/ele-search_bar.png') no-repeat top;
  }

/* ------------------------------
  Content
------------------------------ */

section#content {
  padding-bottom: 100px;
  background: url('../img/ptn-gradient-footer-top.png') repeat-x bottom;
}

section.post {
  display: inline;
  float: left;
  margin-bottom: 50px;
  background: url('../img/ele-shadow-full.png') no-repeat 10px 15px;
}

  article.grid_9 p,
  article.grid_9 ul,
  article.grid_9 ol {
    font-size: 18px;
    font-family: 'freight-text-pro', Georgia, Cambria, 'Lucida Sans', 'Helvetica Neue', Helvetica, Verdana;
  }

  .post-more {
    font-weight: bold;
  }

  .post-title-link {
    display: inline-block;
    margin-bottom: -6px;
    width: 32px;
    height: 32px;
    background: url('../img/ico-link.png') no-repeat;
  }

  .post-image-set {
    width: 500px;
    padding: 10px;
    background: #fbf9f7;
  }

  .post-image {
    margin-bottom: 20px;
    padding: 10px 0 0 30px;
    background: url('../img/ele-shadow-image.png') no-repeat bottom;
  }

    .post-image img,
    section.post img {
      border: 3px solid #cba;
      background: #fff;
    }

    .post-image a.view-high-res {
      padding-left: 5px;
      font-size: 12px;
    }

    .post-image a img,
    section.post a > img,
    .post-image-set {
      border: 3px solid #975;
    }

    section.post img.avatar {
      margin-top: 3px;
      border: none;
    }

  .post-caption {
    margin-top: -20px;
    margin-bottom: 20px;
    padding: 10px 30px 1px 30px;
    font-size: 14px;
    width: 610px;
    color: #864;
    font-weight: bold;
    background: #f2ede8;
  }

    .post-caption p {
      margin-bottom: 10px;
    }

  blockquote {
    padding: 20px 0 20px 0;
    background: url('../img/ele-quote.png') no-repeat;
  }

    blockquote p,
    blockquote ul,
    blockquote ol {
      font-size: 22px !important;
    }

    blockquote p {
      margin: 0 30px 20px;
    }

    blockquote ul,
    blockquote ol {
      margin-bottom: 20px;
    }

    blockquote ul,
    blockquote ol {
      margin-left: 20px;
    }

      blockquote ul p,
      blockquote ol p {
        margin-left: 0;
      }

  .post-quote-author {
    text-align: right;
    font-style: italic;
  }

  .post-chat .odd,
  .post-chat .even {
    margin: 0;
    padding: 10px 20px;
    color: #321;
  }

  .post-chat .odd  { background-color: #f2ede8; }
  .post-chat .even { background-color: #fbf9f7; }

    .post-chat span {
      font-weight: bold;
    }

.pagination {
  list-style: none;
  padding-bottom: 30px;
}

  .pagination li {
    width: 180px;
    padding: 0 20px;
    line-height: 20px;
    color: #cba;
    font-weight: bold;
  }

  .pagination li.older-posts {
    background: url('../img/ele-arrow-left.png') no-repeat left;
  }

  .pagination li.newer-posts {
    text-align: right;
    background: url('../img/ele-arrow-right.png') no-repeat right;
  }

/* ------------------------------
  Sidebar
------------------------------ */

section.post aside {
  background: url('../img/ele-shadow-meta.png') no-repeat 0 15px;
}

  section.post aside h3 {
    color: #cba;
    padding-left: 30px;
    margin-bottom: 5px;
  }

  section.post aside h3.post-date {
    color: #864;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  section.post aside section.share-buttons {
    padding-left: 30px;
    margin-bottom: 20px;
  }

  section.post aside ul {
    margin-bottom: 10px;
  }

    section.post aside ul li {
      list-style: url('../img/ico-tag.png') outside;
      line-height: 16px;
    }

  section.post .post-tags {
    font-size: 13px;
  }

.addthis_toolbox a {
  clear: both;
}

/* ------------------------------
  Comments & Notes
------------------------------ */

#post-notes {
  margin: 0;
  padding-top: 20px;
}

  #disqus_thread h3,
  #post-notes h3 {
    margin-bottom: 10px;
    color: #642;
  }

  #post-notes ol li {
    font-size: 12px;
    padding: 2px 0;
  }

    #post-notes ol li img {
      float: left;
    }

    #post-notes ol li span {
      display: inline-block;
      margin-left: 5px;
      padding-top: 2px;
    }

div#disqus_thread {
  width: 700px;
  margin: 0 auto;
  padding-top: 30px;
}

  div#disqus_thread h3 {
    margin-bottom: 1.5em;
  }

  div#disqus_thread div#dsq-comments-title {
    margin-top: 3em;
  }

  body#with-disqus div#it.post {
    margin-top: 0;
  }

  body#with-disqus div.realpost {
    margin-bottom: 0; padding-bottom: 0;
  }

  div#disqus_thread .dsq-options {
    display: none;
  }

/* ------------------------------
  Footer
------------------------------ */

section#footer {
  padding-bottom: 30px;
  color: #cba;
  font-size: 14px;
  line-height: 18px;
  background: #321 url('../img/ptn-gradient-footer-bottom.png') repeat-x bottom;
}

  section#footer a       { color: #975; }
  section#footer a:hover { color: #ca8; }

  #character-head {
    position: absolute;
    top: -60px;
    left: 10px;
    width: 60px;
    height: 70px;
    background: url('../img/ele-character_head.png') no-repeat;
  }

  #back-to-top {
    position: absolute;
    top: -45px;
    right: 10px;
    display: block;
    width: 25px;
    height: 29px;
    background: url('../img/ele-arrow-top.png') no-repeat;
    text-indent: -9999px;
  }

  section#my-projects {
    font-size: 12px;
  }

  section#about-me,
  section#my-projects {
    padding: 20px 0;
  }

    section#about-me h2,
    section#my-projects h2 {
      margin: 30px 0;
      font-size: 32px;
      color: #432;
    }

    section#about-me h3 {
      float: left;
      width: 100px;
      height: 100px;
      border: 2px solid #987;
      background: url('../img/img-avatar-100px.jpg') no-repeat;
      text-indent: -9999px;
    }

    section#about-me h4 {
      float: left;
      width: 250px;
      margin-left: 15px;
      font-size: 18px;
      font-weight: normal;
      line-height: 24px;
    }

    section#about-me img {
      border: 2px solid #987;
    }

      section#my-projects ul li {
        list-style: none;
      }

section#copyright {
  text-align: center;
  color: #531;
  background: #cba url('../img/ele-footer-image.jpg') no-repeat right;
}

  section#copyright .container_12 {
    padding: 25px 0;
  }

  section#copyright p {
    margin: 0;
    font-size: 14px;
  }

    section#copyright p span {
      font-size: 12px;
    }

    ul#social-icons-footer {
      margin-bottom: 5px;
    }

      ul#social-icons-footer li {
        margin-right: 0;
      }

      ul#social-icons-footer li a {
        width: 24px;
        height: 24px;
      }

      ul#social-icons-footer li.social-linkedin   a { background-image: url('../img/social-icons/24px/linkedin.png'); }
      ul#social-icons-footer li.social-github     a { background-image: url('../img/social-icons/24px/github.png'); }
      ul#social-icons-footer li.social-twitter    a { background-image: url('../img/social-icons/24px/twitter.png'); }
      ul#social-icons-footer li.social-googleplus a { background-image: url('../img/social-icons/24px/googleplus.png'); }
      ul#social-icons-footer li.social-forrst     a { background-image: url('../img/social-icons/24px/forrst.png'); }
      ul#social-icons-footer li.social-tumblr     a { background-image: url('../img/social-icons/24px/tumblr.png'); }
      ul#social-icons-footer li.social-rss        a { background-image: url('../img/social-icons/24px/rss.png'); }
      ul#social-icons-footer li.social-email      a { background-image: url('../img/social-icons/24px/email.png'); }

/* ------------------------------
  Icon Fonts
------------------------------ */

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?b7bojg');
  src:  url('fonts/icomoon.eot?b7bojg#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?b7bojg') format('truetype'),
    url('fonts/icomoon.woff?b7bojg') format('woff'),
    url('fonts/icomoon.svg?b7bojg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

.icon-ruby:before {
  content: "\e900";
}
.icon-css:before {
  content: "\e649";
}
.icon-elixir:before {
  content: "\f113";
}
.icon-js:before {
  content: "\f129";
}
.icon-php:before {
  content: "\f147";
}