How alter width of jQuery Mobile Panel

How alter width of jQuery Mobile Panel

Hello,

I have a Panel in jQM 1.3.1 working on a page but I need to increase its width.  I have applied this CSS:
  1. .ui-pannel-inner {
  2.     width: 25em;
  3. }
which does increase the width "visually" so the Panel is now "wide", but the framework creates a <div class="ui-panel-dismiss ui-panel-dismiss-position-right ui-panel-dismiss-display-push ui-panel-dismiss-open" data-panelid="PanelOptions"></div> whose width is apparently defined based on the default Panel width.  This <div> serves as the "clickable" area that closes the Panel.  Normally, this area would exactly match the area of the page not covered by the Panel but it actually covers part of the Panel as well.  As a result, (this is a "right side" Panel) if I click in the Panel near it's left edge (to click on, say, a radio button) I will click in the area covered by the <div class="ui-panel-dismiss... and the Panel closes.  That is, <div class="ui-panel-dismiss covers part of the left side of the Panel.

I know I can add data-dismissible="false" to the <div data-role="panel" ... tag to prevent this behavior but then I lose the ability to close the Panel by clicking on the page. 

How do I "correctly" alter the width of the Panel so that I don't have to use -dismissible="false"?

Thank you.