foundation 4, clearing lightbox thumbs not displaying correctly - zurb-foundation

Question

I posted a test site at http://jobajoba.org that shows some foundation 4 elements.
I am using vanilla out-of-box foundation 4 framework but having trouble with lightbox thumbs showing up as bullet items in a list (they should be in row similar to "block grid" example shown on the page).
I can't figure out what I am doing wrong... note that everything else on page seems to work out of box.
On edit:
I forgot about this question, but about a month after I posted this, Zurb indicated to me that they used a block-grid to create the effect. Something like this worked for me:
<div>
<ul class="large-block-grid-4 small-block-grid-2" data-clearing>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
</a>
</li>
</ul>
</div>

Answer 1

Foundation's documentation examples uses a custom docs.css file:
http://foundation.zurb.com/docs/assets/docs.css
The styles for the Clearing Lightbox found under the heading /* Clearing Styles */ are exactly the same as those included in the vanilla download. However, the file also has an extra section specifically for the documentation example.
/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }
Adding these rules to your own css file should provide the layout you're looking for.