Add habits.styl

styles/app/index.styl

@@ -1,4 +1,5 @@
 /* CSS Reset */
+@import "../base";
 
 html,body,p,h1,ul,li,table,tr,th,td {
   margin: 0;

styles/base.styl

@@ -1,4 +1,5 @@
 @import "./reset";
+@import "./habits";
 @import "nib/vendor";
 
 body {

styles/habits.styl

@@ -0,0 +1,115 @@
+.color-worst { background-color: rgb(230, 184, 175);  }
+.color-worse { background-color: rgb(244, 204, 204);  }
+.color-bad { background-color: rgb(252, 229, 205);   }
+.color-neutral { background-color: rgb(255, 242, 204); }
+.color-good { background-color: rgb(217, 234, 211); }
+.color-better { background-color: rgb(208, 224, 227); }
+.color-best { background-color: rgb(201, 218, 248); }
+.done { background-color: rgb(217, 217, 217); color: rgb(153, 153, 153); }
+.reward { background-color: white; }
+
+.panel {
+  float:left;
+  margin: 10px;
+  min-width: 300px;
+/*
+  border: 1px solid #EEEEEE;
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: 0 1px 1px #777777;
+  padding: 10px;
+*/
+}
+
+.panel ul {
+  padding:0px;
+  margin-left:0px;
+}
+
+.habit, .reward {
+  list-style:none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid black;
+  margin-bottom: 5px;
+  padding:5px;
+  text-shadow:none;
+}
+
+.habit:hover, .reward:hover {
+  cursor: move;
+}
+
+.vote-up, .vote-down {
+  text-decoration:none;
+}
+
+.buy-link {
+  background-color:#DEE5F2;
+  padding:2px;
+  margin-right:10px;
+  border-radius: 5px;
+}
+
+.buy-link img {
+  height:20px;  
+}
+
+.container {
+  margin: 0 auto;
+  width: 920px;  
+}
+
+#header {
+  background: #FAFAFA;
+  background: -moz-linear-gradient(#FAFAFA,#EAEAEA);
+  background: -webkit-linear-gradient(#FAFAFA,#EAEAEA);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#eaeaea')";
+  position: relative;
+  z-index: 10;
+  border-bottom: 1px solid #CACACA;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4),0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
+
+#top-links {
+  float:right;
+}
+
+#character img {
+  height: 60px; 
+}
+
+#character td {
+  text-align: center;
+}
+  
+#tnl-bar { border: 1px solid black; background-color:white; margin-top:10px;}
+#tnl { float:right; margin:5px; }
+
+#hp-bar { border: 1px solid black; background-color:white;}
+#hp-bar .ui-progressbar-value{
+  background-image: url("http://jqueryui.com/themeroller/images/?new=cc0000&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|15"); 
+}
+
+#hp { float:right; margin:5px; }
+
+#money { float:right; }
+
+.habit-meta { float:right; }
+
+.habit-meta .edit-link {
+  display: none;
+}
+
+li:hover .habit-meta .edit-link {
+  display: inline;
+}
+
+#wrapper {
+  padding: 0 20px 20px 20px;
+}
+
+#footer {
+  clear:both;
+}