From 8f74ceb2e5d486c6729c068b6e35195f98c4aced Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Mon, 13 May 2013 01:28:17 -0400
Subject: [PATCH] Adds more examples to groups

Former-commit-id: 552cca8f91f2674f96ade0813f5068272efaac3d
Former-commit-id: 8ec643d447d84ab0fc9266d1d4e60822be678665
---
 node/src/documents/collection.html            |  85 ++++++-----
 node/src/documents/element.html               |  24 ++++
 .../semantic/src/collections/items.css        | 133 ++++++++++--------
 node/src/files/stylesheets/semantic.css       |   4 +
 src/collections/items.css                     | 133 ++++++++++--------
 5 files changed, 220 insertions(+), 159 deletions(-)

diff --git a/node/src/documents/collection.html b/node/src/documents/collection.html
index a9324da85..c74752271 100755
--- a/node/src/documents/collection.html
+++ b/node/src/documents/collection.html
@@ -9,72 +9,87 @@ type   : 'Library'
 <div class="segment">
   <div class="container">
     <h1>UI Collection</h1>
-    <p>UI collections are heterogeneous groups of elements with related functions.</p>
+    <p>UI collections are heterogeneous groups of elements<p>
   </div>
 </div>
 <div class="main container">
-    
-  <div class="peek">
-    <div class="ui vertical pointing link menu">
-      <div class="active item">Definition</div>
-      <div class="item">Distinction</div>
-    </div>
-  </div>
-  <h2>Definition</h2>
-  
-  <p>UI collections are groupings that may or may not contain different types of elements inside. For example, some forms may have dropdown boxes, others may have only input fields.</p>
   
   <h2>Types of Collections</h2>
   
   <div class="ui horizontal items">
-    
     <div class="item">
       <div class="image">
-        <div class="ui teal fluid button">Follow</div>
+        <div class="ui fluid form">
+          <div class="field">
+            <label>Name</label>
+            <input class="ui input" placeholder="Name">
+          </div>
+          <div class="field">
+            <label>E-mail</label>
+            <input class="ui input" placeholder="E-mail">
+          </div>
+        </div>
       </div>
       <div class="content">
-        <div class="name">Button</div>
-        <p>A button indicates a possible user action.</p>
+        <a href="/collections/form.html" class="name">Form</a>
+        <p>A form is used to solicit a user response</p>
       </div>
     </div>
     <div class="item">
       <div class="image">
-        <div class="ui large teal label">New</div>
-        <div class="ui large red label">Popular</div><br><br>
-        <div class="ui large orange label">User Favorite</div>
+        <div class="ui three column grid">
+          <div class="column">One</div>
+          <div class="column">Two</div>
+          <div class="column">Three</div>
+        </div>
       </div>
       <div class="content">
-        <div class="name">Label</div>
-        <p>A button indicates a possible user action.</p>
+        <a href="/collections/grid.html" class="name">Grid</a>
+        <p>A grid helps harmonize negative space in a layout</p>
       </div>
     </div>
     <div class="item">
       <div class="image">
-        <div class="ui fluid form">
-          <div class="field">
-            <label>Name</label>
-            <input class="ui input" placeholder="Name">
-          </div>
-          <div class="field">
-            <label>E-mail</label>
-            <input class="ui input" placeholder="E-mail">
-          </div>
+        <div class="ui inverted compact menu">
+          <div class="item">Friends</div>
+          <div class="item">Messages</div>
         </div>
       </div>
       <div class="content">
-        <div class="name">Form</div>
-        <p>A form is used to solicit a user response</p>
+        <a href="/collections/menu.html" class="name">Menu</a>
+        <p>A menu organizes related links</p>
+      </div>
+    </div>
+    <div class="item">
+      <div class="image">
+        <table class="ui table">
+          <thead>
+            <th>Name</th>
+            <th>Status</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>John</td>
+              <td class="positive"><i class="icon check"></i> Approved</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="content">
+        <a href="/collections/table.html" class="name">Table</a>
+        <p>A table organizes data that is grouped into rows</p>
       </div>
     </div>
     <div class="item">
       <div class="image">
