Better footnotes

scss/partials/_base.scss

@@ -152,21 +152,16 @@ small{
     font-size:85%;
 }
 
-sub,sup{
-    font-size:75%;
+// Links to Footnotes
+sub{
+    font-size:0.5em;
     line-height:0;
     position:relative;
     vertical-align:baseline;
-}
-
-sup{
-    top:-0.5em;
-}
-
-sub{
     bottom:-0.25em;
 }
 
+
 img{
     -ms-interpolation-mode:bicubic;
     vertical-align:middle;
@@ -337,14 +332,6 @@ span[id*='MathJax-Span']{
     text-align:center;
 }
 
-#footnotes{
-    border-top:1px solid #e1e4e5;
-    padding-top: 36px;
-}
-
-h2.footnotes{
-    display:none;
-}
 
 .footnum, .footref{
     color: #2980b9;

scss/partials/_footnotes.scss

@@ -0,0 +1,62 @@
+// Links to Footnotes
+sup{
+    font-size:0.5em;
+    line-height:0;
+    position:relative;
+    vertical-align:baseline;
+    top:-0.5em;
+}
+
+.footnum, .footref{
+    color: #2980b9;
+    font-size: 170%;
+    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
+
+.footnum:before, .footref:before{
+    content:"[";
+}
+
+.footnum:after, .footref:after{
+    content:"]";
+}
+
+
+// Footer
+#footnotes{
+    border-top:1px solid #e1e4e5;
+    padding-top: 36px;
+
+    // Individual Foot Div
+    div.footdef {
+        display: flex;
+
+        // Foot Number
+        sup {
+            line-height: 1;
+            padding: 8px;
+            top: 0;
+        }
+
+        // Foot Text Div
+        div.footpara {
+            margin: 0;
+            padding: 0;
+
+            // Foot Text
+            p {
+                color: #999;
+                font-size: 90%;
+                font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+                padding: 8px;
+                line-height: 1.25em;
+                margin: 0;
+            }
+        }
+    }
+}
+
+// Do not display the footnote Heading
+h2.footnotes{
+    display:none;
+}