@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

$dark: #222; $light: #FFF;

*, *:before, *:after { box-sizing: border-box; }
body { background: $dark; }
body, input {
  font-family: 'Open Sans', sans-serif;
  font-size: 14pt;
  color: $light;
  text-align: justify;
  line-height: normal;
  font-smoothing: antialiased;
}
#list { position: relative;
  .new {
    position: fixed;
    top: 0; left: 0; right: 0;
    clear: both;
    height: 100px;
    background: $dark;
    #new {
      float: left;
      width: calc(100% - 100px); height: 100px;
      padding: 0; margin: 0;
      outline: 0; border: 0;
      background: transparent;
      line-height: 50px;
      text-indent: 25px;
      &::-webkit-input-placeholder { color: rgba($light,.5); }
    }
    button {
      cursor: pointer;
      float: right;
      width: 100px; height: 100px;
      padding: 0; margin: 0;
      outline: 0; border: 0;
      background: shade($dark,50%);
      font-size: 50pt;
      color: $light;
    }
  }
  .list {
    position: relative;
    top: 100px;
    box-shadow: 0 0 25px rgba(0,0,0,.3);
    .item { clear: both; height: 50px;
      input {
        cursor: default;
        float: left;
        width: calc(100% - 150px); height: 50px;
        padding: 0; margin: 0;
        outline: 0; border: 0;
        background: transparent;
        text-indent: 25px;
        &.checked { opacity: .5; text-decoration: line-through; }
      }
      ol { float: right;
        li {
          cursor: pointer;
          float: left;
          width: 50px; height: 50px;
          font-size: 20pt;
          line-height: 50px;
          text-align: center;
        }
      }
    }
  }
}