path: root/src/stylesheets/application.sass

$background: black
$text-color: rgb(254, 254, 234)
$box-background: rgb(105, 30, 30)
$box-border: lightgray

@mixin content-pane
  width: 724px
  height: 1024px
  margin: auto

@import "compass/typography/links/link-colors"
@import "compass/typography/links/hover-link"
@import "compass/typography/lists/bullets"

body
  background-color: $background
  color: $text-color
  font-family: Helvetica, Arial, Sans-serif
  font-size: 12pt

h2
  margin: 0
  border-bottom: 1px solid
  font-size: 110%

ul
  margin: 0

li
  +no-bullet

a
  +link-colors(#cc0, #c00, #c0c, #ccc, #cc0)
  +hover-link

strong
  color: white

#splash
  +content-pane

#content
  +content-pane
  background-image: url('/images/content_background.jpg')
  padding-bottom: 40px
  #body
    position: relative
    top: 160px
    left: 25px
    width: 674px
    height: 840px
    overflow: auto
    padding: 2px


#facts
  border: 1px dotted $text-color
  padding: 3px
  font-size: 80%
  float: right
  margin-left: 3px

.intro
  font-size: 105%
  font-weight: bolder

$sharebar-height: 40px
$button-height: $sharebar-height - 5px

#sharebar
  position: fixed
  bottom: 0
  left: 10%
  right: 10%
  height: $sharebar-height
  border-top: 1px solid lightgray
  font-size: 80%
  background-color: rgba(0, 0, 0, 0.7)

.sharebutton
  display: inline-block
  vertical-align: top
  padding-top: 6px

#facebook_button

#delicious_button
  padding-right: 3em
  .icon
    display: inline-block
    height: $button-height
  .link
    display: inline-block
    height: $button-height
    padding-top: 3px
    vertical-align: middle
    font-size: 8pt

#google_plus_button