Docs (dialogs): Updated the info about default width and margins to match the actual CSS.

Author: jaspermdegroot

docs/pages/page-dialogs.html

@@ -79,14 +79,16 @@ <h2>Styling &amp; theming</h2>
 						<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
 
 			<h2>Dialog width and margins</h2>
-			<p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>
+			<p>For the sake of readability, dialogs have a default <code>width</code> of 92.5% and a <code>max-width</code> of 500 pixels. There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. The dialog's inner container is shifted towards the <code>top</code> with 15px to hide the corner styling if a dialog is used as a control sheet (see above). To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>
 
 <pre><code>
-.ui-dialog .ui-header, 
-.ui-dialog .ui-content, 
-.ui-dialog .ui-footer { 
-<strong>	max-width: 500px; 
-	margin: 10% auto 15px auto; </strong>
+.ui-dialog-contain {
+	<strong>width: 92.5%;</strong>
+	<strong>max-width: 500px;</strong>
+	<strong>margin: 10% auto 15px auto;</strong>
+	padding: 0;
+	position: relative;
+	<strong>top: -15px;</strong>
 }
 </code></pre>