body {
    padding-top: 50px;
}
.starter-template {
    padding: 40px 15px;
    text-align: center;
}

.navbar-brand {
    padding: 5px 5px;  /* adjust the top and bottom padding to less than default 15px  if your logo is too small  */
    margin-top: 0px;  /* adjust the top margin if your logo doesn't line up well  */
    height: 48px; /* you should ONLY need to  adjust this when your navbar is larger than default 50px. This should equal the height of computed height of  .navbar>li>a which is by default is 50px. Don't use this to try and make your logo bigger or smaller. Instead adjust the top and bottom padding accordingly. */
}


.navbar-nav>li>a {
    padding-top:0px;
    padding-bottom:0px;
}

/* EDIT these but should be the same depending on on what font you're using */
.navbar-brand, .navbar-nav>li>a {
    height: 48px;
    line-height: 48px;
}


/*EDIT top and bottom padding to shrink and grow image */
.navbar-brand {
    padding: 0px 15px;
}

.circleBase {
    border-radius: 50%;
}




.red {
    width: 25px;
    height: 25px;
    border-radius:50px;
    border:1px solid #6D6D6D;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
    background-color:#fe1a00;
    color:#ffffff;
    display:inline-block;
    box-shadow:inset 1px 1px 0px 0px #f29c93;
}


.green {
    width: 25px;
    height: 25px;
    border-radius:50px;
    border:1px solid #6D6D6D;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #77d42a), color-stop(100%, #5cb811) );
    background-color:#77d42a;
    color:#306108;
    display:inline-block;
    box-shadow:inset 1px 1px 0px 0px #caefab;
}