Add support for Icon API icons, add mastodon logo for font-awesome ic…

…ons.

css/base.css

@@ -195,6 +195,7 @@ dd {
 label {
   margin: 0 0 0.5em;
   font-size: 1.125em; /* relative size */
+  line-height: 2.2em;
 }
 input,
 textarea {

css/components.css

@@ -625,6 +625,19 @@ a.feed-icon {
   color: #7D7D7D;
 }
 
+/*******************************************************************************
+ * Social media icons - general.
+*******************************************************************************/
+
+div.fa-mastodon {
+  display: inline-block;
+  -webkit-mask-image: url(../images/mastodon-logo-black.svg);
+  mask-image: url(../images/mastodon-logo-black.svg);
+  background-image: url(../images/mastodon-logo-black.svg);
+  background-color: #007CBA;
+  content: '-';
+}
+
 /*******************************************************************************
  * On The Web social media links block.
 *******************************************************************************/
@@ -634,6 +647,9 @@ a.feed-icon {
 .block-on-the-web-social-links a i {
   color: #007CBA;
 }
+.block-on-the-web-social-links a svg {
+  background-color: #007CBA;
+}
 .l-footer .block-on-the-web-social-links a i {
   text-align: left;
 }
@@ -644,20 +660,47 @@ a.feed-icon {
   color: #000;
 }
 
+/* add top/bottom margin */
+svg.otw-square {
+  margin: 5px;
+}
+
+/* 8 iccons should stack */
+a.otw-icon {
+  display: inline-block;
+  width: 25%;
+  text-align: center;
+}
+
 a.otw-svg-mask {
   display: inline-block;
   margin: 5px;
   background: #007CBA;
   width: 28px;
   height: 32px;
 }
-a.otw-svg-mask:first-child {
-  margin-left: 0;
-}
-a.otw-svg-mask:last-child {
-  margin-right: 0;
+
+@media (min-width: 22.5em) { /* 360px @ 16px font size -- SM */
+  a.otw-icon {
+    width: auto;
+    text-align: left;
+  }
+  a.otw-icon:first-child svg.otw-square {
+    margin-left: 0;
+  }
+  a.otw-icon:last-child svg.otw-square {
+    margin-right: 0;
+  }
+
+  a.otw-svg-mask:first-child {
+    margin-left: 0;
+  }
+  a.otw-svg-mask:last-child {
+    margin-right: 0;
+  }
 }
 
+
 @media (min-width: 34em) { /* 544px @ 16px font size -- SM */
   .block-on-the-web-social-links {
     padding-bottom: 0;
@@ -809,6 +852,10 @@ a.otw-svg-mask:last-child {
   margin: 0 0 1em;
 }
 
+.field-prefix {
+  line-height: 2.2em;
+}
+
 
 /*******************************************************************************
  * Site contact form.
@@ -858,6 +905,8 @@ body.user-form .page-title {
 *******************************************************************************/
 #user-login .help p {
   font-size: 1.5rem; /* 24px */
+  text-align: right;
+  margin-top: .6em;
 }
 #user-login .form-item {
   padding: 15px 0;
@@ -938,6 +987,8 @@ body.user-form .page-title {
 }
 #user-register-form .help p {
   font-size: 1.5rem; /* 24px */
+  text-align: right;
+  margin-top: .6em;
 }
 #user-register-form fieldset .form-item {
   padding: 5px 0;
@@ -995,7 +1046,8 @@ body.user-form .page-title {
   }
   #user-register-form .form-type-textfield label,
   #user-register-form .form-type-email label {
-    width: 140px;
+    width: 145px;
+    text-align: right;
   }
   #user-register-form .form-item input[type="text"],
   #user-register-form .form-item input[type="email"] {
@@ -1007,8 +1059,9 @@ body.user-form .page-title {
     padding-left: 165px;
   }
 
-  #user-register-form .form-type-checkbox label {
-
+  /* Hide bad descriptions.*/
+  #user-register-form .form-item-captcha-response div.description {
+    display: none;
   }
   #user-register-form #edit-contact .form-item input {
     flex: none;