span.letter {
    font-family: 'Ubuntu', sans-serif;
    height: 30px;
    width: 30px;
    display: inline-block;
    text-align: center;
    font-size: 25px;
    color: white;
    &.red { 
        background: #ed3746;
        background: -moz-linear-gradient(top,  #ed3746 0%, #ed1a2d 100%);
        background: -webkit-linear-gradient(top,  #ed3746 0%,#ed1a2d 100%);
        background: linear-gradient(to bottom,  #ed3746 0%,#ed1a2d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 );
    }
    &.orange {
        background: #d6b855;
        background: -moz-linear-gradient(top,  #d6b855 0%, #d6a400 100%);
        background: -webkit-linear-gradient(top,  #d6b855 0%,#d6a400 100%);
        background: linear-gradient(to bottom,  #d6b855 0%,#d6a400 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 );
    }
    &.blue {
        background: #4094dc;
        background: -moz-linear-gradient(top,  #4094dc 0%, #0466c7 100%);
        background: -webkit-linear-gradient(top,  #4094dc 0%,#0466c7 100%);
        background: linear-gradient(to bottom,  #4094dc 0%,#0466c7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 );
    }
    &.grey {
        background: #838383;
        background: -moz-linear-gradient(top,  #838383 0%, #545454 100%);
        background: -webkit-linear-gradient(top,  #838383 0%,#545454 100%);
        background: linear-gradient(to bottom,  #838383 0%,#545454 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#545454',GradientType=0 );
    }
}