semantic-ui-sass 0.19.3.1 → 1.7.0.0

data/app/assets/stylesheets/semantic-ui/views/_item.scss

@@ -1,38 +1,66 @@
-/*
- * # Semantic Item View
- * http://github.com/jlukic/semantic-ui/
- *
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
  *
  * Copyright 2014 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- * Released: April 17 2014
  */
 
+
+
 /*******************************
             Standard
 *******************************/
 
+
+/*--------------
+      Item
+---------------*/
+
+.ui.items > .item {
+  table-layout: fixed;
+  display: table;
+  margin: 1em 0em;
+  width: 100%;
+  min-height: 0px;
+  background: transparent;
+  padding: 0em;
+  border: none;
+  border-radius: 0rem;
+  box-shadow: none;
+  -webkit-transition: box-shadow 0.2s ease;
+          transition: box-shadow 0.2s ease;
+  z-index: '';
+}
+.ui.items > .item a {
+  cursor: pointer;
+}
+
 /*--------------
       Items
 ---------------*/
 
 .ui.items {
-  margin: 1em 0em 0em;
+  margin: 1.5em 0em;
 }
-
 .ui.items:first-child {
-  margin-top: 0em;
+  margin-top: 0em !important;
 }
-
 .ui.items:last-child {
-  margin-bottom: -1em;
+  margin-bottom: 0em !important;
 }
 
-/* Force Clearing */
+/*--------------
+      Item
+---------------*/
 
