diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html
index cfddd9bf8..9738efbcd 100755
--- a/node/src/documents/collections/form.html
+++ b/node/src/documents/collections/form.html
@@ -116,21 +116,40 @@ type   : 'UI Collection'
     <h4>Radio Box</h4>
     <p>Radio boxes are styled forms of standard form radio controls.</p>
     <div class="ui form">
-      <div class="two fields">
-        <div class="field">
-          <label>Choice #1</label>
-          <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
-          </div>
+      <div class="inline field">
+        <div class="ui radio checkbox">
+          <input type="radio" name="example" />
+          <label></label>
         </div>
-        <div class="field">
-          <label>Choice #2</label>
-          <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
-          </div>
+        <label>Apples</label>
+      </div>
+      <div class="inline field">
+        <div class="ui radio checkbox">
+          <input type="radio" name="example" />
+          <label></label>
+        </div>
+        <label>Pears</label>
+      </div>
+      <div class="inline field">
+        <div class="ui radio checkbox">
+          <input type="radio" name="example" />
+          <label></label>
+        </div>
+        <label>Bananas</label>
+      </div>
+      <div class="inline field">
+        <div class="ui radio checkbox">
+          <input type="radio" name="example" />
+          <label></label>
+        </div>
+        <label>Oranges</label>
+      </div>
+      <div class="inline field">
+        <div class="ui radio checkbox">
+          <input type="radio" name="example" />
+          <label></label>
         </div>
+        <label>Persimmon</label>
       </div>
     </div>
   </div>
