body
  background-color: #222
  font-size: 14px
  color: #222

body, input
  font-family: Arial

h2,h3
  font-weight: 900

h2
  font-size: 24px

h3
  font-size: 20px

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

a.button, input[type='submit']
  display: block
  text-align: center
  background-color: #222
  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: #eee

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

  img
    width: 220px
    margin: 0 20px 20px 0
    float: left

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

  h3
    margin: 10px 0

p
  margin: 10px 0

form
  margin: 10px 0 0 0

  textarea, input[type='text']
    width: 100%
    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: 25px auto
  width: 375px

  h1 a
    background-image: url(<%= asset_path 'logo_transparant.png' %>)
    text-indent: -9999px
    height: 100px
    display: block
    background-position: center
    background-repeat: no-repeat

  @media screen and (max-width: 460px)
    font-size: 10px

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

  code
    color: #888

#wrapper
  margin: auto
  max-width: 680px

#container
  background-color: #eee
  padding: 20px
  margin: 0 10px 10px 10px

  border-radius: 2px
  box-shadow: 0 0px 5px #000

  #menu span
    float: right
    margin-bottom: 20px

  #main
    clear: both

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

    .gold
      background-image: url(<%= asset_path 'gold.png' %>)

    .silver
      background-image: url(<%= asset_path 'silver.png' %>)

    .bronze
      background-image: url(<%= asset_path 'bronze.png' %>)

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

#contests li, #entry
  padding: 20px 10px

.contestants
  margin-top: 10px

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

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

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

  .description
    float: left
    width: 70%

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

    div
      background-color: #eee
      padding: 10px
      margin-bottom: 10px
      border-radius: 2px

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

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

    .next_state
      font-size: 10px

form ul
  margin-bottom: 0

.filename
  background-color: #222
  color: #eee
  font-size: 12px
  padding: 5px 10px
  margin: 10px 0 0 0
  font-family: monospace
  text-shadow: #000 1px 1px 1px
  border-top-left-radius: 2px
  border-top-right-radius: 2px

.highlight, .markup
  overflow: auto
  padding: 10px
  margin: 0 0 10px 0
  border-bottom-left-radius: 2px
  border-bottom-right-radius: 2px

hr
  visibility: hidden
  clear: both

strong
  font-weight: 900

#footer
  margin: 10px 5px
  font-size: 10px
  color: #eee

  span
    padding-left: 5px
    color: #666

  a
    background-image: url(<%= asset_path '6sync.png' %>)
    text-indent: -9999px
    height: 28px
    width: 73px
    display: block

em
  font-style: italic