From e57d0f833529d054ec417dc47a16d29dcaf4a12e Mon Sep 17 00:00:00 2001
From: Kombie <crudetoaster@gmail.com>
Date: Fri, 26 Apr 2019 13:48:37 +0100
Subject: [PATCH] [feature] display date in words or numbers and control month
 date order

---
 css/button.css       |  31 --
 css/clock.css        |   9 +-
 css/date.css         |   7 +-
 css/form.css         | 126 +++++-
 css/header.css       |   2 +
 css/menu.css         |  94 ++++-
 css/transitional.css |  28 ++
 css/typography.css   |   2 +-
 index.html           | 892 +++++++++++++++++++++++++++----------------
 js/clock.js          |  81 ++--
 js/control.js        | 649 ++++++++++++++++++++++++++++---
 js/date.js           | 164 ++++++--
 js/greeting.js       |  18 +-
 js/helper.js         | 132 ++++++-
 js/init.js           |   7 +-
 js/state.js          |  66 +++-
 js/transitional.js   |  84 ++++
 js/update.js         |  63 +++
 js/version.js        |   2 +-
 19 files changed, 1906 insertions(+), 551 deletions(-)
 create mode 100644 css/transitional.css
 create mode 100644 js/transitional.js

diff --git a/css/button.css b/css/button.css
index 0004ec82..5080bb24 100755
--- a/css/button.css
+++ b/css/button.css
@@ -96,37 +96,6 @@ button [class*=" icon-"],
   width: 100%;
 }
 
-.button-group {
-  margin: 0 0 1em 0;
-  display: inline-flex;
-  justify-content: center;
-  align-items: stretch;
-}
-
-.button-group button,
-.button-group .button {
-  margin: 0;
-  border-radius: 0;
-}
-
-.button-group>button:first-child,
-.button-group>.button:first-child {
-  border-radius: var(--radius) 0 0 var(--radius);
-}
-
-.button-group>button:last-child,
-.button-group>.button:last-child {
-  border-radius: 0 var(--radius) var(--radius) 0;
-}
-
-.button-group.nested-button *:first-child .button {
-  border-radius: var(--radius) 0 0 var(--radius);
-}
-
-.button-group.nested-button *:last-child .button {
-  border-radius: 0 var(--radius) var(--radius) 0;
-}
-
 button [class^="button-"],
 button [class*=" button-"],
 .button [class^="button-"],
diff --git a/css/clock.css b/css/clock.css
index ca47b522..2bdb85e0 100755
--- a/css/clock.css
+++ b/css/clock.css
@@ -9,8 +9,8 @@
   min-height: 2.5em;
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  flex-wrap: nowrap;
+  justify-content: flex-start;
+  flex-wrap: wrap;
 }
 
 .clock-separator,
@@ -22,11 +22,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  white-space: nowrap;
 }
 
 .clock-separator {
   justify-content: center;
-  min-width: 0.5em;
+  /* min-width: 0.5em; */
   color: rgb(var(--accent));
 }
 
@@ -55,5 +56,5 @@
 .clock-minutes,
 .clock-seconds,
 .clock-meridiem {
-  color: rgb(var(--gray-19));
+  color: rgb(var(--gray-16));
 }
diff --git a/css/date.css b/css/date.css
index 3807cf03..608231cc 100755
--- a/css/date.css
+++ b/css/date.css
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 }
 
 .date-separator,
@@ -22,11 +22,12 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  white-space: nowrap;
 }
 
 .date-separator {
   justify-content: center;
-  min-width: 0.5em;
+  /* min-width: 0.5em; */
   color: rgb(var(--accent));
 }
 
@@ -54,5 +55,5 @@
 .date-date,
 .date-month,
 .date-year {
-  color: rgb(var(--gray-19));
+  color: rgb(var(--gray-16));
 }
diff --git a/css/form.css b/css/form.css
index 49b98f04..2c8c898e 100755
--- a/css/form.css
+++ b/css/form.css
@@ -22,6 +22,16 @@ input[type="text"] {
   -moz-appearance: textfield;
 }
 