-.ui.items:after {
+.ui.items > .item {
+  min-width: 100%;
+}
+.ui.items > .item:after {
   display: block;
   content: ' ';
   height: 0px;
@@ -40,644 +68,391 @@
   overflow: hidden;
   visibility: hidden;
 }
-
-/*--------------
-      Item
----------------*/
-
-.ui.items > .row > .item,
-.ui.items > .item {
-  display: block;
-  float: left;
-  position: relative;
-  top: 0px;
-  width: 316px;
-  min-height: 375px;
-  margin: 0em 0.5em 2.5em;
-  padding: 0em;
-  background-color: #FFFFFF;
-  line-height: 1.2;
-  font-size: 1em;
-  -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);
-  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.33em;
-  -webkit-transition: -webkit-box-shadow 0.2s ease;
-  transition: box-shadow 0.2s ease;
-  padding: 0.5em;
-}
-
-.ui.items a.item,
-.ui.items .item a {
-  cursor: pointer;
+.ui.items > .item:first-child {
+  margin-top: 0em;
 }
-
-.ui.items .item,
-.ui.items .item > .image,
-.ui.items .item > .image .overlay,
-.ui.items .item > .content,
-.ui.items .item > .content > .meta,
-.ui.items .item > .content > .extra {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+.ui.items > .item:last-child {
+  margin-bottom: 0em;
 }
 
 /*--------------
-      Images
+     Images
 ---------------*/
 
-.ui.items .item > .image {
-  display: block;
+.ui.items > .item > .image {
   position: relative;
-  background-color: rgba(0, 0, 0, 0.05);
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  border-radius: 0.2em;
+  display: table-cell;
+  float: none;
+  margin: 0em;
+  padding: 0em;
+  max-height: '';
+  vertical-align: top;
 }
-
-.ui.items .item > .image > img {
+.ui.items > .item > .image > img {
   display: block;
   width: 100%;
+  height: auto;
+  border-radius: 0.125rem;
+  border: none;
+}
+.ui.items > .item > .image:only-child > img {
+  border-radius: 0rem;
 }
 
 /*--------------
      Content
 ---------------*/
 
-.ui.items .item > .content {
-  padding: 0.75em 0.5em;
-}
-
-.ui.items .item > .content > .name {
+.ui.items > .item > .content {
   display: block;
-  font-size: 1.25em;
-  font-weight: bold;
-  margin-bottom: 0.2em;
-  color: rgba(0, 0, 0, 0.7);
+  background: none;
+  margin: 0em;
+  padding: 0em;
+  box-shadow: none;
+  font-size: 1em;
+  border: none;
+  border-radius: 0em;
 }
-
-.ui.items .item > .content > .description {
+.ui.items > .item > .content:after {
+  display: block;
+  content: ' ';
+  height: 0px;
   clear: both;
-  margin: 0em 0em;
-  color: rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  visibility: hidden;
 }
-
-.ui.items .item > .content > .description p {
-  margin: 0em 0em 0.2em;
+.ui.items > .item > .image + .content {
+  width: 100%;
+  display: table-cell;
+  margin-left: 0em;
+  vertical-align: top;
+  padding-left: 1.5em;
+}
+.ui.items > .item > .content > .header {
+  display: inline-block;
+  margin: -0.165em 0em 0em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.85);
 }
 
-.ui.items .item > .content > .description p:last-child {
-  margin-bottom: 0em;
+/* Default Header Size */
+.ui.items > .item > .content > .header:not(.ui) {
+  font-size: 1.2em;
 }
 
 /*--------------
-      Meta
+     Floated
 ---------------*/
 
-.ui.items .item .meta {
-  float: right;
-  color: rgba(0, 0, 0, 0.35);
-}
-
-.ui.items .item > .content > .meta + .name {
+.ui.items > .item [class*="left floated"] {
   float: left;
 }
+.ui.items > .item [class*="right floated"] {
+  float: right;
+}
 
 /*--------------
-     Labels
+  Content Image
 ---------------*/
 
-/*-----star----- */
-
-/* hover */
-
-.ui.items .item .star.label:hover::after {
-  border-right-color: #F6EFC3;
-}
-
-.ui.items .item .star.label:hover::after {
-  border-top-color: #F6EFC3;
-}
-
-.ui.items .item .star.label:hover .icon {
-  color: #AC9400;
-}
-
-/* active */
-
-.ui.items .item .star.label.active::after {
-  border-right-color: #F6EFC3;
-}
-
-.ui.items .item .star.label.active::after {
-  border-top-color: #F6EFC3;
-}
-
-.ui.items .item .star.label.active .icon {
-  color: #AC9400;
+.ui.items > .item .content img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 2em;
 }
-
-/*-----like----- */
-
-/* hover */
-
-.ui.items .item .like.label:hover::after {
-  border-right-color: #F5E1E2;
+.ui.items > .item img.avatar,
+.ui.items > .item .avatar img {
+  width: 2em;
+  height: 2em;
+  border-radius: 500rem;
 }
 
-.ui.items .item .like.label.active::after {
-  border-top-color: #F5E1E2;
-}
+/*--------------
+   Description
+---------------*/
 
-.ui.items .item .like.label:hover .icon {
-  color: #EF404A;
+.ui.items > .item > .content > .description {
+  margin-top: 0.6em;
+  max-width: 550px;
+  font-size: 1em;
+  line-height: 1.33;
+  color: rgba(0, 0, 0, 0.8);
 }
 
-/* active */
-
-.ui.items .item .like.label.active::after {
-  border-right-color: #F5E1E2;
-}
+/*--------------
+    Paragraph
+---------------*/
 
-.ui.items .item .like.label.active::after {
-  border-top-color: #F5E1E2;
+.ui.items > .item > .content p {
+  margin: 0em 0em 0.5em;
 }
-
-.ui.items .item .like.label.active .icon {
-  color: #EF404A;
+.ui.items > .item > .content p:last-child {
+  margin-bottom: 0em;
 }
 
 /*--------------
-      Extra
+      Meta
 ---------------*/
 
-.ui.items .item .extra {
-  position: absolute;
-  width: 100%;
-  padding: 0em 0.5em;
-  bottom: -2em;
-  left: 0em;
-  height: 1.5em;
-  color: rgba(0, 0, 0, 0.25);
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
+.ui.items > .item .meta {
+  font-size: 1em;
+  line-height: 1em;
+  color: rgba(0, 0, 0, 0.6);
 }
-
-.ui.items .item .extra > img {
-  display: inline-block;
-  border-radius: 500px 500px 500px 500px;
-  margin-right: 0.25em;
-  vertical-align: middle;
-  width: 2em;
+.ui.items > .item .meta * {
+  margin-right: 0.3em;
 }
-
-.ui.items .item .extra .left {
-  float: left;
+.ui.items > .item .meta :last-child {
+  margin-right: 0em;
 }
-
-.ui.items .item .extra .right {
-  float: right;
+.ui.items > .item .meta [class*="right floated"] {
+  margin-right: 0em;
+  margin-left: 0.3em;
 }
 
-/*******************************
-           States
-*******************************/
-
-.ui.items .item:hover {
-  cursor: pointer;
-  z-index: 5;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-}
+/*--------------
+      Links
+---------------*/
 
-.ui.items .item:hover .extra {
-  color: rgba(0, 0, 0, 0.5);
-}
 
-.ui.items .item:nth-of-type(6n+1):hover {
-  border-bottom-color: #6ECFF5 !important;
+/* Generic */
+.ui.items > .item > .content a:not(.ui) {
+  color: '';
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
 }
-
-.ui.items .item:nth-of-type(6n+2):hover {
-  border-bottom-color: #5C6166 !important;
+.ui.items > .item > .content a:not(.ui):hover {
+  color: '';
 }
 
-.ui.items .item:nth-of-type(6n+3):hover {
-  border-bottom-color: #A1CF64 !important;
+/* Header */
+.ui.items > .item > .content > a.header {
+  color: rgba(0, 0, 0, 0.85);
 }
-
-.ui.items .item:nth-of-type(6n+4):hover {
-  border-bottom-color: #D95C5C !important;
+.ui.items > .item > .content > a.header:hover {
+  color: #00b2f3;
 }
 
-.ui.items .item:nth-of-type(6n+5):hover {
-  border-bottom-color: #00B5AD !important;
+/* Meta */
+.ui.items > .item .meta > a:not(.ui) {
+  color: rgba(0, 0, 0, 0.4);
 }
-
-.ui.items .item:nth-of-type(6n+6):hover {
-  border-bottom-color: #564F8A !important;
+.ui.items > .item .meta > a:not(.ui):hover {
+  color: rgba(0, 0, 0, 0.8);
 }
 
-/*******************************
-           Variations
-*******************************/
-
 /*--------------
-    Connected
+     Labels
 ---------------*/
 
-.ui.connected.items {
-  display: table;
-  width: 100%;
-  margin-left: 0em !important;
-  margin-right: 0em !important;
-}
 
-.ui.connected.items > .row > .item,
-.ui.connected.items > .item {
-  float: none;
-  display: table-cell;
-  vertical-align: top;
-  height: auto;
-  border-radius: 0px;
-  margin: 0em;
-  width: 33.33%;
-}
+/*-----Star----- */
 
-.ui.connected.items > .row {
-  display: table;
-  margin: 0.5em 0em;
-}
 
-.ui.connected.items > .row:first-child {
-  margin-top: 0em;
+/* Icon */
+.ui.items > .item > .content .favorite.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
 }
-
-/* Borders */
-
-.ui.connected.items > .item,
-.ui.connected.items > .row:last-child > .item {
-  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
+.ui.items > .item > .content .favorite.icon:hover {
+  opacity: 1;
+  color: #ffb70a;
 }
-
-.ui.connected.items > .row:last-child > .item:first-child,
-.ui.connected.items > .item:first-child {
-  border-radius: 0em 0em 0em 0.33em;
+.ui.items > .item > .content .active.favorite.icon {
+  color: #ffb70a;
 }
 
-.ui.connected.items > .row:last-child > .item:last-child,
-.ui.connected.items > .item:last-child {
-  border-radius: 0em 0em 0.33em 0em;
-}
+/*-----Like----- */
 
-/* Hover */
 
-.ui.connected.items .item:hover {
-  border-bottom-width: 0.2em;
+/* Icon */
+.ui.items > .item > .content .like.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
 }
-
-/* Item Count */
-
-.ui.one.connected.items > .row > .item,
-.ui.one.connected.items > .item {
-  width: 50%;
-  padding-left: 2%;
-  padding-right: 2%;
+.ui.items > .item > .content .like.icon:hover {
+  opacity: 1;
+  color: #ff2733;
 }
-
-.ui.two.connected.items > .row > .item,
-.ui.two.connected.items > .item {
-  width: 50%;
-  padding-left: 1%;
-  padding-right: 1%;
+.ui.items > .item > .content .active.like.icon {
+  color: #ff2733;
 }
 
-.ui.three.connected.items > .row > .item,
-.ui.three.connected.items > .item {
-  width: 33.333%;
-  padding-left: 1%;
-  padding-right: 1%;
-}
+/*----------------
+  Extra Content
+-----------------*/
 
-.ui.four.connected.items > .row > .item,
-.ui.four.connected.items > .item {
-  width: 25%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
+.ui.items > .item .extra {
+  display: block;
+  position: relative;
+  background: none;
+  margin: 0.5rem 0em 0em;
+  width: 100%;
+  padding: 0em 0em 0em;
+  top: 0em;
+  left: 0em;
+  color: rgba(0, 0, 0, 0.4);
+  box-shadow: none;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+  border-top: none;
 }
-
-.ui.five.connected.items > .row > .item,
-.ui.five.connected.items > .item {
-  width: 20%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
+.ui.items > .item .extra > * {
+  margin: 0.25rem 0.5rem 0.25rem 0em;
 }
-
-.ui.six.connected.items > .row > .item,
-.ui.six.connected.items > .item {
-  width: 16.66%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
+.ui.items > .item .extra > [class*="right floated"] {
+  margin: 0.25rem 0em 0.25rem 0.5rem;
 }
-
-.ui.seven.connected.items > .row > .item,
-.ui.seven.connected.items > .item {
-  width: 14.28%;
-  padding-left: 0.5%;
-  padding-right: 0.5%;
+.ui.items > .item .extra:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
 }
 
-.ui.eight.connected.items > .row > .item,
-.ui.eight.connected.items > .item {
-  width: 12.5%;
-  padding-left: 0.25%;
-  padding-right: 0.25%;
-}
 
-.ui.nine.connected.items > .row > .item,
-.ui.nine.connected.items > .item {
-  width: 11.11%;
-  padding-left: 0.25%;
-  padding-right: 0.25%;
-}
+/*******************************
+          Responsive
+*******************************/
 
-.ui.ten.connected.items > .row > .item,
-.ui.ten.connected.items > .item {
-  width: 10%;
-  padding-left: 0.2%;
-  padding-right: 0.2%;
-}
 
-.ui.eleven.connected.items > .row > .item,
-.ui.eleven.connected.items > .item {
-  width: 9.09%;
-  padding-left: 0.2%;
-  padding-right: 0.2%;
+/* Default Image Width */
+.ui.items > .item > .image:not(.ui) {
+  width: 175px;
 }
 
-.ui.twelve.connected.items > .row > .item,
-.ui.twelve.connected.items > .item {
-  width: 8.3333%;
-  padding-left: 0.1%;
-  padding-right: 0.1%;
+/* Tablet Only */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .ui.items > .item {
+    margin: 1em 0em;
+  }
+  .ui.items > .item > .image:not(.ui) {
+    width: 150px;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: 0em 0em 0em 1em;
+  }
 }
 
-/*-------------------
-      Responsive
---------------------*/
-
-@media only screen and (max-width : 768px) {
-  .ui.stackable.items {
-    display: block !important;
+/* Mobily Only */
+@media only screen and (max-width: 767px) {
+  .ui.items > .item {
+    margin: 2em 0em;
   }
-
-  .ui.stackable.items > .item,
-  .ui.stackable.items > .row > .item {
-    display: block !important;
-    height: auto !important;
-    width: 100% !important;
-    padding: 0% !important;
+  .ui.items > .item > .image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .ui.items > .item > .image,
+  .ui.items > .item > .image > img {
+    max-width: 100% !important;
+    width: auto !important;
+    max-height: 250px !important;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: 1.5em 0em 0em;
   }
 }
 
-/*--------------------
-      Horizontal
----------------------*/
 
-.ui.horizontal.items > .item,
-.ui.items > .horizontal.item {
-  display: table;
-}
+/*******************************
+           Variations
+*******************************/
 
-.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 {
-  width: 50%;
-  display: table-cell;
-}
+/*-------------------
+       Aligned
+--------------------*/
 
-.ui.horizontal.items > .item > .content,
-.ui.items > .horizontal.item > .content {
-  padding: 1% 1.7% 11% 3%;
+.ui.items > .item > .image + [class*="top aligned"].content {
   vertical-align: top;
 }
-
-.ui.horizontal.items > .item > .meta,
-.ui.items > .horizontal.item > .meta {
-  position: absolute;
-  padding: 0%;
-  bottom: 7%;
-  left: 3%;
-  width: 94%;
-}
-
-.ui.horizontal.items > .item > .image + .content + .meta,
-.ui.items > .horizontal.item > .image + .content + .meta {
-  bottom: 7%;
-  left: 53%;
-  width: 44%;
-}
-
-.ui.horizontal.items > .item .avatar,
-.ui.items > .horizontal.item .avatar {
-  width: 11.5%;
+.ui.items > .item > .image + [class*="middle aligned"].content {
+  vertical-align: middle;
 }
-
-.ui.items > .item .avatar {
-  max-width: 25px;
+.ui.items > .item > .image + [class*="bottom aligned"].content {
+  vertical-align: bottom;
 }
 
 /*--------------
-    Item Count
+     Relaxed
 ---------------*/
 
-.ui.one.items {
-  margin-left: -2%;
-  margin-right: -2%;
-}
-
-.ui.one.items > .item {
-  width: 100%;
-  margin-left: 2%;
-  margin-right: 2%;
-}
-
-.ui.two.items {
-  margin-left: -1%;
-  margin-right: -1%;
-}
-
-.ui.two.items > .item {
-  width: 48%;
-  margin-left: 1%;
-  margin-right: 1%;
-}
-
-.ui.two.items > .item:nth-child(2n+1) {
-  clear: left;
-}
-
-.ui.three.items {
-  margin-left: -1%;
-  margin-right: -1%;
-}
-
-.ui.three.items > .item {
-  width: 31.333%;
-  margin-left: 1%;
-  margin-right: 1%;
+.ui.relaxed.items > .item {
+  margin: 1.5em 0em;
 }
-
-.ui.three.items > .item:nth-child(3n+1) {
-  clear: left;
+.ui[class*="very relaxed"].items > .item {
+  margin: 2em 0em;
 }
 
-.ui.four.items {
-  margin-left: -0.5%;
-  margin-right: -0.5%;
-}
-
-.ui.four.items > .item {
-  width: 24%;
-  margin-left: 0.5%;
-  margin-right: 0.5%;
-}
-
-.ui.four.items > .item:nth-child(4n+1) {
-  clear: left;
-}
-
-.ui.five.items {
-  margin-left: -0.5%;
-  margin-right: -0.5%;
-}
-
-.ui.five.items > .item {
-  width: 19%;
-  margin-left: 0.5%;
-  margin-right: 0.5%;
-}
-
-.ui.five.items > .item:nth-child(5n+1) {
-  clear: left;
-}
-
-.ui.six.items {
-  margin-left: -0.5%;
-  margin-right: -0.5%;
-}
-
-.ui.six.items > .item {
-  width: 15.66%;
-  margin-left: 0.5%;
-  margin-right: 0.5%;
-}
-
-.ui.six.items > .item:nth-child(6n+1) {
-  clear: left;
-}
-
-.ui.seven.items {
-  margin-left: -0.5%;
-  margin-right: -0.5%;
-}
+/*-------------------
+      Divided
+--------------------*/
 
-.ui.seven.items > .item {
-  width: 13.28%;
-  margin-left: 0.5%;
-  margin-right: 0.5%;
-  font-size: 11px;
+.ui.divided.items > .item {
+  border-top: 1px solid rgba(39, 41, 43, 0.15);
+  margin: 0em;
+  padding: 1em 0em;
 }
-
-.ui.seven.items > .item:nth-child(7n+1) {
-  clear: left;
+.ui.divided.items > .item:first-child {
+  border-top: none;
+  margin-top: 0em !important;
+  padding-top: 0em !important;
 }
-
-.ui.eight.items {
-  margin-left: -0.25%;
-  margin-right: -0.25%;
+.ui.divided.items > .item:last-child {
+  margin-bottom: 0em !important;
+  padding-bottom: 0em !important;
 }
 
-.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) {
-  clear: left;
+/* Relaxed Divided */
+.ui.relaxed.divided.items > .item {
+  margin: 0em;
+  padding: 1.5em 0em;
 }
-
-.ui.nine.items {
-  margin-left: -0.25%;
-  margin-right: -0.25%;
+.ui[class*="very relaxed"].divided.items > .item {
+  margin: 0em;
+  padding: 2em 0em;
 }
 
-.ui.nine.items > .item {
-  width: 10.61%;
-  margin-left: 0.25%;
-  margin-right: 0.25%;
-  font-size: 10px;
-}
+/*-------------------
+        Link
+--------------------*/
 
-.ui.nine.items > .item:nth-child(9n+1) {
-  clear: left;
+.ui.items a.item:hover,
+.ui.link.items > .item:hover {
+  cursor: pointer;
 }
-
-.ui.ten.items {
-  margin-left: -0.2%;
-  margin-right: -0.2%;
+.ui.items a.item:hover .content .header,
+.ui.link.items > .item:hover .content .header {
+  color: #00b2f3;
 }
 
-.ui.ten.items > .item {
-  width: 9.6%;
-  margin-left: 0.2%;
-  margin-right: 0.2%;
-  font-size: 10px;
-}
+/*--------------
+      Size
+---------------*/
 
-.ui.ten.items > .item:nth-child(10n+1) {
-  clear: left;
+.ui.items > .item {
+  font-size: 1em;
 }
 
-.ui.eleven.items {
-  margin-left: -0.2%;
-  margin-right: -0.2%;
-}
 
-.ui.eleven.items > .item {
-  width: 8.69%;
-  margin-left: 0.2%;
-  margin-right: 0.2%;
-  font-size: 9px;
-}
+/*******************************
+         Theme Overrides
+*******************************/
 
-.ui.eleven.items > .item:nth-child(11n+1) {
-  clear: left;
-}
 
-.ui.twelve.items {
-  margin-left: -0.1%;
-  margin-right: -0.1%;
-}
 
-.ui.twelve.items > .item {
-  width: 8.1333%;
-  margin-left: 0.1%;
-  margin-right: 0.1%;
-  font-size: 9px;
-}
+/*******************************
+    User Variable Overrides
+*******************************/
 
-.ui.twelve.items > .item:nth-child(12n+1) {
-  clear: left;
-}