diff --git a/node/src/documents/modules/checkbox.html b/node/src/documents/modules/checkbox.html
new file mode 100755
index 000000000..ecee1b326
--- /dev/null
+++ b/node/src/documents/modules/checkbox.html
@@ -0,0 +1,166 @@
+---
+layout : 'default'
+css    : 'button'
+
+title  : 'Checkbox'
+type   : 'UI Module'
+---
+
+<div class="segment">
+  <div class="container">
+    <h1>Checkbox</h1>
+    <p>Checkbox is a plugin for attaching form events to UI checkbox</p>
+  </div>
+</div>
+<div class="main container">
+  
+  <div class="peek">
+    <div class="ui vertical pointing menu">
+      <a class="active item">Examples</a>
+      <a class="item">Getting Started</a>
+      <a class="item">Settings</a>
+    </div>
+  </div>
+  <p>UI checkboxes do not need javascript to function correctly, checkboxs can be triggered by matching the label's for attribute to the id tag of an input field</p>
+  <p>However, there may be situations where it is less work to use javascript to initialize a checkbox then to manually assign ID tags to each field, or you might want to programmatically trigger the checkbox state. In these cases the checkbox module may be useful.</p>
+
+  <h2>Examples</h2>
+
+  <h3>Initializing a check box</h3>
+  <div class="code">$('.ui.checkbox')
+  .checkbox()
+;
+</div>
+
+  <div class="example">
+    <h3>Check Box</h3>
+    <p>The html required for a standard UI checkbox</p>
+    <div class="ui checkbox">
+      <input type="checkbox" id="uniqueid" />
+      <label for="uniqueid"></label>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h3>Radio Box</h3>
+    <p>The html required for a standard UI radio box</p>
+    <p>A radio box is just a reskinned version of a checkbox, the initialization of the module is the same.</p>
+    <div class="ui radio checkbox">
+      <input type="checkbox" id="uniqueid" />
+      <label for="uniqueid"></label>
+    </div>
+  </div>
+  
+  
+  <h2>Getting Started</h2>
+
+  <p>The plugin must be initialized once before methods can be accessed</p>
+  <div class="code">$('.ui.checkbox')
+  .checkbox()
+;</div>
+
+  <p>You can enable a checkbox programmatically using the enable method</p>
+  <div class="code">$('.ui.checkbox')
+  .checkbox('enable')
+;</div>
+
+  <p>You can enable all checkboxes initialized at the same time by calling the enableAll method</p>
+  <div class="code">$('.ui.checkbox')
+  .checkbox('enableAll')
+;</div>
+
+
+  <p>You can disable a checkbox programmatically using the disable method</p>
+  <div class="code">$('.ui.checkbox')
+  .checkbox('disable')
+;</div>
+
+  <p>You can disable all checkboxes initialized at the same time by calling the disableAll method</p>
+  <div class="code">$('.ui.checkbox')
+  .checkbox('disableAll')
+;</div>
+
+  <h2>Settings</h2>
+  <h3>Changing Settings</h3> 
+  <ol>
+    <li>A settings object can be passed in when initializing the plugin
+      <br> <div class="code">$('.foo')
+  .checkbox({ 
+    moduleName: 'Godzilla'
+  })
+;</div>
+    </li>
+    <li>Default settings for the module can be overridden by modifying $.fn.Checkbox.settings.
+      <br><div class="code">$.fn.Checkbox.settings.moduleName = 'Godzilla';</div>
+    </li>
+    <li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. 
+      <br><div class="code">$('.foo').checkbox('setting', 'moduleName', 'Godzilla');</div>
+    </li>
+  </ol>
+  <h3>Reading Settings</h3>
+  <p>Settings can also be read programmatically: <div class="code">$('.foo').checkbox('setting', 'moduleName');</div>
+  <h3>Defaults</h3>
+    <table class="ui settings table">
+      <thead>
+        <th colspan="3">Callbacks</th>
+      </thead>
+      <tr>
+        <td>onChange</td>
+        <td>None</td>
+        <td>Callback after a checkbox is either disabled or enabled.</td>
+      </tr>
+      <tr>
+        <td>onEnable</td>
+        <td>None</td>
+        <td>Callback after a checkbox is enabled.</td>
+      </tr>
+      <tr>
+        <td>onDisable</td>
+        <td>None</td>
+        <td>Callback after a checkbox is disabled.</td>
+      </tr>
+    </table>
+    <table class="ui settings table">
+      <thead>
+        <th colspan="3">UI Module Settings</th>
+      </thead>
+      <tr>
+        <td>moduleName</td>
+        <td>Checkbox</td>
+        <td>Name used in debug logs</td>
+      </tr>
+      <tr>
+        <td>debug</td>
+        <td>True</td>
+        <td>Provides standard debug output to console</td>
+      </tr>
+      <tr>
+        <td>performance</td>
+        <td>False</td>
+        <td>Provides standard debug output to console</td>
+      </tr>
+      <tr>
+        <td>verbose</td>
+        <td>False</td>
+        <td>Provides ancillary debug output to console</td>
+      </tr>
+      <tr>
+        <td>namespace</td>
+        <td>checkbox</td>
+        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
+      </tr>
+      <tr>
+        <td>errors</td>
+        <td colspan="2">
+            <div class="code">errors     : {
+  method   : 'The method you called is not defined.'
+}</div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/node/src/files/components/semantic/src/elements/button.css b/node/src/files/components/semantic/src/elements/button.css
index 101e50235..42652a2a9 100644
--- a/node/src/files/components/semantic/src/elements/button.css
+++ b/node/src/files/components/semantic/src/elements/button.css
@@ -32,7 +32,7 @@
   line-height: 1;
   font-weight: bold;
   font-style: normal;
-  
+
   color: #7A7A7A;
   text-align: center;
 
@@ -90,7 +90,7 @@
 *******************************/
 
 /*--------------
-     Hover 
+     Hover
 ---------------*/
 
 .ui.button:hover,
@@ -99,7 +99,7 @@
 }
 
 /*--------------
-  Down (:active) 
+  Down (:active)
 ---------------*/
 
 /* Down */
@@ -113,7 +113,7 @@
 
 
 /*--------------
-     Active 
+     Active
 ---------------*/
 
 .ui.buttons .button.active,
@@ -151,7 +151,7 @@
 }
 
 /*--------------
-    Loading 
+    Loading
 ---------------*/
 
 .ui.button.loading,
@@ -230,7 +230,7 @@
 
 
 /*--------------
-      Error 
+      Error
 ---------------*/
 
 .ui.buttons .button.error,
@@ -268,7 +268,7 @@
   color: #DDDDDD;
   background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
-  
+
   text-shadow: none !important;
 
   -webkit-box-shadow: none !important;