+input[type="number"] {
+  text-align: center;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 input[type="email"]:hover,
 input[type="number"]:hover,
 input[type="password"]:hover,
@@ -84,7 +94,8 @@ input[type="number"][disabled]~.input-helper,
 input[type="password"][disabled]~.input-helper,
 input[type="search"][disabled]~.input-helper,
 input[type="tel"][disabled]~.input-helper,
-input[type="text"][disabled]~.input-helper {
+input[type="text"][disabled]~.input-helper,
+input[type="range"][disabled]~.input-helper {
   color: rgb(var(--form-input-text-disabled-helper-text));
 }
 
@@ -197,22 +208,13 @@ input[type="color"]+.input-label-button:before {
   position: relative;
 }
 
-.form-indent-1,
-.form-indent-1,
-.form-indent-1 {
+.form-indent {
   margin-left: 2.25em;
 }
 
-.form-indent-2,
-.form-indent-2,
-.form-indent-2 {
-  margin-left: 4.5em;
-}
-
-.form-indent-3,
-.form-indent-3,
-.form-indent-3 {
-  margin-left: 6.75em;
+.form-inline {
+  display: inline-block;
+  margin-right: 1.5em;
 }
 
 input[type="checkbox"],
@@ -460,7 +462,7 @@ input[type="range"]::-webkit-slider-thumb {
   width: 1em;
   cursor: pointer;
   box-sizing: border-box;
-  z-index: 2;
+  /* z-index: 2; */
   transform: scale(1);
   transition: all var(--animation-speed-fast) ease-in-out;
   -webkit-appearance: none;
@@ -524,7 +526,7 @@ input[type="range"]::-moz-range-thumb {
   width: 1em;
   cursor: pointer;
   box-sizing: border-box;
-  z-index: 2;
+  /* z-index: 2; */
   transform: scale(1);
   transition: all var(--animation-speed-fast) ease-in-out;
   -webkit-appearance: none;
@@ -574,3 +576,95 @@ input[type="range"][disabled]:focus::-moz-range-thumb {
 input[type="range"][disabled]::-moz-range-progress {
   background-color: rgb(var(--gray-08));
 }
+
+.form-group {
+  margin: 0 0 1em 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: stretch;
+  width: 100%;
+}
+
+.form-group button,
+.form-group .button,
+.form-group>input[type="email"],
+.form-group>input[type="number"],
+.form-group>input[type="password"],
+.form-group>input[type="search"],
+.form-group>input[type="tel"],
+.form-group>input[type="text"] {
+  margin: 0;
+  border-radius: 0;
+}
+
+.form-group>input[type="email"],
+.form-group>input[type="number"],
+.form-group>input[type="password"],
+.form-group>input[type="search"],
+.form-group>input[type="tel"],
+.form-group>input[type="text"] {
+  padding: 0 0.5em;
+}
+
+.form-group>input[type="email"],
+.form-group>input[type="number"],
+.form-group>input[type="password"],
+.form-group>input[type="search"],
+.form-group>input[type="tel"],
+.form-group>input[type="text"] {
+  z-index: 1;
+}
+
+.form-group>input[type="email"]:hover,
+.form-group>input[type="number"]:hover,
+.form-group>input[type="password"]:hover,
+.form-group>input[type="search"]:hover,
+.form-group>input[type="tel"]:hover,
+.form-group>input[type="text"]:hover {
+  z-index: 2;
+}
+
+.form-group>input[type="email"]:active,
+.form-group>input[type="email"]:focus,
+.form-group>input[type="number"]:active,
+.form-group>input[type="number"]:focus,
+.form-group>input[type="password"]:active,
+.form-group>input[type="password"]:focus,
+.form-group>input[type="search"]:active,
+.form-group>input[type="search"]:focus,
+.form-group>input[type="tel"]:active,
+.form-group>input[type="tel"]:focus,
+.form-group>input[type="text"]:active,
+.form-group>input[type="text"]:focus {
+  z-index: 3;
+}
+
+.form-group>button:first-child,
+.form-group>.button:first-child,
+.form-group>input[type="email"]:first-child,
+.form-group>input[type="number"]:first-child,
+.form-group>input[type="password"]:first-child,
+.form-group>input[type="search"]:first-child,
+.form-group>input[type="tel"]:first-child,
+.form-group>input[type="text"]:first-child {
+  border-radius: var(--radius) 0 0 var(--radius);
+}
+
+.form-group>button:last-child,
+.form-group>.button:last-child,
+.form-group>input[type="email"]:last-child,
+.form-group>input[type="number"]:last-child,
+.form-group>input[type="password"]:last-child,
+.form-group>input[type="search"]:last-child,
+.form-group>input[type="tel"]:last-child,
+.form-group>input[type="text"]:last-child {
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.form-group.nested-button *:first-child .button {
+  border-radius: var(--radius) 0 0 var(--radius);
+}
+
+.form-group.nested-button *:last-child .button {
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
diff --git a/css/header.css b/css/header.css
index fda0caa0..a951cf60 100755
--- a/css/header.css
+++ b/css/header.css
@@ -124,6 +124,7 @@
 .header-edit-add,
 .header-accent,
 .header-greeting,
+.header-transitional,
 .header-menu {
   display: none;
 }
@@ -134,6 +135,7 @@
 .is-header-edit-add .header-edit-add,
 .is-header-accent .header-accent,
 .is-header-greeting .header-greeting,
+.is-header-transitional .header-transitional,
 .is-menu .header-menu {
   display: flex;
 }
diff --git a/css/menu.css b/css/menu.css
index 147a4b5c..57412346 100755
--- a/css/menu.css
+++ b/css/menu.css
@@ -51,24 +51,22 @@
 }
 
 .menu-content {
-  padding: 2em 2em 20vh 2em;
+  padding-bottom: 40vh;
 }
 
 .menu-content-area {
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: 2em;
 }
 
 .menu-item {
-  padding-bottom: 2em;
-  border-bottom: var(--line-width) solid rgb(var(--gray-04));
+  padding: 2em;
+  position: relative;
+  z-index: 1;
 }
 
-.menu-item:last-child,
-.menu-item:nth-last-child(2):nth-child(odd) {
-  padding-bottom: 0;
-  border-bottom: 0;
+.menu-item:not(:last-child) {
+  border-bottom: var(--line-width) solid rgb(var(--gray-02));
 }
 
 .menu-close {
@@ -86,7 +84,7 @@
   padding-bottom: 1em;
   border-radius: 0;
   flex-grow: 1;
-  flex-basis: 50%;
+  flex-basis: 33%;
 }
 
 .menu-nav-button:first-child {
@@ -101,8 +99,14 @@
 }
 
 @media (min-width: 550px) {
+  .menu-nav-button {
+    flex-basis: 0;
+  }
+}
+
+@media (min-width: 700px) {
   .menu {
-    width: 80vw;
+    width: 90vw;
     height: 100%;
     overflow-y: inherit;
     max-height: inherit;
@@ -125,21 +129,83 @@
 
   .menu-content-area {
     grid-template-columns: repeat(2, 1fr);
+    grid-gap: 4em;
+    padding: 2em;
   }
 
-  .menu-nav-button {
-    flex-basis: 0;
+  .menu-item:not(:last-child) {
+    border-bottom: 0;
+  }
+
+  .menu-item:nth-child(odd):after {
+    content: "";
+    width: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: calc(-2em - calc(var(--line-width) / 2));
+    border-radius: 1em;
+    border-right: var(--line-width) solid rgb(var(--gray-03));
+  }
+
+  .menu-item:not(:nth-last-child(2)):not(:last-child):before {
+    content: "";
+    width: 100%;
+    height: 0;
+    position: absolute;
+    left: 0;
+    bottom: calc(-2em - calc(var(--line-width) / 2));
+    border-radius: 1em;
+    border-bottom: var(--line-width) solid rgb(var(--gray-03));
+  }
+
+  .menu-item {
+    padding: 1em 0;
   }
 }
 
 @media (min-width: 900px) {
   .menu {
-    width: 70vw;
+    width: 80vw;
   }
 }
 
 @media (min-width: 1600px) {
   .menu {
-    width: 50vw;
+    width: 70vw;
+  }
+
+  .menu-content-area {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .menu-item:nth-child(odd):after {
+    content: none;
+  }
+
+  .menu-item:not(:nth-child(3n+3)):after {
+    content: "";
+    width: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: calc(-2em - calc(var(--line-width) / 2));
+    border-radius: 1em;
+    border-right: var(--line-width) solid rgb(var(--gray-03));
+  }
+
+  .menu-item:not(:nth-last-child(2)):not(:last-child):before {
+    content: none;
+  }
+
+  .menu-item:not(:nth-last-child(1)):not(:nth-last-child(2)):not(:nth-last-child(3)):before {
+    content: "";
+    width: 100%;
+    height: 0;
+    position: absolute;
+    left: 0;
+    bottom: calc(-2em - calc(var(--line-width) / 2));
+    border-radius: 1em;
+    border-bottom: var(--line-width) solid rgb(var(--gray-03));
   }
 }
diff --git a/css/transitional.css b/css/transitional.css
new file mode 100644
index 00000000..f47e1b13
--- /dev/null
+++ b/css/transitional.css
@@ -0,0 +1,28 @@
+.transitional {
+  margin: 0;
+  padding: 0;
+  border-radius: var(--radius);
+  font-size: 1em;
+  font-family: var(--font-fjalla);
+  color: rgb(var(--gray-14));
+  width: 100%;
+  min-height: 2.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+.transitional-item {
+  font-size: 1.5em;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.transitional-item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/css/typography.css b/css/typography.css
index 6e8d55bc..0ba6ab0b 100755
--- a/css/typography.css
+++ b/css/typography.css
@@ -52,7 +52,7 @@ p {
 
 hr {
   border: 0;
-  border-top: 1px solid rgb(var(--gray-04));
+  border-top: 1px solid rgb(var(--gray-02));
   border-radius: var(--radius);
   margin: 1em 0;
   clear: both;
diff --git a/index.html b/index.html
index ffa8f79b..4451aef1 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
   <link rel="stylesheet" href="css/date.css">
   <link rel="stylesheet" href="css/clock.css">
   <link rel="stylesheet" href="css/greeting.css">
+  <link rel="stylesheet" href="css/transitional.css">
   <link rel="stylesheet" href="css/search.css">
   <link rel="stylesheet" href="css/background.css">
   <link rel="stylesheet" href="css/link.css">
@@ -46,6 +47,9 @@
         <div class="header-item header-greeting">
           <p class="greeting"></p>
         </div>
+        <div class="header-item header-transitional">
+          <p class="transitional"></p>
+        </div>
         <div class="header-item header-clock">
           <p class="clock"></p>
         </div>
@@ -62,7 +66,7 @@
           </button>
         </div>
         <div class="header-item header-edit-add">
-          <div class="button-group nested-button mb-0">
+          <div class="form-group nested-button mb-0">
             <div class="checkbox-wrap">
               <input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
               <label for="control-edit" class="button input-label-button">
@@ -117,401 +121,650 @@
 
         <div class="menu-content-area menu-content-area-header">
           <div class="menu-item">
-            <h1 class="menu-header"></h1>
-            <div class="checkbox-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 class="menu-item-header">
+              <h1 class="menu-item-header-text">Greeting</h1>
             </div>
-            <div class="radio-wrap form-indent-1">
-              <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 class="menu-item-form">
+              <div class="checkbox-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="radio-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="radio-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="radio-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" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
+              </div>
             </div>
-            <div class="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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>
-            <div class="input-wrap form-indent-1">
-              <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>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Clock</h1>
-            <div class="checkbox-wrap">
-              <input id="control-header-clock-show-hours" class="control-header-clock-show-hours" type="checkbox" tabindex="1">
-              <label for="control-header-clock-show-hours"><span class="label-icon"></span>Hours</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Transitional words</h1>
             </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-clock-show-minutes" class="control-header-clock-show-minutes" type="checkbox" tabindex="1">
-              <label for="control-header-clock-show-minutes"><span class="label-icon"></span>Minutes</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-clock-show-seconds" class="control-header-clock-show-seconds" type="checkbox" tabindex="1">
-              <label for="control-header-clock-show-seconds"><span class="label-icon"></span>Seconds</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-clock-show-separator" class="control-header-clock-show-separator" type="checkbox" tabindex="1">
-              <label for="control-header-clock-show-separator"><span class="label-icon"></span>Separators</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-clock-24" class="control-header-clock-24" type="checkbox" tabindex="1">
-              <label for="control-header-clock-24"><span class="label-icon"></span>24 Hours</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-clock-show-meridiem" class="control-header-clock-show-meridiem" type="checkbox" tabindex="1">
-              <label for="control-header-clock-show-meridiem"><span class="label-icon"></span>AM/PM</label>
+            <div class="menu-item-form">
+              <div class="checkbox-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>
+                <p class="input-helper small muted">Available when Date or Time is shown.</p>
+              </div>
+              <div class="form-indent">
+                <div class="radio-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="radio-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>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Date</h1>
-            <div class="checkbox-wrap">
-              <input id="control-header-date-show-day" class="control-header-date-show-day" type="checkbox" tabindex="1">
-              <label for="control-header-date-show-day"><span class="label-icon"></span>Day</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Clock</h1>
             </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-date-show-date" class="control-header-date-show-date" type="checkbox" tabindex="1">
-              <label for="control-header-date-show-date"><span class="label-icon"></span>Date</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-date-show-month" class="control-header-date-show-month" type="checkbox" tabindex="1">
-              <label for="control-header-date-show-month"><span class="label-icon"></span>Month</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-date-show-year" class="control-header-date-show-year" type="checkbox" tabindex="1">
-              <label for="control-header-date-show-year"><span class="label-icon"></span>Year</label>
-            </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-date-show-separator" class="control-header-date-show-separator" type="checkbox" tabindex="1">
-              <label for="control-header-date-show-separator"><span class="label-icon"></span>Separators</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" name="control-header-date-character-length" value="short" tabindex="1">
-              <label for="control-header-date-character-length-short"><span class="label-icon"></span>Short text</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-header-date-character-length-long" class="control-header-date-character-length-long" type="radio" name="control-header-date-character-length" value="long" tabindex="1">
-              <label for="control-header-date-character-length-long"><span class="label-icon"></span>Long text</label>
+            <div class="menu-item-form">
+              <div class="checkbox-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="radio-wrap">
+                  <input id="control-header-clock-hours-number" class="control-header-clock-hours-number" type="radio" name="control-header-clock-hours" value="number" tabindex="1">
+                  <label for="control-header-clock-hours-number"><span class="label-icon"></span>As number</label>
+                </div>
+                <div class="radio-wrap">
+                  <input id="control-header-clock-hours-word" class="control-header-clock-hours-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
+                  <label for="control-header-clock-hours-word"><span class="label-icon"></span>As word</label>
+                </div>
+                <hr>
+              </div>
+              <div class="checkbox-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="radio-wrap">
+                  <input id="control-header-clock-minutes-number" class="control-header-clock-minutes-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="1">
+                  <label for="control-header-clock-minutes-number"><span class="label-icon"></span>As number</label>
+                </div>
+                <div class="radio-wrap">
+                  <input id="control-header-clock-minutes-word" class="control-header-clock-minutes-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
+                  <label for="control-header-clock-minutes-word"><span class="label-icon"></span>As word</label>
+                </div>
+                <hr>
+              </div>
+              <div class="checkbox-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="radio-wrap">
+                  <input id="control-header-clock-seconds-number" class="control-header-clock-seconds-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="1">
+                  <label for="control-header-clock-seconds-number"><span class="label-icon"></span>As number</label>
+                </div>
+                <div class="radio-wrap">
+                  <input id="control-header-clock-seconds-word" class="control-header-clock-seconds-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="1">
+                  <label for="control-header-clock-seconds-word"><span class="label-icon"></span>As word</label>
+                </div>
+              </div>
+              <hr>
+              <div class="checkbox-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="checkbox-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="checkbox-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>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Search</h1>
-            <div class="checkbox-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 class="menu-item-header">
+              <h1 class="menu-item-header-text">Date</h1>
             </div>
-            <label class="control-header-search-width-label form-indent-1">Search box size</label>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
-              <label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
-              <p class="input-helper small muted">Search box will grow to best fit available space.</p>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
-              <label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
-            </div>
-            <div class="input-wrap form-indent-2">
-              <label for="control-header-search-width-custom">Percentage of header space</label>
-              <input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1">
-              <p class="input-helper small muted">Header space can be changed by the Layout Content Container Width. Minimum width is 10%.</p>
-            </div>
-            <div class="checkbox-wrap form-indent-1">
-              <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>
-              <p class="input-helper small muted">May not work in Chrome.</p>
-            </div>
-            <label class="control-header-search-engine-label form-indent-1">Engine</label>
-            <div class="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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>Duck Duck Go</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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="input-wrap form-indent-2">
-              <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="input-wrap form-indent-2">
-              <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">
-              <p class="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
-              <p class="input-helper small muted">nightTab would add the search term entered into the Search input at the end of the above URL</p>
-            </div>
-            <label class="control-header-search-text-align-label form-indent-1">Text align</label>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
-              <label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
-              <label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
-              <label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
+            <div class="menu-item-form">
+              <div class="checkbox-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="radio-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-indent">
+                  <label class="control-header-date-day-week-start-label">Start of the week</label>
+                  <div class="radio-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="radio-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>
+                    <p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
+                  </div>
+                </div>
+                <div class="radio-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="radio-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="radio-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>
+                <hr>
+              </div>
+              <div class="checkbox-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="radio-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="radio-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="checkbox-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>
+                  <p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
+                </div>
+                <hr>
+              </div>
+              <div class="checkbox-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="radio-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-indent">
+                  <div class="checkbox-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>
+                    <p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
+                  </div>
+                </div>
+                <div class="radio-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="radio-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="radio-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>
+                <hr>
+              </div>
+              <div class="checkbox-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="radio-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="radio-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>
+              <hr>
+              <div class="checkbox-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="radio-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="radio-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>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Buttons</h1>
-            <div class="checkbox-wrap">
-              <input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
-              <label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Search</h1>
             </div>
-            <div class="checkbox-wrap">
-              <input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
-              <label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
+            <div class="menu-item-form">
+              <div class="checkbox-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-width-style-label">Search box size</label>
+                <div class="radio-wrap">
+                  <input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
+                  <label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
+                  <p class="input-helper small muted">Search box will grow to best fit available space.</p>
+                </div>
+                <div class="radio-wrap">
+                  <input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
+                  <label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
+                </div>
+                <div class="form-indent">
+                  <div class="input-wrap">
+                    <label for="control-header-search-width-custom">Percentage of header space</label>
+                    <input id="control-header-search-width-custom" class="control-header-search-width-custom" type="range" min="10" max="100" value="0" tabindex="1">
+                    <p class="input-helper small muted">Header space can be changed by the Layout Content Container Width.</p>
+                  </div>
+                </div>
+                <hr>
+                <div class="checkbox-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>
+                  <p class="input-helper small muted">May not work in Chrome.</p>
+                </div>
+                <hr>
+                <label class="control-header-search-engine-label">Engine</label>
+                <div class="radio-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="radio-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>Duck Duck Go</label>
+                </div>
+                <div class="radio-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="radio-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="radio-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" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="1">
+                  </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" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
+                    <p class="input-helper small muted">Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
+                    <p class="input-helper small muted mb-0">nightTab would add the search term entered into the Search input at the end of the above URL</p>
+                  </div>
+                </div>
+                <hr>
+                <label class="control-header-search-text-align-label">Text align</label>
+                <div class="radio-wrap">
+                  <input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
+                  <label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
+                </div>
+                <div class="radio-wrap">
+                  <input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
+                  <label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
+                </div>
+                <div class="radio-wrap">
+                  <input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
+                  <label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
+                </div>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Horizontal Alignment</h1>
-            <div class="radio-wrap">
-              <input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
-              <label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Buttons</h1>
             </div>
-            <div class="radio-wrap">
-              <input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
-              <label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
-              <label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
-              <p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
+            <div class="menu-item-form">
+              <div class="checkbox-wrap">
+                <input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
+                <label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
+              </div>
+              <div class="checkbox-wrap">
+                <input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
+                <label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Vertical Alignment</h1>
-            <div class="radio-wrap">
-              <input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
-              <label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Horizontal Alignment</h1>
             </div>
-            <div class="radio-wrap">
-              <input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
-              <label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
-              <label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
-              <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
+            <div class="menu-item-form">
+              <div class="radio-wrap">
+                <input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
+                <label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
+                <label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
+                <label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
+                <p class="input-helper small muted">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">
-            <h1 class="menu-header">Background Shade</h1>
-            <div class="checkbox-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 class="menu-item-header">
+              <h1 class="menu-item-header-text">Vertical Alignment</h1>
             </div>
-            <div class="radio-wrap form-indent-1">
-              <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>
-              <p class="input-helper small muted">Useful for when a Background Image is shown.</p>
+            <div class="menu-item-form">
+              <div class="radio-wrap">
+                <input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
+                <label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
+                <label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
+                <label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
+                <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
+              </div>
             </div>
-            <div class="radio-wrap form-indent-1">
-              <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>
-              <p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
+          </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Background Shade</h1>
             </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-header-shade-opacity">Opacity</label>
-              <input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
-            </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-header-shade-padding-top">Top padding</label>
-              <input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
-            </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-header-shade-padding-bottom">Bottom padding</label>
-              <input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom" type="range" min="1" max="50" value="0" tabindex="1">
-            </div>
-            <div class="checkbox-wrap form-indent-1">
-              <input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
-              <label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
-            </div>
-            <div class="input-wrap form-indent-2">
-              <label for="control-header-shade-border-top-width">Border width</label>
-              <input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width" type="range" min="1" max="10" value="0" tabindex="1">
-            </div>
-            <div class="checkbox-wrap form-indent-1">
-              <input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
-              <label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
-            </div>
-            <div class="input-wrap form-indent-2">
-              <label for="control-header-shade-border-bottom-width">Border width</label>
-              <input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
+            <div class="menu-item-form">
+              <div class="checkbox-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="radio-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>
+                  <p class="input-helper small muted">Useful for when a Background Image is shown.</p>
+                </div>
+                <div class="radio-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>
+                  <p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
+                </div>
+                <hr>
+                <div class="input-wrap">
+                  <label for="control-header-shade-opacity">Opacity</label>
+                  <input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
+                </div>
+                <div class="input-wrap">
+                  <label for="control-header-shade-padding-top">Top padding</label>
+                  <input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
+                </div>
+                <div class="input-wrap">
+                  <label for="control-header-shade-padding-bottom">Bottom padding</label>
+                  <input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="1" max="50" value="0" tabindex="1">
+                </div>
+                <hr>
+                <div class="checkbox-wrap">
+                  <input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
+                  <label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
+                </div>
+                <div class="form-indent">
+                  <div class="input-wrap">
+                    <label for="control-header-shade-border-top-width">Border width</label>
+                    <input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
+                  </div>
+                </div>
+                <hr>
+                <div class="checkbox-wrap">
+                  <input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
+                  <label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
+                </div>
+                <div class="form-indent">
+                  <div class="input-wrap">
+                    <label for="control-header-shade-border-bottom-width">Border width</label>
+                    <input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
+
         <div class="menu-content-area menu-content-area-bookmarks is-hidden">
           <div class="menu-item">
-            <h1 class="menu-header">Bookmarks</h1>
-            <div class="checkbox-wrap">
-              <input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Bookmarks</h1>
             </div>
-            <div class="checkbox-wrap form-indent-1">
-              <input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
-            </div>
-            <div class="checkbox-wrap form-indent-1">
-              <input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
-            </div>
-            <div class="radio-wrap form-indent-2">
-              <input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
-              <label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
-            </div>
-            <div class="radio-wrap form-indent-2">
-              <input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
-              <label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
+            <div class="menu-item-form">
+              <div class="checkbox-wrap">
+                <input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
+                <label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
+              </div>
+              <div class="form-indent">
+                <div class="checkbox-wrap">
+                  <input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
+                  <label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
+                </div>
+                <div class="checkbox-wrap">
+                  <input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
+                  <label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
+                </div>
+                <div class="form-indent">
+                  <div class="radio-wrap">
+                    <input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
+                    <label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
+                  </div>
+                  <div class="radio-wrap">
+                    <input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
+                    <label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Open</h1>
-            <div class="checkbox-wrap">
-              <input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Open</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="checkbox-wrap">
+                <input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
+                <label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Style</h1>
-            <div class="radio-wrap">
-              <input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
-              <label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Style</h1>
             </div>
-            <div class="radio-wrap">
-              <input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
-              <label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
+            <div class="menu-item-form">
+              <div class="radio-wrap">
+                <input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
+                <label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
+                <label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Sort</h1>
-            <div class="radio-wrap">
-              <input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
-              <label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Sort</h1>
             </div>
-            <div class="radio-wrap">
-              <input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
-              <label for="control-bookmarks-sort-name"><span class="label-icon"></span>Name</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
-              <label for="control-bookmarks-sort-letter"><span class="label-icon"></span>Letter</label>
+            <div class="menu-item-form">
+              <div class="radio-wrap">
+                <input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
+                <label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
+                <label for="control-bookmarks-sort-name"><span class="label-icon"></span>Name</label>
+              </div>
+              <div class="radio-wrap">
+                <input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
+                <label for="control-bookmarks-sort-letter"><span class="label-icon"></span>Letter</label>
+              </div>
             </div>
           </div>
         </div>
 
         <div class="menu-content-area menu-content-area-theme is-hidden">
           <div class="menu-item">
-            <h1 class="menu-header">Style</h1>
-            <div class="radio-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 class="menu-item-header">
+              <h1 class="menu-item-header-text">Style</h1>
             </div>
-            <div class="radio-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>
-              <p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
+            <div class="menu-item-form">
+              <div class="radio-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="radio-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>
+                <p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Accent</h1>
-            <div class="checkbox-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 class="menu-item-header">
+              <h1 class="menu-item-header-text">Accent</h1>
             </div>
-            <div class="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1">
-              <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="radio-wrap form-indent-1 mb-3">
-              <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 form-indent-1">
-              <button class="control-theme-accent-randomise" type="button">Randomise now</button>
+            <div class="menu-item-form">
+              <div class="checkbox-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="radio-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="radio-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="radio-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="radio-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="radio-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>
+                <hr>
+                <div class="button-wrap">
+                  <button class="control-theme-accent-randomise" type="button">Randomise now</button>
+                </div>
+              </div>
             </div>
           </div>
         </div>
 
         <div class="menu-content-area menu-content-area-layout is-hidden">
           <div class="menu-item">
-            <h1 class="menu-header">Content container</h1>
-            <div class="input-wrap">
-              <label for="control-layout-width">Width</label>
-              <input id="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Content container</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <label for="control-layout-width">Width</label>
+                <input id="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
+              </div>
             </div>
           </div>
           <div class="menu-item">
-            <h1 class="menu-header">Page</h1>
-            <div class="checkbox-wrap">
-              <input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
-              <label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Page</h1>
             </div>
-            <div class="input-wrap">
-              <label for="control-layout-title">Title</label>
-              <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 class="menu-item-form">
+              <div class="checkbox-wrap">
+                <input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
+                <label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
+              </div>
+              <hr>
+              <div class="input-wrap">
+                <label for="control-layout-title">Title</label>
+                <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>
             </div>
           </div>
         </div>
 
         <div class="menu-content-area menu-content-area-background is-hidden">
           <div class="menu-item">
-            <h1 class="menu-header">Image</h1>
-            <div class="checkbox-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 class="menu-item-header">
+              <h1 class="menu-item-header-text">Image</h1>
             </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-background-image-url">URL or path</label>
-              <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1">
-              <p class="input-helper small muted">Enter a URL to an image file or a path to a local file.</p>
-              <p class="input-helper small muted">To use local files enter a relative file path, eg:</p>
-              <p class="input-helper small muted">../background/abstract.jpg</p>
-              <p class="input-helper small muted">../background/gray-steps.jpg</p>
-            </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-background-image-opacity">Opacity</label>
-              <input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
-            </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-background-image-grayscale">Grayscale</label>
-              <input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
-            </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-background-image-blur">Blur</label>
-              <input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
-            </div>
-            <div class="input-wrap form-indent-1">
-              <label for="control-background-image-accent">Accent overlay</label>
-              <input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="50" value="0" tabindex="1">
+            <div class="menu-item-form">
+              <div class="checkbox-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">
+                  <label for="control-background-image-url">URL or path</label>
+                  <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1">
+                  <p class="input-helper small muted">Enter a URL to an image file or a path to a local file.</p>
+                  <p class="input-helper small muted">To use local files enter a relative file path, eg:</p>
+                  <p class="input-helper small muted">../background/abstract.jpg</p>
+                  <p class="input-helper small muted">../background/gray-steps.jpg</p>
+                </div>
+                <hr>
+                <div class="input-wrap">
+                  <label for="control-background-image-opacity">Opacity</label>
+                  <input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
+                </div>
+                <div class="input-wrap">
+                  <label for="control-background-image-grayscale">Grayscale</label>
+                  <input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
+                </div>
+                <div class="input-wrap">
+                  <label for="control-background-image-blur">Blur</label>
+                  <input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
+                </div>
+                <div class="input-wrap">
+                  <label for="control-background-image-accent">Accent overlay</label>
+                  <input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="50" value="0" tabindex="1">
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -538,6 +791,7 @@
 <script src="js/theme.js"></script>
 <script src="js/date.js"></script>
 <script src="js/greeting.js"></script>
+<script src="js/transitional.js"></script>
 <script src="js/clock.js"></script>
 <script src="js/search.js"></script>
 <script src="js/link.js"></script>
diff --git a/js/clock.js b/js/clock.js
index 171d6d83..321c9fbd 100644
--- a/js/clock.js
+++ b/js/clock.js
@@ -17,7 +17,7 @@ var clock = (function() {
   var _makeTimeObject = function() {
     var time = helper.getDateTime();
     time.meridiem = "AM";
-    if (state.get().header.clock.hour24) {
+    if (state.get().header.clock.hour24.show) {
       if (time.hours < 10) {
         time.hours = "0" + time.hours;
       };
@@ -42,60 +42,97 @@ var clock = (function() {
   var render = function() {
     var _clock = function() {
       var clock = helper.e(".clock");
-      var time = _makeTimeObject();
-      var sepCha = ":";
-      var hours = helper.makeNode({
+      var timeObject = _makeTimeObject();
+      var action = {
+        hours: {
+          word: function(value) {
+            if (state.get().header.clock.hour24.show && value < 10) {
+              return "Zero " + helper.toWords(value);
+            } else {
+              return helper.toWords(value);
+            };
+          },
+          number: function(value) {
+            return value;
+          }
+        },
+        minutes: {
+          word: function(value) {
+            if (value < 10) {
+              return "Zero " + helper.toWords(value);
+            } else {
+              return helper.toWords(value);
+            };
+          },
+          number: function(value) {
+            return value;
+          }
+        },
+        seconds: {
+          word: function(value) {
+            return helper.toWords(value);
+          },
+          number: function(value) {
+            return value;
+          }
+        }
+      };
+      timeObject.hours = action.hours[state.get().header.clock.hours.display](timeObject.hours);
+      timeObject.minutes = action.minutes[state.get().header.clock.minutes.display](timeObject.minutes);
+      timeObject.seconds = action.seconds[state.get().header.clock.seconds.display](timeObject.seconds);
+      var elementHours = helper.makeNode({
         tag: "span",
-        text: time.hours,
+        text: timeObject.hours,
         attr: [{
           key: "class",
           value: "clock-item clock-hours"
         }]
       });
-      var minutes = helper.makeNode({
+      var elementMinutes = helper.makeNode({
         tag: "span",
-        text: time.minutes,
+        text: timeObject.minutes,
         attr: [{
           key: "class",
           value: "clock-item clock-minutes"
         }]
       });
-      var seconds = helper.makeNode({
+      var elementSeconds = helper.makeNode({
         tag: "span",
-        text: time.seconds,
+        text: timeObject.seconds,
         attr: [{
           key: "class",
           value: "clock-item clock-seconds"
         }]
       });
-      var meridiem = helper.makeNode({
+      var elementMeridiem = helper.makeNode({
         tag: "span",
-        text: time.meridiem,
+        text: timeObject.meridiem,
         attr: [{
           key: "class",
           value: "clock-item clock-meridiem"
         }]
       });
-      if (state.get().header.clock.show.hours) {
-        clock.appendChild(hours);
+      if (state.get().header.clock.hours.show) {
+        clock.appendChild(elementHours);
       };
-      if (state.get().header.clock.show.minutes) {
-        clock.appendChild(minutes);
+      if (state.get().header.clock.minutes.show) {
+        clock.appendChild(elementMinutes);
       };
-      if (state.get().header.clock.show.seconds) {
-        clock.appendChild(seconds);
+      if (state.get().header.clock.seconds.show) {
+        clock.appendChild(elementSeconds);
       };
-      if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) {
-        clock.appendChild(meridiem);
+      if (!state.get().header.clock.hour24.show && state.get().header.clock.meridiem.show) {
+        clock.appendChild(elementMeridiem);
       };
-      if (state.get().header.clock.show.separator) {
+      if (state.get().header.clock.separator.show) {
+        var separatorCharacter = ":";
         var parts = clock.querySelectorAll("span");
         if (parts.length > 1) {
           parts.forEach(function(arrayItem, index) {
             if (index > 0 && !arrayItem.classList.contains("clock-meridiem")) {
               var separator = helper.makeNode({
                 tag: "span",
-                text: sepCha,
+                text: separatorCharacter,
                 attr: [{
                   key: "class",
                   value: "clock-separator"
@@ -107,7 +144,7 @@ var clock = (function() {
         };
       };
     };
-    if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
+    if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
       _clock();
     };
   };
diff --git a/js/control.js b/js/control.js
index 0f6bf24c..0d87f163 100644
--- a/js/control.js
+++ b/js/control.js
@@ -27,140 +27,518 @@ var control = (function() {
       accent.render();
     }
   }, {
-    element: helper.e(".control-header-clock-show-hours"),
-    path: "header.clock.show.hours",
+    element: helper.e(".control-header-clock-hours-show"),
+    path: "header.clock.hours.show",
     type: "checkbox",
     func: function() {
       render();
       dependents();
       clock.clear();
       clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-clock-show-minutes"),
-    path: "header.clock.show.minutes",
+    element: helper.e(".control-header-clock-hours-number"),
+    path: "header.clock.hours.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      clock.clear();
+      clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-clock-hours-word"),
+    path: "header.clock.hours.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      clock.clear();
+      clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-clock-minutes-show"),
+    path: "header.clock.minutes.show",
     type: "checkbox",
     func: function() {
       render();
       dependents();
       clock.clear();
       clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-clock-show-seconds"),
-    path: "header.clock.show.seconds",
+    element: helper.e(".control-header-clock-minutes-number"),
+    path: "header.clock.minutes.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      clock.clear();
+      clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-clock-minutes-word"),
+    path: "header.clock.minutes.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      clock.clear();
+      clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-clock-seconds-show"),
+    path: "header.clock.seconds.show",
     type: "checkbox",
     func: function() {
       render();
       dependents();
       clock.clear();
       clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-clock-show-separator"),
-    path: "header.clock.show.separator",
+    element: helper.e(".control-header-clock-seconds-number"),
+    path: "header.clock.seconds.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      clock.clear();
+      clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-clock-seconds-word"),
+    path: "header.clock.seconds.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      clock.clear();
+      clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-clock-separator-show"),
+    path: "header.clock.separator.show",
     type: "checkbox",
     func: function() {
       clock.clear();
       clock.render();
+      greeting.clear();
+      greeting.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-clock-24"),
-    path: "header.clock.hour24",
+    element: helper.e(".control-header-clock-hour24-show"),
+    path: "header.clock.hour24.show",
     type: "checkbox",
     func: function() {
       dependents();
       clock.clear();
       clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-clock-show-meridiem"),
-    path: "header.clock.show.meridiem",
+    element: helper.e(".control-header-clock-meridiem-show"),
+    path: "header.clock.meridiem.show",
     type: "checkbox",
     func: function() {
       dependents();
       clock.clear();
       clock.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-show-day"),
-    path: "header.date.show.day",
+    element: helper.e(".control-header-date-day-show"),
+    path: "header.date.day.show",
     type: "checkbox",
     func: function() {
       render();
       dependents();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-show-date"),
-    path: "header.date.show.date",
-    type: "checkbox",
+    element: helper.e(".control-header-date-day-display-number"),
+    path: "header.date.day.display",
+    type: "radio",
     func: function() {
       render();
       dependents();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-show-month"),
-    path: "header.date.show.month",
-    type: "checkbox",
+    element: helper.e(".control-header-date-day-display-word"),
+    path: "header.date.day.display",
+    type: "radio",
     func: function() {
       render();
       dependents();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-show-year"),
-    path: "header.date.show.year",
-    type: "checkbox",
+    element: helper.e(".control-header-date-day-week-start-monday"),
+    path: "header.date.day.weekStart",
+    type: "radio",
     func: function() {
       render();
       dependents();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-show-separator"),
-    path: "header.date.show.separator",
-    type: "checkbox",
+    element: helper.e(".control-header-date-day-week-start-sunday"),
+    path: "header.date.day.weekStart",
+    type: "radio",
     func: function() {
       render();
       dependents();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-character-length-short"),
-    path: "header.date.character.length",
+    element: helper.e(".control-header-date-day-length-long"),
+    path: "header.date.day.length",
     type: "radio",
     func: function() {
       render();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-date-character-length-long"),
-    path: "header.date.character.length",
+    element: helper.e(".control-header-date-day-length-short"),
+    path: "header.date.day.length",
     type: "radio",
     func: function() {
       render();
       date.clear();
       date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-date-show"),
+    path: "header.date.date.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-date-display-number"),
+    path: "header.date.date.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-date-display-word"),
+    path: "header.date.date.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-date-ordinal"),
+    path: "header.date.date.ordinal",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-month-show"),
+    path: "header.date.month.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-month-display-number"),
+    path: "header.date.month.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-month-ordinal"),
+    path: "header.date.month.ordinal",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-month-display-word"),
+    path: "header.date.month.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-month-length-long"),
+    path: "header.date.month.length",
+    type: "radio",
+    func: function() {
+      render();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-month-length-short"),
+    path: "header.date.month.length",
+    type: "radio",
+    func: function() {
+      render();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-year-show"),
+    path: "header.date.year.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-year-display-number"),
+    path: "header.date.year.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-year-display-word"),
+    path: "header.date.year.display",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-format-datemonth"),
+    path: "header.date.format",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-format-monthdate"),
+    path: "header.date.format",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-date-separator-show"),
+    path: "header.date.separator.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      date.clear();
+      date.render();
+      greeting.clear();
+      greeting.render();
+      transitional.clear();
+      transitional.render();
       header.render();
     }
   }, {
@@ -517,6 +895,39 @@ var control = (function() {
       greeting.render();
       header.render();
     }
+  }, {
+    element: helper.e(".control-header-transitional-show"),
+    path: "header.transitional.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-transitional-type-timeanddate"),
+    path: "header.transitional.type",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-transitional-type-its"),
+    path: "header.transitional.type",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      transitional.clear();
+      transitional.render();
+      header.render();
+    }
   }, {
     element: helper.e(".control-bookmarks-url-show"),
     path: "bookmarks.url.show",
@@ -741,6 +1152,7 @@ var control = (function() {
       checkbox: "change",
       radio: "change",
       text: "input",
+      number: "input",
       range: "input",
       color: "change"
     };
@@ -754,6 +1166,9 @@ var control = (function() {
       text: function(object) {
         return object.element.value;
       },
+      number: function(object) {
+        return parseInt(object.element.value, 10);
+      },
       range: function(object) {
         return parseInt(object.element.value, 10);
       },
@@ -782,10 +1197,10 @@ var control = (function() {
           path: object.path,
           newValue: newValue
         });
-        // console.log(object.path, helper.getObject({
-        //   object: state.get(),
-        //   path: object.path
-        // }));
+        console.log(object.path, helper.getObject({
+          object: state.get(),
+          path: object.path
+        }));
       };
     };
     var bindControl = function(object) {
@@ -834,14 +1249,14 @@ var control = (function() {
       };
     };
     var _date = function() {
-      if (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year) {
+      if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show) {
         helper.addClass(html, "is-header-date-show");
       } else {
         helper.removeClass(html, "is-header-date-show");
       };
     };
     var _clock = function() {
-      if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
+      if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
         helper.addClass(html, "is-header-clock-show");
       } else {
         helper.removeClass(html, "is-header-clock-show");
@@ -945,6 +1360,13 @@ var control = (function() {
         helper.removeClass(html, "is-header-greeting");
       };
     };
+    var _transitional = function() {
+      if (state.get().header.transitional.show && (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
+        helper.addClass(html, "is-header-transitional");
+      } else {
+        helper.removeClass(html, "is-header-transitional");
+      };
+    };
     var _background = function() {
       if (state.get().background.image.show) {
         helper.addClass(html, "is-background-image-show");
@@ -978,6 +1400,7 @@ var control = (function() {
     _alignment();
     _edit();
     _greeting();
+    _transitional();
     _date();
     _clock();
     _search();
@@ -1001,23 +1424,87 @@ var control = (function() {
     };
     var _date = function() {
       var activeCount = 0;
-      var toCheck = [state.get().header.date.show.date, state.get().header.date.show.day, state.get().header.date.show.month, state.get().header.date.show.year];
+      var toCheck = [state.get().header.date.day.show, state.get().header.date.date.show, state.get().header.date.month.show, state.get().header.date.year.show];
       toCheck.forEach(function(arrayItem, index) {
         if (arrayItem == true) {
           activeCount++;
         };
       });
-      if (activeCount >= 2 && (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year)) {
-        helper.e(".control-header-date-show-separator").disabled = false;
+      if (activeCount >= 2 && (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show)) {
+        helper.e(".control-header-date-separator-show").disabled = false;
       } else {
-        helper.e(".control-header-date-show-separator").disabled = true;
+        helper.e(".control-header-date-separator-show").disabled = true;
       };
-      if (state.get().header.date.show.day || state.get().header.date.show.month) {
-        helper.e(".control-header-date-character-length-short").disabled = false;
-        helper.e(".control-header-date-character-length-long").disabled = false;
+      if (state.get().header.date.date.show && state.get().header.date.month.show) {
+        helper.e(".control-header-date-format-label").removeAttribute("disabled");
+        helper.e(".control-header-date-format-datemonth").disabled = false;
+        helper.e(".control-header-date-format-monthdate").disabled = false;
       } else {
-        helper.e(".control-header-date-character-length-short").disabled = true;
-        helper.e(".control-header-date-character-length-long").disabled = true;
+        helper.e(".control-header-date-format-label").setAttribute("disabled", "");
+        helper.e(".control-header-date-format-datemonth").disabled = true;
+        helper.e(".control-header-date-format-monthdate").disabled = true;
+      };
+      if (state.get().header.date.day.show) {
+        helper.e(".control-header-date-day-display-number").disabled = false;
+        helper.e(".control-header-date-day-display-word").disabled = false;
+      } else {
+        helper.e(".control-header-date-day-display-number").disabled = true;
+        helper.e(".control-header-date-day-display-word").disabled = true;
+      };
+      if (state.get().header.date.date.show) {
+        helper.e(".control-header-date-date-display-number").disabled = false;
+        helper.e(".control-header-date-date-display-word").disabled = false;
+        helper.e(".control-header-date-date-ordinal").disabled = false;
+      } else {
+        helper.e(".control-header-date-date-display-number").disabled = true;
+        helper.e(".control-header-date-date-display-word").disabled = true;
+        helper.e(".control-header-date-date-ordinal").disabled = true;
+      };
+      if (state.get().header.date.month.show) {
+        helper.e(".control-header-date-month-display-number").disabled = false;
+        helper.e(".control-header-date-month-display-word").disabled = false;
+      } else {
+        helper.e(".control-header-date-month-display-number").disabled = true;
+        helper.e(".control-header-date-month-display-word").disabled = true;
+      };
+      if (state.get().header.date.year.show) {
+        helper.e(".control-header-date-year-display-number").disabled = false;
+        helper.e(".control-header-date-year-display-word").disabled = false;
+      } else {
+        helper.e(".control-header-date-year-display-number").disabled = true;
+        helper.e(".control-header-date-year-display-word").disabled = true;
+      };
+      if (state.get().header.date.day.show && state.get().header.date.day.display == "number") {
+        helper.e(".control-header-date-day-week-start-label").removeAttribute("disabled");
+        helper.e(".control-header-date-day-week-start-monday").disabled = false;
+        helper.e(".control-header-date-day-week-start-sunday").disabled = false;
+      } else {
+        helper.e(".control-header-date-day-week-start-label").setAttribute("disabled", "");
+        helper.e(".control-header-date-day-week-start-monday").disabled = true;
+        helper.e(".control-header-date-day-week-start-sunday").disabled = true;
+      };
+      if (state.get().header.date.day.show && state.get().header.date.day.display == "word") {
+        helper.e(".control-header-date-day-length-label").removeAttribute("disabled");
+        helper.e(".control-header-date-day-length-long").disabled = false;
+        helper.e(".control-header-date-day-length-short").disabled = false;
+      } else {
+        helper.e(".control-header-date-day-length-label").setAttribute("disabled", "");
+        helper.e(".control-header-date-day-length-long").disabled = true;
+        helper.e(".control-header-date-day-length-short").disabled = true;
+      };
+      if (state.get().header.date.month.show && state.get().header.date.month.display == "word") {
+        helper.e(".control-header-date-month-length-label").removeAttribute("disabled");
+        helper.e(".control-header-date-month-length-long").disabled = false;
+        helper.e(".control-header-date-month-length-short").disabled = false;
+      } else {
+        helper.e(".control-header-date-month-length-label").setAttribute("disabled", "");
+        helper.e(".control-header-date-month-length-long").disabled = true;
+        helper.e(".control-header-date-month-length-short").disabled = true;
+      };
+      if (state.get().header.date.month.show && state.get().header.date.month.display == "number") {
+        helper.e(".control-header-date-month-ordinal").disabled = false;
+      } else {
+        helper.e(".control-header-date-month-ordinal").disabled = true;
       };
     };
     var _greeting = function() {
@@ -1035,35 +1522,70 @@ var control = (function() {
         helper.e(".control-header-greeting-type-hi").disabled = true;
       };
     };
+    var _transitional = function() {
+      if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+        helper.e(".control-header-transitional-show").disabled = false;
+      } else {
+        helper.e(".control-header-transitional-show").disabled = true;
+      };
+      if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
+        helper.e(".control-header-transitional-type-timeanddate").disabled = false;
+        helper.e(".control-header-transitional-type-its").disabled = false;
+      } else {
+        helper.e(".control-header-transitional-type-timeanddate").disabled = true;
+        helper.e(".control-header-transitional-type-its").disabled = true;
+      };
+    };
     var _clock = function() {
       var activeCount = 0;
-      var toCheck = [state.get().header.clock.show.seconds, state.get().header.clock.show.minutes, state.get().header.clock.show.hours];
+      var toCheck = [state.get().header.clock.seconds.show, state.get().header.clock.minutes.show, state.get().header.clock.hours.show];
       toCheck.forEach(function(arrayItem, index) {
         if (arrayItem == true) {
           activeCount++;
         };
       });
-      if (activeCount >= 2 && (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours)) {
-        helper.e(".control-header-clock-show-separator").disabled = false;
+      if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
+        helper.e(".control-header-clock-separator-show").disabled = false;
       } else {
-        helper.e(".control-header-clock-show-separator").disabled = true;
+        helper.e(".control-header-clock-separator-show").disabled = true;
       };
-      if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
-        helper.e(".control-header-clock-24").disabled = false;
-        helper.e(".control-header-clock-show-meridiem").disabled = false;
+      if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+        helper.e(".control-header-clock-hour24-show").disabled = false;
+        helper.e(".control-header-clock-meridiem-show").disabled = false;
       } else {
-        helper.e(".control-header-clock-24").disabled = true;
-        helper.e(".control-header-clock-show-meridiem").disabled = true;
+        helper.e(".control-header-clock-hour24-show").disabled = true;
+        helper.e(".control-header-clock-meridiem-show").disabled = true;
       };
-      if ((state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) && !state.get().header.clock.hour24) {
-        helper.e(".control-header-clock-show-meridiem").disabled = false;
+      if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
+        helper.e(".control-header-clock-meridiem-show").disabled = false;
       } else {
-        helper.e(".control-header-clock-show-meridiem").disabled = true;
+        helper.e(".control-header-clock-meridiem-show").disabled = true;
+      };
+      if (state.get().header.clock.hours.show) {
+        helper.e(".control-header-clock-hours-number").disabled = false;
+        helper.e(".control-header-clock-hours-word").disabled = false;
+      } else {
+        helper.e(".control-header-clock-hours-number").disabled = true;
+        helper.e(".control-header-clock-hours-word").disabled = true;
+      };
+      if (state.get().header.clock.minutes.show) {
+        helper.e(".control-header-clock-minutes-number").disabled = false;
+        helper.e(".control-header-clock-minutes-word").disabled = false;
+      } else {
+        helper.e(".control-header-clock-minutes-number").disabled = true;
+        helper.e(".control-header-clock-minutes-word").disabled = true;
+      };
+      if (state.get().header.clock.seconds.show) {
+        helper.e(".control-header-clock-seconds-number").disabled = false;
+        helper.e(".control-header-clock-seconds-word").disabled = false;
+      } else {
+        helper.e(".control-header-clock-seconds-number").disabled = true;
+        helper.e(".control-header-clock-seconds-word").disabled = true;
       };
     };
     var _search = function() {
       if (state.get().header.search.show) {
-        helper.e(".control-header-search-width-label").removeAttribute("disabled");
+        helper.e(".control-header-search-width-style-label").removeAttribute("disabled");
         helper.e(".control-header-search-width-style-auto").disabled = false;
         helper.e(".control-header-search-width-style-custom").disabled = false;
         helper.e("[for=control-header-search-width-custom]").removeAttribute("disabled");
@@ -1080,7 +1602,7 @@ var control = (function() {
         helper.e(".control-header-search-text-align-center").disabled = false;
         helper.e(".control-header-search-text-align-right").disabled = false;
       } else {
-        helper.e(".control-header-search-width-label").setAttribute("disabled", "");
+        helper.e(".control-header-search-width-style-label").setAttribute("disabled", "");
         helper.e(".control-header-search-width-style-auto").disabled = true;
         helper.e(".control-header-search-width-style-custom").disabled = true;
         helper.e("[for=control-header-search-width-custom]").setAttribute("disabled", "");
@@ -1236,9 +1758,10 @@ var control = (function() {
       };
     };
     _edit();
-    _greeting();
     _date();
     _clock();
+    _greeting();
+    _transitional();
     _search();
     _theme();
     _link();
@@ -1274,6 +1797,12 @@ var control = (function() {
           path: object.path
         });
       },
+      number: function(object) {
+        object.element.value = helper.getObject({
+          object: state.get(),
+          path: object.path
+        });
+      },
       range: function(object) {
         var newValue = helper.getObject({
           object: state.get(),
diff --git a/js/date.js b/js/date.js
index 30297a1b..5778ac89 100644
--- a/js/date.js
+++ b/js/date.js
@@ -1,10 +1,10 @@
 var date = (function() {
 
   var bind = function() {
-    window.setInterval(function() {
-      clear();
-      render();
-    }, 1000);
+    // window.setInterval(function() {
+    //   clear();
+    //   render();
+    // }, 1000);
   };
 
   var clear = function() {
@@ -15,73 +15,159 @@ var date = (function() {
   };
 
   var _makeTimeObject = function() {
-    var time = helper.getDateTime();
-    return time;
+    var date = helper.getDateTime();
+    return date;
+  };
+
+  var _month = function(index) {
+    var all = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    return all[index];
+  };
+
+  var _day = function(index) {
+    var all = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    return all[index];
   };
 
   var render = function() {
     var _date = function() {
       var date = helper.e(".date");
-      var time = _makeTimeObject();
-      time.day = helper.day(time.day);
-      time.month = helper.month(time.month);
-      if (state.get().header.date.character.length == "short") {
-        time.day = time.day.substring(0, 3);
-        time.month = time.month.substring(0, 3);
+      var dateObject = _makeTimeObject();
+      var action = {
+        day: {
+          word: function(value) {
+            return _day(value);
+          },
+          number: function(value) {
+            if (state.get().header.date.day.weekStart == "monday") {
+              if (value == 0) {
+                value = 7;
+              };
+            } else if (state.get().header.date.day.weekStart == "sunday") {
+              value = value + 1;
+            };
+            return value;
+          }
+        },
+        date: {
+          word: function(value) {
+            if (state.get().header.date.date.ordinal) {
+              return helper.ordinalWords(helper.toWords(value));
+            } else {
+              return helper.toWords(value);
+            };
+          },
+          number: function(value) {
+            if (state.get().header.date.date.ordinal) {
+              return helper.ordinalNumber(value);
+            } else {
+              return value;
+            };
+          }
+        },
+        month: {
+          word: function(value) {
+            return _month(value);
+          },
+          number: function(value) {
+            if (state.get().header.date.month.ordinal) {
+              return helper.ordinalNumber(value + 1);
+              return value + 1;
+            } else {
+              return value + 1;
+            };
+          }
+        },
+        year: {
+          word: function(value) {
+            return helper.toWords(value);
+          },
+          number: function(value) {
+            return value;
+          }
+        }
       };
-      var sepCha = "/";
-      var dateNumber = helper.makeNode({
+      dateObject.day = action.day[state.get().header.date.day.display](dateObject.day);
+      dateObject.date = action.date[state.get().header.date.date.display](dateObject.date);
+      dateObject.month = action.month[state.get().header.date.month.display](dateObject.month);
+      dateObject.year = action.year[state.get().header.date.year.display](dateObject.year);
+      if (state.get().header.date.day.display == "word" && state.get().header.date.day.length == "short") {
+        dateObject.day = dateObject.day.substring(0, 3);
+      };
+      if (state.get().header.date.month.display == "word" && state.get().header.date.month.length == "short") {
+        dateObject.month = dateObject.month.substring(0, 3);
+      };
+      var elementDay = helper.makeNode({
         tag: "span",
-        text: time.date,
-        attr: [{
-          key: "class",
-          value: "date-item date-date"
-        }]
-      });
-      var day = helper.makeNode({
-        tag: "span",
-        text: time.day,
+        text: dateObject.day,
         attr: [{
           key: "class",
           value: "date-item date-day"
         }]
       });
-      var month = helper.makeNode({
+      var elementDate = helper.makeNode({
         tag: "span",
-        text: time.month,
+        text: dateObject.date,
+        attr: [{
+          key: "class",
+          value: "date-item date-date"
+        }]
+      });
+      var elementMonth = helper.makeNode({
+        tag: "span",
+        text: dateObject.month,
         attr: [{
           key: "class",
           value: "date-item date-month"
         }]
       });
-      var year = helper.makeNode({
+      var elementyear = helper.makeNode({
         tag: "span",
-        text: time.year,
+        text: dateObject.year,
         attr: [{
           key: "class",
           value: "date-item date-year"
         }]
       });
-      if (state.get().header.date.show.day) {
-        date.appendChild(day);
+      if (state.get().header.date.day.show) {
+        date.appendChild(elementDay);
       };
-      if (state.get().header.date.show.date) {
-        date.appendChild(dateNumber);
+      if (state.get().header.date.date.show && state.get().header.date.month.show) {
+        if (state.get().header.date.format == "datemonth") {
+          if (state.get().header.date.date.show) {
+            date.appendChild(elementDate);
+          };
+          if (state.get().header.date.month.show) {
+            date.appendChild(elementMonth);
+          };
+        } else if (state.get().header.date.format == "monthdate") {
+          if (state.get().header.date.month.show) {
+            date.appendChild(elementMonth);
+          };
+          if (state.get().header.date.date.show) {
+            date.appendChild(elementDate);
+          };
+        };
+      } else {
+        if (state.get().header.date.date.show) {
+          date.appendChild(elementDate);
+        };
+        if (state.get().header.date.month.show) {
+          date.appendChild(elementMonth);
+        };
       };
-      if (state.get().header.date.show.month) {
-        date.appendChild(month);
+      if (state.get().header.date.year.show) {
+        date.appendChild(elementyear);
       };
-      if (state.get().header.date.show.year) {
-        date.appendChild(year);
-      };
-      if (state.get().header.date.show.separator) {
+      if (state.get().header.date.separator.show) {
+        var separatorCharacter = "/";
         var parts = date.querySelectorAll("span");
         if (parts.length > 1) {
           parts.forEach(function(arrayItem, index) {
             if (index > 0) {
               var separator = helper.makeNode({
                 tag: "span",
-                text: sepCha,
+                text: separatorCharacter,
                 attr: [{
                   key: "class",
                   value: "date-separator"
@@ -93,7 +179,7 @@ var date = (function() {
         };
       };
     };
-    if (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year) {
+    if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show) {
       _date();
     };
   };
diff --git a/js/greeting.js b/js/greeting.js
index 45ff077f..d865612b 100644
--- a/js/greeting.js
+++ b/js/greeting.js
@@ -18,21 +18,21 @@ var greeting = (function() {
     var _greeting = function() {
       var greeting = helper.e(".greeting");
       var message = {
-        hi: function() {
-          return "Hi";
-        },
-        hello: function() {
-          return "Hello";
-        },
         good: function() {
           var time = helper.getDateTime();
           var message = ["Good night", "Good morning", "Good afternoon", "Good evening"];
           return message[Math.floor(time.hours / 6)];
+        },
+        hello: function() {
+          return "Hello";
+        },
+        hi: function() {
+          return "Hi";
         }
       };
-      var greetingMessage = message[state.get().header.greeting.type]();
+      var string = message[state.get().header.greeting.type]();
       if (state.get().header.greeting.name != "" && state.get().header.greeting.name != undefined) {
-        greetingMessage = greetingMessage + ", " + state.get().header.greeting.name;
+        string = string + ", " + state.get().header.greeting.name;
       };
       var greetingItem = helper.makeNode({
         tag: "span",
@@ -43,7 +43,7 @@ var greeting = (function() {
       });
       var greetingItemText = helper.makeNode({
         tag: "span",
-        text: greetingMessage,
+        text: string,
         attr: [{
           key: "class",
           value: "greeting-item-text"
diff --git a/js/helper.js b/js/helper.js
index 2f81998f..ff11f0f6 100644
--- a/js/helper.js
+++ b/js/helper.js
@@ -37,16 +37,6 @@ var helper = (function() {
     return object;
   };
 
-  var month = function(index) {
-    var all = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-    return all[index];
-  };
-
-  var day = function(index) {
-    var all = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-    return all[index];
-  };
-
   var sortObject = function(object, key) {
     object.sort(function(a, b) {
       var textA = a[key];
@@ -354,6 +344,121 @@ var helper = (function() {
     return Math.floor(Math.random() * (max - min + 1) + min);
   };
 
+  var toWords = function(number) {
+    var ten = 10;
+    var oneHundred = 100;
+    var oneThousand = 1000;
+    var oneMillion = 1000000;
+    var oneBillion = 1000000000; // 1,000,000,000 (9)
+    var oneTrillion = 1000000000000; // 1,000,000,000,000 (12)
+    var oneQuadrillion = 1000000000000000; // 1,000,000,000,000,000 (15)
+    var max = 9007199254740992; // 9,007,199,254,740,992 (15)
+    var lessThanTwenty = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];
+    var tenthsLessThanHundred = ["Zero", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
+    var _generateWords = function(number) {
+      var remainder, word,
+        words = arguments[1];
+      // We’re done
+      if (number === 0) {
+        return !words ? "Zero" : words.join(" ").replace(/,$/, "");
+      };
+      // First run
+      if (!words) {
+        words = [];
+      };
+      // If negative, prepend “minus”
+      if (number < 0) {
+        words.push("minus");
+        number = Math.abs(number);
+      };
+      if (number < 20) {
+        remainder = 0;
+        word = lessThanTwenty[number];
+      } else if (number < oneHundred) {
+        remainder = number % ten;
+        word = tenthsLessThanHundred[Math.floor(number / ten)];
+        // In case of remainder, we need to handle it here to be able to add the “-”
+        if (remainder) {
+          word += "-" + lessThanTwenty[remainder];
+          remainder = 0;
+        };
+      } else if (number < oneThousand) {
+        remainder = number % oneHundred;
+        word = _generateWords(Math.floor(number / oneHundred)) + " Hundred";
+      } else if (number < oneMillion) {
+        remainder = number % oneThousand;
+        word = _generateWords(Math.floor(number / oneThousand)) + " Thousand,";
+      } else if (number < oneBillion) {
+        remainder = number % oneMillion;
+        word = _generateWords(Math.floor(number / oneMillion)) + " Million,";
+      } else if (number < oneTrillion) {
+        remainder = number % oneBillion;
+        word = _generateWords(Math.floor(number / oneBillion)) + " Billion,";
+      } else if (number < oneQuadrillion) {
+        remainder = number % oneTrillion;
+        word = _generateWords(Math.floor(number / oneTrillion)) + " Trillion,";
+      } else if (number <= max) {
+        remainder = number % oneQuadrillion;
+        word = _generateWords(Math.floor(number / oneQuadrillion)) + " Quadrillion,";
+      };
+      words.push(word);
+      return _generateWords(remainder, words);
+    };
+    var num = parseInt(number, 10);
+    return _generateWords(num);
+  };
+
+  var ordinalWords = function(words) {
+    var endsWithDoubleZeroPattern = /(hundred|thousand|(m|b|tr|quadr)illion)$/;
+    var endsWithTeenPattern = /teen$/;
+    var endsWithYPattern = /y$/;
+    var endsWithZeroThroughTwelvePattern = /(Zero|One|Two|Three|Four|Five|Six|Seven|Eight|Nine|Ten|Eleven|Twelve)$/;
+    var ordinalLessThanThirteen = {
+      Zero: "Zeroth",
+      One: "First",
+      Two: "Second",
+      Three: "Third",
+      Four: "Fourth",
+      Five: "Fifth",
+      Six: "Sixth",
+      Seven: "Seventh",
+      Eight: "Eighth",
+      Nine: "Ninth",
+      Ten: "Tenth",
+      Eleven: "Eleventh",
+      Twelve: "Twelfth"
+    };
+    var replaceWithOrdinalVariant = function(match, numberWord) {
+      return ordinalLessThanThirteen[numberWord];
+    };
+    // Ends with *00 (100, 1000, etc.) or *teen (13, 14, 15, 16, 17, 18, 19)
+    if (endsWithDoubleZeroPattern.test(words) || endsWithTeenPattern.test(words)) {
+      return words + "th";
+      // Ends with *y (20, 30, 40, 50, 60, 70, 80, 90)
+    } else if (endsWithYPattern.test(words)) {
+      return words.replace(endsWithYPattern, "ieth");
+      // Ends with one through twelve
+    } else if (endsWithZeroThroughTwelvePattern.test(words)) {
+      return words.replace(endsWithZeroThroughTwelvePattern, replaceWithOrdinalVariant);
+    };
+    return words;
+  };
+
+  var ordinalNumber = function(number) {
+    var j = number % 10;
+    var k = number % 100;
+    if (j == 1 && k != 11) {
+      return number + "st";
+    };
+    if (j == 2 && k != 12) {
+      return number + "nd";
+    };
+    if (j == 3 && k != 13) {
+      return number + "rd";
+    };
+    return number + "th";
+  };
+
   // exposed methods
   return {
     e: e,
@@ -363,8 +468,6 @@ var helper = (function() {
     removeClass: removeClass,
     allEqual: allEqual,
     getDateTime: getDateTime,
-    month: month,
-    day: day,
     sortObject: sortObject,
     applyOptions: applyOptions,
     hexToRgb: hexToRgb,
@@ -374,7 +477,10 @@ var helper = (function() {
     setObject: setObject,
     getObject: getObject,
     makeObject: makeObject,
-    randomNumber: randomNumber
+    randomNumber: randomNumber,
+    toWords: toWords,
+    ordinalWords: ordinalWords,
+    ordinalNumber: ordinalNumber
   };
 
 })();
diff --git a/js/init.js b/js/init.js
index e52ad364..f172a2f5 100644
--- a/js/init.js
+++ b/js/init.js
@@ -26,10 +26,13 @@ link.init();
 // render states
 control.init();
 
-// render date
-// bind date update
+// render greeting
+// bind greeting update
 greeting.init();
 
+// render transitional
+transitional.init();
+
 // render date
 // bind date update
 date.init();
diff --git a/js/state.js b/js/state.js
index 3a24ab2c..35a50290 100644
--- a/js/state.js
+++ b/js/state.js
@@ -3,26 +3,54 @@ var state = (function() {
   var current = {
     header: {
       clock: {
-        hour24: true,
-        show: {
-          hours: true,
-          minutes: true,
-          seconds: true,
-          separator: true,
-          meridiem: true
-        }
+        hours: {
+          show: true,
+          display: "number"
+        },
+        minutes: {
+          show: true,
+          display: "number"
+        },
+        seconds: {
+          show: true,
+          display: "number"
+        },
+        separator: {
+          show: true
+        },
+        meridiem: {
+          show: true
+        },
+        hour24: {
+          show: true
+        },
       },
       date: {
-        show: {
-          day: false,
-          date: true,
-          month: true,
-          year: false,
-          separator: true
+        day: {
+          show: true,
+          display: "word",
+          weekStart: "monday",
+          length: "long"
         },
-        character: {
-          length: "short"
-        }
+        date: {
+          show: true,
+          display: "number",
+          ordinal: true
+        },
+        month: {
+          show: true,
+          display: "word",
+          length: "long",
+          ordinal: true
+        },
+        year: {
+          show: true,
+          display: "number"
+        },
+        separator: {
+          show: true
+        },
+        format: "datemonth"
       },
       search: {
         show: true,
@@ -91,6 +119,10 @@ var state = (function() {
         show: false,
         type: "good",
         name: ""
+      },
+      transitional: {
+        show: false,
+        type: "timeanddate"
       }
     },
     bookmarks: {
diff --git a/js/transitional.js b/js/transitional.js
new file mode 100644
index 00000000..a6d48267
--- /dev/null
+++ b/js/transitional.js
@@ -0,0 +1,84 @@
+var transitional = (function() {
+
+  var bind = function() {
+    window.setInterval(function() {
+      clear();
+      render();
+    }, 1000);
+  };
+
+  var clear = function() {
+    var transitional = helper.e(".transitional");
+    while (transitional.lastChild) {
+      transitional.removeChild(transitional.lastChild);
+    };
+  };
+
+  var render = function() {
+    var _transitional = function() {
+      var transitional = helper.e(".transitional");
+      var message = {
+        timeanddate: function() {
+          if ((state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show) && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
+            if (state.get().header.date.day.show && !state.get().header.date.date.show && !state.get().header.date.month.show && !state.get().header.date.year.show) {
+              return "The time and day is";
+            } else {
+              return "The time and date is";
+            };
+          } else if (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show) {
+            if (state.get().header.date.day.show && !state.get().header.date.date.show && !state.get().header.date.month.show && !state.get().header.date.year.show) {
+              return "Today is";
+            } else if (!state.get().header.date.day.show && state.get().header.date.date.show && !state.get().header.date.month.show && !state.get().header.date.year.show) {
+              return "The date is";
+            } else if (!state.get().header.date.day.show && !state.get().header.date.date.show && state.get().header.date.month.show && !state.get().header.date.year.show) {
+              return "The month is";
+            } else if (!state.get().header.date.day.show && !state.get().header.date.date.show && !state.get().header.date.month.show && state.get().header.date.year.show) {
+              return "The year is";
+            } else {
+              return "The date is";
+            };
+          } else if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
+            return "The time is";
+          };
+        },
+        its: function() {
+          return "It's";
+        }
+      };
+      var string = message[state.get().header.transitional.type]();
+      var transitionalItem = helper.makeNode({
+        tag: "span",
+        attr: [{
+          key: "class",
+          value: "transitional-item"
+        }]
+      });
+      var transitionalItemText = helper.makeNode({
+        tag: "span",
+        text: string,
+        attr: [{
+          key: "class",
+          value: "transitional-item-text"
+        }]
+      });
+      transitionalItem.appendChild(transitionalItemText);
+      transitional.appendChild(transitionalItem);
+    };
+    if (state.get().header.transitional.show) {
+      _transitional();
+    };
+  };
+
+  var init = function() {
+    bind();
+    render();
+  };
+
+  // exposed methods
+  return {
+    init: init,
+    render: render,
+    clear: clear
+  };
+
+})();
diff --git a/js/update.js b/js/update.js
index cd566cf5..c5b77049 100644
--- a/js/update.js
+++ b/js/update.js
@@ -245,6 +245,65 @@ var update = (function() {
     return data;
   };
 
+  var _update_2210 = function(data) {
+    data.version = "2.21.0";
+    data.state.header.clock = {
+      hours: {
+        show: data.state.header.clock.show.hours,
+        display: "number"
+      },
+      minutes: {
+        show: data.state.header.clock.show.minutes,
+        display: "number"
+      },
+      seconds: {
+        show: data.state.header.clock.show.seconds,
+        display: "number"
+      },
+      separator: {
+        show: data.state.header.clock.show.separator
+      },
+      meridiem: {
+        show: data.state.header.clock.show.meridiem
+      },
+      hour24: {
+        show: data.state.header.clock.hour24
+      }
+    };
+    data.state.header.date = {
+      day: {
+        show: data.state.header.date.show.day,
+        display: "word",
+        weekStart: "monday",
+        length: data.state.header.date.character.length
+      },
+      date: {
+        show: data.state.header.date.show.date,
+        display: "number",
+        ordinal: true
+      },
+      month: {
+        show: data.state.header.date.show.month,
+        display: "word",
+        length: data.state.header.date.character.length,
+        ordinal: true
+      },
+      year: {
+        show: data.state.header.date.show.year,
+        display: "number"
+      },
+      separator: {
+        show: data.state.header.date.show.separator
+      },
+      format: "datemonth"
+    };
+    data.state.header.transitional = {
+      show: false,
+      type: "timeanddate"
+    };
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -327,6 +386,10 @@ var update = (function() {
         console.log("\t= running update 2.20.0");
         data = _update_2200(data);
       };
+      if (version.compare(data.version, "2.21.0") == -1) {
+        console.log("\t= running update 2.21.0");
+        data = _update_2210(data);
+      };
     };
     // if no update is needed
     // version bump
diff --git a/js/version.js b/js/version.js
index fbdb8710..369c7fa1 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.20.0";
+  var current = "2.21.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");