adding more examples for checkbox, fixes to menu

node/src/documents/collections/menu.html

@@ -95,7 +95,7 @@ type   : 'UI Collection'
 
   <div class="example">
     <h4>Header Item</h4>
-    <p>A menu may have a header item to help label sections of a menu.</p>
+    <p>A menu may have a header item to help label sections of a menu. This can also be a <a href="elements/header.html">ui header</a>.</p>
     <div class="ui vertical menu">
       <div class="header item">
         Dogs
@@ -106,14 +106,15 @@ type   : 'UI Collection'
       <div class="item">
         Cockerspaniel
       </div>
-      <div class="header item">
-        Cats
+      <div class="ui red header item">
+        <i class="icon users"></i>
+        Users
       </div>
       <div class="item">
-        Abysinnian
+        Sally
       </div>
       <div class="item">
-        Sphynx
+        Jimmy
       </div>
     </div>
   </div>
@@ -186,7 +187,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Nested Menu</h4>
     <p>A menu may contain another menu nested inside an item that acts as a grouped sub-menu. This is only available when using a vertical menu.</p>
-    <div class="ui compact vertical menu">
+    <div class="ui vertical menu">
       <a class="item"><b>Friends</b></a>
       <div class="item">
         <a><b>Your Profile</b></a>
@@ -292,7 +293,7 @@ type   : 'UI Collection'
       </a>
     </div>
   </div>
-  <div class="example">
+  <div class="another example">
     <div class="ui text vertical menu">
       <div class="header item">Filter By</div>
       <a class="item">

node/src/documents/modules/checkbox.html

@@ -47,6 +47,16 @@ type   : 'UI Module'
     <h4>Form Checkbox</h4>
     <p>A checkbox can be found inside a form</p>
     <div class="ui form segment">
+      <div class="two fields">
+        <div class="field">
+          <label>First Name</label>
+          <input placeholder="First Name" type="text">
+        </div>
+        <div class="field">
+          <label>Last Name</label>
+          <input placeholder="Last Name" type="text">
+        </div>
+      </div>
       <div class="inline field">
         <div class="ui checkbox">
           <input type="checkbox" />
@@ -54,6 +64,7 @@ type   : 'UI Module'
         </div>
         <label>Join Us</label>
       </div>
+      <div class="ui button">Submit</div>
     </div>
   </div>
   
@@ -89,11 +100,12 @@ type   : 'UI Module'
   <h2>Behavior</h2>
 
   <div class="example">
-    <p>A checkbox can be enabled or disabled</p>
+    <p>A checkbox can be enabled, disabled, or toggled.</p>
     <div class="ignore evaluated code">
     $('.enable.button')
       .on('click', function() {
         $(this)
+          .parent()
           .nextAll('.checkbox')
             .checkbox('enable')
         ;
@@ -102,19 +114,68 @@ type   : 'UI Module'
     $('.disable.button')
       .on('click', function() {
         $(this)
+          .parent()
           .nextAll('.checkbox')
             .checkbox('disable')
         ;
       })
     ;
+    $('.toggle.button')
+      .on('click', function() {
+        $(this)
+          .parent()
+          .nextAll('.checkbox')
+            .checkbox('toggle')
+        ;
+      })
+    ;
+    </div>
+    <div class="ui buttons">
+      <div class="ui enable button">Enable</div>
+      <div class="ui disable button">Disable</div>
+      <div class="ui toggle button">Toggle</div>
     </div>
-    <div class="enable positive ui button">Enable</div>
-    <div class="disable negative ui button">Disable</div>
     <br><br>
     <div class="ui checkbox">
       <input type="checkbox" />
       <div class="box"></div>
     </div>
+    <div class="ui checkbox">
+      <input type="checkbox" checked="checked" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" checked="checked" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" checked="checked" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" checked="checked" />
+      <div class="box"></div>
+    </div>
+    <div class="ui checkbox">
+      <input type="checkbox" />
+      <div class="box"></div>
+    </div>
   </div>
 
   <!--

node/src/files/components/semantic/src/collections/message.css

@@ -30,7 +30,12 @@
   -moz-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
 }
-
+.ui.message :first-child {
+  margin-top: 0em;
+}
+.ui.message :last-child {
+  margin-bottom: 0em;
+}
 
 /*--------------
      Content
@@ -47,9 +52,6 @@
   opacity: 0.85;
   margin: 1em 0em;
 }
-.ui.message p:first-child {
-  margin-top: 0em;
-}
 
 /* block with child list */
 .ui.message ul.list {

node/src/files/stylesheets/semantic.css

@@ -274,6 +274,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 }
 #example .main.menu .count {
   font-family: "Hevletica Neue", Arial, sans-serif;
+  font-size: 0.8em;
 }
 
 /* lists */
@@ -432,6 +433,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   position: relative;
 }
 
+#example .another.example {
+  border-top: none;
+}
 #example .example > p {
   color: #888888;
 }