So, I ran into a dead end. How can I change the right one into the left one (images below) while keeping the layered tabs of the default tabber/gallery. I found this CSS in the comment section of Introducing Desktop Tabs and Portable Galleries in Infoboxes, but at best it only shows four/three tabs, while the rest continue on a straight line to the right, becoming invisible and unusable.
.pi-image-collection { margin-top: 0.5em; text-align: center; } ul.pi-image-collection-tabs { border-bottom: 1px solid #778; font: bold 12px Verdana,sans-serif; list-style: none outside none; margin: 0 0 2px; overflow: visible; padding: 0 0 4px; text-align: center; } ul.pi-image-collection-tabs li.current { background: none repeat scroll 0 0 #FFF; border-bottom: 1px solid #FFF; font-weight: bold; } ul.pi-image-collection-tabs li.current:hover { background-color: #FFF; border-bottom: 1px solid white; } ul.pi-image-collection-tabs li { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; display: inline; line-height: normal; list-style: none outside none; background: none repeat scroll 0 0 #DDE; border-color: #778 #778 -moz-use-text-color; border-image: none; border-style: solid solid none; border-width: 1px; color: #448; margin: 0 0 0 3px; padding: 3px 0.5em; text-decoration: none; } ul.pi-image-collection-tabs li:hover { background: none repeat scroll 0 0 #AAE; border-color: #227; color: #000; } .pi-tab-link.pi-item-spacing { padding: 3px 5px 4px; }