javascript - css triangle not working -

visit http://onecraftyshop.com

you see grey box on first section star. if @ html under #av_section_2 .arrow-down.

i'm inserting .arrow-down class using jquery.

jquery('#av_section_2').prepend(jquery('<div class="arrow-down"></div>'));

and here css styling:

.arrow-down { width: 0;  height: 0;  border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #eeeeee; position: absolute; top: 0px; left: 50%; } 

so i'm sure jquery fine displaying on page, reason can't css make triangle.

how can fix this? corrected css great!

if need other info let me know!

thanks

you need more specific because other rules in style sheet over-riding it.

.avia-section .arrow-down {   width: 0;    height: 0;    border-left: 20px solid transparent;   border-right: 20px solid transparent;   border-top: 20px solid #eeeeee;   position: absolute;   top: 0px;   left: 50%; }