application.css.sass

// Compass imports
@import compass
@import compass/reset
@import blueprint/typography

// Variables
$hover-color: #ec1d25   // Light red
$bg-color: #333         // Dark grey
$light-color: #eee      // Light grey

// Mixins
=hide
  left: -9999px
  position: absolute

=data-uri-bg($image, $properties: false)
  @if $properties != false
    background: inline-image($image) $properties
    *background: url($image) $properties
  @else
    background: inline-image($image)
    *background: url($image)

// Styling

html
  background-color: #222

body
  +blueprint-typography-body(14px)
  color: $bg-color
  +data-uri-bg('bg_body.jpg', $bg-color)

body,
input
  font-family: "Helvetica Neue", Helvetica, Arial, freesans, clean, sans-serif

h1,
h2,
h3
  font-weight: 900

h1
  font-size: 24px

h2
  font-size: 22px

h3
  font-size: 20px

a
  font-weight: 900
  color: #b1342a
  text-decoration: none

  &:hover
    color: $hover-color
    cursor: pointer

a.button,
input[type="submit"]
  display: block
  text-align: center
  background-color: $bg-color
  margin-top: 20px
  padding: 20px
  font-weight: 500
  font-size: 18px
  font-weight: 900
  color: #ccc
  +border-radius(2px)
  +box-shadow(0 -1px 0 #fff, 0 1px 0 #000)

  &:hover
    color: $light-color

  span
    display: block
    font-weight: 500
    font-size: 12px

input[type="submit"]
  border: none
  display: block
  width: 100%

  &:hover
    cursor: pointer

img.gravatar
  width: 20px
  height: 20px
  border: 1px solid #ddd
  vertical-align: middle

#profile
  margin-top: 10px

  #avatar
    position: relative
    margin: 0 20px 20px 0
    float: left

    img.gravatar
      width: 220px
      height: auto

    #medals
      position: absolute
      bottom: 0
      right: 5px

  h3
    margin: 10px 0
    clear: both

p
  margin: 10px 0

form
  margin: 10px 0 0 0

  textarea,
  input[type="text"]
    width: 96.55174%
    padding: 1.72413%
    border: 1px solid #ddd
    font-size: 14px
    margin: 10px 0

  textarea
    height: 200px

  input[type="text"]
    font-size: 24px

#notice, #alert
  +border-radius(2px)
  padding: 10px
  margin: 10px 0 20px 0

#notice
  background-color: #ccffcc
  border: 1px solid #bbffbb

#alert
  background-color: #ffcccc
  border: 1px solid #ffbbbb

#header
  text-align: center
  margin: -70px auto 25px

  h1 a
    width: 400px
    height: 285px
    display: block
    margin: 0 auto
    +hide-text
    +data-uri-bg("logo.jpg", center no-repeat)

    h1 a
      height: 75px
      background-size: 75%

  p
    margin: -68px 0 0
    font-family: "Courier New", Courier, monospace
    font-size: 13px
    color: #888
    -webkit-text-size-adjust: none

    span
      font-size: 14px
      color: #888
      font-weight: 900
      text-shadow: 0 1px 1px #000

#wrapper
  margin: auto
  max-width: 900px
  min-width: 660px
  padding: 10px
  position: relative

  #adzerk_ad_div
    color: #666
    font-size: 70%
    line-height: 120%
    position: absolute
    top: 203px
    right: 0
    width: 120px

    @media screen and (max-width: 940px)
      display: none

    img
      +border-radius(2px)


#container
  background: $light-color
  padding: 0px 20px 20px 20px
  margin: 0 auto
  +border-radius(2px)
  +box-shadow(0 0px 5px #000)
  width: 620px

  &.home
    background-image: asset_url('steven.jpg', image)
    background-repeat: no-repeat

    nav
      height: 200px
      background-color: transparent

    .tip a
      font-size: 100%

  nav
    margin-bottom: 20px
    background: $bg-color
    margin: 0px -20px 20px -20px
    padding: 10px 20px
    overflow: hidden

    li
      height: 20px
      float: left
      margin-right: 15px
      text-shadow: 0 1px 5px #000
      color: $light-color

      &.user
        float: right
        margin: 0

    a
      color: $light-color

  #main
    clear: both

    #entries li.entry
      margin: 20px 0
      background-repeat: no-repeat
      background-position: top right

      form

        textarea
          height: 100px

        fieldset
          padding: 0 20px
          display: inline-block
          background: inline-image("happyface.png") right no-repeat, inline-image("sadface.png") left no-repeat
          *background: asset_url("happyface.png", image) right no-repeat, asset_url("sadface.png", image) left no-repeat

        input[type="submit"]
          margin: 0

      span.entries_left
        float: right

    #entries li.voted

      a.extend
        &:hover
          cursor: pointer

    #entries.voting_box
      position: absolute
      left: 50%
      top: 60px
      width: 820px
      margin: 0 0 0 -410px
      z-index: 10

      li
        padding: 10px 20px 20px 20px

    a.vote
      margin: 20px 0

    .gold
      background-image: asset_url('gold.png', image)

    .silver
      background-image: asset_url('silver.png', image)

    .bronze
      background-image: asset_url('bronze.png', image)

#contests, #entries, #articles
  margin-bottom: -20px

#container.home
  background-image: asset_url('steven.jpg', image)
  background-repeat: no-repeat

  nav
    height: 200px
    background-color: transparent

  .tip a
    font-size: 100%

  #contests
    margin-bottom: -10px

#entries, #articles
  margin-bottom: -20px

#contests .box,
.message,
#articles li
  padding: 10px

.contestants
  margin-top: 10px

#entries li.entry,
.contestants li
  padding: 10px

#contests .box,
#entries li.entry,
.message,
#articles li
  background-color: #ddd
  +border-radius(2px)
  +box-shadow(0 -1px 0 #ccc, 0 1px 0 #fff)

#contests .box,
  @include border-radius(2px)
  @include box-shadow(0 -1px 0 #ccc, 0 1px 0 #fff)

.tip
  margin-bottom: 20px
  background-color: #dde6ee

  a
    font-size: 12px

#contests .box,
#entries li.entry,
#articles li,
#contests .box
  margin-bottom: 20px

  .description
    float: left
    width: 370px

  .comments
    margin: 10px 0 0 0
    font-size: 12px

    div
      background-color: $light-color
      padding: 10px
      margin-bottom: 10px
      +border-radius(2px)

  .state
    text-align: right
    width: 210px
    float: right
    font-size: 24px
    font-weight: 900

    span
      display: block

    .time_left,
    .next_state
      font-size: 18px
      font-weight: 500
    .next_state
      font-size: 10px

    ol.winners
      margin-top: 10px
      float: right

      li
        position: relative
        float: left
        margin-left: 10px
        width: 60px

      img.gravatar
        width: 100%
        height: auto

      img.medal
        position: absolute
        bottom: 5px
        right: 0

  .submitted_entries
    font-weight: 900
    clear: both

#contests .box
  min-height: 117px

#contest_description
  img
    float: left
    margin: 10px 10px 10px 0

    @media screen and (max-width: 460px)
      width: 100%

form ul
  margin-bottom: 0

.filename
  background-color: $light-color
  color: #666
  font-size: 12px
  padding: 5px 10px
  margin: 10px 0 0 0
  font-family: monospace
  +border-top-left-radius(2px)
  +border-top-right-radius(2px)

.files
  height: 120px
  overflow: hidden
  margin-bottom: 10px
  position: relative

  div
    height: auto

  a.extend
    bottom: 0px
    padding: 20px 0 10px 10px
    height: 20px
    position: absolute
    width: 100%
    +data-uri-bg("gradient.png", no-repeat)

    span
      display: none

  &:hover a span
    display: block

.highlight, .markup, .image
  background: #fff
  overflow-x: auto
  overflow-y: hidden
  padding: 10px
  +border-bottom-left-radius(2px)
  +border-bottom-right-radius(2px)
  height: 100px

hr
  visibility: hidden
  clear: both

strong
  font-weight: 900

#footer
  width: 660px
  margin: 0 auto
  color: #666
  overflow: hidden

  a
    color: $light-color

    &:hover
      color: $hover-color

#fork_submit
  float: right
  margin: 10px 5px 0 0

  li
    float: left
    margin-left: 8px
    list-style: disc inside

    &:first-child
      margin-left: 0
      list-style: none

.host
  span
    font-size: 10px
    padding-left: 5px

  a
    height: 28px
    width: 73px
    display: block
    +hide-text
    +data-uri-bg("6sync.png", no-repeat)

em
  font-style: italic

form#submissions ul, form#new_entry ul, div#rules ul
  list-style: disc inside none

  li
    margin: 10px

span#who
  color: $light-color
  text-shadow: 0 1px 10px #000
  display: none
  font-size: 10px
  line-height: 10px
  font-style: italic
  font-family: Palatino, Georgia, "Times New Roman", serif
  text-align: right
  position: absolute
  top: 280px
  right: 30px

  em
    font-size: 11px
    display: block
    font-style: normal

div.overlay
  top: 0
  left: 0
  width: 100%
  height: 100%
  position: fixed
  background-color: #000
  opacity: 0.75

table
  margin: 10px 0
  width: 100%

  td
    padding: 5px 10px
    border-top: 1px solid #ddd
    border-bottom: 1px solid #ddd

    &.center
      text-align: center

    &.narrow
      width: 1px

  thead td
    font-size: 80%
    color: #444
    border: none

  tr.top3 img.gravatar
    width: 40px
    height: auto

.box,
.tip
  padding: 10px
  margin-bottom: 20px
  background-color: #ddd
  +border-radius(2px)
  +box-shadow(0 -1px 0 #ccc, 0 1px 0 #fff)


#contests
  overflow: hidden

  article
    position: relative
    padding: 10px 220px 10px 10px

  .comments
    margin: 10px 0 0 0
    font-size: 12px

    div
      background-color: $light-color
      padding: 10px
      margin-bottom: 10px
      +border-radius(2px)

  .state
    width: 210px
    top: 10px
    right: 10px
    position: absolute
    text-align: right
    font-size: 24px
    font-weight: 900

    span
      display: block

    .time_left,
    .next_state
      font-size: 18px
      font-weight: 500

    .next_state
      font-size: 10px

.tip
  background-color: #dde6ee

  a
    font-size: 12px

footer#submitter
  font-size: 12px
  color: #666

.box,
.tip
  padding: 10px
  margin-bottom: 20px
  background-color: #ddd
  +border-radius(2px)
  +box-shadow(0 -1px 0 #ccc, 0 1px 0 #fff)


#contests
  overflow: hidden

  article
    position: relative
    padding: 10px 220px 10px 10px

  .comments
    margin: 10px 0 0 0
    font-size: 12px

    div
      background-color: $light-color
      padding: 10px
      margin-bottom: 10px
      +border-radius(2px)

  .state
    width: 210px
    top: 10px
    right: 10px
    position: absolute
    text-align: right
    font-size: 24px
    font-weight: 900

    span
      display: block

    .time_left,
    .next_state
      font-size: 18px
      font-weight: 500

    .next_state
      font-size: 10px

.tip
  background-color: #dde6ee

  a
    font-size: 12px

footer#submitter
  font-size: 12px
  color: #666

blockquote
  font-family: Georgia, serif
  font-style: italic

@import gust
@import code