diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html
index 0dc48e928..cfddd9bf8 100755
--- a/node/src/documents/collections/form.html
+++ b/node/src/documents/collections/form.html
@@ -90,7 +90,7 @@ type   : 'UI Collection'
       </div>
     </div>
   </div>
-
+  
   <div class="example">
     <h4>Checkbox</h4>
     <p>Checkboxes are styled forms of standard form checkboxes.</p>
@@ -112,6 +112,29 @@ type   : 'UI Collection'
     </div>
   </div>
   
+  <div class="example">
+    <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>
+        <div class="field">
+          <label>Choice #2</label>
+          <div class="ui radio checkbox">
+            <input type="radio" name="example" />
+            <label></label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
   <div class="example">
     <h4>Text Block</h4>
     <p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p>
diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html
index 5fed42abf..b9577fba8 100755
--- a/node/src/documents/collections/menu.html
+++ b/node/src/documents/collections/menu.html
@@ -260,6 +260,22 @@ type   : 'UI Collection'
       </div>
     </div>
   </div>
+  
+  <div class="example">
+    <h4>Basic</h4>
+    <p>A menu may reduce its complexity to blend in with a page</p>
+    <div class="ui basic menu">
+      <div class="item">
+        Section 1
+      </div>
+      <div class="item">
+        Section 2
+      </div>
+      <div class="item">
+        Section 3
+      </div>
+    </div>
+  </div>
 
   <div class="example">
     <h4>Colors</h4>
diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html
index b0c37d6a7..ada25d652 100755
--- a/node/src/documents/elements/button.html
+++ b/node/src/documents/elements/button.html
@@ -126,8 +126,13 @@ type   : 'UI Element'
   <div class="example">
     <h4>Colors</h4>
     <p>Can have different colors:</p>
-    <div class="blue ui button">Blue Button</div>
-    <div class="purple ui button">Purple Button</div>
+    <a class="ui black button">Black Button</a>
+    <a class="ui green button">Green BUtton</a>
+    <a class="ui red button">Red Button</a>
+    <a class="ui blue button">Blue Button</a>
+    <br><br>
+    <a class="ui purple button">Purple Button</a>
+    <a class="ui teal button">Teal Button</a>
   </div>
   
   <h4>Feedback</h4>
@@ -169,7 +174,7 @@ type   : 'UI Element'
     <h4>Horizontally Attached</h4>
     <p>Can be attached to the left or right of other content</p>
     <div class="ui left attached button">Left</div>
-    <div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 34px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
+    <div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 38px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
     <div class="ui right attached button">Right</div>
   </div>
 
diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html
index 7a233711d..9d6e1c938 100755
--- a/node/src/documents/elements/label.html
+++ b/node/src/documents/elements/label.html
@@ -43,8 +43,8 @@ type   : 'UI Element'
   <div class="example">
     <h4>Attached Label</h4>
     <p>A label attached to a content segment</p>
-    <div class="ui two split grid">
-      <div class="division">
+    <div class="ui two column grid">
+      <div class="column">
         <div class="ui segment">
           <div class="ui attached label">Top Left</div>
           <div class="ui right attached label">Top Right</div>
@@ -53,7 +53,7 @@ type   : 'UI Element'
           <p style="margin:40px 0px;">Hey let's look at labels.</p>
         </div>
       </div>
-      <div class="division">
+      <div class="column">
         <div class="ui segment">
           <div class="ui black attached label">Existing Users</div>
           <div class="ui fluid form">
diff --git a/node/src/files/components/semantic/src/collections/form.css b/node/src/files/components/semantic/src/collections/form.css
index 2e804352b..3ae6bc0eb 100644
--- a/node/src/files/components/semantic/src/collections/form.css
+++ b/node/src/files/components/semantic/src/collections/form.css
@@ -21,17 +21,17 @@
 
 .ui.form {
   position: relative;
-  width: 450px;
+  width: 35em;
 }
 .ui.form :first-child {
-  margin-top: 0px;
+  margin-top: 0em;
 }
 
 /*--------------------
         Content
 ---------------------*/
 
