Active Widgets Styles

Dear All,
I made a gride control using Active Widgets Version 1 and i want to update it to version 2, but i have a problem, i have css file from version 1 when i put it in version 2 their is no changes.

please i want to update this file to work in version 2:
this is the file
// ------------------------------------------------------------------
xml {
DISPLAY: none
}
.gecko {
moz-box-sizing: border-box
}

.active-box-normal {
BORDER-RIGHT: #bcc7e2 1px solid; BORDER-TOP: #bcc7e2 1px; OVERFLOW-Y: hidden; VERTICAL-ALIGN: top; BORDER-LEFT: #bcc7e2 1px; WIDTH: 100%; COLOR: #000000; DIRECTION: ltr; BORDER-BOTTOM: #bcc7e2 1px solid; POSITION: relative; HEIGHT: 18px
}
.active-box-item {
BORDER-RIGHT: 1px; PADDING-RIGHT: 5px; BORDER-TOP: 1px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; BORDER-LEFT: 1px; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: 1px; WHITE-SPACE: nowrap; HEIGHT: 100%; TEXT-OVERFLOW: ellipsis; BACKGROUND-COLOR: #7187c1; moz-box-flex: 1
}

.active-gecko-item {
HEIGHT: 100%; moz-box-align: center
}
.active-box-image {
LEFT: 0px; MARGIN: 0px 3px -1px 0px; VERTICAL-ALIGN: middle; OVERFLOW: hidden; WIDTH: 16px; LINE-HEIGHT: 1px; TOP: 0px; HEIGHT: 100%
}
.gecko {
VERTICAL-ALIGN: top
}
.active-image-none {
WIDTH: 0px; MARGIN-RIGHT: 0px
}
.active-box-resize {
FONT-SIZE: 100px; RIGHT: -5px; OVERFLOW: hidden; WIDTH: 10px; CURSOR: e-resize; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
.active-box-sort {
VERTICAL-ALIGN: top; OVERFLOW: hidden; WIDTH: 0px; HEIGHT: 100%
}
.active-box-item .gecko {
HEIGHT: 16px
}
.active-box-item .gecko {
HEIGHT: 16px
}

.gecko {
Z-INDEX: 1000; MARGIN-LEFT: -5px; LINE-HEIGHT: 12px; MARGIN-RIGHT: -5px; POSITION: relative
}
.active-scroll-data {
PADDING-RIGHT: 0px; PADDING-LEFT: 28px; Z-INDEX: 1; LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 18px; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
.active-scroll-top {
PADDING-RIGHT: 20px; PADDING-LEFT: 28px; Z-INDEX: 2; LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 0px; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 0px; HEIGHT: 18px
}
.active-scroll-left {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 2; LEFT: 0px; PADDING-BOTTOM: 20px; OVERFLOW: hidden; WIDTH: 28px; PADDING-TOP: 18px; POSITION: absolute; TOP: 0px; HEIGHT: 100%; TEXT-ALIGN: center
}
.active-scroll-corner {
Z-INDEX: 3; LEFT: 0px; OVERFLOW: hidden; WIDTH: 28px; POSITION: absolute; TOP: 0px; HEIGHT: 18px
}
.active-scroll-bars {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 4; LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: scroll; WIDTH: 100%; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
.active-scroll-space {
WIDTH: 0px; HEIGHT: 0px
}
.active-scroll-fill {
DISPLAY: inline; HEIGHT: 100%
}
.gecko {

}
.gecko {

}
.gecko {

}
.gecko {

}
.active-controls-grid {
OVERFLOW: hidden; WIDTH: 100%; CURSOR: default; POSITION: relative; HEIGHT: 100%; moz-user-focus: normal; moz-user-select: none
}
.active-templates-header {
DISPLAY: inline; BACKGROUND: #dfe4f2; WIDTH: 100px; HEIGHT: 100%
}
.active-header-over .active-box-item {
BACKGROUND: #333399; COLOR: #ffffff
}
.active-header-pressed {
BACKGROUND: #7187c1
}
.active-header-pressed .active-box-item {
BACKGROUND: ##333399; LEFT: 1px; POSITION: relative; TOP: 1px
}
.gecko {

}
.active-templates-row {
OVERFLOW-Y: hidden; WIDTH: 100%; WHITE-SPACE: nowrap; HEIGHT: 18px; moz-user-select: none
}
.active-row-cell {
PADDING-RIGHT: 5px; DISPLAY: inline; PADDING-LEFT: 5px; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 100px; LINE-HEIGHT: 14px; PADDING-TOP: 0px; HEIGHT: 100%; TEXT-OVERFLOW: ellipsis
}
.gecko {

}
.active-selection-true {
BACKGROUND-COLOR: #333399; COLOR: #FFFFFF; important
}
.active-selection-true .active-row-cell {
BACKGROUND-COLOR: #333399; COLOR: #FFFFFF; important
}
.active-column-0 {
Z-INDEX: 99
}
.active-column-1 {
Z-INDEX: 98
}
.active-column-2 {
Z-INDEX: 97
}
.active-column-3 {
Z-INDEX: 96
}
.active-column-4 {
Z-INDEX: 95
}
.active-column-5 {
Z-INDEX: 94
}
.active-column-6 {
Z-INDEX: 93
}
.active-column-7 {
Z-INDEX: 92
}
.active-column-8 {
Z-INDEX: 91
}
.active-column-9 {
Z-INDEX: 90
}
.active-column-10 {
Z-INDEX: 89
}
.active-column-11 {
Z-INDEX: 88
}
.active-column-12 {
Z-INDEX: 87
}
.active-column-13 {
Z-INDEX: 86
}
.active-column-14 {
Z-INDEX: 85
}
.active-column-15 {
Z-INDEX: 84
}
.active-column-16 {
Z-INDEX: 83
}
.active-column-17 {
Z-INDEX: 82
}
.active-column-18 {
Z-INDEX: 81
}
.active-column-19 {
Z-INDEX: 80
}

.active-gecko-box {
OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%; moz-box-flex: 1
}
.active-templates-status {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}
.active-templates-error {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}

.active-box-image {
BACKGROUND-REPEAT: no-repeat
}

#grid1 {
BACKGROUND: white; HEIGHT: 490px
}
#grid .active-column-0 {
FONT-WEIGHT: bold; TEXT-ALIGN: left
}
#grid .active-column-1 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: left
}
#grid .active-column-2 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: left
}
#grid .active-column-3 {
FONT-WEIGHT: bold; FONT-SIZE: 11px;TEXT-ALIGN: right
}
#grid .active-column-4 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-5 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-6 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-7 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-8 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-9 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-10 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-11 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-12 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}
#grid .active-column-13 {
FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-ALIGN: right
}

