diff --git a/sequencer/doc/Makefile b/sequencer/doc/Makefile
index 748aded..715a525 100644
--- a/sequencer/doc/Makefile
+++ b/sequencer/doc/Makefile
@@ -15,5 +15,9 @@ upload: all
 	@ rsync -L mup.css MANUAL.html index.html *.png ssh.tuxfamily.org:/home/non/non-sequencer.tuxfamily.org-web/htdocs
 	@ rm -f index.html
 
+install:
+	@ install -d "$(DESTDIR)$(DOCUMENT_PATH)/non-sequencer"
+	@ install -m 644 $(OBJS) *.png mup.css ../../COPYING "$(DESTDIR)$(DOCUMENT_PATH)/non-sequencer"
+
 clean:
 	rm -f $(OBJS)
\ No newline at end of file
diff --git a/sequencer/doc/mup.css b/sequencer/doc/mup.css
new file mode 100644
index 0000000..fd4229a
--- /dev/null
+++ b/sequencer/doc/mup.css
@@ -0,0 +1,449 @@
+
+/* Example CSS Style for MUP */
+
+a:link {
+    color: yellow;
+}
+a:visited {
+    color: olive;
+}
+a:active {
+    color: white;
+}
+a:link:hover {
+    text-decoration: underline;
+}
+
+/* #(url) */
+a.ext:link {
+    color: red;
+    text-decoration: none;
+    border-bottom: dashed silver 1;
+}
+a.ext:visited {
+    color: darkred;
+    border-bottom: dashed silver 1;
+    text-decoration: none;
+}
+
+/* #(ref) */
+a.int:link {
+    border-bottom: dashed silver 0.15em;
+}
+a.int:link:hover {
+    text-decoration: none;
+    color: white;
+}
+
+/*
+  a[href^="#"]:link {
+  border-bottom: dashed silver 0.15em;
+  }
+  a[href^="#"]:link:hover {
+  text-decoration: none;
+  color: white;
+  }
+  */
+
+p:contains("Warning:") {
+    background: #d00;
+    color: white;
+    border: dotted gray 0.5em;
+    display: block;
+}
+
+/* First letter of first paragraph of every chapter */
+/*
+  h1 + p:first-letter {
+  text-transform: uppercase;
+  float: left;
+  line-height: 0.8em;
+  font-size: 350%;
+  font-family: Serif;
+  letter-spacing: 0;
+  margin-right: 0.1em;
+  margin-top: 0.1em;
+  border: solid gray 1px;
+  padding: 1px;
+  color: #d00;
+  text-shadow: #666 3px 3px 3px;
+  }
+  */
+/* First paragraph of every chapter */
+/*
+  h1 + p {
+  text-indent: 0;
+  }
+  */
+
+/* cover */
+#cover * {
+    background: transparent;
+}
+#cover {
+    position: relative;
+    background: #da0;
+    color: black;
+    text-align: center;
+    margin: 0;
+    padding: 0.5em;
+}
+#cover h1, #cover h3 {
+    text-shadow: #444 0.2em 0.2em 0.2em;
+    color: white;
+    border: none;
+    letter-spacing: 0.2em;
+    line-height: 0.8em;
+    margin-left: 2em;
+    margin-right: 2em;
+}
+#cover h1:before, #cover h1:after {
+    content: "::";
+    font-size: 300%;
+    color: black;
+}
+#cover h1:before {
+    position: absolute;
+    top: 0.2em;
+    left: 0.1em;
+}
+#cover h1:after {
+    position: absolute;
+    top: 0.2em;
+    right: 0.1em;
+}
+#cover hr {
+    display: none;
+}
+
+hr:first-child {
+    display: none;
+}
+
+hr {
+    height: 0.2em;
+    background: #555;
+    color: #555;
+    margin-left: 0.5em;
+}
+
+#cover a:visited {
+    color: black;
+}
+
+/* endnote */
+#endnote {
+    color: black;
+}
+
+/* TOC */
+#toc {
+    position: relative;
+}
+#toc hr {
+}
+#toc h1 {
+}
+#toc ul {
+    font-size: 125%;
+    font-weight: bold;
+    margin-bottom: 1em;
+}
+#toc ul ul {
+    font-size: 90%;
+    font-weight: normal;
+    margin-bottom: 0;
+}
+#toc li {
+    list-style: none;
+
+}
+#toc a:link {
+    border-bottom: 0;
+}
+
+body {
+    margin: 0;
+    background: #222;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+/*  */
+#body {
+    position: relative;
+    margin: 0.5em;
+    padding: 0.5em;
+}
+/* ;, : */
+h1 {
+    color: #ff0;
+    border-bottom: solid #444 0.1em;
+}
+/* ::, :::, ::::, :::::, :::::: */
+h2, h3, h4, h5, h6 {
+    color: #dd0;
+}
+
+/* tables, figures */
+.fig caption {
+    color: gray;
+    text-align: center;
+    /* Required for Mozilla */
+    margin: auto;
+}
+.fig table {
+    border: none;
+    margin: auto;
+/*	border-collapse: collapse; */
+}
+/* / */
+.fig.table th {
+    border: none;
+    background: gray;
+    color: black;
+}
+/* [ */
+.fig.table td {
+    border: none;
+    background: silver;
+    color: black;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+}
+/* < */
+
+.fig.image table {
+    border: dashed silver 0.2em;
+    background: transparent;
+    /* Every browser should support border radii */
+    -moz-border-radius: 0.5em;
+    border-radius: 0.5em;
+
+}
+.fig.image tr, .fig.image td {
+    border: none;
+    background: transparent;
+    padding: 0;
+}
+
+/*  */
+p {
+    margin-right: 2%;
+    text-align: justify;
+    text-indent: 1em;
+}
+/* > */
+.example *
+{
+    background: transparent;
+}
+.example table
+{
+    margin: 0;
+    padding: 0;
+    table-layout: fixed;
+    width: 100%;
+    caption-side: top;
+    overflow: auto;
+}
+.example caption
+{
+    caption-side: top;
+
+}
+.example {
+}
+.example p {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+.example pre {
+    margin-top: 0;
+    font-family: Monospace;
+    padding: 1em;
+    border: dashed 0.3em gray;
+    background: #111;
+    color: white;
+    display: block;
+    overflow: auto;
+    /* Every browser should support border radii */
+    -moz-border-radius: 0.5em;
+    border-radius: 0.5em;
+}
+/* " */
+/*
+  .quote:before {
+  float: left;
+  font-size: 500%;
+  content: "\201C";
+  }
+  */
+/*
+  blockquote:after {
+  content: "\201D";
+  }*/
+.quote blockquote {
+    padding: 0.5em;
+    margin-left: 0.5em;
+    font-family: Serif;
+    border-left: solid 0.4em gray;
+    /*	background: #333;  */
+    color: white;
+}
+/* ^ */
+small {
+/*
+  color: silver;
+  font-size: 50%;
+  */
+}
+.footnote p {
+    color: silver;
+    margin: 0;
+}
+
+/* Popup footnotes */
+.footnote p {
+    display: none;
+}
+.footnote p:target {
+    display: block;
+    overflow: auto;
+    position: fixed;
+    left: auto;
+    bottom: 0;
+    right: 0;
+    max-width: 50%;
+    border: solid 0.3em white;
+    -moz-border-radius: 0.5em;
+    background: black;
+    padding: 0.2em;
+}
+
+/* { */
+.admonition * {
+    background: transparent;
+    color: white;
+}
+.admonition dl
+{
+    display: table;
+    margin: 0;
+    padding: 0;
+    background: #333;
+    border: dotted black 0.3em;
+    width: 90%
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+.admonition dt
+{
+    display: table-cell;
+    vertical-align: center;
+    border-right: solid silver 0.4em;
+    font-weight: bold;
+    font-size: 115%;
+    font-family: Serif;
+    background: gray;
+    width: 0;
+    text-shadow: black 0.15em 0.15em 0.15em;
+}
+.admonition dd
+{
+    padding-left: 0.4em;
+    display: table-cell;
+    width: 100%;
+    text-align: justify;
+}
+
+.admonition table
+{
+    margin: 0;
+    padding: 0;
+    background: #333;
+    border: dotted black 0.3em;
+    width: 90%
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+.admonition td {
+    width: 100%;
+    text-align: justify;
+}
+.admonition td:first-child:contains("Warning:") {
+    background: #900;
+}
+.admonition td:first-child:contains("Caution:") {
+    background: #960;
+}
+.admonition td:first-child:contains("Note:") {
+    background: #690;
+}
+.admonition td:first-child {
+    border-right: solid silver 0.4em;
+    font-weight: bold;
+    font-size: 115%;
+    font-family: Serif;
+    background: gray;
+    width: 0;
+    text-shadow: black 0.15em 0.15em 0.15em;
+}
+
+
+/* #(b) */
+/* b { color: olive; } */
+/* #(c) */
+tt {
+    color: #7f0;
+}
+/* ! keywords ... */
+p em {
+    color: gray;
+    font-style: normal;
+    font-weight: bold;
+}
+
+/* *, + */
+/* Bullet, numbe */
+li {
+    color: #f0f;
+}
+/* Text */
+li span, li p {
+    color: white;
+}
+li p {
+    color: red;
+    display: block;
+}
+ul {
+    list-style-type: square;
+}
+dl {
+    margin-left: 2%;
+    margin-top: 1em;
+}
+/* = */
+dt {
+    background: #181818;
+    padding: 0.2em;
+    font-variant: small-caps;
+    font-weight: bold;
+    color: #f0f;
+}
+dd {
+    color: white;
+    text-align: justify;
+    margin-right: 5%;
+}
+dt a:link, dt a:visited {
+    color: #f0f;
+}
+dt a:link:hover {
+    color: silver;
+    text-decoration: underline;
+}
diff --git a/sequencer/makefile.inc b/sequencer/makefile.inc
index 508b7a8..5b5a3a3 100644
--- a/sequencer/makefile.inc
+++ b/sequencer/makefile.inc
@@ -42,8 +42,7 @@ install: all
 	@ install -m 755 src/sequencer $(DESTDIR)$(prefix)/bin/non-sequencer
 	@ install -d "$(DESTDIR)$(SYSTEM_PATH)/instruments"
 	@ install -m 644 instruments/* "$(DESTDIR)$(SYSTEM_PATH)/instruments"
-	@ install -d "$(DESTDIR)$(DOCUMENT_PATH)"
-	@ install -m 644 doc/*.html doc/*.png "$(DESTDIR)$(DOCUMENT_PATH)"
+	@ $(MAKE) -s -C doc install
 	@ install -d "$(DESTDIR)$(PIXMAP_PATH)"
 	@ install -m 644 icons/hicolor/256x256/apps/non-sequencer.png "$(DESTDIR)$(PIXMAP_PATH)"/icon-256x256.png
 	@ install -d "$(DESTDIR)$(ICON_PATH)/hicolor"