Provide CSS hooks to allow to style Panels selectively

Right now panels generate this:

<div class="panel expanded">

This doesn't allow to style them selectively. For example in the Toucan skin we want to style the Search panels so that it has rounded corners and some border image.

I'm thus proposing that the #panel* macros generate instead the following

<div class="panel expanded (panel name here)">

where "(panel name here)" is the panel name (the short name not the full name) where accented chars have been transformed to their alpha equivalent and non alpha numeric chars have been stripped.

Rationale:

• This provides the necessary hook
• It's compatible with allowed CSS characters (using the doc name would not be compatible since it can contain accents, dots, hash, etc)
• The name is the same on all instances since it's computed based on the document's name.

Of course if the document's name changes it'll be different but then we can consider it's a different panel.