.active-grid-row {
BORDER-BOTTOM: white 1px solid
}
.active-grid-column {
BORDER-RIGHT: white 1px solid
}
.active-selection-true .active-column-0 A {
COLOR: red
}
.gecko {

}
:link {
PADDING-RIGHT: 2px; FONT-SIZE: 11px; COLOR: #929292; /*TEXT-DECORATION: none;*/ FONT-FAMILY: Arial
}

:link:Hover {
PADDING-RIGHT: 2px; FONT-SIZE: 11px; COLOR: red; TEXT-DECORATION: underline; FONT-FAMILY: Arial
}

:link:Visited {
PADDING-RIGHT: 2px; FONT-SIZE: 11px; COLOR: #7187c1; /*TEXT-DECORATION: none;*/ FONT-FAMILY: Arial
}

:link:Visited:Hover {
PADDING-RIGHT: 2px; FONT-SIZE: 11px; COLOR: #929292; TEXT-DECORATION: underline; FONT-FAMILY: Arial
}

.active-templates-link {
PADDING-LEFT: 3px; FONT-SIZE: 11px; COLOR: #7187c1; FONT-FAMILY: Arial
}
.active-controls-grid {
FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: arial
}
// --------------------------------------------------------------
Please i need a response to that to have a desion to buy this version


thanks