-        <div class="ui info block">
-          <p>You forgot to <b>do something</b></p>
+        <div class="ui warning block">
+          <div class="header">Alert</div>
+          <p>You forgot your name!</p>
         </div>
       </div>
       <div class="content">
-        <div class="name">Text Block</div>
-        <p>A text block is used to show a special message.</p>
+        <a href="collections/block.html" class="name">Text Block</a>
+        <p>A text block is used to alert a user.</p>
       </div>
     </div>
     
diff --git a/node/src/documents/element.html b/node/src/documents/element.html
index f84b464fd..48fdfcf42 100755
--- a/node/src/documents/element.html
+++ b/node/src/documents/element.html
@@ -26,6 +26,30 @@ type   : 'Library'
   
   <h2>Distinction</h2>
   
+  <div class="ui horizontal items">
+    
+    <div class="item">
+      <div class="image">
+        <div class="ui teal fluid button">Follow</div>
+      </div>
+      <div class="content">
+        <div class="name">Button</div>
+        <p>A button indicates a possible user action.</p>
+      </div>
+    </div>
+    <div class="item">
+      <div class="image">
+        <div class="ui large teal label">New</div>
+        <div class="ui large red label">Popular</div><br><br>
+        <div class="ui large orange label">User Favorite</div>
+      </div>
+      <div class="content">
+        <div class="name">Label</div>
+        <p>A button indicates a possible user action.</p>
+      </div>
+    </div>
+  </div>
+  
 </div>
 </body>
 
diff --git a/node/src/files/components/semantic/src/collections/items.css b/node/src/files/components/semantic/src/collections/items.css
index a6c5f0b5c..416159eaa 100644
--- a/node/src/files/components/semantic/src/collections/items.css
+++ b/node/src/files/components/semantic/src/collections/items.css
@@ -6,7 +6,7 @@
      Sizing
 ---------------*/
 
