diff --git a/src/css/button.css b/src/css/button.css
index ce791cdd..047fd13d 100755
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -5,7 +5,7 @@ input[type="reset"],
 input[type="submit"] {
   background-color: rgb(var(--button-background));
   padding: 0.25em 1em;
-  margin: 0 0 1em 0;
+  margin: 0;
   color: rgb(var(--button-text));
   font-size: 1em;
   font-family: var(--theme-font-ui-name);
@@ -207,11 +207,3 @@ button [class*=" button-"]:last-child,
   background-color: transparent;
   color: transparent;
 }
-
-.button-wrap {
-  padding: 0.5em 0;
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-}
diff --git a/src/css/form.css b/src/css/form.css
index f5a4f0e3..dcbaaf1e 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1,3 +1,76 @@
+/* form variants */
+.form-wrap,
+.form-helper {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+.form-wrap:not(:first-child) {
+  margin-top: var(--form-wrap-space);
+}
+
+.form-wrap:not(:last-child) {
+  margin-bottom: var(--form-wrap-space);
+}
+
+.form-wrap-hide-space:not(:first-child),
+.form-wrap-hide-space:not(:last-child) {
+  margin-top: calc(var(--form-wrap-space) * -1);
+  margin-bottom: 0;
+}
+
+.form-helper:not(:first-child) {
+  margin-top: calc(var(--form-wrap-space) / 2);
+}
+
+.form-helper:not(:last-child) {
+  margin-bottom: calc(var(--form-wrap-space) / 2);
+}
+
+.form-indent {
+  margin-left: calc(var(--form-wrap-space) * 3);
+}
+
+.form-inline {
+  margin: calc(calc(var(--form-wrap-space) / 2) * -1);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.form-inline>*,
+.form-inline>.form-wrap:not(:first-child),
+.form-inline>.form-wrap:not(:last-child) {
+  margin: calc(var(--form-wrap-space) / 2);
+  flex-grow: 0;
+  width: initial;
+  display: inline-block;
+}
+
+.form-inline-spacer>*.form-wrap:not(:last-child) {
+  margin-right: calc(var(--form-wrap-space) * 3);
+}
+
+.form-inline-space-between {
+  justify-content: space-between;
+}
+
+.form-inline-space-around {
+  justify-content: space-around;
+}
+
+.form-sticky {
+  background-color: rgb(var(--theme-color-01));
+  margin: -1.5em -1em 0 -1em;
+  padding: 1.5em 1em 1em 1em;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 /* label */
 label {
   padding: 0;
@@ -5,10 +78,11 @@ label {
   margin-bottom: 0;
   font-size: 1em;
   display: block;
+  transition: color var(--layout-timing-extra-fast);
 }
 
 label:not(:only-child):not(:last-child) {
-  padding-bottom: 0.5em;
+  padding-bottom: calc(var(--form-wrap-space) / 2);
 }
 
 label.disabled {
@@ -29,7 +103,7 @@ select {
     0.5em 0.375em;
   background-repeat: no-repeat;
   padding: 0 3em 0 1em;
-  margin: 0 0 1em 0;
+  margin: 0;
   color: rgb(var(--form-label));
   font-size: 1em;
   font-family: var(--theme-font-ui-name);
@@ -92,7 +166,7 @@ select:disabled:active {
 textarea {
   background-color: rgb(var(--form-input-background));
   padding: 0.25em 1em;
-  margin: 0 0 1em 0;
+  margin: 0;
   color: rgb(var(--form-input-text));
   font-size: 1em;
   line-height: 1.6;
@@ -173,7 +247,7 @@ input[type="tel"],
 input[type="text"] {
   background-color: rgb(var(--form-input-background));
   padding: 0 1em;
-  margin: 0 0 1em 0;
+  margin: 0;
   color: rgb(var(--form-input-text));
   font-size: 1em;
   font-family: var(--theme-font-ui-name);
@@ -539,7 +613,7 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
 input[type="color"] {
   background-color: transparent;
   padding: 0;
-  margin: 0 0 1em 0;
+  margin: 0;
   width: 100%;
   min-width: 3em;
   height: 2.5em;
@@ -830,38 +904,26 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 /* form helper */
-.form-helper {
-  padding: 0.5em 0;
+.form-helper-item {
+  font-size: 0.8em;
   color: rgb(var(--form-helper));
   transition: color var(--layout-timing-extra-fast);
 }
 
-.form-helper.disabled {
+.form-helper-item.disabled {
   color: rgb(var(--form-helper-disabled));
 }
 
-.form-helper:not(:last-child) {
-  margin-bottom: 0;
-}
-
-/* input variants */
-.input-wrap {
-  padding: 0.5em 0;
+/* form input button */
+.form-input-button {
   position: relative;
-  width: 100%;
-  display: block;
-}
-
-.input-button-inline {
-  width: initial;
   display: inline-block;
 }
 
-/* input button */
-.input-button input[type="checkbox"]+label,
-.input-button input[type="radio"]+label,
-.input-button input[type="color"]+label,
-.input-button input[type="file"]+label {
+.form-input-button input[type="checkbox"]+label,
+.form-input-button input[type="radio"]+label,
+.form-input-button input[type="color"]+label,
+.form-input-button input[type="file"]+label {
   background-color: rgb(var(--button-background));
   padding: 0.25em 1em;
   margin: 0;
@@ -888,24 +950,24 @@ input[type="range"]:disabled::-moz-range-progress {
   transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
 }
 
-.input-button input[type="checkbox"]:focus+label,
-.input-button input[type="checkbox"]:hover+label,
-.input-button input[type="radio"]:focus+label,
-.input-button input[type="radio"]:hover+label,
-.input-button input[type="color"]:focus+label,
-.input-button input[type="color"]:hover+label,
-.input-button input[type="file"]:focus+label,
-.input-button input[type="file"]:hover+label {
+.form-input-button input[type="checkbox"]:focus+label,
+.form-input-button input[type="checkbox"]:hover+label,
+.form-input-button input[type="radio"]:focus+label,
+.form-input-button input[type="radio"]:hover+label,
+.form-input-button input[type="color"]:focus+label,
+.form-input-button input[type="color"]:hover+label,
+.form-input-button input[type="file"]:focus+label,
+.form-input-button input[type="file"]:hover+label {
   background-color: rgb(var(--button-background-focus-hover));
   color: rgb(var(--button-text-focus-hover));
   outline: none;
   text-decoration: none;
 }
 
-.input-button input[type="checkbox"]:active+label,
-.input-button input[type="radio"]:active+label,
-.input-button input[type="color"]:active+label,
-.input-button input[type="file"]:active+label {
+.form-input-button input[type="checkbox"]:active+label,
+.form-input-button input[type="radio"]:active+label,
+.form-input-button input[type="color"]:active+label,
+.form-input-button input[type="file"]:active+label {
   background-color: rgb(var(--button-background-active));
   color: rgb(var(--button-text-active));
   outline: none;
@@ -913,10 +975,10 @@ input[type="range"]:disabled::-moz-range-progress {
   transition: none;
 }
 
-.input-button input[type="checkbox"]:checked+label,
-.input-button input[type="radio"]:checked+label,
-.input-button input[type="color"]:checked+label,
-.input-button input[type="file"]:checked+label {
+.form-input-button input[type="checkbox"]:checked+label,
+.form-input-button input[type="radio"]:checked+label,
+.form-input-button input[type="color"]:checked+label,
+.form-input-button input[type="file"]:checked+label {
   background-color: rgb(var(--button-background-active));
   color: rgb(var(--button-text-active));
   outline: none;
@@ -924,37 +986,37 @@ input[type="range"]:disabled::-moz-range-progress {
   transition: none;
 }
 
-.input-button input[type="checkbox"]:disabled+label,
-.input-button input[type="checkbox"]:disabled:hover+label,
-.input-button input[type="checkbox"]:disabled:focus+label,
-.input-button input[type="checkbox"]:disabled:active+label,
-.input-button input[type="radio"]:disabled+label,
-.input-button input[type="radio"]:disabled:hover+label,
-.input-button input[type="radio"]:disabled:focus+label,
-.input-button input[type="radio"]:disabled:active+label,
-.input-button input[type="color"]:disabled+label,
-.input-button input[type="color"]:disabled:hover+label,
-.input-button input[type="color"]:disabled:focus+label,
-.input-button input[type="color"]:disabled:active+label,
-.input-button input[type="file"]:disabled+label,
-.input-button input[type="file"]:disabled:hover+label,
-.input-button input[type="file"]:disabled:focus+label,
-.input-button input[type="file"]:disabled:active+label {
+.form-input-button input[type="checkbox"]:disabled+label,
+.form-input-button input[type="checkbox"]:disabled:hover+label,
+.form-input-button input[type="checkbox"]:disabled:focus+label,
+.form-input-button input[type="checkbox"]:disabled:active+label,
+.form-input-button input[type="radio"]:disabled+label,
+.form-input-button input[type="radio"]:disabled:hover+label,
+.form-input-button input[type="radio"]:disabled:focus+label,
+.form-input-button input[type="radio"]:disabled:active+label,
+.form-input-button input[type="color"]:disabled+label,
+.form-input-button input[type="color"]:disabled:hover+label,
+.form-input-button input[type="color"]:disabled:focus+label,
+.form-input-button input[type="color"]:disabled:active+label,
+.form-input-button input[type="file"]:disabled+label,
+.form-input-button input[type="file"]:disabled:hover+label,
+.form-input-button input[type="file"]:disabled:focus+label,
+.form-input-button input[type="file"]:disabled:active+label {
   background-color: rgb(var(--button-background-disabled));
   color: rgb(var(--button-text-disabled));
   cursor: default;
   text-decoration: none;
 }
 
-.input-button input[type="checkbox"]+label .label-icon,
-.input-button input[type="radio"]+label .label-icon {
+.form-input-button input[type="checkbox"]+label .label-icon,
+.form-input-button input[type="radio"]+label .label-icon {
   top: inherit;
 }
 
-.input-button input[type="checkbox"]+label:after,
-.input-button input[type="radio"]+label:after,
-.input-button input[type="color"]+label:after,
-.input-button input[type="file"]+label:after {
+.form-input-button input[type="checkbox"]+label:after,
+.form-input-button input[type="radio"]+label:after,
+.form-input-button input[type="color"]+label:after,
+.form-input-button input[type="file"]+label:after {
   background: rgb(var(--button-border));
   position: absolute;
   content: "";
@@ -965,105 +1027,105 @@ input[type="range"]:disabled::-moz-range-progress {
   transition: background-color var(--layout-timing-extra-fast);
 }
 
-.input-button input[type="checkbox"]:focus+label:after,
-.input-button input[type="checkbox"]:hover+label:after,
-.input-button input[type="radio"]:focus+label:after,
-.input-button input[type="radio"]:hover+label:after,
-.input-button input[type="color"]:focus+label:after,
-.input-button input[type="color"]:hover+label:after,
-.input-button input[type="file"]:focus+label:after,
-.input-button input[type="file"]:hover+label:after {
+.form-input-button input[type="checkbox"]:focus+label:after,
+.form-input-button input[type="checkbox"]:hover+label:after,
+.form-input-button input[type="radio"]:focus+label:after,
+.form-input-button input[type="radio"]:hover+label:after,
+.form-input-button input[type="color"]:focus+label:after,
+.form-input-button input[type="color"]:hover+label:after,
+.form-input-button input[type="file"]:focus+label:after,
+.form-input-button input[type="file"]:hover+label:after {
   background-color: rgb(var(--button-border-focus-hover));
 }
 
-.input-button input[type="checkbox"]:active+label:after,
-.input-button input[type="radio"]:active+label:after,
-.input-button input[type="color"]:active+label:after,
-.input-button input[type="file"]:active+label:after {
+.form-input-button input[type="checkbox"]:active+label:after,
+.form-input-button input[type="radio"]:active+label:after,
+.form-input-button input[type="color"]:active+label:after,
+.form-input-button input[type="file"]:active+label:after {
   background-color: rgb(var(--button-border-active));
   transition: none;
 }
 
-.input-button input[type="checkbox"]:checked+label:after,
-.input-button input[type="radio"]:checked+label:after,
-.input-button input[type="color"]:checked+label:after,
-.input-button input[type="file"]:checked+label:after {
+.form-input-button input[type="checkbox"]:checked+label:after,
+.form-input-button input[type="radio"]:checked+label:after,
+.form-input-button input[type="color"]:checked+label:after,
+.form-input-button input[type="file"]:checked+label:after {
   background-color: rgb(var(--button-border-active));
   transition: none;
 }
 
-.input-button input[type="checkbox"]:disabled+label:after,
-.input-button input[type="checkbox"]:disabled:hover+label:after,
-.input-button input[type="checkbox"]:disabled:focus+label:after,
-.input-button input[type="checkbox"]:disabled:active+label:after,
-.input-button input[type="radio"]:disabled+label:after,
-.input-button input[type="radio"]:disabled:hover+label:after,
-.input-button input[type="radio"]:disabled:focus+label:after,
-.input-button input[type="radio"]:disabled:active+label:after,
-.input-button input[type="color"]:disabled+label:after,
-.input-button input[type="color"]:disabled:hover+label:after,
-.input-button input[type="color"]:disabled:focus+label:after,
-.input-button input[type="color"]:disabled:active+label:after,
-.input-button input[type="file"]:disabled+label:after,
-.input-button input[type="file"]:disabled:hover+label:after,
-.input-button input[type="file"]:disabled:focus+label:after,
-.input-button input[type="file"]:disabled:active+label:after {
+.form-input-button input[type="checkbox"]:disabled+label:after,
+.form-input-button input[type="checkbox"]:disabled:hover+label:after,
+.form-input-button input[type="checkbox"]:disabled:focus+label:after,
+.form-input-button input[type="checkbox"]:disabled:active+label:after,
+.form-input-button input[type="radio"]:disabled+label:after,
+.form-input-button input[type="radio"]:disabled:hover+label:after,
+.form-input-button input[type="radio"]:disabled:focus+label:after,
+.form-input-button input[type="radio"]:disabled:active+label:after,
+.form-input-button input[type="color"]:disabled+label:after,
+.form-input-button input[type="color"]:disabled:hover+label:after,
+.form-input-button input[type="color"]:disabled:focus+label:after,
+.form-input-button input[type="color"]:disabled:active+label:after,
+.form-input-button input[type="file"]:disabled+label:after,
+.form-input-button input[type="file"]:disabled:hover+label:after,
+.form-input-button input[type="file"]:disabled:focus+label:after,
+.form-input-button input[type="file"]:disabled:active+label:after {
   background-color: rgb(var(--button-border-disabled));
 }
 
-/* input button link */
-.input-button-link input[type="checkbox"]+label,
-.input-button-link input[type="radio"]+label,
-.input-button-link input[type="color"]+label,
-.input-button-link input[type="file"]+label {
+/* form input button link */
+.form-input-button-link input[type="checkbox"]+label,
+.form-input-button-link input[type="radio"]+label,
+.form-input-button-link input[type="color"]+label,
+.form-input-button-link input[type="file"]+label {
   background-color: transparent;
 }
 
-.input-button-link input[type="checkbox"]:hover+label,
-.input-button-link input[type="checkbox"]:focus+label,
-.input-button-link input[type="checkbox"]:checked+label,
-.input-button-link input[type="radio"]:hover+label,
-.input-button-link input[type="radio"]:focus+label,
-.input-button-link input[type="radio"]:checked+label,
-.input-button-link input[type="color"]:hover+label,
-.input-button-link input[type="color"]:focus+label,
-.input-button-link input[type="color"]:checked+label,
-.input-button-link input[type="file"]:hover+label,
-.input-button-link input[type="file"]:focus+label,
-.input-button-link input[type="file"]:checked+label {
+.form-input-button-link input[type="checkbox"]:hover+label,
+.form-input-button-link input[type="checkbox"]:focus+label,
+.form-input-button-link input[type="checkbox"]:checked+label,
+.form-input-button-link input[type="radio"]:hover+label,
+.form-input-button-link input[type="radio"]:focus+label,
+.form-input-button-link input[type="radio"]:checked+label,
+.form-input-button-link input[type="color"]:hover+label,
+.form-input-button-link input[type="color"]:focus+label,
+.form-input-button-link input[type="color"]:checked+label,
+.form-input-button-link input[type="file"]:hover+label,
+.form-input-button-link input[type="file"]:focus+label,
+.form-input-button-link input[type="file"]:checked+label {
   background-color: transparent;
 }
 
-.input-button-link input[type="checkbox"]:active+label,
-.input-button-link input[type="radio"]:active+label,
-.input-button-link input[type="color"]:active+label,
-.input-button-link input[type="file"]:active+label {
+.form-input-button-link input[type="checkbox"]:active+label,
+.form-input-button-link input[type="radio"]:active+label,
+.form-input-button-link input[type="color"]:active+label,
+.form-input-button-link input[type="file"]:active+label {
   background-color: transparent;
 }
 
-.input-button-link input:disabled[type="checkbox"]+label,
-.input-button-link input:disabled[type="radio"]+label,
-.input-button-link input:disabled[type="color"]+label,
-.input-button-link input:disabled[type="file"]+label {
+.form-input-button-link input:disabled[type="checkbox"]+label,
+.form-input-button-link input:disabled[type="radio"]+label,
+.form-input-button-link input:disabled[type="color"]+label,
+.form-input-button-link input:disabled[type="file"]+label {
   background-color: transparent;
   pointer-events: none;
 }
 
-.input-button-link input:disabled[type="checkbox"]:hover+label,
-.input-button-link input:disabled[type="checkbox"]:focus+label,
-.input-button-link input:disabled[type="radio"]:hover+label,
-.input-button-link input:disabled[type="radio"]:focus+label,
-.input-button-link input:disabled[type="color"]:hover+label,
-.input-button-link input:disabled[type="color"]:focus+label,
-.input-button-link input:disabled[type="file"]:hover+label,
-.input-button-link input:disabled[type="file"]:focus+label {
+.form-input-button-link input:disabled[type="checkbox"]:hover+label,
+.form-input-button-link input:disabled[type="checkbox"]:focus+label,
+.form-input-button-link input:disabled[type="radio"]:hover+label,
+.form-input-button-link input:disabled[type="radio"]:focus+label,
+.form-input-button-link input:disabled[type="color"]:hover+label,
+.form-input-button-link input:disabled[type="color"]:focus+label,
+.form-input-button-link input:disabled[type="file"]:hover+label,
+.form-input-button-link input:disabled[type="file"]:focus+label {
   background-color: transparent;
 }
 
-.input-button-link input[type="checkbox"]+label:after,
-.input-button-link input[type="radio"]+label:after,
-.input-button-link input[type="color"]+label:after,
-.input-button-link input[type="file"]+label:after {
+.form-input-button-link input[type="checkbox"]+label:after,
+.form-input-button-link input[type="radio"]+label:after,
+.form-input-button-link input[type="color"]+label:after,
+.form-input-button-link input[type="file"]+label:after {
   content: none;
 }
 
@@ -1108,17 +1170,17 @@ input[type="range"]:disabled::-moz-range-progress {
   position: relative;
 }
 
-.input-hide input[type="checkbox"]+label .label-icon,
-.input-hide input[type="checkbox"]:checked+label .label-icon,
-.input-hide input[type="radio"]+label .label-icon,
-.input-hide input[type="radio"]:checked+label .label-icon,
-.input-hide input[type="file"]+label .label-icon,
-.input-hide input[type="file"]:checked+label .label-icon {
+.form-input-hide input[type="checkbox"]+label .label-icon,
+.form-input-hide input[type="checkbox"]:checked+label .label-icon,
+.form-input-hide input[type="radio"]+label .label-icon,
+.form-input-hide input[type="radio"]:checked+label .label-icon,
+.form-input-hide input[type="file"]+label .label-icon,
+.form-input-hide input[type="file"]:checked+label .label-icon {
   display: none;
 }
 
-.input-hide input[type="color"],
-.input-hide input[type="file"] {
+.form-input-hide input[type="color"],
+.form-input-hide input[type="file"] {
   margin: 0;
   opacity: 0;
   width: 1px;
@@ -1131,13 +1193,7 @@ input[type="range"]:disabled::-moz-range-progress {
   -webkit-appearance: none;
 }
 
-/* form variants */
-.form-grid-wrap {
-  padding: 0.5em 0;
-  position: relative;
-  width: 100%;
-}
-
+/* form grid */
 .form-grid {
   background-color: rgb(var(--form-grid-background));
   padding: calc(var(--form-thumb-size) / 2);
@@ -1174,8 +1230,9 @@ input[type="range"]:disabled::-moz-range-progress {
   border-radius: var(--theme-radius);
 }
 
-.form-grid .input-wrap {
-  padding: 0;
+.form-grid .form-wrap {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .form-grid input[type="checkbox"]+label,
@@ -1207,36 +1264,67 @@ input[type="range"]:disabled::-moz-range-progress {
   transform: translate(-50%, -50%);
 }
 
-.form-indent {
-  margin-left: 2.25em;
+.form-grid-3x3 {
+  --radiusPart: calc(var(--theme-radius) / 20);
+  --responsivePos: calc(var(--radiusPart) + -50%);
+  --responsiveNeg: calc(calc(var(--radiusPart) * -1) + -50%);
 }
 
-.form-inline {
-  margin-left: -0.5em;
-  margin-right: -0.5em;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-wrap: wrap;
+.form-grid-3x3 .form-wrap:nth-child(1) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(1) input[type="radio"]+label .label-icon {
+  transform: translate(var(--responsivePos), var(--responsivePos));
 }
 
-.form-inline>* {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  width: initial;
+.form-grid-3x3 .form-wrap:nth-child(2) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(2) input[type="radio"]+label .label-icon {
+  transform: translate(-50%, var(--responsivePos));
+}
+
+.form-grid-3x3 .form-wrap:nth-child(3) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(3) input[type="radio"]+label .label-icon {
+  transform: translate(var(--responsiveNeg), var(--responsivePos));
+}
+
+.form-grid-3x3 .form-wrap:nth-child(4) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(4) input[type="radio"]+label .label-icon {
+  transform: translate(var(--responsivePos), -50%);
+}
+
+.form-grid-3x3 .form-wrap:nth-child(6) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(6) input[type="radio"]+label .label-icon {
+  transform: translate(var(--responsiveNeg), -50%);
+}
+
+.form-grid-3x3 .form-wrap:nth-child(7) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(7) input[type="radio"]+label .label-icon {
+  transform: translate(var(--responsivePos), var(--responsiveNeg));
+}
+
+.form-grid-3x3 .form-wrap:nth-child(8) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(8) input[type="radio"]+label .label-icon {
+  transform: translate(-50%, var(--responsiveNeg));
+}
+
+.form-grid-3x3 .form-wrap:nth-child(9) input[type="checkbox"]+label .label-icon,
+.form-grid-3x3 .form-wrap:nth-child(9) input[type="radio"]+label .label-icon {
+  transform: translate(var(--responsiveNeg), var(--responsiveNeg));
 }
 
 /* form group */
 .form-group {
-  margin: 0 0 1em 0;
+  position: relative;
   display: inline-flex;
+  flex-direction: row;
   justify-content: flex-start;
   align-items: stretch;
-  position: relative;
   z-index: 1;
 }
 
+.form-group .form-wrap {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .form-group .form-group-text,
 .form-group .button,
 .form-group>select,
@@ -1339,27 +1427,27 @@ input[type="range"]:disabled::-moz-range-progress {
   border-radius: var(--theme-radius);
 }
 
-.form-group.nested-button * .button,
-.form-group.nested-button *:first-child .button:after,
-.form-group.nested-button * input[type="checkbox"]+label,
-.form-group.nested-button * input[type="radio"]+label,
-.form-group.nested-button * input[type="color"]+label {
+.form-group.form-group-nested-button * .button,
+.form-group.form-group-nested-button *:first-child .button:after,
+.form-group.form-group-nested-button * input[type="checkbox"]+label,
+.form-group.form-group-nested-button * input[type="radio"]+label,
+.form-group.form-group-nested-button * input[type="color"]+label {
   border-radius: 0;
 }
 
-.form-group.nested-button *:first-child .button,
-.form-group.nested-button *:first-child .button:after,
-.form-group.nested-button *:first-child input[type="checkbox"]+label,
-.form-group.nested-button *:first-child input[type="radio"]+label,
-.form-group.nested-button *:first-child input[type="color"]+label {
+.form-group.form-group-nested-button *:first-child .button,
+.form-group.form-group-nested-button *:first-child .button:after,
+.form-group.form-group-nested-button *:first-child input[type="checkbox"]+label,
+.form-group.form-group-nested-button *:first-child input[type="radio"]+label,
+.form-group.form-group-nested-button *:first-child input[type="color"]+label {
   border-radius: var(--theme-radius) 0 0 var(--theme-radius);
 }
 
-.form-group.nested-button *:last-child .button,
-.form-group.nested-button *:last-child .button:after,
-.form-group.nested-button *:last-child input[type="checkbox"]+label,
-.form-group.nested-button *:last-child input[type="radio"]+label,
-.form-group.nested-button *:last-child input[type="color"]+label {
+.form-group.form-group-nested-button *:last-child .button,
+.form-group.form-group-nested-button *:last-child .button:after,
+.form-group.form-group-nested-button *:last-child input[type="checkbox"]+label,
+.form-group.form-group-nested-button *:last-child input[type="radio"]+label,
+.form-group.form-group-nested-button *:last-child input[type="color"]+label {
   border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
 }
 
@@ -1406,10 +1494,6 @@ input[type="range"]:disabled::-moz-range-progress {
   overflow: hidden;
 }
 
-.form-group-wrap {
-  padding: 0.5em 0;
-}
-
 .form-group.form-group-border .form-group-text,
 .form-group.form-group-border .button,
 .form-group.form-group-border .button:after,
@@ -1422,11 +1506,11 @@ input[type="range"]:disabled::-moz-range-progress {
 .form-group.form-group-border>input[type="text"],
 .form-group.form-group-border>input[type="color"],
 .form-group.form-group-border>input[type="range"],
-.form-group.form-group-border.nested-button * .button,
-.form-group.form-group-border.nested-button * .button:after,
-.form-group.form-group-border.nested-button * input[type="checkbox"]+label,
-.form-group.form-group-border.nested-button * input[type="radio"]+label,
-.form-group.form-group-border.nested-button * input[type="color"]+label {
+.form-group.form-group-border.form-group-nested-button * .button,
+.form-group.form-group-border.form-group-nested-button * .button:after,
+.form-group.form-group-border.form-group-nested-button * input[type="checkbox"]+label,
+.form-group.form-group-border.form-group-nested-button * input[type="radio"]+label,
+.form-group.form-group-border.form-group-nested-button * input[type="color"]+label {
   border-radius: 0;
 }
 
@@ -1588,23 +1672,18 @@ input[type="range"]:disabled::-moz-range-progress {
   content: none;
 }
 
-.form-group.nested-button .form-dropdown-menu *:first-child .button,
-.form-group.nested-button .form-dropdown-menu *:last-child .button,
-.form-group.nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label,
-.form-group.nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label,
-.form-group.nested-button .form-dropdown-menu *:first-child input[type="radio"]+label,
-.form-group.nested-button .form-dropdown-menu *:last-child input[type="radio"]+label,
-.form-group.nested-button .form-dropdown-menu *:first-child input[type="color"]+label,
-.form-group.nested-button .form-dropdown-menu *:last-child input[type="color"]+label {
+.form-group.form-group-nested-button .form-dropdown-menu *:first-child .button,
+.form-group.form-group-nested-button .form-dropdown-menu *:last-child .button,
+.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label,
+.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label,
+.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="radio"]+label,
+.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="radio"]+label,
+.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="color"]+label,
+.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="color"]+label {
   border-radius: 0;
 }
 
-.feedback-wrap {
-  padding: 0.5em 0;
-  position: relative;
-  width: 100%;
-}
-
+/* form feedback */
 .form-feedback {
   padding: 0.5em 1.5em 0.5em 1em;
   background-color: rgb(var(--form-feedback-background));
@@ -1614,6 +1693,7 @@ input[type="range"]:disabled::-moz-range-progress {
   border-color: rgb(var(--form-feedback-border));
   border-top-right-radius: var(--theme-radius);
   border-bottom-right-radius: var(--theme-radius);
+  width: 100%;
 }
 
 .form-feedback p {
diff --git a/src/css/link.css b/src/css/link.css
index b6936886..cf66825f 100755
--- a/src/css/link.css
+++ b/src/css/link.css
@@ -71,9 +71,13 @@
   flex-direction: row;
 }
 
-.is-link-style-list .link-item.link-empty>*:not(:only-child),
+.is-link-style-block .link-item.link-empty>*:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
 .is-link-style-list .link-item.link-empty>*:not(:last-child) {
   margin-right: 0.5em;
+  margin-bottom: 0;
 }
 
 .is-link-item-hoverscale-show .link-item.link-empty:hover {
diff --git a/src/css/menu.css b/src/css/menu.css
index 6f5ca3c3..bdbd12dc 100755
--- a/src/css/menu.css
+++ b/src/css/menu.css
@@ -94,15 +94,6 @@
   z-index: 1;
 }
 
-.menu-item-form-sticky {
-  background-color: rgb(var(--theme-color-01));
-  margin: -1.5em -1em 0 -1em;
-  padding: 1.5em 1em 1em 1em;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
 .menu-nav-button {
   background-color: transparent;
   margin: 0;
diff --git a/src/css/theme.css b/src/css/theme.css
index 61188df0..be77a902 100644
--- a/src/css/theme.css
+++ b/src/css/theme.css
@@ -3,8 +3,6 @@
   width: var(--theme-preview-size);
   height: var(--theme-preview-size);
   border-radius: var(--theme-radius);
-  padding: 0;
-  margin: 0.5em;
   position: relative;
   overflow: hidden;
 }
@@ -270,7 +268,6 @@
 .theme-shadow-box {
   background-color: rgb(var(--theme-color-02));
   border-radius: var(--theme-radius);
-  margin: 0;
   padding: 0.5em;
   width: 5em;
   height: 5em;
diff --git a/src/css/typography.css b/src/css/typography.css
index e9c41c96..2bf93511 100755
--- a/src/css/typography.css
+++ b/src/css/typography.css
@@ -64,10 +64,6 @@ p:not(:last-child) {
   margin-bottom: 0.5em;
 }
 
-.p-wrap {
-  padding: 0.5em 0;
-}
-
 hr {
   border: 0;
   border-top: var(--horizontal-rule);
diff --git a/src/css/variables.css b/src/css/variables.css
index 6eee1757..983d96f5 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -211,6 +211,7 @@
                                                         0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
   --form-ring-accent:                                   0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                         0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+  --form-wrap-space:                                    0.75em;
   /* button */
   --button-background:                                  var(--theme-color-02);
   --button-background-focus-hover:                      var(--theme-color-03);
diff --git a/src/index.html b/src/index.html
index b79a2ee6..77c2c027 100644
--- a/src/index.html
+++ b/src/index.html
@@ -77,48 +77,46 @@
           <div class="header-item header-search">
             <div class="header-search-body">
               <form class="search" action="" method="get">
-                <input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
+                <input class="header-search-input search-input" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
                 <input type="submit" value="Search" class="is-hidden">
               </form>
-              <button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
+              <button class="header-search-clear search-clear button button-link" tabindex="1" disabled>
                 <span class="icon-close"></span>
               </button>
             </div>
           </div>
           <div class="header-item header-button header-edit-add">
             <div class="header-button-body">
-              <div class="form-group nested-button mb-0">
-                <div class="input-wrap input-button input-hide py-0">
+              <div class="form-group form-group-nested-button">
+                <div class="form-input-button form-input-hide">
                   <input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
-                  <label for="control-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
+                  <label for="control-edit"><span class="label-icon"></span> Edit</label>
                 </div>
-                <div class="input-wrap py-0">
-                  <div class="form-dropdown">
-                    <button class="control-add-toggle form-dropdown-toggle button" tabindex="1">
-                      <span class="button-text">Add</span>
-                    </button>
-                    <ul class="list-unstyled form-dropdown-menu">
-                      <li>
-                        <button class="button button-block text-left form-dropdown-menu-item control-group-add" tabindex="1"><span class="button-text">New Group</span></button>
-                      </li>
-                      <li>
-                        <button class="button button-block text-left form-dropdown-menu-item control-link-add" tabindex="1"><span class="button-text">New Bookmark</span></button>
-                      </li>
-                    </ul>
-                  </div>
+                <div class="form-dropdown">
+                  <button class="control-add-toggle form-dropdown-toggle button" tabindex="1">
+                    <span class="button-text">Add</span>
+                  </button>
+                  <ul class="list-unstyled form-dropdown-menu">
+                    <li>
+                      <button class="button button-block text-left form-dropdown-menu-item control-group-add" tabindex="1"><span class="button-text">New Group</span></button>
+                    </li>
+                    <li>
+                      <button class="button button-block text-left form-dropdown-menu-item control-link-add" tabindex="1"><span class="button-text">New Bookmark</span></button>
+                    </li>
+                  </ul>
                 </div>
               </div>
             </div>
           </div>
           <div class="header-item header-button header-accent">
             <div class="header-button-body">
-              <div class="form-group nested-button mb-0">
-                <div class="input-wrap input-button input-color-dot input-color-dot-shade py-0">
-                  <input id="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick mb0" type="color" value="#000000" tabindex="1">
+              <div class="form-group form-group-nested-button">
+                <div class="form-input-button input-color-dot input-color-dot-shade">
+                  <input id="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick" type="color" value="#000000" tabindex="1">
                   <label for="control-theme-color-rgb-quick">Colour</label>
                 </div>
-                <div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
-                  <input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick mb0" type="color" value="#000000" tabindex="1">
+                <div class="form-input-button input-color-dot input-color-dot-accent">
+                  <input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1">
                   <label for="control-theme-accent-current-quick">Accent</label>
                 </div>
               </div>
@@ -126,7 +124,7 @@
           </div>
           <div class="header-item header-button header-menu">
             <div class="header-button-body">
-              <button class="control-menu-open button mb-0" tabindex="1">
+              <button class="control-menu-open button" tabindex="1">
                 <span class="button-text"><span class="icon-settings"></span></span>
               </button>
             </div>
@@ -143,82 +141,111 @@
     <div class="menu-area">
 
       <div class="menu-nav">
-        <div class="menu-nav-area-tab mb-0 list-unstyled">
-          <button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
-          <button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
-          <button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
-          <button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
-          <button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
-          <button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
-          <button class="menu-nav-button control-menu-data button mb-0" tabindex="-1">Data</button>
-          <button class="menu-nav-button control-menu-nightTab button mb-0" tabindex="-1">nightTab</button>
+        <div class="menu-nav-area-tab list-unstyled">
+          <button class="menu-nav-button control-menu-layout button active" tabindex="-1">Layout</button>
+          <button class="menu-nav-button control-menu-header button" tabindex="-1">Header</button>
+          <button class="menu-nav-button control-menu-groups button" tabindex="-1">Groups</button>
+          <button class="menu-nav-button control-menu-bookmarks button" tabindex="-1">Bookmarks</button>
+          <button class="menu-nav-button control-menu-theme button" tabindex="-1">Theme</button>
+          <button class="menu-nav-button control-menu-background button" tabindex="-1">Background</button>
+          <button class="menu-nav-button control-menu-data button" tabindex="-1">Data</button>
+          <button class="menu-nav-button control-menu-nightTab button" tabindex="-1">nightTab</button>
         </div>
         <div class="menu-nav-area-close">
-          <button class="menu-nav-button control-menu-close button mb-0" tabindex="-1"><span class="icon-close"></span></button>
+          <button class="menu-nav-button control-menu-close button" tabindex="-1"><span class="icon-close"></span></button>
         </div>
       </div>
 
       <div class="menu-content">
 
         <div class="menu-content-area menu-content-area-layout">
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Global scaling</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="form-wrap">
+                <label for="control-layout-size">Size</label>
+                <div class="form-group form-group-block">
+                  <input id="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
+                  <div class="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                </div>
+              </div>
+              <div class="form-helper">
+                <p class="control-layout-size-helper form-helper-item">Resize all elements on the page.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-layout-size-helper form-helper-item">Take care as some elements could scale up to outside the page.</p>
+              </div>
+              <div class="form-wrap">
+                <button class="control-layout-size-default button" tabindex="1">Default Global scaling size</button>
+              </div>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Area</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-layout-width">Width</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-layout-width" class="control-layout-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
                   <div class="control-layout-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-layout-width-default button mb-0" tabindex="1">Default Width</button>
+              <div class="form-wrap">
+                <button class="control-layout-width-default button" tabindex="1">Default Width</button>
               </div>
               <hr>
-              <label class="control-layout-alignment-label">Area alignment</label>
-              <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x3 control-layout-alignment-grid">
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
-                    <label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
-                    <label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
-                    <label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
-                    <label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
-                    <label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
-                    <label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
-                    <label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
-                    <label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
-                    <label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
+              <div class="form-wrap">
+                <div class="form-wrap">
+                  <label>Area alignment</label>
+                </div>
+                <div class="form-wrap">
+                  <div class="form-grid form-grid-3x3 control-layout-alignment-grid">
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
+                      <label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
+                      <label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
+                      <label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
+                      <label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
+                      <label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
+                      <label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
+                      <label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
+                      <label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
+                      <label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
+                    </div>
                   </div>
                 </div>
               </div>
-              <p class="control-layout-alignment-helper form-helper small">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
+              <div class="form-helper">
+                <p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -226,33 +253,16 @@
               <h1 class="menu-item-header-text">Area order</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
                 <label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
                 <label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
               </div>
-              <p class="control-layout-order-helper form-helper small">Only available when Bookmarks are shown.</p>
-            </div>
-          </div>
-          <div class="menu-item">
-            <div class="menu-item-header">
-              <h1 class="menu-item-header-text">Global scaling</h1>
-            </div>
-            <div class="menu-item-form">
-              <div class="input-wrap">
-                <label for="control-layout-size">Size</label>
-                <div class="form-group form-group-block mb-0">
-                  <input id="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
-                  <div class="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                </div>
-              </div>
-              <p class="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
-              <p class="control-layout-size-helper form-helper small">Take care as some elements could scale up to outside the page.</p>
-              <div class="button-wrap">
-                <button class="control-layout-size-default button mb-0" tabindex="1">Default Global scaling size</button>
+              <div class="form-helper">
+                <p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
               </div>
             </div>
           </div>
@@ -261,15 +271,15 @@
               <h1 class="menu-item-header-text">Padding</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
                   <div class="control-layout-padding-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-layout-padding-default button mb-0" tabindex="1">Default Padding size</button>
+              <div class="form-wrap">
+                <button class="control-layout-padding-default button" tabindex="1">Default Padding size</button>
               </div>
             </div>
           </div>
@@ -278,15 +288,15 @@
               <h1 class="menu-item-header-text">Gutter</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
                   <div class="control-layout-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-layout-gutter-default button mb-0" tabindex="1">Default Gutter size</button>
+              <div class="form-wrap">
+                <button class="control-layout-gutter-default button" tabindex="1">Default Gutter size</button>
               </div>
             </div>
           </div>
@@ -295,12 +305,12 @@
               <h1 class="menu-item-header-text">Page</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-layout-title">Title</label>
-                <input id="control-layout-title" class="control-layout-title mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="-1">
+                <input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="-1">
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="-1">
                 <label for="control-layout-scrollpastend"><span class="label-icon"></span> Scroll past end</label>
               </div>
@@ -314,55 +324,69 @@
               <h1 class="menu-item-header-text">Area</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-header-area-width">Width</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-header-area-width" class="control-header-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
                   <div class="control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <p class="control-header-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
-              <div class="button-wrap">
-                <button class="control-header-area-width-match button mb-0" tabindex="-1">Match Bookmarks Area</button>
+              <div class="form-helper">
+                <p class="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
+              </div>
+              <div class="form-wrap">
+                <button class="control-header-area-width-match button" tabindex="-1">Match Bookmarks Area</button>
               </div>
               <hr>
-              <label class="control-header-area-alignment-label">Area horizontal alignment</label>
-              <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
-                  <div class="input-wrap">
-                    <input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
-                    <label for="control-header-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="-1">
-                    <label for="control-header-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="-1">
-                    <label for="control-header-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+              <div class="form-wrap">
+                <div class="form-wrap">
+                  <label class="control-header-area-alignment-label">Area horizontal alignment</label>
+                </div>
+                <div class="form-wrap">
+                  <div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
+                    <div class="form-wrap">
+                      <input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
+                      <label for="control-header-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="-1">
+                      <label for="control-header-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="-1">
+                      <label for="control-header-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+                    </div>
                   </div>
                 </div>
               </div>
-              <p class="control-header-area-alignment-helper form-helper small">Effects may not be visible if the Header Area is full width.</p>
+              <div class="form-helper">
+                <p class="control-header-area-alignment-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
+              </div>
               <hr>
-              <label class="control-header-item-alignment-label">Item horizontal alignment</label>
-              <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
-                  <div class="input-wrap">
-                    <input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
-                    <label for="control-header-item-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="-1">
-                    <label for="control-header-item-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="-1">
-                    <label for="control-header-item-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+              <div class="form-wrap">
+                <div class="form-wrap">
+                  <label class="control-header-item-alignment-label">Item horizontal alignment</label>
+                </div>
+                <div class="form-wrap">
+                  <div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
+                    <div class="form-wrap">
+                      <input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
+                      <label for="control-header-item-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="-1">
+                      <label for="control-header-item-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="-1">
+                      <label for="control-header-item-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+                    </div>
                   </div>
                 </div>
               </div>
-              <p class="control-header-item-alignment-helper form-helper small">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
+              <div class="form-helper">
+                <p class="control-header-item-alignment-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -370,38 +394,40 @@
               <h1 class="menu-item-header-text">Greeting</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="-1">
                 <label for="control-header-greeting-show"><span class="label-icon"></span> Show</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
-                  <label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="-1">
-                  <label for="control-header-greeting-type-hello"><span class="label-icon"></span> "Hello..."</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="-1">
-                  <label for="control-header-greeting-type-hi"><span class="label-icon"></span> "Hi..."</label>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-header-greeting-name">Name</label>
-                  <input id="control-header-greeting-name" class="control-header-greeting-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="-1">
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-header-greeting-size">Size</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-header-greeting-size" class="control-header-greeting-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                    <div class="control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
+                    <label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="-1">
+                    <label for="control-header-greeting-type-hello"><span class="label-icon"></span> "Hello..."</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="-1">
+                    <label for="control-header-greeting-type-hi"><span class="label-icon"></span> "Hi..."</label>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-header-greeting-name">Name</label>
+                    <input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="-1">
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-header-greeting-size">Size</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-header-greeting-size" class="control-header-greeting-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
+                      <div class="control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-header-greeting-size-default button" tabindex="-1">Default Greeting size</button>
                   </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-header-greeting-size-default button mb-0" tabindex="-1">Default Greeting size</button>
                 </div>
               </div>
             </div>
@@ -411,30 +437,34 @@
               <h1 class="menu-item-header-text">Transitional words</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="-1">
                 <label for="control-header-transitional-show"><span class="label-icon"></span> Show</label>
               </div>
-              <p class="control-header-transitional-show-helper form-helper small">Available when Date or Time is shown.</p>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
-                  <label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="-1">
-                  <label for="control-header-transitional-type-its"><span class="label-icon"></span> "It's"</label>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-header-transitional-size">Size</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-header-transitional-size" class="control-header-transitional-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                    <div class="control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+              <div class="form-helper">
+                <p class="control-header-transitional-show-helper form-helper-item">Available when Date or Time is shown.</p>
+              </div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
+                    <label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="-1">
+                    <label for="control-header-transitional-type-its"><span class="label-icon"></span> "It's"</label>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-header-transitional-size">Size</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-header-transitional-size" class="control-header-transitional-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
+                      <div class="control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-header-transitional-size-default button" tabindex="-1">Default Transitional size</button>
                   </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-header-transitional-size-default button mb-0" tabindex="-1">Default Transitional size</button>
                 </div>
               </div>
             </div>
@@ -444,74 +474,80 @@
               <h1 class="menu-item-header-text">Clock</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="-1">
                 <label for="control-header-clock-hours-show"><span class="label-icon"></span> Hours</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-clock-hours-display-number" class="control-header-clock-hours-display-number" type="radio" name="control-header-clock-hours" value="number" tabindex="-1">
-                  <label for="control-header-clock-hours-display-number"><span class="label-icon"></span> As number</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="-1">
-                  <label for="control-header-clock-hours-display-word"><span class="label-icon"></span> As word</label>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-clock-hours-display-number" class="control-header-clock-hours-display-number" type="radio" name="control-header-clock-hours" value="number" tabindex="-1">
+                    <label for="control-header-clock-hours-display-number"><span class="label-icon"></span> As number</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="-1">
+                    <label for="control-header-clock-hours-display-word"><span class="label-icon"></span> As word</label>
+                  </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="-1">
                 <label for="control-header-clock-minutes-show"><span class="label-icon"></span> Minutes</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-clock-minutes-display-number" class="control-header-clock-minutes-display-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="-1">
-                  <label for="control-header-clock-minutes-display-number"><span class="label-icon"></span> As number</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="-1">
-                  <label for="control-header-clock-minutes-display-word"><span class="label-icon"></span> As word</label>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-clock-minutes-display-number" class="control-header-clock-minutes-display-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="-1">
+                    <label for="control-header-clock-minutes-display-number"><span class="label-icon"></span> As number</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="-1">
+                    <label for="control-header-clock-minutes-display-word"><span class="label-icon"></span> As word</label>
+                  </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="-1">
                 <label for="control-header-clock-seconds-show"><span class="label-icon"></span> Seconds</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-clock-seconds-display-number" class="control-header-clock-seconds-display-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="-1">
-                  <label for="control-header-clock-seconds-display-number"><span class="label-icon"></span> As number</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-clock-seconds-display-word" class="control-header-clock-seconds-display-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="-1">
-                  <label for="control-header-clock-seconds-display-word"><span class="label-icon"></span> As word</label>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-clock-seconds-display-number" class="control-header-clock-seconds-display-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="-1">
+                    <label for="control-header-clock-seconds-display-number"><span class="label-icon"></span> As number</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-clock-seconds-display-word" class="control-header-clock-seconds-display-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="-1">
+                    <label for="control-header-clock-seconds-display-word"><span class="label-icon"></span> As word</label>
+                  </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="-1">
                 <label for="control-header-clock-separator-show"><span class="label-icon"></span> Separators</label>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="-1">
                 <label for="control-header-clock-hour24-show"><span class="label-icon"></span> 24 Hours</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="-1">
                 <label for="control-header-clock-meridiem-show"><span class="label-icon"></span> AM/PM</label>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-header-clock-size">Size</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-header-clock-size" class="control-header-clock-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                   <div class="control-header-clock-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-header-clock-size-default button mb-0" tabindex="-1">Default Clock size</button>
+              <div class="form-wrap">
+                <button class="control-header-clock-size-default button" tabindex="-1">Default Clock size</button>
               </div>
             </div>
           </div>
@@ -520,136 +556,166 @@
               <h1 class="menu-item-header-text">Date</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="-1">
                 <label for="control-header-date-day-show"><span class="label-icon"></span> Day</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="-1">
-                  <label for="control-header-date-day-display-number"><span class="label-icon"></span> As number</label>
-                </div>
+              <div class="form-wrap">
                 <div class="form-indent">
-                  <label class="control-header-date-day-week-start-label">Start of the week</label>
-                  <div class="input-wrap">
-                    <input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="-1">
-                    <label for="control-header-date-day-week-start-monday"><span class="label-icon"></span> Monday</label>
+                  <div class="form-wrap">
+                    <input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="-1">
+                    <label for="control-header-date-day-display-number"><span class="label-icon"></span> As number</label>
                   </div>
-                  <div class="input-wrap">
-                    <input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1">
-                    <label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label class="control-header-date-day-week-start-label">Start of the week</label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="-1">
+                        <label for="control-header-date-day-week-start-monday"><span class="label-icon"></span> Monday</label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1">
+                        <label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-header-date-day-week-start-helper form-helper-item">Define what day "1" represents, either Monday or Sunday.</p>
+                      </div>
+                    </div>
                   </div>
-                  <p class="control-header-date-day-week-start-helper form-helper small">Define what day "1" represents, either Monday or Sunday.</p>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="-1">
-                  <label for="control-header-date-day-display-word"><span class="label-icon"></span> As word</label>
-                </div>
-                <div class="form-indent">
-                  <label class="control-header-date-day-length-label">Word length</label>
-                  <div class="input-wrap">
-                    <input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="-1">
-                    <label for="control-header-date-day-length-long"><span class="label-icon"></span> Long</label>
+                  <div class="form-wrap">
+                    <input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="-1">
+                    <label for="control-header-date-day-display-word"><span class="label-icon"></span> As word</label>
                   </div>
-                  <div class="input-wrap">
-                    <input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="-1">
-                    <label for="control-header-date-day-length-short"><span class="label-icon"></span> Short</label>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label class="control-header-date-day-length-label">Word length</label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="-1">
+                        <label for="control-header-date-day-length-long"><span class="label-icon"></span> Long</label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="-1">
+                        <label for="control-header-date-day-length-short"><span class="label-icon"></span> Short</label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="-1">
                 <label for="control-header-date-date-show"><span class="label-icon"></span> Date</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="-1">
-                  <label for="control-header-date-date-display-number"><span class="label-icon"></span> As number</label>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="-1">
+                    <label for="control-header-date-date-display-number"><span class="label-icon"></span> As number</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="-1">
+                    <label for="control-header-date-date-display-word"><span class="label-icon"></span> As word</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
+                    <label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-date-date-ordinal-helper form-helper-item">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
+                  </div>
                 </div>
-                <div class="input-wrap">
-                  <input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="-1">
-                  <label for="control-header-date-date-display-word"><span class="label-icon"></span> As word</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
-                  <label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
-                </div>
-                <p class="control-header-date-date-ordinal-helper form-helper small">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="-1">
                 <label for="control-header-date-month-show"><span class="label-icon"></span> Month</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="-1">
-                  <label for="control-header-date-month-display-number"><span class="label-icon"></span> As number</label>
-                </div>
+              <div class="form-wrap">
                 <div class="form-indent">
-                  <div class="input-wrap">
-                    <input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
-                    <label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
+                  <div class="form-wrap">
+                    <input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="-1">
+                    <label for="control-header-date-month-display-number"><span class="label-icon"></span> As number</label>
                   </div>
-                  <p class="control-header-date-month-ordinal-helper form-helper small">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="-1">
-                  <label for="control-header-date-month-display-word"><span class="label-icon"></span> As word</label>
-                </div>
-                <div class="form-indent">
-                  <label class="control-header-date-month-length-label">Word length</label>
-                  <div class="input-wrap">
-                    <input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="-1">
-                    <label for="control-header-date-month-length-long"><span class="label-icon"></span> Long</label>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
+                        <label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-header-date-month-ordinal-helper form-helper-item">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
+                      </div>
+                    </div>
                   </div>
-                  <div class="input-wrap">
-                    <input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="-1">
-                    <label for="control-header-date-month-length-short"><span class="label-icon"></span> Short</label>
+                  <div class="form-wrap">
+                    <input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="-1">
+                    <label for="control-header-date-month-display-word"><span class="label-icon"></span> As word</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label class="control-header-date-month-length-label">Word length</label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="-1">
+                        <label for="control-header-date-month-length-long"><span class="label-icon"></span> Long</label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="-1">
+                        <label for="control-header-date-month-length-short"><span class="label-icon"></span> Short</label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="-1">
                 <label for="control-header-date-year-show"><span class="label-icon"></span> Year</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="-1">
-                  <label for="control-header-date-year-display-number"><span class="label-icon"></span> As number</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="-1">
-                  <label for="control-header-date-year-display-word"><span class="label-icon"></span> As word</label>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="-1">
+                    <label for="control-header-date-year-display-number"><span class="label-icon"></span> As number</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="-1">
+                    <label for="control-header-date-year-display-word"><span class="label-icon"></span> As word</label>
+                  </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="-1">
                 <label for="control-header-date-separator-show"><span class="label-icon"></span> Separators</label>
               </div>
               <hr>
-              <label class="control-header-date-format-label">Format</label>
-              <div class="input-wrap">
+              <div class="form-wrap">
+                <label class="control-header-date-format-label">Format</label>
+              </div>
+              <div class="form-wrap">
                 <input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="-1">
                 <label for="control-header-date-format-datemonth"><span class="label-icon"></span> Date/Month</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="-1">
                 <label for="control-header-date-format-monthdate"><span class="label-icon"></span> Month/Date</label>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-header-date-size">Size</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-header-date-size" class="control-header-date-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                   <div class="control-header-date-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-header-date-size-default button mb-0" tabindex="-1">Default Date size</button>
+              <div class="form-wrap">
+                <button class="control-header-date-size-default button" tabindex="-1">Default Date size</button>
               </div>
             </div>
           </div>
@@ -658,104 +724,126 @@
               <h1 class="menu-item-header-text">Search</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
                 <label for="control-header-search-show"><span class="label-icon"></span> Show</label>
               </div>
-              <div class="form-indent">
-                <label class="control-header-search-style-label">Search box width</label>
-                <div class="input-wrap">
-                  <input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
-                  <label for="control-header-search-style-auto"><span class="label-icon"></span> Auto</label>
-                </div>
-                <p class="control-header-search-style-auto-helper form-helper small">Search box will grow to best fit available space.</p>
-                <div class="input-wrap">
-                  <input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
-                  <label for="control-header-search-style-custom"><span class="label-icon"></span> Custom</label>
-                </div>
-                <p class="control-header-search-style-custom-helper form-helper small">Define how wide the Search box should be inside the Header Area.</p>
+              <div class="form-wrap">
                 <div class="form-indent">
-                  <div class="input-wrap">
-                    <label for="control-header-search-width">Width</label>
-                    <div class="form-group form-group-block mb-0">
-                      <input id="control-header-search-width" class="control-header-search-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
-                      <div class="control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label class="control-header-search-style-label">Search box width</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
+                    <label for="control-header-search-style-auto"><span class="label-icon"></span> Auto</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-search-style-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
+                    <label for="control-header-search-style-custom"><span class="label-icon"></span> Custom</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-search-style-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label for="control-header-search-width">Width</label>
+                        <div class="form-group form-group-block">
+                          <input id="control-header-search-width" class="control-header-search-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
+                          <div class="control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
-                  <label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
-                </div>
-                <p class="control-header-search-focus-helper form-helper small">May not work in some browsers.</p>
-                <hr>
-                <label class="control-header-search-engine-label">Search engine</label>
-                <div class="input-wrap">
-                  <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
-                  <label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
-                  <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
-                  <label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
-                  <label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
-                  <label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
-                  <label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
-                </div>
-                <div class="form-indent">
-                  <div class="input-wrap">
-                    <label for="control-header-search-engine-custom-name">Name</label>
-                    <input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
+                    <label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
                   </div>
-                  <div class="input-wrap">
-                    <label for="control-header-search-engine-custom-url">URL</label>
-                    <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
+                  <div class="form-helper">
+                    <p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
                   </div>
-                  <p class="control-header-search-engine-custom-helper form-helper small">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
-                  <p class="control-header-search-engine-custom-helper form-helper small mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
-                </div>
-                <hr>
-                <label class="control-header-search-text-alignment-label">Align Text</label>
-                <div class="form-grid-wrap">
-                  <div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
-                    <div class="input-wrap">
-                      <input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
-                      <label for="control-header-search-text-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="-1">
-                      <label for="control-header-search-text-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="-1">
-                      <label for="control-header-search-text-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+                  <hr>
+                  <div class="form-wrap">
+                    <label class="control-header-search-engine-label">Search engine</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
+                    <label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
+                    <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
+                    <label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
+                    <label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
+                    <label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
+                    <label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label for="control-header-search-engine-custom-name">Name</label>
+                        <input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
+                      </div>
+                      <div class="form-wrap">
+                        <label for="control-header-search-engine-custom-url">URL</label>
+                        <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
+                        <p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL</p>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-header-search-size">Size</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-header-search-size" class="control-header-search-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                    <div class="control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label class="control-header-search-text-alignment-label">Align Text</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
+                      <div class="form-wrap">
+                        <input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
+                        <label for="control-header-search-text-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="-1">
+                        <label for="control-header-search-text-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="-1">
+                        <label for="control-header-search-text-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+                      </div>
+                    </div>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-header-search-size">Size</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-header-search-size" class="control-header-search-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
+                      <div class="control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-header-search-size-default button" tabindex="-1">Default Search size</button>
                   </div>
-                </div>
-                <p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
-                <div class="button-wrap">
-                  <button class="control-header-search-size-default button mb-0" tabindex="-1">Default Search size</button>
                 </div>
               </div>
             </div>
@@ -766,41 +854,45 @@
             </div>
             <div class="menu-item-form">
               <label class="control-header-button-style-label">Button style</label>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="-1">
                 <label for="control-header-button-style-box"><span class="label-icon"></span> Box</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="-1">
                 <label for="control-header-button-style-clear"><span class="label-icon"></span> Clear</label>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-button-editadd-show" class="control-header-button-editadd-show" type="checkbox" tabindex="-1">
                 <label for="control-header-button-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
                 <label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
               </div>
-              <p class="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-button-coloraccent-dot-show" class="control-header-button-coloraccent-dot-show" type="checkbox" tabindex="-1">
-                  <label for="control-header-button-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
+              <div class="form-helper">
+                <p class="control-header-button-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
+              </div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-button-coloraccent-dot-show" class="control-header-button-coloraccent-dot-show" type="checkbox" tabindex="-1">
+                    <label for="control-header-button-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
+                  </div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-header-button-size">Size</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-header-button-size" class="control-header-button-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                   <div class="control-header-button-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-header-button-size-default button mb-0" tabindex="-1">Default Button size</button>
+              <div class="form-wrap">
+                <button class="control-header-button-size-default button" tabindex="-1">Default Button size</button>
               </div>
             </div>
           </div>
@@ -809,17 +901,17 @@
               <h1 class="menu-item-header-text">Border</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-header-border-top">Top</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-header-border-top" class="control-header-border-top mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
                   <div class="control-header-border-top-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-header-border-bottom">Bottom</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-header-border-bottom" class="control-header-border-bottom mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
                   <div class="control-header-border-bottom-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
@@ -831,17 +923,19 @@
               <h1 class="menu-item-header-text">Position when scrolling</h1>
             </div>
             <div class="menu-item-form">
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
-                  <label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
-                </div>
-                <p class="control-header-position-sticky-helper form-helper small">Header sticks to the page when scrolling up or down.</p>
-                <div class="input-wrap">
-                  <input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
-                  <label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
-                </div>
-                <p class="control-header-position-inline-helper form-helper small">Header moves inline with the content when scrolling up or down.</p>
+              <div class="form-wrap">
+                <input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
+                <label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
+              </div>
+              <div class="form-helper">
+                <p class="control-header-position-sticky-helper form-helper-item">Header sticks to the page when scrolling up or down.</p>
+              </div>
+              <div class="form-wrap">
+                <input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
+                <label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
+              </div>
+              <div class="form-helper">
+                <p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p>
               </div>
             </div>
           </div>
@@ -850,35 +944,43 @@
               <h1 class="menu-item-header-text">Shade</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="-1">
                 <label for="control-header-shade-show"><span class="label-icon"></span> Show</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1">
-                  <label for="control-header-shade-style-always"><span class="label-icon"></span> Always visible</label>
-                </div>
-                <p class="control-header-shade-style-always-helper form-helper small">Useful for when a Background Image is shown.</p>
-                <div class="input-wrap">
-                  <input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1">
-                  <label for="control-header-shade-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
-                </div>
-                <p class="control-header-shade-style-scroll-helper form-helper small">The page will not scroll if Bookmarks are not shown.</p>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-header-shade-opacity">Opacity</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                    <div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1">
+                    <label for="control-header-shade-style-always"><span class="label-icon"></span> Always visible</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-shade-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1">
+                    <label for="control-header-shade-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-shade-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-header-shade-opacity">Opacity</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
+                      <div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1">
+                    <label for="control-header-radius"><span class="label-icon"></span> Corner radius</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-header-radius-helper form-helper-item">May not be visible if Theme Radius is set to 0.</p>
                   </div>
                 </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1">
-                  <label for="control-header-radius"><span class="label-icon"></span> Corner radius</label>
-                </div>
-                <p class="control-header-radius-helper form-helper small">May not be visible if Theme Radius is set to 0.</p>
               </div>
             </div>
           </div>
@@ -890,41 +992,49 @@
               <h1 class="menu-item-header-text">Names</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
                 <label for="control-group-name-show"><span class="label-icon"></span> Show</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <label for="control-group-name-size">Name Size</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-group-name-size" class="control-group-name-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
-                    <div class="control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <label for="control-group-name-size">Name Size</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-group-name-size" class="control-group-name-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
+                      <div class="control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-group-name-size-default button" tabindex="-1">Default Name size</button>
                   </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-group-name-size-default button mb-0" tabindex="-1">Default Name size</button>
                 </div>
               </div>
               <hr>
-              <label class="control-group-area-alignment-label">Group name horizontal alignment</label>
-              <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
-                  <div class="input-wrap">
-                    <input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
-                    <label for="control-group-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1">
-                    <label for="control-group-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1">
-                    <label for="control-group-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+              <div class="form-wrap">
+                <div class="form-wrap">
+                  <label class="control-group-area-alignment-label">Group name horizontal alignment</label>
+                </div>
+                <div class="form-wrap">
+                  <div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
+                    <div class="form-wrap">
+                      <input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
+                      <label for="control-group-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1">
+                      <label for="control-group-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
+                    </div>
+                    <div class="form-wrap">
+                      <input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1">
+                      <label for="control-group-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
+                    </div>
                   </div>
                 </div>
               </div>
-              <p class="control-group-area-alignment-helper form-helper small">Effects may not be visible if the Group Name is not shown.</p>
+              <div class="form-helper">
+                <p class="control-group-area-alignment-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -932,11 +1042,11 @@
               <h1 class="menu-item-header-text">Order</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
                 <label for="control-group-order-headerbody"><span class="label-icon"></span> Group Name then Bookmarks</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
                 <label for="control-group-order-bodyheader"><span class="label-icon"></span> Bookmarks then Group Name</label>
               </div>
@@ -947,14 +1057,16 @@
               <h1 class="menu-item-header-text">Border</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-group-border">Between groups</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-group-border" class="control-group-border mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
                   <div class="control-group-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <p class="control-link-area-width-helper form-helper small">Border between groups may not be visible if there is only one group.</p>
+              <div class="form-helper">
+                <p class="control-link-area-width-helper form-helper-item">Border between groups may not be visible if there is only one group.</p>
+              </div>
             </div>
           </div>
         </div>
@@ -965,36 +1077,42 @@
               <h1 class="menu-item-header-text">Area</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-link-area-width">Width</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-link-area-width" class="control-link-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
                   <div class="control-link-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <p class="control-link-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
-              <div class="button-wrap">
-                <button class="control-link-area-width-match button mb-0" tabindex="-1">Match Header Area</button>
+              <div class="form-helper">
+                <p class="control-link-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
+              </div>
+              <div class="form-wrap">
+                <button class="control-link-area-width-match button" tabindex="-1">Match Header Area</button>
               </div>
               <hr>
-              <label class="control-link-area-alignment-label">Horizontal alignment</label>
-              <div class="form-grid-wrap">
+              <div class="form-wrap">
+                <label class="control-link-area-alignment-label">Horizontal alignment</label>
+              </div>
+              <div class="form-wrap">
                 <div class="form-grid form-grid-3x1 control-link-area-alignment-grid">
-                  <div class="input-wrap">
+                  <div class="form-wrap">
                     <input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1">
                     <label for="control-link-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
                   </div>
-                  <div class="input-wrap">
+                  <div class="form-wrap">
                     <input id="control-link-area-alignment-center" class="control-link-area-alignment-center" type="radio" name="control-link-area-alignment" value="center" tabindex="-1">
                     <label for="control-link-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
                   </div>
-                  <div class="input-wrap">
+                  <div class="form-wrap">
                     <input id="control-link-area-alignment-right" class="control-link-area-alignment-right" type="radio" name="control-link-area-alignment" value="right" tabindex="-1">
                     <label for="control-link-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
                   </div>
                 </div>
               </div>
-              <p class="control-link-area-alignment-helper form-helper small">Effects may not be visible if the Bookmark Area is full width.</p>
+              <div class="form-helper">
+                <p class="control-link-area-alignment-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1002,199 +1120,217 @@
               <h1 class="menu-item-header-text">Bookmarks</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-link-show" class="control-link-show" type="checkbox" tabindex="-1">
                 <label for="control-link-show"><span class="label-icon"></span> Show</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <label for="control-link-item-size">Bookmark Size</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-link-item-size" class="control-link-item-size mr-3" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
-                    <div class="control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                  </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-item-size-default button mb-0" tabindex="-1">Default Bookmark size</button>
-                </div>
-                <hr>
-                <label class="control-link-item-display-alignment-label">Content alignment</label>
-                <div class="form-grid-wrap">
-                  <div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
-                      <label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
-                      <label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
-                      <label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
-                      <label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
-                      <label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
-                      <label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
-                      <label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
-                      <label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
-                    </div>
-                    <div class="input-wrap">
-                      <input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
-                      <label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
-                    </div>
-                  </div>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-link-item-display-rotate">Content rotation</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
-                    <div class="control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                  </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-item-display-rotate-default button mb-0" tabindex="-1">Default rotation</button>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-link-item-display-translate-x">Content horizontally offset</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
-                    <div class="control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                  </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-item-display-translate-x-default button mb-0" tabindex="-1">Default horizontal translate</button>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-link-item-display-translate-y">Content vertically offset</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
-                    <div class="control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                  </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-item-display-translate-y-default button mb-0" tabindex="-1">Default vertical translate</button>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-link-item-display-gutter">Content gutter</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
-                    <div class="control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                  </div>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-item-display-gutter-default button mb-0" tabindex="-1">Default content gutter</button>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
-                  <label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align contents horizontally</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
-                  <label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align contents vertically</label>
-                </div>
-                <p class="control-link-item-display-direction-helper form-helper small">Only available when Letter/Icon and Name are shown.</p>
-                <p class="control-link-item-display-direction-helper form-helper small">Vertical alignment works well with Bookmark Block Style.</p>
-                <p class="control-link-item-display-direction-helper form-helper small">Horizontal alignment works well with Bookmark List Style.</p>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
-                  <label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
-                  <label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
-                </div>
-                <p class="control-link-item-display-order-helper form-helper small">Only available when Letter/Icon and Name are shown.</p>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
-                  <label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Letter/Icon</label>
-                </div>
+              <div class="form-wrap">
                 <div class="form-indent">
-                  <div class="input-wrap">
-                    <label for="control-link-item-display-letcon-letter-size">Letter size</label>
-                    <div class="form-group form-group-block mb-0">
-                      <input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                      <div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label for="control-link-item-size">Bookmark Size</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-link-item-size" class="control-link-item-size mr-3" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
+                      <div class="control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
                     </div>
                   </div>
-                  <div class="button-wrap">
-                    <button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default letter size</button>
+                  <div class="form-wrap">
+                    <button class="control-link-item-size-default button" tabindex="-1">Default Bookmark size</button>
                   </div>
                   <hr>
-                  <div class="input-wrap">
-                    <label for="control-link-item-display-letcon-icon-size">Icon size</label>
-                    <div class="form-group form-group-block mb-0">
-                      <input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                      <div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label class="control-link-item-display-alignment-label">Content alignment</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
+                        <label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
+                        <label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
+                        <label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
+                        <label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
+                        <label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
+                        <label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
+                        <label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
+                        <label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
+                      </div>
+                      <div class="form-wrap">
+                        <input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
+                        <label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
+                      </div>
                     </div>
                   </div>
-                  <div class="button-wrap">
-                    <button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default icon size</button>
-                  </div>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
-                  <label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
-                </div>
-                <div class="form-indent">
-                  <div class="input-wrap">
-                    <label for="control-link-item-display-name-size">Name size</label>
-                    <div class="form-group form-group-block mb-0">
-                      <input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                      <div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-link-item-display-rotate">Content rotation</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
+                      <div class="control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left"></div>
                     </div>
                   </div>
-                  <div class="button-wrap">
-                    <button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default name size</button>
+                  <div class="form-wrap">
+                    <button class="control-link-item-display-rotate-default button" tabindex="-1">Default rotation</button>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-link-item-display-translate-x">Content horizontally offset</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
+                      <div class="control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-link-item-display-translate-x-default button" tabindex="-1">Default horizontal translate</button>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-link-item-display-translate-y">Content vertically offset</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
+                      <div class="control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-link-item-display-translate-y-default button" tabindex="-1">Default vertical translate</button>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <label for="control-link-item-display-gutter">Content gutter</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
+                      <div class="control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-link-item-display-gutter-default button" tabindex="-1">Default content gutter</button>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
+                    <label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align contents horizontally</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
+                    <label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align contents vertically</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-link-item-display-direction-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-link-item-display-direction-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
+                    <label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
+                    <label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
+                    <label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Letter/Icon</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label for="control-link-item-display-letcon-letter-size">Letter size</label>
+                        <div class="form-group form-group-block">
+                          <input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
+                          <div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                        </div>
+                      </div>
+                      <div class="form-wrap">
+                        <button class="control-link-item-display-letcon-letter-size-default button" tabindex="-1">Default letter size</button>
+                      </div>
+                      <hr>
+                      <div class="form-wrap">
+                        <label for="control-link-item-display-letcon-icon-size">Icon size</label>
+                        <div class="form-group form-group-block">
+                          <input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
+                          <div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                        </div>
+                      </div>
+                      <div class="form-wrap">
+                        <button class="control-link-item-display-letcon-icon-size-default button" tabindex="-1">Default icon size</button>
+                      </div>
+                    </div>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
+                    <label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <label for="control-link-item-display-name-size">Name size</label>
+                        <div class="form-group form-group-block">
+                          <input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
+                          <div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                        </div>
+                      </div>
+                      <div class="form-wrap">
+                        <button class="control-link-item-display-name-size-default button" tabindex="-1">Default name size</button>
+                      </div>
+                    </div>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
+                    <label for="control-link-item-url-show"><span class="label-icon"></span> Show URL on Bookmark hover</label>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="-1">
+                    <label for="control-link-item-line-show"><span class="label-icon"></span> Show Bookmark line</label>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
+                    <label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-link-item-shadow-show-helper form-helper-item">Effects may not be visible if Theme Shadow is set to 0.</p>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
+                    <label for="control-link-item-hoverscale"><span class="label-icon"></span> Grow on Bookmark hover</label>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="-1">
+                    <label for="control-link-newtab"><span class="label-icon"></span> Open Bookmarks in a new tab</label>
                   </div>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
-                  <label for="control-link-item-url-show"><span class="label-icon"></span> Show URL on Bookmark hover</label>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="-1">
-                  <label for="control-link-item-line-show"><span class="label-icon"></span> Show Bookmark line</label>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
-                  <label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label>
-                </div>
-                <p class="control-link-item-shadow-show-helper form-helper small">Effects may not be visible if Theme Shadow is set to 0.</p>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
-                  <label for="control-link-item-hoverscale"><span class="label-icon"></span> Grow on Bookmark hover</label>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="-1">
-                  <label for="control-link-newtab"><span class="label-icon"></span> Open Bookmarks in a new tab</label>
                 </div>
               </div>
             </div>
@@ -1204,22 +1340,30 @@
               <h1 class="menu-item-header-text">Background colour</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
                 <label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
               </div>
-              <p class="control-link-item-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
-              <div class="input-wrap">
+              <div class="form-helper">
+                <p class="control-link-item-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
+              </div>
+              <div class="form-wrap">
                 <input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
                 <label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
               </div>
-              <p class="control-link-item-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
-              <p class="control-link-item-color-by-custom-helper form-helper small">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
-                    <input id="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+              <div class="form-helper">
+                <p class="control-link-item-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-link-item-color-by-custom-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
+              </div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <div class="form-group form-group-block">
+                      <input id="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker" type="color" value="#000000" tabindex="1">
+                      <input id="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1230,9 +1374,9 @@
               <h1 class="menu-item-header-text">Border</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-link-item-border">All sides</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-link-item-border" class="control-link-item-border mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
                   <div class="control-link-item-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
@@ -1244,16 +1388,20 @@
               <h1 class="menu-item-header-text">Style</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
                 <label for="control-link-style-block"><span class="label-icon"></span> Block</label>
               </div>
-              <p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped.</p>
-              <div class="input-wrap">
+              <div class="form-helper">
+                <p class="control-link-style-block-helper form-helper-item">Bookmark tiles more square shaped.</p>
+              </div>
+              <div class="form-wrap">
                 <input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
                 <label for="control-link-style-list"><span class="label-icon"></span> List</label>
               </div>
-              <p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide.</p>
+              <div class="form-helper">
+                <p class="control-link-style-list-helper form-helper-item">Bookmark tiles more short and wide.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1261,15 +1409,17 @@
               <h1 class="menu-item-header-text">Orientation</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
                 <label for="control-link-orientation-top"><span class="label-icon"></span> Top</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
                 <label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label>
               </div>
-              <p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top or bottom of a Bookmark Tile.</p>
+              <div class="form-helper">
+                <p class="control-link-orientation-helper form-helper-item">Display the URL and Controls either at the top or bottom of a Bookmark Tile.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1277,15 +1427,11 @@
               <h1 class="menu-item-header-text">Sort</h1>
             </div>
             <div class="menu-item-form">
-              <div class="form-inline">
-                <div class="button-wrap">
-                  <button class="control-link-sort-letter button mb-0" tabindex="-1">By letter</button>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-sort-icon button mb-0" tabindex="-1">By icon</button>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-link-sort-name button mb-0" tabindex="-1">By name</button>
+              <div class="form-wrap">
+                <div class="form-inline">
+                  <button class="control-link-sort-letter button" tabindex="-1">By letter</button>
+                  <button class="control-link-sort-icon button" tabindex="-1">By icon</button>
+                  <button class="control-link-sort-name button" tabindex="-1">By name</button>
                 </div>
               </div>
             </div>
@@ -1295,14 +1441,16 @@
               <h1 class="menu-item-header-text">Accent override</h1>
             </div>
             <div class="menu-item-form">
-              <div class="button-wrap">
-                <button class="control-link-accent-clear button mb-0" tabindex="-1">Remove all override colours</button>
+              <div class="form-wrap">
+                <button class="control-link-accent-clear button" tabindex="-1">Remove all override colours</button>
               </div>
               <hr>
-              <div class="button-wrap">
-                <button class="control-link-accent-set button mb-0" tabindex="-1">Add override colours</button>
+              <div class="form-wrap">
+                <button class="control-link-accent-set button" tabindex="-1">Add override colours</button>
+              </div>
+              <div class="form-helper">
+                <p class="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p>
               </div>
-              <p class="control-link-accent-set-helper form-helper small">Adds a unique override colour to each Bookmark.</p>
             </div>
           </div>
         </div>
@@ -1313,8 +1461,10 @@
               <h1 class="menu-item-header-text">Preset</h1>
             </div>
             <div class="menu-item-form">
-              <div class="theme-preset"></div>
-              <p class="control-theme-preset-helper form-helper small">Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.</p>
+              <div class="form-wrap theme-preset"></div>
+              <div class="form-helper">
+                <p class="control-theme-preset-helper form-helper-item">Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1322,17 +1472,19 @@
               <h1 class="menu-item-header-text">Saved</h1>
             </div>
             <div class="menu-item-form">
-              <div class="theme-custom"></div>
-              <div class="form-inline">
-                <div class="button-wrap">
-                  <button class="control-theme-custom-add button mb-0" tabindex="-1">Save current theme</button>
-                </div>
-                <div class="input-wrap input-button input-hide">
-                  <input id="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
-                  <label for="control-theme-custom-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
+              <div class="form-wrap form-wrap-hide-space theme-custom"></div>
+              <div class="form-wrap">
+                <div class="form-inline">
+                  <button class="control-theme-custom-add button" tabindex="-1">Save current theme</button>
+                  <div class="form-input-button form-input-hide">
+                    <input id="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
+                    <label for="control-theme-custom-edit"><span class="label-icon"></span> Edit</label>
+                  </div>
                 </div>
               </div>
-              <p class="control-theme-custom-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>
+              <div class="form-helper">
+                <p class="control-theme-custom-helper form-helper-item">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1340,15 +1492,17 @@
               <h1 class="menu-item-header-text">Style</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
                 <label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
                 <label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
               </div>
-              <p class="control-theme-style-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
+              <div class="form-helper">
+                <p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1356,81 +1510,103 @@
               <h1 class="menu-item-header-text">Fonts</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-font-display-name">Display font</label>
-                <input id="control-theme-font-display-name" class="control-theme-font-display-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
+                <input id="control-theme-font-display-name" class="control-theme-font-display-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-font-display-name-default button mb-0" tabindex="-1">Default display font</button>
+              <div class="form-wrap">
+                <button class="control-theme-font-display-name-default button" tabindex="-1">Default display font</button>
               </div>
-              <p class="control-theme-font-display-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
-              <p class="control-theme-font-display-helper form-helper small">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"</p>
-              <p class="control-theme-font-display-helper form-helper small">Clear the field to use the default font "Fjalla".</p>
-              <div class="form-indent">
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-theme-font-display-weight">Font weight</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-theme-font-display-weight" class="control-theme-font-display-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
-                    <div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
+              <div class="form-helper">
+                <p class="control-theme-font-display-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-font-display-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-font-display-helper form-helper-item">Clear the field to use the default font "Fjalla".</p>
+              </div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <label for="control-theme-font-display-weight">Font weight</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-theme-font-display-weight" class="control-theme-font-display-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
+                      <div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-group">
+                      <button class="control-theme-font-display-light button" tabindex="-1">Light</button>
+                      <button class="control-theme-font-display-regular button" tabindex="-1">Regular</button>
+                      <button class="control-theme-font-display-bold button" tabindex="-1">Bold</button>
+                    </div>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-theme-font-display-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" type="radio" name="control-theme-font-display-style" value="normal" tabindex="-1">
+                    <label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
+                    <label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-theme-font-display-weight-style-default button" tabindex="-1">Default weight and style</button>
                   </div>
-                </div>
-                <div class="form-group">
-                  <button class="control-theme-font-display-light button mb-0" tabindex="-1">Light</button>
-                  <button class="control-theme-font-display-regular button mb-0" tabindex="-1">Regular</button>
-                  <button class="control-theme-font-display-bold button mb-0" tabindex="-1">Bold</button>
-                </div>
-                <p class="control-theme-font-display-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" type="radio" name="control-theme-font-display-style" value="normal" tabindex="-1">
-                  <label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
-                  <label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-theme-font-display-weight-style-default button mb-0" tabindex="-1">Default weight and style</button>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-font-ui-name">UI font</label>
-                <input id="control-theme-font-ui-name" class="control-theme-font-ui-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
+                <input id="control-theme-font-ui-name" class="control-theme-font-ui-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-font-ui-name-default button mb-0" tabindex="-1">Default UI font</button>
+              <div class="form-wrap">
+                <button class="control-theme-font-ui-name-default button" tabindex="-1">Default UI font</button>
               </div>
-              <p class="control-theme-font-ui-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
-              <p class="control-theme-font-ui-helper form-helper small">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"</p>
-              <p class="control-theme-font-ui-helper form-helper small">Clear the field to use the default font "Open Sans".</p>
-              <div class="form-indent">
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-theme-font-ui-weight">Font weight</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-theme-font-ui-weight" class="control-theme-font-ui-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
-                    <div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
+              <div class="form-helper">
+                <p class="control-theme-font-ui-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-font-ui-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-font-ui-helper form-helper-item">Clear the field to use the default font "Open Sans".</p>
+              </div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <label for="control-theme-font-ui-weight">Font weight</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-theme-font-ui-weight" class="control-theme-font-ui-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
+                      <div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-group">
+                      <button class="control-theme-font-ui-light button" tabindex="-1">Light</button>
+                      <button class="control-theme-font-ui-regular button" tabindex="-1">Regular</button>
+                      <button class="control-theme-font-ui-bold button" tabindex="-1">Bold</button>
+                    </div>
+                  </div>
+                  <div class="form-helper">
+                    <p class="control-theme-font-ui-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
+                  </div>
+                  <hr>
+                  <div class="form-wrap">
+                    <input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
+                    <label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
+                    <label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-theme-font-ui-weight-style-default button" tabindex="-1">Default weight and style</button>
                   </div>
-                </div>
-                <div class="form-group">
-                  <button class="control-theme-font-ui-light button mb-0" tabindex="-1">Light</button>
-                  <button class="control-theme-font-ui-regular button mb-0" tabindex="-1">Regular</button>
-                  <button class="control-theme-font-ui-bold button mb-0" tabindex="-1">Bold</button>
-                </div>
-                <p class="control-theme-font-ui-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
-                <hr>
-                <div class="input-wrap">
-                  <input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
-                  <label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
-                  <label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-theme-font-ui-weight-style-default button mb-0" tabindex="-1">Default weight and style</button>
                 </div>
               </div>
             </div>
@@ -1440,155 +1616,165 @@
               <h1 class="menu-item-header-text">Colour</h1>
             </div>
             <div class="menu-item-form">
-              <div class="menu-item-form-sticky">
-                <div class="p-wrap">
+              <div class="form-sticky">
+                <div class="form-wrap">
                   <p>Colour shades</p>
                 </div>
-                <div class="form-group form-group-block form-group-border form-group-border-theme-color mb-0">
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-10"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-09"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-08"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-07"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-06"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-05"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-04"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-03"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-02"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-neg-01"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless form-group-item-small">
-                    <div class="theme-color-box theme-color"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-01"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-02"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-03"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-04"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-05"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-06"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-07"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-08"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-09"></div>
-                  </div>
-                  <div class="form-group-text form-group-text-borderless">
-                    <div class="theme-color-box theme-color-pos-10"></div>
+                <div class="form-wrap">
+                  <div class="form-group form-group-block form-group-border form-group-border-theme-color">
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-10"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-09"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-08"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-07"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-06"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-05"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-04"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-03"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-02"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-neg-01"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless form-group-item-small">
+                      <div class="theme-color-box theme-color"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-01"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-02"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-03"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-04"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-05"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-06"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-07"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-08"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-09"></div>
+                    </div>
+                    <div class="form-group-text form-group-text-borderless">
+                      <div class="theme-color-box theme-color-pos-10"></div>
+                    </div>
                   </div>
                 </div>
               </div>
-              <p class="control-theme-color-helper form-helper small">Backgrounds, Bookmarks and Modals use shades from the left.</p>
-              <p class="control-theme-color-helper form-helper small">Text and form elements use shades from the right.</p>
-              <p class="control-theme-color-helper form-helper small">For a light look switch to the Light Style and then select a Shade colour.</p>
+              <div class="form-helper">
+                <p class="control-theme-color-helper form-helper-item">Backgrounds, Bookmarks and Modals use shades from the left.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-color-helper form-helper-item">Text and form elements use shades from the right.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-color-helper form-helper-item">For a light look switch to the Light Style and then select a Shade colour.</p>
+              </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-rgb-picker">Primary colour</label>
-                <div class="form-group form-group-block mb-0">
-                  <input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker mb-0" type="color" value="#000000" tabindex="1">
-                  <input id="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                <div class="form-group form-group-block">
+                  <input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker" type="color" value="#000000" tabindex="1">
+                  <input id="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                 </div>
               </div>
-              <p class="control-theme-color-helper form-helper small">Light and dark shades from this colour are used across nightTabs.</p>
-              <div class="button-wrap">
-                <button class="control-theme-color-rgb-default button mb-0" tabindex="-1">Default primary colour</button>
+              <div class="form-helper">
+                <p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
+              </div>
+              <div class="form-wrap">
+                <button class="control-theme-color-rgb-default button" tabindex="-1">Default primary colour</button>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-hsl-h">Hue</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-hsl-h" class="control-theme-color-hsl-h mr-3" type="range" min="0" max="359" value="0" tabindex="-1">
                   <div class="control-theme-color-hsl-h-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-hsl-s">Saturation</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-hsl-s" class="control-theme-color-hsl-s mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
                   <div class="control-theme-color-hsl-s-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-hsl-l">Lightness</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-hsl-l" class="control-theme-color-hsl-l mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
                   <div class="control-theme-color-hsl-l-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-rgb-r">Red</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-rgb-r" class="control-theme-color-rgb-r mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
                   <div class="control-theme-color-rgb-r-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-rgb-g">Green</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-rgb-g" class="control-theme-color-rgb-g mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
                   <div class="control-theme-color-rgb-g-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-rgb-b">Blue</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-rgb-b" class="control-theme-color-rgb-b mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
                   <div class="control-theme-color-rgb-b-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-contrast-light">Light shade contrast</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-contrast-light" class="control-theme-color-contrast-light mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
                   <div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-color-contrast-light-default button mb-0" tabindex="-1">Default light shade contrast</button>
+              <div class="form-wrap">
+                <button class="control-theme-color-contrast-light-default button" tabindex="-1">Default light shade contrast</button>
               </div>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-color-contrast-dark">Dark shade contrast</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-color-contrast-dark" class="control-theme-color-contrast-dark mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
                   <div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-color-contrast-dark-default button mb-0" tabindex="-1">Default dark shade contrast</button>
+              <div class="form-wrap">
+                <button class="control-theme-color-contrast-dark-default button" tabindex="-1">Default dark shade contrast</button>
               </div>
             </div>
           </div>
@@ -1597,45 +1783,49 @@
               <h1 class="menu-item-header-text">Accent</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-accent-current-picker">Colour</label>
-                <div class="form-group form-group-block mb-0">
-                  <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
-                  <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                <div class="form-group form-group-block">
+                  <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker" type="color" value="#000000" tabindex="1">
+                  <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-accent-current-default button mb-0" tabindex="-1">Default accent</button>
+              <div class="form-wrap">
+                <button class="control-theme-accent-current-default button" tabindex="-1">Default accent</button>
+              </div>
+              <div class="form-helper">
+                <p class="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
               </div>
-              <p class="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header Area.</p>
               <hr>
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
                 <label for="control-theme-accent-random-active"><span class="label-icon"></span> Random Accent colour on load/refresh</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="-1">
-                  <label for="control-theme-accent-random-style-any"><span class="label-icon"></span> Any colour</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="-1">
-                  <label for="control-theme-accent-random-style-light"><span class="label-icon"></span> Light colours</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="-1">
-                  <label for="control-theme-accent-random-style-dark"><span class="label-icon"></span> Dark colours</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="-1">
-                  <label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span> Pastel colours</label>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="-1">
-                  <label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span> Saturated colours</label>
-                </div>
-                <div class="button-wrap">
-                  <button class="control-theme-accent-randomise button mb-0" tabindex="-1">Randomise now</button>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="-1">
+                    <label for="control-theme-accent-random-style-any"><span class="label-icon"></span> Any colour</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="-1">
+                    <label for="control-theme-accent-random-style-light"><span class="label-icon"></span> Light colours</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="-1">
+                    <label for="control-theme-accent-random-style-dark"><span class="label-icon"></span> Dark colours</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="-1">
+                    <label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span> Pastel colours</label>
+                  </div>
+                  <div class="form-wrap">
+                    <input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="-1">
+                    <label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span> Saturated colours</label>
+                  </div>
+                  <div class="form-wrap">
+                    <button class="control-theme-accent-randomise button" tabindex="-1">Randomise now</button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1645,15 +1835,15 @@
               <h1 class="menu-item-header-text">Radius</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-radius">All corners</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="400" value="0" step="5" tabindex="-1">
                   <div class="control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
+              <div class="form-wrap">
+                <button class="control-theme-radius-default button" tabindex="-1">Default radius</button>
               </div>
             </div>
           </div>
@@ -1662,62 +1852,67 @@
               <h1 class="menu-item-header-text">Shadow</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <label for="control-theme-shadow">Size</label>
-                <div class="form-group form-group-block mb-0">
+                <div class="form-group form-group-block">
                   <input id="control-theme-shadow" class="control-theme-shadow mr-3" type="range" min="0" max="300" value="0" step="25" tabindex="-1">
                   <div class="control-theme-shadow-count form-group-text form-group-item-medium form-group-radius-left"></div>
                 </div>
               </div>
-              <div class="button-wrap">
-                <button class="control-theme-shadow-default button mb-0" tabindex="-1">Default shadow size</button>
+              <div class="form-wrap">
+                <button class="control-theme-shadow-default button" tabindex="-1">Default shadow size</button>
               </div>
               <hr>
-              <div class="form-group-wrap">
-                <div class="form-group form-group-block mb-0">
-                  <div class="form-group-text form-group-text-transparent form-group-text-borderless">
-                    <div class="theme-shadow-box theme-shadow-box-small">
-                      <p class="mb-0 small">Small shadow</p>
-                    </div>
+              <div class="form-wrap">
+                <div class="form-inline form-inline-space-between">
+                  <div class="theme-shadow-box theme-shadow-box-small">
+                    <p class="mb-0 small">Small shadows</p>
                   </div>
-                  <div class="form-group-text form-group-text-transparent form-group-text-borderless">
-                    <div class="theme-shadow-box theme-shadow-box-medium">
-                      <p class="mb-0 small">Medium shadow</p>
-                    </div>
+                  <div class="theme-shadow-box theme-shadow-box-medium">
+                    <p class="mb-0 small">Medium shadows</p>
                   </div>
-                  <div class="form-group-text form-group-text-transparent form-group-text-borderless">
-                    <div class="theme-shadow-box theme-shadow-box-large">
-                      <p class="mb-0 small">Large shadow</p>
-                    </div>
+                  <div class="theme-shadow-box theme-shadow-box-large">
+                    <p class="mb-0 small">Large shadows</p>
                   </div>
                 </div>
               </div>
-              <p class="control-theme-shadow-helper form-helper small">Bookmarks and Modals will use the Large shadow.</p>
+              <div class="form-helper">
+                <p class="control-theme-shadow-helper form-helper-item">Bookmarks and Modals will use the Large shadow.</p>
+              </div>
             </div>
           </div>
         </div>
+
         <div class="menu-content-area menu-content-area-background is-hidden">
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Colour</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
                 <label for="control-background-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
               </div>
-              <p class="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
-              <div class="input-wrap">
+              <div class="form-helper">
+                <p class="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
+              </div>
+              <div class="form-wrap">
                 <input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
                 <label for="control-background-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
               </div>
-              <p class="control-background-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
-              <p class="control-background-color-by-custom-helper form-helper small">Take care as some colours may make the Clock, Date and other text unreadable.</p>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
-                    <input id="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+              <div class="form-helper">
+                <p class="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
+              </div>
+              <div class="form-wrap">
+                <div class="form-indent">
+                  <div class="form-wrap">
+                    <div class="form-group form-group-block">
+                      <input id="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker" type="color" value="#000000" tabindex="1">
+                      <input id="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1728,79 +1923,95 @@
               <h1 class="menu-item-header-text">Image</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="form-wrap">
                 <input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
                 <label for="control-background-image-show"><span class="label-icon"></span> Show</label>
               </div>
-              <div class="form-indent">
-                <div class="input-wrap">
-                  <input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
-                  <label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
-                </div>
+              <div class="form-wrap">
                 <div class="form-indent">
-                  <div class="form-inline">
-                    <div class="input-wrap input-button input-hide">
-                      <input id="control-background-image-file" class="control-background-image-file" type="file">
-                      <label for="control-background-image-file">Select image</label>
-                    </div>
-                    <div class="button-wrap">
-                      <button class="control-background-image-file-clear button mb-0" href="#">Clear image</button>
+                  <div class="form-wrap">
+                    <input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
+                    <label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
+                  </div>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-inline">
+                        <div class="form-input-button form-input-hide">
+                          <input id="control-background-image-file" class="control-background-image-file" type="file">
+                          <label for="control-background-image-file">Select image</label>
+                        </div>
+                        <button class="control-background-image-file-clear button">Clear image</button>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
+                      </div>
+                      <div class="form-wrap">
+                        <div class="control-background-image-file-feedback form-feedback"></div>
+                      </div>
                     </div>
                   </div>
-                  <p class="control-background-image-file-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
-                  <p class="control-background-image-file-helper form-helper small">Take care with large files, they may impact performance.</p>
-                  <div class="feedback-wrap">
-                    <div class="control-background-image-file-feedback form-feedback"></div>
+                  <div class="form-wrap">
+                    <input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
+                    <label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
                   </div>
-                </div>
-                <div class="input-wrap">
-                  <input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
-                  <label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
-                </div>
-                <div class="form-indent">
-                  <div class="input-wrap">
-                    <textarea id="control-background-image-url" class="control-background-image-url mb-0" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
+                  <div class="form-wrap">
+                    <div class="form-indent">
+                      <div class="form-wrap">
+                        <textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
+                      </div>
+                      <hr>
+                      <div class="form-helper">
+                        <p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
+                      </div>
+                      <div class="form-helper">
+                        <p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
+                      </div>
+                    </div>
                   </div>
-                  <p class="control-background-image-url-helper form-helper small">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
                   <hr>
-                  <p class="control-background-image-url-helper form-helper small">Unsplash can be used for random images, eg:</p>
-                  <p class="control-background-image-url-helper form-helper small"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
-                  <p class="control-background-image-url-helper form-helper small">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
-                </div>
-                <hr>
-                <div class="input-wrap">
-                  <label for="control-background-image-opacity">Opacity</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-background-image-opacity" class="control-background-image-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                    <div class="control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label for="control-background-image-opacity">Opacity</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-background-image-opacity" class="control-background-image-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
+                      <div class="control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
                   </div>
-                </div>
-                <div class="input-wrap">
-                  <label for="control-background-image-grayscale">Grayscale</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-background-image-grayscale" class="control-background-image-grayscale mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                    <div class="control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label for="control-background-image-grayscale">Grayscale</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-background-image-grayscale" class="control-background-image-grayscale mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
+                      <div class="control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
                   </div>
-                </div>
-                <div class="input-wrap">
-                  <label for="control-background-image-blur">Blur</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-background-image-blur" class="control-background-image-blur mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-                    <div class="control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label for="control-background-image-blur">Blur</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-background-image-blur" class="control-background-image-blur mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
+                      <div class="control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
                   </div>
-                </div>
-                <div class="input-wrap">
-                  <label for="control-background-image-accent">Accent overlay</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="90" value="0" tabindex="-1">
-                    <div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label for="control-background-image-accent">Accent overlay</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="90" value="0" tabindex="-1">
+                      <div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
                   </div>
-                </div>
-                <div class="input-wrap">
-                  <label for="control-background-image-scale">Size</label>
-                  <div class="form-group form-group-block mb-0">
-                    <input id="control-background-image-scale" class="control-background-image-scale mr-3" type="range" min="100" max="300" value="0" tabindex="-1">
-                    <div class="control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  <div class="form-wrap">
+                    <label for="control-background-image-scale">Size</label>
+                    <div class="form-group form-group-block">
+                      <input id="control-background-image-scale" class="control-background-image-scale mr-3" type="range" min="100" max="300" value="0" tabindex="-1">
+                      <div class="control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1814,12 +2025,16 @@
               <h1 class="menu-item-header-text">Restore</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap input-button input-hide">
-                <input id="control-data-import" class="control-data-import" type="file" tabindex="-1">
-                <label for="control-data-import">Import data</label>
+              <div class="form-wrap">
+                <div class="form-input-button form-input-hide">
+                  <input id="control-data-import" class="control-data-import" type="file" tabindex="-1">
+                  <label for="control-data-import">Import data</label>
+                </div>
               </div>
-              <p class="control-data-import-helper form-helper small">Restore a previously exported nightTab backup.</p>
-              <div class="feedback-wrap">
+              <div class="form-helper">
+                <p class="control-data-import-helper form-helper-item">Restore a previously exported nightTab backup.</p>
+              </div>
+              <div class="form-wrap">
                 <div class="control-data-import-feedback form-feedback"></div>
               </div>
             </div>
@@ -1829,11 +2044,15 @@
               <h1 class="menu-item-header-text">Backup</h1>
             </div>
             <div class="menu-item-form">
-              <div class="button-wrap">
-                <button class="control-data-export button mb-0" href="#" tabindex="-1">Export data</button>
+              <div class="form-wrap">
+                <button class="control-data-export button" tabindex="-1">Export data</button>
+              </div>
+              <div class="form-helper">
+                <p class="control-data-export-helper form-helper-item">Download a backup of your nightTab Bookmarks and Settings.</p>
+              </div>
+              <div class="form-helper">
+                <p class="control-data-export-helper form-helper-item">This file can later be imported on this or another deivce.</p>
               </div>
-              <p class="control-data-export-helper form-helper small">Download a backup of your nightTab Bookmarks and Settings.</p>
-              <p class="control-data-export-helper form-helper small">This file can later be imported on this or another deivce.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -1841,10 +2060,12 @@
               <h1 class="menu-item-header-text">Clear</h1>
             </div>
             <div class="menu-item-form">
-              <div class="button-wrap">
-                <button class="control-data-clear button mb-0" href="#" tabindex="-1">Clear data</button>
+              <div class="form-wrap">
+                <button class="control-data-clear button" tabindex="-1">Clear data</button>
+              </div>
+              <div class="form-helper">
+                <p class="control-data-clear-helper form-helper-item">Wipe all data and restore nightTab to default state.</p>
               </div>
-              <p class="control-data-clear-helper form-helper small">Wipe all data and restore nightTab to default state.</p>
             </div>
           </div>
         </div>
@@ -1855,16 +2076,16 @@
               <h1 class="menu-item-header-text">nightTab</h1>
             </div>
             <div class="menu-item-form">
-              <div class="p-wrap">
+              <div class="form-wrap">
                 <p class="mb-1">Version <strong class="display-version"></strong></p>
-                <p class="display-name small mb-0"></p>
+                <p class="display-name small"></p>
               </div>
               <hr>
-              <div class="p-wrap">
+              <div class="form-wrap">
                 <p>Project repository on <a href="https://github.com/zombieFox/nightTab" target="_blank" tabindex="-1">Github</a>.</p>
               </div>
               <hr>
-              <div class="p-wrap">
+              <div class="form-wrap">
                 <p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" target="_blank" tabindex="-1">Issues.</a></p>
               </div>
             </div>
diff --git a/src/js/control.js b/src/js/control.js
index 242e95d2..b31ec315 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -90,6 +90,75 @@ var control = (function() {
       theme.render.accent.input.hex();
       link.groupAndItems();
     }
+  }, {
+    element: helper.e(".control-layout-size"),
+    path: "layout.size",
+    type: "range",
+    valueMod: ["float"],
+    rangeCountElement: helper.e(".control-layout-size-count"),
+    additionalEvents: [{
+      event: "input",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".layout"),
+        });
+      }
+    }, {
+      event: "mousedown",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".layout"),
+        });
+      }
+    }, {
+      event: "mouseup",
+      func: function() {
+        edge.box.close();
+      }
+    }, {
+      event: "touchend",
+      func: function() {
+        edge.box.close();
+      }
+    }, {
+      event: "keydown",
+      func: function() {
+        if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
+          edge.box.open({
+            element: helper.e(".layout"),
+          });
+        };
+      }
+    }, {
+      event: "keyup",
+      func: function() {
+        edge.box.close();
+      }
+    }],
+    func: function() {
+      layout.render.size();
+      render.range.count(this);
+    }
+  }, {
+    element: helper.e(".control-layout-size-default"),
+    type: "button",
+    additionalEvents: [{
+      event: "click",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".layout"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      mod.setValue("layout.size", helper.getObject({
+        object: state.get.default(),
+        path: "layout.size"
+      }));
+      layout.render.size();
+      render.update();
+    }
   }, {
     element: helper.e(".control-layout-width"),
     path: "layout.width",
@@ -376,75 +445,6 @@ var control = (function() {
       layout.render.gutter();
       render.update();
     }
-  }, {
-    element: helper.e(".control-layout-size"),
-    path: "layout.size",
-    type: "range",
-    valueMod: ["float"],
-    rangeCountElement: helper.e(".control-layout-size-count"),
-    additionalEvents: [{
-      event: "input",
-      func: function() {
-        edge.box.open({
-          element: helper.e(".layout"),
-        });
-      }
-    }, {
-      event: "mousedown",
-      func: function() {
-        edge.box.open({
-          element: helper.e(".layout"),
-        });
-      }
-    }, {
-      event: "mouseup",
-      func: function() {
-        edge.box.close();
-      }
-    }, {
-      event: "touchend",
-      func: function() {
-        edge.box.close();
-      }
-    }, {
-      event: "keydown",
-      func: function() {
-        if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
-          edge.box.open({
-            element: helper.e(".layout"),
-          });
-        };
-      }
-    }, {
-      event: "keyup",
-      func: function() {
-        edge.box.close();
-      }
-    }],
-    func: function() {
-      layout.render.size();
-      render.range.count(this);
-    }
-  }, {
-    element: helper.e(".control-layout-size-default"),
-    type: "button",
-    additionalEvents: [{
-      event: "click",
-      func: function() {
-        edge.box.open({
-          element: helper.e(".layout"),
-          delay: 500
-        });
-      }
-    }],
-    func: function() {
-      mod.setValue("layout.size", helper.getObject({
-        object: state.get.default(),
-        path: "layout.size"
-      }));
-      layout.render.size();
-      render.update();
-    }
   }, {
     element: helper.e(".control-layout-title"),
     path: "layout.title",
@@ -1397,15 +1397,6 @@ var control = (function() {
     element: helper.e(".control-header-search-style-auto"),
     path: "header.search.style",
     type: "radio",
-    additionalEvents: [{
-      event: "change",
-      func: function() {
-        edge.box.open({
-          element: helper.e(".header-search-input"),
-          delay: 500
-        });
-      }
-    }],
     func: function() {
       render.class();
       render.dependents();
@@ -1415,15 +1406,6 @@ var control = (function() {
     element: helper.e(".control-header-search-style-custom"),
     path: "header.search.style",
     type: "radio",
-    additionalEvents: [{
-      event: "change",
-      func: function() {
-        edge.box.open({
-          element: helper.e(".header-search-input"),
-          delay: 500
-        });
-      }
-    }],
     func: function() {
       render.class();
       render.dependents();
diff --git a/src/js/header.js b/src/js/header.js
index aca9295b..45f241c9 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -134,17 +134,17 @@ var header = (function() {
     style: function() {
       var action = {
         box: function() {
-          helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link");
+          helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
           helper.removeClass(helper.e(".control-add-toggle"), "button-link");
-          helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-button-link");
-          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
+          helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
+          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
           helper.removeClass(helper.e(".control-menu-open"), "button-link");
         },
         clear: function() {
-          helper.addClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link");
+          helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
           helper.addClass(helper.e(".control-add-toggle"), "button-link");
-          helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-button-link");
-          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
+          helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
+          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
           helper.addClass(helper.e(".control-menu-open"), "button-link");
         }
       };
@@ -152,19 +152,19 @@ var header = (function() {
     },
     dot: function() {
       if (state.get.current().header.button.colorAccent.dot.show) {
-        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot-shade");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot-accent");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-hide");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
       } else {
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot-shade");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot-accent");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-hide");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
       };
     }
   };
diff --git a/src/js/link.js b/src/js/link.js
index 4c807840..1bd1a147 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -434,16 +434,16 @@ var link = (function() {
       var fieldset = helper.node("fieldset");
 
       // group position
-      var groupFormPositionInputWrap = helper.node("div|class:input-wrap");
+      var groupFormPositionInputWrap = helper.node("div|class:form-wrap");
       var groupFormPositionLabel = helper.node("label:Position|for:group-form-position");
-      var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position mb-0,tabindex:1");
-      var groupFormRandomNameButtonWrap = helper.node("div|class:button-wrap");
-      var groupFormRandomNameButton = helper.node("button:Random Group name|class:button mb-0,type:button,tabindex:1");
+      var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position,tabindex:1");
+      var groupFormRandomNameButtonWrap = helper.node("div|class:form-wrap");
+      var groupFormRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1");
 
       // group name
-      var groupFormNameInputWrap = helper.node("div|class:input-wrap");
+      var groupFormNameInputWrap = helper.node("div|class:form-wrap");
       var groupFormInputLabel = helper.node("label:Name|for:group-form-input-name");
-      var groupFormInputName = helper.node("input|type:text,class:group-form-input-name mb-0,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      var groupFormInputName = helper.node("input|type:text,class:group-form-input-name,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
 
       groupFormPositionInputWrap.appendChild(groupFormPositionLabel);
       groupFormPositionInputWrap.appendChild(groupFormPositionSelect);
@@ -685,91 +685,100 @@ var link = (function() {
       var fieldset = helper.node("fieldset");
 
       // group existing
-      var groupExistingRadioWrap = helper.node("div|class:input-wrap");
+      var groupExistingRadioWrap = helper.node("div|class:form-wrap");
       var groupExistingRadio = helper.node("input|class:link-form-input-group-existing,id:link-form-input-group-existing,type:radio,name:link-form-input-group,tabindex:1,checked,value:existing");
       var groupExistingLable = helper.node("label|for:link-form-input-group-existing");
       var groupExistingLableText = helper.node("span:Existing Group");
       var groupExistingLableIcon = helper.node("span|class:label-icon");
+      var groupExistingFormIndentWrap = helper.node("div|class:form-wrap");
       var groupExistingFormIndent = helper.node("div|class:form-indent");
-      var groupExistingGroupInputWrap = helper.node("div|class:input-wrap");
-      var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group mb-0,tabindex:1");
-      var groupExistingPositionInputWrap = helper.node("div|class:input-wrap");
+      var groupExistingGroupInputWrap = helper.node("div|class:form-wrap");
+      var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group,tabindex:1");
+      var groupExistingPositionInputWrap = helper.node("div|class:form-wrap");
       var groupExistingPositionLabel = helper.node("label:Position|for:link-form-position");
-      var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position mb-0,tabindex:1");
+      var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position,tabindex:1");
 
       // group new
-      var groupNewRadioWrap = helper.node("div|class:input-wrap");
+      var groupNewRadioWrap = helper.node("div|class:form-wrap");
       var groupNewRadio = helper.node("input|class:link-form-input-group-new,id:link-form-input-group-new,type:radio,name:link-form-input-group,tabindex:1,value:new");
       var groupNewLable = helper.node("label|for:link-form-input-group-new");
       var groupNewLableLableText = helper.node("span:New Group");
       var groupNewLableLableIcon = helper.node("span|class:label-icon");
+      var groupNewFormIndentWrap = helper.node("div|class:form-wrap");
       var groupNewFormIndent = helper.node("div|class:form-indent");
-      var groupNewInputWrap = helper.node("div|class:input-wrap");
-      var groupNewInput = helper.node("input|type:text,class:link-form-input-new-group mb-0,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
-      var groupNewRandomNameButtonWrap = helper.node("div|class:button-wrap");
-      var groupNewRandomNameButton = helper.node("button:Random Group name|class:button mb-0,type:button,tabindex:1,disabled");
+      var groupNewInputWrap = helper.node("div|class:form-wrap");
+      var groupNewInput = helper.node("input|type:text,class:link-form-input-new-group,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+      var groupNewRandomNameButtonWrap = helper.node("div|class:form-wrap");
+      var groupNewRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1,disabled");
 
       // letter
-      var displayLetterRadioWrap = helper.node("div|class:input-wrap");
+      var displayLetterRadioWrap = helper.node("div|class:form-wrap");
       var displayLetterRadio = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
       var displayLetterLable = helper.node("label|for:link-form-input-display-letter");
       var displayLetterLableText = helper.node("span:Letters");
       var displayLetterLableIcon = helper.node("span|class:label-icon");
+      var displayLetterFormIndentWrap = helper.node("div|class:form-wrap");
       var displayLetterFormIndent = helper.node("div|class:form-indent");
-      var displayLetterInputWrap = helper.node("div|class:input-wrap");
-      var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      var displayLetterInputWrap = helper.node("div|class:form-wrap");
+      var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
 
       // icon
-      var displayIconRadiotWrap = helper.node("div|class:input-wrap");
+      var displayIconRadiotWrap = helper.node("div|class:form-wrap");
       var displayIconRadio = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
       var displayIconLable = helper.node("label|for:link-form-input-display-icon");
       var displayIconLableText = helper.node("span:Icon");
       var displayIconLableIcon = helper.node("span|class:label-icon");
+      var displayIconFormIndentWrap = helper.node("div|class:form-wrap");
       var displayIconFormIndent = helper.node("div|class:form-indent");
-      var displayIconInputWrap = helper.node("div|class:input-wrap");
-      var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input");
+      var displayIconInputWrap = helper.node("div|class:form-wrap");
+      var displayIconFormGroup = helper.node("div|class:form-group form-group-block auto-suggest-input");
       var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
       var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
-      var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
+      var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button,type:button,tabindex:1,disabled");
       var displayIconFormGroupClearIcon = helper.node("span|class:icon-close");
-      var displayIconHelper = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
+      var displayIconHelper = helper.node("div|class:form-helper");
+      var displayIconHelperItem = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper-item disabled");
 
       // name
-      var nameInputWrap = helper.node("div|class:input-wrap");
+      var nameInputWrap = helper.node("div|class:form-wrap");
       var nameLabel = helper.node("label:Name|for:link-form-input-name");
-      var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      var nameInput = helper.node("input|type:text,class:link-form-input-name,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
 
       // url
-      var urlInputWrap = helper.node("div|class:input-wrap");
+      var urlInputWrap = helper.node("div|class:form-wrap");
       var urlLabel = helper.node("label:URL|for:link-form-input-url");
-      var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
-      var urlInputHelper = helper.makeNode({
+      var urlInput = helper.node("input|type:text,class:link-form-input-url,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      var urlInputHelper = helper.node("div|class:form-helper");
+      var urlInputHelperItem = helper.makeNode({
         tag: "p",
         text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
         attr: [{
           key: "class",
-          value: "form-helper small muted"
+          value: "form-helper-item"
         }]
       });
 
       // accent
+      var accentLabelWrap = helper.node("div|class:form-wrap");
       var accentLabel = helper.node("label:Accent colour");
-      var accentGlobalRadioWrap = helper.node("div|class:input-wrap");
+      var accentGlobalRadioWrap = helper.node("div|class:form-wrap");
       var accentGlobalRadio = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
       var accentGlobalLabel = helper.node("label|for:link-form-input-accent-global");
       var accentGlobalLabelText = helper.node("span:Global");
       var accentGlobalLabelIcon = helper.node("span|class:label-icon");
-      var accentCustomInputWrap = helper.node("div|class:input-wrap");
+      var accentCustomInputWrap = helper.node("div|class:form-wrap");
       var accentCustomRadio = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
       var accentCustomLabel = helper.node("label|for:link-form-input-accent-custom");
       var accentCustomLabelText = helper.node("span:Custom");
       var accentCustomLabelIcon = helper.node("span|class:label-icon");
+      var accentColorFormIndentWrap = helper.node("div|class:form-wrap");
       var accentColorFormIndent = helper.node("div|class:form-indent");
-      var accentColorInputWrap = helper.node("div|class:input-wrap");
-      var accentColorFormGroup = helper.node("div|class:form-group form-group-block mb-0");
-      var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
-      var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
-      var accentColorInputHelper = helper.node("p:Use this colour to override the global accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
+      var accentColorInputWrap = helper.node("div|class:form-wrap");
+      var accentColorFormGroup = helper.node("div|class:form-group form-group-block");
+      var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker,type:color,value:#000000,tabindex:1,disabled");
+      var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
+      var accentColorInputHelper = helper.node("div|class:form-helper");
+      var accentColorInputHelperItem = helper.node("p:Use this colour to override the global accent colour.|class:link-form-input-accent-helper form-helper-item");
 
       groupExistingRadioWrap.appendChild(groupExistingRadio);
       groupExistingLable.appendChild(groupExistingLableIcon);
@@ -780,8 +789,9 @@ var link = (function() {
       groupExistingPositionInputWrap.appendChild(groupExistingPosition);
       groupExistingFormIndent.appendChild(groupExistingGroupInputWrap);
       groupExistingFormIndent.appendChild(groupExistingPositionInputWrap);
+      groupExistingFormIndentWrap.appendChild(groupExistingFormIndent);
       fieldset.appendChild(groupExistingRadioWrap);
-      fieldset.appendChild(groupExistingFormIndent);
+      fieldset.appendChild(groupExistingFormIndentWrap);
 
       groupNewRadioWrap.appendChild(groupNewRadio);
       groupNewLable.appendChild(groupNewLableLableIcon);
@@ -791,8 +801,9 @@ var link = (function() {
       groupNewRandomNameButtonWrap.appendChild(groupNewRandomNameButton);
       groupNewFormIndent.appendChild(groupNewInputWrap);
       groupNewFormIndent.appendChild(groupNewRandomNameButtonWrap);
+      groupNewFormIndentWrap.appendChild(groupNewFormIndent);
       fieldset.appendChild(groupNewRadioWrap);
-      fieldset.appendChild(groupNewFormIndent);
+      fieldset.appendChild(groupNewFormIndentWrap);
       fieldset.appendChild(helper.node("hr"));
 
       displayLetterRadioWrap.appendChild(displayLetterRadio);
@@ -802,7 +813,8 @@ var link = (function() {
       fieldset.appendChild(displayLetterRadioWrap);
       displayLetterInputWrap.appendChild(displayLetterInput);
       displayLetterFormIndent.appendChild(displayLetterInputWrap);
-      fieldset.appendChild(displayLetterFormIndent);
+      displayLetterFormIndentWrap.appendChild(displayLetterFormIndent);
+      fieldset.appendChild(displayLetterFormIndentWrap);
       displayIconRadiotWrap.appendChild(displayIconRadio);
       displayIconLable.appendChild(displayIconLableIcon);
       displayIconLable.appendChild(displayIconLableText);
@@ -814,8 +826,10 @@ var link = (function() {
       displayIconFormGroup.appendChild(displayIconFormGroupClear);
       displayIconInputWrap.appendChild(displayIconFormGroup);
       displayIconFormIndent.appendChild(displayIconInputWrap);
+      displayIconHelper.appendChild(displayIconHelperItem);
       displayIconFormIndent.appendChild(displayIconHelper);
-      fieldset.appendChild(displayIconFormIndent);
+      displayIconFormIndentWrap.appendChild(displayIconFormIndent);
+      fieldset.appendChild(displayIconFormIndentWrap);
       fieldset.appendChild(helper.node("hr"));
       nameInputWrap.appendChild(nameLabel);
       nameInputWrap.appendChild(nameInput);
@@ -823,9 +837,11 @@ var link = (function() {
       urlInputWrap.appendChild(urlLabel);
       urlInputWrap.appendChild(urlInput);
       fieldset.appendChild(urlInputWrap);
+      urlInputHelper.appendChild(urlInputHelperItem);
       fieldset.appendChild(urlInputHelper);
       fieldset.appendChild(helper.node("hr"));
-      fieldset.appendChild(accentLabel);
+      accentLabelWrap.appendChild(accentLabel);
+      fieldset.appendChild(accentLabelWrap);
       accentGlobalRadioWrap.appendChild(accentGlobalRadio);
       accentGlobalLabel.appendChild(accentGlobalLabelIcon);
       accentGlobalLabel.appendChild(accentGlobalLabelText);
@@ -840,8 +856,10 @@ var link = (function() {
       accentColorFormGroup.appendChild(accentColorHex);
       accentColorInputWrap.appendChild(accentColorFormGroup);
       accentColorFormIndent.appendChild(accentColorInputWrap);
+      accentColorInputHelper.appendChild(accentColorInputHelperItem);
       accentColorFormIndent.appendChild(accentColorInputHelper);
-      fieldset.appendChild(accentColorFormIndent);
+      accentColorFormIndentWrap.appendChild(accentColorFormIndent);
+      fieldset.appendChild(accentColorFormIndentWrap);
       form.appendChild(fieldset);
 
       var makeGroupOptions = function() {
@@ -1182,16 +1200,10 @@ var link = (function() {
       var group = helper.node("div|class:group");
       var groupBody = helper.node("div|class:group-body");
       var linkEmpty = helper.node("div|class:link-empty link-item");
-      var paraWrap = helper.node("div|class:p-wrap");
-      var para = helper.node("p:No Groups or Bookmarks|class:pb-0");
-      var formInline = helper.node("div|class:form-inline");
-      var buttonWrap = helper.node("div|class:button-wrap mb-0 mr-0");
-      var addButton = helper.node("button:Add a Bookmark|class:button mb-0,type:button,tabindex:1");
-      buttonWrap.appendChild(addButton);
-      formInline.appendChild(buttonWrap);
-      paraWrap.appendChild(para);
-      linkEmpty.appendChild(paraWrap);
-      linkEmpty.appendChild(formInline);
+      var para = helper.node("p:No Groups or Bookmarks|class:small muted");
+      var addButton = helper.node("button:Add a Bookmark|class:button button-small,type:button,tabindex:1");
+      linkEmpty.appendChild(para);
+      linkEmpty.appendChild(addButton);
       groupBody.appendChild(linkEmpty);
       group.appendChild(groupBody);
       addButton.addEventListener("click", function(event) {
@@ -1201,16 +1213,10 @@ var link = (function() {
     },
     item: function(groupIndex) {
       var linkEmpty = helper.node("div|class:link-empty link-item");
-      var paraWrap = helper.node("div|class:p-wrap");
-      var para = helper.node("p:Empty Group|class:pb-0");
-      var formInline = helper.node("div|class:form-inline");
-      var buttonWrap = helper.node("div|class:button-wrap mb-0 mr-0");
-      var addButton = helper.node("button:Add a Bookmark|class:button mb-0,type:button,tabindex:1");
-      buttonWrap.appendChild(addButton);
-      formInline.appendChild(buttonWrap);
-      paraWrap.appendChild(para);
-      linkEmpty.appendChild(paraWrap);
-      linkEmpty.appendChild(formInline);
+      var para = helper.node("p:Empty Group|class:small muted");
+      var addButton = helper.node("button:Add a Bookmark|class:button button-small,type:button,tabindex:1");
+      linkEmpty.appendChild(para);
+      linkEmpty.appendChild(addButton);
       addButton.addEventListener("click", function(event) {
         link.add.item.open();
         link.add.item.selectGroup(groupIndex);
@@ -1221,21 +1227,13 @@ var link = (function() {
       var group = helper.node("div|class:group");
       var groupBody = helper.node("div|class:group-body");
       var linkEmpty = helper.node("div|class:link-empty link-item");
-      var paraWrap1 = helper.node("div|class:p-wrap");
-      var paraWrap2 = helper.node("div|class:p-wrap");
       var para1 = helper.makeNode({
         tag: "p",
-        text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found",
-        attr: [{
-          key: "class",
-          value: "mb-0"
-        }]
+        text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found"
       });
-      var para2 = helper.node("p:\"Enter\" to Search " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name + ".|class:small muted mb-0");
-      paraWrap1.appendChild(para1);
-      paraWrap2.appendChild(para2);
-      linkEmpty.appendChild(paraWrap1);
-      linkEmpty.appendChild(paraWrap2);
+      var para2 = helper.node("p:\"Enter\" to Search " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name + ".|class:small muted");
+      linkEmpty.appendChild(para1);
+      linkEmpty.appendChild(para2);
       groupBody.appendChild(linkEmpty);
       group.appendChild(groupBody);
       return group;
diff --git a/src/js/theme.js b/src/js/theme.js
index ef177dba..2b788fad 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -1385,7 +1385,7 @@ var theme = (function() {
     allThemePreset.forEach(function(arrayItem, index) {
       var themePresetItem = helper.node("div|class:theme-preset-item");
       var themePresetTile = helper.node("div|class:theme-preset-tile");
-      var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1");
+      var themePresetButton = helper.node("button|class:theme-preset-button button,tabindex:-1");
       var themePresetPreview = helper.node("span|class:theme-preset-preview");
       var shadeSteps = 4;
       var rgb = arrayItem.color.rgb;
@@ -1462,12 +1462,12 @@ var theme = (function() {
         allThemeCuston.forEach(function(arrayItem, index) {
           var themeCustomItem = helper.node("div|class:theme-custom-item");
           var themeCustomTile = helper.node("div|class:theme-custom-tile");
-          var themeCustomButton = helper.node("button|class:theme-custom-button button mb-0,tabindex:-1");
+          var themeCustomButton = helper.node("button|class:theme-custom-button button,tabindex:-1");
           var themeCustomPreview = helper.node("span|class:theme-custom-preview");
           var themeCustomControl = helper.node("div|class:theme-custom-control");
-          var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small mb-0,tabindex:-2");
+          var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-2");
           var themeCustomEditIcon = helper.node("spa|class:button-icon icon-edit");
-          var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small mb-0,tabindex:-2");
+          var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-2");
           var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close");
           var shadeSteps = 4;
           var rgb = arrayItem.color.rgb;
@@ -1566,7 +1566,7 @@ var theme = (function() {
       };
       var form = helper.node("form|class:group-form");
       var fieldset = helper.node("fieldset");
-      var inputWrap = helper.node("div|class:input-wrap");
+      var inputWrap = helper.node("div|class:form-wrap");
       var label = helper.node("label:Name|for:theme-name");
       var input = helper.node("input|id:theme-name,class:theme-name mb-0,type:text,tabindex:1,placeholder:Example theme,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
       inputWrap.appendChild(label);
@@ -1600,6 +1600,7 @@ var theme = (function() {
         stagedThemeCustom.theme.timestamp = new Date().getTime();
         mod.custom.add();
         data.save();
+        custom.check();
         render.custom.clear();
         render.custom.all();
         shade.close();
@@ -1683,8 +1684,8 @@ var theme = (function() {
       };
       var successAction = function() {
         mod.custom.remove();
-        custom.check();
         data.save();
+        custom.check();
         render.custom.clear();
         render.custom.all();
         shade.close();
@@ -1732,6 +1733,16 @@ var theme = (function() {
           arrayItem.tabIndex = -2;
         });
       };
+    },
+    formWrap: {
+      open: function() {
+        var themeCustom = helper.e(".theme-custom");
+        helper.removeClass(themeCustom, "form-wrap-hide-space");
+      },
+      close: function() {
+        var themeCustom = helper.e(".theme-custom");
+        helper.addClass(themeCustom, "form-wrap-hide-space");
+      }
     }
   };
 
@@ -1776,8 +1787,11 @@ var theme = (function() {
       render.custom.tabIndex();
     },
     check: function() {
-      if (state.get.current().theme.custom.all <= 0) {
+      if (state.get.current().theme.custom.all.length > 0) {
+        render.custom.formWrap.open();
+      } else {
         mod.custom.close();
+        render.custom.formWrap.close();
       };
     }
   };
@@ -1799,6 +1813,7 @@ var theme = (function() {
     render.shadow();
     render.preset();
     render.custom.all();
+    custom.check();
   };
 
   // exposed methods
diff --git a/src/style-guide.html b/src/style-guide.html
index 491a330f..2a65ff85 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -43,87 +43,93 @@
 <body>
 
   <main class="layout my-5">
-    <div class="form-group">
-      <button class="button mb-0 style-guide-control disable-on" tabindex="1">Disable</button>
-      <button class="button mb-0 style-guide-control disable-off" tabindex="1">Enable</button>
-      <button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button>
-      <button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</button>
+    <div class="form-wrap">
+      <div class="form-group">
+        <button class="button style-guide-control disable-on" tabindex="1">Disable</button>
+        <button class="button style-guide-control disable-off" tabindex="1">Enable</button>
+        <button class="button style-guide-control theme-dark" tabindex="1">Dark</button>
+        <button class="button style-guide-control theme-light" tabindex="1">Light</button>
+      </div>
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-control-theme-color" class="style-guide-control">Theme Colour</label>
-      <input id="style-guide-control-theme-color" class="style-guide-control theme-color" class="form-group-item-half mb-0" type="color" value="#818aa0" tabindex="1">
+      <input id="style-guide-control-theme-color" class="style-guide-control theme-color" type="color" value="#818aa0" tabindex="1">
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-control-theme-accent" class="style-guide-control">Accent Colour</label>
-      <input id="style-guide-control-theme-accent" class="style-guide-control theme-accent" class="form-group-item-half mb-0" type="color" value="#fa8200" tabindex="1">
+      <input id="style-guide-control-theme-accent" class="style-guide-control theme-accent" type="color" value="#fa8200" tabindex="1">
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="radius" class="style-guide-control">Radius</label>
       <input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
     </div>
     <hr>
-    <div class="form-inline">
-      <div class="button-wrap">
-        <button class="button button-small mb-0" tabindex="1">Button Small</button>
-      </div>
-      <div class="button-wrap">
-        <button class="button mb-0" tabindex="1">Button Medium</button>
-      </div>
-      <div class="button-wrap">
-        <button class="button button-large mb-0" tabindex="1">Button Large</button>
+    <div class="form-wrap">
+      <div class="form-inline">
+        <button class="button button-small" tabindex="1">Button Small</button>
+        <button class="button" tabindex="1">Button Medium</button>
+        <button class="button button-large" tabindex="1">Button Large</button>
       </div>
     </div>
     <hr>
-    <div class="input-wrap input-button">
-      <input id="style-guide-input-button-1" type="checkbox" tabindex="1">
-      <label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
-    </div>
-    <div class="form-group nested-button mb-0">
-      <div class="input-wrap input-button">
-        <input id="style-guide-radio-1" type="radio" name="style-guide-radio-1" tabindex="1">
-        <label for="style-guide-radio-1"><span class="label-icon"></span> Radio Button 1</label>
-      </div>
-      <div class="input-wrap input-button">
-        <input id="style-guide-radio-2" type="radio" name="style-guide-radio-1" tabindex="1">
-        <label for="style-guide-radio-2"><span class="label-icon"></span> Radio Button 2</label>
-      </div>
-      <div class="input-wrap input-button">
-        <input id="style-guide-radio-3" type="radio" name="style-guide-radio-1" tabindex="1">
-        <label for="style-guide-radio-3"><span class="label-icon"></span> Radio Button 3</label>
+    <div class="form-wrap">
+      <div class="form-input-button">
+        <input id="style-guide-input-button-1" type="checkbox" tabindex="1">
+        <label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
       </div>
     </div>
-    <div class="input-wrap input-button input-hide">
-      <input id="style-guide-input-button-2" type="checkbox" tabindex="1">
-      <label for="style-guide-input-button-2" class="mb-0"><span class="label-icon"></span>Hidden Checkbox Button</label>
-    </div>
-    <div class="form-group nested-button input-hide mb-0">
-      <div class="input-wrap input-button">
-        <input id="style-guide-radio-4" type="radio" name="style-guide-radio-2" tabindex="1">
-        <label for="style-guide-radio-4"><span class="label-icon"></span> Hidden Radio Button 1</label>
-      </div>
-      <div class="input-wrap input-button">
-        <input id="style-guide-radio-5" type="radio" name="style-guide-radio-2" tabindex="1">
-        <label for="style-guide-radio-5"><span class="label-icon"></span> Hidden Radio Button 2</label>
-      </div>
-      <div class="input-wrap input-button">
-        <input id="style-guide-radio-6" type="radio" name="style-guide-radio-2" tabindex="1">
-        <label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
+    <div class="form-wrap">
+      <div class="form-group form-group-nested-button">
+        <div class="form-input-button">
+          <input id="style-guide-radio-1" type="radio" name="style-guide-radio-1" tabindex="1">
+          <label for="style-guide-radio-1"><span class="label-icon"></span> Radio Button 1</label>
+        </div>
+        <div class="form-input-button">
+          <input id="style-guide-radio-2" type="radio" name="style-guide-radio-1" tabindex="1">
+          <label for="style-guide-radio-2"><span class="label-icon"></span> Radio Button 2</label>
+        </div>
+        <div class="form-input-button">
+          <input id="style-guide-radio-3" type="radio" name="style-guide-radio-1" tabindex="1">
+          <label for="style-guide-radio-3"><span class="label-icon"></span> Radio Button 3</label>
+        </div>
       </div>
     </div>
-    <div class="form-inline">
-      <div class="input-wrap input-button input-hide">
-        <input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
-        <label for="style-guide-input-color-1">Hidden Input Colour Button</label>
+    <div class="form-wrap">
+      <div class="form-input-button form-input-hide">
+        <input id="style-guide-input-button-2" type="checkbox" tabindex="1">
+        <label for="style-guide-input-button-2" class="mb-0"><span class="label-icon"></span>Hidden Checkbox Button</label>
       </div>
-      <div class="input-wrap input-button input-color-dot">
-        <input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
-        <label for="style-guide-input-color-2">Input Colour Button</label>
+    </div>
+    <div class="form-wrap">
+      <div class="form-group form-group-nested-button">
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-radio-4" type="radio" name="style-guide-radio-2" tabindex="1">
+          <label for="style-guide-radio-4"><span class="label-icon"></span> Hidden Radio Button 1</label>
+        </div>
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-radio-5" type="radio" name="style-guide-radio-2" tabindex="1">
+          <label for="style-guide-radio-5"><span class="label-icon"></span> Hidden Radio Button 2</label>
+        </div>
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-radio-6" type="radio" name="style-guide-radio-2" tabindex="1">
+          <label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
+        </div>
       </div>
-      <div class="input-wrap input-button input-color-dot input-color-dot-accent">
-        <input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
-        <label for="style-guide-input-color-3">Input Colour Accent Button</label>
-      </div>
-      <div class="button-wrap">
+    </div>
+    <div class="form-wrap">
+      <div class="form-inline">
+        <div class="form-input-button form-input-hide">
+          <input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
+          <label for="style-guide-input-color-1">Hidden Input Colour Button</label>
+        </div>
+        <div class="form-input-button input-color-dot">
+          <input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
+          <label for="style-guide-input-color-2">Input Colour Button</label>
+        </div>
+        <div class="form-input-button input-color-dot input-color-dot-accent">
+          <input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
+          <label for="style-guide-input-color-3">Input Colour Accent Button</label>
+        </div>
         <div class="form-dropdown form-dropdown-inline">
           <button class="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
             <span class="button-text">Button Dropdown</span>
@@ -140,108 +146,112 @@
       </div>
     </div>
     <hr>
-    <div class="form-inline">
-      <div class="input-wrap">
-        <input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
-        <label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
-      </div>
-      <div class="input-wrap">
-        <input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
-        <label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
-      </div>
-      <div class="input-wrap">
-        <input id="style-guide-checkbox-3" type="checkbox" tabindex="1">
-        <label for="style-guide-checkbox-3"><span class="label-icon"></span> Checkbox 3</label>
+    <div class="form-wrap">
+      <div class="form-inline form-inline-spacer">
+        <div class="form-wrap">
+          <input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
+          <label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
+        </div>
+        <div class="form-wrap">
+          <input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
+        </div>
+        <div class="form-wrap">
+          <input id="style-guide-checkbox-3" type="checkbox" tabindex="1">
+          <label for="style-guide-checkbox-3"><span class="label-icon"></span> Checkbox 3</label>
+        </div>
       </div>
     </div>
-    <div class="form-inline">
-      <div class="input-wrap">
-        <input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
-        <label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
-      </div>
-      <div class="input-wrap">
-        <input id="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
-        <label for="style-guide-radio-8"><span class="label-icon"></span> Radio 2</label>
-      </div>
-      <div class="input-wrap">
-        <input id="style-guide-radio-9" type="radio" name="style-guide-radio-3" tabindex="1">
-        <label for="style-guide-radio-9"><span class="label-icon"></span> Radio 3</label>
+    <div class="form-wrap">
+      <div class="form-inline form-inline-spacer">
+        <div class="form-wrap">
+          <input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
+          <label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
+        </div>
+        <div class="form-wrap">
+          <input id="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
+          <label for="style-guide-radio-8"><span class="label-icon"></span> Radio 2</label>
+        </div>
+        <div class="form-wrap">
+          <input id="style-guide-radio-9" type="radio" name="style-guide-radio-3" tabindex="1">
+          <label for="style-guide-radio-9"><span class="label-icon"></span> Radio 3</label>
+        </div>
       </div>
     </div>
-    <div class="form-grid-wrap">
+    <div class="form-wrap">
       <div class="form-grid form-grid-3x3">
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-topleft" class="style-guide-form-grid-topleft" type="radio" name="style-guide-form-grid-3x3" value="topleft" tabindex="1" checked>
           <label for="style-guide-form-grid-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-topcenter" class="style-guide-form-grid-topcenter" type="radio" name="style-guide-form-grid-3x3" value="topcenter" tabindex="1">
           <label for="style-guide-form-grid-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-topright" class="style-guide-form-grid-topright" type="radio" name="style-guide-form-grid-3x3" value="topright" tabindex="1">
           <label for="style-guide-form-grid-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-centerleft" class="style-guide-form-grid-centerleft" type="radio" name="style-guide-form-grid-3x3" value="centerleft" tabindex="1">
           <label for="style-guide-form-grid-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-centercenter" class="style-guide-form-grid-centercenter" type="radio" name="style-guide-form-grid-3x3" value="centercenter" tabindex="1">
           <label for="style-guide-form-grid-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-centerright" class="style-guide-form-grid-centerright" type="radio" name="style-guide-form-grid-3x3" value="centerright" tabindex="1">
           <label for="style-guide-form-grid-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-bottomleft" class="style-guide-form-grid-bottomleft" type="radio" name="style-guide-form-grid-3x3" value="bottomleft" tabindex="1">
           <label for="style-guide-form-grid-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-bottomcenter" class="style-guide-form-grid-bottomcenter" type="radio" name="style-guide-form-grid-3x3" value="bottomcenter" tabindex="1">
           <label for="style-guide-form-grid-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-bottomright" class="style-guide-form-grid-bottomright" type="radio" name="style-guide-form-grid-3x3" value="bottomright" tabindex="1">
           <label for="style-guide-form-grid-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
         </div>
       </div>
     </div>
-    <div class="form-grid-wrap">
+    <div class="form-wrap">
       <div class="form-grid form-grid-3x1">
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-left" class="style-guide-form-grid-left" type="radio" name="style-guide-form-grid-3x1" value="centerleft" tabindex="1" checked>
           <label for="style-guide-form-grid-left"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-center" class="style-guide-form-grid-center" type="radio" name="style-guide-form-grid-3x1" value="centercenter" tabindex="1">
           <label for="style-guide-form-grid-center"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
         </div>
-        <div class="input-wrap">
+        <div class="form-wrap">
           <input id="style-guide-form-grid-right" class="style-guide-form-grid-right" type="radio" name="style-guide-form-grid-3x1" value="centerright" tabindex="1">
           <label for="style-guide-form-grid-right"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
         </div>
       </div>
     </div>
     <hr>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-input-text">Input Text</label>
       <input id="style-guide-input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Placeholder" tabindex="1">
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-textarea">Textarea</label>
       <textarea id="style-guide-textarea" class="textarea mb-0" spellcheck="false" placeholder="Placeholder" tabindex="1"></textarea>
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-input-range">Input Range</label>
       <input id="style-guide-input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-input-colour">Input Colour</label>
       <input id="style-guide-input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-select-1">Select</label>
       <select id="style-guide-select-1" class="mb-0" tabindex="1">
         <option>Option 1</option>
@@ -249,7 +259,7 @@
         <option>Option 3</option>
       </select>
     </div>
-    <div class="input-wrap">
+    <div class="form-wrap">
       <label for="style-guide-form-group-1">Form Group</label>
       <div class="form-group form-group-block mb-0">
         <input id="style-guide-form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
@@ -263,7 +273,7 @@
         <div class="form-group-text" tabindex="1">Form Group Text</div>
       </div>
     </div>
-    <div class="feedback-wrap">
+    <div class="form-wrap">
       <div class="form-feedback">
         <p class="muted">Form feedback.</p>
         <p class="muted small">With some small text.</p>
@@ -272,6 +282,7 @@
   </main>
 
   <script src="js/helper.js"></script>
+
   <script type="text/javascript">
     var formElements = ["button", "input", "textarea", "select"];
     var textElements = ["label", ".form-group-text", ".form-grid", ".form-feedback"];