Make control dots smaller in easy slid – they seem to be stuck on a certain size

Hello

I’m using an easy slider and actually want to make all the dots really small – I’ve looked at other posts and tried width: 9px, height: 9px but it didn’t work. Here’s what I have at the moment (below). They don’t seem to get really small, eg, 4 or 5 px round. Thanks :)

/* Easy slider navigation dots ******************/

#top .avia-slideshow-dots a {
    border-style: none !important; 
    font-size: 6px !important; /* not working */
    height: 9px !important;  /* not working */
    width: 9px !important;  /* not working */
    border-radius: 50% !important; 
    border: 0px solid blue !important;
    margin: 0 5px !important; 
}

/* Easyslider navigation active dots */

#top .avia-slideshow-dots a.active {
	/*Your style here */
    font-size: 6px!important; /* not working */
}

#top .avia-slideshow-dots a.goto-slide.active {
    border-style: none !important; 
    border-radius: 50% !important;
    border: 3px solid #7e7e7e !important;
    background: #fff !important; 
    opacity: 100% !important;
}

#top .avia-slideshow-dots a.goto-slide {
    background: #000 !important; 
    opacity: 65% !important;   
}

#top .avia-slideshow-dots.avia-slideshow-controls a {
     vertical-align: middle!important; /* default baseline - use if you want larger active dot */  
}