button,
.button {
	display: inline-block; 
    vertical-align: middle; 
    font: inherit; 
    text-align: center; 
    margin:  0; 
    cursor: pointer; 
    overflow: visible; 
    @include rem-fallback(padding, $base-spacing-unit/4); 
    background-color: $brand-primary;
    border: none;
    border-bottom-width: 2px; 
    border-bottom-style: solid;
    border-bottom-color: darken($brand-primary,10%);
    color: $white;
    font-weight: bold;
    text-decoration: none;

    &:hover {
    	color: $white;
    	background-color: darken($brand-primary, 10%);
    }

    &:focus {
    	outline: 3px solid $highlight;
	}

	&:visited {
		color: $white;
	}

	+ p {
		margin-top: 1em;
	}

	&.btn-large {
		padding: .5em 1em;
		@include rem-fallback(font-size, $base-font-size*1.2);
	}
}

.button--secondary {
	@extend .button;
	background-color: $brand-secondary;
	border-bottom-color: darken($brand-secondary,10%);
	&:hover {
		background-color: darken($brand-secondary,10%);
	}
}

.button--alt {
	@extend .button;
	background-color: $brand-theme;
	border-bottom-color: darken($brand-theme,10%);
	color: $dark-grey;
	&:hover {
		background-color: darken($brand-theme,10%);
		color: $white;
	}
}

.button-group {
	margin-left: $grid-gutter*-1;
	.button {
		margin-left: $grid-gutter;
		margin-bottom: 1.5em;
	}
}