Stylish and Drag/Drop on the Page Toolbar

Like many of you I am using  stylish to make more of the Page Toolbar visible.  However, when I drag/drop pages to rearrange them, the larger page toolbar does not behave well.  Specifically, when I try to drag/drop a page into a new position, I can discern no pattern in how the "hole" is opening up for it to land in.  It is definitely not tracking my mouse pointer position.  The css code I am using is below. Has anyone figured this out?  Is my css code out of whack? #page-toolbar { height: 65%!important; width: 78%!important; } .availablepage { float: left!important; width: 120px!important; height: 80px!important; margin-bottom: 80px!important; } #page-toolbar .container { height: 100%!important; } #page-toolbar .pages .availablepage img.pagethumb { margin-left: auto!important; margin-right: auto!important; max-width: 80px!important; max-height: 80px!important; } #page-toolbar .pages .availablepage span { position: inherit!important; margin-top: 40px!important; font-size: small!important; } #page-toolbar .pages .availablepage .duplicate { background-color: #54C3E8!important; }  

That's probably not something you can fix with styles.  It likely has to do with the expectations of the jQuery Drag/Drop configuration.  I would suggest disabling the style when you want to organize, and enable it when you want to play.