Prune CSS and update button colors

diff --git a/wmca.css b/wmca.css
index 91f254bf87fc668da0d944d6440a90165d029f33..c19ff5310183eaa8419dc9fccc91f5a335248dda 100644 (file)
--- a/wmca.css
+++ b/wmca.css
@@ -24,6 +24,8 @@ img.logo {
 }
 
 .langlink {
+  /*display: flex;
+  justify-content: flex-start;*/
   float: right;
 }
 
@@ -60,17 +62,15 @@ p {
   flex-flow: row;
 }
 
-header,
-footer,
 #main > article,
 #main > leftmargin,
 #main > rightmargin {
+  background: #F3F3F3;
   margin: 4px;
-  padding: 1em;
-}
+  padding: 0em 1.0rem;
+  }
 
 #main > article {
-  background: #F3F3F3;
   -webkit-flex: 4 1 0;
   flex: 4 1 0;
   -webkit-order: 2;
@@ -86,15 +86,15 @@ footer,
 }
 
 #join {
-  background-color: #CCE7CD;
   border: 1px solid #5EAC58;
+  background-color: #CCE7CD;
   padding: 1em;
   width: 60%;
 }
 
 #donate {
-  background-color: #CCE7CD;
   border: 1px solid #5EAC58;
+  background-color: #CCE7CD;
   padding: 1em;
   width: 40%;
 }
@@ -103,15 +103,6 @@ footer,
   text-align: center;
 }
 
-#why {
-  background: #F3F3F3;
-}
-
-#main > leftmargin,
-#main > rightmargin {
-  background: #F3F3F3;
-}
-
 #main > leftmargin {
   -webkit-order: 1;
   order: 1;
@@ -122,29 +113,23 @@ footer,
   order: 3;
 }
 
-header, footer {
-  display: block;
-  min-height: 80px;
-}
-
 header {
-  background: #F3F3F3;
+  display: block;
+  padding: 1.0em;
 }
 
 footer {
+  display: block;
+  min-height: 80px;
   background: #DDD;
   font-size: 75%;
   font-style: italic;
   padding: 0.5em;
 }
 
-.flex-outer,
-.flex-inner {
+.flex-outer {
   list-style-type: none;
   padding: 0;
-}
-
-.flex-outer {
   margin: 0 auto;
 }
 
@@ -154,15 +139,8 @@ footer {
   align-items: center;
 }
 
-.flex-inner {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-.flex-outer > li:not(:last-child) {
-  margin-bottom: 20px;
+.flex-outer li:not(:last-child) {
+  margin-bottom: 10px;
 }
 
 .flex-outer li label {
@@ -170,7 +148,7 @@ footer {
 }
 
 .flex-outer li p {
-  padding: 8px;
+  /*padding: 8px;*/
   align-items: center;
 }
 
@@ -178,20 +156,26 @@ footer {
 .flex-outer li p {
   flex: 1 0 120px;
   max-width: 220px;
+  padding: 8px;
 }
 
 .flex-outer > li > label + * {
   flex: 1 0 220px;
 }
 
-.flex-outer li p {
-  margin: 0;
-}
-
 .flex-outer li input:not([type='radio']) {
   padding: 15px;
 }
 
+.flex-inner {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  flex-direction: column;
+  list-style-type: none;
+  padding: 0;
+}
+
 span.break:before {
   content: "\A";
   white-space: pre;
@@ -223,20 +207,20 @@ input[type='text'] {
   font-size: 1.4rem;
 }
 
+#donate > form {
+  text-align: center;
+}
+
 .btn-item {
   display: flex;
   padding-top: 1.5rem;
   justify-content: center;
 }
 
-#donate > form {
-  text-align: center;
-}
-
 .btn {
   padding: 1.0rem;
   border: 1px solid #333;
-  background: #333;
+  background: #000;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .09em;
@@ -246,13 +230,13 @@ input[type='text'] {
 }
 
 .btn:hover {
-  background: yellow;
+  background: gold;
   color: #000;
   border: 1px solid #333;
 }
 
 .btn:focus {
-  background: yellow;
+  background: gold;
   color: #000;
   border: 1px solid #333;
 }
@@ -280,7 +264,7 @@ input[type='text'] {
   }
 
   #main > article {
-    padding 0.5em;
+    /*padding 0.5em;*/
   }
 
   #main > leftmargin, #main > rightmargin {
@@ -330,6 +314,7 @@ input[type='text'] {
   }
 
   footer {
+    margin-top: 0.25em;
     position: sticky;
   }