@import "flat-ui-colors"
@import "bootstrap"
@import "pygments"

@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic)

$text-color: #696969
$focus-color: $peterriver

body
  color: $text-color
  // font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-family: 'Roboto', sans-serif
  font-weight: 400
  line-height: 1.6em
  -webkit-font-smoothing: antialiased

a, a:hover, a:active, a:visited
  color: $focus-color

h1, h2, h3, h4, h5, h6
  // font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-family: 'Roboto', sans-serif
  font-weight: 400
  -webkit-font-smoothing: antialiased

code
  font-size: 12px

#header
  border-top: 3px solid $focus-color

  a, a:hover
    color: $text-color

  h1, ol
    font-size: 1.2em
    display: inline-block

  h1
    padding-right: 0.8em

    a
      color: darken($text-color, 15%)
      span
        color: darken($text-color, 30%)
        font-weight: 800

  ol
    padding-left: 0

    li
      display: inline-block
      padding-right: 0.8em

  .align-right
    text-align: right

  ol.social
    margin-top: 15px

    li
      padding-right: 0
      padding-left: 0.4em

      a
        font-size: 1.2em
        color: $focus-color

#main
  #digital-ocean
    margin-top: 1em
    font-size: 0.8em
    line-height: 1.4em

  #adpacks
    width: 130px
    font-size: 0.8em
    line-height: 1.4em

    .bsa_it_i
      float: right
      display: block
      width: 130px
      margin-bottom: 10px

    .bsa_it_t,
    .bsa_it_d
      display: inline-block
      clear: right
      width: 130px
      margin-bottom: 10px

    .bsa_it_t
      color: darken($text-color, 30%)

    .bsa_it_d
      color: $text-color

    .bsa_it_p
      display: none

    a#bsap_aplink,
      display: inline
      color: lighten($text-color, 30%)

  #posts
    .post
      margin-bottom: 20px
			
      h2.title
        margin-bottom: 0
        padding-bottom: 0
        
      p.meta
        margin-top: 0
        padding-top: 0
        margin-bottom: 0
        font-style: italic
        color: lighten($text-color, 30%)

  #older-posts
    h2.title
      margin-top: 0
      margin-bottom: 10px
      margin-left: 80px
      font-size: 1.2em

      span.meta
        margin-left: -80px
        color: $text-color
        font-size: 0.82em
        padding-top: 0.2em
        display: inline-block
        float: left

  .post,
  .page
    h1.title
      margin-bottom: 0
      padding-bottom: 0

      a
        color: darken($text-color, 15%)

    p.meta
      margin-top: 0
      padding-top: 0
      font-style: italic
      color: lighten($text-color, 30%)

    #recent-posts
      h4.title
        clear: left
        margin-top: 0
        margin-bottom: 10px
        margin-left: 64px
        font-size: 1em

        span.meta
          margin-left: -64px
          color: $text-color
          font-size: 0.8em
          padding-top: 0.2em
          display: inline-block
          float: left


    #comments
      margin-top: 20px

  .page
    h1.title
      margin-top: 20px

  #about
    img
      width: 96px
      border-radius: 12px
      margin-left: 6px
      margin-bottom: 6px
      float: right

#footer
  margin-top: 20px

  ul.tla
    padding-left: 0
    font-size: 0.8em

    li
      display: inline-block

      a
        color: $text-color

#coinwidget
  margin-top: 1em
  border: 1px solid #e0e0e0
  background-color: #fffff7
  border-radius: 4px
  padding: 4px 8px

  font-size: 11px

  span.title
    display: block
    width: 75px
    float: left
    margin-right: 5px

  span.links
    display: block
    margin-left: 80px