Implement separators, and grouped controls

This adds separator elements, and allows arbitrary grouping of controls. For details
see the updates to README.md

data/css/style.css

@@ -13,22 +13,44 @@
 
 .card {
   min-height: 100px;
-  margin-top: 2%;
   border-radius: 6px;
   box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
   padding-left: 20px;
   padding-right: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 40px;
   min-width: 500px;
   color: #fff;
 }
 
+
+@media (min-width: 1205px) {
+	.wide.card {
+		min-width: 1075px;
+	}
+}
+
+@media (min-width: 1790px) {
+	.wide.card {
+		min-width: 1650px;
+	}
+}
+
 @media (max-width: 630px) {
   .card {
     min-width: 98%;
   }
 }
 
+.sectionbreak.columns {
+	color: black;
+}
+
+.sectionbreak.columns hr {
+	border: none;
+    height: 2px;
+    background-color: #666
+}
+
 .card-slider {}
 
 .turquoise {
@@ -137,7 +159,7 @@
 
   .column,
   .columns {
-    margin-right: 2%;
+    margin-right: 35px;
   }
 
   .column:first-child,
@@ -423,6 +445,8 @@ button:active {
 button,
 .button {
   margin-bottom: 1rem;
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
 }
 
 /* Utilities
@@ -576,7 +600,8 @@ hr {
   display: block;
   font-size: 14px;
   height: 26px;
-  margin-bottom: 12px;
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
   position: relative;
   width: 60px;
   -webkit-transition: background-color 0.2s ease-in-out;
@@ -933,6 +958,7 @@ input[id^="num"] {
 
 body div>ul.navigation {
   margin: 0;
+  margin-bottom: 30px;
   padding: 0;
   border-bottom: 3px solid #666;
   overflow: hidden;