Row height, plus title and left scroll area size

I am trying use Grid 1.0.1 in a demonstration. The default size for the fonts are too small, so I tried increasing the font size using:

.active-controls-grid {height: 500px; width: 900px;
font-family: "Verdana", "Helvetica", "sans-serif";
font-size: 14pt; menu;}


THen I tried increasing the row size as described.

<style>
.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row {
height: 25px;
}
</style>

But the result doesn't resize everything in the grid. There are three problems:

1) The column title row is clipped on the bottom;
2) The row number on the left hand side turns to elipses with double digits;
3) The content of the data is also clipped on the bottom.

What's the right way to accomplish this?

Scott, All the styles needed are into the docomentation :
http://activewidgets.com/grid.howto.style/
"except one line (text-area-height-expansion )" , here is an example:

.active-controls-grid {height: 100%; font-size: 14pt;}
            
/* row height */
/* http://activewidgets.com/grid.howto.style.rows/row-height.html */
 .active-scroll-left .active-templates-item,
    .active-scroll-data .active-templates-row {
        height: 30px;
    }

/* row height text-area-height-expansion */
/*  not documented */
.active-row-cell {line-height: 30px;} 

/* column-header height */
/* http://activewidgets.com/grid.howto.style.headers/column-header-height.html */
    .active-scroll-top, .active-scroll-corner {height: 30px}
   .active-scroll-left, .active-scroll-data {padding-top: 30px} 

/* row-header-width */
/* http://activewidgets.com/grid.howto.style.headers/row-header-width.html */
    .active-scroll-left, .active-scroll-corner {width: 90px}
    .active-scroll-top, .active-scroll-data {padding-left: 90px}

Thanks - this is close, but still not quite there.

It fixes the problem with the data cells, but neither the chopping of the column header nor the width of the row header.

I modified the basic.htm from the examples and it shows the problem in both IE and Firefox.

Here are my changes:

.active-controls-grid {height: 500px; width: 900px;
font-family: "Verdana", "Helvetica", "sans-serif";
font-size: 14pt; menu;}


/* row height */
/* http://activewidgets.com/grid.howto.style.rows/row-height.html */
.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row {
height: 30px;
}

/* row height text-area-height-expansion */
/* not documented */
.active-row-cell {line-height: 30px;}

/* column-header height */
/* http://activewidgets.com/grid.howto.style.headers/column-header-height.html */
.active-scroll-top, .active-scroll-corner {height: 50px}
.active-scroll-left, .active-scroll-data {padding-top: 50px}

/* row-header-width */
/* http://activewidgets.com/grid.howto.style.headers/row-header-width.html */
.active-scroll-left, .active-scroll-corner {width: 90px}
.active-scroll-top, .active-scroll-data {padding-left: 90px}