-.ui.form p {
+.ui.form > p {
   margin: 1em 0;
 }
 
@@ -75,11 +75,12 @@
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
 
+
   color: #555555;
 
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 
   -webkit-transition: background-color 0.3s ease-out;
   -moz-transition: background-color 0.3s ease-out;
@@ -97,9 +98,10 @@
 
 .ui.textarea,
 .ui.form textarea {
-  min-height: 67px;
-  height: 101px;
-  max-height: 202px;
+  line-height: 1.33;
+  min-height: 8em;
+  height: 12em;
+  max-height: 24em;
   resize: vertical;
 }
 .ui.form select {
@@ -147,10 +149,8 @@
 
 .ui.form input:focus,
 .ui.form textarea:focus {
-  color: #222222;
-  background-color: #FFFFFF;
-  border-color: rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset;
+  color: rgba(20, 20, 20, 0.9);
+  border-color: rgba(0, 0, 0, 0.3);
 }
 
 /*--------------------
diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css
index eef615161..dea7c7ef9 100644
--- a/node/src/files/components/semantic/src/collections/menu.css
+++ b/node/src/files/components/semantic/src/collections/menu.css
@@ -216,7 +216,7 @@
 
 
 /*--------------
-      Header
+     Header
 ---------------*/
 
 .ui.menu .header.item {
@@ -229,7 +229,6 @@
 }
 
 
-
 /*--------------
     Dropdowns
 ---------------*/
@@ -411,16 +410,9 @@
 
 
 /*--------------
-     Colors
+    Inverted
 ---------------*/
 
-/* Light Colors */
-.ui.grey.menu {
-  background-color: #F0F0F0;
-}
-
-
-/*--- inverted ---*/
 .ui.inverted.menu {
   background-color: #333333;
   box-shadow: none;
@@ -436,14 +428,6 @@
 .ui.inverted.menu .item > a {
   color: #FFFFFF;
 }
-.ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .item.hover,
-.ui.inverted.menu .link.item:hover,
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item.hover,
-.ui.inverted.menu .dropdown.item:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-}
 .ui.inverted.menu .item .item,
 .ui.inverted.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
@@ -456,48 +440,53 @@
 .ui.inverted.menu .dropdown.item .menu .item a {
   color: rgba(0, 0, 0, 0.75);
 }
-.ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu a.item.hover,
-.ui.inverted.menu .item .menu .link.item:hover,
-.ui.inverted.menu .item .menu .link.item.hover {
-  color: rgba(255, 255, 255, 1);
-}
-.ui.inverted.menu .item.active,
-.ui.inverted.menu .item.active a {
-  color: rgba(255, 255, 255, 1);
+
+
+/*--------------
+     Colors
+---------------*/
+
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
 }
 
-/*--- inverted Colors  ---*/
+/*--- Inverted Colors  ---*/
 .ui.inverted.green.menu {
   background-color: #A1CF64;
 }
 .ui.inverted.green.pointing.menu .item.active:after {
   background-color: #A1CF64;
 }
+
 .ui.inverted.red.menu {
   background-color: #EF4D6D;
 }
 .ui.inverted.red.pointing.menu .item.active:after {
   background-color: #F16883;
 }
+
 .ui.inverted.blue.menu {
   background-color: #6ECFF5;
 }
 .ui.inverted.blue.pointing.menu .item.active:after {
   background-color: #6ECFF5;
 }
+
 .ui.inverted.purple.menu {
   background-color: #564F8A;
 }
 .ui.inverted.purple.pointing.menu .item.active:after {
   background-color: #564F8A;
 }
+
 .ui.inverted.orange.menu {
   background-color: #F05940;
 }
 .ui.inverted.orange.pointing.menu .item.active:after {
   background-color: #F05940;
 }
+
 .ui.inverted.teal.menu {
   background-color: #00B5AD;
 }
@@ -574,12 +563,30 @@
   -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
 }
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .dropdown.item.hover,
+.ui.inverted.menu .dropdown.item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.ui.inverted.menu .item .menu a.item:hover,
+.ui.inverted.menu .item .menu a.item.hover,
+.ui.inverted.menu .item .menu .link.item:hover,
+.ui.inverted.menu .item .menu .link.item.hover {
+  color: rgba(255, 255, 255, 1);
+}
 
 /*--- Active ---*/
 .ui.inverted.menu .item.active {
   border-color: transparent;
   background-color: rgba(255, 255, 255, 0.15);
 }
+.ui.inverted.menu .item.active,
+.ui.inverted.menu .item.active a {
+  color: rgba(255, 255, 255, 1);
+}
 
 /*--- Pointers ---*/
 .ui.inverted.pointing.menu .item.active:after {
@@ -590,13 +597,22 @@
   background-color: #3B3B3B;
 }
 
-
 /*--------------
-  Transparent
+     Basic
 ---------------*/
-
-.ui.transparent.menu {
-  opacity: 0.95;
+.ui.basic.menu {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.basic.menu .item {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.basic.menu .item:before {
+  display: none;
 }
 
 /*--------------
diff --git a/node/src/files/components/semantic/src/elements/button.css b/node/src/files/components/semantic/src/elements/button.css
index 9f9a19e77..101e50235 100644
--- a/node/src/files/components/semantic/src/elements/button.css
+++ b/node/src/files/components/semantic/src/elements/button.css
@@ -25,9 +25,9 @@
 
   background-color: #F0F0F0;
 
-  padding: 12px 30px;
+  padding: 0.8em 1.5em;
 
-  font-size: 14px;
+  font-size: 1em;
   text-transform: uppercase;
   line-height: 1;
   font-weight: bold;
@@ -36,18 +36,18 @@
   color: #7A7A7A;
   text-align: center;
 
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 
   -webkit-box-shadow:
-    0px -2px 0px rgba(0, 0, 0, 0.1) inset
+    0em -0.125em 0em rgba(0, 0, 0, 0.1) inset
   ;
   -moz-box-shadow:
-    0px -2px 0px rgba(0, 0, 0, 0.1) inset
+    0em -0.125em 0em rgba(0, 0, 0, 0.1) inset
   ;
   box-shadow:
-    0px -2px 0px rgba(0, 0, 0, 0.1) inset
+    0em -0.125em 0em rgba(0, 0, 0, 0.1) inset
   ;
 
   -webkit-user-select: none;
@@ -93,8 +93,9 @@
      Hover 
 ---------------*/
 
+.ui.button:hover,
 .ui.button.hover {
-  background-color: #DDDDDD;
+  background-color: #E0E0E0;
 }
 
 /*--------------
@@ -102,10 +103,12 @@
 ---------------*/
 
 /* Down */
+.ui.button:active,
 .ui.button.down {
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
+  background-color: #DDDDDD;
+  -webkit-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
 }
 
 
@@ -117,13 +120,13 @@
 .ui.button.active {
   background-color: #E6E6E6;
   -webkit-box-shadow:
-    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
+    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
   -moz-box-shadow:
-    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
+    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
   box-shadow:
-    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
+    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
 }
 .ui.buttons .button.active,
@@ -135,14 +138,15 @@
 .ui.buttons .button.active.hover,
 .ui.button.active.hover {
   background: #E0E0E0;
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
+  -webkit-box-shadow: 0px 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
 }
 .ui.buttons .button.active.hover,
 .ui.buttons .button.active.hover a,
 .ui.button.active.hover,
 .ui.button.active.hover a {
+  background: #DADADA;
   color: #555555;
 }
 
@@ -171,8 +175,8 @@
 }
 .ui.button.loading:after {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0em;
+  left: 0em;
   width: 100%;
   height: 100%;
   content: '';
@@ -180,9 +184,9 @@
   background-position: 50% 50%;
   background-repeat: no-repeat;
 
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 0.3125em;
+  -webkit-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
 /* Opposite color loader */
 .ui.grey.button.loading,
@@ -278,161 +282,224 @@
 *******************************/
 
 
-/*---------------
-      Blue
-----------------*/
+/*--- Black ---*/
+.ui.buttons.black .button,
+.ui.button.black {
+  background-color: #5C6166;
+  color: #FFFFFF;
+}
+.ui.buttons.black .button.hover,
+.ui.buttons.black .button:hover,
+.ui.button.black.hover,
+.ui.button.black:hover {
+  background-color: #888888;
+  color: #FFFFFF;
+}
+.ui.buttons.black .button.down,
+.ui.buttons.black .button:active,
+.ui.button.black.down,
+.ui.button.black:active {
+  background-color: #888888;
+  color: #FFFFFF;
+}
 
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #00B4AC;
+/*--- Green ---*/
+.ui.buttons.green .button,
+.ui.button.green {
+  background-color: #A1CF64;
   color: #FFFFFF;
 }
-.ui.blue.buttons .button.hover,
-.ui.blue.button.hover {
-  background-color: #F15B40;
+.ui.buttons.green .button.hover,
+.ui.buttons.green .button:hover,
+.ui.button.green.hover,
+.ui.button.green:hover {
+  background-color: #89B84C;
+  color: #FFFFFF;
 }
-.ui.blue.buttons .button.down,
-.ui.blue.button.down {
-  background-color: #F15B40;
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
+.ui.buttons.green .button.down,
+.ui.buttons.green .button:active,
+.ui.button.green.down,
+.ui.button.green:active {
+  background-color: #89B84C;
+  color: #FFFFFF;
 }
 
-/*---------------
-    Purple
-----------------*/
+/*--- Red ---*/
+.ui.buttons.red .button,
+.ui.button.red {
+  background-color: #EF4D6D;
+  color: #FFFFFF;
+}
+.ui.buttons.red .button.hover,
+.ui.buttons.red .button:hover,
+.ui.button.red.hover,
+.ui.button.red:hover {
+  background-color: #DE3859;
+  color: #FFFFFF;
+}
+.ui.buttons.red .button.down,
+.ui.buttons.red .button:active,
+.ui.button.red.down,
+.ui.button.red:active {
+  background-color: #DE3859;
+  color: #FFFFFF;
+}
 
-.ui.purple.buttons .button,
-.ui.purple.button {
+/*--- Blue ---*/
+.ui.buttons.blue .button,
+.ui.button.blue {
+  background-color: #6ECFF5;
   color: #FFFFFF;
-  background-color: #6E4889;
 }
-.ui.purple.buttons .button.hover,
-.ui.purple.button.hover {
-  background-color: #62397F;
+.ui.buttons.blue .button.hover,
+.ui.buttons.blue .button:hover,
+.ui.button.blue.hover,
+.ui.button.blue:hover {
+  background-color: #1AB8F3;
+  color: #FFFFFF;
+}
+.ui.buttons.blue .button.down,
+.ui.buttons.blue .button:active,
+.ui.button.blue.down,
+.ui.button.blue:active {
+  background-color: #1AB8F3;
+  color: #FFFFFF;
+}
+
+/*--- Purple ---*/
+.ui.buttons.purple .button,
+.ui.button.purple {
+  background-color: #564F8A;
+  color: #FFFFFF;
 }
-.ui.purple.buttons .button.down,
-.ui.purple.button.down {
-  background-color: #9254BD;
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
+.ui.buttons.purple .button.hover,
+.ui.buttons.purple .button:hover,
+.ui.button.purple.hover,
+.ui.button.purple:hover {
+  background-color: #3E3773;
+  color: #FFFFFF;
+}
+.ui.buttons.purple .button.down,
+.ui.buttons.purple .button:active,
+.ui.button.purple.down,
+.ui.button.purple:active {
+  background-color: #3E3773;
+  color: #FFFFFF;
+}
+
+/*--- Teal ---*/
+.ui.buttons.teal .button,
+.ui.button.teal {
+  background-color: #00B5AD;
+  color: #FFFFFF;
+}
+.ui.buttons.teal .button.hover,
+.ui.buttons.teal .button:hover,
+.ui.button.teal.hover,
+.ui.button.teal:hover {
+  background-color: #009A93;
+  color: #FFFFFF;
+}
+.ui.buttons.teal .button.down,
+.ui.buttons.teal .button:active,
+.ui.button.teal.down,
+.ui.button.teal:active {
+  background-color: #009A93;
+  color: #FFFFFF;
 }
 
 /*---------------
-Green / Positive
+    Positive
 ----------------*/
 
-.ui.button.green,
+.ui.buttons.positive .button,
 .ui.button.positive {
-  background-color: #7DDC5C;
+  background-color: #A1CF64;
   color: #FFFFFF;
 }
-
-.ui.button.green.hover,
-.ui.button.positive.hover {
-  background-color: #7FE95A;
+.ui.buttons.positive .button.hover,
+.ui.buttons.positive .button:hover,
+.ui.button.positive.hover,
+.ui.button.positive:hover {
+  background-color: #7DDC5C;
   color: #FFFFFF;
 }
-
-.ui.button.green.down,
-.ui.button.positive.down {
-  background-color: #59B94B;
+.ui.buttons.positive .button.down,
+.ui.buttons.positive .button:active,
+.ui.button.positive.down,
+.ui.button.positive:active {
+  background-color: #7DDC5C;
   color: #FFFFFF;
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
 }
 
 
 /*---------------
-  Red / Negative
+     Negative
 ----------------*/
 
-.ui.button.red,
+.ui.buttons.negative .button,
 .ui.button.negative {
-  background-color: #EF3F49;
+  background-color: #EF4D6D;
   color: #FFFFFF;
 }
-
-.ui.button.red.hover,
-.ui.button.negative.hover {
-  background-color: #FE313C;
+.ui.buttons.negative .button.hover,
+.ui.buttons.negative .button:hover,
+.ui.button.negative.hover,
+.ui.button.negative:hover {
+  background-color: #DE3859;
   color: #FFFFFF;
 }
-
-.ui.button.red.down,
-.ui.button.negative.down {
-  background-color: #DC323C;
+.ui.buttons.negative .button.down,
+.ui.buttons.negative .button:active,
+.ui.button.negative.down,
+.ui.button.negative:active {
+  background-color: #DE3859;
   color: #FFFFFF;
 }
 
 /*-------------------
-       Sizes
+        Sizes
 --------------------*/
 
 .ui.buttons.mini .button,
 .ui.mini.button {
-  font-size: 9px;
-  padding: 4px 5px;
-  border-radius: 3px;
-}
-.ui.buttons.mini .button i,
-.ui.mini.button i {
-  vertical-align: top;
+  font-size: 0.5625em;
 }
 .ui.tiny.buttons .button,
 .ui.tiny.button {
-  font-size: 11px;
-  font-weight: bold;
-  padding: 8px 15px;
+  font-size: 0.625em;
 }
 .ui.small.buttons .button,
 .ui.small.button {
-  font-size: 12px;
-  padding: 10px 20px;
+  font-size: 0.75em;
 }
-.ui.medium.buttons .button,
-.ui.medium.button {
-  font-size: 14px;
-  padding: 12px 30px;
+.ui.buttons .button,
+.ui.button {
+  font-size: 1em;
 }
 .ui.large.buttons .button,
 .ui.large.button {
-  font-size: 16px;
-  padding: 15px 30px;
+  font-size: 1.125em;
 }
 .ui.big.buttons .button,
 .ui.big.button {
-  font-size: 18px;
-  padding: 15px 30px;
+  font-size: 1.25em;
 }
 .ui.huge.buttons .button,
 .ui.huge.button {
-  font-size: 20px;
-  padding: 18px 30px;
+  font-size: 1.375em;
 }
 .ui.massive.buttons .button,
 .ui.massive.button {
-  padding: 20px 45px;
-
-  font-size: 24px;
+  font-size: 1.5em;
   font-weight: bold;
 }
 .ui.gigantic.buttons .button,
 .ui.gigantic.button {
-  padding: 18px 45px;
-
-  font-size: 30px;
+  font-size: 2em;
   font-weight: bold;
 }
 
-.ui.mini.button,
-.ui.tiny.button {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
 
 /*--------------
 Containing Icon
@@ -467,48 +534,14 @@ Containing Icon
 ---------------*/
 .ui.icon.buttons .button,
 .ui.icon.button {
-  padding: 7px;
+  padding: 0.75em;
   text-align: center;
 }
 .ui.icon.buttons .button i,
 .ui.icon.button i {
-  margin: 0px;
+  margin: 0em;
   vertical-align: text-top;
 }
-/* Image Button Resizes */
-.ui.icon.buttons.mini .button,
-.ui.mini.icon.button {
-  padding: 4px;
-}
-.ui.tiny.icon.buttons .button,
-.ui.tiny.icon.button {
-  padding: 6px;
-}
-.ui.small.icon.buttons .button,
-.ui.small.icon.button {
-  padding: 6px;
-}
-.ui.medium.icon.buttons .button,
-.ui.medium.icon.button {
-  padding: 7px;
-}
-.ui.big.icon.buttons .button,
-.ui.big.icon.button {
-  padding: 10px;
-}
-.ui.huge.icon.buttons .button,
-.ui.huge.icon.button {
-  padding: 11px;
-}
-.ui.massive.icon.buttons .button,
-.ui.massive.icon.button {
-  padding: 15px;
-}
-.ui.gigantic.icon.buttons .button,
-.ui.gigantic.icon.button {
-  padding: 18px;
-}
-
 
 /*--------------
      Toggle 
@@ -553,9 +586,9 @@ Containing Icon
 ---------------*/
 
 .ui.button.bubbly {
-  -webkit-border-radius: 30px;
-  -moz-border-radius: 30px;
-  border-radius: 30px;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  border-radius: 1em;
 }
 
 
@@ -570,17 +603,17 @@ Containing Icon
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: none;
   
-  -webkit-border-radius: 5px 5px 0px 0px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
+  -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;
 }
 .ui.button.attached.bottom {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-top: none;
 
-  -webkit-border-radius: 0px 0px 5px 5px;
-  -moz-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
+  -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;
 }
 .ui.button.attached.left {
   display: inline-block;
@@ -588,18 +621,18 @@ Containing Icon
 
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   
-  -webkit-border-radius: 5px 0px 0px 5px;
-  -moz-border-radius: 5px 0px 0px 5px;
-  border-radius: 5px 0px 0px 5px;
+  -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;
 }
 .ui.button.attached.right {
   display: inline-block;
   
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -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;
 }
 
 /* Button attached to a form element */
@@ -615,9 +648,9 @@ input + .ui.attached.button {
   -moz-box-shadow: none;
   box-shadow: none;
 
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -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;
 
   vertical-align: top;
 }
@@ -648,9 +681,9 @@ input + .ui.attached.button.down {
 .ui.buttons .huge.button,
 .ui.buttons .gigantic.button {
   float: left;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
 }
 .ui.buttons .button:first-child,
 .ui.buttons .mini.button:first-child,
@@ -659,9 +692,9 @@ input + .ui.attached.button.down {
 .ui.buttons .massive.button:first-child,
 .ui.buttons .huge.button:first-child,
 .ui.buttons .gigantic.button:first-child {
-  margin-left: 0px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+  margin-left: 0em;
+  border-top-left-radius: 0.3125em;
+  border-bottom-left-radius: 0.3125em;
 }
 .ui.buttons .button:last-child,
 .ui.buttons .mini.button:last-child,
@@ -670,8 +703,8 @@ input + .ui.attached.button.down {
 .ui.buttons .massive.button:last-child,
 .ui.buttons .huge.button:last-child,
 .ui.buttons .gigantic.button:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-top-right-radius: 0.3125em;
+  border-bottom-right-radius: 0.3125em;
 }
 
 /* Vertical  Style */
@@ -690,9 +723,9 @@ input + .ui.attached.button.down {
 .ui.buttons.vertical .huge.button:first-child,
 .ui.buttons.vertical .gigantic.button:first-child {
   margin-top: 0px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  -webkit-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
+  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
+  border-radius: 0.3125em 0.3125em 0px 0px;
 }
 .ui.buttons.vertical .button:last-child,
 .ui.buttons.vertical .mini.button:last-child,
@@ -701,23 +734,9 @@ input + .ui.attached.button.down {
 .ui.buttons.vertical .massive.button:last-child,
 .ui.buttons.vertical .huge.button:last-child,
 .ui.buttons.vertical .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 5px 5px;
-  -webkit-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
-}
-
-/* Only show multiple borders when changing colors in group */
-.ui.buttons .grey.button + .grey.button,
-.ui.buttons .blue.button + .blue.button,
-.ui.buttons .purple.button + .purple.button,
-.ui.buttons .green.button + .green.button {
-  margin-left: -1px;
-}
-.ui.vertical.buttons .grey.button + .grey.button,
-.ui.vertical.buttons .blue.button + .blue.button,
-.ui.vertical.buttons .purple.button + .purple.button,
-.ui.vertical.buttons .green.button + .green.button {
-  margin-top: -1px;
+  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
+  border-radius: 0px 0px 0.3125em 0.3125em;
 }
 
 /*******************************
diff --git a/node/src/files/components/semantic/src/modules/checkbox.css b/node/src/files/components/semantic/src/modules/checkbox.css
index d447642d9..59321353e 100644
--- a/node/src/files/components/semantic/src/modules/checkbox.css
+++ b/node/src/files/components/semantic/src/modules/checkbox.css
@@ -6,33 +6,60 @@
     Standard
 ---------------*/
 
+
+/*--- Content ---*/
 .ui.checkbox {
   position: relative;
   display: inline-block;
+
+  width: 1em;
+  height: 1em;
   vertical-align: baseline;
 }
 .ui.checkbox input {
   visibility: hidden;
 }
+
+
+/*--- Box ---*/
 .ui.checkbox label {
   cursor: pointer;
   position: absolute;
-  bottom: 0;
-  left: 0px;
+  width: 1em;
+  height: 1em;
+  bottom: 0em;
+  left: 0em;
   border-radius: 4px;
 
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  background: #fcfff4;
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  
+  background: #FCFFF4;
 
-  background: -webkit-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: -moz-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: -o-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: -ms-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
+  -webkit-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  -moz-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  -o-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  -ms-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
 }
+
+/*--- Checkbox ---*/
 .ui.checkbox label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
@@ -40,7 +67,7 @@
   content: '';
   position: absolute;
   background: transparent;
-  border: 3px solid #333333;
+  border: 0.2em solid #333333;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
@@ -49,51 +76,53 @@
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
+.ui.checkbox label:after {
+  width: 0.5em;
+  height: 0.2em;
+  top: 0.25em;
+  left: 0.2em;  
+}
+
+
+/*******************************
+           States
+*******************************/
+
+
+
+/*--- Hover ---*/
 .ui.checkbox label:hover {
-  background-color: #FAFAFA;
-  background: -webkit-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: -moz-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: -o-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: -ms-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
+  background-color: rgba(0, 0, 0, 0.02);
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+}
+
+
+/*--- Down ---*/
+.ui.checkbox label:active {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
+
+/*--- Active ---*/
 .ui.checkbox input:checked + label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 
-/* States */
+
+/*--- Disabled ---*/
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] + label {
   opacity: 0.4;
 }
 
-/* Resizes */
-.ui.checkbox,
-.ui.checkbox label {
-  width: 16px;
-  height: 16px;
-}
-.ui.checkbox label:after {
-  width: 7px;
-  height: 3px;
-  top: 4px;
-  left: 3px;  
-}
 
-.ui.large.checkbox,
-.ui.large.checkbox label {
-  width: 20px;
-  height: 20px;
-}
-.ui.large.checkbox label:after {
-  width: 9px;
-  height: 5px;
-  top: 4px;
-  left: 4px;
-}
+/*******************************
+          Variations
+*******************************/
 
 
 /*--------------
@@ -126,6 +155,24 @@
   border-radius: 500px;
 }
 
+/*--------------
+     Sizes
+---------------*/
+
+.ui.checkbox,
+.ui.checkbox label {
+  font-size: 1em;
+}
+.ui.large.checkbox,
+.ui.large.checkbox label {
+  font-size: 1.5em;
+}
+.ui.huge.checkbox,
+.ui.huge.checkbox label {
+  font-size: 1.5em;
+}
+
+
 /*--------------
      Rounded
 ---------------*/
@@ -232,22 +279,4 @@
   background: -o-linear-gradient(top, #016286 0%, #00506E 100%);
   background: -ms-linear-gradient(top, #016286 0%, #00506E 100%);
   background: linear-gradient(top, #016286 0%, #00506E 100%);
-}
-
-/* Resizes */
-.ui.large.round.checkbox {
-  width: 28px;
-  height: 28px;
-}
-.ui.large.round.checkbox label {
-  top: 4px;
-  left: 4px;
-  width: 20px;
-  height: 20px;
-}
-.ui.large.round.checkbox label:after {
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
 }
\ No newline at end of file
diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js
index 9e2498671..b45b4efb5 100755
--- a/node/src/files/javascript/semantic.js
+++ b/node/src/files/javascript/semantic.js
@@ -9,6 +9,7 @@ semantic.ready = function() {
   // selector cache
   var
     $ui          = $('.ui').not('.hover, .down'),
+    $checkbox    = $('.ui.checkbox'),
     $swap        = $('.theme.menu .item'),
     $menu        = $('.sidebar.button'),
     $sortTable   = $('.sortable.table'),
@@ -141,7 +142,6 @@ semantic.ready = function() {
         $waypoint = $('h2').eq( $group.index( $header ) ),
         offset    = $waypoint.offset().top - 80
       ;
-      console.log($headers);
       $menu
         .addClass('animating')
       ;
@@ -274,6 +274,11 @@ semantic.ready = function() {
       .on('click', handler.createCode)
   ;
 
+  $checkbox
+    .checkbox()
+  ;
+  console.log($checkbox);
+
   $swap
     .on('click', handler.swapStyle)
   ;
diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css
index 0f2da6637..e6bb25e61 100755
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@@ -289,6 +289,15 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   font-weight: bold;
 }
 
+/*--------------
+  Transparent
+---------------*/
+
+.ui.transparent.menu {
+  opacity: 0.95;
+}
+
+
 
 /* content */
 #example .container {
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco
index 41dd5073a..0279bae2f 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 huge blue sidebar right attached button"><i class="icon th-list"></i> Menu</div>
+    <div class="ui teal large sidebar right attached button"><i class="icon th-list"></i> Menu</div>
   <%- @content %>
 </body>
 
diff --git a/src/collections/form.css b/src/collections/form.css
index 2e804352b..3ae6bc0eb 100755
--- a/src/collections/form.css
+++ b/src/collections/form.css
@@ -21,17 +21,17 @@
 
 .ui.form {
   position: relative;
-  width: 450px;
+  width: 35em;
 }
 .ui.form :first-child {
-  margin-top: 0px;
+  margin-top: 0em;
 }
 
 /*--------------------
         Content
 ---------------------*/
 
-.ui.form p {
+.ui.form > p {
   margin: 1em 0;
 }
 
@@ -75,11 +75,12 @@
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
 
+
   color: #555555;
 
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 
   -webkit-transition: background-color 0.3s ease-out;
   -moz-transition: background-color 0.3s ease-out;
@@ -97,9 +98,10 @@
 
 .ui.textarea,
 .ui.form textarea {
-  min-height: 67px;
-  height: 101px;
-  max-height: 202px;
+  line-height: 1.33;
+  min-height: 8em;
+  height: 12em;
+  max-height: 24em;
   resize: vertical;
 }
 .ui.form select {
@@ -147,10 +149,8 @@
 
 .ui.form input:focus,
 .ui.form textarea:focus {
-  color: #222222;
-  background-color: #FFFFFF;
-  border-color: rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset;
+  color: rgba(20, 20, 20, 0.9);
+  border-color: rgba(0, 0, 0, 0.3);
 }
 
 /*--------------------
diff --git a/src/collections/menu.css b/src/collections/menu.css
index eef615161..dea7c7ef9 100755
--- a/src/collections/menu.css
+++ b/src/collections/menu.css
@@ -216,7 +216,7 @@
 
 
 /*--------------
-      Header
+     Header
 ---------------*/
 
 .ui.menu .header.item {
@@ -229,7 +229,6 @@
 }
 
 
-
 /*--------------
     Dropdowns
 ---------------*/
@@ -411,16 +410,9 @@
 
 
 /*--------------
-     Colors
+    Inverted
 ---------------*/
 
-/* Light Colors */
-.ui.grey.menu {
-  background-color: #F0F0F0;
-}
-
-
-/*--- inverted ---*/
 .ui.inverted.menu {
   background-color: #333333;
   box-shadow: none;
@@ -436,14 +428,6 @@
 .ui.inverted.menu .item > a {
   color: #FFFFFF;
 }
-.ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .item.hover,
-.ui.inverted.menu .link.item:hover,
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item.hover,
-.ui.inverted.menu .dropdown.item:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-}
 .ui.inverted.menu .item .item,
 .ui.inverted.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
@@ -456,48 +440,53 @@
 .ui.inverted.menu .dropdown.item .menu .item a {
   color: rgba(0, 0, 0, 0.75);
 }
-.ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu a.item.hover,
-.ui.inverted.menu .item .menu .link.item:hover,
-.ui.inverted.menu .item .menu .link.item.hover {
-  color: rgba(255, 255, 255, 1);
-}
-.ui.inverted.menu .item.active,
-.ui.inverted.menu .item.active a {
-  color: rgba(255, 255, 255, 1);
+
+
+/*--------------
+     Colors
+---------------*/
+
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
 }
 
-/*--- inverted Colors  ---*/
+/*--- Inverted Colors  ---*/
 .ui.inverted.green.menu {
   background-color: #A1CF64;
 }
 .ui.inverted.green.pointing.menu .item.active:after {
   background-color: #A1CF64;
 }
+
 .ui.inverted.red.menu {
   background-color: #EF4D6D;
 }
 .ui.inverted.red.pointing.menu .item.active:after {
   background-color: #F16883;
 }
+
 .ui.inverted.blue.menu {
   background-color: #6ECFF5;
 }
 .ui.inverted.blue.pointing.menu .item.active:after {
   background-color: #6ECFF5;
 }
+
 .ui.inverted.purple.menu {
   background-color: #564F8A;
 }
 .ui.inverted.purple.pointing.menu .item.active:after {
   background-color: #564F8A;
 }
+
 .ui.inverted.orange.menu {
   background-color: #F05940;
 }
 .ui.inverted.orange.pointing.menu .item.active:after {
   background-color: #F05940;
 }
+
 .ui.inverted.teal.menu {
   background-color: #00B5AD;
 }
@@ -574,12 +563,30 @@
   -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
 }
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .dropdown.item.hover,
+.ui.inverted.menu .dropdown.item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.ui.inverted.menu .item .menu a.item:hover,
+.ui.inverted.menu .item .menu a.item.hover,
+.ui.inverted.menu .item .menu .link.item:hover,
+.ui.inverted.menu .item .menu .link.item.hover {
+  color: rgba(255, 255, 255, 1);
+}
 
 /*--- Active ---*/
 .ui.inverted.menu .item.active {
   border-color: transparent;
   background-color: rgba(255, 255, 255, 0.15);
 }
+.ui.inverted.menu .item.active,
+.ui.inverted.menu .item.active a {
+  color: rgba(255, 255, 255, 1);
+}
 
 /*--- Pointers ---*/
 .ui.inverted.pointing.menu .item.active:after {
@@ -590,13 +597,22 @@
   background-color: #3B3B3B;
 }
 
-
 /*--------------
-  Transparent
+     Basic
 ---------------*/
-
-.ui.transparent.menu {
-  opacity: 0.95;
+.ui.basic.menu {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.basic.menu .item {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.basic.menu .item:before {
+  display: none;
 }
 
 /*--------------
diff --git a/src/elements/button.css b/src/elements/button.css
index 9f9a19e77..101e50235 100755
--- a/src/elements/button.css
+++ b/src/elements/button.css
@@ -25,9 +25,9 @@
 
   background-color: #F0F0F0;
 
-  padding: 12px 30px;
+  padding: 0.8em 1.5em;
 
-  font-size: 14px;
+  font-size: 1em;
   text-transform: uppercase;
   line-height: 1;
   font-weight: bold;
@@ -36,18 +36,18 @@
   color: #7A7A7A;
   text-align: center;
 
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 
   -webkit-box-shadow:
-    0px -2px 0px rgba(0, 0, 0, 0.1) inset
+    0em -0.125em 0em rgba(0, 0, 0, 0.1) inset
   ;
   -moz-box-shadow:
-    0px -2px 0px rgba(0, 0, 0, 0.1) inset
+    0em -0.125em 0em rgba(0, 0, 0, 0.1) inset
   ;
   box-shadow:
-    0px -2px 0px rgba(0, 0, 0, 0.1) inset
+    0em -0.125em 0em rgba(0, 0, 0, 0.1) inset
   ;
 
   -webkit-user-select: none;
@@ -93,8 +93,9 @@
      Hover 
 ---------------*/
 
+.ui.button:hover,
 .ui.button.hover {
-  background-color: #DDDDDD;
+  background-color: #E0E0E0;
 }
 
 /*--------------
@@ -102,10 +103,12 @@
 ---------------*/
 
 /* Down */
+.ui.button:active,
 .ui.button.down {
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
+  background-color: #DDDDDD;
+  -webkit-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0.125em 0.125em 0.125em 0 rgba(0, 0, 0, 0.1) inset;
 }
 
 
@@ -117,13 +120,13 @@
 .ui.button.active {
   background-color: #E6E6E6;
   -webkit-box-shadow:
-    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
+    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
   -moz-box-shadow:
-    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
+    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
   box-shadow:
-    0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
+    0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
 }
 .ui.buttons .button.active,
@@ -135,14 +138,15 @@
 .ui.buttons .button.active.hover,
 .ui.button.active.hover {
   background: #E0E0E0;
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
+  -webkit-box-shadow: 0px 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0em 0.0625 0.1875em 0em rgba(0, 0, 0, 0.2) inset;
 }
 .ui.buttons .button.active.hover,
 .ui.buttons .button.active.hover a,
 .ui.button.active.hover,
 .ui.button.active.hover a {
+  background: #DADADA;
   color: #555555;
 }
 
@@ -171,8 +175,8 @@
 }
 .ui.button.loading:after {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0em;
+  left: 0em;
   width: 100%;
   height: 100%;
   content: '';
@@ -180,9 +184,9 @@
   background-position: 50% 50%;
   background-repeat: no-repeat;
 
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 0.3125em;
+  -webkit-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
 /* Opposite color loader */
 .ui.grey.button.loading,
@@ -278,161 +282,224 @@
 *******************************/
 
 
-/*---------------
-      Blue
-----------------*/
+/*--- Black ---*/
+.ui.buttons.black .button,
+.ui.button.black {
+  background-color: #5C6166;
+  color: #FFFFFF;
+}
+.ui.buttons.black .button.hover,
+.ui.buttons.black .button:hover,
+.ui.button.black.hover,
+.ui.button.black:hover {
+  background-color: #888888;
+  color: #FFFFFF;
+}
+.ui.buttons.black .button.down,
+.ui.buttons.black .button:active,
+.ui.button.black.down,
+.ui.button.black:active {
+  background-color: #888888;
+  color: #FFFFFF;
+}
 
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #00B4AC;
+/*--- Green ---*/
+.ui.buttons.green .button,
+.ui.button.green {
+  background-color: #A1CF64;
   color: #FFFFFF;
 }
-.ui.blue.buttons .button.hover,
-.ui.blue.button.hover {
-  background-color: #F15B40;
+.ui.buttons.green .button.hover,
+.ui.buttons.green .button:hover,
+.ui.button.green.hover,
+.ui.button.green:hover {
+  background-color: #89B84C;
+  color: #FFFFFF;
 }
-.ui.blue.buttons .button.down,
-.ui.blue.button.down {
-  background-color: #F15B40;
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
+.ui.buttons.green .button.down,
+.ui.buttons.green .button:active,
+.ui.button.green.down,
+.ui.button.green:active {
+  background-color: #89B84C;
+  color: #FFFFFF;
 }
 
-/*---------------
-    Purple
-----------------*/
+/*--- Red ---*/
+.ui.buttons.red .button,
+.ui.button.red {
+  background-color: #EF4D6D;
+  color: #FFFFFF;
+}
+.ui.buttons.red .button.hover,
+.ui.buttons.red .button:hover,
+.ui.button.red.hover,
+.ui.button.red:hover {
+  background-color: #DE3859;
+  color: #FFFFFF;
+}
+.ui.buttons.red .button.down,
+.ui.buttons.red .button:active,
+.ui.button.red.down,
+.ui.button.red:active {
+  background-color: #DE3859;
+  color: #FFFFFF;
+}
 
-.ui.purple.buttons .button,
-.ui.purple.button {
+/*--- Blue ---*/
+.ui.buttons.blue .button,
+.ui.button.blue {
+  background-color: #6ECFF5;
   color: #FFFFFF;
-  background-color: #6E4889;
 }
-.ui.purple.buttons .button.hover,
-.ui.purple.button.hover {
-  background-color: #62397F;
+.ui.buttons.blue .button.hover,
+.ui.buttons.blue .button:hover,
+.ui.button.blue.hover,
+.ui.button.blue:hover {
+  background-color: #1AB8F3;
+  color: #FFFFFF;
+}
+.ui.buttons.blue .button.down,
+.ui.buttons.blue .button:active,
+.ui.button.blue.down,
+.ui.button.blue:active {
+  background-color: #1AB8F3;
+  color: #FFFFFF;
+}
+
+/*--- Purple ---*/
+.ui.buttons.purple .button,
+.ui.button.purple {
+  background-color: #564F8A;
+  color: #FFFFFF;
 }
-.ui.purple.buttons .button.down,
-.ui.purple.button.down {
-  background-color: #9254BD;
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
+.ui.buttons.purple .button.hover,
+.ui.buttons.purple .button:hover,
+.ui.button.purple.hover,
+.ui.button.purple:hover {
+  background-color: #3E3773;
+  color: #FFFFFF;
+}
+.ui.buttons.purple .button.down,
+.ui.buttons.purple .button:active,
+.ui.button.purple.down,
+.ui.button.purple:active {
+  background-color: #3E3773;
+  color: #FFFFFF;
+}
+
+/*--- Teal ---*/
+.ui.buttons.teal .button,
+.ui.button.teal {
+  background-color: #00B5AD;
+  color: #FFFFFF;
+}
+.ui.buttons.teal .button.hover,
+.ui.buttons.teal .button:hover,
+.ui.button.teal.hover,
+.ui.button.teal:hover {
+  background-color: #009A93;
+  color: #FFFFFF;
+}
+.ui.buttons.teal .button.down,
+.ui.buttons.teal .button:active,
+.ui.button.teal.down,
+.ui.button.teal:active {
+  background-color: #009A93;
+  color: #FFFFFF;
 }
 
 /*---------------
-Green / Positive
+    Positive
 ----------------*/
 
-.ui.button.green,
+.ui.buttons.positive .button,
 .ui.button.positive {
-  background-color: #7DDC5C;
+  background-color: #A1CF64;
   color: #FFFFFF;
 }
-
-.ui.button.green.hover,
-.ui.button.positive.hover {
-  background-color: #7FE95A;
+.ui.buttons.positive .button.hover,
+.ui.buttons.positive .button:hover,
+.ui.button.positive.hover,
+.ui.button.positive:hover {
+  background-color: #7DDC5C;
   color: #FFFFFF;
 }
-
-.ui.button.green.down,
-.ui.button.positive.down {
-  background-color: #59B94B;
+.ui.buttons.positive .button.down,
+.ui.buttons.positive .button:active,
+.ui.button.positive.down,
+.ui.button.positive:active {
+  background-color: #7DDC5C;
   color: #FFFFFF;
-  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
-  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
 }
 
 
 /*---------------
-  Red / Negative
+     Negative
 ----------------*/
 
-.ui.button.red,
+.ui.buttons.negative .button,
 .ui.button.negative {
-  background-color: #EF3F49;
+  background-color: #EF4D6D;
   color: #FFFFFF;
 }
-
-.ui.button.red.hover,
-.ui.button.negative.hover {
-  background-color: #FE313C;
+.ui.buttons.negative .button.hover,
+.ui.buttons.negative .button:hover,
+.ui.button.negative.hover,
+.ui.button.negative:hover {
+  background-color: #DE3859;
   color: #FFFFFF;
 }
-
-.ui.button.red.down,
-.ui.button.negative.down {
-  background-color: #DC323C;
+.ui.buttons.negative .button.down,
+.ui.buttons.negative .button:active,
+.ui.button.negative.down,
+.ui.button.negative:active {
+  background-color: #DE3859;
   color: #FFFFFF;
 }
 
 /*-------------------
-       Sizes
+        Sizes
 --------------------*/
 
 .ui.buttons.mini .button,
 .ui.mini.button {
-  font-size: 9px;
-  padding: 4px 5px;
-  border-radius: 3px;
-}
-.ui.buttons.mini .button i,
-.ui.mini.button i {
-  vertical-align: top;
+  font-size: 0.5625em;
 }
 .ui.tiny.buttons .button,
 .ui.tiny.button {
-  font-size: 11px;
-  font-weight: bold;
-  padding: 8px 15px;
+  font-size: 0.625em;
 }
 .ui.small.buttons .button,
 .ui.small.button {
-  font-size: 12px;
-  padding: 10px 20px;
+  font-size: 0.75em;
 }
-.ui.medium.buttons .button,
-.ui.medium.button {
-  font-size: 14px;
-  padding: 12px 30px;
+.ui.buttons .button,
+.ui.button {
+  font-size: 1em;
 }
 .ui.large.buttons .button,
 .ui.large.button {
-  font-size: 16px;
-  padding: 15px 30px;
+  font-size: 1.125em;
 }
 .ui.big.buttons .button,
 .ui.big.button {
-  font-size: 18px;
-  padding: 15px 30px;
+  font-size: 1.25em;
 }
 .ui.huge.buttons .button,
 .ui.huge.button {
-  font-size: 20px;
-  padding: 18px 30px;
+  font-size: 1.375em;
 }
 .ui.massive.buttons .button,
 .ui.massive.button {
-  padding: 20px 45px;
-
-  font-size: 24px;
+  font-size: 1.5em;
   font-weight: bold;
 }
 .ui.gigantic.buttons .button,
 .ui.gigantic.button {
-  padding: 18px 45px;
-
-  font-size: 30px;
+  font-size: 2em;
   font-weight: bold;
 }
 
-.ui.mini.button,
-.ui.tiny.button {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
 
 /*--------------
 Containing Icon
@@ -467,48 +534,14 @@ Containing Icon
 ---------------*/
 .ui.icon.buttons .button,
 .ui.icon.button {
-  padding: 7px;
+  padding: 0.75em;
   text-align: center;
 }
 .ui.icon.buttons .button i,
 .ui.icon.button i {
-  margin: 0px;
+  margin: 0em;
   vertical-align: text-top;
 }
-/* Image Button Resizes */
-.ui.icon.buttons.mini .button,
-.ui.mini.icon.button {
-  padding: 4px;
-}
-.ui.tiny.icon.buttons .button,
-.ui.tiny.icon.button {
-  padding: 6px;
-}
-.ui.small.icon.buttons .button,
-.ui.small.icon.button {
-  padding: 6px;
-}
-.ui.medium.icon.buttons .button,
-.ui.medium.icon.button {
-  padding: 7px;
-}
-.ui.big.icon.buttons .button,
-.ui.big.icon.button {
-  padding: 10px;
-}
-.ui.huge.icon.buttons .button,
-.ui.huge.icon.button {
-  padding: 11px;
-}
-.ui.massive.icon.buttons .button,
-.ui.massive.icon.button {
-  padding: 15px;
-}
-.ui.gigantic.icon.buttons .button,
-.ui.gigantic.icon.button {
-  padding: 18px;
-}
-
 
 /*--------------
      Toggle 
@@ -553,9 +586,9 @@ Containing Icon
 ---------------*/
 
 .ui.button.bubbly {
-  -webkit-border-radius: 30px;
-  -moz-border-radius: 30px;
-  border-radius: 30px;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  border-radius: 1em;
 }
 
 
@@ -570,17 +603,17 @@ Containing Icon
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: none;
   
-  -webkit-border-radius: 5px 5px 0px 0px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
+  -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;
 }
 .ui.button.attached.bottom {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-top: none;
 
-  -webkit-border-radius: 0px 0px 5px 5px;
-  -moz-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
+  -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;
 }
 .ui.button.attached.left {
   display: inline-block;
@@ -588,18 +621,18 @@ Containing Icon
 
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   
-  -webkit-border-radius: 5px 0px 0px 5px;
-  -moz-border-radius: 5px 0px 0px 5px;
-  border-radius: 5px 0px 0px 5px;
+  -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;
 }
 .ui.button.attached.right {
   display: inline-block;
   
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -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;
 }
 
 /* Button attached to a form element */
@@ -615,9 +648,9 @@ input + .ui.attached.button {
   -moz-box-shadow: none;
   box-shadow: none;
 
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -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;
 
   vertical-align: top;
 }
@@ -648,9 +681,9 @@ input + .ui.attached.button.down {
 .ui.buttons .huge.button,
 .ui.buttons .gigantic.button {
   float: left;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
 }
 .ui.buttons .button:first-child,
 .ui.buttons .mini.button:first-child,
@@ -659,9 +692,9 @@ input + .ui.attached.button.down {
 .ui.buttons .massive.button:first-child,
 .ui.buttons .huge.button:first-child,
 .ui.buttons .gigantic.button:first-child {
-  margin-left: 0px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+  margin-left: 0em;
+  border-top-left-radius: 0.3125em;
+  border-bottom-left-radius: 0.3125em;
 }
 .ui.buttons .button:last-child,
 .ui.buttons .mini.button:last-child,
@@ -670,8 +703,8 @@ input + .ui.attached.button.down {
 .ui.buttons .massive.button:last-child,
 .ui.buttons .huge.button:last-child,
 .ui.buttons .gigantic.button:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-top-right-radius: 0.3125em;
+  border-bottom-right-radius: 0.3125em;
 }
 
 /* Vertical  Style */
@@ -690,9 +723,9 @@ input + .ui.attached.button.down {
 .ui.buttons.vertical .huge.button:first-child,
 .ui.buttons.vertical .gigantic.button:first-child {
   margin-top: 0px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  -webkit-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
+  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
+  border-radius: 0.3125em 0.3125em 0px 0px;
 }
 .ui.buttons.vertical .button:last-child,
 .ui.buttons.vertical .mini.button:last-child,
@@ -701,23 +734,9 @@ input + .ui.attached.button.down {
 .ui.buttons.vertical .massive.button:last-child,
 .ui.buttons.vertical .huge.button:last-child,
 .ui.buttons.vertical .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 5px 5px;
-  -webkit-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
-}
-
-/* Only show multiple borders when changing colors in group */
-.ui.buttons .grey.button + .grey.button,
-.ui.buttons .blue.button + .blue.button,
-.ui.buttons .purple.button + .purple.button,
-.ui.buttons .green.button + .green.button {
-  margin-left: -1px;
-}
-.ui.vertical.buttons .grey.button + .grey.button,
-.ui.vertical.buttons .blue.button + .blue.button,
-.ui.vertical.buttons .purple.button + .purple.button,
-.ui.vertical.buttons .green.button + .green.button {
-  margin-top: -1px;
+  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
+  border-radius: 0px 0px 0.3125em 0.3125em;
 }
 
 /*******************************
diff --git a/src/modules/checkbox.css b/src/modules/checkbox.css
index d447642d9..59321353e 100755
--- a/src/modules/checkbox.css
+++ b/src/modules/checkbox.css
@@ -6,33 +6,60 @@
     Standard
 ---------------*/
 
+
+/*--- Content ---*/
 .ui.checkbox {
   position: relative;
   display: inline-block;
+
+  width: 1em;
+  height: 1em;
   vertical-align: baseline;
 }
 .ui.checkbox input {
   visibility: hidden;
 }
+
+
+/*--- Box ---*/
 .ui.checkbox label {
   cursor: pointer;
   position: absolute;
-  bottom: 0;
-  left: 0px;
+  width: 1em;
+  height: 1em;
+  bottom: 0em;
+  left: 0em;
   border-radius: 4px;
 
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  background: #fcfff4;
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  
+  background: #FCFFF4;
 
-  background: -webkit-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: -moz-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: -o-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: -ms-linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  background: linear-gradient(#FFFFFF 0%, #EAEAEA 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
+  -webkit-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  -moz-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  -o-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  -ms-transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
+  transition: 
+    background-color 0.1s ease-out,
+    box-shadow 0.1s ease-out
+  ;
 }
+
+/*--- Checkbox ---*/
 .ui.checkbox label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
@@ -40,7 +67,7 @@
   content: '';
   position: absolute;
   background: transparent;
-  border: 3px solid #333333;
+  border: 0.2em solid #333333;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
@@ -49,51 +76,53 @@
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
+.ui.checkbox label:after {
+  width: 0.5em;
+  height: 0.2em;
+  top: 0.25em;
+  left: 0.2em;  
+}
+
+
+/*******************************
+           States
+*******************************/
+
+
+
+/*--- Hover ---*/
 .ui.checkbox label:hover {
-  background-color: #FAFAFA;
-  background: -webkit-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: -moz-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: -o-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: -ms-linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
-  background: linear-gradient(#FFFFFF 0%, #F6F6F6 100%);
+  background-color: rgba(0, 0, 0, 0.02);
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+}
+
+
+/*--- Down ---*/
+.ui.checkbox label:active {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
+
+/*--- Active ---*/
 .ui.checkbox input:checked + label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 
-/* States */
+
+/*--- Disabled ---*/
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] + label {
   opacity: 0.4;
 }
 
-/* Resizes */
-.ui.checkbox,
-.ui.checkbox label {
-  width: 16px;
-  height: 16px;
-}
-.ui.checkbox label:after {
-  width: 7px;
-  height: 3px;
-  top: 4px;
-  left: 3px;  
-}
 
-.ui.large.checkbox,
-.ui.large.checkbox label {
-  width: 20px;
-  height: 20px;
-}
-.ui.large.checkbox label:after {
-  width: 9px;
-  height: 5px;
-  top: 4px;
-  left: 4px;
-}
+/*******************************
+          Variations
+*******************************/
 
 
 /*--------------
@@ -126,6 +155,24 @@
   border-radius: 500px;
 }
 
+/*--------------
+     Sizes
+---------------*/
+
+.ui.checkbox,
+.ui.checkbox label {
+  font-size: 1em;
+}
+.ui.large.checkbox,
+.ui.large.checkbox label {
+  font-size: 1.5em;
+}
+.ui.huge.checkbox,
+.ui.huge.checkbox label {
+  font-size: 1.5em;
+}
+
+
 /*--------------
      Rounded
 ---------------*/
@@ -232,22 +279,4 @@
   background: -o-linear-gradient(top, #016286 0%, #00506E 100%);
   background: -ms-linear-gradient(top, #016286 0%, #00506E 100%);
   background: linear-gradient(top, #016286 0%, #00506E 100%);
-}
-
-/* Resizes */
-.ui.large.round.checkbox {
-  width: 28px;
-  height: 28px;
-}
-.ui.large.round.checkbox label {
-  top: 4px;
-  left: 4px;
-  width: 20px;
-  height: 20px;
-}
-.ui.large.round.checkbox label:after {
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
 }
\ No newline at end of file