1 files changed, 107 insertions, 18 deletions

diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index 59e76ce..df25c3c 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -31,10 +31,10 @@ main {
     max-width: 320px;
     .list-note-preview {
         li {
-            height: 4.5rem;
+            height: 4.6rem;
         }
         h4 {
-            @include fontsize(15);
+            @include fontsize(18);
         }
     }
     .note-preview {
@@ -65,11 +65,10 @@ main {
     list-style-type: none;
     li {
         @include fontsize(13);
-        padding: 8px 0 12px;
+        padding: 16px 0 16px 16px;
         min-height: 4.5rem;
         box-shadow: 0 -1px 0 #e7e2ee inset;
         margin: 0;
-        padding: 6px 12px;
         &:hover {
             background: #f7f7f7;
         }
@@ -79,7 +78,7 @@ main {
         }
     }
     h4 {
-        @include fontsize(16);
+        @include fontsize(18);
         margin: 0;
         padding-bottom: 8px;
         font-weight: normal;
@@ -249,7 +248,7 @@ main {
     height: 20px;
     border-radius: 4px;
     border: 1px solid $body_font_light;
-    #id_color_rgb {
+    #id_color_rgb, .input-color-rgb {
         display: block;
         text-indent: -1000em;
         padding: 0;
@@ -257,6 +256,9 @@ main {
         background: transparent;
         cursor: pointer;
     }
+    .input-color-rgb {
+        display: inline;
+    }
 }
 #nb-create-form {
     .color-picker-fieldset {
@@ -269,9 +271,9 @@ main {
         }
     }
     .nb-name {
-    margin: 1rem 2rem 1rem 0;
-    width: 90%;
-}
+        margin: 1rem 2rem 1rem 0;
+        width: 90%;
+    }
 }
 .small-circle {
     width: 18px;
@@ -286,7 +288,19 @@ main {
     margin: auto 5px;
     width: 8px;
 }
-
+.small-circle.push-top {
+    margin-top: 24px;
+}
+.note-container .flex-wrapper .hed-small {
+    flex-grow: 1;
+}
+#list-header {
+    margin-top: 10px;
+}
+.choices__list .nb-name {
+    @include fontsize(14);
+    margin: 0 .25rem;
+}
 
 .url-field {
     input {
@@ -307,25 +321,100 @@ main {
 }
 
 .nb-list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-top: 0;
 }
 .nb-list-item {
+    @extend %clearfix;
     list-style-type: none;
-    padding: 2rem;
-    margin: 1rem;
-    flex-grow: 1; 
+    padding: .5rem 1rem;
+    margin: 1rem 1rem 1rem 0;
     border: 1px #e7e2ee solid;
     border-radius: 4px;
-    min-width: 160px;
+    a {
+        text-decoration: none;
+        color: $body_font_color;
+    }
+    p {
+        margin: 0;
+        @include fontsize(13);
+        @include fancy_sans_bold;
+        text-transform: uppercase;
+
+    }
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin-left: .25rem;
+        margin-top: .5rem;
+        position: relative;
+        overflow-y: hidden;
+        .more { 
+            position: absolute; 
+            bottom: 0; 
+            left: 0;
+            width: 100%; 
+            margin: 0 ; 
+            padding: 15px 0 0 0; 
+            /* "transparent" only works here because == rgba(0,0,0,0) */
+            background-image: linear-gradient(to bottom, transparent, white);
+        }
+        li {
+            
+        }
+    }
+    .nb-name {
+        flex-grow: 1;
+        margin: 0;
+        a {
+            line-height: 2.3;
+            @include fontsize(22);
+        }
+    }
+    .tags {
+        @include fontsize(13);
+        @include fancy_sans;
+        text-transform: uppercase;
+        margin: 1rem 0 0 .25rem;
+        ul {
+            @include fancy_sans;
+            text-transform: none;
+        }
+
+    }
+    .trash {
+        margin-top: 4px;
+        color: #333;
+    }
 }
 .color-picker-inner {
     width: 100%;
     height: 100%;
 }
 
+.slideup, .slidedown {
+    height: 120px;
+    overflow-y: hidden;
+    -webkit-transition: height .5s ease-in;
+    -moz-transition: height .5s ease-in;
+    -o-transition: height .5s ease-in;
+    transition: height .5s ease-in;
+}
+.slidedown {            
+    height: 220px;                    
+    max-height: 260px;                    
+}    
+.newnnbslideup, .newnbslidedown {
+    height: 0px;
+    overflow-y: hidden;
+    -webkit-transition: height .5s ease-in;
+    -moz-transition: height .5s ease-in;
+    -o-transition: height .5s ease-in;
+    transition: height .5s ease-in;
+}
+.newnbslidedown {            
+    height: 220px;                    
+    max-height: 260px;                    
+}    
+
 .dropmenu-search {
     margin: 0;
     padding: 0;