SharePoint 2010 Branding: Dialog box styling

While working on my first SharePoint 2010 branding project, I edited the master page to add a new block of HTML for a header and also to change the position of the top navigation. Something like this:

 

Not wanting to change the HTML structure that I already created, I hid all the unwanted styling with CSS. With the selector html.ms-dialog you can target only the elements inside a dialog box. The design also required left and right margins on the entire content. I did this using CSS. So far so good, the problem was that these styles were also added to the dialog boxes:


Not wanting to change the HTML structure that I already created, I hid all the unwanted styling with CSS. With the selector html.ms-dialog you can target only the elements inside a dialog box. So this is my code:

html.ms-dialog #head {
    display: none;
}

html.ms-dialog body #s4-bodyContainer-inner {
    margin: 0;
}

And this is the end result:

If you only need to hide custom elements you've added to the master page, you should check this article.