.tab-button{
    background: #e0e0e0;
    background-image: -webkit-linear-gradient(top, #e0e0e0, #aaaaaa);
    background-image: -moz-linear-gradient(top, #e0e0e0, #aaaaaa);
    background-image: -ms-linear-gradient(top, #e0e0e0, #aaaaaa);
    background-image: -o-linear-gradient(top, #e0e0e0, #aaaaaa);
    background-image: linear-gradient(to bottom, #e0e0e0, #aaaaaa); 
    border:1px solid #767676;
    color:#000000;
    Font-size:12px;
    padding:2px 12px;
    height:24px;
}
.tab-button:hover{
    background: #e0e0e0;
    background-image: -webkit-linear-gradient(top, #d4d4d4, #767676);
    background-image: -moz-linear-gradient(top, #d4d4d4, #767676);
    background-image: -ms-linear-gradient(top, #d4d4d4, #767676);
    background-image: -o-linear-gradient(top, #d4d4d4, #767676);
    background-image: linear-gradient(to bottom, #d4d4d4, #767676); 
    color:#000000;
}
.tab-button:focus{
    background-color:#737373;  
    border-color:#767676;       
    color:#000000;
    outline:0px;
}  
.active-tab{
    background: #e0e0e0;
    background-image: -webkit-linear-gradient(top, #9f9f9f, #9f9f9f);
    background-image: -moz-linear-gradient(top, #9f9f9f, #9f9f9f);
    background-image: -ms-linear-gradient(top, #9f9f9f, #9f9f9f);
    background-image: -o-linear-gradient(top, #9f9f9f, #9f9f9f);
    background-image: linear-gradient(to bottom, #9f9f9f, #9f9f9f); 
}


/* media queries */
@media (min-width:600px) and (max-width:900px){
    .tab-button{
        font-size: 11px;
        padding: 2px 10px;
    }
}
@media (max-width:599px){
    .tab-button{
        font-size: 10px;
        padding: 2px 8px;
    }
}