﻿.button {
    border: none;
    display: inline-block;
    vertical-align: baseline;
    font-family: proxima-nova;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 10px;
    padding: 5px 10px;
    outline: none;
    -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 3px; /* Firefox 1-3.6 */
    border-radius: 3px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    cursor: pointer;
}

.button:last-child {
	margin-right: 0;
}

/* Disabled button */

.d_state {
	color: rgb(255,255,255);
	background: rgb(217,217,214); /* PANTONE Cool Gray 1 C */
	cursor: default;
}

/* active button */

.a_state {
	color: rgb(255,255,255);
	background: rgb(84,88,90); /* PANTONE 425 C */
	transition: background 0.35s;
}
.a_state:hover, 
.a_state:active {
	background: rgb(217,217,214); /* PANTONE Cool Gray 1 C */
	transition: none;
}
.a_state:active {
	box-shadow: rgb(84,88,90) 0 3px 6px inset; /* PANTONE 425 C */
	padding-top: 6px;
	padding-bottom: 4px;
}

.button_group {
	display: block;
	margin: 0;
	text-align: justify;
}

.button_group .button {
	vertical-align: top
}

.boxed_button {
    border: none;
    display: inline-block;
    vertical-align: baseline;
    font-size: 0.8rem;
    padding: 5px 10px;
    font-family: proxima-nova;
    text-transform: uppercase;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    /* -webkit-user-select: none;  Chrome all / Safari all */
    /* -moz-user-select: none;     Firefox all */
    /* -ms-user-select: none;      IE 10+ */
    /* user-select: none; */
}
.grey {
    border: solid 1px rgb(217,217,214); /* PANTONE Cool Gray 1 C */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    .grey:hover,
    .grey:active {
        border: solid 1px rgb(84,88,90); /* PANTONE 425 C */
        background: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
.dark-grey {
    border: solid 1px rgb(84,88,90); /* PANTONE 425 C */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    .dark-grey:hover,
    .dark-grey:active {
        border: solid 1px rgb(255,255,255); /* White */
        background: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
.white {	
    border: solid 1px rgb(255,255,255); /* White */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.white:hover, 
.white:active {	
    border: solid 1px rgb(84,88,90); /* PANTONE 425 C */
    background: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
.reversed {	
    color: rgb(255,255,255); /* White */
    border: solid 1px rgb(255,255,255); /* White */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.reversed:hover, 
.reversed:active {	
    color: rgb(255,255,255); /* White */
    border: solid 1px rgb(84,88,90); /* PANTONE 425 C */
    background: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
.boxed_button.selected {
    background: rgb(255,255,255); /* White */
    border: solid 1px rgb(255,255,255); /* White */
}