npm - @owp/core - Versions diffs - 2.4.1 → 2.5.0 - Mend

@owp/core 2.4.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (545) hide show

package/treegrid/Compatible/Office/Grid.css ADDED Viewed

@@ -0,0 +1,2770 @@
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                      TreeGrid CSS style                                                 */
+/*                                                         Office style                                                    */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* To remove all the comments replace such RegEx: \/\*([^\*]|\n|\r)*\*\/|\s*\r\n?\s*(?=\r\n?)|\s+(?=[\{\}])|\s+(?=\r)
+   In the description, the sentence starting by "@" lists what only should be changed in the CSS class
+*/
+/* ------------- Group definition for all TreeGrid tags ------------- */
+/* ! Note, here is no style prefix, it is shared among all TreeGrid styles
+   @ Set here default values for CSS attributes of tags <td>, <th>, <tr>, <table>, <tbody>, <div>, <span>, <u>, <button>, <input>, <textarea>
+   if your global style sheet redefined them, especially attributes controlling size and measurement, otherwise TreeGrid will be switched to Safe CSS mode
+*/
+.COMain * { -webkit-box-sizing:content-box!important; -moz-box-sizing:content-box!important; box-sizing:content-box!important; }
+.COMain button,.COMain input { height:auto; }
+.COMain b,.COMain .Bold { color:blue; font-weight:bold; }
+.COMain i,.COMain .Blue { color:blue; font-style:normal; }
+.COMain em,.COMain .Red { color:red; font-style:normal; }
+.COMain s,.COMain .Gray { color:gray; text-decoration:none; }
+/* ------------- Base tags ------------- */
+/* @ Do not change.
+   FF3 version is used for Firefox 3 - 19 due its slow bug in rendering table cells with different borders
+*/
+.CONone { display:none; }
+.COSection,.COSectionFF3 { table-layout:fixed; width:0px; font-size:0px; line-height:0px; contain:paint; border-collapse:separate; }
+.COSectionFF3 { border-collapse:collapse; }
+.COSection img { vertical-align:top; }
+/* -------------- Main TreeGrid <table> tag, contains the table sections ------------------ */
+/* It controls border around the grid.
+   @ Set margin, border and padding.
+   Padding is ignored in IE7 strict, IE6 strict and IE5 quirks modes.
+*/
+.COMainTable { background:white; border:1px solid white; border-collapse:separate; text-align:left; }
+.CORtl .COMainTable { text-align:right; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                        Grid sections                                                    */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* -------------- Table sections with cells, <div> tag inside <td> tag ------------------ */
+/* They control border and spaces between grid sections.
+   @ Set border, padding and margin. Set them with relation to Splitters, Scrollbars and Space rows settings.
+   ...Head... (<Head> top fixed rows), ...Body... (<Body> variable rows), ...Foot... (<Foot> bottom fixed rows)
+   ...Left (<LefCols> left fixed columns), ...Mid (<Cols> variable columns), ...Right (<RightCols> right fixed columns)
+   ...SectionScroll is set to the tag inside section that has overflow:scroll; @ Do not change
+!! Sections on horizontal direction (...Left, ...Mid, ...Right) must have the same height (border+padding+margin)
+!! Sections on vertical direction (...Head..., ...Body..., ...Foot...) must have the same width (border+padding+margin)
+*/
+.COBodyLeft,.COBodyMid,.COBodyRight,.COHeadLeft,.COHeadMid,.COHeadRight,.COFootLeft,.COFootMid,.COFootRight { }
+.COHeadLeft,.COHeadMid,.COHeadRight { border-top:1px solid #e9e9e9; border-bottom:1px solid white; }
+.COBodyLeft,.COBodyMid,.COBodyRight { }
+.COFootLeft,.COFootMid,.COFootRight { border-top:1px solid #CBCBCB; }
+.COHeadLeft,.COBodyLeft,.COFootLeft { border-right:1px solid #e9e9e9; }
+.COHeadMid,.COBodyMid,.COFootMid { }
+.COHeadRight,.COBodyRight,.COFootRight { border-left:1px solid #e9e9e9; }
+.COSectionScroll::-webkit-scrollbar { display:none; }
+/* -------------- Splitters between resizable table sections, <td> tag ------------------ */
+/* The <td> tags are shown between the sections <td> tags when set <Cfg LeftWidth, MidWidth, RightWidth/> attributes and <Cfg SectionResizing='1'/>
+   They control horizontal space between the resizable sections.
+   @ Set left/right border and padding and also width and background.
+   LeftSplitter is between ...Left and ...Mid column sections and RightSplitter is between ...Mid and ...Right column sections.
+   The splitter tag is shown in every row section (Head,Body,Foot) and in the horizontal scrollbars section.
+   ...HeadSplitter, ...BodySplitter, ...FootSplitter is added for appropriate row section, ...ScrollSplitter is added to splitter between horizontal scrollbars
+   ...SplitterDisabled is added if the sections cannot be resized now, due their actual width or permissions
+*/
+.COLeftSplitter,.CORightSplitter { width:5px; background:#f4f4f4; overflow:hidden; cursor:e-resize; font-size:1px; }
+.COTouch .COLeftSplitter,.COTouch .CORightSplitter { width:15px; }
+.COLeftSplitter { border-right:1px solid #e9e9e9; }
+.CORightSplitter { border-left:1px solid #e9e9e9; }
+.COHeadSplitter { }
+.COBodySplitter { }
+.COFootSplitter { }
+.COScrollSplitter { }
+.COSplitterDisabled { background:white; cursor:default; }
+/* -------------- Vertical scrollbar, <div> tag inside <td> tag ------------------ */
+/* The vertical scrollbar is placed on right side to <td> tag in Head section and is spanned through Body section and inner Space rows to Foot section
+   It controls the border and space around the scrollbar.
+   @ Set border, padding and margin, optionally background.
+   @ You can control the scrollbar shape and look in IE or WebKit on its immediate child <div> as .COVScroll > div
+*/
+.COVScroll { padding-top:1px; border-top:1px solid #e9e9e9; border-right:1px solid #e9e9e9; overflow:hidden; }
+.CORtl .COVScroll { border-left:1px solid #e9e9e9; border-right:0px none; }
+/* -------------- Horizontal scrollbars, <div> tag inside <td> tag ------------------ */
+/* ...Left (for <LefCols> left fixed columns), ...Mid (for <Cols> variable columns), ...Right (for <RightCols> right fixed columns)
+   They control the border and space around the scrollbar.
+   @ Set border, padding and margin, optionally background.
+   @ You can control the scrollbar shape and look in IE or WebKit on their immediate child <div> as .COHScroll... > div
+   ...Resize versions are shown instead for resizable sections, when set <Cfg LeftWidth, MidWidth, RightWidth/> attributes and <Cfg SectionResizing='2'/>
+   ...HScrollWide is shown instead of all the section scrollbars when set <Cfg WideHScroll='1'/>
+   ...ScrollHidden is shown instead if the column section does not need to show scrollbar (but the other sections do)
+   ...XScroll is shown in the horizontal scrollbars row in place of vertical scrollbar
+*/
+.COHScrollLeft,.COHScrollMid,.COHScrollRight { overflow:hidden; }
+.COHScrollLeft { padding-right:1px; }
+.COHScrollMid { }
+.COHScrollRight { padding-left:1px; }
+.COHScrollLeftResize,.COHScrollRightResize,.COHScrollMidLeftResize,.COHScrollMidRightResize { background:#F4F4F4; overflow:hidden; }
+.COHScrollLeftResize { border-right:1px dotted black; padding-right:5px; margin-right:1px; }
+.COHScrollRightResize { border-left:1px dotted black; padding-left:5px; margin-left:1px; }
+.COHScrollMidLeftResize { border-left:1px dotted black; padding-left:5px; }
+.COHScrollMidRightResize { border-right:1px dotted black; padding-right:5px; }
+.COTouch .COHScrollLeftResize { padding-right:18px; }
+.COTouch .COHScrollRightResize { padding-left:18px; }
+.COTouch .COHScrollMidLeftResize { padding-left:19px; }
+.COTouch .COHScrollMidRightResize { padding-right:19px; }
+.COHScrollWide { overflow:hidden; }
+.COHScrollHidden { }
+.COXScroll { background:#FFF; border-right:1px solid #e9e9e9; cursor:default; }
+.CORtl .COXScroll { border-left:1px solid #e9e9e9; border-right:0px none; }
+/* -------------- Special scrollbar setting for Safari and Chrome, <div> tag inside <td> tag ------------------ */
+/* Added to vertical and horizontal scrollbar to force showing scrollbars in Safari and Chrome if they are automatically hidden
+   @ Change here the scrollbars look; The scrollbars must be defined as permanently visible
+   ! Note, here is no style prefix
+*/
+.GridHiddenScroll > div::-webkit-scrollbar { -webkit-appearance:none; width:11px; height:11px; }
+.GridHiddenScroll > div::-webkit-scrollbar-thumb { border-radius:8px; border:2px solid white; background-color:rgba(0,0,0,0.5); }
+/* ------------------ Round corners ------------------ */
+/* Used to render something above and below the grid, to simulate e.g. rounded corners with special effects compatible in all browsers */
+/* ...Top is set to <div> tag rendered directly above ...MainTable with the same width as the table
+   ...Top0 to ...Top9 is set to up 10 <div> tags inside ...Top. The tag is not rendered if the class has not set height.
+   ...TopSpace0 to ...TopSpace9 is added to ...Top0 to ...Top9 in case there is some visible Space row width Space = 0
+*/
+.COTop { }
+.COTop1 { }
+.COTop2 { }
+.COTop3 { }
+.COTop4 { }
+.COTop5 { }
+/* ...Bottom is set to <div> tag rendered directly below ...MainTable with the same width as the table
+   ...Bottom0 to ...Top9 is set to up 10 <div> tags inside ...Top. The tag is not rendered if the class has not set height.
+   ...BottomSpace0 to ...BottomSpace9 is added to ...Bottom0 to ...Bottom9 in case there is some visible Space row width Space = 4
+*/
+.COBottom { }
+.COBottom5 { }
+.COBottom4 { }
+.COBottom3 { }
+.COBottom2 { }
+.COBottom1 { }
+/* -------------- Row pages, <div> tag ------------------ */
+/* They control the border and space around the row page */
+/* @ Set here vertical border, padding and margin.
+   ...PageOne is shown if no root paging is set (<Cfg Paging='0'/>.
+   ...PageFirst is the first root page, the ...Page are all the next root pages
+   ...ChildPart is shown around the row children, regardless on the <Cfg ChildParts/> is set or not
+   ...Border is added to all the classes for DynamicBorder, e.g. .COPageBorder is used instead of .COPage
+*/
+.COPageFirst { }
+.COPage { }
+.COPageOne { }
+.COChildPart { }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                        Rows                                                             */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------- Table row height ------------------ */
+/* Classes are not assigned, only the height attribute is read.
+   @ Set the height in pixels only.
+   ...RowHeight is default minimal height in pixels of all rows in table (not Space rows). It is outer height including all cell border and padding.
+*/
+.CORowHeight { height:19px; }
+.COTouch .CORowHeight { height:23px; }
+/* ------------- Table rows, <tr> tag ------------------ */
+/* Sets the class to the whole column section of the row. Useful to set for special backgrounds.
+   ...DataRow is set for all standard table rows without Kind attribute set
+   @ Set here only background
+*/
+.COHeaderRow { }
+.COFilterRow { }
+.CODataRow { }
+/* ------------- Space row height ------------------ */
+/* Classes are not assigned, only the height or margin attribute is read.
+   @ Set the height or margin in pixels only.
+   ...SpaceRowHeight is default minimal height in pixels of all Space rows. It is outer height including all cell border and padding, but not the margin.
+   ...SpaceMargin is horizontal and vertical margin in pixels around all Space row cells.
+*/
+.COSpaceRowHeight { height:19px; }
+.COSpaceMargin { margin:0px; }
+/* ------------- Space rows, <div> tag inside <td> tag ------------------ */
+/* Space row class according to the row Kind as prefix+Kind+"Row". In XML the Kind can be set as tag name like <Group ... />. Default Kind is "Space".
+   Every Space row is placed in its own <tr><td> tag, on the same level as table sections like Head/Body/Foot (...Left/Mid/Right).
+   @ Set here border, padding, margin and background
+   The horizontal border and spacing of Space rows should be synchronized with the table sections
+*/
+.COSpaceRow,.COGroupRow,.COSearchRow,.COPagerRow,.COToolbarRow,.COToolbar1Row,.COToolbar2Row,.COToolbar3Row,.COTopbarRow,.COTopbar1Row,.COTopbar2Row,.COTopbar3Row,.COTabberRow {
+   background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; border:1px solid #e9e9e9; border-top:1px solid #F4F4F4; border-bottom:1px solid #CBCBCB;
+   margin:1px 0px 2px 0px; padding:2px 0px 2px 2px; font-size:0px; overflow:hidden; white-space:nowrap;
+   }
+.COSpaceRow { }                                                                    /* Standard Space row with no special meaning */
+.COGroupRow { }                                                                    /* Grouping settings row */
+.COSearchRow { }                                                                   /* Search settings row */
+.COPagerRow { }                                                                    /* Simple pager row with Pages type cell */
+.COToolbarRow { background:white; border:0px none; margin:0px; padding-top:3px; }  /* Bottom standalone toolbar */
+.COToolbar1Row { margin:3px 0px 1px 0px; }                                         /* First bottom toolbar */
+.COToolbar2Row { background:white; border:0px none; margin:0px; padding-top:3px; } /* Last bottom toolbar */
+.COToolbar3Row { margin:3px 0px 1px 0px; }                                         /* Middle bottom toolbars */
+.COTopbarRow { background:white; border:0px none; margin:0px; padding-bottom:3px; }   /* Standalone top toolbar */
+.COTopbar1Row { background:white; border:0px none; margin:0px; padding-bottom:3px; }  /* First top toolbar*/
+.COTopbar2Row { }                                                                  /* Last top toolbar */
+.COTopbar3Row { }                                                                  /* Middle top toolbars */
+.COTabberRow { background:white; border:0px none; margin:0px; padding:0px; }       /* Tabber row with Tab type cells, usually used with ...RowAbove or ...RowBelow */
+/* Special Space row Kind="Fill" shown for ConstHeight='1'*/
+.COFillRow { background:white; }
+/* Special Space row Kind="NoData" shown when all body rows are hidden */
+.CONoDataRow {  background:#FAFAFA; padding:5px 0px 5px 5px; overflow:hidden; }
+.CONoDataRow div { color:gray!important; font-style:italic!important; }
+/* Class added to Space row Kind class for its position (Space attribute value), only value 0 to 4 */
+.CORowSpace0 { }
+.CORowSpace1 { }
+.CORowSpace2 { }
+.CORowSpace3 { }
+.CORowSpace4 { }
+/* Special Space row above or below grid, used instead of Kind class, ...RowAbove is added for Space='-1', ...RowBelow for Space='5' */
+.CORowAbove,.CORowBelow { border-left:1px solid #e0e0ff; border-right:1px solid #e0e0ff; margin-left:1px; margin-right:1px; overflow:hidden; }
+.CORowAbove { margin-top:3px; background:url(Backgrounds.gif?v120) 0px -250px; }
+.CORowBelow {  margin-bottom:3px; background:url(Backgrounds.gif?v120) 0px bottom; }
+/* Class added for row with Panel='1' */
+.COSpaceRowPanel { padding-left:0px; }
+/* Class added for given row VAlign attribute value */
+.COSpaceVAlignTop { }
+.COSpaceVAlignMiddle { }
+.COSpaceVAlignBottom { }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                        Cells                                                            */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------- Table cells, <td> tag ------------- */
+/* Classes for table row cells (not Space rows). Always one class per one cell.
+   @ Set border here. Note, all cells in table must have the same border width/height in the same cell edge.
+   @ You can set also padding here, but note, the padding is defined also in cell type class.
+   @ You can set also background here, but note, the data cell background color is often controlled by ...Color state classes
+   ...Cell - base data cell
+   ...CellPanel - cell Type="Panel"
+   ...CellFilter - cell in row Kind="Filter"
+   ...CellFilterPanel - cell Name="Panel" in row Kind="Filter". Note, it is used only for default panel named "Panel"
+   ...CellHeader - cell in row Kind="Header"
+   ...CellHeaderPanel - cell Type="Panel" in row Kind="Header"
+   ...CellEmpty - cell in _ConstWidth column (created due <Cfg ConstWidth/> setting), also in row Kind="Filter"
+   ...CellHeaderEmpty - cell in _ConstWidth column (created due <Cfg ConstWidth/> setting) in row Kind="Header"
+   ...CellUser - user cell section defined by <I LeftHtml MidHtml RightHtml/>
+   ...CellHidden - cell in child row hidden due spanned parent row through its children
+   ...CellIndex - cell in column RowIndex
+*/
+.COCellBase {
+   border:1px solid white; border-bottom:1px solid #CBCBCB; border-right:1px solid #D4D4D4;
+   vertical-align:top; overflow:hidden; overflow:auto!IE; height:auto;
+   }
+.CORtl .COCellBase { border-left:1px solid #D4D4D4; border-right:0px none; }
+.COCell { }
+.COCellHeader,.COCellHeaderPanel,.COCellHeaderEmpty { background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; }
+.COCellPanel,.COCellHeaderPanel,.COCellFilterPanel,.COCellIndexPanel,.COCellRowPanel { white-space:nowrap; direction:ltr; }
+.COCellHeader { }
+.COCellHeaderEmpty { background:white; border-color:white; }
+.COCellHeaderPanel { }
+.COCellPanel { background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; }
+.COCellFilterPanel { background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; text-align:center; }
+.COCellFilter { }
+.COCellIndex,.COCellIndexPanel,.COCellIndexAlternate,.COCellIndexEmpty { background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; }
+.COCellIndexPanel { }
+.COIndexSmall { margin-bottom:-50px; }
+.COCellRowPanel { background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; }
+.CORtl .COCellPanel,.CORtl .COCellHeaderPanel,.CORtl .COCellIndexPanel,.CORtl .COCellRowPanel { text-align:right; }
+.COCellUser { background-color:#E9E9E9; }
+.COCellEmpty { background:white; border-color:white; }
+.COCellHidden { background:transparent!important; border:none!important; }
+/* Special class added to every cell except panel, filter and header for DynamicBorder. @ Do not change. */
+.COCellBorder,.COCellHeaderBorder,.COCellNoBorder { border-left:2px solid transparent; border-top:2px solid transparent; }
+.COCellHeaderBorder { }
+.COCellNoBorder { border-color:transparent; }
+/* Special class to choose if the last cells in column or row section will render its border; Not used in grid, only border width is read; @ Set border-right and border-bottom; set it to 0px to SHOW the border */
+.COLastCell { border-right:1px solid; border-bottom:0px none; }
+/* Classes added to the <td> cell due special feature
+   ...CellClassInner added to the cell with defined ClassInner attribute (including Header cell)
+   ...CellClassInnerIcon added to the cell with defined ClassInner attribute and side Icon
+   ...CellHeaderInnerIcon added to the header cell with defined ClassInner attribute and side Icon
+   ...CellBorderFF3 is added to all cells in Firefox 3 - 19 due its slow bug in rendering table cells with different borders
+*/
+.COCellClassInner { padding-top:0px; padding-bottom:0px; }
+.COCellClassInnerIcon { }
+.COCellHeaderInnerIcon { }
+.COCellBorderFF3 { border-left:0px none!important; border-top:0px none!important; }
+/* ------------- Cell content - Type, <td> or <div> tag ------------- */
+/* The Type class is by default set to same <td> tag as the table cell or Space cell class.
+   Here are listed all TreeGrid Types except: "Gantt" - defined in Gantt.css file; "Chart", "Pages" and "DropCols" - defined later in this file and "Panel" - this class is not used.
+   If the cell consists from more included <div> tags, it is set to the most inner <div> tag.
+   The one or more <div> tags are included in cell if:
+      any cell has set VAlign, Rotate or ClassInner or Align="Scroll"
+      Header cell has set Icon or Type="Bool"
+      Space cell has set Icon or is editable or has Button="Defaults"
+   There can be included also inner <table> inside cell in these cases:
+      any cell has set Span + Merge with more columns and no MergeFormat
+      Header cell has set Levels
+      MainCol cell when set <Cfg SpannedTree='1'/>
+      DropCols and Radio types use also inner <Table>, but the Type class is set to parent cell
+   Select type class is set along with Html class for Select Type
+   Note, the "Bool", "Icon" and "Select" type classes are not listed in the first line
+   @ Set padding and text attributes like font, line-height, text-align, white-space
+*/
+.COType,.COUser { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; white-space:nowrap; padding:2px 3px 2px 3px; }
+.COInt,.COFloat,.CODate { text-align:right; }
+.COLines,.CORadio,.COHtml,.COList { white-space:normal; }
+.COImg,.COHtml { padding-top:0px; padding-bottom:0px; }
+.COPass { font-size:14px; line-height:17px; padding:0px 0px 0px 3px; }
+.CORadio { padding:0px; }
+.COBool { text-align:center; line-height:0px; }
+.COIcon { background-repeat:no-repeat; }
+.COAbs { padding:0px; }
+.COUser { padding:0px; }
+.COSelect { padding-top:2px; padding-bottom:2px; }
+/* Class for inner RowIndex column */
+.COIndexText { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:2px 3px 2px 3px; text-align:center; }
+/* Class set for cell width Visible='0'.
+   @ Set background for the ...Hidden
+   It is always set to <td> tag, this tag has always empty content.
+   ...Hidden is set to table cell and does not hide the cell, it just makes it empty
+   ...HiddenSpace is set to Space cell and hides the cell completely
+   ...HiddenValue is set to <td> tag when editing, to hide the cell value under edit
+*/
+.COHidden { }
+.COHiddenSpace { display:none; }
+.COHiddenValue,.COHiddenValue * { color:transparent!important; }
+/* Classes set for Overlay. @ Do not change */
+.COMain .COOverflowVisible,.COMain .COOverflowLeftVisible { overflow:visible; }
+.COMain .COOverflowLeftVisible>div { float:right; }
+.COMain .COOverflowDisable { background-color:white; opacity:0.99; }
+.COMain.COIE .COOverflowDisable { opacity:1; position:relative; }
+/* Class set to the right Button cell, the table cell next to the data cell:
+   @ Set width, height, padding and text attributes like font, line-height, text-align, white-space
+   ...RightButton is set for <button> or <u> tag inside <td> tag for Button="Button" according to <Cfg UseButton>
+   ...RightHtml is set for <td> tag for Button="Html"
+*/
+button.CORightButton { font:10px/11px Verdana,Tahoma,"Trebuchet MS",sans-serif; height:17px; width:19px; margin:0px; padding:0px; }
+u.CORightButton {
+   background:#E0E0E0; border:1px solid white; border-right:1px solid #888; border-bottom:1px solid #888; padding:0px 3px 1px 3px; margin:1px;
+   font:11px/12px Arial,Helvetica,sans-serif; text-decoration:none; display:inline-block; overflow:hidden; white-space:nowrap;
+   }
+.CORightHtml { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding-top:2px; padding-bottom:2px; }
+/* Class set to inner table <td> tag, when displaying Header cell Levels
+   @ Set width and text attributes like font, line-height, text-align, white-space for the ...LevelButton
+   ...LevelButton is set to every Levels button
+   ...LevelButtonSpace is set to the next <td> as the space between buttons and cell value. The last <td> cell contains the cell value
+*/
+.COLevelButton {
+   background:url(Button.gif?v120) 2px -1253px no-repeat; padding:2px 0px 2px 0px; width:21px;
+   font:11.9px/13px "Microsoft Sans Serif",Tahoma,"Trebuchet MS",sans-serif; text-align:center!important; cursor:pointer;
+   }
+.COLevelButtonSpace { width:5px; }
+.COLevels>table { width:100%; }
+/* Class set to inner table <td> tag, when displaying merged cells (Span+Merge and no MergeFormat)
+   @ Set border, padding, background, width and height
+   ...MergedCellH is set to every merged value (<td> tag) when showing all cells in one row (MergeType&1 = 0)
+   ...MergedCellV is set to every merged value (<td> tag) when showing all cells in one column (MergeType&1 = 1)
+*/
+.COMergedCellH { padding:0px; padding-right:5px; }
+.COMergedCellV { padding:0px; padding-bottom:1px; }
+/* Classes set to cell in Header row
+   ...HeaderText is set along with the Type class for Header cell, to <td> or <div> tag. @ Set padding and text attributes like font, line-height, text-align, white-space
+   ...HeaderIconInner is set along with the ...HeaderText if the cell has set Icon, to <td> or <div> tag. @ Set padding.
+   ...HeaderButton is set to <td> tag next to the cell if the cell has set Button (by default Header cell has set Button="Sort"). @ Set padding or the first child <button> settings.
+   ...HeaderToolButton is set to <td> tag of the cell type "Button" and Button="Button". @ Set padding
+   ...HeaderFocus is added to cell <td> tag during dragging the Header cell. @ Set background and optionally border, padding and text attributes like font, line-height, text-align, white-space
+   ...HeaderDrag is added to ghost Header cell under mouse cursor during dragging the Header cell. @ Set background and border and optionally padding and text attributes like font, line-height, text-align, white-space
+   ...HeaderResize is added to cell <td> (and to the next <td> if shown button) during resizing the column. @ Set background and optionally border, padding and text attributes like font, line-height, text-align, white-space
+*/
+.COHeaderText { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:2px 3px 2px 3px; }
+.COHeaderIconInner { }
+.COHeaderButton { padding:0px; }
+.COHeaderButtonButton { }
+.COHeaderButtonHtml { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding-top:2px; padding-bottom:2px; }
+.COHeaderToolButton { text-align:center; padding:0px; }
+.COHeaderFocus { background-color:#DEDFD8; }
+.COHeaderDrag { background-color:#C0C0B0; cursor:default; overflow:hidden; }
+.COHeaderResize { border-right:2px solid white; }
+/* Classes added to DropCols type inner table cells, <td> tag.
+   @ Set here border, padding, background and text attributes.
+   ...DropCols is DropCols type class set to <td> tag
+   ...HeaderGroup is set to every DropCols inner table cells, except the last one
+   ...HeaderGroupFocus is added to the DropCols inner table cell during dragging inside the DropCols line (to be moved)
+   ...HeaderGroupDelete is added to the DropCols inner table cell during dragging outside the DropCols line (to be removed)
+   ...HeaderGroupCustom is set to the last cell in DropCols inner table, as the default text "To group by, drag column caption here"
+*/
+.CODropCols { border-left:0px none; }
+.COHeaderGroup { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:0px 3px 0px 3px; border-left:1px solid white; border-right:1px solid #D4D4D4; }
+.COHeaderGroupFocus { background-color:#DEDFD8; }
+.COHeaderGroupDelete { background-color:#E9E9E9; color:#E9E9E9; }
+.COHeaderGroupCustom { font:italic 11.5px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; color:#BBB; padding-left:5px; white-space:nowrap; }
+/* Class added to the cell <td> tag when resizing row by dragging this cell edge and direct resizing is off */
+.COResizingRow { border-bottom:1px solid black; }
+.COResizingSpace { }
+/* Classes added to cell with Rotate attribute.
+   @ Change them carefully, the rotation can differ per browser.
+   ...CellRotate class is added to cell <td> tag in rotated cell
+   ...Rotate1 and ...Rotate2 is set to inner <div> to do the rotation, according to Rotate attribute value
+   ...IconRotate is added to cell <td> for cell with Icon attribute to display icon on top
+   ...IconRotateHeader is added to cell <td> for Header cell with Icon attribute to display icon on top. It is added with ...IconRotate
+*/
+.COCellRotate { text-align:left; }
+.CORotate1,.CORotate2 { overflow:hidden; white-space:nowrap; display:inline-block; writing-mode:tb-rl; }
+.CORotate1 { -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
+.COIconRotate { padding-left:2px!important; padding-top:20px!important; padding-right:2px!important; background-position-x:left!important; }
+.COIconRotateHeader { background-position-x:0px!important; }
+.COIconRotate.COAlignCenter { background-position-x:center!important; }
+.COIconRotate.COAlignRight { background-position-x:right!important; }
+/* Classes added to cell with Wrap attribute. Added along with Type class to <td> or <div> tag.
+   @ Do not change.
+   ...Wrap0 for Wrap='0', ...Wrap1 for Wrap='1'
+*/
+.COWrap0 { white-space:nowrap; }
+.COWrap1,.COWrap2 { white-space:normal; }
+.COWrap2,.COWordWrap { word-wrap:break-word; overflow-wrap:break-word; }
+.COWordWrap .COWrap2 { word-wrap:normal; overflow-wrap:normal; }
+/* Classes added to cell with Align attribute. Added along with Type class to <td> or <div> tag.
+   @ Do not change.
+...AlignLeft for Align='Left', ...AlignCenter for Align='Center',  ...AlignRight for Align='Right', ...AlignJustify for Align="Justify"
+*/
+.COAlignLeft { text-align:left; }
+.COAlignCenter { text-align:center; }
+.COAlignJustify { text-align:justify; }
+.COAlignRight { text-align:right; }
+/* Classes added to cell with VAlign attribute. Added always to <td> tag.
+   @ Do not change.
+   ...VAlignTop for VAlign='Top', ...VAlignMiddle for VAlign='Middle',  ...AlignBottom for Align='Bottom'
+   The ...VAlignTop must be defined as the last one.
+*/
+.COVAlignMiddle { vertical-align:middle; display:table-cell; }
+.COVAlignBottom { vertical-align:bottom; display:table-cell; }
+.COVAlignTop { vertical-align:top; display:table-cell; }
+/* Classes for TextStyle attribute; @ Do not change */
+.COTextBold { font-weight:bold; }
+.COTextItalic { font-style:italic; }
+.COTextUnderline { text-decoration:underline; }
+.COTextStrike { text-decoration:line-through; }
+.COTextOverline { text-decoration:overline; }
+.COTextUnderlineStrike { text-decoration:underline line-through; }
+.COTextUnderlineOverline { text-decoration:underline overline; }
+.COTextStrikeOverline { text-decoration:line-through overline; }
+.COTextUnderlineStrikeOverline { text-decoration:underline line-through overline; }
+.COTextSmall { font-variant:small-caps; }
+/* Classes used for TextShadow attribute; @ Change only text-shadow */
+/* It is possible to add new classes with higher index like TextShadow10 and use the index in TextShadow attribute */
+/* ...Shadow0 is used also for empty TextShadow when TextShadowColor is set */
+/* The color in the first definition is replaced or added by TextShadowColor */
+.COTextShadow0 { text-shadow: 0px 0px 5px; }
+.COTextShadow1 { text-shadow: -1px -1px; }
+.COTextShadow2 { text-shadow: -1px -1px, -3px -3px silver; }
+.COTextShadow3 { text-shadow: -1px -1px, 0px 0px 5px yellow; }
+.COTextShadow4 { text-shadow: -1px -1px, 0px 0px 10px; }
+.COTextShadow5 { text-shadow: -2px -2px silver; }
+.COTextShadow6 { text-shadow: -3px -3px silver, -1px -1px; }
+.COTextShadow7 { text-shadow: 0px 0px 3px black,0px 0px 3px black,0px 0px 3px black; }
+.COTextShadow8 { text-shadow: 0px 0px 5px yellow, -1px -1px; }
+.COTextShadow9 { text-shadow: 0px 0px 10px; }
+/* Classes used for attribute Indent; @ Change only padding-left or padding-right */
+.COMain .COIndentLeft1 { padding-left:10px; } .COMain .COIndentRight1 { padding-right:10px; }
+.COMain .COIndentLeft2 { padding-left:20px; } .COMain .COIndentRight2 { padding-right:20px; }
+.COMain .COIndentLeft3 { padding-left:30px; } .COMain .COIndentRight3 { padding-right:30px; }
+.COMain .COIndentLeft4 { padding-left:40px; } .COMain .COIndentRight4 { padding-right:40px; }
+.COMain .COIndentLeft5 { padding-left:50px; } .COMain .COIndentRight5 { padding-right:50px; }
+.COMain .COIndentLeft6 { padding-left:60px; } .COMain .COIndentRight6 { padding-right:60px; }
+.COMain .COIndentLeft7 { padding-left:70px; } .COMain .COIndentRight7 { padding-right:70px; }
+.COMain .COIndentLeft8 { padding-left:80px; } .COMain .COIndentRight8 { padding-right:80px; }
+.COMain .COIndentLeft9 { padding-left:90px; } .COMain .COIndentRight9 { padding-right:90px; }
+.COMain .COIndentLeft10 { padding-left:100px; } .COMain .COIndentRight10 { padding-right:100px; }
+.COMain .COIndentLeft15 { padding-left:150px; } .COMain .COIndentRight15 { padding-right:150px; }
+.COMain .COIndentLeft20 { padding-left:200px; } .COMain .COIndentRight20 { padding-right:200px; }
+.COMain .COIndentLeft25 { padding-left:250px; } .COMain .COIndentRight25 { padding-right:250px; }
+.COMain .COIndentLeft30 { padding-left:300px; } .COMain .COIndentRight30 { padding-right:300px; }
+.COMain .COIndentLeft35 { padding-left:350px; } .COMain .COIndentRight30 { padding-right:350px; }
+.COMain .COIndentLeft40 { padding-left:400px; } .COMain .COIndentRight40 { padding-right:400px; }
+.COMain .COIndentLeft45 { padding-left:450px; } .COMain .COIndentRight40 { padding-right:450px; }
+.COMain .COIndentLeft50 { padding-left:500px; } .COMain .COIndentRight50 { padding-right:500px; }
+/*--------------- Space cells ----------------- */
+/* Classes control the background and border of the Space cells
+   @ Set here border, padding and background
+*/
+.COCellSpace,.COCellSpaceIcon,.COCellSpaceButton,.COCellSpaceButtonIcon,.COCellSpaceButtonButton,.COCellSpacePanel,.COCellSpaceBool,.COCellSpaceRadio,.COCellSpaceSelect,.COCellSpaceEdit {
+   vertical-align:top; border-left:1px solid white; border-right:1px solid #D4D4D4;
+   }
+/* Not editable Space cell. Set also for Label.
+   ...CellSpace is set to the <td> tag
+   ...CellSpaceIcon is set to <td> tag instead for cell with Icon attribute
+   ...SpaceIconInner is set to inner <div> tag for cell with Icon attribute
+*/
+.COCellSpace { padding-top:3px; padding-bottom:3px; }
+.COCellSpaceIcon { padding-top:1px; padding-bottom:0px; }
+.COSpaceIconInner { padding-top:2px; padding-bottom:3px; }
+.COSpaceIconInner > div { overflow:hidden; }
+/* Button Type in Space cell
+   ...CellSpaceButton is set to the <td> tag for cell with Button="Html"
+   ...CellSpaceButtonIcon is set to the <td> tag instead for cell with Button="Html" and Icon attribute
+   ...SpaceButtonIconInner is set to inner <div> tag for cell with Button="Html" and Icon attribute
+   ...CellSpaceButtonButton is set to the <td> tag for cell with Button="Button"
+   ...CellSpaceTool is added to the <td> tag (along with CellSpaceButton) for cell with Button="Html" and without ButtonText and with VAlign - the special toolbar button
+*/
+.COCellSpaceButton { padding:3px; white-space:nowrap; }
+.COCellSpaceButtonIcon { padding-top:1px; padding-bottom:0px; white-space:nowrap; }
+.COSpaceButtonIconInner { padding-top:2px; padding-bottom:3px; }
+.COSpaceButtonIconInner > div { overflow:hidden; }
+.COCellSpaceButtonButton { }
+.COCellSpaceTool { padding:0px; }
+/* Classes for Type Panel, Bool and Radio in Space cell */
+.COCellSpacePanel { line-height:0px; }
+.COCellSpaceBool { line-height:0px; }
+.COCellSpaceRadio { padding-top:1px; }
+/* Classes for Type="Select" or cell with Button="Defaults" in Space cell
+   ...CellSpaceSelect is set to the <td> tag
+   ...SpaceSelectInner is set to inner <div> tag
+   ...SpaceSelectInnerIcon is set to inner <div> tag in cell with Icon
+   ...SpaceSelectIconInner is set to inner inner <div> tag (along with Type class) in cell with Icon
+   ...SpaceSelectInnerIE is added to inner <div> tag in cell with Icon in IE5 quirks mode
+*/
+.COCellSpaceSelect { }
+.COSpaceSelectInner,.COSpaceSelectInnerIcon {
+   padding:2px 20px 2px 3px; background:white url(Button.gif?v120) right 0px no-repeat; border:1px solid #D4D4D4; border-right:0px none;
+   }
+.COSpaceSelectInnerIcon { padding:0px 20px 0px 1px; }
+.COSpaceSelectIconInner { padding-top:2px; padding-bottom:2px; }
+.COSpaceSelectIconInner > div { overflow:hidden; }
+.COSpaceSelectInnerIE { overflow:hidden; }
+/* Classes for editable Space cell
+   ...CellSpaceEdit is set to the <td> tag
+   ...SpaceEditInner is set to inner <div> tag
+   ...SpaceEditInnerIcon is set to inner <div> tag in cell with Icon
+   ...SpaceEditIconInner is set to inner inner <div> tag (along with Type class) in cell with Icon
+   ...SpaceEditButtonIconInner is set to inner inner <div> tag in cell with Icon and Button
+*/
+.COCellSpaceEdit { }
+.COSpaceEditInner,.COSpaceEditInnerIcon { background:white; border:1px solid #D4D4D4; border-right:0px none; }
+.COSpaceEditInnerIcon { padding:0px 0px 0px 1px; }
+.COSpaceEditIconInner { padding-top:2px; padding-bottom:2px; }
+.COSpaceEditIconInner > div { overflow:hidden; }
+.COSpaceEditButtonIconInner { padding-top:0px; padding-bottom:0px; }
+/* Classes added to <td> tag in cell in Space row with Space="-1" (...Above) or Space="5" (...Below)
+*/
+.COCellSpaceAbove { border-top:1px solid #D4D4D4; }
+.COCellSpaceBelow { border-bottom:1px solid #D4D4D4; }
+/* Class added to <div> tag with ClassInner class */
+.COSpaceClassInner { padding-top:0px; padding-bottom:0px; }
+/* Cells in rows with SpaceWrap=1
+   ...SpaceWrap is set to parent div all the space cells
+   ...CellSpaceWrap is set to individual divs as space cells
+*/
+.COSpaceWrap { white-space:normal; }
+.COCellSpaceWrap { display:inline-block; margin-top:1px; margin-bottom:1px; }
+.COCellSpaceWrap.COEmpty { height:21px; padding-top:0px; padding-bottom:0px; }
+/*--------------- Cell edges ----------------- */
+/* @ Support classes, do not change
+   Classes added to table or Space cell if it should not have the left or right border or is empty
+*/
+.CONoLeft,.CONoSpaceLeft { border-left:0px none!important; border-bottom-left-radius:0px!important; border-top-left-radius:0px!important; }
+.CONoRight,.CONoSpaceRight { border-right:0px none!important; border-bottom-right-radius:0px!important; border-top-right-radius:0px!important; }
+.COEmpty { text-decoration:none!important; font-size:0px!important; line-height:0px!important; }
+/*--------------- Pages type cell ----------------- */
+/* ...Pages is set to <td> as Type class. @ Set here border, padding and background
+   ...PagesLink is set to individual <a> tags as page numbers. @ Set here margin, padding, border, background and text attributes
+   ...PagesLinkActive is set to <a> tag in actual selected page number instead
+*/
+.COPages { overflow:visible; padding:0px!important; }
+.COPagesLink,.COPagesLinkActive {
+   padding:2px 1px 2px 2px; margin:1px 0px 1px 0px; display:inline-block; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:pointer; color:black;
+   }
+/* The :hover remarkably slows down every grid in IE strict mode
+.COPagesLink:visited { color:blue; }
+.COPagesLink:hover { color:red; }*/
+.COPagesLinkActive { color:black; font-weight:bold; border:1px dotted black; margin-top:0px; margin-bottom:0px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                    Tree cell                                                            */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* Class set to the tree in <td> tag left to MainCol cell
+   @ They are not expected to change, but you can set here background or border
+   ...Tree is set for <Cfg NoTreeLines='0'/>, default setting. It can be set to inner <td> tag for SpannedTree
+   ...NoTreeLines... is set for NoTreeLines value 1 - 3.
+   ...SpannedTree is added to ...Tree for Cfg SpannedTree=1
+*/
+.COTree { padding-top:0px; white-space:nowrap; line-height:0px; font-size:0px; height:0px; }
+.COSpannedTree { line-height:0px; font-size:0px; height:0px; }
+.COSpannedTree td { vertical-align:top; }
+.CONoTreeLines1 { text-align:right; }
+.CONoTreeLines2 { text-align:right; vertical-align:middle; padding-top:0px; }
+.CONoTreeLines3 { text-align:left; }
+/* ------------- Tree images with lines (NoTreeLines='0') ------------- */
+/* Default tree class set to <td> tag or to inner <u> tag
+   The tree is shown in inner <u> tags if it cannot be set by one background image or in SpannedTree or with TreeIcon.
+   @ Set background and padding-left. It is not easy to change them, the image files contain many icons that must be changed all at once, especially if you want to change the widths.
+   ...TreeTop / ...TreeMiddle / ...TreeBottom is set according to VAlign value, for empty is set also ...TreeTop
+   ...TreeRev... is set according to VAlign value for <Cfg ReversedTree='1'/>, for empty is set also ...TreeRevTop
+   ...TreeIcon, ...TreeIconM, ...TreeIconB is set if used custom tree icon by <I TreeIcon/>, according to VAlign value (M - Middle, B - Bottom, nothing - Top or empty)
+   ...TreeImage, ...TreeImageM, ...TreeImageB is set to inner <u> tag, according to VAlign value (M - Middle, B - Bottom, nothing - Top or empty)
+   ...TreeImageIE, ...TreeImageIEM, ...TreeImageIEB is set instead in all IE modes except IE5 quirks and also in Firefox strict mode
+   ...Width... is width of the tree icon part in <u> tag, number is count of the icon lines, ...T is ending icon / button
+   ...Width1 is also used measure one level indent, ...Width1T is also used to measure tree button width
+*/
+.COTreeTop { background-image:url(Tree.gif?v120); }
+.COTreeMiddle { background-image:url(TreeMiddle.gif?v120); }
+.COTreeBottom { background-image:url(TreeBottom.gif?v120); }
+.COTreeRev.COTreeTop { background-image:url(TreeRev.gif?v120); }
+.COTreeRev.COTreeMiddle { background-image:url(TreeRevMiddle.gif?v120); }
+.COTreeRev.COTreeBottom { background-image:url(TreeRevBottom.gif?v120); }
+.COTreeIcon { background-repeat:no-repeat; background-position:left top; }
+.COTreeIconM { background-repeat:no-repeat; background-position:left center; }
+.COTreeIconB { background-repeat:no-repeat; background-position:left bottom; }
+.COTreeImage,.COTreeImageM,.COTreeImageB { display:inline-block; height:100%; width:0px; }
+.COTreeImageIE { padding-bottom:1000px; }
+.COTreeImageMIE { padding-top:500px; padding-bottom:500px; }
+.COTreeImageBIE { padding-top:1000px; }
+.COWidth1T { padding-left:26px; } .COWidth1 { padding-left:21px; }
+.COWidth2T { padding-left:47px; } .COWidth2 { padding-left:42px; }
+.COWidth3T { padding-left:68px; } .COWidth3 { padding-left:63px; }
+.COWidth4T { padding-left:89px; }
+/* Individual tree backgrounds according to VAlign value (M - Middle, B - Bottom, nothing - Top or empty)
+   1 means vertical line, 0 means no vertical line
+*/
+/* ...xxx - three line icons, ...xxxT - three line icons plus ending icon (no last, no button) */
+.CO000,.CO000T { background-position:   0px top; } .CO000M,.CO000TM { background-position:   0px center; } .CO000B,.CO000TB { background-position:   0px bottom; }
+.CO010,.CO010T { background-position:-128px top; } .CO010M,.CO010TM { background-position:-128px center; } .CO010B,.CO010TB { background-position:-128px bottom; }
+.CO001,.CO001T { background-position:-256px top; } .CO001M,.CO001TM { background-position:-256px center; } .CO001B,.CO001TB { background-position:-256px bottom; }
+.CO011,.CO011T { background-position:-384px top; } .CO011M,.CO011TM { background-position:-384px center; } .CO011B,.CO011TB { background-position:-384px bottom; }
+.CO100,.CO100T { background-position:-512px top; } .CO100M,.CO100TM { background-position:-512px center; } .CO100B,.CO100TB { background-position:-512px bottom; }
+.CO110,.CO110T { background-position:-640px top; } .CO110M,.CO110TM { background-position:-640px center; } .CO110B,.CO110TB { background-position:-640px bottom; }
+.CO101,.CO101T { background-position:-768px top; } .CO101M,.CO101TM { background-position:-768px center; } .CO101B,.CO101TB { background-position:-768px bottom; }
+.CO111,.CO111T { background-position:-896px top; } .CO111M,.CO111TM { background-position:-896px center; } .CO111B,.CO111TB { background-position:-896px bottom; }
+/* ...xx - two line icons, ...xxT - two line icons plus ending icon (no last, no button) */
+.CO00,.CO00T { background-position: -21px top; } .CO00M,.CO00TM { background-position: -21px center; } .CO00B,.CO00TB { background-position: -21px bottom; }
+.CO10,.CO10T { background-position:-149px top; } .CO10M,.CO10TM { background-position:-149px center; } .CO10B,.CO10TB { background-position:-149px bottom; }
+.CO01,.CO01T { background-position:-277px top; } .CO01M,.CO01TM { background-position:-277px center; } .CO01B,.CO01TB { background-position:-277px bottom; }
+.CO11,.CO11T { background-position:-405px top; } .CO11M,.CO11TM { background-position:-405px center; } .CO11B,.CO11TB { background-position:-405px bottom; }
+/* ...x - one line icon, ...xT - one line icon plus ending icon (no last, no button) */
+.CO0,.CO0T { background-position: -42px top; } .CO0M,.CO0TM { background-position: -42px center; } .CO0B,.CO0TB { background-position: -42px bottom; }
+.CO1,.CO1T { background-position:-298px top; } .CO1M,.CO1TM { background-position:-298px center; } .CO1B,.CO1TB { background-position:-298px bottom; }
+/* ...T - ending icon (no last, no button) */
+.COT { background-position:-63px top; } .COTM { background-position:-63px center; } .COTB { background-position:-63px bottom; }
+/* ...xxL - the end icon is the icon of the last child row
+   ...xT? - one line icon plus end icon, no button , ...xC? - one line icon plus end collapse (-) button, ...xE? - one line icon plus end expand (+) button
+*/
+.CO0TL { background-position:-1024px top; } .CO0TLM { background-position:-1024px center; } .CO0TLB { background-position:-1024px bottom; }
+.CO1TL { background-position:-1088px top; } .CO1TLM { background-position:-1088px center; } .CO1TLB { background-position:-1088px bottom; }
+.CO0C  { background-position:-1152px top; } .CO0CM  { background-position:-1152px center; } .CO0CB  { background-position:-1152px bottom; }
+.CO1C  { background-position:-1216px top; } .CO1CM  { background-position:-1216px center; } .CO1CB  { background-position:-1216px bottom; }
+.CO0CL { background-position:-1280px top; } .CO0CLM { background-position:-1280px center; } .CO0CLB { background-position:-1280px bottom; }
+.CO1CL { background-position:-1344px top; } .CO1CLM { background-position:-1344px center; } .CO1CLB { background-position:-1344px bottom; }
+.CO0E  { background-position:-1408px top; } .CO0EM  { background-position:-1408px center; } .CO0EB  { background-position:-1408px bottom; }
+.CO1E  { background-position:-1472px top; } .CO1EM  { background-position:-1472px center; } .CO1EB  { background-position:-1472px bottom; }
+.CO0EL { background-position:-1536px top; } .CO0ELM { background-position:-1536px center; } .CO0ELB { background-position:-1536px bottom; }
+.CO1EL { background-position:-1600px top; } .CO1ELM { background-position:-1600px center; } .CO1ELB { background-position:-1600px bottom; }
+/* ...xL - the end icon is the icon of the last child row
+   ...T? - end icon, no button, ...C? - end collapse (-) button, ...E? - end expand (+) button
+*/
+.COTL { background-position:-1045px top; } .COTLM { background-position:-1045px center; } .COTLB { background-position:-1045px bottom; }
+.COC  { background-position:-1173px top; } .COCM  { background-position:-1173px center; } .COCB  { background-position:-1173px bottom; }
+.COCL { background-position:-1301px top; } .COCLM { background-position:-1301px center; } .COCLB { background-position:-1301px bottom; }
+.COE  { background-position:-1429px top; } .COEM  { background-position:-1429px center; } .COEB  { background-position:-1429px bottom; }
+.COEL { background-position:-1557px top; } .COELM { background-position:-1557px center; } .COELB { background-position:-1557px bottom; }
+/* Icons shown during dragging - drop permissions
+   ...xL - the end icon is the icon of the last child row
+   ...D0? - no drop, ...D1? - drop above, ...D2? - drop inside, ...D3? - drop below
+*/
+.COD0 { background-position:-1664px top; } .COD0M { background-position:-1664px center; } .COD0B { background-position:-1664px bottom; }
+.COD1 { background-position:-1696px top; } .COD1M { background-position:-1696px center; } .COD1B { background-position:-1696px bottom; }
+.COD2 { background-position:-1728px top; } .COD2M { background-position:-1728px center; } .COD2B { background-position:-1728px bottom; }
+.COD3 { background-position:-1760px top; } .COD3M { background-position:-1760px center; } .COD3B { background-position:-1760px bottom; }
+.COD0L { background-position:-1792px top; } .COD0LM { background-position:-1792px center; } .COD0LB { background-position:-1792px bottom; }
+.COD1L { background-position:-1824px top; } .COD1LM { background-position:-1824px center; } .COD1LB { background-position:-1824px bottom; }
+.COD2L { background-position:-1856px top; } .COD2LM { background-position:-1856px center; } .COD2LB { background-position:-1856px bottom; }
+.COD3L { background-position:-1888px top; } .COD3LM { background-position:-1888px center; } .COD3LB { background-position:-1888px bottom; }
+/* ...D4 - icons for expanding children in timeout, ...xL - the end icon is the icon of the last child row
+*/
+.COD4 { background-position:-1920px top; } .COD4M { background-position:-1920px center; } .COD4B { background-position:-1920px bottom; }
+.COD4L { background-position:-1952px top; } .COD4LM { background-position:-1952px center; } .COD4LB { background-position:-1952px bottom; }
+/* ------------- Tree images without lines (NoTreeLines='1') ------------- */
+/* Tree classes set to <td> tag or to inner <u> tag
+   The tree is shown in inner <u> tags in SpannedTree, with TreeIcon or with VAlign
+   @ Set here height, width and background
+   ...NC - Icon for button collapse, ...NE - Icon for button expand, ...NT - Icon for leaf none without button, ...NCR / ...NER / ...NTR - Shown instead in RTL mode
+   ...ND0 - ...ND3 - Icons shown during dragging - drop permissions: ...ND0 - no drop, ...ND1 - drop above, ...ND2 - drop inside, ...ND3 - drop below
+   ...NTreeImage is set to inner <u> tag; it is also used to read the default width of tree button
+   ...NIcon is set if used custom tree icon by <I TreeIcon/>
+   ...NWidth is never assigned, it is used to read the default width of one level indent
+*/
+.CONC,.CONE,.COND0,.COND1,.COND2,.COND3,.COND4,.CONIcon { background-repeat:no-repeat; vertical-align:top; background-position:right top; }
+.CONCR,.CONER,.COND0R,.COND1R,.COND2R,.COND3R,.COND4R { background-repeat:no-repeat; vertical-align:top; background-position:left top; }
+.CONT,.CONTR { }
+.CONTreeImage { display:inline-block; height:17px; width:17px; }
+.CONWidth { width:21px; }
+.COND0,.COND0R { background-image:url(TreeNDrag0.gif?v120); }
+.COND1,.COND1R { background-image:url(TreeNDrag1.gif?v120); }
+.COND2,.COND2R { background-image:url(TreeNDrag2.gif?v120); }
+.COND3,.COND3R { background-image:url(TreeNDrag3.gif?v120); }
+.COND4,.COND4R { background-image:url(TreeNWait.gif?v120); }
+.CONC,.CONCR { background-image:url(TreeNCollapse.gif?v120); }
+.CONE,.CONER { background-image:url(TreeNExpand.gif?v120);}
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                 Panel type cell                                                         */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------- Standard Panel images (FastPanel='0') ------------- */
+/* @ Set here width, height and background.
+   @ If there is present <button> in panel, set here padding-left and font-size instead of width and height
+   ...PanelImage is set to every panel icon <u> tag if there is no <button> in the panel.
+   ...PanelImageButton is set to every panel icon <u> tag if there also some <button> in the panel
+   ...PanelEmpty is shown for panel button named "Empty"
+   ...PanelMove is shown for panel button named "Move", ...PanelMoveOff is shown for rows without moving permissions
+   ...PanelSelect is shown for panel button named "Select", ...PanelSelectOff is shown for rows without selecting permissions, ...PanelSelectOn is shown for rows with Select="1"
+   ...PanelDelete is shown for panel button named "Delete", ...PanelDeleteOff is shown for rows without deleting permissions
+   ...PanelCopy is shown for panel button named "Copy", ...PanelCopyOff is shown for rows without copying permissions
+   ...PanelButton is shown if the panel button has not defined image and is shown as <button> or <u> depending on <Cfg UseButton>. @ Set here margin, border, padding, width, height and text attributes
+   ...PanelTouch is added to <u> on tablets with PanelImage, ...PanelTouchButton is added to <u> on tablets with PanelImageButton
+   ...PanelButtonTouch is added to <button> on tablets
+*/
+.COPanelImage { width:13px; height:17px; display:inline-block; background-image:url(Panel.gif?v120); background-repeat:no-repeat; }
+.COPanelImageButton { font:14px Arial; padding-left:13px; background-image:url(Panel.gif?v120); background-repeat:no-repeat; zoom:1; }
+.COPanelEmpty { background:none; }
+.COPanelMove { background-position:0px 0px; }
+.COPanelMoveOff { background-position:-50px 0px; }
+.COPanelSelect { background-position:-100px 0px; }
+.COPanelSelectOn { background-position:-150px 0px; }
+.COPanelSelectOff { background-position:-200px 0px; }
+.COPanelDelete { background-position:-250px 0px; }
+.COPanelDeleteOff { background-position:-300px 0px; }
+.COPanelCopy { background-position:-350px 0px; }
+.COPanelCopyOff { background-position:-400px 0px; }
+button.COPanelButton {
+   padding:0px; height:14px; width:19px; margin:0px;
+   font:10px/14px "Microsoft Sans Serif",Tahoma,"Trebuchet MS",sans-serif; display:inline-block; cursor:pointer; overflow:hidden;
+   }
+u.COPanelButton {
+   background:#D8D8D8; border:1px solid white; border-right:1px solid #888; border-bottom:1px solid #888; padding:0px 3px 1px 3px; margin:1px;
+   font:11px/12px Arial,Helvetica,sans-serif; cursor:pointer; text-decoration:none; display:inline-block; overflow:hidden; white-space:nowrap;
+   }
+.COCellHeaderPanel u.COPanelButton { }
+.COPanelTouch { margin-left:5px; margin-right:5px; }
+.COPanelTouchButton { margin-left:5px; margin-right:5px; }
+.COPanelButtonTouch { margin-left:2px; margin-right:2px; width:25px; }
+/* ------------- Fast Panel images (FastPanel='1')------------- */
+/* @ Do not change, for custom images use standard panel (FastPanel='0') or modify the FastPanel1.gif?v120/FastPanel2.gif?v120 files.
+   The image is used different for every button state, the four numbers are for buttons Move, Select, Delete, Copy in this order.
+   1 - shown, 2 - (on, for select), 0 - hidden, but space reserved, x - hidden completely, with no space
+*/
+.COP1111,.COP1211,.COP1011,.COP1101,.COP1201,.COP1001,.COP1110,.COP1210,.COP1010,.COP1100,.COP1200,.COP1000,
+.COP0111,.COP0211,.COP0011,.COP0101,.COP0201,.COP0001,.COP0110,.COP0210,.COP0010,.COP0100,.COP0200,.COP0000,
+.COP111x,.COP121x,.COP101x,.COP110x,.COP120x,.COP100x,.COP011x,.COP021x,.COP001x,.COP010x,.COP020x,.COP000x,
+.COP11xx,.COP12xx,.COP10xx,.COP01xx,.COP02xx,.COP00xx,
+.COPx111,.COPx211,.COPx011,.COPx101,.COPx201,.COPx001,.COPx110,.COPx210,.COPx010,.COPx100,.COPx200,.COPx000,
+.COPx11x,.COPx21x,.COPx01x,.COPx10x,.COPx20x,.COPx00x,
+.COPxx11,.COPxx10,.COPxx01,.COPxx00,
+.COPxxx1,.COPxxx0,.COPxx1x,.COPxx0x,.COPx2xx,.COPx1xx,.COPx0xx,.COP1xxx,.COP0xxx {
+   background-image:url(FastPanel1.gif?v120); background-repeat:no-repeat;
+   }
+.COP1111,.COP111x,.COP11xx,.COP1xxx { background-position:0px 0px; }
+.COP1211,.COP121x,.COP12xx { background-position:-80px 0px; }
+.COP1011,.COP101x,.COP10xx { background-position:-160px 0px; }
+.COP1101,.COP110x { background-position:-240px 0px; }
+.COP1201,.COP120x { background-position:-320px 0px; }
+.COP1001,.COP100x { background-position:-400px 0px; }
+.COP1110 { background-position:-480px 0px; }
+.COP1210 { background-position:-560px 0px; }
+.COP1010 { background-position:-640px 0px; }
+.COP1100 { background-position:-720px 0px; }
+.COP1200 { background-position:-800px 0px; }
+.COP1000 { background-position:-880px 0px; }
+.COP0111,.COP011x,.COP01xx,.COP0xxx { background-position:-960px 0px; }
+.COP0211,.COP021x,.COP02xx { background-position:-1040px 0px; }
+.COP0011,.COP001x,.COP00xx { background-position:-1120px 0px; }
+.COP0101,.COP010x { background-position:-1200px 0px; }
+.COP0201,.COP020x { background-position:-1280px 0px; }
+.COP0001,.COP000x { background-position:-1360px 0px; }
+.COP0110 { background-position:-1440px 0px; }
+.COP0210 { background-position:-1520px 0px; }
+.COP0010 { background-position:-1600px 0px; }
+.COP0100 { background-position:-1680px 0px; }
+.COP0200 { background-position:-1760px 0px; }
+.COP0000 { background-position:-1840px 0px; }
+.COPx111,.COPx11x,.COPx1xx { background-position:-13px 0px; }
+.COPx211,.COPx21x,.COPx2xx { background-position:-93px 0px; }
+.COPx011,.COPx01x,.COPx0xx { background-position:-173px 0px; }
+.COPx101,.COPx10x { background-position:-253px 0px; }
+.COPx201,.COPx20x { background-position:-333px 0px; }
+.COPx001,.COPx00x { background-position:-413px 0px; }
+.COPx110 { background-position:-493px 0px; }
+.COPx210 { background-position:-573px 0px; }
+.COPx010 { background-position:-653px 0px; }
+.COPx100 { background-position:-733px 0px; }
+.COPx200 { background-position:-813px 0px; }
+.COPx000 { background-position:-893px 0px; }
+.COPxx11,.COPxx1x { background-position:-26px 0px; }
+.COPxx01,.COPxx0x { background-position:-266px 0px; }
+.COPxx10{ background-position:-506px 0px; }
+.COPxx00 { background-position:-746px 0px; }
+.COPxxx1 { background-position:-39px 0px; }
+.COPxxx0 { background-position:-519px 0px; }
+.COP11x1,.COP12x1,.COP10x1,.COP11x0,.COP12x0,.COP10x0,.COP01x1,.COP02x1,.COP00x1,.COP01x0,.COP02x0,.COP00x0,
+.COPx1x1,.COPx2x1,.COPx0x1,.COPx1x0,.COPx2x0,.COPx0x0,
+.COP1x11,.COP1x01,.COP1x10,.COP1x00,.COP0x11,.COP0x01,.COP0x10,.COP0x00,
+.COP1x1x,.COP1x0x,.COP0x1x,.COP0x0x,
+.COP1xx1,.COP1xx0,.COP0xx1,.COP0xx0 {
+   background-image:url(FastPanel2.gif?v120); background-repeat:no-repeat;
+   }
+.COP11x1 { background-position:0px 0px; }
+.COP12x1 { background-position:-80px 0px; }
+.COP10x1 { background-position:-160px 0px; }
+.COP11x0 { background-position:-240px 0px; }
+.COP12x0 { background-position:-320px 0px; }
+.COP10x0 { background-position:-400px 0px; }
+.COP01x1 { background-position:-480px 0px; }
+.COP02x1 { background-position:-560px 0px; }
+.COP00x1 { background-position:-640px 0px; }
+.COP01x0 { background-position:-720px 0px; }
+.COP02x0 { background-position:-800px 0px; }
+.COP00x0 { background-position:-880px 0px; }
+.COPx1x1 { background-position:-13px 0px; }
+.COPx2x1 { background-position:-93px 0px; }
+.COPx0x1 { background-position:-173px 0px; }
+.COPx1x0 { background-position:-253px 0px; }
+.COPx2x0 { background-position:-333px 0px; }
+.COPx0x0 { background-position:-413px 0px; }
+.COP1x11,.COP1x1x { background-position:-960px 0px; }
+.COP1x01,.COP1x0x { background-position:-1040px 0px; }
+.COP1x10 { background-position:-1120px 0px; }
+.COP1x00 { background-position:-1200px 0px; }
+.COP0x11,.COP0x1x { background-position:-1280px 0px; }
+.COP0x01,.COP0x0x { background-position:-1360px 0px; }
+.COP0x10 { background-position:-1440px 0px; }
+.COP0x00 { background-position:-1520px 0px; }
+.COP1xx1 { background-position:-1600px 0px; }
+.COP1xx0 { background-position:-1680px 0px; }
+.COP0xx1 { background-position:-1760px 0px; }
+.COP0xx0 { background-position:-1840px 0px; }
+/* ------------- Space/Filter Panel checkbox images ------------- */
+/* Special images in Filter, Group and Search rows for default panel (column named "Panel") if shown as the first column.
+   @ Set width, height and background
+   ...Filter0 - shown in Filter row when Filtered='0', ...Filter1 - shown in Filter row when Filtered='1'
+   ...Group0 - shown in Group row when Grouped='0', ...Group1 - shown in Group row when Grouped='1'
+   ...Search0 - shown in Search row when Searched='0', ...Search1 - shown in Search row when Searched='1'
+*/
+.COFilter0,.COFilter1,.COGroup0,.COGroup1,.COSearch0,.COSearch1 { background-image:url(Filter.gif?v120); background-repeat:no-repeat; display:inline-block; width:13px; height:17px; }
+.COFilter0,.COFilter1 { height:16px; }
+.COFilter0 { background-position:-2px -1900px; }
+.COFilter1 { background-position:-2px -2000px; }
+.COGroup0 { background-position:center -1899px; }
+.COGroup1 { background-position:center -1999px; }
+.COSearch0 { background-position:center -1899px; }
+.COSearch1 { background-position:center -1999px; }
+/* ...PSpace... is shown in Group and Search row according to actual width of the Panel column.
+   @ Set here only width and text-align
+*/
+.COPSpace1 { width:11px; text-align:center; }
+.COPSpace2 { width:25px; text-align:center; }
+.COPSpace3 { width:37px; text-align:center; }
+.COPSpace4 { width:51px; text-align:center; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                               Button type cell                                                          */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------- Button = "Tab" ------------- */
+/* @ Set border, padding, background and text attributes
+   ...TabHtml is set to the Tab button <td> tag
+   ...TabHtml1 is set to the Tab button <td> tag instead if the button value is 1
+   ...TabHtmlIcon... is set instead if the button has Icon
+*/
+.COTabHtml,.COTabHtml1,.COTabHtmlIcon,.COTabHtmlIcon1 { text-align:center; padding-left:5px; padding-right:5px; border-left:none; background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; }
+.CORowAbove .COTabHtml,.CORowAbove .COTabHtml1 { }
+.CORowBelow .COTabHtml,.CORowBelow .COTabHtml1 { }
+.COTabHtml1,.COTabHtmlIcon1 { background:#BBBBBB; color:white; }
+/* Separators between Button="Tab", set to <td> tag
+   They are created automatically to separate the Tabs or can be created manually by Button="TabSep"
+   @ Set background, border and padding or width
+   ...TabSep is set to empty <td> tag between two Tab buttons
+   ...TabSepLeft is set to empty <td> tag before Tab button
+   ...TabSepRight is set to empty <td> tag after Tab button
+   ...TabSepFirst is set to empty <td> tag before Tab button if it is the first cell
+   ...TabSepLast is set to empty <td> tag after Tab button if it is the last cell
+   ...TabSepNoBack is added to all Tab separators on row Kind="Tabber2"
+*/
+.COTabSep,.COTabSepLeft,.COTabSepRight {
+   padding-left:3px; padding-right:0px; background:white!important; border:0px none; border-right:1px solid #D4D4D4; cursor:default!important;
+   }
+.COTabSepRight,.COTabSepLeft { padding-left:5px; }
+.COTabSepLast { padding-left:1px; background:white!important; border:none; cursor:default!important; }
+.COTabSepFirst { padding-left:1px; background:white!important; border:none; border-right:1px solid #D4D4D4; cursor:default!important; }
+.COTabSepNoBack { background:none!important; }
+/* ------------- Button = "Button" ------------- */
+/* Parent of the <button>, it is set to cell <td> tag or inner <div> tag
+   @ Set background, border and padding
+*/
+.COToolButton { text-align:center; padding:0px 1px 0px 1px; }
+/* Class set to the <button> tag if set <Cfg UseButton='1'> or to <u> tag if set <Cfg UseButton='0'>.
+   @ Set background, border, margin, padding, height and text attributes
+   ...ToolButtonButton is set in table row
+   ...ToolButtonButton1 is set in table row instead if the button value is 1
+   ...ToolButtonButtonAuto is added if the table cell has not set Width attribute
+   ...ToolSpaceButton is set in Space row
+   ...ToolSpaceButton1 is set in Space row instead if the button value is 1
+   ...ToolSpaceButtonAuto is added if the Space cell has set Width="-1"
+   ...Icon is added if the cell has set Icon attribute
+   ...IconInner is set to the inner <i> tag with the icon and text if the cell has set Icon attribute
+   ...Empty is added to button with empty text to preserve its height; @ Set height
+*/
+button.COToolButtonButton,button.COToolButtonButton1 { font:10px/11px Verdana,Tahoma,"Trebuchet MS",sans-serif; height:17px; padding:0px; cursor:pointer; white-space:nowrap; }
+button.COToolSpaceButton,button.COToolSpaceButton1 { font:10px/11px Verdana,Tahoma,"Trebuchet MS",sans-serif; height:17px; padding:0px; cursor:pointer; white-space:nowrap; }
+button.COToolButtonButton1,button.COToolSpaceButton1 { color:#09C; font-weight:bold; }
+u.COToolButtonButton,u.COToolButtonButton1,u.COToolSpaceButton,u.COToolSpaceButton1 {
+   border:1px solid white; border-right:1px solid #888; border-bottom:1px solid #888;
+   cursor:pointer; text-decoration:none; display:block; overflow:hidden; white-space:nowrap;
+   }
+u.COToolButtonButton,u.COToolButtonButton1 { font:11px/12px Arial,Helvetica,sans-serif; padding:1px 5px 0px 5px; background:#E0E0E0; margin:1px; }
+u.COToolSpaceButton,u.COToolSpaceButton1 { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; background:#D8D8D8; padding:1px 3px 0px 3px; margin:1px 0px 2px 0px; }
+.COCellHeader u.COToolButtonButton,.COCellHeader u.COToolButtonButton1 { background:#D8D8D8; }
+u.COToolButtonButton1,u.COToolSpaceButton1 { border:1px solid #888; border-right:1px solid white; border-bottom:1px solid white; color:#09C; }
+u.COToolButtonIcon { padding-top:0px; padding-bottom:0px; } .COToolButtonIconInner { padding-top:1px; padding-bottom:0px; display:inline-block; font-style:normal; }
+u.COToolSpaceIcon { padding-top:0px; padding-bottom:0px; }  .COToolSpaceIconInner { padding-top:1px; padding-bottom:0px; display:inline-block; font-style:normal; }
+.COToolButtonEmpty { height:12px; width:0px; overflow:hidden; display:inline-block; }
+.COToolSpaceEmpty { height:13px; width:0px; overflow:hidden; display:inline-block; }
+.COToolButtonButtonAuto,.COToolSpaceButtonAuto { padding-left:3px; padding-right:3px; }
+/* ------------- Button = "Html" ------------- */
+/* @ Set border, padding, background and text attributes
+   ...ToolHtml is set to the button <td> tag
+   ...ToolHtml1 is set to the button <td> tag instead if the button value is 1
+   ...ToolHtmlIcon... is set instead if the button has Icon or is Class button
+*/
+.COToolHtml,.COToolHtml1 { padding-left:3px; padding-right:3px; text-align:center; }
+.COToolHtml1 { font-weight:bold; color:#09C; }
+.COToolHtmlIcon,.COToolHtmlIcon1 { text-align:center; }
+.COToolHtmlIcon1 { }
+/* Added to <td> or <div> tag when the cell has set Icon attribute, according to IconAlign value */
+.COToolHtmlIconLeft { text-align:left; }
+.COToolHtmlIconRight { text-align:right; }
+/* Added to <td> tag, to button with empty text; @ Set border and padding */
+.COToolHtmlIconSingle { border:0px none; }
+/* Added to <div> tag, to button with empty text to preserve its height; ...IE is used for IE5 quirks mode; @ Set height */
+.COToolHtmlEmpty { height:13px; width:0px; overflow:hidden; display:inline-block; }
+.COToolHtmlEmptyIE { overflow:hidden; display:inline-block; }
+/* -------------  Other Button type attributes ------------- */
+/* Added to <td> tag when the Button type cell has set Disabled='1' */
+.CODisabledButton { opacity:0.3; filter:alpha(opacity=30); }
+/* Popup cell side icon, used for Button type cell with List attribute
+   @ Set background and padding
+   ...PopupRight - right popup icon, used for PopupIcon="2" and for not empty value and PopupIcon="1"
+   ...PopupLeft - not used now
+   ...PopupNone - used for PopupIcon="1" and empty value, just to preserve the space
+*/
+.COPopupLeft,.COPopupRight { background-image:url(Menu.gif?v120); background-repeat:no-repeat; }
+.COPopupLeft { background-position:-6px -248px; padding-left:14px;}
+.COPopupRight { background-position:right -248px; padding-right:14px;}
+.COPopupNone { padding-right:14px; }
+/* ------------------------------------------  Special Toolbar buttons' images ---------------------------------------------- */
+/* Class added to <td> tag for alignment of the icon in Button="Class" or Button="Html"
+   ...Single is added for button without ButtonText to specify the icon width
+   ...Left/Right/Top/Bottom is added for appropriate IconAlign value
+   @ Set padding
+*/
+.COToolAlignSingle { padding-left:20px; padding-right:0px; border:0px none; }
+.COToolAlignSingle.COHasLine { padding-left:0px; }
+.COToolAlignLeft { padding-left:22px; padding-right:3px; }
+.COToolAlignRight { padding-left:3px; padding-right:22px; }
+.COToolAlignTop { padding-left:3px; padding-right:3px; padding-top:20px; }
+.COToolAlignBottom { padding:3px 3px 22px 3px; }
+/* Class added to <td> tag for alignment of the Underline line in Button="Class" or Button="Html"
+   ...Single is added for button without ButtonText
+   ...Left/Right/Top/Bottom is added for appropriate IconAlign value
+   @ Set margin and width
+*/
+.COToolLineAlignSingle {  margin:14px 19px -18px 0px; height:0px; width:21px; }
+.COToolLineAlignLeft { margin:14px 3px -18px -20px; height:0px; width:17px; }
+.COToolLineAlignRight { margin:14px -23px -18px -2px; height:0px; }
+.COToolLineAlignTop { margin:-3px auto -1px auto; height:0px; }
+.COToolLineAlignBottom { margin:34px auto -38px auto; height:0px; }
+/* Class set to <div> tag with Underline line in Button="Class" or Button="Html"
+   The number is the UnderlineStyle. ...Line is for UnderLineStyle = null, ...LineEmpty for UnderLineStyle=""
+   @ Set border and padding
+*/
+.COToolLine { border-bottom:3px solid; padding-top:1px; }
+.COToolLineEmpty { border-bottom:1px solid #D4D4D4!important; padding-top:2px; }
+.COToolLine0 { border-bottom:0px none; padding-top:3px; }
+.COToolLine1 { border-bottom:1px solid; padding-top:2px; }
+.COToolLine2 { border-bottom:2px solid; padding-top:2px; }
+.COToolLine3 { border-bottom:3px solid; padding-top:1px; }
+.COToolLine4 { border-bottom:1px dotted; padding-top:2px; }
+.COToolLine5 { border-bottom:2px dotted; padding-top:2px; }
+.COToolLine6 { border-bottom:1px dashed; padding-top:2px; }
+.COToolLine7 { border-bottom:2px dashed; padding-top:2px; }
+/* Used for Type="Button" Button="Class" and cell value null, "", 0 or 1. Set to <td> tag
+   @ Set border, padding, background
+*/
+.COToolSave,.COToolReload,.COToolRepaint,.COToolRepaint1,.COToolPrint,.COToolExportPDF,.COToolExport,.COToolImport,.COToolUndo,.COToolUndo1,.COToolRedo,.COToolRedo1,
+.COToolAdd,.COToolAddChild,.COToolAddCol,.COToolJoin,.COToolSplit,.COToolOutdent,.COToolIndent,.COToolSort,.COToolSort1,.COToolCalc,.COToolCalc1,
+.COToolExpandAll,.COToolCollapseAll,.COToolColumns,.COToolCfg,.COToolHelp,.COToolDebug,.COResizeGrid,.COResizeGridRtl {
+   background-image:url(Toolbar.gif?v120); background-repeat:no-repeat;
+   }
+.COToolSave { background-position:center 0px; }            .COToolSaveLeft { background-position:left 0px; }            .COToolSaveRight { background-position:right 0px; }            .COToolSaveBottom { background-position:center 20px; }
+.COToolReload { background-position:center -100px; }       .COToolReloadLeft { background-position:left -100px; }       .COToolReloadRight { background-position:right -100px; }       .COToolReloadBottom { background-position:center -80px; }
+.COToolRepaint { background-position:center -200px; }      .COToolRepaintLeft { background-position:left -200px; }      .COToolRepaintRight { background-position:right -200px; }      .COToolRepaintBottom { background-position:center -180px; }
+.COToolRepaint1 { background-position:center -300px; }     .COToolRepaintLeft1 { background-position:left -300px; }     .COToolRepaintRight1 { background-position:right -300px; }     .COToolRepaintBottom1 { background-position:center -280px; }
+.COToolPrint { background-position:center -400px; }        .COToolPrintLeft { background-position:left -400px; }        .COToolPrintRight { background-position:right -400px; }        .COToolPrintBottom { background-position:center -380px; }
+.COToolExportPDF { background-position:center -500px; }    .COToolExportPDFLeft { background-position:left -500px; }    .COToolExportPDFRight { background-position:right -500px; }    .COToolExportPDFBottom { background-position:center -480px; }
+.COToolExport { background-position:center -600px; }       .COToolExportLeft { background-position:left -600px; }       .COToolExportRight { background-position:right -600px; }       .COToolExportBottom { background-position:center -580px; }
+.COToolImport { background-position:center -3000px; }      .COToolImportLeft { background-position:left -3000px; }      .COToolImportRight { background-position:right -3000px; }      .COToolImportBottom { background-position:center -2980px; }
+.COToolUndo { background-position:center -700px; }         .COToolUndoLeft { background-position:2px -700px; }          .COToolUndoRight { background-position:right -700px; }         .COToolUndoBottom { background-position:center -680px; }
+.COToolUndo1 { background-position:center -800px; }        .COToolUndoLeft1 { background-position:left -800px; }        .COToolUndoRight1 { background-position:right -800px; }        .COToolUndoBottom1 { background-position:center -780px; }
+.COToolRedo { background-position:center -900px; }         .COToolRedoLeft { background-position:left -900px; }         .COToolRedoRight { background-position:right -900px; }         .COToolRedoBottom { background-position:center -880px; }
+.COToolRedo1 { background-position:center -1000px; }       .COToolRedoLeft1 { background-position:left -1000px; }       .COToolRedoRight1 { background-position:right -1000px; }       .COToolRedoBottom1 { background-position:center -980px; }
+.COToolAdd { background-position:center -1100px; }         .COToolAddLeft { background-position:left -1100px; }         .COToolAddRight { background-position:right -1100px; }         .COToolAddBottom { background-position:center -1080px; }
+.COToolAddChild { background-position:center -1200px; }    .COToolAddChildLeft { background-position:left -1200px; }    .COToolAddChildRight { background-position:right -1200px; }    .COToolAddChildBottom { background-position:center -1180px; }
+.COToolAddCol { background-position:center -2900px; }      .COToolAddColLeft { background-position:left -2900px; }      .COToolAddColRight { background-position:right -2900px; }      .COToolAddColBottom { background-position:center -2880px; }
+.COToolJoin { background-position:center -1300px; }        .COToolJoinLeft { background-position:left -1300px; }        .COToolJoinRight { background-position:right -1300px; }        .COToolJoinBottom { background-position:center -1280px; }
+.COToolSplit { background-position:center -1400px; }       .COToolSplitLeft { background-position:left -1400px; }       .COToolSplitRight { background-position:right -1400px; }       .COToolSplitBottom { background-position:center -1380px; }
+.COToolOutdent { background-position:center -1500px; }     .COToolOutdentLeft { background-position:left -1500px; }     .COToolOutdentRight { background-position:right -1500px; }     .COToolOutdentBottom { background-position:center -1480px; }
+.COToolIndent { background-position:center -1600px; }      .COToolIndentLeft { background-position:left -1600px; }      .COToolIndentRight { background-position:right -1600px; }      .COToolIndentBottom { background-position:center -1580px; }
+.COToolSort { background-position:center -1700px; }        .COToolSortLeft { background-position:left -1700px; }        .COToolSortRight { background-position:right -1700px; }        .COToolSortBottom { background-position:center -1680px; }
+.COToolSort1 { background-position:center -1800px; }       .COToolSortLeft1 { background-position:left -1800px; }       .COToolSortRight1 { background-position:right -1800px; }       .COToolSortBottom1 { background-position:center -1780px; }
+.COToolCalc { background-position:center -1900px; }        .COToolCalcLeft { background-position:left -1900px; }        .COToolCalcRight { background-position:right -1900px; }        .COToolCalcBottom { background-position:center -1880px; }
+.COToolCalc1 { background-position:center -2000px; }       .COToolCalcLeft1 { background-position:left -2000px; }       .COToolCalcRight1 { background-position:right -2000px; }       .COToolCalcBottom1 { background-position:center -1980px; }
+.COToolExpandAll { background-position:center -2100px; }   .COToolExpandAllLeft { background-position:left -2100px; }   .COToolExpandAllRight { background-position:right -2100px; }   .COToolExpandAllBottom { background-position:center -2080px; }
+.COToolCollapseAll { background-position:center -2200px; } .COToolCollapseAllLeft { background-position:left -2200px; } .COToolCollapseAllRight { background-position:right -2200px; } .COToolCollapseAllBottom { background-position:center -2180px; }
+.COToolColumns { background-position:center -2300px; }     .COToolColumnsLeft { background-position:left -2300px; }     .COToolColumnsRight { background-position:right -2300px; }     .COToolColumnsBottom { background-position:center -2280px; }
+.COToolCfg { background-position:center -2400px; }         .COToolCfgLeft { background-position:left -2400px; }         .COToolCfgRight { background-position:right -2400px; }         .COToolCfgBottom { background-position:center -2380px; }
+.COToolHelp { background-position:center -2500px; }        .COToolHelpLeft { background-position:left -2500px; }        .COToolHelpRight { background-position:right -2500px; }        .COToolHelpBottom { background-position:center -2480px; }
+.COToolDebug { background-position:center -2600px; }       .COToolDebugLeft { background-position:left -2600px; }       .COToolDebugRight { background-position:right -2600px; }       .COToolDebugBottom { background-position:center -2580px; }
+.COResizeGrid { background-position:center -2700px; }      .COResizeGridLeft { background-position:left -2700px; }      .COResizeGridRight { background-position:right -2700px; }      .COResizeGridBottom { background-position:center -2680px; }
+.COResizeGridRtl { background-position:center -2800px; }   .COResizeGridRtlLeft { background-position:left -2800px; }   .COResizeGridRtlRight { background-position:right -2800px; }   .COResizeGridRtlBottom { background-position:center -2780px; }
+.COToolPagerFirst,.COToolPagerFirst1,.COToolPagerPrev,.COToolPagerPrev1,.COToolPagerNext,.COToolPagerNext1,.COToolPagerLast,.COToolPagerLast1 {
+   background-image:url(Pager.gif?v120); background-repeat:no-repeat;
+   }
+.COToolPagerFirst { background-position:center 0px; }      .COToolPagerFirstLeft { background-position:left 0px; }      .COToolPagerFirstRight { background-position:right 0px; }      .COToolPagerFirstBottom { background-position:center 20px; }
+.COToolPagerFirst1 { background-position:center -100px; }  .COToolPagerFirstLeft1 { background-position:left -100px; }  .COToolPagerFirstRight1 { background-position:right -100px; }  .COToolPagerFirstBottom1 { background-position:center -80px; }
+.COToolPagerPrev { background-position:center -200px; }    .COToolPagerPrevLeft { background-position:left -200px; }    .COToolPagerPrevRight { background-position:right -200px; }    .COToolPagerPrevBottom { background-position:center -180px; }
+.COToolPagerPrev1 { background-position:center -300px; }   .COToolPagerPrevLeft1 { background-position:left -300px; }   .COToolPagerPrevRight1 { background-position:right -300px; }   .COToolPagerPrevBottom1 { background-position:center -280px; }
+.COToolPagerNext { background-position:center -400px; }    .COToolPagerNextLeft { background-position:left -400px; }    .COToolPagerNextRight { background-position:right -400px; }    .COToolPagerNextBottom { background-position:center -380px; }
+.COToolPagerNext1 { background-position:center -500px; }   .COToolPagerNextLeft1 { background-position:left -500px; }   .COToolPagerNextRight1 { background-position:right -500px; }   .COToolPagerNextBottom1 { background-position:center -480px; }
+.COToolPagerLast { background-position:center -600px; }    .COToolPagerLastLeft { background-position:left -600px; }    .COToolPagerLastRight { background-position:right -600px; }    .COToolPagerLastBottom { background-position:center -580px; }
+.COToolPagerLast1 { background-position:center -700px; }   .COToolPagerLastLeft1 { background-position:left -700px; }   .COToolPagerLastRight1 { background-position:right -700px; }   .COToolPagerLastBottom1 { background-position:center -680px; }
+.COToolCorrect,.COToolCorrect1,.COToolZoomIn,.COToolZoomIn1,.COToolZoomOut,.COToolZoomOut1,.COToolZoomFit {
+   background-image:url(ToolbarGantt.gif?v120); background-repeat:no-repeat;
+   }
+.COToolCorrect { background-position:center 0px; }        .COToolCorrectLeft { background-position:left 0px; }          .COToolCorrectRight { background-position:right 0px; }         .COToolCorrectBottom { background-position:center 20px; }
+.COToolCorrect1 { background-position:center -100px; }    .COToolCorrectLeft1 { background-position:left -100px; }      .COToolCorrectRight1 { background-position:right -100px; }     .COToolCorrectBottom1 { background-position:center -80px; }
+.COToolZoomIn { background-position:center -200px; }      .COToolZoomInLeft { background-position:left -200px; }        .COToolZoomInRight { background-position:right -200px; }       .COToolZoomInBottom { background-position:center -180px; }
+.COToolZoomIn1 { background-position:center -300px; }     .COToolZoomInLeft1 { background-position:left -300px; }       .COToolZoomInRight1 { background-position:right -300px; }      .COToolZoomInBottom1 { background-position:center -280px; }
+.COToolZoomOut { background-position:center -400px; }     .COToolZoomOutLeft { background-position:left -400px; }       .COToolZoomOutRight { background-position:right -400px; }      .COToolZoomOutBottom { background-position:center -380px; }
+.COToolZoomOut1 { background-position:center -500px; }    .COToolZoomOutLeft1 { background-position:left -500px; }      .COToolZoomOutRight1 { background-position:right -500px; }     .COToolZoomOutBottom1 { background-position:center -480px; }
+.COToolZoomFit { background-position:center -600px; }     .COToolZoomFitLeft { background-position:left -600px; }       .COToolZoomFitRight { background-position:right -600px; }      .COToolZoomFitBottom { background-position:center -580px; }
+.COToolLeft,.COToolCenter,.COToolRight,.COToolTop,.COToolMiddle,.COToolBottom,.COToolBold,.COToolItalic,.COToolUnderline,.COToolStrike,.COToolRotateLeft,.COToolRotateRight,.COToolWrapText {
+   background-image:url(ToolbarSheet.gif?v120); background-repeat:no-repeat;
+   }
+.COToolLeft1,.COToolCenter1,.COToolRight1,.COToolTop1,.COToolMiddle1,.COToolBottom1,.COToolBold1,.COToolItalic1,.COToolUnderline1,.COToolStrike1,.COToolRotateLeft1,.COToolRotateRight1,.COToolWrapText1 {
+   background-image:url(ToolbarSheet.gif?v120); background-repeat:no-repeat; background-color:#CCC;
+   }
+.COToolLeft,.COToolLeft1 { background-position:center 0px; }                   .COToolLeftLeft,.COToolLeftLeft1 { background-position:left 0px; }                   .COToolLeftRight,.COToolLeftRight1 { background-position:right 0px; }                   .COToolLeftBottom,.COToolLeftBottom1 { background-position:center 20px; }
+.COToolCenter,.COToolCenter1 { background-position:center -100px; }            .COToolCenterLeft,.COToolCenterLeft1 { background-position:left -100px; }            .COToolCenterRight,.COToolCenterRight1 { background-position:right -100px; }            .COToolCenterBottom,.COToolCenterBottom1 { background-position:center -80px; }
+.COToolRight,.COToolRight1 { background-position:center -200px; }              .COToolRightLeft,.COToolRightLeft1 { background-position:left -200px; }              .COToolRightRight,.COToolRightRight1 { background-position:right -200px; }              .COToolRightBottom,.COToolRightBottom1 { background-position:center -180px; }
+.COToolTop,.COToolTop1 { background-position:center -300px; }                  .COToolTopLeft,.COToolTopLeft1 { background-position:left -300px; }                  .COToolTopRight,.COToolTopRight1 { background-position:right -300px; }                  .COToolTopBottom,.COToolTopBottom1 { background-position:center -280px; }
+.COToolMiddle,.COToolMiddle1 { background-position:center -400px; }            .COToolMiddleLeft,.COToolMiddleLeft1 { background-position:left -400px; }            .COToolMiddleRight,.COToolMiddleRight1 { background-position:right -400px; }            .COToolMiddleBottom,.COToolMiddleBottom1 { background-position:center -380px; }
+.COToolBottom,.COToolBottom1 { background-position:center -500px; }            .COToolBottomLeft,.COToolBottomLeft1 { background-position:left -500px; }            .COToolBottomRight,.COToolBottomRight1 { background-position:right -500px; }            .COToolBottomBottom,.COToolBottomBottom1 { background-position:center -480px; }
+.COToolBold,.COToolBold1 { background-position:center -600px; }                .COToolBoldLeft,.COToolBoldLeft1 { background-position:left -600px; }                .COToolBoldRight,.COToolBoldRight1 { background-position:right -600px; }                .COToolBoldBottom,.COToolBoldBottom1 { background-position:center -580px; }
+.COToolItalic,.COToolItalic1 { background-position:center -700px; }            .COToolItalicLeft,.COToolItalicLeft1 { background-position:left -700px; }            .COToolItalicRight,.COToolItalicRight1 { background-position:right -700px; }            .COToolItalicBottom,.COToolItalicBottom1 { background-position:center -680px; }
+.COToolUnderline,.COToolUnderline1 { background-position:center -800px; }      .COToolUnderlineLeft,.COToolUnderlineLeft1 { background-position:left -800px; }      .COToolUnderlineRight,.COToolUnderlineRight1 { background-position:right -800px; }      .COToolUnderlineBottom,.COToolUnderlineBottom1 { background-position:center -780px; }
+.COToolStrike,.COToolStrike1 { background-position:center -900px; }            .COToolStrikeLeft,.COToolStrikeLeft1 { background-position:left -900px; }            .COToolStrikeRight,.COToolStrikeRight1 { background-position:right -900px; }            .COToolStrikeBottom,.COToolStrikeBottom1 { background-position:center -880px; }
+.COToolRotateLeft,.COToolRotateLeft1 { background-position:center -1000px; }   .COToolRotateLeftLeft,.COToolRotateLeftLeft1 { background-position:left -1000px; }   .COToolRotateLeftRight,.COToolRotateLeftRight { background-position:right -1000px; }    .COToolRotateLeftBottom,.COToolRotateLeftBottom1 { background-position:center -980px; }
+.COToolRotateRight,.COToolRotateRight1 { background-position:center -1100px; } .COToolRotateRightLeft,.COToolRotateRightLeft1 { background-position:left -1100px; } .COToolRotateRightRight,.COToolRotateRightRight1 { background-position:right -1100px; } .COToolRotateRightBottom,.COToolRotateRightBottom1 { background-position:center -1080px; }
+.COToolWrapText,.COToolWrapText1 { background-position:center -1200px; }       .COToolWrapTextLeft,.COToolWrapTextLeft1 { background-position:left -1200px; }       .COToolWrapTextRight,.COToolWrapTextRight { background-position:right -1200px; }        .COToolWrapTextBottom.COToolWrapTextBottom1 { background-position:center -1180px; }
+.COToolColorText,.COToolColorBackground,.COToolBorder,.COToolBorderAll,.COToolBorderI3,.COToolBorderI2,.COToolBorderI1,
+.COToolBorderO15,.COToolBorderO1,.COToolBorderO2,.COToolBorderO4,.COToolBorderO8,.COToolBorderO5,.COToolBorderO10,.COToolColorShadow {
+   background-image:url(ToolbarSheetWide.gif?v120); background-repeat:no-repeat;
+   }
+.COToolColorText { background-position:center 0px; }      .COToolColorTextLeft { background-position:left 0px; }        .COToolColorTextRight { background-position:right 0px; }       .COToolColorTextBottom { background-position:center 20px; }
+.COToolColorBackground { background-position:center -100px; } .COToolColorBackgroundLeft { background-position:left -100px; } .COToolColorBackgroundRight { background-position:right -100px; } .COToolColorBackgroundBottom { background-position:center -80px; }
+.COToolBorder { background-position:center -200px; }      .COToolBorderLeft { background-position:left -200px; }        .COToolBorderRight { background-position:right -200px; }       .COToolBorderBottom { background-position:center -180px; }
+.COToolBorderAll { background-position:center -300px; }   .COToolBorderAllLeft { background-position:left -300px; }     .COToolBorderAllRight { background-position:right -300px; }    .COToolBorderAllBottom { background-position:center -280px; }
+.COToolBorderO15 { background-position:center -400px; }   .COToolBorderO15Left { background-position:left -400px; }     .COToolBorderO15Right { background-position:right -400px; }    .COToolBorderO15Bottom { background-position:center -380px; }
+.COToolBorderI3 { background-position:center -500px; }    .COToolBorderI3Left { background-position:left -500px; }      .COToolBorderI3Right { background-position:right -500px; }     .COToolBorderI3Bottom { background-position:center -480px; }
+.COToolBorderI2 { background-position:center -600px; }    .COToolBorderI2Left { background-position:left -600px; }      .COToolBorderI2Right { background-position:right -600px; }     .COToolBorderI2Bottom { background-position:center -580px; }
+.COToolBorderI1 { background-position:center -700px; }    .COToolBorderI1Left { background-position:left -700px; }      .COToolBorderI1Right { background-position:right -700px; }     .COToolBorderI1Bottom { background-position:center -680px; }
+.COToolBorderO1 { background-position:center -800px; }    .COToolBorderO1Left { background-position:left -800px; }      .COToolBorderO1Right { background-position:right -800px; }     .COToolBorderO1Bottom { background-position:center -780px; }
+.COToolBorderO2 { background-position:center -900px; }    .COToolBorderO2Left { background-position:left -900px; }      .COToolBorderO2Right { background-position:right -900px; }     .COToolBorderO2Bottom { background-position:center -880px; }
+.COToolBorderO4 { background-position:center -1000px; }   .COToolBorderO4Left { background-position:left -1000px; }     .COToolBorderO4Right { background-position:right -1000px; }    .COToolBorderO4Bottom { background-position:center -980px; }
+.COToolBorderO8 { background-position:center -1100px; }   .COToolBorderO8Left { background-position:left -1100px; }     .COToolBorderO8Right { background-position:right -1100px; }    .COToolBorderO8Bottom { background-position:center -1080px; }
+.COToolBorderO5 { background-position:center -1200px; }   .COToolBorderO5Left { background-position:left -1200px; }     .COToolBorderO5Right { background-position:right -1200px; }    .COToolBorderO5Bottom { background-position:center -1180px; }
+.COToolBorderO10 { background-position:center -1300px; }  .COToolBorderO10Left { background-position:left -1300px; }    .COToolBorderO10Right { background-position:right -1300px; }   .COToolBorderO10Bottom { background-position:center -1280px; }
+.COToolColorShadow { background-position:center -1400px; }.COToolColorShadowLeft { background-position:left -1400px; }  .COToolColorShadowRight { background-position:right -1400px; } .COToolColorShadowBottom { background-position:center -1380px; }
+/* Void button ResizeGrid; @ Do not change */
+.COToolResize { visibility:hidden; }
+/* It is added to the td tag when used VAlign and no button text is shown */
+.COToolImage { display:inline-block; width:20px; height:19px; padding:0px; overflow:hidden; }
+/* It is added to the td tag when used VAlign and the button text is shown; for IconAlign values */
+.COToolImageLeftText,.COToolImageRightText,.COToolImageTopText,.COToolImageBottomText { display:inline-block; text-decoration:none; }
+.COToolImageLeftText { padding-top:3px; padding-bottom:3px; }
+.COToolImageRightText { padding-top:3px; padding-bottom:3px; }
+.COToolImageTopText { height:13px; padding-bottom:3px; }
+.COToolImageBottomText { height:13px; padding-top:3px; padding-bottom:22px; }
+/* It is added to div tag when used Icon attribute with Button="Class"; for IconAlign values; Single is used without ButtonText; */
+.COToolIconSingle { background-position:center center; }
+.COToolIconLeft { background-position:left center; }
+.COToolIconRight { background-position:right center; }
+.COToolIconTop { background-position:center top; }
+.COToolIconBottom { background-position:center bottom; }
+/* Special class added to <td> tag for Pager type cell edit box with pager number - it is standard editable Space cell */
+.COPagerEdit > div { text-align:center; }
+/* Special icon always placed to right bottom grid corner to resize grid if set ResizingMain
+   @ Set background and optionally margin, width and height for the icon size and position
+   ...Rtl is placed in bottom left corner and is used in RTL mode
+*/
+.COResizeGrid  { background-position:1px -2700px; margin:-21px 0px 0px auto; height:21px; width:19px; overflow:hidden; padding:0px; cursor:nw-resize; position:relative; }
+.COResizeGridRtl { background-position:1px -2800px; margin:-21px auto 0px 0px; height:21px; width:19px; overflow:hidden; padding:0px; cursor:ne-resize; position:relative; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                            Cell side Icon / Button                                                      */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* --------------------------------------------------  Filter images -------------------------------------------------------- */
+/* Filter operator icons shown on left or right side (set by IconAlign), shown in <td> or <div> tag.
+   The number 0 - 12 is the operator number set in cell Filter attribute
+   @ Set here background and padding-left
+*/
+.COFilter0Left,.COFilter1Left,.COFilter2Left,.COFilter3Left,.COFilter4Left,.COFilter5Left,.COFilter6Left,
+.COFilter7Left,.COFilter8Left,.COFilter9Left,.COFilter10Left,.COFilter11Left,.COFilter12Left  {
+   background-image:url(Filter.gif?v120); background-repeat:no-repeat; padding-left:17px;
+   }
+.COFilter0Right,.COFilter1Right,.COFilter2Right,.COFilter3Right,.COFilter4Right,.COFilter5Right,.COFilter6Right,
+.COFilter7Right,.COFilter8Right,.COFilter9Right,.COFilter10Right,.COFilter11Right,.COFilter12Right {
+   background-image:url(Filter.gif?v120); background-repeat:no-repeat; padding-right:17px;
+   }
+.COFilter0Left,.COFilter0Menu { background-position:left 0px; }
+.COFilter1Left,.COFilter1Menu { background-position:left -150px; }
+.COFilter2Left,.COFilter2Menu { background-position:left -300px; }
+.COFilter3Left,.COFilter3Menu { background-position:left -450px; }
+.COFilter4Left,.COFilter4Menu { background-position:left -600px; }
+.COFilter5Left,.COFilter5Menu { background-position:left -750px; }
+.COFilter6Left,.COFilter6Menu { background-position:left -900px; }
+.COFilter7Left,.COFilter7Menu { background-position:left -1050px; }
+.COFilter8Left,.COFilter8Menu { background-position:left -1200px; }
+.COFilter9Left,.COFilter9Menu { background-position:left -1350px; }
+.COFilter10Left,.COFilter10Menu { background-position:left -1500px; }
+.COFilter11Left,.COFilter11Menu { background-position:left -1650px; }
+.COFilter12Left,.COFilter12Menu { background-position:left -1800px; }
+.COFilter0Right { background-position:right 0px; }
+.COFilter1Right { background-position:right -150px; }
+.COFilter2Right { background-position:right -300px; }
+.COFilter3Right { background-position:right -450px; }
+.COFilter4Right { background-position:right -600px; }
+.COFilter5Right { background-position:right -750px; }
+.COFilter6Right { background-position:right -900px; }
+.COFilter7Right { background-position:right -1050px; }
+.COFilter8Right { background-position:right -1200px; }
+.COFilter9Right { background-position:right -1350px; }
+.COFilter10Right { background-position:right -1500px; }
+.COFilter11Right { background-position:right -1650px; }
+.COFilter12Right { background-position:right -1800px; }
+/* The filter operator icons shown in the popup menu
+   @ Set here background, width and height
+*/
+.COFilter0Menu,.COFilter1Menu,.COFilter2Menu,.COFilter3Menu,.COFilter4Menu,.COFilter5Menu,.COFilter6Menu,
+.COFilter7Menu,.COFilter8Menu,.COFilter9Menu,.COFilter10Menu,.COFilter11Menu,.COFilter12Menu {
+   width:17px; height:17px; overflow:hidden; background-image:url(Filter.gif?v120); background-repeat:no-repeat; margin-left:-1px;
+   }
+/* Added to the filter cell according to the filter operator
+   @ Set here text attributes
+*/
+.COFilter0Value { color:silver; }
+.COFilter1Value,.COFilter2Value,.COFilter3Value,.COFilter4Value,.COFilter5Value,.COFilter6Value,.COFilter7Value,.COFilter8Value,.COFilter9Value,.COFilter10Value,.COFilter11Value,.COFilter12Value { color:blue; }
+/* ---------------------------------------------------  Sort images --------------------------------------------------------- */
+/* Sort icons shown on left or right side (set by IconAlign) in Header cell, shown in <td> or <div> tag.
+   0 - no sort, 1 - first sort asc, 2 - second sort asc, 3 - third sort asc, 4 - first sort desc, 5 - second sort desc, 6 - third sort desc
+   @ Set here background and padding-left
+*/
+.COSort0Left,.COSort1Left,.COSort2Left,.COSort3Left,.COSort4Left,.COSort5Left,.COSort6Left,
+.COSort0Right,.COSort1Right,.COSort2Right,.COSort3Right,.COSort4Right,.COSort5Right,.COSort6Right {
+   background-image:url(Sort.gif?v120); background-repeat:no-repeat;
+   }
+.COSort0Left,.COSort1Left,.COSort2Left,.COSort3Left,.COSort4Left,.COSort5Left,.COSort6Left { padding-left:17px; }
+.COSort0Right,.COSort1Right,.COSort2Right,.COSort3Right,.COSort4Right,.COSort5Right,.COSort6Right{ padding-right:17px; }
+.COSort0Left { background-position:left 0px; }
+.COSort1Left { background-position:left -250px; }
+.COSort2Left { background-position:left -500px; }
+.COSort3Left { background-position:left -750px; }
+.COSort4Left { background-position:left -1000px; }
+.COSort5Left { background-position:left -1250px; }
+.COSort6Left { background-position:left -1500px; }
+.COSort0Right { background-position:right 0px; }
+.COSort1Right { background-position:right -250px; }
+.COSort2Right { background-position:right -500px; }
+.COSort3Right { background-position:right -750px; }
+.COSort4Right { background-position:right -1000px; }
+.COSort5Right { background-position:right -1250px; }
+.COSort6Right { background-position:right -1500px; }
+/* ------------------------------------------------  Side button images ----------------------------------------------------- */
+/* Predefined side icon and side button images.
+   The ...Left is used for Icon with IconAlign="Left" or without IconAlign
+   The ...Right is used for Icon with IconAlign="Right" and for Button
+   The ...Top and ...Bottom is used for Type="Button" with Icon and IconAlign="Top" or "Bottom"
+   The ...Check0... is not checked, ...Check1... is checked and ...Check2... is empty state (the ?)
+   @ Set here background and padding-left or padding-right
+ */
+.CODateLeft,.CODatesLeft,.CODefaultsLeft,.COEnumLeft,.COCollapseLeft,.COExpandLeft,.COFileLeft,.COClearLeft  { background-image:url(Button.gif?v120); padding-left:17px; background-repeat:no-repeat; }
+.CODateRight,.CODatesRight,.CODefaultsRight,.COEnumRight,.COCollapseRight,.COExpandRight,.COFileRight,.COClearRight { background-image:url(Button.gif?v120); padding-right:17px; background-repeat:no-repeat; }
+.CODateTop,.CODatesTop,.CODefaultsTop,.COEnumTop,.COCollapseTop,.COExpandTop,.COFileTop,.COClearTop  { background-image:url(Button.gif?v120); padding-top:20px; background-repeat:no-repeat; }
+.CODateBottom,.CODatesBottom,.CODefaultsBottom,.COEnumBottom,.COCollapseBottom,.COExpandBottom,.COFileBottom,.COClearBottom { background-image:url(Button.gif?v120); padding-bottom:20px; background-repeat:no-repeat; }
+.CODateLeft,.CODatesLeft { background-position:left -250px; padding-left:20px; }
+.CODateRight,.CODatesRight { background-position:right -250px; padding-right:20px; }
+.CODateTop,.CODatesTop { background-position:center -250px; }
+.CODateBottom,.CODatesBottom { background-position:center -230px; }
+.CODefaultsLeft { background-position:left 0px; padding-left:20px; }
+.CODefaultsRight { background-position:right 0px; padding-right:20px; }
+.CODefaultsTop { background-position:center 0px; }
+.CODefaultsBottom { background-position:center 20px; }
+.COEnumLeft { background-position:left -500px; }
+.COEnumRight { background-position:right -500px; }
+.COEnumTop { background-position:center -500px; }
+.COEnumBottom { background-position:center -480px; }
+.COExpandLeft { background-position:left -999px; }
+.COExpandRight { background-position:right -999px; }
+.COExpandTop { background-position:center -1000px; }
+.COExpandBottom { background-position:center -980px; }
+.COCollapseLeft { background-position:left -749px;}
+.COCollapseRight { background-position:right -749px;}
+.COCollapseTop { background-position:center -750px; }
+.COCollapseBottom { background-position:center -730px; }
+.COFileLeft { background-position:left -2000px; padding-left:20px; }
+.COFileRight { background-position:right -2000px; padding-right:20px; }
+.COFileTop { background-position:center -2000px; }
+.COFileBottom { background-position:center -1980px; }
+.COClearLeft { background-position:left -2250px; }
+.COClearRight { background-position:right -2250px; }
+.COClearTop { background-position:center -2250px; }
+.COClearBottom { background-position:center -1230px; }
+.COCheck0Left,.COCheck1Left,.COCheck2Left  { background-image:url(Bool.gif?v120); padding-left:17px; background-repeat:no-repeat; }
+.COCheck0Right,.COCheck1Right,.COCheck2Right { background-image:url(Bool.gif?v120); padding-right:17px; background-repeat:no-repeat; }
+.COCheck0Top,.COCheck1Top,.COCheck2Top { background-image:url(Bool.gif?v120); padding-top:20px; background-repeat:no-repeat; }
+.COCheck0Bottom,.COCheck1Bottom,.COCheck2Bottom { background-image:url(Bool.gif?v120); padding-bottom:20px; background-repeat:no-repeat; }
+.COCheck0Left { background-position:left 0px; }
+.COCheck1Left { background-position:left -250px; }
+.COCheck2Left { background-position:left -500px; }
+.COCheck0Right { background-position:right 0px; }
+.COCheck1Right { background-position:right -250px; }
+.COCheck2Right { background-position:right -500px; }
+.COCheck0Top { background-position:center 0px; }
+.COCheck1Top { background-position:center -250px; }
+.COCheck2Top { background-position:center -500px; }
+.COCheck0Bottom { background-position:center 20px; }
+.COCheck1Bottom { background-position:center -230px; }
+.COCheck2Bottom { background-position:center -480px; }
+/* Class added to right side button if shown in <u> tag - in Header cell or if the cell has set VAlign
+   @ Set here only height
+*/
+.COButtonImage { display:inline-block; height:17px; padding-left:0px; padding-right:0px; }
+/* Class added to <a> tag in Type="Icon" and Link attribute set. @ Do not change. */
+.COIconLink { text-decoration:none; width:1000px; display:inline-block; }
+/* Class added to the <td> or <div> tag when set custom Icon as icon file, with the suffix as IconAlign. @ Set the padding-left or padding-right. */
+.COIconLeft { background-position:left 0px; padding-left:20px; background-repeat:no-repeat; }
+.COIconRight { background-position:right 0px; padding-right:20px; background-repeat:no-repeat; }
+.COIconCenter { background-position:center 0px; background-repeat:no-repeat; }
+.COIconTop { padding-top:19px; background-position:center 0px; background-repeat:no-repeat; }
+.COIconBottom { padding-bottom:22px; background-position:center 18px; background-repeat:no-repeat; }
+/* Class added to the <td> or <div> tag when set custom Icon as icon file, with the suffix as IconAlign="Top or "Bottom and VAlign.
+   Used to synchronize position of custom icons with standard toolbar icons
+   @ Set padding and margin
+*/
+.COIconTopVAlignTop { padding-top:19px; }
+.COIconTopVAlignMiddle { padding-top:19px; }
+.COIconTopVAlignBottom { padding-top:20px; }
+.COIconBottomVAlignTop { padding-bottom:22px; }
+.COIconBottomVAlignMiddle { padding-bottom:22px; }
+.COIconBottomVAlignBottom { padding-bottom:22px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                        Cell checkboxes - Radio and Bool types                                           */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------------------------------------------  Radio Type images ------------------------------------------------------ */
+/* Radio icons for cell RadioIcon = 0,1,2, set to <td> tag
+   The ...Right is used when cell has set RadioRight='1'
+   The ...None is used for RadioIcon='6'
+   0 - unchecked radio, 1 - checked radio, 2 - unchecked checkbox, 3 - checked checkbox
+   @ Set background, padding, border and text attributes
+*/
+.CORadio0Left,.CORadio0Right,.CORadio1Left,.CORadio1Right,.CORadio2Left,.CORadio2Right,.CORadio3Left,.CORadio3Right,.CORadioIconLeft,.CORadioIconRight,.CORadioNone {
+   background-image:url(Bool.gif?v120); background-repeat:no-repeat; font:11.9px/17px Verdana,Tahoma,"Trebuchet MS",sans-serif;
+   }
+.CORadio0Left,.CORadio1Left,.CORadio2Left,.CORadio3Left,.CORadioIconLeft { padding-left:17px; padding-right:3px; }
+.CORadio0Right,.CORadio1Right,.CORadio2Right,.CORadio3Right,.CORadioIconRight { padding-right:17px; padding-left:3px; }
+.CORadio0Left { background-position:left -1500px; }
+.CORadio1Left { background-position:left -1750px; }
+.CORadio2Left { background-position:left 0px; }
+.CORadio3Left { background-position:left -250px;}
+.CORadio0Right { background-position:right -1500px; }
+.CORadio1Right { background-position:right -1750px; }
+.CORadio2Right { background-position:right 0px; }
+.CORadio3Right { background-position:right -250px; }
+.CORadioNone { background-image:none; }
+/* Custom radio icon for cell RadioIcon = "image file", set to <td> tag.
+   The ...Right is used when cell has set RadioRight='1'
+   @ Set padding, border and text attributes
+*/
+.CORadioIconLeft { background-position:left top; }
+.CORadioIconRight { background-position:right top; }
+/* The Radio icons if set to nobr and span tags when set cell attribute Wrap='1'
+   @ Set padding and optionally background, border and text attributes
+*/
+nobr.CORadio0Left,nobr.CORadio1Left,nobr.CORadio2Left,nobr.CORadio3Left,nobr.CORadio0Right,nobr.CORadio1Right,nobr.CORadio2Right,nobr.CORadio3Right,nobr.CORadioIconLeft,nobr.CORadioIconRight,
+span.CORadio0Left,span.CORadio1Left,span.CORadio2Left,span.CORadio3Left,span.CORadio0Right,span.CORadio1Right,span.CORadio2Right,span.CORadio3Right,span.CORadioIconLeft,span.CORadioIconRight {
+   padding-top:2px; padding-bottom:2px;
+   }
+/* Radio icons by standard <input>, for cell RadioIcon = 3,4,5
+   ...RadioCell is set to the <td> tag around the radio. @ Set background, padding and border
+   ...RadioInput is set to <input> type "checkbox" or "radio". @ Set margin, padding and line-height
+   ...RadioText is set to <span> tag next to the <input>. @ Set text attributes and optionally background, padding and border
+*/
+.CORadioCell { white-space:nowrap; }
+.CORadioInput { margin:1px 2px 0px 2px; padding:0px; margin-top:-4px!IE; line-height:13px; }
+.CORadioText { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; }
+nobr.CORadioCell,span.CORadioCell { display:inline-block; }
+/* Caption of checked radio button; @ Set here border, padding, background and text attributes */
+.CORadioChecked { color:#0099CC; }
+/* -------------------------------------------------  Bool Type images ------------------------------------------------------ */
+/* Checkbox icons for table row cell, for BoolIcon = 0,1,2,3, set to <td> or <u> tag
+   0 - unchecked checkbox, 1 - checked checkbox, X - empty (third) state (?), 2 - unchecked radio, 3 - checked radio, RO - read only
+   ...BoolIcon is used for custom icon in BoolIcon="image file"
+   ...BoolImage is added for every the Bool icon
+   @ Set here background and width and height
+*/
+.COBool0,.COBool1,.COBoolX,.COBool0RO,.COBool1RO,.COBoolXRO,.COBool2,.COBool3,.COBool2RO,.COBool3RO { background-image:url(Bool.gif?v120); background-repeat:no-repeat; padding-left:17px; }
+.COBoolIcon { background-repeat:no-repeat; }
+.COBool0 { background-position:center 0px; }
+.COBool1 { background-position:center -250px; }
+.COBoolX { background-position:center -500px; }
+.COBool0RO { background-position:center -750px; }
+.COBool1RO { background-position:center -1000px; }
+.COBoolXRO { background-position:center -1250px; }
+.COBool2,.COBool2RO { background-position:center -1500px; }
+.COBool3,.COBool3RO { background-position:center -1750px; }
+.COBoolImage { display:inline-block; width:17px; height:17px; overflow:hidden; padding:0px; }
+/* Checkbox icons for Space row cell, for BoolIcon = 0,1,2,3, set to <td> or <u> tag
+   0 - unchecked checkbox, 1 - checked checkbox, X - empty (third) state (?), 2 - unchecked radio, 3 - checked radio, RO - read only
+   ...BoolIconSpace is used for custom icon in BoolIcon="image file"
+   ...BoolImageSpace is added for every the Bool icon
+   @ Set here background, width and height and padding-left (width and height is used in <u> tag, padding-left in <td> tag)
+*/
+.COBoolXSpace,.COBool0Space,.COBool1Space,.COBoolXSpaceRO,.COBool0SpaceRO,.COBool1SpaceRO { background-image:url(Bool.gif?v120); background-repeat:no-repeat; padding-left:17px; }
+.COBool2Space,.COBool3Space,.COBool2SpaceRO,.COBool3SpaceRO { background-image:url(Bool.gif?v120); background-repeat:no-repeat; padding-left:17px; }
+.COBoolIconSpace { background-repeat:no-repeat; }
+.COBool0Space { background-position:center 1px; }
+.COBool1Space { background-position:center -249px; }
+.COBoolXSpace { background-position:center -499px; }
+.COBool0SpaceRO { background-position:center -749px; }
+.COBool1SpaceRO { background-position:center -999px; }
+.COBoolXSpaceRO { background-position:center -1249px; }
+.COBool2Space,.COBool2SpaceRO { background-position:center -1499px; }
+.COBool3Space,.COBool3SpaceRO { background-position:center -1749px; }
+.COBoolImageSpace { display:inline-block; width:17px; height:19px; overflow:hidden; padding:0px; }
+/* Bool icons by standard <input>, for cell BoolIcon = 4,5, different for table and Space row cells
+   @ Set margin and padding
+*/
+.COBoolInput { margin-top:2px; margin-bottom:0px; padding:0px; margin-top:-2px!IE; margin-bottom:-6px!IE; }
+.COBoolInputSpace { margin-top:3px; margin-bottom:0px; padding:0px; margin-top:-2px!IE; margin-bottom:-6px!IE; }
+/* Bool icons by text 'x' in rect, for cell BoolIcon = 6
+   0 - unchecked checkbox, 1 - checked checkbox, 2 - empty (third) state (?), RO - read only
+   ...IE is added in IE5 quirks mode
+   @ Set height, width, border, background, padding, margin and text attributes
+*/
+.COBoolChar0,.COBoolChar1,.COBoolChar2,.COBoolChar0RO,.COBoolChar1RO,.COBoolChar2RO {
+   height:9px; width:8px; border:2px ridge white; margin:2px auto 2px auto; font:bold 9px Arial; color:blue; text-align:center; overflow:hidden;
+   }
+.COBoolChar2 { color:green; }
+.COBoolChar0RO,.COBoolChar1RO,.COBoolChar2RO { color:gray; }
+.COBoolCharIE { height:14px; width:12px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                     Side pager                                                          */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ...PagerMain - main <div> tag inside <td> tag. It has set inline width. @ Set border, margin and padding
+   ...PagerBody - the pages without header, <div> tag. @ Set background, border, margin and padding.
+   ...PagerBodyLeft, ...PagerBodyRight - added to the ...PagerBody according to the side where is the pager displayed.
+   ...PagerHeader - the pager header, <div> tag. @ Set background, border, margin and padding.
+   ...PagerHeaderLeft, ...PagerHeaderRight - added to the ...PagerHeader according to the side where is the pager displayed.
+   ...PagerCaption - text inside header, <div> tag, set text attributes and optionally also border, padding, margin and background
+*/
+.COPagerMain { border:1px solid #e9e9e9; border-bottom:0px none; overflow:hidden; white-space:nowrap; }
+.COPagerBody { background:white; }
+.COPagerBodyLeft { }
+.COPagerBodyRight { }
+.COPagerHeader { background:#E9E9E9 url(Backgrounds.gif?v120) 0px 0px repeat-x; border:1px solid white; border-right:1px solid #D4D4D4; border-bottom:1px dotted #CBCBCB; cursor:default; }
+.COPagerHeaderLeft { }
+.COPagerHeaderRight { }
+.COPagerCaption { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:2px 3px 2px 3px; white-space:nowrap; }
+/* ...PagerItem - one page name. @ Set background, border, margin, padding and text attributes
+   ...PagerItemTouch is added on tablet
+*/
+.COPagerItem {
+   font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:pointer; overflow:hidden; white-space:nowrap;
+   border-top:1px solid white; border-bottom:1px dotted #CBCBCB; border-right:1px solid #D4D4D4; padding:1px 3px 0px 3px; background:white;
+   }
+.COPagerItemTouch { padding-top:4px; padding-bottom:4px; }
+/* Classes to ...PagerItem added on pager Type="Gantt" if set ShowUsedPages / ShowExcludedPages
+   @ Set background, border, margin, padding and text attributes
+*/
+.COPagerItemUsed { color:green; }
+.COPagerItemUnused { color:#888; }
+.COPagerItemExcluded { background:#DDD; }
+/* Marked part of the page name, <span> tag
+   Sort1 - the first sorted column, Sort2 - the second sorted column, Sort3 - the third sorted column, set to b tag if single and to span tag if both
+   Sep1 - separator " | ", Sep2 - separator " => ", Sep3 - separator ", ", None - no name "..."
+*/
+.COPagerSort1 { color: black; }
+.COPagerSort2 { color: #737373; }
+.COPagerSort3 { color: #9b9b9b; }
+.COPagerSep1,.COPagerSep2,.COPagerSep3 { color:black; }
+.COPagerNone { }
+/* Focus cursor - actully shown page(s)
+   ...PagerFocus - actually shown (scrolled) page(s) in pager Pages or actually zoomed chart in pager Gantt
+   ...PagerFocus2 - actual view (scrolled) in pager Gantt
+   ...PagerFocus3 - the whole pager is shown in actual view, in pager Gantt
+*/
+.COPagerFocus,.COPagerFocus2,.COPagerFocus3 {
+   position:relative; cursor:pointer; overflow:hidden; opacity:0.3; filter:alpha(opacity=30);
+   border:1px solid #666; background:#888;
+   }
+.COPagerFocus2 { background:#F0F; }
+.COPagerFocus3 { background:#AFA; }
+/* Hover cursor - highlighted page under mouse cursor.
+   @ Set background, border, padding
+   */
+.COPagerHover {
+   position:relative; cursor:pointer; overflow:hidden;
+   background:#888; opacity:0.1; filter:alpha(opacity=10);
+   }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                               State colors and classes                                                  */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* The ...Color... classes are never assigned, they are used only to read the color.
+   @ In ...Color... set only the background-color, it must be set by number, not by name.
+   All the colors except ...FocusedCell... and ...Default are relative colors, are added to the ...Default color; if the result color number exceeds 0x1000000, it is subtracted by the 0x1000000
+   The ...Class... is added to the cell if its condition is fulfilled. Only the listed ...Class... are used, the others can have only the ...Color... set.
+   @ In ...Class... set text attributes and color and optionally border and padding. If set here background-color with !important, it overrides the cell color and sets it as absolute
+*/
+.COColorDefault { background-color:#FFFFFF; }   /* Base color for all cells, can be changed by <I Color /> attribute */
+.COColorNoFocus { background-color:#F0F0F0; }   /* Cell with CanFocus='0' */
+.COClassNoFocus { }
+.COColorReadOnly { background-color:#F4F4F4;}   /* Cell with CanEdit='0' */
+.COClassReadOnly { }
+.COColorPreview { background-color:#FFFFFF; }   /* Cell with CanEdit='2' */
+.COClassPreview { }
+.COColorFormula { background-color:#FFCC99; }   /* Cell with editable formula */
+.COClassFormula { }
+.COColorEdit { background-color:#FFFFFF; }      /* Cell with CanFocus='1' CanEdit='1' */
+.COClassEdit { }
+.COColorAlternate { background-color:#EBFFFF; } /* Color for <Cfg Alternate/>, can be changed by <I AlternateColor /> */
+.COClassAlternate { }                           /* Can be changed by <I AlternateClass /> */
+.COColorSelected { background-color:#DEEFFF; }  /* Selected row or cell */
+.COClassSelected {  }                           /* It is used only if set <Cfg SelectClass='1'/> */
+.COColorSelectedCell { background-color:#C6C6C6; }  /* Selected cell for SelectingCells=3 */
+.COClassSelectedCell { }                        /* It is used only if set <Cfg SelectClass='1'/> */
+.COColorFill { background-color:#FF80FF; }      /* Used when selecting cells by dragging due auto fill */
+.COColorError { background-color:#FF6969; }     /* Cell with Error attribute set */
+.COClassError { }
+/* Row / Cell state colors, are ignored if row has set NoColorState='1' */
+.COColorDeleted { background-color:#FFCDCD; }   /* Deleted row */
+.COClassDeleted { }
+.COColorAdded { background-color:#FFFFFF; }     /* Newly added row */
+.COClassAdded { }
+.COColorMoved1 { background-color:#FFFFFF; }    /* Row moved to another parent */
+.COClassMoved1 { }
+.COColorMoved2 { background-color:#FFFFFF; }    /* Row moved inside its parent, only if sorting is not permitted */
+.COClassMoved2 { }
+.COColorChanged { background-color:#FAFAFA; }   /* Row with some cell value changed */
+.COClassChanged { }
+.COColorChangedCell { background-color:#E1E1E1; } /* The cell with value changed */
+.COClassChangedCell { }
+.COColorMaxChildren { background-color:#FFFFF0; } /* Row created if row's children exceed <I MaxChildren/> */
+.COClassMaxChildren { }
+.COColorDetail { background-color:#FFF0FF; }    /* Row is master row, has set <I Detail /> attribute */
+.COClassDetail { }
+.COColorDetailSelected { background-color:#FFF0E0; } /* Master row actually shown in detail grid */
+.COClassDetailSelected { }
+.COColorDragged { background-color:#E0E0C0; }   /* The source row actually being dragged by mouse */
+.COColorCellMenu { background-color:#FA0; }     /* The cell showing cell popup Menu */
+.COColorFound1 { background-color:#FF87FF; }    /* Found cell in SearchAction="Mark", first search */
+.COClassFound1 { }                              /* Used only if set <Cfg SearchClass='1'/> */
+.COColorFound2 { background-color:#FFC387; }    /* Found cell in SearchAction="Mark", second search */
+.COClassFound2 { }                              /* Used only if set <Cfg SearchClass='1'/> */
+.COColorFound3 { background-color:#87FF87; }    /* Found cell in SearchAction="Mark", third search */
+.COClassFound3 { }                              /* Used only if set <Cfg SearchClass='1'/> */
+.COColorHoveredAbsolute { }                     /* If set, resets the hovered cell and row color to this color directly as absolute color */
+.COColorHovered { background-color:#F4F4F4; }   /* Row under mouse cursor, used only if the hovered cell or row has HoverRow["Color"]*/
+/* Cell under mouse cursor, according to its look or permissions
+   ...Color... is used only if the cell has set HoverCell["Color"]
+   ...Class... is used only if the cell has set HoverCell["Class"]
+   Always only one Color and Class is used, if the cell fulfils more conditions the latter has precedence
+   If the resulted color is #FFFFFF, it is set as transparent, therefore in some cases is required to set #FFFFFE to get white color
+*/
+.COColorHoveredCell { background-color:#EBEBEB; }     /* Standard cell */
+.COClassHoveredCell { }
+.COColorHoveredCellReadOnly { background-color:#EBEBEB; } /* Cell with CanEdit='0' */
+.COClassHoveredCellReadOnly { }
+.COColorHoveredCellNoFocus { background-color:#EBEBEB; }  /* Cell with CanFocus='0' */
+.COClassHoveredCellNoFocus { }
+.COColorHoveredCellHeader { background-color:#FFFFFF; }   /* Cell in Header row */
+.COClassHoveredCellHeader { }
+.COColorHoveredCellPanel { background-color:#FFFFFF; }    /* Cell Type = "Panel" */
+.COClassHoveredCellPanel { }
+.COColorHoveredCellFastPanel { background-color:#FFFFFF; }/* Cell Type = "Panel" if FastPanel is shown */
+.COClassHoveredCellFastPanel { }
+.COColorHoveredCellSpace { background-color:#FFFFFF; }    /* Space row cell */
+.COClassHoveredCellSpace { }
+.COColorHoveredCellSpaceEdit { background-color:#FFFFFF; } /* Editable Space row cell */
+.COClassHoveredCellSpaceEdit > div { background-color:#F6F6F6; }
+.COColorHoveredCellSpaceDefaults { background-color:#FFFFFF; } /* Space row cell with Button="Defaults" */
+.COClassHoveredCellSpaceDefaults > div { background-color:#F6F6F6; }
+.COColorHoveredCellSpaceBool0 { background-color:#FFFFFE; } /* Space row cell of Type="Bool" and value 0 */
+.COClassHoveredCellSpaceBool0,.COClassHoveredCellSpaceBool0 > u { background-position:center -749px; }
+.COColorHoveredCellSpaceBool1 { background-color:#FFFFFE; } /* Space row cell of Type="Bool" and value 1 */
+.COClassHoveredCellSpaceBool1,.COClassHoveredCellSpaceBool1 > u { background-position:center -999px; }
+.COColorHoveredCellSpaceBoolX { background-color:#FFFFFE; } /* Space row cell of Type="Bool" and value "" */
+.COClassHoveredCellSpaceBoolX,.COClassHoveredCellSpaceBoolX > u { background-position:center -1249px; }
+.COColorHoveredCellSpaceBoolIcon { background-color:#FFFFFE; } /* Space row cell of Type="Bool" and BoolIcon other than 0 and 2 */
+.COClassHoveredCellSpaceBoolIcon { }
+.COColorHoveredCellButton { background-color:#F0F0F0; }     /* Space row cell of Type="Button" and Button="Html" */
+.COClassHoveredCellButton { color:green; background-color:#F0F0F0!important; }
+.COColorHoveredCellButton1 { background-color:#F0F0F0; }    /* Space row cell of Type="Button" and Button="Html" and value 1 */
+.COClassHoveredCellButton1 { color:red; background-color:#F0F0F0!important; }
+.COColorHoveredCellButtonButton { background-color:#FFFFFE; }  /* Space row cell of Type="Button" and Button="Button" */
+.COClassHoveredCellButtonButton u { color:green; background-color:#F0F0F0!important; }
+.COColorHoveredCellButtonButton1 { background-color:#FFFFFE; } /* Space row cell of Type="Button" and Button="Button" and value 1 */
+.COClassHoveredCellButtonButton1 u { color:red; background-color:#F0F0F0!important; }
+.COColorHoveredCellTab { background-color:#F8F8F8; }        /* Space row cell of Type="Button" and Button="Tab" */
+.COClassHoveredCellTab { background-image:none; }
+.COColorHoveredCellTab1 { background-color:#CCCCCC; }       /* Space row cell of Type="Button" and Button="Tab" and value 1*/
+.COClassHoveredCellTab1 { background-image:none; }
+.COColorHoveredCellIndex { background-color:#FFFFFF; }      /* Cell in column RowIndex */
+.COClassHoveredCellIndex { }
+.COColorFocused { background-color:#E6E6E6; }               /* Focused row, used only if the focused cell or row has FocusRow["Color"] */
+.COClassFocused { }                                         /* Used only if  the focused cell or row has FocusRow["Class"] */
+/* Focused cell, the color is absolute color
+   ...Color... is used only if the cell or row has set FocusCell["Color"]
+   ...Class... is used only if the cell or row has set FocusCell["Class"]
+*/
+.COColorFocusedCell,.COColorFocusedCellRelative { background-color:#FFFF80; }           /* Standard cell */
+.COClassFocusedCell,.COClassFocusedCell * { color:black!important; }
+.COColorFocusedCellRect { background-color:#AFA; }          /* Standard cell if more cells are focused */
+.COClassFocusedCellRect { }
+.COColorEditedCell { background-color:#FFE0A0; }            /* Cell being edited */
+.COColorViewedCell { background-color:#FFF0C0; }            /* Cell being viewed - edited cell with CanEdit='2' */
+.COColorFocusedCellSafari { background-color:#A0A0FF; }     /* If the cell border is hidden due <Cfg BorderCursors='0' or '2'/> */
+.COColorFocusedCellHeader { background-color:#FFFFFE; }     /* Header row cell */
+.COClassFocusedCellHeader { }
+.COColorFocusedCellSpace { background-color:#E0E0E0; }         /* Space row cell */
+.COClassFocusedCellSpace { }
+.COColorFocusedCellSpaceEdit { background-color:#FFFFFF; }  /* Editable Space row cell */
+.COClassFocusedCellSpaceEdit > div { background-color:#E0E0E0; }
+.COColorFocusedCellSpaceDefaults { background-color:#FFFFFF; }  /* Space row cell with Button="Defaults" */
+.COClassFocusedCellSpaceDefaults > div { background-color:#E0E0E0; }
+.COColorFocusedCellSpaceBool { background-color:#E0E0E0; }     /* Space row cell of Type="Bool" */
+.COClassFocusedCellSpaceBool { }
+.COColorFocusedCellButton { background-color:#E0E0E0; }        /* Space row cell of Type="Button" */
+.COClassFocusedCellButton { }
+/* Side colors set by ColorCursor attribute
+   ...Col is top / bottom side, ...Row is left / right side
+   ...Class... is used only if set <Cfg> ColorCursor bit 5, &16
+*/
+.COColorSelectedCol { background-color:#E5F5F5; }          /* Side for selected cells */
+.COClassSelectedCol { }
+.COColorSelectedRow { background-color:#E5F5F5; }
+.COClassSelectedRow { }
+.COColorFocusedCol { background-color:#DDD; }              /* Side for cells focused by range (FRect) */
+.COClassFocusedCol { }
+.COColorFocusedRow { background-color:#DDD; }
+.COClassFocusedRow { }
+.COColorEditedCol { background-color:#EEEE80; }               /* Side for focused cell (FRow/FCol) */
+.COClassEditedCol { }
+.COColorEditedRow { background-color:#EEEE80; }
+.COClassEditedRow { }
+.COColorHoveredCol { background-color:#F3F3F3; }           /* Side for cell under mouse cursor (ARow/ACol) */
+.COClassHoveredCol { }
+.COColorHoveredRow { background-color:#F3F3F3; }
+.COClassHoveredRow { }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                               Hover, focus, edit cursors                                                */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------- Cell and row highlighted under mouse cursor ------------- */
+/* ...HoverPanelBackground - Background shown above left side Panel cell when hovering the row; shown only if the hovered cell or row has HoverRow["Background"]; @ set background and opacity
+   ...HoverRowBackground   - Background shown above the whole hovered row, except hovered cell and Panel; shown only if the hovered cell or row has HoverRow["Background"]; @ set background and opacity
+   ...HoverRowBorder       - Border around the whole hovered row; shown only if the hovered cell or row has HoverRow["Border"]; @ set border
+   ...HoverCellBorder      - Border around the hovered cell; shown only if the hovered cell or row has HoverCell["Border"]; @ set border
+   ...Dynamic              - Added to the base class if set Cfg DynamicBorder
+*/
+.COHoverPanelBackground { }
+.COHoverRowBackground { opacity:0.1; filter:alpha(opacity=10); background:#888; }
+.COHoverRowBorder { z-index:1; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; cursor:default; background:white; padding:1px; padding-left:0px; }
+.COHoverRowBorderDynamic { }
+.COHoverCellBorder { z-index:3; padding:1px; padding-right:0px; border:1px solid #A0A0A0; background:white; }
+.COHoverCellBorderDynamic { padding-left:0px; }
+/* ---------------- Highlighted focused cell(s) and row(s) ------------- */
+/* ...FocusPanelBackground - Background shown above left side Panel cell when the row is focused; shown only if the focused cell or row has FocusRow["Background"]; @ set background and opacity
+   ...FocusRowBackground   - Background shown above the whole focused row, except focused cell and Panel; shown only if the focused cell or row has FocusRow["Background"]; @ set background and opacity
+   ...FocusRowBorder       - Border around the whole hovered row; shown only if the hovered cell or row has FocusRow["Border"]; @ set border
+   ...FocusCellBorder      - Border around the focused cell in table row; shown only if the focused cell or row has FocusCell["Border"]; @ set border and cursor
+   ...FocusCellSpaceBorder - Border around the focused cell in Space row; shown only if the focused cell or row has FocusCell["Border"]; @ set border and cursor
+   ...FocusCellCorner      - Bottom right corner for autofill; shown only if the focused cell or row has FocusCell["Corner"]; @ set border, margin, padding, background, width, height and cursor
+   ...Touch                - Added to the base class on tablet
+   ...Dynamic              - Added to the base class if set Cfg DynamicBorder
+*/
+.COFocusPanelBackground { }
+.COFocusRowBackground { opacity:0.1; filter:alpha(opacity=10); background:black; }
+.COFocusRowBorder { z-index:2; border:1px solid #AAAAAA; background:white; padding:1px; padding-left:0px; }
+.COFocusRowBorderDynamic { }
+.COFocusCellBorder { z-index:4; padding:1px; padding-right:0px; border:1px solid black; }
+.COFocusCellBorderTouch { }
+.COFocusCellBorderDynamic { }
+.COFocusCellSpaceBorder { z-index:4; border:1px solid black; }
+.COFocusCellCorner { position:relative; padding:0px; border:1px solid white; background:black; margin-left:-4px; margin-top:-5px; width:5px; height:5px; z-index:4; cursor:crosshair; }
+.COFocusCellCornerTouch { width:10px; height:10px; margin-left:0px; }
+/* ------------- Highlighted focused cell in edit mode ------------- */
+/* ...EditCellBorder      - Border around the focused cell in table row in edit mode; shown only if the focused cell or row has FocusCell["Border"]; @ set border
+   ...EditCellSpaceBorder - Border around the focused cell in Space row in edit mode; shown only if the focused cell or row has FocusCell["Border"]; @ set border
+   ...EditCellCorner      - Bottom right corner for autofill; shown only if the focused cell or row has FocusCell["Corner"] and is set <Cfg DragEdit='1'/>; @ set border, margin, padding, background, width, height and cursor
+   ...EditCellInput       - Parent div tag where the <input> or <textarea> is placed to; @ set border, padding and background
+   ...Touch               - Added to the base class on tablet
+ */
+.COEditCellBorder { z-index:4; border:1px solid red; }
+.COEditCellBorderTouch { }
+.COEditCellSpaceBorder { z-index:4; border:1px solid red; }
+.COEditCellCorner { position:relative; padding:0px; border:1px solid white; background:red; margin-left:-4px; margin-top:-5px; width:5px; height:5px; z-index:4; cursor:crosshair; }
+.COEditCellCornerTouch { width:10px; height:10px; margin-left:0px; }
+.COEditCellInput { position:relative; overflow:hidden; z-index:2; background-color:#FFE0A0; line-height:0px; font-size:0px; }
+/* ------------- Support classes removing border -------------
+/* added to ...Background or ...Border classes; @ Do not change */
+.COCursorBackground { position:relative; border:none; padding:0px; overflow:hidden; }
+.COCursorBorderLeft,.COCursorBorderRight,.COCursorBorderTop,.COCursorBorderBottom { position:relative; overflow:hidden; width:0px; height:0px; }
+.COCursorBorderLeft { border-right:none!important; border-top:none!important; border-bottom:none!important; padding-right:0px!important; padding-top:0px!important; padding-bottom:0px!important; }
+.COCursorBorderRight { border-left:none!important; border-top:none!important; border-bottom:none!important; padding-left:0px!important; padding-top:0px!important; padding-bottom:0px!important; }
+.COCursorBorderTop { border-bottom:none!important; border-left:none!important; border-right:none!important; padding-bottom:0px!important; padding-left:0px!important; padding-right:0px!important; }
+.COCursorBorderBottom { border-top:none!important; border-left:none!important; border-right:none!important; padding-top:0px!important; padding-left:0px!important; padding-right:0px!important; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                        Edit control                                                    */
+/*                                                            TGLib                                                        */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* --- Edit text in <input> / <textarea> --- */
+/* @ Set background and text attributes
+   ...EditInput - set to <input> tag placed into inline edit cursor tag (...EditCellInput)
+   ...EditTextarea - set to <textarea> tag placed into inline edit cursor tag (...EditCellInput) for Lines type
+   ...Normal... is added to <input> / <textarea> for cell in table row, ...Header... is added for cell in Header row, ...Space is added for cell in Space row
+   ...Int..., ...Float..., ...Date..., ...Pass... is added for this cell type
+   ...Text... is added for cell type Text, Lines, Link, Img
+   ...ReadOnly is added for preview cell with CanEdit='2'
+*/
+.COEditInput,.COEditTextarea { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; border:0px none; margin:0px; padding:0px 3px 0px 0px; outline:none; box-sizing:content-box; resize:none; }
+.COEditInput::-ms-clear { height:13px; }
+.COEditNormalInput,.COEditNormalTextarea { background-color:#FFE0A0; }
+.COEditHeaderInput,.COEditHeaderTextarea { background-color:#FFE0A0; }
+.COEditSpaceInput,.COEditSpaceTextarea { background-color:#FFE0A0; }
+.COEditInt,.COEditFloat,.COEditDate { text-align:right; }
+.COEditText,.COEditPass { }
+.COEditReadOnly { background-color:#FFEEFF; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                   Dragging objects                                                      */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* Set to ghost tag under mouse cursor when dragging something in grid or Gantt;
+   Used when <Cfg ShowDrag='1'/>. For dragged rows is used only if set <Cfg DragObject='1'/>
+   The tag is <div> with absolute position and contains the dragged row(s), column header(s) or GanttRun box(es)
+   @ Set border, margin, padding, opacity and optionally background
+*/
+.COMouseObject { opacity:0.5; filter:alpha(opacity=50); z-index:300; overflow:hidden; }
+/* Set to ghost tag under mouse cursor as vertical and horizontal line */
+.COVLine { width:1px; border-left:1px solid black; overflow:hidden; cursor:e-resize; }
+.COHLine { height:1px; border-top:1px solid black; overflow:hidden; cursor:e-resize; }
+/* Set to ghost tag under mouse cursor when dragging rows in grid, if set <Cfg DragObject='2'/> and <Cfg ShowDrag='1'/>
+   The tag is <div> with absolute position and contains information about the count of dragged rows
+   @ Set border, margin, padding, background, opacity, text attributes and optionally height and width
+*/
+.CODragObject {
+   z-index:300; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; margin-left:10px; margin-top:10px;
+   background:#f4f4f4; border:1px solid #d0d0d0; padding:3px;
+   }
+/* The arrows showing actual drop position when dragging column header or GanttRun box
+   @ Set background, width and height
+*/
+.CODragColInsideTop,.CODragColInsideBottom,.CODragColOutsideTop,.CODragColOutsideBottom,.CODragGanttRunTop,.CODragGanttRunBottom,.CODragGanttRunTopJoin,.CODragGanttRunBottomJoin,.CODragRowLeft,.CODragRowRight {
+   position:absolute; background-image:url(Sort.gif?v120); width:11px; height:14px; overflow:hidden; z-index:301;
+   }
+.CODragColInsideTop  { background-position:-3px -1748px; }
+.CODragColInsideBottom  { background-position:-3px -1768px; }
+.CODragColOutsideTop  { background-position:-3px -1788px; }
+.CODragColOutsideBottom  { background-position:-3px -1808px; }
+.CODragGanttRunTop  { background-position:-1px -1748px; }
+.CODragGanttRunBottom  { background-position:-1px -1767px; }
+.CODragGanttRunTopJoin  { background-position:-1px -1788px; }
+.CODragGanttRunBottomJoin  { background-position:-1px -1807px; }
+.CODragRowLeft { background-position:-1px -1831px; }
+.CODragRowRight { background-position:-1px -1851px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                    Message dialogs                                                      */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* Disabled grid, absolute <div> tag shown above grid main tag. The grid is disabled when it shows some message (e.g. "Rendering").
+   ...Hard is used when showing modal message that requires user input
+   Note, for disabled page is used GridDisabled class instead. The whole page is disabled when the grid shows modal dialog (e.g. grid configuration menu).
+   @ Set background and opacity, optionally margin and padding
+*/
+.CODisabled,.CODisabledHard { position:absolute; z-index:264; background:white; opacity:0; filter:alpha(opacity=0); }
+.CODisabledHard { opacity:0.5; filter:alpha(opacity=50); }
+/* Grid informational or progress message, absolute <div> tag
+   @ Set border, padding, background and text attributes
+*/
+.COMessage {
+   font:13px Verdana,Tahoma,"Trebuchet MS",sans-serif; white-space:nowrap; text-align:center; visibility:hidden; z-index:266;
+   position:absolute; left:0px; top:0px; background:#F4F4F4; border:1px solid #CBCBCB; padding:10px;
+   }
+/* Shadow <div> tag displayed under grid message tag, on the same position and size
+   @ Set margin for the shadow shift, background, opacity and border
+*/
+.COMessageShadow {
+   position:absolute; left:0px; top:0px; margin-left:3px; margin-top:3px; z-index:265; visibility:hidden;
+   background:#888; opacity:0.5; filter:alpha(opacity=50);
+   }
+/* Page informational message, <div> tag shown inside page being loaded or rendered, instead of the page content
+   @ Set border, padding, background and text attributes
+*/
+.COPageMessage { background:#FAFAFA; border:1px solid #CBCBCB; padding:10px; font:13px Verdana,Tahoma,"Trebuchet MS",sans-serif; }
+/* Progress message
+   ...Main is set to inner <div> of the progress message. @ Set text attributes and optionally border, margin, padding and background
+   ...Caption is set to <div> tag showing the progress message caption. @ Set border, margin, padding, background and text attributes
+   ...Text is set to <div> tag showing the progress message text. @ Set border, margin, padding, background and text attributes
+   ...Outer is set to <div> tag showing the gauge container. @ Set border, margin, padding, background and width
+   ...Inner is set to <div> tag showing the gauge indicator. @ Set border, margin, padding, background and height
+*/
+.COProgressMain { font:13px Verdana,Tahoma,"Trebuchet MS",sans-serif; }
+.COProgressCaption { font-weight:bold; margin-bottom:15px; }
+.COProgressText { margin-bottom:15px; }
+.COProgressOuter { text-align:left; width:200px; border:1px solid #CBCBCB; padding:2px; margin-bottom:15px; }
+.COProgressInner { height:10px; background:gray; }
+/* Button in informational or progress message, <button> tag below the message inside the ...Message
+   ...Hover is added when the <button> tag is under mouse cursor
+   @ Set border, padding, margin, background and text attributes
+*/
+.COProgressButton,.COMessageButton {
+   font:11.9px Arial,Helvetica,sans-serif; white-space:nowrap;
+   }
+.COProgressButton { margin:5px 2px 0px 2px; padding-left:10px; padding-right:10px; }
+.COMessageButton { margin:10px 3px 0px 3px; width:50px; }
+.COMessageButtonHover,.COProgressButtonHover { }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                   Popup menus and dialogs                                               */
+/*                                                            TGLib                                                        */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* Default settings for all TreeGrid popup menus and dialogs like Enum, Defaults, Filter, cfg menu, columns menu, popup Menu, Gantt menu and custom menu shown by ShowMenu and ShowPopup
+   The styles of individual menu types can be overridden by their individual classes added to all default classes (e.g. "GMMenuMain GMEnumMenuMain")
+      Individual classes: ...EnumMenu..., ...DefaultsMenu..., ...FilterMenu..., ...CfgMenu..., ...ColumnsMenu..., ...PopupMenu, ...GanttMenu...
+      For custom JSON menu can be the individual class prefix set to Class attribute, like {..., Class:"Custom", ... } and the added classes will be ...Custom..., e.g. GxCustomMain
+   Some of the classes are used also for custom JSON dialogs shown by ShowDialog API function.
+*/
+/* --- Menu and dialog sections --- */
+/* Main menu and dialog classes
+   ...Main - Main absolute <div> tag; @ Do not change
+   ...Static - Used instead of ...Main when dialog is written directly to page HTML by WriteDialog. Used only in TGLib, not in TreeGrid. @ Do not change
+   ...Shadow - Shadow <div> tag displayed under ...Main tag, on the same position and size. @ Set margin for the shadow shift, background, opacity and border
+   ...Outer - <div> tag inside the main tag, contains the whole menu. @ Set background, border and padding
+   ...Top is added to ...Outer when the menu is shown above the header, ...Bottom is added to ...Outer when the menu is shown below the header
+*/
+.COMenuMain { position:absolute; left:0px; top:0px; z-index:258; }
+.COMenuStatic { }
+.COMenuShadow { position:absolute; margin-left:3px; margin-top:3px; z-index:257; background:#888; opacity:0.5; filter:alpha(opacity=50); }
+.COMenuOuter { overflow:hidden; background:white; }
+.COMenuOuterTop { }
+.COMenuOuterBottom { }
+/* Shown outside menu or dialog in place of the source tag, simulating the menu is popped up. For custom JSON menus and dialogs is used when set Header attribute.
+   ...Top is added to ...Header when the menu is shown above the header, ...Bottom is added to ...Header when the menu is shown below the header
+   @ Set margin to shift the header, border, padding and background
+*/
+.COMenuHeader {
+   overflow:hidden; position:absolute; z-index:258; border:1px solid #aaaaaa; background:white; cursor:pointer;
+   user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none;
+   }
+.COMenuHeaderTop { }
+.COMenuHeaderBottom { }
+/* Set to menu and dialog top, not scrollable, section. Used only for TreeGrid cfg / column menus. For custom JSON menus and dialogs is used when set Head attribute.
+   @ Set border, margin, padding, background and text attributes
+*/
+.COMenuHead {
+   border:1px solid #aaaaaa; border-bottom:none; background:#E9E9E9; padding:3px 0px 4px 0px;
+   font:bold 11.5px Verdana,Tahoma,"Trebuchet MS",sans-serif; text-align:center; cursor:default;
+   }
+/* Close icon set <div> tag inside the ...MenuHead. Used only for TreeGrid cfg / column menus. For custom JSON menus and dialogs is used when set Head attribute and can be hidden by setting HeadClose:0
+   @ Set background, width and height
+*/
+.COMenuClose { float:right; width:14px; cursor:pointer; display:none; background:url(Menu.gif?v120) no-repeat right -354px; }
+/* Set to menu and dialog middle, scrollable, section. For custom JSON dialogs the tag is filled by Body attribute value.
+   @ Set border, margin, padding, background and optionally (for the custom dialogs) text attributes
+*/
+.COMenuBody { border:1px solid #aaaaaa; cursor:default; padding: 1px 2px 1px 2px; }
+/* Set to menu and dialog bottom, not scrollable, section, contains usually control buttons.
+   Used only for TreeGrid cfg / column menus and Range dialogs to display the buttons. For custom JSON menus and dialogs is used when set Foot or Buttons (JSON menu only) attribute.
+   @ Set border, margin, padding, background and text attributes
+*/
+.COMenuFoot {
+   border:1px solid #aaaaaa; border-top:none; background:#E9E9E9; padding:3px 0px 3px 0px;
+   font:bold 11.5px Verdana,Tahoma,"Trebuchet MS",sans-serif; text-align:center; white-space:nowrap;
+   }
+/* Control button inside the Foot section (e.g. OK, Cancel). <button> tag.
+   ...Hover is added when the <button> tag is under mouse cursor
+   @ Set border, margin, padding, background, width, height and text attributes
+*/
+.COMenuButton {
+   width:48px; margin:2px; padding-left:0px; padding-right:0px;
+   font:11.9px Arial,Helvetica,sans-serif; text-align:center; white-space:nowrap; overflow:hidden;
+   }
+.COMenuButtonHover { }
+/* --- Menu item --- */
+/* <div> tags for individual menu items
+   ...Item is set to all menu items except focused and hovered
+   ...Focus is added to menu item with key cursor
+   ...Hover is added to menu item under mouse cursor
+   ...Touch... is added to menu item on tablet
+   @ Set border, margin padding and background; all the eight classes should have the same edge width and height (margin+border+padding)
+*/
+.COMenuItem { padding:2px 3px 2px 3px; }
+.COMenuItemTouch { padding-top:5px; padding-bottom:5px; }
+.COMenuHover { margin-left:1px; margin-right:1px; padding:2px; background:#F0F0F0; }
+.COMenuHoverTouch { padding-top:4px; padding-bottom:4px; }
+.COMenuFocus { margin-left:1px; margin-right:1px; padding:2px; background:#E0E0E0; }
+.COMenuFocusTouch { padding-top:4px; padding-bottom:4px; }
+.COMenuFocus.COMenuHover { background:#D0D0D0; }
+/* --- Icons inside menu items --- */
+/* The classes are set in <div> tag inside the menu item tag
+   ...CheckedIcon...  - Bool item, checkbox, checked state,                  ...UncheckedIcon... - Bool item, checkbox, unchecked state
+   ...CheckedRadio... - Bool item with Group, radio button, checked state,   ...UncheckedRadio... - Bool item with Group, radio button, unchecked state
+   ...CheckedColor... - Bool item with ShowIcon=0 or 2, checked state,       ...UncheckedColor... - Bool item with ShowIcon=0 or 2, checked state
+   ...Left            - the bool icon is shown on the item text left side,   ...Right - the bool icon is shown on the item text right side
+   ...CursorIcon      - Cursor icon shown on left side, when menu have set ShowCursor:1; the width of the cursor icon is set by menu Indent attribute, by default 12px
+   ...HoverIcon       - The cursor icon in menu item under mouse cursor
+   ...ExpandedIcon    - Icon in expanded section (Expanded:1),  the menu item with Level and Items set; the width of the expanded  icon is set by menu Indent attribute, by default 12px
+   ...CollapsedIcon   - Icon in collapsed section (Expanded:0), the menu item with Level and Items set; the width of the collapsed icon is set by menu Indent attribute, by default 12px
+   ...NextIcon        - Icon on right side of item with submenu, the menu item with Menu:1 and Items set
+   ...Rtl             - used instead in RTL text mode, shows the icon on the other side
+   @ Set background and for some icons padding-left or padding-right
+*/
+.COMenuCheckedIconLeft { background:url(Menu.gif?v120) no-repeat -2px -51px; padding-left:14px; }
+.COMenuCheckedIconRight { background:url(Menu.gif?v120) no-repeat right -51px; padding-right:16px; }
+.COMenuUncheckedIconLeft { background:url(Menu.gif?v120) no-repeat -2px -1px; padding-left:14px; }
+.COMenuUncheckedIconRight { background:url(Menu.gif?v120) no-repeat right -1px; padding-right:16px; }
+.COMenuCheckedRadioLeft { background:url(Menu.gif?v120) no-repeat -2px -750px; padding-left:14px; }
+.COMenuCheckedRadioRight { background:url(Menu.gif?v120) no-repeat right -750px; padding-right:16px; }
+.COMenuUncheckedRadioLeft { background:url(Menu.gif?v120) no-repeat -2px -700px; padding-left:14px; }
+.COMenuUncheckedRadioRight { background:url(Menu.gif?v120) no-repeat right -700px; padding-right:16px; }
+.COMenuCheckedColor { background:#CAE1F3 url(Backgrounds.gif?v120) repeat-x 0px -1500px; }
+.COMenuUncheckedColor { }
+.COMenuCursorIcon { background:url(Menu.gif?v120) no-repeat -6px -150px; }
+.COMenuHoverIcon { background:url(Menu.gif?v120) no-repeat -6px -100px; }
+.COMenuCursorIconRtl { background:url(Menu.gif?v120) no-repeat right -1000px; }
+.COMenuHoverIconRtl { background:url(Menu.gif?v120) no-repeat right -950px; }
+.COMenuExpandedIcon { background:url(Menu.gif?v120) no-repeat -6px -200px; }
+.COMenuCollapsedIcon { background:url(Menu.gif?v120) no-repeat -6px -250px; }
+.COMenuNextIcon { background:url(Menu.gif?v120) no-repeat right -300px; padding-right:10px; }
+.COMenuNextIconRtl { background:url(Menu.gif?v120) no-repeat left -900px; padding-left:10px; }
+/* --- Menu item content --- */
+/* The classes are set to <td> tag of inner table that is used to display the item, if it has set Edit, Enum, Icon, LeftHtml or RightHtml attribute.
+   @ Set text attributes and optionally background, border, padding and margin
+   ...ItemText - every menu item text or caption, it set to <div> tag inside the menu item and inside the menu icon or to <td> tag with item text in inner table
+   ...ItemLeftHtml - <td> tag in inner table displaying the LeftHtml content on the left side
+   ...ItemRightHtml - <td> tag in inner table displaying the RightHtml content on the right side
+   ...ItemIcon - <td> tag in inner table displaying the Icon as background image on the left side, also left to LeftHtml; @ Do not change
+   ...Level - added to the tags with ...ItemText, ...ItemIcon, ...ItemLeft/RightHtml for item with Level set
+   ...ItemDisabled - added to all the menu item parts for item with Disabled:1; @ Set opacity and background
+*/
+.COMenuItemText,.COMenuItemLeftHtml,.COMenuItemRightHtml { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:1px 0px 1px 0px; white-space:nowrap; overflow:hidden; }
+.COMenuItemIcon { background-repeat:no-repeat; }
+.COMenuItemDisabled { opacity:0.70; filter:alpha(opacity=70); }
+.COMenuLevel { color:blue; text-align:center; }
+/* The Enum combo in item with Enum:1
+   ...EnumParent - <td> tag in inner table displaying the Enum combo for the Enum:1 item, on left or right side according to Left value
+   ...Enum - <div> tag inside the <td> tag ...EnumParent displaying the Enum combo
+   ...EnumHeader - is set to the <div> tag in Header of the popped up Enum menu
+*/
+.COMenuEnumParent { padding-left:5px; padding-right:2px;}
+.COMenuEnum,.COMenuEnumHeaderLeft { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:1px 0px 1px 0px; white-space:nowrap; overflow:hidden; }
+.COMenuEnum { border:1px solid #DDD; border-top:1px solid #666; border-left:1px solid #666; background:white url(Menu.gif?v120) no-repeat left -800px; padding-left:15px; }
+.COMenuEnumHeaderLeft { background:url(Menu.gif?v120) no-repeat left -799px; padding:2px 0px 2px 15px; cursor:default; }
+.COMenuEnumParent,.COMenuEnum,.COMenuEnumHeaderLeft { width:90px; }
+/* The edit text in item with Edit:1
+   ...EditParent - <td> tag in inner table displaying the editable text for the Edit:1 item, on left or right side according to Left value; @ Set border, padding and background
+   ...Edit - <div> tag inside the <td> tag ...EditParent displaying the editable text; @ Set border, padding, background and text attributes
+   ...EditIE is used instead of ...Edit in IE, in IE5 quirks mode
+   ...EditMulti - added to the ...Edit tag for item with set Multi:1, multi line edit, to be edited in <textarea>; @ Set border, background and text attributes
+   ...EditEdit - added to the ...Edit when editing the item text
+   ...EditText, ...EditInt, ...EditFloat, ...EditDate - added to the ...Edit tag and also to the <input> or <textarea> tag according to the Type attribute; @ Set text attributes
+   ...EditInput - set to <input> tag placed into ...Edit tag when editing the value; @ Set text attributes
+   ...EditTextarea - set to <textarea> tag placed into ...Edit tag when editing the value in item with Multi:1 set; @ Set text attributes
+*/
+.COMenuEditParent { padding-left:5px; padding-right:2px; }
+.COMenuEdit,.COMenuEditIE {
+   font:11.9px/15px Verdana,Tahoma,"Trebuchet MS",sans-serif; background:white; overflow:hidden; white-space:nowrap;
+   border:1px solid #DDD; padding-left:3px; padding-right:3px; height:15px;
+   }
+.COMenuEditIE { height:17px; }
+.COMenuEditParent,.COMenuEdit,.COMenuEditIE { width:30px; }
+.COMenuEditParentPDFName,.COMenuEditParentPDFName .COMenuEdit,.COMenuEditParentPDFName .COMenuEditIE,.COMenuEditParentExportName,.COMenuEditParentExportName .COMenuEdit,.COMenuEditParentExportName .COMenuEditIE { width:104px; }
+.COMenuEditMulti { white-space:normal; }
+.COMenuEditEdit { background:#FFE0A0; }
+.COMenuEditInput,.COMenuEditTextarea {
+   font:11.9px/15px Verdana,Tahoma,"Trebuchet MS",sans-serif; border:0px none; margin:0px; padding:0px; outline:none; background:#FFE0A0; box-sizing:content-box; resize:none;
+   }
+.COMenuEditInput::-ms-clear { height:13px; }
+.COMenuEditInt,.COMenuEditFloat,.COMenuEditDate { text-align:right; }
+.COMenuEditText { }
+/* --- Special menu items --- */
+/* ...Caption - Inactive item, used instead of ...Item..., along width ...ItemText, shown for menu item with Caption:1; @ Set border, margin padding, background and text attributes
+   ...Separator - Separator between items, shown for menu item with Name:"-", used instead of ...Item...; @ Set border, margin, padding, background and height
+   ...VSeparator - <td> tag shown between columns of menu items; in children of menu item width Columns attribute set; @ Set border, padding, background and width
+   ...Section - Tag around children of item width Level attribute set; @ Set border, margin, padding and background
+*/
+.COMenuCaption { padding:5px; background:#ddd; color:blue; text-align:center; }
+.COMenuSeparator { margin:3px 3px 2px 3px; height:1px; border-top:1px solid #aaaaaa; overflow:hidden; }
+.COMenuVSeparator { border-right:1px solid #DDD; width:1px; }
+.COMenuSection  { }
+/* -----------------------------------------------  Filter operator menu ---------------------------------------------------- */
+/* Redefines standard popup ...Menu... attributes as ...FilterMenu...
+*/
+.COFilterMenuMain { margin-left:-2px; margin-top:-2px; }
+.COFilterMenuOuterTop { }
+.COFilterMenuOuterBottom { }
+.COFilterMenuHeaderBottom { margin-left:-2px; margin-top:-1px; padding:2px 1px 0px 3px; border-bottom:0px none; }
+.COFilterMenuHeaderTop { margin-left:-2px; margin-top:-2px; padding:2px 1px 1px 3px; border-top:0px none; }
+.COFilterMenuShadow { margin-left:2px; }
+.COFilterMenuItem { }
+/* ----------------------------------------------------  Enum menu ---------------------------------------------------------- */
+/* ...EnumMenu... redefine particular popup menu ...Menu... classes for Enum type popup menu
+   ...EnumHeader... is used inside popup menu header ...EnumMenuHeader tag and shows the Enum icon on left or right side or nowhere; @ Set background, padding and text attributes and optionally border and margin
+*/
+.COEnumMenuHeader { background:white; }
+.COEnumMenuHeaderBottom { padding-top:1px; }
+.COEnumMenuHeaderTop { padding-bottom:1px; }
+.COEnumHeaderLeft,.COEnumHeaderRight,.COEnumHeaderNone {
+   background:white; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; padding:2px 4px 2px 2px; white-space:nowrap; cursor:pointer;
+   }
+.COEnumHeaderLeft { background:white url(Menu.gif?v120) no-repeat 1px -799px; padding-left:17px; }
+.COEnumHeaderRight { background:white url(Menu.gif?v120) no-repeat right -799px; padding-right:17px;}
+/* --------------------------------------------------  Button List menu ------------------------------------------------------ */
+/* ...ToolMenu... redefine particular popup menu ...Menu... classes for Button type with List attribute popup menu
+   ...ToolHeader... is used inside popup menu header ...ToolMenuHeader tag for row Space='-1' (Above), Space='5' (Below) and others; @ Set background, padding and text attributes and optionally border and margin
+*/
+.COToolMenuMain { margin-left:-1px; }
+.COToolMenuHeader { margin-left:-1px; }
+.COToolMenuItem { }
+.COToolMenuOuter { background:#E9E9E9; }
+.COToolMenuBody { border:1px solid #D4D4D4; }
+.COToolHeader,.COToolHeaderAbove,.COToolHeaderBelow { border:none; padding:1px 5px 100px 4px; }
+.COToolHeaderAbove { padding-top:2px; padding-left:5px; }
+.COToolHeaderBelow { padding-top:1px; padding-left:5px; }
+/* -------------------------------------------  Grid configuration menus --------------------------------------------------- */
+/* Special settings for Cfg and Columns TreeGrid menus; override the standard menu settings defined above */
+.COCfgMenuOuter,.COColumnsMenuOuter { border:1px solid #CBCBCB; padding:6px; }
+.COCfgMenuHead,.COColumnsMenuHead { border-color:#CBCBCB; }
+.COCfgMenuBody,.COColumnsMenuBody { border-color:#CBCBCB; }
+.COCfgMenuFoot,.COColumnsMenuFoot { border-color:#CBCBCB; }
+.COCfgMenuButton { width:74px; }
+.COColumnsMenuButton { width:58px; }
+.COCfgMenuItemText { padding-left:3px; }
+.COColumnsMenuItemText { padding-left:3px; white-space:nowrap; }
+.COCfgMenuItem,.COColumnsMenuItem { }
+.COCfgMenuHover,.COColumnsHover { }
+.COCfgMenuFocus,.COColumnsMenuFocus { }
+.COCfgMenuItemTouch,.COColumnsMenuItemTouch { }
+.COCfgMenuHoverTouch,.COColumnsMenuHoverTouch { }
+.COCfgMenuFocusTouch,.COColumnsMenuFocusTouch { }
+/* ----------------------------------------------  Popup grid dialog ------------------------------------------------------- */
+/* Special settings for Popup grid shown by Dates button or ShowPopupGrid API method; overrides the standard dialog settings defined above */
+.COPopupGridOuter { overflow:visible; }
+.COPopupGridHead { padding:0px; }
+.COPopupGridBody { padding:0px; border:0px none; }
+.COPopupGridFoot { padding:0px; }
+.COPopupGridButton { width:50px; margin-top:-2px; margin-bottom:3px; }
+/* ----------------------------------------------  Choose cell border menu --------------------------------------------------- */
+/* Border style menu, ...Style is added to all menu items, ...Empty is added for empty style, ...X is added for given border style
+   @ Change height, width, margin and background
+*/
+.COMenuItemBorderStyle { margin-bottom:9px; height:7px; width:50px; border-bottom-color:black; }
+.COMenuItemBorderEmpty { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#D4D4D4; }
+.COMenuItemBorder0 { border-bottom:0px none; }
+.COMenuItemBorder1 { border-bottom-width:1px; border-bottom-style:solid; }
+.COMenuItemBorder2 { border-bottom-width:2px; border-bottom-style:solid; }
+.COMenuItemBorder3 { border-bottom-width:3px; border-bottom-style:solid; }
+.COMenuItemBorder4 { border-bottom-width:1px; border-bottom-style:dotted; }
+.COMenuItemBorder5 { border-bottom-width:2px; border-bottom-style:dotted; }
+.COMenuItemBorder6 { border-bottom-width:1px; border-bottom-style:dashed; }
+.COMenuItemBorder7 { border-bottom-width:2px; border-bottom-style:dashed; }
+/* Border edge menu, ...Edge is added to all menu items, ...Border is empty edge that is not used now
+   ...All - all edges, ...O15 - outer edges, ...I3 - inner edges, ...I2 - vertical inner edge, ...I1 - horizontal inner edge,
+   ...O1 - top edge, ...O2 - right edge, ...O4 - bottom edge, ...O8 - left edge, ...O5 - top and bottom edge, ...O10 - left and right edge
+   @ Change height, width, margin and background
+*/
+.COMenuItemBorderEdge { height:20px; width:24px; background-image:url(ToolbarSheetWide.gif?v120); background-repeat:no-repeat; }
+.COMenuItemBorder { background-position:left -200px; }
+.COMenuItemBorderAll { background-position:left -300px; }
+.COMenuItemBorderO15 { background-position:left -400px; }
+.COMenuItemBorderI3 { background-position:left -500px; }
+.COMenuItemBorderI2 { background-position:left -600px; }
+.COMenuItemBorderI1 { background-position:left -700px; }
+.COMenuItemBorderO1 { background-position:left -800px; }
+.COMenuItemBorderO2 { background-position:left -900px; }
+.COMenuItemBorderO4 { background-position:left -1000px; }
+.COMenuItemBorderO8 { background-position:left -1100px; }
+.COMenuItemBorderO5 { background-position:left -1200px; }
+.COMenuItemBorderO10 { background-position:left -1300px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                       Calendar dialog                                                   */
+/*                                                            TGLib                                                        */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* --- Main calendar classes --- */
+/* Added to main menu / dialog classes ...Menu... as ...Pick...
+   ...Main - Main absolute <div> tag; @ Do not change
+   ...Shadow - Shadow <div> tag displayed under ...Main tag, on the same position and size. @ Set margin for the shadow shift, background, opacity and border
+   ...Outer - <div> tag inside the main tag, contains the whole calendar. @ Set background, border and padding
+   ...Body - <div> inside ...Outer, contains the whole calendar, including buttons; @ Set background, border, padding and margin
+*/
+.COPickMain { position:absolute; left:0px; top:0px; z-index:258; }
+.COPickShadow { position:absolute; background:#888; z-index:257; margin-left:3px; margin-top:3px; opacity:0.5; filter:alpha(opacity=50); }
+.COPickOuter { border:1px solid #ccc; overflow:hidden; }
+.COPickBody { cursor:default; border:none; }
+/* --- Other standard dialog parts' classes, NOT shown by default  --- */
+/* Added to main menu / dialog classes ...Menu... as ...Pick...
+   ...Header is shown outside the calendar dialog in place of the source tag. Used only if set Header attribute. @ Set margin to shift the header, border, padding and background
+   ...HeaderTop is added to ...Header when the calendar is shown above the header, ...HeaderBottom is added to ...Header when the calendar is shown below the header
+   ...Head is set to calendar top section. Used only if set Head attribute. @ Set border, margin, padding, background and text attributes
+   ...Close is close icon set <div> tag inside the ...PickHead. Used only if set Head attribute. Can be hidden by setting HeadClose:0; @ Set background, width and height
+   ...Foot is set to calendar bottom section. Used only if set Foot attribute. It does NOT show calendar buttons. @ Set border, margin, padding, background and text attributes
+*/
+.COPickHeader {
+   position:absolute; z-index:258; border:1px solid #ccc; background:white;
+   font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; overflow:hidden; cursor:pointer;
+   }
+.COPickHeaderBottom { border-bottom:0px none; padding-bottom:1px; }
+.COPickHeaderTop { border-top:0px none; padding-top:1px; }
+.COPickHead,.COPickFoot { background:#F4F4F4; border:0px none; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:default; }
+.COPickHead { padding:3px 0px 4px 5px; }
+.COPickFoot { padding:4px 0px 3px 5px; }
+.COPickClose { float:right; width:14px; cursor:pointer; display:none; background:url(Menu.gif?v120) no-repeat right -353px; }
+/* --- The calendar header showing month and year --- */
+/* ...PickMY - the whole header tag showing the month and year; @ Set border, padding, margin, background and text attributes
+   ...PickMYDown - shown inside PickMY to display icon down in the first calendar table; @ Set background and padding-right
+   ...PickMYUp - shown inside PickMY to display icon up in the second calendar table; @ Set background and padding-right
+   ...PickMYRtl - added to ...PickMYUp and ...PickMYDown in RTL mode; @ Set padding-left
+   ...PickBL - previous month icon, ...PickBR - next month icon; @ Set background, width and height
+*/
+.COPickMY {
+   background:white; padding:4px 0px 4px 0px;
+   font:bold 11.5px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:default; text-align:center;
+   }
+.COPickMYDown { padding-right:13px; background:url(Menu.gif?v120) no-repeat right -400px; cursor:pointer; }
+.COPickMYUp { padding-right:13px; background:url(Menu.gif?v120) no-repeat right -450px; cursor:pointer; }
+.COPickMYRtl { padding-right:0px; padding-left:13px; }
+.COPickBL,.COPickBR { width:24px; line-height:13px; padding:4px 0px 4px 0px; overflow:hidden; cursor:pointer; display:none; }
+.COPickBL { float:left; background:url(Menu.gif?v120) no-repeat left -498px; }
+.COPickBR { float:right; background:url(Menu.gif?v120) no-repeat right -548px; }
+/* --- The first calendar table with days --- */
+/* ...PickTableParent - <div> tag containing the whole table; @ Set border, padding, margin and background
+   ...PickTable - <table> tag inside ...PickTableParent; @ Do not change
+   ...PickRow - <tr> tags with individual day numbers; @ Set background and optionally height
+   ...PickRowW - top <tr> tag with week day names; @ Set background and optionally height
+   ...PickCell - <td> tags with day numbers or week names; @ Set width and optionally background, padding and height
+   ...PickCellTouch - added to ...PickCell on tablet
+*/
+.COPickTableParent { padding:5px 13px 5px 13px; }
+.COPickTable { table-layout:fixed; width:0px; }
+.COPickRow { background:#F4F4F4; }
+.COPickRowW { background:#F4F4F4; }
+.COPickRowW > td { }
+.COPickCell { width:26px; }
+.COPickCellTouch { width:32px; }
+/* Individual day cells in the first calendar table; only one class per tag is set (except added ...PickTouch). <div> tags inside <td> tag.
+   @ Set background, border, margin, padding, height and text attributes
+   @ All the classes should have the same height and should not be wider than ...PickCell to avoid blinking the calendar cells on mouse actions
+   ...PickWDN - week day name in top row
+   ...PickWN  - week number in left column
+   ...PickWNE - not selectable week number in left column
+   ...PickWD  - work day number
+   ...PickSa  - Saturday number
+   ...PickSu  - Sunday number
+   ...PickOM  - Day number from another month
+   ...PickNow - Today number
+   ...PickSel - Selected day number
+   ...NE      - any not selectable day number
+   ...PickHover - Any not selected day number under mouse cursor
+   ...PickSelHover - Selected day number under mouse cursor
+   ...PickEmpty - top left button in <div> tag to select empty date; @ Set background and height
+   ...PickTouch - class added to every tag on tablet; @ Set line-height
+*/
+.COPickWDN { margin:1px 2px 1px 2px; padding-top:2px; font:11px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; text-align:center; cursor:default; }
+.COPickHover,.COPickSelHover,.COPickWD,.COPickSa,.COPickSu,.COPickSel,.COPickNow,.COPickWDNE,.COPickSaNE,.COPickSuNE,.COPickSelNE,.COPickNowNE,.COPickOM,.COPickOMNE,.COPickWN,.COPickWNE {
+   margin:2px 3px 2px 3px; padding:1px; border:1px solid white; border-right:1px solid #D4D4D4; border-bottom:1px dotted #CBCBCB;
+   font:11px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; text-align:center; cursor:pointer;
+   }
+.COPickWN,.COPickWNE {
+   border:0px none; margin:0px; padding:3px 4px 3px 4px; background:none;
+   color:#AAA;
+   }
+.COPickWNE { cursor:default; }
+.COPickWDNE,.COPickSaNE,.COPickSuNE,.COPickSelNE,.COPickNowNE { cursor:default; text-decoration:line-through; }
+.COPickWD { background-color:white; }
+.COPickSa { border:1px solid #9cf; background-color:#9cf; color:white; }
+.COPickSu { border:1px solid #09C; background-color:#09C; color:white; }
+.COPickSel { border:2px solid #09C; padding:0px; background-color:white; font-weight:bold; }
+.COPickSelNE { background-color:#ffd; }
+.COPickNow { border:2px solid #9cf; padding:0px; background-color:white; font-weight:bold; }
+.COPickNowNE { background-color:#ffe0ff; }
+.COPickOM { background-color:none; color:black; }
+.COPickOMNE { color:#aaaaaa; cursor:default; text-decoration:line-through; }
+.COPickEmpty { background:url(Menu.gif?v120) no-repeat center -1050px; cursor:pointer; _cursor:hand; height:20px; }
+.COPickHover { background-color:#ddd; border:1px solid #09C; }
+.COPickSelHover { background-color:#ddd;  border:2px solid #09C; padding:0px; font-weight:bold; }
+.COPickTouch { line-height:18px; }
+/* --- The second calendar table with months and years --- */
+/* ...Pick2TableParent - <div> tag containing the whole table; @ Set border, padding, margin and background
+   ...Pick2Table - <table> tag inside ...Pick2TableParent; @ Do not change
+   ...Pick2Row - <tr> tags with the cells: 2 months, separator and 2 years; @ Set background and optionally height
+   ...Pick2CellM - <td> tags with month names; @ Set height, width and optionally background and padding
+   ...Pick2CellY - <td> tags with year numbers; @ Set height, width and optionally background and padding
+   ...Pick2CellSep - <td> tag, separator between months and years section; @ Set height, width and optionally background and padding
+   ...Pick2SepH - separator between the calendar header ...PickMY and calendar body ...Pick2TableParent; @ Set height to synchronize heights of both calendar dialogs
+   ...Touch - added to ...Pick2Cell... on tablet
+*/
+.COPick2TableParent { padding:2px 3px 2px 3px; }
+.COPick2Table { table-layout:fixed; width:0px; }
+.COPick2Row { }
+.COPick2CellM { height:25px; width:70px; }
+.COPick2CellMTouch { height:30px; width:80px; }
+.COPick2CellY { height:25px; width:38px; }
+.COPick2CellYTouch { height:30px; width:50px; }
+.COPick2CellSep { height:25px; width:8px; }
+.COPick2CellSepTouch { height:30px; width:5px; }
+.COPick2SepH { width:1px; height:2px; overflow:hidden; }
+.COPick2SepHTouch { height:4px; }
+/* Individual cells, <div> tag inside <td> tag
+   @ Set background, border, margin, padding, height and text attributes
+   @ All the classes should have the same height and should not be wider than ...Pick2Cell... to avoid blinking the calendar cells on mouse actions
+   ...Pick2M - month name; ...Pick2Y - year number; ...Sel - selected cell; ...Hover - cell under mouse cursor; ...SelHover - selected cell under mouse cursor
+   ...Pick2Touch - class added to every tag on tablet; @ Set line-height
+*/
+.COPick2M,.COPick2Y,.COPick2MSel,.COPick2YSel,.COPick2MHover,.COPick2YHover,.COPick2MSelHover,.COPick2YSelHover {
+   margin:0px 1px 0px 1px; padding:3px 1px 3px 1px; border:1px solid white; border-right:1px solid #D4D4D4; border-bottom:1px dotted #CBCBCB; background:white;
+   font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:pointer; text-align:center; overflow:hidden;
+   }
+.COPick2MSel,.COPick2YSel { border:2px solid #09C; padding:1px 0px 1px 0px; background-color:white; }
+.COPick2MHover,.COPick2YHover { background:#DDD; padding:1px 0px 1px 0px; border:1px solid #09C; }
+.COPick2MSelHover,.COPick2YSelHover { background:#ddd; }
+.COPick2Touch { line-height:18px; }
+/* Special cells, <div> tag inside <td> tag
+   ...Pick2Sep - separator between months and years; @ Set height, width, background, border, margin, padding
+   ...Pick2SepTouch - class added to ...Pick2Sep on tablet; @ Set height
+   ...Pick2BL - button (<div> tag) showing previous 5 years; @ Set background, width and height
+   ...Pick2BR - button (<div> tag) showing next 5 years; @ Set background, width and height
+*/
+.COPick2Sep { }
+.COPick2SepTouch { }
+.COPick2BL,.COPick2BR { width:34px; cursor:pointer; height:23px; }
+.COPick2CellYTouch .COPick2BL,.COPick2CellYTouch .COPick2BR { margin-left:5px; }
+.COPick2BL { background:url(Menu.gif?v120) no-repeat center -597px; }
+.COPick2BR { background:url(Menu.gif?v120) no-repeat center -647px; }
+/* --- The calendar footer with time --- */
+/* Shown when EditFormat contains time definition (H or h or m or s); it is not shown for Range cells
+   For custom calendar it is shown if set TimeFormat attribute; it is not shown if set Multi:1
+   ...PickTimeCell - the whole calendar footer (<div> tag) on the same level as ...PickTableParent; @ Set border, padding, margin, background and text-align
+   ...PickTime - set to <input> tag inside ...PickTimeCell; @ Set text attributes
+*/
+.COPickTimeCell { padding:8px 5px 8px 0px; background:white; text-align:right; line-height:0px; }
+.COPickTime {
+   font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; background:white;
+   margin:0px; padding:0px; border:0px none; white-space:nowrap; text-align:right; outline:none;
+   }
+/* --- The calendar footer with buttons --- */
+/* Contains buttons like OK, Today, Clear; shown for Range cells or when set CalendarButtons; For custom calendar is shown for Multi and for Buttons set.
+   ...PickFooter is the whole first calendar footer (<div> tag) on the same level as ...PickTableParent; @ Set border, padding, margin, background and text-align
+   ...Pick2Footer is the whole second calendar footer (<div> tag) on the same level as ...Pick2TableParent; @ Set border, padding, margin, background and text-align
+   ...PickButton is set to <button> tags; @ Set border, margin, padding, background, width, height and text attributes
+   ...PickButtonHover is added when the <button> tag is under mouse cursor; @ Set border, margin, padding, background, width, height and text attributes
+*/
+.COPickFooter,.COPick2Footer {
+   background:white; padding-top:2px; padding-bottom:2px; cursor:default; text-align:center;
+   }
+.COPickButton {
+   width:64px; margin:4px; padding:1px 0px 1px 0px;
+   font:11.9px Arial,Helvetica,sans-serif; text-align:center; white-space:nowrap; overflow:hidden;
+   }
+.COPickButtonHover { }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                       TGLib special classes not used in TreeGrid                                        */
+/*                                                            TGLib                                                        */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* --- Edit control (TGLib only) --- */
+/* ...EditParent is set to temporary parent div tag if the edit is shown on given position, not inside tag; @ Do not change
+   ...Edit is set to the TGLib Edit control tag (cc="Edit"); @ Set border, margin, padding, background and text attributes
+   ...EditInline is set instead if the TGLib Edit control tag has display:inline; @ Set side border, margin, padding, background and text attributes
+   ...EditMulti is added for control with Multi:1 as multiline edit in <textarea>; @ Set border, margin, padding, background and text attributes
+*/
+.COEditParent { position:absolute; z-index:258; overflow:hidden; }
+.COEdit,.COEditInline {
+   padding:2px 4px 2px 4px; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif;
+   border:1px solid #CCC; background:#EEE; white-space:nowrap; overflow:hidden;
+   }
+.COEditInline { display:inline-block; vertical-align:bottom; }
+.COEditMulti { white-space:normal; }
+/* --- Enum control (TGLib only) --- */
+/* ...EnumControl is set to the TGLib Enum control tag (cc="Enum"); @ Set border, margin, padding, background and text attributes
+   ...EnumInline is set instead if the TGLib Enum control tag has display:inline; @ Set side border, margin, padding, background and text attributes
+   ...EnumHeader is used inside popup menu header ...MenuHeader tag and shows the Enum icon on left side; @ Set background, padding and text attributes and optionally border and margin
+*/
+.COEnumControl,.COEnumInline {
+   background:#EEE url(Menu.gif?v120) no-repeat left -800px; overflow:hidden; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:pointer;
+   padding:2px 4px 2px 15px; border:1px solid #CCC;
+   }
+.COEnumInline { display:inline-block; vertical-align:bottom; }
+.COEnumHeader { background:white url(Menu.gif?v120) no-repeat left -798px; font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; cursor:pointer; padding:2px 4px 2px 15px; }
+/* --- Mouse dragging (TGLib only) --- */
+/* ...MouseOrig is set to original tag being dragged by mouse, when copying the tag
+   ...DragObject is set to ghost tag being dragged by mouse, when copying the tag
+*/
+.COMouseOrig { background:yellow!important; opacity:0.5; filter:alpha(opacity=50); }
+.COMouseDragObject { position:absolute; z-index:260; background:#888; opacity:0.5; filter:alpha(opacity=50); }
+/* --- Focused control (TGLib only) --- */
+.COFocus { border:1px solid blue; background-color:white; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                Cell tooltips -  Hint and Tip                                            */
+/*                                                TreeGrid (Hint) / TGLib (Tip)                                            */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ------------------- Hint ------------------- */
+/* Hint is shown in place of the cell content if the cell content is not shown the whole
+   ...Main is the <div> tag absolutely positioned containing the whole hint; @ Set margin to shift the hint and background, border and padding
+   ...Outer is added to inner <div> inside ...Main along with all the cell css classes; @ Carefully set the attributes to override the cell settings
+   ...Shadow is set to <div> tag displayed under hint ...Main tag, on the same position and size; @ Set margin for the shadow shift, background, opacity and border
+   ...Header... is added to ...Main, ...Outer and ...Shadow for Header row (for every row is added ...xxx..., where xxx is the row Kind and for Header is Header)
+   ...SpaceEdit is added to ...Main, ...Outer and ...Shadow for editable Space cell (for Space cell is added also the ...xxx... as for row Kind along with the ...SpaceEdit...)
+   ...Space... is added to ...Main, ...Outer and ...Shadow for not editable Space cell (for Space cell is added also the ...xxx... as for row Kind along with the ...Space...)
+*/
+.COHintMain {
+   position:absolute; margin-left:-2px; margin-top:-2px; padding-left:1px; padding-top:1px; left:0px; top:0px; z-index:260;
+   background:white; cursor:default; border:1px dotted #CBCBCB;
+   }
+.COHintHeaderMain { }
+.COHintSpaceMain { margin-left:-1px; margin-top:-1px; padding:0px; overflow:hidden; }
+.COHintSpaceEditMain,.COHintSpaceSelectMain { border:0px none; background:none; margin-left:0px; margin-top:0px; padding:0px; overflow:hidden; }
+.COHintSpaceSelectMain { margin-left:1px; }
+.COHintOuter { overflow:hidden; background:white; color:black; text-align:left; border-color:white; } .COHintOuter * { text-align:left; }
+.COHintSpaceOuter { margin-left:-1px; margin-top:-1px; }
+.COHintSpaceEditOuter { }
+.COHintSpaceSelectOuter { }
+.COHintHeaderOuter { background:#E9E9E9; }
+.COHintShadow { position:absolute; margin-left:2px; margin-top:2px; z-index:259; background:#888; opacity:0.3; filter:alpha(opacity=30); }
+.COHintSpaceShadow { margin-left:4px; margin-top:4px; }
+.COHintSpaceEditShadow,.COHintSpaceSelectShadow { margin-left:4px; margin-top:4px; }
+/* ------------------- Tip ------------------- */
+/* Tip is shown below mouse cursor on mouse hover the cell; Used only if set <Cfg StandardTip='0'/>
+   ...Main - main tip <div> tag absolutely positioned; @ Do not change
+   ...Outer - outer tip <div> tag inside ...Main, has set maximal width to overflow long text; @ Set border, margin, padding, background
+   ...Body - inner tip <div> tag inside ...Outer; @ Set text attributes and optionally border, margin, padding and background
+   ...Shadow - <div> tag displayed under tip ...Main tag, on the same position and size; @ Set margin for the shadow shift, background, opacity and border
+*/
+.COTipMain { position:absolute; left:0px; top:0px; z-index:262; visibility:hidden; }
+.COTipOuter { background:#f4f4f4; border:1px solid #d0d0d0; padding:3px; overflow:hidden; cursor:default; }
+.COTipBody { font:11.9px/13px Verdana,Tahoma,"Trebuchet MS",sans-serif; white-space:nowrap; }
+.COTipShadow { position:absolute; margin-left:3px; margin-top:3px; z-index:261; background:#888; opacity:0.3; filter:alpha(opacity=30); visibility:hidden; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                 Line chart (cell type Chart)                                            */
+/*                                                            TGLib                                                        */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* ...Chart - cell type, <td> tag; @ Set border, padding and background
+   ...ChartInner - inner <div> tag containing the whole chart; @ Set background
+   ...ChartLayer - individual chart layers, <div> tags, one per TChartLine, one for Axis and one for Caption; @ Do not change
+   ...ChartAxisY - horizontal axis, <div> tag; @ Set height and background
+   ...ChartAxisX - vertical axis, <div> tag; @ Set width and background
+   ...ChartAxisYLabel, ...ChartAxisXLabel - <div> tag with labels for X and Y axes; @ Set background
+   ...ChartAxisYText, ...ChartAxisXText - <div> tag inside ...Label; @ Set text attributes and optionally background, border, margin and padding
+   ...ChartCaption - chart top caption, <div> tag; @ Set background, border, padding and text attributes
+*/
+.COChart { padding:5px; }
+.COChartInner { background:white; width:100%; }
+.COChartLayer { overflow:hidden; height:1000px; }
+.COChartAxisY { background:black; height:1px; overflow:hidden; }
+.COChartAxisYLabel { overflow:hidden; }
+.COChartAxisYText { margin-right:5px; margin-top:12px; text-align:right; font:12px/14px Arial,Helvetica,sans-serif; }
+.COChartAxisX { width:1px; overflow:hidden; background:black; }
+.COChartAxisXLabel { overflow:hidden; }
+.COChartAxisXText { text-align:center; font:12px/14px Arial,Helvetica,sans-serif; }
+.COChartCaption { text-align:center; font:12px/14px Arial,Helvetica,sans-serif; margin-top:3px; }
+/* Individual chart points for PointType value; @ Set only background */
+.COChartPoint1,.COChartPoint2,.COChartPoint3,.COChartPoint4,.COChartPoint5,.COChartPoint6,.COChartPoint7,.COChartPoint8 {
+   background:url(Gantt.gif?v120) no-repeat; width:32px; height:32px; overflow:hidden;
+   }
+.COChartPoint1 { background-position:-892px 7px; }
+.COChartPoint2 { background-position:-992px 7px; }
+.COChartPoint3 { background-position:-1092px 7px; }
+.COChartPoint4 { background-position:-1192px 7px; }
+.COChartPoint5 { background-position:-1292px 7px; }
+.COChartPoint6 { background-position:-1392px 7px; }
+.COChartPoint7 { background-position:-1492px 7px; }
+.COChartPoint8 { background-position:-1592px 7px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                      Custom scrollbars                                                  */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* Custom scrollbars shown if set CustomScroll (always) or CustomHScroll (for horizontal scrollbar only) or TouchScroll (on tablet only)
+   There are four scrollbar types for CustomScroll values 1 - 4 for different sizes, 1 - standard size, 2 - wide scrollbar, 3 - thin scrollbar, 4 - hidden scrollbar
+*/
+/* --- Horizontal scrollbars --- */
+/* ...RightHidden - shown instead of ...Right if the column section does not need to show scrollbar (but the other sections do)
+      It is used also to calculate scrollbar height; @ Set height and background and optionally border and margin
+   ...Right - <div> tag placed inside ...HScroll... tag to show the right side arrow button; @ Set padding-right and background and optionally border, padding and margin
+   ...RightHover - used instead of ...Right under mouse cursor, to highlight the right side button
+   ...Left - <div> tag placed inside ...Right to show the left side arrow button; @ Set padding-left and background
+   ...LeftHover - used instead of ...Left under mouse cursor, to highlight the left side button
+   ...SliderRight - <div> tag placed inside ...Left... tag to show the right edge of the slider; @ Set padding-right and background and optionally border, padding and margin
+   ...SliderRightHover - used instead of ...SliderRight under mouse cursor, to highlight the right edge of the slider
+   ...SliderLeft - <div> tag placed inside ...SliderRight to show the left edge of the slider; @ Set padding-left and background
+   ...SliderLeftHover - used instead of ...SliderLeft under mouse cursor, to highlight the left edge of the slider
+   ...SliderHIn - <div> tag placed inside ...SliderLeft to show the body of the slider; Controls height of the whole scrollbar;
+      @ Set height and background; The height must be height of ...RightHidden minus all vertical padding,border and margin of the ...Right, ...Left, ...SliderRight, ...SliderLeft and ...SliderHIn
+   ...SliderHInHover - used instead of ...SliderHIn under mouse cursor, to highlight the body of the slider
+   ...X - shown in the horizontal scrollbars row in place of vertical scrollbar; @ Set background
+*/
+.COCustScroll1RightHidden { background:url(VScroll.gif?v120) left -108px; height:17px; }
+.COCustScroll1Right { padding-right:17px; background:url(VScroll.gif?v120) right 0px; }
+.COCustScroll1RightHover { padding-right:17px; background:url(VScroll.gif?v120) right -18px; }
+.COCustScroll1Left { padding-left:17px; background:url(VScroll.gif?v120) left 0px; }
+.COCustScroll1LeftHover { padding-left:17px; background:url(VScroll.gif?v120) left -18px; }
+.COCustScroll1SliderRight { background:url(VScroll.gif?v120) right -36px; padding-right:1px; }
+.COCustScroll1SliderRightHover { background:url(VScroll.gif?v120) right -72px; padding-right:1px; }
+.COCustScroll1SliderLeft { background:url(VScroll.gif?v120) left -36px; padding-left:1px; }
+.COCustScroll1SliderLeftHover { background:url(VScroll.gif?v120) left -72px; padding-left:1px; }
+.COCustScroll1SliderHIn { height:17px; overflow:hidden; background:url(VScroll.gif?v120) center -54px; }
+.COCustScroll1SliderHInHover { height:17px; overflow:hidden; background:url(VScroll.gif?v120) center -90px; }
+.COCustScroll1X { background:#F4F4F4; cursor:default; }
+.COCustScroll2RightHidden { background:url(VScroll.gif?v120) left -364px; height:34px; }
+.COCustScroll2Right { padding-right:36px; background:url(VScroll.gif?v120) right -148px; }
+.COCustScroll2RightHover { padding-right:36px; background:url(VScroll.gif?v120) right -184px; }
+.COCustScroll2Left { padding-left:36px;  background:url(VScroll.gif?v120) left -148px; }
+.COCustScroll2LeftHover { padding-left:36px;  background:url(VScroll.gif?v120) left -184px; }
+.COCustScroll2SliderRight { background:url(VScroll.gif?v120) right -220px; padding-right:2px; }
+.COCustScroll2SliderRightHover { background:url(VScroll.gif?v120) right -292px; padding-right:2px; }
+.COCustScroll2SliderLeft { background:url(VScroll.gif?v120) left -220px; padding-left:2px; }
+.COCustScroll2SliderLeftHover { background:url(VScroll.gif?v120) left -292px; padding-left:2px; }
+.COCustScroll2SliderHIn { height:34px; overflow:hidden; background:url(VScroll.gif?v120) center -256px; }
+.COCustScroll2SliderHInHover { height:34px; overflow:hidden; background:url(VScroll.gif?v120) center -328px; }
+.COCustScroll2X { background:#F4F4F4; cursor:default; }
+.COCustScroll3Right,.COCustScroll3RightHidden { background:white; height:8px; }
+.COCustScroll3SliderRight,.COCustScroll3SliderRightHover { padding-right:3px; height:9px; background:url(VScroll.gif?v120) right -126px; }
+.COCustScroll3SliderRightHover { background-position:right -135px; }
+.COCustScroll3SliderLeft,.COCustScroll3SliderLeftHover { height:8px; background:url(VScroll.gif?v120) left -126px; }
+.COCustScroll3SliderLeftHover { background-position:left -135px; }
+.COCustScroll3X { background:white; cursor:default; }
+.COCustScroll4Right,.COCustScroll4RightHidden,.COCustScroll4SliderRight,.COCustScroll4SliderRightHover { height:1px; }
+.COCustScroll4X { }
+/* --- Vertical scrollbars --- */
+/* ...DownHidden - shown instead of ...Down if the grid does not need to show scrollbar and ShowVScroll='1' is set
+      It is used also to calculate scrollbar width; @ Set width and background and optionally border and margin
+   ...Down - <div> tag placed inside ...VScroll tag to show the bottom side arrow button; @ Set padding-bottom and background and optionally border, padding and margin
+   ...DownHover - used instead of ...Down under mouse cursor, to highlight the bottom side button
+   ...Up - <div> tag placed inside ...Down to show the top side arrow button; @ Set padding-top and background
+   ...UpHover - used instead of ...Up under mouse cursor, to highlight the top side button
+   ...SliderDown - <div> tag placed inside ...Up... tag to show the bottom edge of the slider; @ Set padding-bottom and background and optionally border, padding and margin
+   ...SliderDownHover - used instead of ...SliderDown under mouse cursor, to highlight the bottom edge of the slider
+   ...SliderUp - <div> tag placed inside ...SliderDown to show the top edge of the slider; @ Set padding-top and background
+   ...SliderUpHover - used instead of ...SliderUp under mouse cursor, to highlight the top edge of the slider
+   ...SliderVIn - <div> tag placed inside ...SliderUp to show the body of the slider; @ Set background
+   ...SliderVInHover - used instead of ...SliderVIn under mouse cursor, to highlight the body of the slider
+*/
+.COCustScroll1DownHidden { background:url(HScroll.png?v120) -108px top; width:17px; }
+.COCustScroll1Down { padding-bottom:17px; background:url(HScroll.png?v120) 0px bottom; }
+.COCustScroll1DownHover { padding-bottom:17px; background:url(HScroll.png?v120) -18px bottom; }
+.COCustScroll1Up { padding-top:17px; background:url(HScroll.png?v120) 0px top; }
+.COCustScroll1UpHover { padding-top:17px;  background:url(HScroll.png?v120) -18px top; }
+.COCustScroll1SliderDown { background:url(HScroll.png?v120) -36px bottom; padding-bottom:1px; }
+.COCustScroll1SliderDownHover { background:url(HScroll.png?v120) -72px bottom; padding-bottom:1px; }
+.COCustScroll1SliderUp { background:url(HScroll.png?v120) -36px top; padding-top:1px; }
+.COCustScroll1SliderUpHover { background:url(HScroll.png?v120) -72px top; padding-top:1px; }
+.COCustScroll1SliderVIn { background:url(HScroll.png?v120) -54px center; }
+.COCustScroll1SliderVInHover { background:url(HScroll.png?v120) -90px center; }
+.COCustScroll2DownHidden { background:url(HScroll.png?v120) -364px top; width:34px; }
+.COCustScroll2Down { padding-bottom:36px; background:url(HScroll.png?v120) -148px bottom; }
+.COCustScroll2DownHover { padding-bottom:36px; background:url(HScroll.png?v120) -184px bottom; }
+.COCustScroll2Up { padding-top:36px; background:url(HScroll.png?v120) -148px top; }
+.COCustScroll2UpHover { padding-top:36px;  background:url(HScroll.png?v120) -184px top; }
+.COCustScroll2SliderDown { background:url(HScroll.png?v120) -220px bottom; padding-bottom:2px; }
+.COCustScroll2SliderDownHover { background:url(HScroll.png?v120) -292px bottom; padding-bottom:2px; }
+.COCustScroll2SliderUp { background:url(HScroll.png?v120) -220px top; padding-top:2px; }
+.COCustScroll2SliderUpHover { background:url(HScroll.png?v120) -292px top; padding-top:2px; }
+.COCustScroll2SliderVIn { background:url(HScroll.png?v120) -256px center; }
+.COCustScroll2SliderVInHover { background:url(HScroll.png?v120) -328px center; }
+.COCustScroll3Down,.COCustScroll3DownHidden { background:white; width:9px; }
+.COCustScroll3SliderDown,.COCustScroll3SliderDownHover { padding-bottom:3px; background:url(HScroll.png?v120) -126px bottom; }
+.COCustScroll3SliderDownHover { background-position:-135px bottom; }
+.COCustScroll3SliderUp,.COCustScroll3SliderUpHover { background:url(HScroll.png?v120) -126px top; }
+.COCustScroll3SliderUpHover { background-position:-135px top; }
+.COCustScroll4Down,.COCustScroll4DownHidden,.COCustScroll4SliderDown,.COCustScroll4SliderDownHover { width:0px; }
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/*                                                       System settings                                                   */
+/* -------------------------------------------------------------------------------------------------------------------------- */
+/* --------------- Debug print ----------------- */
+/* ! Note, here is no .CO style prefix
+   Controls the default debug window shown bottom the page, controlled by <bdo Debug> attribute
+   ...Tag - <div> tag containing the debug print; @ Set position attributes, background, border and padding
+   ...TagMax - used instead of ...Tag when maximized by clicking to Max button
+   ...Buttons - <div> tag placed next to ...Tag to show the debug control buttons; @ Set position attributes, background, border and padding
+   ...ButtonsMax - used instead of ...Buttons when maximized by clicking to Max button
+*/
+.GridDebugTag,.GridDebugTagMax { overflow:auto; overflow-y:scroll; border:1px solid black; background:#DDD; }
+.GridDebugTag,.GridDebugTagMax,.GridDebugButtons,.GridDebugButtonsMax {
+   position:fixed; z-index:256; left:5px; right:5px; bottom:5px; height:200px; padding:4px;
+   position:absolute!IE;
+   left:expression((5+(document.compatMode=="CSS1Compat"?document.documentElement.scrollLeft:document.body.scrollLeft))+"px")!IE;
+   width:expression((-10+(document.compatMode=="CSS1Compat"?document.documentElement.clientWidth-8:document.body.clientWidth))+"px")!IE;
+   top:expression((-205+(document.compatMode=="CSS1Compat"?document.documentElement.scrollTop+document.documentElement.clientHeight-8:document.body.scrollTop+document.body.clientHeight))+"px")!IE;
+   }
+.GridDebugTagMax,.GridDebugButtonsMax {
+   top:5px; height:auto;
+   top:expression((5+(document.compatMode=="CSS1Compat"?document.documentElement.scrollTop:document.body.scrollTop))+"px")!IE;
+   height:expression((-10+(document.compatMode=="CSS1Compat"?document.documentElement.clientHeight-8:document.body.clientHeight))+"px")!IE;
+   }
+.GridDebugButtons,.GridDebugButtonsMax {
+   text-align:right; margin-right:25px; width:130px; left:auto;
+   left:expression((-155+(document.compatMode=="CSS1Compat"?document.documentElement.clientWidth-8:document.body.clientWidth))+"px")!IE;
+   }
+/* Individual parts of the debug print
+   ...Button - one debug button, <button> tag placed inside ...Buttons; @ Set width, height, background, border, padding, margin and text attributes
+   ...Title - <span> tag with grid or print identification; @ Set text attributes and background
+   ...Mark - <span> tag that highlights some information, e.g. actual values; @ Set text attributes and background
+   ...Stop (0), ...Error (1), ...Warning (2), ...List (3), ...Info (>3) - <div> or <span> tag containing the information according to the debug level number; @ Set text attributes and background
+*/
+.GridDebugButton { font-size:10px; width:40px; padding:0px; }
+.GridDebugTitle { font-size:10px; color:blue; font-style:normal;font-weight:normal; }
+.GridDebugMark { font-weight:bold; }
+.GridDebugStop { font-size:18px; font-weight:bold; color:red; }
+.GridDebugError { font-size:12px; color:red; }
+.GridDebugWarning { font-size:12px; color:#A60;}
+.GridDebugList { font-size:10px; color:#888;}
+.GridDebugInfo { font-size:12px; }
+/* ------------------- Other settings ------------------- */
+/* Class added to <body> tag when printing grid to actual page or to new window (for PrintLocation != 2); @ Set any <body> attribute */
+.COBodyPrint,.COBodyPrintPDF { margin:0px!important; padding:0px!important; border:0px none!important; background:none!important; -webkit-print-color-adjust:exact; }
+/* Class added to every printed page */
+.COPrintPage { page-break-inside:avoid; page-break-after:always; }
+.COPrintPage:last-child { page-break-after:auto; }
+/* Border shown in main tag during grid resizing */
+.COResizeBorder { border:1px dashed black!important; }
+/* Disables momentum scroll when dialog is opened */
+.GridNoMomentumScroll * { -webkit-overflow-scrolling:auto!important; }
+/* Temporary tag used for some calculations; @ Do not change; ! Note, here is no .CO style prefix */
+.GridTmpTag { position:absolute; left:5px; top:5px; visibility:hidden; }
+/* Tag used to calculate column width according to its content */
+.GridCalcWidth table { width:auto!important; }
+/* Tag added to disable whole page, e.g. when showing modal dialog. ! Note, here is no .CO style prefix
+   Note, to disable only the grid is used .CODisabled class instead (e.g. when showing message in grid).
+   @ Set background and opacity, optionally margin and padding
+*/
+.GridDisabled { position:absolute; z-index:256; background:white; opacity:0.5; filter:alpha(opacity=50); }
+/* Tag where the grid is rendered and also where all the support absolute tags are rendered (e.g. cursors, dialogs or messages). ! Note, here is no .CO style prefix
+   @ Increase z-index if the grid or its menus or cursors are not shown as expected. But it is usually better to set <Cfg ZIndex/> instead.
+*/
+.GridMain { z-index:255; }
+/* Marks the style loaded; must be the last class in the file; @ Do not change */
+.COLoaded { border:1px solid black!important; }