title: how to use css inheritance for button colors
body: <p>I've got a basic button style created. I want a blue version, and a gray version. the blue class selector and the gray class selector are never recognized, why not??</p>
  
  <pre><code>a.checkout-button {
      -webkit-transition:border-color 0.218s;
      background-position: initial initial;
      background-repeat: initial initial;
      border:0 solid #DCDCDC;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      color: #EEEEEE;
      display: inline-block;
      font-family: 'Arimo', Arial, sans-serif;
      font-size: 16px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: normal;
      margin-right: 10px;
      padding: 4px 12px;
      position: relative;
      text-decoration: none;
      text-shadow: #FFFFFF 0 0 0;
      text-transform: uppercase;
  }
  a.checkout-button .blue {
      background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
      background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
  }
  a.checkout-button .gray {
      background: -webkit-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
      background: -moz-linear-gradient(linear,0% 10%,0% 70%,from(#4533A9),to(#202020));
  }
  </code></pre>
  
  <p>and the html</p>
  
  <pre><code>&lt;a class="checkout-button gray" id="cancel-btn" href=""&gt;Cancel&lt;/a&gt;
  &lt;a class="checkout-button blue" id="express-checkout-btn" href=""&gt;Express Checkout&lt;/a&gt;
  </code></pre>