.b-refresh {
    box-shadow: inset 0 0 3px #ededed;
    border-radius: 3px;
    background: #f2f2f2;
    border: 1px solid #ededed;
    line-height: 50px;
    vertical-align: middle;
    padding: 0 0 0 20px;
    font: bold 14px/50px Open Sans;
}
.b-refresh .refresh_on{
   color:#af242c;
}
.b-refresh .refresh_off{
   color: gray;
}
.b-refresh .refresh_on, .b-refresh .refresh_off{
   display: inline-block;
   float: right;
   margin-right: 55px;
   text-decoration:none;
   cursor: default;
   position:relative;
}
.b-refresh .refresh_on.activate, .b-refresh .refresh_off.activate{
   cursor:pointer;
   text-decoration:underline;
   font-weight: normal;
}
.b-refresh .refresh_on:after, .b-refresh .refresh_off.activate:after, .b-refresh .refresh_on.activate:after, .b-refresh .refresh_off:after{
   content: '';
   display: block;
   height: 18px;
   width: 18px;
   background: #af242c;
   position: absolute;
   top: 16px;
}
.b-refresh .refresh_on.activate:after, .b-refresh .refresh_off:after{
   background: gray;
}
.b-refresh .refresh_on:after{
   border-radius:18px 0 0 18px;
   right: -30px;
}
.b-refresh .refresh_off:after{
   border-radius:0 18px 18px 0;
   left: -27px;
}
.b-refresh .refresh_on:before, .b-refresh .refresh_off:before{
   content: '';
   display: block;
   height: 14px;
   width: 14px;
   border-radius:14px;
   background: white;
   position: absolute;
   top: 18px;
   z-index:2;
}
.b-refresh .refresh_on:before{
   left:102px;
}
.b-refresh .refresh_off:before{
   left:-25px;
}
.b-refresh .refresh_on.activate:before, .b-refresh .refresh_off.activate:before{
   display:none;
}