Foot in cast -> boredom; Omega responsive theme

My foot is still in the cast, so I have been mostly stuck at home on our 2nd floor. I've got a little project to do for a friend's firefighters union. I took some of my free time to do something I knew was possible but hadn't tried to do before.

Before I get into it, please don't tell me how ugly the site is. OTOH, please do feel free to give me some constructive feedback. I'm a programmer, not a graphic artist.

http://test.crafty-fox.com

I decided to use Omega theme's built in responsive design features. The basic idea is that it uses media queries to select among particular CSS files to include. The global.css file is always included; the [theme]-default.css file is always included except for the narrowest breakpoint (eg, everything but smartphones); and the [theme]-narrow.css, [theme]-normal.css and [theme]-wide.css files are used only on their respective individual breakpoints.

My goal was to provide a different interface for smartphone use vs. wider displays. The wider displays will show a normal banner with a logo and a site title, and a menu bar below that. Very normal. The smartphone page won't have a banner, logo or site name at the top because that takes up too much room. Instead, there will be a set of icons that allow the visitor to select where they want to go on the site, which are easier to hit on a phone than a regular link.

To make this work, all changes have to be effected with only CSS, so any images have to be loaded through a background-image: url() attribute.

Here is the relevant code from my global.css file:

The div.region-menu-inner code sets up the main menu items so they will appear centered.

The li code makes each menu item be a block and displays the icon image as the background. The inline-block attribute makes the whole li follow the text-align attribute from the surrounding div, so they will center. The vertical-align attribute makes text inside the li sink to the bottom.

Finally, the padding-top attribute of the li a code forces the menu item text to start below the bottom of the icon image.

Because this CSS is in the global.css file, it will be used on all breakpoints unless changed. So the [theme]-default.css file has to turn some of it off:

It leaves the menu items centered on the page, however.

When I get some artwork from my friend, I'll create a banner that will only appear on the wider displays.