color picker div appears beneath shadowbox, and i can't get it to appear above it

I'm using a jquery plugin called SevenColorPicker, which makes a color picker box appear. The problem is that it's being used in a shadowbox which itself sits over the main page, and appears behind the shadowbox, so it can't be seen. I thought i'd be able to fix this with adding a higher z-index to the color picker:

jQuery('#_seven_color_selecter').css('z-index',500);

(the color picker has id _seven_color_selecter) but this isn't working. Is there a better way to make sure it's visible?

The page in question isn't public, but in case you want to have a look at the problem in person as it were, i've zipped it up and put it in my public dropbox here: http://dl.dropbox.com/u/846812/all_lessons.zip - unzip it and open "all_lessons开发者_运维百科.html". The shadowbox is open and the color picker is present on the page but is hidden behind the shadowbox. You can hide the shadowbox with jQuery("div.content").hide();

Grateful for any advice - max

---

Your on the right track but #facebox z-index is 9999 so you just need to the your colour selector z-index higher that that