<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>todo</title>
  <script type="text/javascript" src="script/todo.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
  <style type="text/css" media="screen">
    #todo {
      font-family: 'Gochi Hand', cursive;
      margin: 20px;
      border-color: #DEE184;
      background-color: #F4F39E;
      padding: 10px 20px;
      -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
      -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
      box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
      -webkit-transform: rotate(-1deg); 
      -moz-transform: rotate(-1deg); 
      -o-transform: rotate(-1deg);
      word-spacing: 0.1em;

      position: absolute;
      min-width: 150px;
      min-height: 200px;
    }

    #todo h1 {
      margin: 0;
    }

    #todo ul {
      clear: both;
      padding-left: 10px;
      list-style-type: none;
      padding-top: 3px;
    }

    #todo li label {
      cursor: pointer;
    }

    #todo .button {
      float: left;
      margin-right: 10px;
      cursor: pointer;
      text-decoration: underline;
      font-size: 1.1em;
    }
    
    #todo .button-disabled {
      float: left;
      margin-right: 10px;
      font-size: 1.1em;
      color: #666;
    }
  </style>
</head>
<body>
  <div id="todo">
    <h1>ToDo</h1>
    <div class="button" id="add">Add</div>
    <div class="button" id="clear">Clear</div>
    <ul id="tasks">Loading...</ul>

    <script type="template" id="task">
      <li>
        <input id="{{id}}" type="checkbox" {{#done}}checked{{/done}}>
        <label for="{{id}}">{{name}}</label>
      </li>
    </script>
  </div>
</body>
</html>