@import compass/utilities
@import compass/css3
@import blueprint

body
  font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif
  line-height: 1.5
  font-size: 13px

// Layout
#container
  +pie-clearfix

#main
  +column(16, true)
  +prepend(8)

#sidebar
  +column(8)
  +pull(24, true)
  background: #F5F5F5
  h2
    font-size: 16px
  ul, ol
    list-style-position: inside
    padding-left: 10px
  .selected
    font-weight: bold
  a
    +hover-link
// Typography

blockquote
  :font-style italic

hr
  :background none
  :height 0
  :font-size 0
  :line-height 0
  :border none
  :border-top 2px solid #CCC

// Regular data tables
table.datagrid
  border-collapse: collapse
  th
    :background #EEE
  td,
  th
    border: 1px solid #CCC
    text-align: left
    padding: 5px
    cell-spacing: 0

// Reference

body.reference
  h3
    &.mixin, &.constant
      font-family: Monaco, courier
      font-weight: 200
      +text-shadow
      background-color: #eee
      border: 1px solid #aaa
      padding: 0.75em
      margin-bottom: 0
      a.permalink
        +hover-link
        +link-colors("inherit", "inherit")
    .arg[data-default-value]
      color: #666
      &:before
        content: "["
      &:after
        content: "]"
  .source-documentation
    background-color: #eee
    border: 1px solid #aaa
    border-top-width: 0
    padding: 0.75em
  dl.source-documentation
    margin-top: 0
    dt
      font-weight: bold
      float: left
      margin-right: 15px
    dt:not(:first-child)
      margin-top: 1em
  a.view-source
    float: right
    margin: 1.25em
  span.color + span.swatch
    margin: 0 3px 3px
    border: 1px solid #333
    width: 1em
    height: 1em
    +inline-block
  .color-snippet
    width: 100px
    height: 20px
    +border-radius(3px)
  a.help
    font-size: 75%

table.constants
  width: 100%
  +alternating-rows-and-columns(#EEE, #bbb, #191919)
  +outer-table-borders(1px)
  +inner-table-borders(1px)
  td, th
    padding: 0.25em 0.5em

ol#breadcrumbs
  +horizontal-list
  +no-bullets
  li:after
    content: " > "
  li.last:after
    content: ""
  li.last
    visibility: hidden

body#home #logo
  +replace-text("compass.png", 0px)
  height: 159px

p code
  border: 1px solid #ccc
  background-color: #f2f2f2
  padding: 2px

body#reference-compass-css3
  #border-radius
    padding: 2px 8px
    +border-radius(0.75em)
  #text-shadow
    +text-shadow(red)
  
@import partials/syntax.sass