/* ------------ BUTTON STYLES ------------ */

/* Include these buttons in your html with `<div class="byu-button color">Button Text</div>` */


/* --- standard button --- */

.byu-button {
    display: inline-block;
    padding: 9px 12px;
    cursor: pointer;
    background-color: #000;
    color: #fff;
    font-family: Vitesse A, Vitesse B, Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.byu-button:hover {
    background: #444;
}

.byu-button:active {
    background-color: #333;
    -webkit-box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.35);
    -moz-box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.35);
    box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.35);
}


/* --- white buttons --- */

/* white/gray button */
.byu-button.white {
    background-color: #fff;
    color: #141414;
    border: 1px solid #c5c5c5;
}

.byu-button.white:hover {
    background-color: #ddd;
}

.byu-button.white:active {
    background-color: #ccc;
}

/* white/navy button */
.byu-button.whitenavy {
    background-color: #fff;
    color: #002e5d;
    border: 1px solid #002e5d;
}

.byu-button.whitenavy:hover {
    background-color: #869db5;
    color: #fff;
}

.byu-button.whitenavy:active {
    background-color: #002e5d;
    color: #fff;
}


/* --- grey buttons --- */

/* light gray button */
.byu-button.lightgray {
    background-color: #E5E5E5;
    color: #002e5d;
}

.byu-button.lightgray:hover {
    background-color: #F2F2F2;
}

.byu-button.lightgray:active {
    background-color: #666;
}

/* medgray button */
.byu-button.medgray {
    background-color: #666;
    color: #fff;
}

.byu-button.medgray:hover {
    background-color: #a2a2a2;
}

.byu-button.medgray:active {
    background-color: #7a7a7a;
}


/* --- blue buttons --- */

/* royal blue button */
.byu-button.royal {
    background-color: #003da5;
    color: #fff;
}

.byu-button.royal:hover {
    background-color: #114bad;
}

.byu-button.royal:active {
    background-color: #002d95;
}

/* navy button */
.byu-button.navy {
    background-color: #002e5d;
    color: #fff;
}

.byu-button.navy:hover {
    background-color: #003da5;
}

.byu-button.navy:active {
    background-color: #114bad;
}

/* light blue button */
.byu-button.lightblue {
    background-color: #869db5;
    color: #fff;
}

.byu-button.lightblue:hover {
    background-color: #96adc5;
}

.byu-button.lightblue:active {
    background-color: #768da5;
}

/* extra light blue button */
.byu-button.xlightblue {
    background-color: #c3ddf9;
    color: #002e5d;
}

.byu-button.xlightblue:hover {
    background-color: #cfdfff;
}

.byu-button.xlightblue:active {
    background-color: #b3cde9;
}

/* --- secondary color buttons --- */

/* teal button */
.byu-button.teal {
    background-color: #84dcb4;
    color: #fff;
}

.byu-button.teal:hover {
    background-color: #e5f7ef;
    color: #002e5d;
}

.byu-button.teal:active {
    background-color: #74cca4;
    color: #002e5d;
}

/* red button - for Errors only */
.byu-button.red {
    background-color: #b3041a;
    color: #fff;
}

.byu-button.red:hover {
    background-color: #d3243A;
}

.byu-button.red:active {
    background-color: #B3041A;
}

/* yellow button */
.byu-button.yellow {
    background-color: #fcc015;
    color: #002e5d;
}

.byu-button.yellow:hover {
    background-color: #fef2d0;
}

.byu-button.yellow:active {
    background-color: #ffcf1a;
}

/* green button */
.byu-button.green {
    background-color: #66B200;
    color: #fff;
}

.byu-button.green:hover {
    background-color: #86d220;
}

.byu-button.green:active {
    background-color: #56a200;
}

/* orange button */
.byu-button.orange {
    background-color: #d57301;
    color: #fff;
}

.byu-button.orange:hover {
    background-color: #f59321;
}

.byu-button.orange:active {
    background-color: #c56300;
}