/**
 * @file
 * Structural styles for Seven’s UI buttons
 *
 * Apply these classes to any element (<link>, <button>, <input>, etc.) that
 * should appear as a button.
 */

/**
 * Buttons.
 *
 * 1. Enable z-index on buttons.
 * 2. Normalize 'line-height'; can’t be changed from 'normal' in Firefox 4+.
 * 3. Allows full range of styling in Webkit and Gecko.
 * 4. Use px units to ensure button text is centered vertically.
 * 5. Use rems to avoid the font size cascade of ems, with a px fallback for
 *    older browsers.
 * 6. Prevent fat text in WebKit.
 *
 * @todo Consider moving box-sizing into base.css under a universal selector.
 * See https://www.drupal.org/node/2124251
 *
 */
.button {
  box-sizing: border-box;
  display: inline-block;
  position: relative;  /* 1 */
  text-align: center;
  line-height: normal;  /* 2 */
  cursor: pointer;
  -webkit-appearance: none;  /* 3 */
  -moz-appearance: none;  /* 3 */
  padding: 4px 1.5em;  /* 4 */
  margin-left: .5em;
  border: 1px solid #a6a6a6;
  border-radius: 20em;
  	text-decoration: none;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
	-webkit-font-smoothing: antialiased;
	
  }
.button:hover,
.button:focus {
  color: #1a1a1a;
  text-decoration: none;
  outline: none;
}
.button:hover {
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}

/* Prevent focus ring being covered by next siblings. */
.button:focus {
  z-index: 10;
  border: 1px solid #3ab2ff;
  box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
}
.button:active {
  border: 1px solid #a6a6a6;
  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  -webkit-transition: none;
  transition: none;
}