CSS refactoring. Notes better styled

app/assets/stylesheets/sections/notes.scss

@@ -0,0 +1,191 @@
+/**
+ * Notes
+ *
+ */
+#notes-list, 
+#new_notes_list {
+  display:block;
+  list-style:none;
+  margin:0px;
+  padding:0px;
+}
+
+#new_notes_list li:last-child{ 
+  border-bottom:1px solid #aaa;
+}
+
+.issue_notes,
+.wiki_notes {
+  .note_content {
+    float:left;
+    width:400px;
+  }
+}
+
+/* Note textare */
+#note_note {
+  height:80px;
+  width:99%;
+  font-size:14px;
+}
+
+#new_note {
+  #note_note {
+    height:25px;
+  }
+  .attach_holder {
+    display:none;
+  }
+}
+
+.note { 
+  padding: 8px 0; 
+  border-bottom: 1px solid #eee;
+  overflow: hidden;
+  display: block;
+  img {float: left; margin-right: 10px;}
+  .note-author cite{font-style: italic;}
+  p { color:$style_color; }
+  .note-author { color: $style_color;}
+
+  .note-title { margin-left:50px; padding-top: 5px;}
+  .avatar { 
+    margin-top:3px;
+  }
+
+  .delete-note { 
+    display:none; 
+    float:right;
+  }
+
+  &:hover { 
+    .delete-note { display:block; }
+  }
+}
+
+
+p.notify_controls input{
+  margin: 5px;
+}
+
+p.notify_controls span{
+  font-weight: 700;
+}
+
+tr.line_notes_row { 
+  border-bottom:1px solid #DDD;
+  border-left: 7px solid #2A79A3;
+
+  &.reply { 
+    background:#eee;
+    border-left: 7px solid #2A79A3;
+    border-top:1px solid #ddd;
+    td { 
+      padding:7px 10px;
+    }
+    a.line_note_reply_link { 
+      @include round-borders-all(4px);
+      padding: 3px 10px;
+      margin-left:5px;
+      color: white;
+      background: #2A79A3;
+      border-color: #2A79A3;
+    }
+  }
+  ul { 
+    margin:0;
+    li { 
+      padding:0;
+      border:none;
+    }
+  }
+}
+
+.line_notes_row,  .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
+.per_line_form { 
+  background:#f5f5f5;
+  border-top:1px solid #eee;
+  form {  margin: 0; }
+  td { 
+    border-bottom:1px solid #ddd;
+  }
+  .note_actions { 
+    margin:0;
+    padding-top: 10px;
+
+    .buttons { 
+      float:left;
+      width:300px;
+    }
+    .options { 
+      .labels { 
+        float:left;
+        padding-left:10px;
+        label { 
+          padding: 6px 0;
+          margin: 0;
+          width:120px;
+        }
+      }
+    }
+  }
+}
+
+td .line_note_link { 
+  position:absolute;
+  margin-left:-70px;
+  margin-top:-10px;
+  z-index:10;
+  background: url("comment_add.png") no-repeat left 0;
+  width:32px;
+  height:32px;
+
+  opacity: 0.0;
+  filter: alpha(opacity=0);
+
+  &:hover { 
+    opacity: 1.0;
+    filter: alpha(opacity=100);
+  }
+}
+
+.diff_file_content tr.line_holder:hover > td { background: $hover !important; }
+.diff_file_content tr.line_holder:hover > td .line_note_link { 
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+
+.new_note {
+  .input-file {
+    font: 500px monospace;
+    opacity:0;
+    filter: alpha(opacity=0);
+    position: absolute;
+    z-index: 1;
+    top:0;
+    right:0;
+    padding:0;
+    margin: 0;
+  }
+
+  .file_upload {
+    position: absolute;
+    right:14px;
+    top:7px;
+  }
+
+  div.attachments {
+    position:relative;
+    width: 350px;
+    height: 36px;
+    overflow:hidden;
+    margin:0 0 5px !important;
+  }
+  .file_name {
+    line-height:30px;
+    width:240px;
+    height:28px;
+    overflow:hidden;
+  }
+}