Stylesheets for mobile devices

I understand that this theme is supposed to be responsive for mobile devices. However, as I do with most themes I have created a subtheme with its own stylesheet that I have used to customize various aspects of the site, specifically the header. As a result, the header doesn't display properly on mobile devices. This isn't really a big deal because I have no problem creating my own css specifically for mobile devices and tablets. The problem is that no matter what I do I can't get the css in my extra stylesheets to actually affect the page. This is what the stylesheet declaration portion of my .info file looks like:

stylesheets[all][] = rwk_touchpro.css
stylesheets[all][] = color/color_module.css
stylesheets[(max-width: 480px)][] = 480.css
stylesheets[(max-width: 768px)][] = 768.css

If I refresh my site's home page and then right click to view source, I see this in the source:

@import url("http://mysite/sites/all/themes/rwk_touchpro/480.css?mb0ix7");@import url("http://mysite/sites/all/themes/rwk_touchpro/768.css?mb0ix7");

so it looks like the declaration in my info file works. But none of my css changes show up in a mobile device. I also can test this by shrinking the size of my browser to less than 480px and then using firebug and looking for my changes, but the default css is still being used. If I look at firebug's style panel, I can see my css down in the list, but it's below the default css and is being overriden. What can I do to make it supersede the main css, which is what I assumed it would do given that I gave it the max-width media attribute. Any help would be appreciated, thanks in advance.