@@ -540,11 +540,11 @@ Containing Icon
 .ui.icon.buttons .button i,
 .ui.icon.button i {
   margin: 0em;
-  vertical-align: text-top;
+  vertical-align: top;
 }
 
 /*--------------
-     Toggle 
+     Toggle
 ---------------*/
 
 /* Toggle (Modifies active state to give affordances) */
@@ -602,62 +602,63 @@ Containing Icon
 .ui.button.attached.top {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: none;
-  
-  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
-  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
-  border-radius: 0.3125em 0.3125em 0px 0px;
+
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
 .ui.button.attached.bottom {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-top: none;
 
-  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
-  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
-  border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
 }
 .ui.button.attached.left {
   display: inline-block;
   border-left: none;
 
+  padding-right: 0.75em;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
-  
-  -webkit-border-radius: 0.3125em 0px 0px 0.3125em;
-  -moz-border-radius: 0.3125em 0px 0px 0.3125em;
-  border-radius: 0.3125em 0px 0px 0.3125em;
+
+  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 0.3125em 0em 0em 0.3125em;
 }
 .ui.button.attached.right {
   display: inline-block;
-  
+
+  padding-left: 0.75em;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 
-  -webkit-border-radius: 0px 0.3125em 0.3125em 0px;
-  -moz-border-radius: 0px 0.3125em 0.3125em 0px;
-  border-radius: 0px 0.3125em 0.3125em 0px;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
 
 /* Button attached to a form element */
 input + .ui.attached.button {
   display: inline-block;
-  min-width: 40px;
-  margin: 0px 0px 0px -15px;
-  height: 14px;
-  padding: 8px 15px;
-  border: 1px solid #D0D0D0;
 
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  margin: 0 0 0 -1em;
+  padding: 0.68em 1em;
+  vertical-align: top;
+
+  font-size: 0.825em;
 
-  -webkit-border-radius: 0px 0.3125em 0.3125em 0px;
-  -moz-border-radius: 0px 0.3125em 0.3125em 0px;
-  border-radius: 0px 0.3125em 0.3125em 0px;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
 
-  vertical-align: top;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
-input + .ui.attached.button.down {
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+input:focus + .ui.attached.button {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
 }
 .ui.attached.button.loading,
 .ui.attached.button.loading.hover {
@@ -921,7 +922,7 @@ input + .ui.attached.button.down {
 
   font-size: 15px;
 }
-.ui.huge.buttons .or:after, 
+.ui.huge.buttons .or:after,
 .ui.buttons .huge.or:after {
   top: 6px;
   width: 6px;
diff --git a/node/src/files/components/semantic/src/modules/checkbox.js b/node/src/files/components/semantic/src/modules/checkbox.js
index 230b77017..75070e183 100644
--- a/node/src/files/components/semantic/src/modules/checkbox.js
+++ b/node/src/files/components/semantic/src/modules/checkbox.js
@@ -72,6 +72,19 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        enableAll: function() {
+          module.debug('Disabling all checkbox');
+          $.each($allModules, function() {
+            $(this).checkbox('enable');
+          });
+        },
+        disableAll: function() {
+          module.debug('Enabling all checkbox');
+          $.each($allModules, function() {
+            $(this).checkbox('disable');
+          });
+        },
+
         enable: function() {
           module.debug('Enabling checkbox');
           $module
diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css
index e6bb25e61..5713337ff 100755
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@@ -561,7 +561,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 
 }
 
-@media only screen and (max-width : 1420px) {
+@media only screen and (max-width : 1600px) {
 
   #example .container {
     width: auto;
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco
index 0279bae2f..54dc1000b 100755
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@@ -131,7 +131,7 @@
       </div>
     </div>
   </div>
-    <div class="ui teal large sidebar right attached button"><i class="icon th-list"></i> Menu</div>
+    <div class="ui teal huge sidebar right attached button"><i class="icon th-list"></i> Menu</div>
   <%- @content %>
 </body>
 
diff --git a/src/elements/button.css b/src/elements/button.css
index 101e50235..42652a2a9 100755
--- a/src/elements/button.css
+++ b/src/elements/button.css
@@ -32,7 +32,7 @@
   line-height: 1;
   font-weight: bold;
   font-style: normal;
-  
+
   color: #7A7A7A;
   text-align: center;
 
@@ -90,7 +90,7 @@
 *******************************/
 
 /*--------------
-     Hover 
+     Hover
 ---------------*/
 
 .ui.button:hover,
@@ -99,7 +99,7 @@
 }
 
 /*--------------
-  Down (:active) 
+  Down (:active)
 ---------------*/
 
 /* Down */
@@ -113,7 +113,7 @@
 
 
 /*--------------
-     Active 
+     Active
 ---------------*/
 
 .ui.buttons .button.active,
@@ -151,7 +151,7 @@
 }
 
 /*--------------
-    Loading 
+    Loading
 ---------------*/
 
 .ui.button.loading,
@@ -230,7 +230,7 @@
 
 
 /*--------------
-      Error 
+      Error
 ---------------*/
 
 .ui.buttons .button.error,
@@ -268,7 +268,7 @@
   color: #DDDDDD;
   background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
-  
+
   text-shadow: none !important;
 
   -webkit-box-shadow: none !important;
@@ -540,11 +540,11 @@ Containing Icon
 .ui.icon.buttons .button i,
 .ui.icon.button i {
   margin: 0em;
-  vertical-align: text-top;
+  vertical-align: top;
 }
 
 /*--------------
-     Toggle 
+     Toggle
 ---------------*/
 
 /* Toggle (Modifies active state to give affordances) */
@@ -602,62 +602,63 @@ Containing Icon
 .ui.button.attached.top {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: none;
-  
-  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
-  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
-  border-radius: 0.3125em 0.3125em 0px 0px;
+
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
 .ui.button.attached.bottom {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-top: none;
 
-  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
-  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
-  border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
 }
 .ui.button.attached.left {
   display: inline-block;
   border-left: none;
 
+  padding-right: 0.75em;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
-  
-  -webkit-border-radius: 0.3125em 0px 0px 0.3125em;
-  -moz-border-radius: 0.3125em 0px 0px 0.3125em;
-  border-radius: 0.3125em 0px 0px 0.3125em;
+
+  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 0.3125em 0em 0em 0.3125em;
 }
 .ui.button.attached.right {
   display: inline-block;
-  
+
+  padding-left: 0.75em;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 
-  -webkit-border-radius: 0px 0.3125em 0.3125em 0px;
-  -moz-border-radius: 0px 0.3125em 0.3125em 0px;
-  border-radius: 0px 0.3125em 0.3125em 0px;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
 
 /* Button attached to a form element */
 input + .ui.attached.button {
   display: inline-block;
-  min-width: 40px;
-  margin: 0px 0px 0px -15px;
-  height: 14px;
-  padding: 8px 15px;
-  border: 1px solid #D0D0D0;
 
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  margin: 0 0 0 -1em;
+  padding: 0.68em 1em;
+  vertical-align: top;
+
+  font-size: 0.825em;
 
-  -webkit-border-radius: 0px 0.3125em 0.3125em 0px;
-  -moz-border-radius: 0px 0.3125em 0.3125em 0px;
-  border-radius: 0px 0.3125em 0.3125em 0px;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
 
-  vertical-align: top;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
-input + .ui.attached.button.down {
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+input:focus + .ui.attached.button {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset;
 }
 .ui.attached.button.loading,
 .ui.attached.button.loading.hover {
@@ -921,7 +922,7 @@ input + .ui.attached.button.down {
 
   font-size: 15px;
 }
-.ui.huge.buttons .or:after, 
+.ui.huge.buttons .or:after,
 .ui.buttons .huge.or:after {
   top: 6px;
   width: 6px;
diff --git a/src/modules/checkbox.js b/src/modules/checkbox.js
index 230b77017..75070e183 100755
--- a/src/modules/checkbox.js
+++ b/src/modules/checkbox.js
@@ -72,6 +72,19 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        enableAll: function() {
+          module.debug('Disabling all checkbox');
+          $.each($allModules, function() {
+            $(this).checkbox('enable');
+          });
+        },
+        disableAll: function() {
+          module.debug('Enabling all checkbox');
+          $.each($allModules, function() {
+            $(this).checkbox('disable');
+          });
+        },
+
         enable: function() {
           module.debug('Enabling checkbox');
           $module