different CSS for popout vs non-poppedout sheets?

Is there any way to have css treat popped out sheets slightly differently than non-popped out sheets? I was unhappy with the amount of white space on the sides of my character sheet.  .charsheet gives a 10px padding on each side, which is not bad, but then  .ui-dialog-content puts ANOTHER 20px on each side! That is 60 px of wasted whitespace before my character sheet puts a colored boarder and a background color.  So I just used a negative margin to reclaim that space and now my colored boarder and background go all the way to the edge. I am very happy with it and I think it looks much better.  Or at least I was happy until one of my players popped the character sheet out.   It seems that when popped out, .ui-dialog-content tag is not there, so the popped out versions don't have the extra 20px on each side, and my sheets are cut off on the left and right.  So what I want to do, is that when the ui.dialog-content tag is there, I want to have a negative margin that reclaims the relativly large swath of whitespace that tag is wasting. When the tag is not there, I don't want the negative margin. I tried putting in css to do that, but when it did not work remembered that the system puts a sheet- in front of every tag, so it was converting my ui-widget-content .sheet-header { css tags to sheet-ui-widget-content .sheet-header { which of course did not match anything. Is there anything at all that can be done other than leaving the 40px of whitespace on all non-popped-out character sheets? Thank you.

Try this: .charsheet { position: absolute; padding: 0 !important; left: 0; top: 46px; } (top is approximate, use whatever fits, or leave out top if you do not want to change the vertical position). EDIT: What you actually want to do is not possible since the parser puts .charsheet in front of everything, but this should serve as a workaround to just ignore the padding.

I tried it, but I don't think the CSS can ever have any effect, since as you note, the parser changes it to       .sheet-charsheet     which does nothing. The very, very weird thing is that one time when I was playing with it, it seemed to apply the css. But when I tried the same thing again it did not work. 

Chris D. said: I tried it, but I don't think the CSS can ever have any effect, since as you note, the parser changes it to       .sheet-charsheet     which does nothing. The very, very weird thing is that one time when I was playing with it, it seemed to apply the css. But when I tried the same thing again it did not work.  No, the HTML parser changes every class   y to sheet-y unless it starts with sheet- already, but the CSS  parser just adds .charsheet at the start of every selector unless it starts with .charsheet.

Yeah, if the CSS file had sheet- prepended to each class, styling repeating sections in useful ways would be impossible.

Thank you both very much.  The css that gave the perfect result was  .ui-widget-content, .charsheet {   position: absolute;   padding: 0 !important;   left: 0;   top: 46px; } Had to set the padding of both .ui-widget-content and .charsheet to zero to get what I needed.  Thanks. 

The .ui-widget-content CSS will not do anything, since it is transformed into .charsheet .ui-widget-content. However, .charsheet in absolute position will ignore all the padding around it :). What I'm saying is, you can delete the .ui-widget-content selector.

I do not have the slightest clue about the theory of the thing, but in practice, getting rid of ether .charsheet or .ui-widget-content leaves a large swath of whitespace. Including both of them gets rid of all the whitespace around the edge of the sheet, exactly how I want it to. I don't know why. 

That's really impossible , there must be some other error at work there. Anyway, it doesn't matter, as long as it works for you, everything's good :).