title: Firefox CSS error (Works fine in Chrome)
body: <p>I have come across a problem, the below code works fine in Chrome however it doesn't in Firefox.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="client-controls"&gt;
  &lt;p style="margin-left: -90px;"&gt;&lt;b&gt;DHCP (?)&lt;/b&gt;&lt;/p&gt;
  &lt;input type="checkbox" name="uncheckdhcp" id="uncheckdhcp" onclick="return uncheckdhcp();" checked/&gt;
  </code></pre>
  
  
  
  <pre class="lang-css prettyprint-override"><code>#client-controls html {
      background-color: #e4ded4;
      background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
      box-shadow: inset 0 0 100px hsla(0,0%,0%,.1);
      height: 100%;
  }
  #client-controls input[type="checkbox"] {
      background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
                        -webkit-linear-gradient(left, #f66 50%, #088A08 50%);
      background-size: 100% 100%, 200% 100%;
      #background-position: 0 0, 15px 0;
      border-radius: 25px;
      box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
                  inset 0 0 10px hsla(0,0%,0%,.5),
                  0 0 0 1px hsla(0,0%,0%,.1),
                  0 -1px 2px 2px hsla(0,0%,0%,.25),
                  0 2px 2px 2px hsla(0,0%,100%,.75);
      cursor: pointer;
      height: 30px;
      left: 0%;
      #margin: -12px -37px;
      padding-right: 0px;
      #position: left;
      top: 50%;
      margin-top: -20%;
      margin-left: -100px;
      width: 80px;
      -webkit-appearance: none;
      -webkit-transition: .25s;
  align:left;
  float:left;
  }
  #client-controls input[type="checkbox"]:after {
      background-color: #eee;
      background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
      border-radius: 25px;
      box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
                  inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
                  0 1px 3px 1px hsla(0,0%,0%,.5),
                  0 0 2px hsla(0,0%,0%,.25);
      content: '';
      display: block;
      height: 100%;
      left: 0;
      #position: relative;
      top: 0;
      width: 25px;
  }
  #client-controls input[type="checkbox"]:checked {
      background-position: 0 0, 80px 0;
      padding-left: 50px;
      text-align: left;
      content-align: left;
      padding-right: 0;
  }
  </code></pre>
  
  
  
  <p>Please can someone let me know where I am going wrong, and perhaps what needs changing?</p>
  
  <p>PS: This code is for a sliding toggle button, it displays in chrome, FF shows just a checkbox with the shadow background.
  Thankyou.</p>