I created a new overlapping tab menu

Greetings,

This is my first post here.

I like learning things while working on real projects. I am building my first graphic design portfolio website and decided I should create my own menu. Besides I didn't like any that I found.

This took me one full day. This menu has alpha transparent PNG8 images that work in IE6 without a hack or javascript.

Here it is:
http://erdinc.net/menu.html

It validates XHTML 1.0 Strict. I checked in all major browsers and it looks fine.

This is what I'm looking for:
1. The css codes are too complicated. Especially those flap divs on both sides of each tab. Should I use span? When you use span how do you refer to it without giving id's? Generally my code feels complicated.

2. I don't want it to break when text is enlarged in browsers. I tested this and there is good flexibility but is it good enough? How can I improve it? Should I switch from px to em's. I feel like this is going to be very difficult.

3. Regarding accessibility in especially mobile devices, how can I improve the font size settings? Are they fine as they are?

4. To centre the menu I used a wrap. Is there a better way doing this?

5. Is there a way to attach the flap images to left and right of the tab while the tab's width is flexible and expands with longer text?

Thanks
Erdinç
Freelance Graphic Designer
London, England