MaxiGallery - Numbered Images in Overview (galleryoutertpl.html)#

I am using MaxiGallery on my site.

I have CSS set up as the following:

#photoGallery .childscontainer ul.thumbs li {
margin: 20px;
float: left;
}
#photoGallery .childscontainer {
margin-bottom: 20px;
float: left;
}
#photoGallery .pagenumbers {
margin-bottom: 20px;
}
#photoGallery .picturecontainer {
text-align: center;
}
#photoGallery .picturecontainer .title {
font-weight: bold;
margin-top: 20px;
}
#photoGallery .picturecontainer .picture img {
border: none;
margin: 0 !important;
}
#photoGallery .picturecontainer .picture a {
background: none !important;
text-decoration: none;
border: 0;
}
#photoGallery .managecontainer {
float: left;
}
#photoGallery .managecontainer textarea {
width: 395px;
}
#photoGallery .managecontainer hr {
width: 400px;
text-align: left;
margin: 20px auto 20px 0;
}
#photoGallery .pictureform .managepicture {
float: left;
clear: left;
}
#photoGallery .pictureform .shortfields {
margin-left: 20px;
float: left;
}
#photoGallery .pictureform .clearboth {
clear: both;
}
#photoGallery .uploadcounter {
width: 20px;
margin-bottom: 10px;
float: left;
clear: left;
}
#photoGallery .uploadfile {
margin-bottom: 10px;
float: none;
}
#photoGallery .uploadfile input {
width: 385px;
}
#photoGallery .uploadform {
margin-top: 20px;
margin-bottom: -10px;
clear: both;
}
#photoGallery .uploadform .clearboth {
clear: both;
}
#photoGallery .slideshowwrapper {
text-align: center;
}
#photoGallery .deleteform {
float: left;
}
#photoGallery .synchform {
float: left;
}

#photoGallery .thumbscontainer {
float:left;
margin-bottom:20px;
}

#photoGallery .masker li{
float:left;
height:90px;
overflow: hidden;
padding:10px;
width:90px;
}
#photoGallery .masker a img {
border:medium none;
}
#photoGallery .masker a:hover img {
opacity:0.7;
}
#photoGallery .masker {
margin-bottom:-5px;
width:670px;
}

#photoGallery ol.thumbs li {
display: inline-block;
float:left;
list-style-positionutside;
list-style-type:none;
margin:0px 0px 0pt !important;
color:#003333;
}
#photoGallery ol.thumbs {
clear:both;
list-style-positionutside;
margin:0pt;
padding:0pt;
}
#photoGallery ol.thumbs li img {
border:medium none;
margin:0pt !important;
}
#photoGallery ol.thumbs li a {
background:transparent none repeat scroll 0% !important;
border:0pt none;
text-decoration:none;
}
#photoGallery ol.thumbs li p {
overflow:hidden;
}
#photoGallery .thumbs .clearboth {
clear:both;
}

The image of the way the files are laying is in the attachment. I want them to be clipped squares, but I also need them to be numbered. The numbers are not showing up, and I think it is b/c they are getting clipped.

Here is my 'galleryoutertpl.html'

[+maxigallery.managebutton:isnot=``:then=`

<center>[+maxigallery.managebutton+]</center>



`+]

[+maxigallery.childgalleries:isnot=``:then=`


`+]

[+maxigallery.pagenumbers:isnot=``:then=`

[+maxigallery.pagecount:isnot=`1`:then=`


`+]
`+]

[+maxigallery.embedtype:is=`smoothgallery`:then=`

`+]

[+maxigallery.embedtype:isnot=`smoothgallery`:then=`
[+maxigallery.pictures:isnot=``:then=`

</div>
`+]

Can anyone explain to me how to get the numbers under the images??

Thanks in advance for you help.

L
`+]

Anyone??