diff --git a/README.md b/README.md
index 5b7dbc6..1a3b24e 100644
--- a/README.md
+++ b/README.md
@@ -68,11 +68,11 @@ Stored in a human-readable, flat-file database called [Indental](https://wiki.xx
 |            ---: | :---                                                                                                |
 |    STATSNUMTAGS | max limit of tags to show in menu                                                                   |
 |    STATSNUMTYPE | max limit of types to show in menu                                                                  |
-|    WIDEGRIDITEM | allow wide entries (`WIDE : true`)                                                                  |
+|    WIDEARTICLE | allow wide entries (`WIDE : true`)                                                                   |
 | AUTOWIDETRIGGER | automaticly wide entry if it has more QOTE entries than this number                                 |
 |      USEMASONRY | enable [masonry](https://masonry.desandro.com/) layout library usage                                |
 | MASONRYPROGRESS | masonry re-layout as images load (true), or only once all images complete (false)                   |
-|  GRIDITEMIDBASE | CSS name prefix                                                                                     |
+|  ARTICLEIDBASE | CSS name prefix                                                                                      |
 |       SHOWUPPER | toggle display of upper entry element(s)                                                            |
 |       SHOWTITLE | toggle display of entry title                                                                       |
 |        SHOWAUTH | toggle display of entry author(s)                                                                   |
diff --git a/docs/asset/style.css b/docs/asset/style.css
index 4130acc..f51b363 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -161,12 +161,12 @@ nav:hover {
 nav::-webkit-scrollbar {
   display: none;
 }
-.menu-itemgroup {
+.nav-itemgroup {
 	padding-bottom: var(--size-menu-itemgroup-sepv);
 	width: 100%;
   float: left;
 }
-.menu-item {
+.nav-item {
   padding-bottom: calc(var(--size-menu-item-sepv) / 2);
 	padding-top: calc(var(--size-menu-item-sepv) / 2);
 	font-size: var(--size-font-menutypes);
@@ -177,18 +177,18 @@ nav::-webkit-scrollbar {
 	width: 100%;
 	float: left;
 }
-.menu-item:hover {
+.nav-item:hover {
   color: var(--color-menuascent);
   opacity: var(--alpha-ascent);
 }
-.menu-itemcount {
+.nav-itemcount {
 	padding-right: calc(var(--size-menu-item-seph) / 2);
 	display: inline-block;
 	text-align: right;
 	float: left;
 	width: 50%;
 }
-.menu-itemicon {
+.nav-itemicon {
 	margin-left: calc(var(--size-menu-item-seph) / 2);
 	margin-top: calc(var(--size-font-bodytypes) / 10);
 	width: calc(var(--size-font-bodytypes) * 1.25);
@@ -196,11 +196,11 @@ nav::-webkit-scrollbar {
 	text-align: center;
 	float: left;
 }
-.menu-tagcontainer {
+.nav-tagcontainer {
 	margin: 0 auto;
 	display: table;
 }
-.menu-tagicon {
+.nav-tagicon {
 	padding-bottom: calc(var(--size-menu-item-sepv) / 2);
 	padding-top: calc(var(--size-menu-item-sepv) / 2);
 	font-size: var(--size-font-menutags);
@@ -211,7 +211,7 @@ nav::-webkit-scrollbar {
 	width: 100%;
 	float: left;
 }
-.menu-tag {
+.nav-tag {
   padding-bottom: calc(var(--size-menu-tag-sepv) / 2);
   padding-top: calc(var(--size-menu-tag-sepv) / 2);
   font-size: var(--size-font-body);
@@ -221,23 +221,23 @@ nav::-webkit-scrollbar {
   float: left;
   clear: left;
 }
-.menu-tagcount {
+.nav-tagcount {
 	padding-right: var(--size-menu-tag-sepv);
 	text-align: right;
 	float: left;
 }
-.menu-taglabel {
+.nav-taglabel {
 	text-align: left;
 	float: left;
 }
-.menu-tag:hover {
+.nav-tag:hover {
   opacity: var(--alpha-ascent);
 }
-.menu-tag:hover .menu-taglabel {
+.nav-tag:hover .nav-taglabel {
   background-color: var(--color-itemascent);
   color: var(--color-menubg);
 }
-.menu-tag:hover .menu-tagcount {
+.nav-tag:hover .nav-tagcount {
   color: var(--color-itemascent);
 }
 
@@ -258,7 +258,7 @@ main:after {
 }
 
 /* GRID ITEM */
-article, .griditem-wide {
+article, .article-wide {
   padding-bottom: var(--size-grid-gutter);
 	border-radius: var(--size-item-corner);
   margin-bottom: var(--size-grid-gutter);
@@ -269,7 +269,7 @@ article, .griditem-wide {
 	float: left;
 }
 @media screen and (min-width: 886px) {
-	.griditem-wide { 
+	.article-wide { 
 		width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
 	}
 }
@@ -279,22 +279,22 @@ article:hover {
 article::selection {
     background: var(--b_high);
 }
-.griditem-containerupper {
+.article-containerupper {
   padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
   display: inline-block;
   z-index: 100;
   width: 100%;
 }
-.griditem-containerlower {
+.article-containerlower {
   padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter);
   z-index: 100;
 }
-.griditem-containerlower:empty {
+.article-containerlower:empty {
   display: none;
 }
 
 /*IMAGE*/
-.griditem-containerupper-image {
+.article-containerupper-image {
   padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
   display: inline-block;
   position: absolute;
@@ -304,7 +304,7 @@ article::selection {
   z-index: 200;
   top: 0;
 }
-.griditem-containerlower-image {
+.article-containerlower-image {
   padding: var(--size-grid-gutter);
   position: absolute;
   width: 100%;
@@ -312,15 +312,15 @@ article::selection {
   z-index: 200;
   left: 0;
 }
-.griditem-containerlower-image:empty {
+.article-containerlower-image:empty {
   display: none;
 }
-.griditem-image {
+.article-image {
   background: transparent;
   padding-bottom: 0;
   overflow: hidden;
 }
-.griditem-image-img {
+.article-image-img {
   vertical-align: middle; /* vertical-align css hack removes bottom padding */
   object-fit: cover;
   margin-bottom: 0px;
@@ -331,7 +331,7 @@ article::selection {
   top: 0;
   left: 0;
 }
-.griditem-img {
+.article-img {
   vertical-align: middle; /* vertical-align css hack removes bottom padding */
   width: calc(100% + var(--size-grid-gutter)*2);
   max-height: 1000px;
@@ -348,41 +348,41 @@ article::selection {
   z-index: 150;
   opacity: 0;
 }
-.griditem-image:hover .image-overlay { 
+.article-image:hover .image-overlay { 
   opacity: var(--alpha-darken);
 }
-.griditem-image .griditem-link {
+.article-image .article-link {
   display: none;
 }
-.griditem-image:hover .griditem-link {
+.article-image:hover .article-link {
   display: initial;
   text-shadow: 0 0 3em #000;
 }
 
 /* TITLE */
-.griditem-title { 
+.article-title { 
   color: var(--color-item);
   font-size: var(--size-font-title);
   text-decoration: none;
   float: left;
   clear: both;
 }
-.griditem-image .griditem-title {
+.article-image .article-title {
   display: none;
 }
-.griditem-image:hover .griditem-title {
+.article-image:hover .article-title {
   display: initial;
   text-shadow: 0 0 3em #000;
   color: white;
 }
 
 /* LINK */
-.griditem-linkcontainer { 
+.article-linkcontainer { 
   margin-top: var(--size-item-elem-padding);
   float: left;
   clear: both;
 }
-.griditem-link {
+.article-link {
   width: calc(100% - var(--size-font-bodytypes) * 2);
   float: left;
   clear: both;
@@ -390,37 +390,37 @@ article::selection {
   display: inline-block;
 }
 
-.griditem-linktitle { 
+.article-linktitle { 
   opacity: var(--alpha-idle);
   color: var(--color-item);
   font-size: var(--size-font-body);
   float: left;
 }
-.griditem-link:hover .griditem-linktitle { 
+.article-link:hover .article-linktitle { 
   background-color: var(--color-itemascent);
   color: var(--color-itembg);
 }
-.griditem-linkicon { 
+.article-linkicon { 
   width: 23px;
   font-size: 15px;
   color: var(--color-item);
   float: left;
 }
-article:hover .griditem-linktitle {
+article:hover .article-linktitle {
   opacity: var(--alpha-enabled);
 }
-.griditem-link:hover .griditem-linktitle {
+.article-link:hover .article-linktitle {
   opacity: var(--alpha-ascent);
 }
 
 /* TYPE */
-.griditem-typecontainer {
+.article-typecontainer {
   position: absolute;
   right: 0px;
   top: 0px;
   margin-right: var(--size-grid-gutter);
 }
-.griditem-type {
+.article-type {
   width: calc(var(--size-font-bodytypes)*2);
   color: var(--color-item);
   padding-bottom: var(--size-grid-gutter);
@@ -431,21 +431,21 @@ article:hover .griditem-linktitle {
   float: right;
   text-decoration: none;
 }
-.griditem-image .griditem-typeicon {
+.article-image .article-typeicon {
   display: none;
 }
-.griditem-image:hover .griditem-typeicon  {
+.article-image:hover .article-typeicon  {
   display: initial;
   color: var(--color-image);
 }
-.griditem-typeicon {
+.article-typeicon {
   opacity: var(--alpha-idleicon);
 }
-article:hover .griditem-typeicon {
+article:hover .article-typeicon {
   opacity: var(--alpha-enabledicon);
   color: var(--color-item);
 }
-.griditem-type:hover .griditem-typeicon {
+.article-type:hover .article-typeicon {
   opacity: var(--alpha-ascent);
   color: var(--color-itemascent);
 }
@@ -458,61 +458,61 @@ article:hover .griditem-typeicon {
 article:hover .article-icon {
   opacity: var(--alpha-enabledicon);
 }
-.griditem-row {
+.article-row {
   padding-top: var(--size-item-elem-padding);
   color: var(--color-item); 
   font-size: var(--size-font-body);
   float: left;
   clear: both;
 }
-article:hover .griditem-row {
+article:hover .article-row {
   color: var(--color-item);
 }
-.griditem-image .griditem-row {
+.article-image .article-row {
   color: var(--color-image); 
 }
-.griditem-rowtext {
+.article-rowtext {
   display: inline;
   opacity: var(--alpha-idle);
 }
-article:hover .griditem-rowtext {
+article:hover .article-rowtext {
   opacity: var(--alpha-enabled);
 }
-.griditem-file {
+.article-file {
   word-break: break-all;
 }
-.griditem-file-link {
+.article-file-link {
   color: var(--color-item); 
   text-decoration: none;
 }
-.griditem-file-link:hover {
+.article-file-link:hover {
   background-color: var(--color-itemascent);
   color: var(--color-itembg);
   word-break: break-all;
 }
 
 /* IMAGE */
-.griditem-containerlower-image {
+.article-containerlower-image {
   display: none;
 }
-.griditem-image:hover .griditem-containerlower-image {
+.article-image:hover .article-containerlower-image {
   display: initial;
 }
-.griditem-taglink {
+.article-taglink {
   color: var(--color-item); 
   text-decoration:none; 
 }
-article:hover .griditem-taglink {
+article:hover .article-taglink {
   color: var(--color-item); 
 }
-article:hover .griditem-taglink:hover {
+article:hover .article-taglink:hover {
   background-color: var(--color-itemascent);
   color: var(--color-itembg);
 }
-.griditem-image:hover .griditem-taglink {
+.article-image:hover .article-taglink {
   color: #fff; 
 }
-.griditem-image:hover .griditem-taglink:hover {
+.article-image:hover .article-taglink:hover {
   color: #fff; 
 }
 
diff --git a/docs/content/settings.js b/docs/content/settings.js
index 7d02f2f..3eda02c 100644
--- a/docs/content/settings.js
+++ b/docs/content/settings.js
@@ -2,11 +2,11 @@ const SETTINGS =
 {
 	STATSNUMTAGS: 5,
 	STATSNUMTYPE: 10,
-	WIDEGRIDITEM: true,
+	WIDEARTICLE: true,
 	AUTOWIDETRIGGER: 4,
 	USEMASONRY: true,
 	MASONRYPROGRESS: true,
-	GRIDITEMIDBASE: 'item',
+	ARTICLEIDBASE: 'item',
 	SHOWUPPER: true,
 	SHOWTITLE: true,
 	SHOWDATE: true,
diff --git a/docs/logic/view.js b/docs/logic/view.js
index 25e5f6b..a5499c7 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -73,17 +73,17 @@ function View()
   {
     let value = db[key];
     let itemClass = "article";
-    if (SETTINGS.WIDEGRIDITEM)
+    if (SETTINGS.WIDEARTICLE)
     {
       if (this.isDefined(value.WIDE) && value.WIDE)
       {
-        itemClass += " griditem-wide";
+        itemClass += " article-wide";
       }
       else if (this.isDefined(value.QOTE))
       {
         if (Array.isArray(value.QOTE) && value.QOTE.length > SETTINGS.AUTOWIDETRIGGER)
         {
-          itemClass += " griditem-wide";
+          itemClass += " article-wide";
         } 
       }
     }
@@ -92,13 +92,13 @@ function View()
     let entryIsImageType = (SETTINGS.SHOWIMAG && this.isType(value.TYPE, 'image'));
     if (entryIsImageType)
     {
-      itemClass += " griditem-image";
+      itemClass += " article-image";
       onclickImage = `onclick="main.view.handleImageClick(event, this, '${value.FILE}');"
         style="cursor: pointer;"`;
     }
 
     // ARTICLE
-    let entry = `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
+    let entry = `<article class="${itemClass}" id="${SETTINGS.ARTICLEIDBASE + value.DIID}">`;
     if (this.isDefined(value.LINK))
     {
       var idUrl = "url";
@@ -111,24 +111,24 @@ function View()
       if (SETTINGS.SHOWLINK && !this.isObject(value.LINK))
       {
         // If this item has only one link then make the whole title the link
-        entry += `<a class="griditem-link" href="${String(value.LINK)}" id="${idUrl}">`;
+        entry += `<a class="article-link" href="${String(value.LINK)}" id="${idUrl}">`;
       }
     }
 
     // UPPER CONTENT START
     if (SETTINGS.SHOWUPPER)
     {
-      let upperClass = 'griditem-containerupper';
+      let upperClass = 'article-containerupper';
       if (entryIsImageType)
       {
-        upperClass = 'griditem-containerupper-image';
+        upperClass = 'article-containerupper-image';
       }
       entry += `<div class="${upperClass}" ${onclickImage}>`;
 
       // TITLE
       if (SETTINGS.SHOWTITLE)
       {
-        entry += `<header class="griditem-title">${key.to_properCase()}</header>`;
+        entry += `<header class="article-title">${key.to_properCase()}</header>`;
       }
 
       // LINK END
@@ -138,13 +138,13 @@ function View()
         {
           for (let l = 0; l < value.LINK.length; l++)
           {
-            entry += `<a class="griditem-link" href="${String(value.LINK[l])}" id="${idUrl}">`;
-            entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
+            entry += `<a class="article-link" href="${String(value.LINK[l])}" id="${idUrl}">`;
+            entry += `<div class="article-linkcontainer"><div class="article-linkicon">${this.buildIcon('link')}</div><div class="article-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
           }
         }
         else
         {
-          entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
+          entry += `<div class="article-linkcontainer"><div class="article-linkicon">${this.buildIcon('link')}</div><div class="article-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
         }
       }
 
@@ -152,11 +152,11 @@ function View()
       if (SETTINGS.SHOWTYPE && this.isDefined(value.TYPE))
       {
 
-        entry += `<div class="griditem-typecontainer">`;
+        entry += `<div class="article-typecontainer">`;
         for (let tc = 0; tc < value.TYPE.length; tc++)
         {
-          entry += `<a class="griditem-type" href='#type-${value.TYPE[tc]}'>`;
-          entry += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'griditem-typeicon');
+          entry += `<a class="article-type" href='#type-${value.TYPE[tc]}'>`;
+          entry += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'article-typeicon');
           entry += `</a>`;
         }
         entry += `</div>`;
@@ -169,10 +169,10 @@ function View()
     // LOWER CONTENT START
     if (SETTINGS.SHOWLOWER)
     {
-      let lowerClass = 'griditem-containerlower';
+      let lowerClass = 'article-containerlower';
       if (entryIsImageType)
       {
-        lowerClass = 'griditem-containerlower-image';
+        lowerClass = 'article-containerlower-image';
       }
       entry += `<div class="${lowerClass}" ${onclickImage}>`;
 
@@ -197,7 +197,7 @@ function View()
         let content = '';
         for (var i = 0; i < value.TAGS.length; i++)
         {
-          content += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
+          content += `<a class="article-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
           if (i + 1 !== value.TAGS.length)
           {
             content += `, `;
@@ -212,7 +212,7 @@ function View()
         let content = '';
         for (var i = 0; i < value.PROJ.length; i++)
         {
-          content += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
+          content += `<a class="article-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
           if (i + 1 != value.PROJ.length)
           {
             content += `, `;
@@ -252,7 +252,7 @@ function View()
         && this.isImage(value.FILE))
       {
         entry += `<div class="image">`;
-        entry += `<img class="griditem-img" src="content/media/${value.FILE}" onclick="lightbox.load('content/media/${value.FILE}')">`;
+        entry += `<img class="article-img" src="content/media/${value.FILE}" onclick="lightbox.load('content/media/${value.FILE}')">`;
         entry += `</div>`;
       }
 
@@ -263,13 +263,13 @@ function View()
         {
           for (var i = 0; i < value.FILE.length; i++) 
           {
-            entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a>`, 'griditem-file');
+            entry += this.doRow('file', `<a class="article-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a>`, 'article-file');
           }
         }
         else
         {
           // single
-          entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a>`, 'griditem-file');
+          entry += this.doRow('file', `<a class="article-file-link" href="content/media/${value.FILE}">${value.FILE}</a>`, 'article-file');
         }
       }
 
@@ -287,7 +287,7 @@ function View()
       {
         entry += `<div class="image-overlay"></div>`;
       }
-      entry += `<img class="griditem-image-img" src="content/media/${value.FILE}">`;
+      entry += `<img class="article-image-img" src="content/media/${value.FILE}">`;
       entry += `</div>`;
     }
 
@@ -297,90 +297,89 @@ function View()
 
   this.doRow = function(type, content, extraClass)
   {
-    return `<div class="griditem-row${extraClass != undefined ? ' '+extraClass : ''}">
+    return `<div class="article-row${extraClass != undefined ? ' '+extraClass : ''}">
     ${type != undefined ? this.buildIcon(type) : ''}
-    <div class="griditem-rowtext">${content}</div>
+    <div class="article-rowtext">${content}</div>
     </div>`;
   }
 
   this.stats = function(value)
   {
-    let menuContent = ``;
+    let navContent = ``;
     if (window.showAdd !== undefined && window.showAdd)
     {
       // ADD
-      menuContent += `<div class="menu-itemgroup">`;
-      menuContent += `<a href='#add' class="menu-item">`;
-      menuContent += `<b>a</b>dd`;
-      menuContent += `</a>`;
-      menuContent += `</div>`;
+      navContent += `<div class="nav-itemgroup">`;
+      navContent += `<a href='#add' class="nav-item">`;
+      navContent += `<b>a</b>dd`;
+      navContent += `</a>`;
+      navContent += `</div>`;
     }
 
     // TOTAL
-    menuContent += `<div class="menu-itemgroup">`;
-    menuContent += `<a href='#' class="menu-item">`;
-    menuContent += `<div class="menu-itemcount">${value.total}</div>`;
-    menuContent += `<i title="all" class="menu-itemicon fas fa-asterisk"></i>`;
-    menuContent += `</a>`;
-    menuContent += `</div>`;
+    navContent += `<div class="nav-itemgroup">`;
+    navContent += `<a href='#' class="nav-item">`;
+    navContent += `<div class="nav-itemcount">${value.total}</div>`;
+    navContent += `<i title="all" class="nav-itemicon fas fa-asterisk"></i>`;
+    navContent += `</a>`;
+    navContent += `</div>`;
 
     // DONE
     if (SETTINGS.SHOWDONE)
     {
-      menuContent += `<div class="menu-itemgroup">`;
-      menuContent += `<a href='#done-true' class="menu-item">`;
-      menuContent += `<div class="menu-itemcount">${value.done}</div>`;
-      menuContent += `<i title="done" class="menu-itemicon fas fa-check"></i>`;
-      menuContent += `</a>`;
-      menuContent += `<a href='#done-false' class="menu-item">`;
-      menuContent += `<div class="menu-itemcount">${value.total - value.done}</div>`;
-      menuContent += `<i title="to do" class="menu-itemicon fas fa-times"></i>`;
-      menuContent += `</a>`;
-      menuContent += `</div>`;
+      navContent += `<div class="nav-itemgroup">`;
+      navContent += `<a href='#done-true' class="nav-item">`;
+      navContent += `<div class="nav-itemcount">${value.done}</div>`;
+      navContent += `<i title="done" class="nav-itemicon fas fa-check"></i>`;
+      navContent += `</a>`;
+      navContent += `<a href='#done-false' class="nav-item">`;
+      navContent += `<div class="nav-itemcount">${value.total - value.done}</div>`;
+      navContent += `<i title="to do" class="nav-itemicon fas fa-times"></i>`;
+      navContent += `</a>`;
+      navContent += `</div>`;
     }
 
-    menuContent += `<div class="menu-itemgroup">`;
+    navContent += `<div class="nav-itemgroup">`;
     for (let ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++) 
     {
       const type = value.types[ty][0];
       const count = value.types[ty][1];
       const icon = this.getIcon(type);
-      menuContent += `<a href='#type-${type}' class="menu-item">`;
-      menuContent += `<div class="menu-itemcount">${count}</div>`;
-      menuContent += `<i title="${type}" class="menu-itemicon ${icon}"></i>`;
-      menuContent += `</a>`;
+      navContent += `<a href='#type-${type}' class="nav-item">`;
+      navContent += `<div class="nav-itemcount">${count}</div>`;
+      navContent += `<i title="${type}" class="nav-itemicon ${icon}"></i>`;
+      navContent += `</a>`;
     }
-    menuContent += `</div>`;
+    navContent += `</div>`;
 
     // TERM
-    menuContent += `<div class="menu-itemgroup">`;
+    navContent += `<div class="nav-itemgroup">`;
     if (value.terms > 0)
     {
-      // menuContent += `<div class="menu-item-space"></div>`;
-      menuContent += `<a href='#term' class="menu-item">`;
-      menuContent += `<div class="menu-itemcount">${value.terms}</div>`;
-      menuContent += `<i title="terms" class="menu-itemicon fas fa-ribbon"></i>`;
-      menuContent += `</a>`;
+      navContent += `<a href='#term' class="nav-item">`;
+      navContent += `<div class="nav-itemcount">${value.terms}</div>`;
+      navContent += `<i title="terms" class="nav-itemicon fas fa-ribbon"></i>`;
+      navContent += `</a>`;
     }
-    menuContent += `</div>`;
+    navContent += `</div>`;
 
     // TAGS
-    menuContent += `<div class="menu-itemgroup">`;
+    navContent += `<div class="nav-itemgroup">`;
     if (value.tags.length > 0)
     {
-      menuContent += `<div class="menu-tagcontainer">`;
-      menuContent += `<i title="tags" class="menu-tagicon fas fa-tag"></i>`;
+      navContent += `<div class="nav-tagcontainer">`;
+      navContent += `<i title="tags" class="nav-tagicon fas fa-tag"></i>`;
       for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++) 
       {
-        menuContent += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
-        menuContent += `<div class="menu-tagcount">${value.tags[t][1]}</div>`;
-        menuContent += `<div class="menu-taglabel">${value.tags[t][0]}</div>`;
-        menuContent += `</a>`;
+        navContent += `<a class="nav-tag" href='#tag-${value.tags[t][0]}'>`;
+        navContent += `<div class="nav-tagcount">${value.tags[t][1]}</div>`;
+        navContent += `<div class="nav-taglabel">${value.tags[t][0]}</div>`;
+        navContent += `</a>`;
       }
-      menuContent += `</div>`;
+      navContent += `</div>`;
     }
-    menuContent += `</div>`;
-    this.nav.innerHTML = menuContent;
+    navContent += `</div>`;
+    this.nav.innerHTML = navContent;
   }
 
   this.handleImageClick = function(e, element, file)