.flex, .flex-wide, .flex-right {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-wide { 
    justify-content: space-between;
}

.flex-wide > * {
    flex-grow: 1;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;

    margin: 4px;
}

.flex-right {
    -webkit-align-content: flex-end;
    justify-content: flex-end;
}

.flex > *:first-child, .flex-wide > *:first-child, .flex-right > *:first-child {
    margin-left: 0;
}

.flex > *:last-child, .flex-wide > *:last-child, .flex-right > *:last-child {
    margin-right: 0;
}


button {
    font-family: 'Abel', 'Pontano Sans', 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
    text-align: center;
    border-radius: 4px;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    border-left: 1px solid #aaa;
    border-top: 1px solid #aaa;
    color: white;
    margin: 4px 4px;
    padding: 5px 10px;
    cursor: pointer;
}

button i {
    padding-right: 4px;
    text-align: center;
}

button.btn-large {
    background-color: #425f9c;
    background-color: #333;
    font-size: 16px;
}

button.btn-large:hover {
    background-color: #007acc;
}

button.btn-small {
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 14px;
    text-decoration: none;
    background-color: #757575;
}

button.btn-small:hover {
    background-color: #aaa;
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    border-right-color: #000;
    border-bottom-color: #000;
}

button.blue {
    background-color: #425f9c;
}

button.blue:hover {
    background-color: #007acc;
}

button.red {
    background-color: #d9534f;
}

button.red:hover {
    background-color: red;
}

button.white {
    background-color: #fcfcfc;
    color: #333;
}

button.white:hover {
    background-color: #fff;
    color: #000;
}

button.green {
    background-color: #41a048;
    background-color: #367e04;
}

button.green:hover {
    background-color: #5cb85c;
    background-color: #48a508;
}

.link {
    cursor: pointer;
}

.link:hover {
    color: #257230;
}

.steelblue {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c5deea+0,8abbd7+31,066dab+100;Web+2.0+Blue+3D+%231 */
    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.steelgrey {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,b3bead+100;Wax+3D+%233 */
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.orange {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc578+0,f97122+100 */
    background: #ffc578; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #ffc578 0%, #f97122 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #ffc578 0%,#f97122 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #ffc578 0%,#f97122 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#f97122',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.springgreen {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9de96+0,8ab66b+44,398235+100;Green+3D+%233 */
    background: #c9de96; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.redfire {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d66b00+0,cc0000+100 */
    background: #d66b00; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #d66b00 0%, #cc0000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #d66b00 0%,#cc0000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #d66b00 0%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d66b00', endColorstr='#cc0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gold {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f230+0,c79810+100 */
    background: #f2f230; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #f2f230 0%, #c79810 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #f2f230 0%,#c79810 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #f2f230 0%,#c79810 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f230', endColorstr='#c79810',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.coal {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
    background: #b5bdc8; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.memberbuttons button {
    width: 38px; height: 38px; font-size: 19px; text-align: center;
}

.memberbuttons button:first-of-type {
    margin-left: 1px;
}

.memberbuttonlabels span {
    display:inline-block; text-align: center; width: 46.5px;
}

.memberbuttonlabels span:first-of-type {
    width: 40px; padding-right: 3px;
}