Starting the styling.

bin/gruntc

@@ -0,0 +1,3 @@
+#!/bin/sh
+grunt gruntjs
+grunt $*

src/index.haml

@@ -4,6 +4,7 @@
     %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
     %meta{:name => "keywords", :content => ""}/
     %meta{:name => "description", :content => ""}/
+    %link{:rel => "stylesheet", :href => "http://fonts.googleapis.com/css?family=Montserrat", :type => "text/css"}/
     %link{:rel => "stylesheet", :href => "style.css", :type => "text/css"}/
     %link{:rel => "shortcut icon", :type => "image/x-icon", :href => "images/favicon.ico"}/
     %link{:rel => "shortcut icon", :type => "image/png", :href => "images/favicon.png"}/
@@ -12,29 +13,13 @@
 
   %body
     #content
-      #leftbrain
-        %h1#prioritize Today I Will Pay Attention To:
+      #leftbrain.column
+        %h1.prioritize Today I Will Pay Attention To:
         #priorities
-      #rightbrain
-        %h1#prioritize Today I Will Ignore:
+      #rightbrain.column
+        %h1.prioritize Today I Will Ignore:
         #ignorities
 
-      #braindiv
-        #img
-        #msg
-          Right now, it&rsquo;s <span id="thetime"></span>.
-          %p Is <strong>this</strong></p>
-          %p what you want</p>
-          %p to be <strong class="doing">doing</strong>
-          %p right now?
-      .clearoncolumn
-      #rightnow
-        #newcat
-          %h1 Wouldn't you <strong>rather</strong> be: 
-          <button class="fadebutton" id="addcat" style="display: none">+ New Category</button>
-        .div(style="clear:both")
-        #todos
-
     #message(style="display:none")
       %h2 How to Use
       %p

src/style.less

@@ -1,11 +1,67 @@
 /* -*- mode:css -*- */
 
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+a:hover,
+a:active {
+  outline: 0;
+}
+
+img {
+  max-width: 100%; // Make images inherently responsive
+  vertical-align: middle;
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+button,
+input {
+  *overflow: visible; // Inner spacing ie IE6/7
+  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
+  padding: 0;
+  border: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer; // Cursors on all buttons applied consistently
+  -webkit-appearance: button; // Style clickable inputs in iOS
+}
+input[type="search"] { // Appearance in Safari/Chrome
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  -webkit-appearance: textfield;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
+}
+
+
 * {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
+
 body {
     font: 13pt/190% Calibri,Georgia,"Lucida Bright",Lucidabright,"Bitstream Vera Serif",serif;
     background-color: #fff;