Hi Steven,
With some trial and error I've been able to (almost) achieve what I was aiming for:
Adding "margin-top: -40px !important;" to "div.jb-area-caption" has moved the captions up.
Adding "margin-top: 80px !important;" to ".jb-navigation" has moved the navigation buttons down (below the caption area).
Adding "margin-top: -60px !important;" to ".jb-flag-large-screen-mode .jb-area-large-mode-title" has moved the title up.
Adding the code below has moved all the thumbs up as well:
.jb-flag-large-screen-mode .jb-idx-show-area {
margin-top: -60px !important;
height: auto;
}
For the result see: www.athoss.nl/2013/02/
The only thing left that I would like to change is to "force" Juicebox to use the extra space that's now available below the last row of thumbs for another row of thumbs. No matter how I resize the browser, the space is always there, it just isn't used. I assume this is because I adjusted things manually and Juicebox probably isn't aware of this space (like you wrote).
It's probably a long shot, but do you happen to know if there's any way to force it to add one row of thumbs?