UI: Correctly align button icons in Firefox (#275)

Author: microbit-josephine

static/css/style.css

@@ -157,18 +157,7 @@ h2 {
   background: #FFFFFF;
 }
 html[data-useragent*='MSIE 10.0'] #small-icons .status-icon  {
-  width: 37px;
-  height: 37px;
-  border: 6px solid #FFCC33;
-  border-radius: 50%;
-  margin: .2rem;
-  text-align: center;
-  font-size: 1.4rem;
   line-height: 2.15rem;
-  padding: 0;
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif;
-  color: #336699;
-  background: #FFFFFF; 
 }
 
 #small-icons .holder {
@@ -301,20 +290,18 @@ html[data-useragent*='MSIE 10.0'] #small-icons .status-icon  {
   color: #336699;
   background: #FFFFFF;
 }
+
+@-moz-document url-prefix() { 
+  .roundsymbol {
+    line-height: 3.7rem;
+  }
+  #small-icons .status-icon {
+    line-height: 2.15rem;
+  }
+}
+
 html[data-useragent*='MSIE 10.0'] .roundsymbol {
-  width: 4rem;
-  height: 4rem;
-  border: 6px solid #FFCC33;
-  border-radius: 50%;
-  margin: .2rem;
-  margin-bottom: 0;
-  text-align: center;
-  font-size: 2.6rem;
   line-height: 3.7rem;
-  padding: .1em;
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif;
-  color: #336699;
-  background: #FFFFFF;
 }
 
 .roundbutton:focus, .roundbutton:active {