/**
  * @name Button
  * @description Your standard form button.
  * 
  * @state :hover - Highlights when hovering.
  * @state :disabled - Dims the button when disabled.
  * @state .primary - Indicates button is the primary action.
  * @state .smaller - A smaller button
  *
  * @markup
  *   <button>This is a button</button>
  */
button {
  padding: 5px 15px;
  line-height: normal;
  font-family: "Helvetica Neue", Helvetica;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  border: 1px solid #ddd;
  border-bottom-color: #bbb;
  background: #f5f5f5;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer; 
}

/**
  * @name Anchor Tag
  * @description Your standard link tag.
  * 
  * @state :hover - Background changes when hovering.
  * @state .active - Highlights link when active.
  * 
  * @markup
  *   <a href="#">This is a link</a>
  */
a {
  text-decoration: none;
  color: red;
  padding: 10px;
  display: inline-block;
  background: #efefef;
  border-radius: 5px;
}
  
  /** Hover */
  a:hover {
    background: #cccccc;
  }

  /** Active */
  a:active,
  a.active {
    background: green;
  }
