I have a weird problem.
I've changed my game interface a lot by using CSS.
The thing is: when I want to [see topic title] it just won't stick. I change the CSS in the HTML-tools when the game is running and achieve exactly what I want but when I put the code in the CSS and rerun the game it goes back to the way it was before.
This only happens with the gridpanel.

So my question is:
Does anyone know if something else takes president over that pane? (and if so what? where? why? gaaaaaah!)

Here's the code I use for the pane.

div#gridPanel
{
    position: fixed;
    top: 470px;
    border-radius: 25px 0px 25px 0px;
    border: black solid 3px;
    left: 15px;
    width: 250px;
    height: 160px;
    overflow: hidden;
}

... I've checked, rechecked, rechecked again, rewritten the code, and again, and again, but I won't get it to work.

Ok, for some weird a$$ reason the game gives the pane a - 4000 left margin (as in, yes, minus).
I'm even more confused now.

There's javascript that dynamically changes the size of the grid panel when the panes, status bar, or other elements are shown/hidden; and also when the window is resized. I think these functions will also be run when the game starts, overriding any margins specified in the CSS file.

Looks like this also varies between the desktop and web players, so making it work as intended will be really painful.
If you want to move or resize the grid, I would suggest moving #gridCanvas out of #gridPanel into a new div that you can move more freely. Or renaming gridPanel to prevent the existing JS messing with it ($('#gridPanel').attr('id', 'myGridPanel'); or similar). But in either case, you'd have to make sure your new CSS doesn't make the game unplayable if the window is resized unexpectedly.

Aha! Sounds complicated. I'll get right on it.
Thanks a lot MrA!