Finished design.

site/css/main.css

@@ -35,12 +35,41 @@ header #title {
 }
 
 /* line 36, ../src/main.scss */
+header #signout {
+  background-image: url("/img/signoutbutton.jpg");
+  float: right;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 80px;
+  color: #CCC;
+  font-size: 14px;
+  text-shadow: 1px 1px #555, -1px -1px #111;
+  line-height: 42px;
+  font-weight: bold;
+  height: 50px;
+}
+
+/* line 51, ../src/main.scss */
+header #signout:hover {
+  background-image: url("/img/signouthoverbutton.jpg");
+  cursor: pointer;
+}
+
+/* line 55, ../src/main.scss */
+header #signout:active {
+  background-image: url("/img/signoutpushedbutton.jpg");
+  cursor: pointer;
+}
+
+/* line 59, ../src/main.scss */
 #main, footer {
   width: 640px;
   margin: 80px auto;
 }
 
-/* line 40, ../src/main.scss */
+/* line 63, ../src/main.scss */
 #main h1 {
   text-align: center;
   font-size: 32px;
@@ -49,7 +78,7 @@ header #title {
   margin-bottom: 30px;
 }
 
-/* line 50, ../src/main.scss */
+/* line 73, ../src/main.scss */
 #mainblock {
   border: solid 5px #CCC;
   -webkit-border-radius: 8px 8px;
@@ -60,18 +89,19 @@ header #title {
   border-radius: 8px / 8px;
 }
 
-/* line 55, ../src/main.scss */
+/* line 78, ../src/main.scss */
 #task {
   padding: 20px;
   background: #ededed;
   background-image: url("/img/addtaskbackground.jpg");
 }
 
-/* line 61, ../src/main.scss */
+/* line 84, ../src/main.scss */
 input#addtasktextfield {
   border: 1px solid #C4C4C4;
-  height: 38px;
+  height: 40px;
   background: url("/img/addtasktextfieldbackground.jpg");
+  background-repeat: repeat-x;
   font-size: 16px;
   font-weight: bold;
   padding-left: 10px;
@@ -79,10 +109,11 @@ input#addtasktextfield {
   width: 420px;
 }
 
-/* line 72, ../src/main.scss */
+/* line 96, ../src/main.scss */
 #addtaskbutton {
   background: url("/img/addtaskbuttonbackground.jpg");
   border: 1px solid #2f53cd;
+  font-size: 16px;
   -webkit-border-radius: 5px 5px;
   -moz-border-radius: 5px / 5px;
   -o-border-radius: 5px / 5px;
@@ -91,50 +122,53 @@ input#addtasktextfield {
   border-radius: 5px / 5px;
   color: #FFF;
   text-shadow: -1px -1px #2f53cd, 1px 1px #73aaff;
-  height: 40px;
+  height: 42px;
   margin-left: 20px;
   width: 120px;
   text-align: center;
   font-weight: bold;
 }
 
-/* line 84, ../src/main.scss */
+/* line 109, ../src/main.scss */
 #addtaskbutton:hover {
   background: url("/img/addtaskbuttonhoverbackground.jpg");
+  cursor: pointer;
 }
 
-/* line 87, ../src/main.scss */
+/* line 113, ../src/main.scss */
 #addtaskbutton:active {
   background: url("/img/addtaskbuttonpushedbackground.jpg");
+  cursor: pointer;
 }
 
-/* line 91, ../src/main.scss */
+/* line 118, ../src/main.scss */
 .item {
+  font-size: 14px;
   border-top: 1px solid #EEE;
-  height: 40px;
-  line-height: 40px;
+  height: 39px;
+  line-height: 39px;
   padding-left: 20px;
 }
 
-/* line 97, ../src/main.scss */
+/* line 125, ../src/main.scss */
 .item.first {
   border-top: 1px solid #DDD;
 }
 
-/* line 100, ../src/main.scss */
+/* line 128, ../src/main.scss */
 .item label {
   margin-left: 10px;
   padding-left: 0;
 }
 
-/* line 101, ../src/main.scss */
+/* line 129, ../src/main.scss */
 .item.done {
   opacity: 0.2;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
 }
 
-/* line 104, ../src/main.scss */
+/* line 132, ../src/main.scss */
 #webpageinfo {
   font-size: 10px;
   color: #CCC;

site/index.html

@@ -41,6 +41,7 @@
     <div id="container">
       <header>
         <div id="title">my.todo</div>
+        <div id="signout"></div>
       </header>
       <div id="main" role="main">
           <h1>My todo list for today</h1>

site/src/main.scss

@@ -33,6 +33,29 @@ header #title {
     font-weight: normal;
     height: 50px;
 }
+header #signout {
+    background-image: url('/img/signoutbutton.jpg');
+    float: right;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 80px;
+    color: #CCC;
+    font-size: 14px;
+    text-shadow: 1px 1px #555, -1px -1px #111;
+    line-height: 42px;
+    font-weight: bold;
+    height: 50px;
+}
+header #signout:hover {
+    background-image: url('/img/signouthoverbutton.jpg');
+    cursor: pointer;
+}
+header #signout:active {
+    background-image: url('/img/signoutpushedbutton.jpg');
+    cursor: pointer;
+}
 #main, footer {
     width: 640px;
     margin: 80px auto;
@@ -60,8 +83,9 @@ header #title {
 
 input#addtasktextfield {
     border: 1px solid #C4C4C4;
-    height: 38px;
+    height: 40px;
     background: url('/img/addtasktextfieldbackground.jpg');
+    background-repeat: repeat-x;
     font-size: 16px;
     font-weight: bold;
     padding-left: 10px;
@@ -72,10 +96,11 @@ input#addtasktextfield {
 #addtaskbutton {
     background: url('/img/addtaskbuttonbackground.jpg');
     border: 1px solid #2f53cd;
+    font-size: 16px;
     @include border-radius(5px, 5px);
     color: #FFF;
     text-shadow: -1px -1px #2f53cd, 1px 1px #73aaff;
-    height: 40px;
+    height: 42px;
     margin-left: 20px;
     width: 120px;
     text-align: center;
@@ -83,15 +108,18 @@ input#addtasktextfield {
 }
 #addtaskbutton:hover {
     background: url('/img/addtaskbuttonhoverbackground.jpg');
+    cursor: pointer;
 }
 #addtaskbutton:active {
     background: url('/img/addtaskbuttonpushedbackground.jpg');
+    cursor: pointer;
 }
 
 .item {
+    font-size: 14px;
     border-top: 1px solid #EEE;
-    height: 40px;
-    line-height: 40px;
+    height: 39px;
+    line-height: 39px;
     padding-left: 20px;
 }
 .item.first {