These settings are a bit flakey

I found that the order in which they are set in conjunction with other settings affects what actually happens. This is the only order I could use that got them to work correctly -

.active-templates-item {text-align: right; color: red;)
.active-column-0 {width: 75px;}
.active-column-1 {width: 50px; text-align: right;}
.active-column-2 {width: 60px;}
.active-column-5 {width: 80px; text-align: right;}
.active-column-6 {width: 65px; text-align: right;}
.active-column-7 {width: 70px; text-align: right;}
.active-column-9 {width: 125px;}
.active-column-10 {width: 60px; text-align: right;}
.active-templates-header {color: green;)
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-controls-grid {height: 40%; font: menu;)

If I placed the .a-t-item and .a-t-header in a different order, it affected the layout of the grid - with some bizarre effects. For example, the column heading might change to green instead. The row headings might not be right justified, the font for all the cells changes or their color changes. Obviously, the code has a bug in it somewhere that's causing this to happen.