-.ui.items .item {
+.ui.items > .item {
   float: left;
   display: block;
 
@@ -34,12 +34,12 @@
   margin-left: -1%;
   margin-right: -1%;
 }
-.ui.two.items .item {
+.ui.two.items > .item {
   width: 48%;
   margin-left: 1%;
   margin-right: 1%;
 }
-.ui.two.items .item:nth-child(2n+1) {
+.ui.two.items > .item:nth-child(2n+1) {
   clear: left;
 }
 
@@ -47,12 +47,12 @@
   margin-left: -1%;
   margin-right: -1%;
 }
-.ui.three.items .item {
+.ui.three.items > .item {
   width: 31.333%;
   margin-left: 1%;
   margin-right: 1%;
 }
-.ui.three.items .item:nth-child(3n+1) {
+.ui.three.items > .item:nth-child(3n+1) {
   clear: left;
 }
 
@@ -60,12 +60,12 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.four.items .item {
+.ui.four.items > .item {
   width: 24%;
   margin-left: 0.5%;
   margin-right: 0.5%;
 }
-.ui.four.items .item:nth-child(4n+1) {
+.ui.four.items > .item:nth-child(4n+1) {
   clear: left;
 }
 
@@ -73,12 +73,12 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.five.items .item {
+.ui.five.items > .item {
   width: 19%;
   margin-left: 0.5%;
   margin-right: 0.5%;
 }
-.ui.five.items .item:nth-child(5n+1) {
+.ui.five.items > .item:nth-child(5n+1) {
   clear: left;
 }
 
@@ -86,12 +86,12 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.six.items .item {
+.ui.six.items > .item {
   width: 15.66%;
   margin-left: 0.5%;
   margin-right: 0.5%;
 }
-.ui.six.items .item:nth-child(6n+1) {
+.ui.six.items > .item:nth-child(6n+1) {
   clear: left;
 }
 
@@ -99,13 +99,13 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.seven.items .item {
+.ui.seven.items > .item {
   width: 13.28%;
   margin-left: 0.5%;
   margin-right: 0.5%;
   font-size: 11px;
 }
-.ui.seven.items .item:nth-child(7n+1) {
+.ui.seven.items > .item:nth-child(7n+1) {
   clear: left;
 }
 
@@ -113,13 +113,13 @@
   margin-left: -0.25%;
   margin-right: -0.25%;
 }
-.ui.eight.items .item {
+.ui.eight.items > .item {
   width: 12.0%;
   margin-left: 0.25%;
   margin-right: 0.25%;
   font-size: 11px;
 }
-.ui.eight.items .item:nth-child(8n+1) {
+.ui.eight.items > .item:nth-child(8n+1) {
   clear: left;
 }
 
@@ -127,13 +127,13 @@
   margin-left: -0.25%;
   margin-right: -0.25%;
 }
-.ui.nine.items .item {
+.ui.nine.items > .item {
   width: 10.61%;
   margin-left: 0.25%;
   margin-right: 0.25%;
   font-size: 10px;
 }
-.ui.nine.items .item:nth-child(9n+1) {
+.ui.nine.items > .item:nth-child(9n+1) {
   clear: left;
 }
 
@@ -141,13 +141,13 @@
   margin-left: -0.2%;
   margin-right: -0.2%;
 }
-.ui.ten.items .item {
+.ui.ten.items > .item {
   width: 9.6%;
   margin-left: 0.2%;
   margin-right: 0.2%;
   font-size: 10px;
 }
-.ui.ten.items .item:nth-child(10n+1) {
+.ui.ten.items > .item:nth-child(10n+1) {
   clear: left;
 }
 
@@ -155,13 +155,13 @@
   margin-left: -0.2%;
   margin-right: -0.2%;
 }
-.ui.eleven.items .item {
+.ui.eleven.items > .item {
   width: 8.69%;
   margin-left: 0.2%;
   margin-right: 0.2%;
   font-size: 9px;
 }
-.ui.eleven.items .item:nth-child(11n+1) {
+.ui.eleven.items > .item:nth-child(11n+1) {
   clear: left;
 }
 
@@ -169,13 +169,13 @@
   margin-left: -0.1%;
   margin-right: -0.1%;
 }
-.ui.twelve.items .item {
+.ui.twelve.items > .item {
   width: 8.1333%;
   margin-left: 0.1%;
   margin-right: 0.1%;
   font-size: 9px;
 }
-.ui.twelve.items .item:nth-child(12n+1) {
+.ui.twelve.items > .item:nth-child(12n+1) {
   clear: left;
 }
 
@@ -203,25 +203,34 @@
 .ui.items > .item {
   display: block;
   position: relative;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin: 0.5em 0em;
 
-  min-height: 50px;
+  min-height: 3em;
   background-color: #FFFFFF;
 
-  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;
 
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
+  padding: 0.5em;
+}
+
+.ui.items > .item > .image {
+  background-color: rgba(0, 0, 0, 0.05);
+  display: table-cell;
 
-  padding: 0.7%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-.ui.items .item > .image a,
-.ui.items .item > .image img {
+.ui.items > .item > .image a,
+.ui.items > .item > .image img {
   position: relative;
   display: block;
   width: 100%;
@@ -230,7 +239,7 @@
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.ui.items .item > .image a:after {
+.ui.items > .item > .image a:after {
   position: absolute;
   display: block;
   content: '';
@@ -245,7 +254,7 @@
   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
 }
-.ui.items .item > .image .overlay {
+.ui.items > .item > .image .overlay {
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -264,44 +273,44 @@
 
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
 }
-.ui.items .item > .image .overlay i {
+.ui.items > .item > .image .overlay i {
   font-size: 1.3em;
   font-weight: bold;
 }
 
 /* Content */
-.ui.items .item > .content {
+.ui.items > .item > .content {
   padding: 4% 1% 6%;
   color: #888888;
 }
-.ui.items .item > .content > .name,
-.ui.items .item > .content > .title {
+.ui.items > .item > .content > .name,
+.ui.items > .item > .content > .title {
   margin-bottom: 1%;
 
   font-size: 1.2em;
   font-weight: bold;
   color: #009FDA;
 }
-.ui.items .item > .content p {
+.ui.items > .item > .content p {
   line-height: 1.33;
   margin: 0% 0% 5%;
 }
-.ui.items .item > .content :last-child {
+.ui.items > .item > .content :last-child {
   margin-bottom: 0%;
 }
 
 
 /* Optional Content */
-.ui.items .item > .extra {
+.ui.items > .item > .extra {
   color: #C6C7C9;
   padding: 0% 1% 1%;
 }
-.ui.items .item > .extra img {
+.ui.items > .item > .extra img {
   display: inline-block;
   vertical-align: middle;
 }
 
-.ui.items .item .avatar {
+.ui.items > .item .avatar {
   display: inline-block;
   width: 5.5%;
   min-width: 15px;
@@ -313,54 +322,54 @@
        Table Items
 *******************************/
 
-.ui.horizontal.items .item,
-.ui.items .horizontal.item {
+.ui.horizontal.items > .item,
+.ui.items > .horizontal.item {
   display: table;
 }
 /* prevents reflow bug in chrome by targeting webkit browser */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .ui.items .item {
+  .ui.items > .item {
     display: block;
   }
 }
 
-.ui.horizontal.items .item > .image
-.ui.items .horizontal.item > .image {
+.ui.horizontal.items > .item > .image
+.ui.items > .horizontal.item > .image {
   display: table-cell;
   width: 50%;
 }
-.ui.horizontal.items .item > .image + .content,
-.ui.items .horizontal.item > .image + .content {
+.ui.horizontal.items > .item > .image + .content,
+.ui.items > .horizontal.item > .image + .content {
   width: 50%;
   display: table-cell;
 }
-.ui.horizontal.items .item > .content,
-.ui.items .horizontal.item > .content {
+.ui.horizontal.items > .item > .content,
+.ui.items > .horizontal.item > .content {
   padding: 1% 1.7% 11% 3%;
   vertical-align: top;
 }
 
-.ui.horizontal.items .item > .extra,
-.ui.items .horizontal.item > .extra {
+.ui.horizontal.items > .item > .extra,
+.ui.items > .horizontal.item > .extra {
   position: absolute;
   padding: 0%;
   bottom: 7%;
   left: 3%;
   width: 94%;
 }
-.ui.horizontal.items .item > .image + .content + .extra,
-.ui.items .horizontal.item > .image + .content + .extra {
+.ui.horizontal.items > .item > .image + .content + .extra,
+.ui.items > .horizontal.item > .image + .content + .extra {
   bottom: 7%;
   left: 53%;
   width: 44%;
 }
 
 
-.ui.horizontal.items .item .avatar,
-.ui.items .horizontal.item .avatar {
+.ui.horizontal.items > .item .avatar,
+.ui.items > .horizontal.item .avatar {
   width: 11.5%;
 }
 
-.ui.items .item .avatar {
+.ui.items > .item .avatar {
   max-width: 25px;
 }
\ No newline at end of file
diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css
index 06a4b81e1..c94398cf2 100755
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@@ -553,6 +553,10 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   opacity: 1;
 }
 
+#example .ui.items > .item > .image {
+  padding: 1em;
+  vertical-align: middle;
+}
 
 /* some demo formatting */
 .ui.menu p:only-child {
diff --git a/src/collections/items.css b/src/collections/items.css
index a6c5f0b5c..416159eaa 100755
--- a/src/collections/items.css
+++ b/src/collections/items.css
@@ -6,7 +6,7 @@
      Sizing
 ---------------*/
 
-.ui.items .item {
+.ui.items > .item {
   float: left;
   display: block;
 
@@ -34,12 +34,12 @@
   margin-left: -1%;
   margin-right: -1%;
 }
-.ui.two.items .item {
+.ui.two.items > .item {
   width: 48%;
   margin-left: 1%;
   margin-right: 1%;
 }
-.ui.two.items .item:nth-child(2n+1) {
+.ui.two.items > .item:nth-child(2n+1) {
   clear: left;
 }
 
@@ -47,12 +47,12 @@
   margin-left: -1%;
   margin-right: -1%;
 }
-.ui.three.items .item {
+.ui.three.items > .item {
   width: 31.333%;
   margin-left: 1%;
   margin-right: 1%;
 }
-.ui.three.items .item:nth-child(3n+1) {
+.ui.three.items > .item:nth-child(3n+1) {
   clear: left;
 }
 
@@ -60,12 +60,12 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.four.items .item {
+.ui.four.items > .item {
   width: 24%;
   margin-left: 0.5%;
   margin-right: 0.5%;
 }
-.ui.four.items .item:nth-child(4n+1) {
+.ui.four.items > .item:nth-child(4n+1) {
   clear: left;
 }
 
@@ -73,12 +73,12 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.five.items .item {
+.ui.five.items > .item {
   width: 19%;
   margin-left: 0.5%;
   margin-right: 0.5%;
 }
-.ui.five.items .item:nth-child(5n+1) {
+.ui.five.items > .item:nth-child(5n+1) {
   clear: left;
 }
 
@@ -86,12 +86,12 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.six.items .item {
+.ui.six.items > .item {
   width: 15.66%;
   margin-left: 0.5%;
   margin-right: 0.5%;
 }
-.ui.six.items .item:nth-child(6n+1) {
+.ui.six.items > .item:nth-child(6n+1) {
   clear: left;
 }
 
@@ -99,13 +99,13 @@
   margin-left: -0.5%;
   margin-right: -0.5%;
 }
-.ui.seven.items .item {
+.ui.seven.items > .item {
   width: 13.28%;
   margin-left: 0.5%;
   margin-right: 0.5%;
   font-size: 11px;
 }
-.ui.seven.items .item:nth-child(7n+1) {
+.ui.seven.items > .item:nth-child(7n+1) {
   clear: left;
 }
 
@@ -113,13 +113,13 @@
   margin-left: -0.25%;
   margin-right: -0.25%;
 }
-.ui.eight.items .item {
+.ui.eight.items > .item {
   width: 12.0%;
   margin-left: 0.25%;
   margin-right: 0.25%;
   font-size: 11px;
 }
-.ui.eight.items .item:nth-child(8n+1) {
+.ui.eight.items > .item:nth-child(8n+1) {
   clear: left;
 }
 
@@ -127,13 +127,13 @@
   margin-left: -0.25%;
   margin-right: -0.25%;
 }
-.ui.nine.items .item {
+.ui.nine.items > .item {
   width: 10.61%;
   margin-left: 0.25%;
   margin-right: 0.25%;
   font-size: 10px;
 }
-.ui.nine.items .item:nth-child(9n+1) {
+.ui.nine.items > .item:nth-child(9n+1) {
   clear: left;
 }
 
@@ -141,13 +141,13 @@
   margin-left: -0.2%;
   margin-right: -0.2%;
 }
-.ui.ten.items .item {
+.ui.ten.items > .item {
   width: 9.6%;
   margin-left: 0.2%;
   margin-right: 0.2%;
   font-size: 10px;
 }
-.ui.ten.items .item:nth-child(10n+1) {
+.ui.ten.items > .item:nth-child(10n+1) {
   clear: left;
 }
 
@@ -155,13 +155,13 @@
   margin-left: -0.2%;
   margin-right: -0.2%;
 }
-.ui.eleven.items .item {
+.ui.eleven.items > .item {
   width: 8.69%;
   margin-left: 0.2%;
   margin-right: 0.2%;
   font-size: 9px;
 }
-.ui.eleven.items .item:nth-child(11n+1) {
+.ui.eleven.items > .item:nth-child(11n+1) {
   clear: left;
 }
 
@@ -169,13 +169,13 @@
   margin-left: -0.1%;
   margin-right: -0.1%;
 }
-.ui.twelve.items .item {
+.ui.twelve.items > .item {
   width: 8.1333%;
   margin-left: 0.1%;
   margin-right: 0.1%;
   font-size: 9px;
 }
-.ui.twelve.items .item:nth-child(12n+1) {
+.ui.twelve.items > .item:nth-child(12n+1) {
   clear: left;
 }
 
@@ -203,25 +203,34 @@
 .ui.items > .item {
   display: block;
   position: relative;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin: 0.5em 0em;
 
-  min-height: 50px;
+  min-height: 3em;
   background-color: #FFFFFF;
 
-  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;
 
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
+  padding: 0.5em;
+}
+
+.ui.items > .item > .image {
+  background-color: rgba(0, 0, 0, 0.05);
+  display: table-cell;
 
-  padding: 0.7%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-.ui.items .item > .image a,
-.ui.items .item > .image img {
+.ui.items > .item > .image a,
+.ui.items > .item > .image img {
   position: relative;
   display: block;
   width: 100%;
@@ -230,7 +239,7 @@
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.ui.items .item > .image a:after {
+.ui.items > .item > .image a:after {
   position: absolute;
   display: block;
   content: '';
@@ -245,7 +254,7 @@
   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset;
 }
-.ui.items .item > .image .overlay {
+.ui.items > .item > .image .overlay {
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -264,44 +273,44 @@
 
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
 }
-.ui.items .item > .image .overlay i {
+.ui.items > .item > .image .overlay i {
   font-size: 1.3em;
   font-weight: bold;
 }
 
 /* Content */
-.ui.items .item > .content {
+.ui.items > .item > .content {
   padding: 4% 1% 6%;
   color: #888888;
 }
-.ui.items .item > .content > .name,
-.ui.items .item > .content > .title {
+.ui.items > .item > .content > .name,
+.ui.items > .item > .content > .title {
   margin-bottom: 1%;
 
   font-size: 1.2em;
   font-weight: bold;
   color: #009FDA;
 }
-.ui.items .item > .content p {
+.ui.items > .item > .content p {
   line-height: 1.33;
   margin: 0% 0% 5%;
 }
-.ui.items .item > .content :last-child {
+.ui.items > .item > .content :last-child {
   margin-bottom: 0%;
 }
 
 
 /* Optional Content */
-.ui.items .item > .extra {
+.ui.items > .item > .extra {
   color: #C6C7C9;
   padding: 0% 1% 1%;
 }
-.ui.items .item > .extra img {
+.ui.items > .item > .extra img {
   display: inline-block;
   vertical-align: middle;
 }
 
-.ui.items .item .avatar {
+.ui.items > .item .avatar {
   display: inline-block;
   width: 5.5%;
   min-width: 15px;
@@ -313,54 +322,54 @@
        Table Items
 *******************************/
 
-.ui.horizontal.items .item,
-.ui.items .horizontal.item {
+.ui.horizontal.items > .item,
+.ui.items > .horizontal.item {
   display: table;
 }
 /* prevents reflow bug in chrome by targeting webkit browser */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .ui.items .item {
+  .ui.items > .item {
     display: block;
   }
 }
 
-.ui.horizontal.items .item > .image
-.ui.items .horizontal.item > .image {
+.ui.horizontal.items > .item > .image
+.ui.items > .horizontal.item > .image {
   display: table-cell;
   width: 50%;
 }
-.ui.horizontal.items .item > .image + .content,
-.ui.items .horizontal.item > .image + .content {
+.ui.horizontal.items > .item > .image + .content,
+.ui.items > .horizontal.item > .image + .content {
   width: 50%;
   display: table-cell;
 }
-.ui.horizontal.items .item > .content,
-.ui.items .horizontal.item > .content {
+.ui.horizontal.items > .item > .content,
+.ui.items > .horizontal.item > .content {
   padding: 1% 1.7% 11% 3%;
   vertical-align: top;
 }
 
-.ui.horizontal.items .item > .extra,
-.ui.items .horizontal.item > .extra {
+.ui.horizontal.items > .item > .extra,
+.ui.items > .horizontal.item > .extra {
   position: absolute;
   padding: 0%;
   bottom: 7%;
   left: 3%;
   width: 94%;
 }
-.ui.horizontal.items .item > .image + .content + .extra,
-.ui.items .horizontal.item > .image + .content + .extra {
+.ui.horizontal.items > .item > .image + .content + .extra,
+.ui.items > .horizontal.item > .image + .content + .extra {
   bottom: 7%;
   left: 53%;
   width: 44%;
 }
 
 
-.ui.horizontal.items .item .avatar,
-.ui.items .horizontal.item .avatar {
+.ui.horizontal.items > .item .avatar,
+.ui.items > .horizontal.item .avatar {
   width: 11.5%;
 }
 
-.ui.items .item .avatar {
+.ui.items > .item .avatar {
   max-width: 25px;
 }
\ No newline at end of file