todos.styl

body
  font-family sans-serif
  background-color #315481
  background-image linear-gradient(to bottom, #315481, #918e82 100%)
  background-attachment fixed
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  padding 0
  margin 0
  font-size 14px

.container
  max-width 600px
  margin 0 auto
  min-height 100%
  background white

header
  background #d2edf4
  background-image linear-gradient(to bottom, #d0edf5, #e1e5f0 100%)
  padding 20px 15px 15px 15px
  position relative
  .hide-completed
    float right

#login-buttons
  display block

h1
  font-size 1.5em
  margin 0
  margin-bottom 10px
  display inline-block
  margin-right 1em

form
  margin-top 10px
  margin-bottom -10px
  position relative

.new-task
  input
    box-sizing border-box
    padding 10px 0
    background transparent
    border none
    width 100%
    padding-right 80px
    font-size 1em
    padding-bottom 5px
    &:focus
      outline 0

ul
  margin 0
  padding 0
  background white

.delete
  float right
  font-weight bold
  background none
  font-size 1em
  border none
  position relative

li
  position relative
  list-style none
  padding 15px
  border-bottom #eee solid 1px
  .text
    margin-left 10px
  &.checked
    color #888
    .text
      text-decoration line-through
  &.private
    background #eee
    border-color #ddd

.toggle-private
  margin-left 5px

@media (max-width :600px)
  li
    padding 12px 15px
  .search
    width 150px
    clear both