Introduced info menu to reference line

Change-Id: Ib5e0c4226e60bdcdbada3ebf71a07c27e14fad90
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index f561b93..b99057d 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -168,19 +168,38 @@
 /**
  * References
  */
+
 #search > ol > li p.ref {
   display: none;
 
+  // TEMP! Remove
   > span.meta {
     cursor: pointer;
-    color: $nearly-white;
+    @include choose-item;
+    margin: $border-size $border-size 0 $border-size !important;
+    text-align: center;
     text-decoration: none;
     padding: 0pt 3pt;
+    border: {
+      width: $border-size;
+      style: solid;
+      radius: $standard-border-radius;
+    }
+    &:hover {
+      cursor:pointer;
+      @include choose-hover;
+    }
 
+    /*
+    color: $nearly-white;
+   */
     &::after {
+	    /*
       font-size: 12pt;
-	    font-family: "FontAwesome";
+font-family: "FontAwesome";
 	    content: $fa-metadata;
+     */
+      content: "+Meta";
     }
 
     > span {
@@ -189,6 +208,14 @@
   }
 }
 
+div.action.bottom {
+  display: inline-block;
+  margin-right: .5em;
+  > span {
+    position: relative;
+  }
+}
+
 /**
  * Active
  */
@@ -246,6 +273,7 @@
   }
 
   overflow: hidden;
+
   div.meta {
     display: none;
     // visibility: hidden;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index f6ce9e0..6043386 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -30,11 +30,14 @@
   position: relative;
   width: 100%;
   padding-top: $border-size;
-//  background-color: $dark-orange;
+  //  background-color: $dark-orange;
   height: auto;
   font-size: 10pt;
   text-align: left;
 
+  // TODO: This may not be necessary anymore
+  // REMOVE!
+  /*
   > p.addtree {
     position: relative;
     @include choose-item;
@@ -45,8 +48,8 @@
     }
 
     font-size: inherit;
-    margin: $border-size $border-size 0 $border-size !important;
     width: $left-width;
+    margin: $border-size $border-size 0 $border-size !important;
     text-align: center;
     cursor: pointer;
     padding: 0 !important;
@@ -55,7 +58,8 @@
       cursor:pointer;
       @include choose-hover;
     }
-
+ */
+  /*
     *.menu {
       border-top-right-radius: 8px;
       position: absolute;
@@ -69,7 +73,8 @@
 	      border-top-right-radius: 5px;
       }
     }
-  }
+}
+*/
 
   p.queryfragment {
     position:relative;
@@ -113,6 +118,22 @@
   }
 }
 
+div.action.bottom span.tree .menu {
+  border-top-right-radius: 8px;
+  z-index: 200;
+  position: absolute;
+  width: $left-width;
+  left: 0;
+  bottom: 0;
+  text-align: left;
+  margin: -1* $border-size;
+  margin-top: 0;
+  > li:first-of-type {
+	  border-top-right-radius: 5px;
+  }
+}
+
+ 
 div.matchtable {
   z-index: 20;
   margin-left: $left-distance - ($border-size / 2);
@@ -252,10 +273,11 @@
 }
 
 
-  /**
-   * Label
-   */
-div.matchtree, div.metatable {
+/**
+ * Label
+ */
+// The metatable branch was experimental
+div.matchtree { //, div.metatable {
   h6 {
     display: inline;
     font-size: inherit;
@@ -263,7 +285,7 @@
     margin: 0;
     padding: 0 !important;
     float: left;
-    > span, > div {
+    > span { // , > div {
       @include matchinfo-head;
       @include cell-info;
       display: inline-block !important;
@@ -272,11 +294,13 @@
 	      margin-left: $border-size;
       }
     }
+    /*
     > div {
 
       // Override half width !
       width: $left-width;
     }
+   */
   }
 }
 
@@ -337,11 +361,7 @@
 }
 
 div.metatable + div.matchtable {
-  /*
-  padding-top: 5 * $border-size;
-  border-top: $border-size solid $middle-orange;
-  */
-  margin-top: 5 * $border-size;
+  margin-top: 4 * $border-size !important;
 }
 
 
@@ -353,7 +373,7 @@
   align-items: stretch;
   width: auto;
   padding-bottom: 0;
-  margin-left: $left-distance;
+  // margin-left: $left-distance;
   margin-right: $right-match-distance;
   margin-top: $border-size;