// Load in Eric Meyer's CSS reset
@import "reset.sass"

// We might use a 'lil CSS3!
@import "compass/css3"
@import "compass/utilities/general/clearfix"

// My Imports
@import "variables.sass"
@import "typography.sass"
@import "forms.sass"

body
  max-width: 640px
  margin: 0 auto  
  border-top: solid 6px $blue

.wrapper
  max-width: 94%
  margin: 0 auto

header
  text-align: center
  max-width: 100%
  margin: 1.2em auto 0.3em
  .logo img
    max-width: 75%

footer
  +clearfix
  margin-top: 40px
  border-bottom: solid 6px $blue
  //@include background-image(linear-gradient(white, $lighterGray))
  padding: 1% 3%
  .archives
    float: left
  .search 
    display: none
    //float: left
  h4
    //float: right
    text-align: center

img
  max-width: 100%
  height: auto
  @include border-radius(3px)

article img
  @include box-shadow($lightGray 0px 2px 4px)

.menu
  ul
    text-align: center
  li
    display: inline-block
    padding: 0 1.0em
    margin: 0 0 .5em
    border-left: 1px solid $lightGray 
  li:first-child
    border-left: none
  li a
    font-size: 15px
    line-height: 17px
    color: $gray
    text-decoration: none
    @include transition(color 0.3s ease-out)
  li a:hover, .current_page_item a
    color: $darkerGray
  .current_page_item a
    color: $darkerGray
    font-weight: 500

article.post
  //margin-bottom: 40px
  margin-top: 1em
  .comments-link a
    padding: 1% 2%
    background-color: $lighterGray
    font-size: 14px
    @include border-radius(6px)
    border: solid 1px #ddd

.commentList
  margin-bottom: 20px
  li.comment-item
    @include box-shadow($lightGray 0px 2px 4px)
    padding: 2%
    margin: 0 0 10px
    background-color: $lighterGray
    @include border-radius(6px)
  img.avatar
    float: left
    margin: 0 10px 10px 0
    @include border-radius(4px)
  .comment
    font-size: 16px
    color: $gray

.pagination
  +clearfix
  margin-top: 1em
  max-width: 100%
  padding: 0 2%
  background-color: $lighterGray
  font-size: 14px
  @include border-radius(6px)
  border: solid 1px #ddd
  .older
    float: right
  .newer
    float: left

// Specify the color of the selection
::-moz-selection 
  color: #000
  background: $orange
::selection     
  color: #000
  background: $orange