diff --git a/css/area_footnotes.less b/css/area_footnotes.less
new file mode 100644
index 0000000..7639f0c
--- /dev/null
+++ b/css/area_footnotes.less
@@ -0,0 +1,65 @@
+/**
+ * This file provides the design styles for the footnotes.
+ *
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* footnotes section  */
+.dokuwiki div.footnotes {
+  div.fn {
+    margin-bottom: .2rem;
+    display: table;//
+    vertical-align: top;//
+
+    sup, //
+    .content {
+      display: table-cell;
+    }
+
+    sup { //
+      vertical-align: top;
+
+      // footnote anchor
+      a.fn_bot {
+        font-size: .86em;
+        padding-right: .2em;
+      }
+    }
+
+    .content { //
+      vertical-align: top;
+      line-height: 135%;
+    }
+
+    > sup {
+
+    }
+
+    // footnote text
+    div.content {
+      line-height: 135%;
+    }
+  }
+}
+
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* footnotes in content  */
+sup,
+.main-content sup,
+.main-content > div > p sup,
+.main-content > div > ul > li .li sup
+ {
+  a.fn_top {
+    font-size: .7rem;
+    font-weight: bold;
+    padding-right: .2em;
+  }
+}
+
+.insitu-footnote {
+  line-height: 130%;
+}
+
+
diff --git a/style.ini b/style.ini
index 519d234..35dae3b 100755
--- a/style.ini
+++ b/style.ini
@@ -62,6 +62,7 @@ css/base_design.less                  = all
 css/area_content.less                 = all
 css/area_header.less                  = all
 css/area_footer.less                  = all
+css/area_footnotes.less               = all
 css/area_msg.less                     = all
 css/area_nav-direct.less              = all
 css/area_nav-breadcrumb.less          = all