slickgrid.css in Slickgrid 6

.slickgrid-wrapper{
  border: 1px solid #A5A5A5;
  font-size: 10px!important;
  position: relative;
}

/* Header bar */

#slickgrid .slick-header{
  /* Allow 1px for the bottomc column border - overflow is hidden*/
  height: 31px!important; 
  border: none;
}

.slick-header-columns,
.slick-header-column{
  height: 30px!important;
}

.slick-header,
.slick-header-columns{
  /* Give header bar a basic grey fill for when there's no columns */
  background: #E3E3E3!important;

}

.slick-header-columns{
  border-bottom: 1px solid #A5A5A5!important;
}

/* Main column headers */
.slick-header-column.ui-state-default{
  border-width: 1px;
  border-style: none solid;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Default column state */
.slick-header-column.ui-state-default,
.slick-header-column.ui-state-hover,
.slick-header-column:hover{
  background: url('../images/header-bg.png') repeat-x!important;
  border-right-color: #949494;
  border-left-color: #fff;
}

/* Show a hover sort icon to indicate this column can be sorted */
.slick-header-column.ui-state-hover span.slick-sort-indicator,
.slick-header-column:hover span.slick-sort-indicator{
  background: url('../images/sort-asc-hover.gif') no-repeat;
}

.slick-header-column.ui-state-default .slick-resizable-handle{
  right: 3px;
  background: url('../images/resize-handle.gif') no-repeat 0 9px;
  
}

/* Selected column state */

.slick-header-column.slick-header-column-sorted{
  background: url('../images/header-active-bg.png') repeat-x!important;
  border-right-color: #1872B6;
  border-left-color: #78D0FE;
  color: #fff;
}

.slick-header-column.slick-header-column-sorted span.slick-sort-indicator.slick-sort-indicator-desc{
  background: url('../images/sort-desc-active.png') no-repeat;
}

.slick-header-column.slick-header-column-sorted span.slick-sort-indicator.slick-sort-indicator-asc{
  background: url('../images/sort-asc-active.png') no-repeat;
}

.slick-header-column.slick-header-column-sorted .slick-resizable-handle{
  background-image: url('../images/resize-handle-active.png')
}

/************************** FILTER BAR ************************/

.slick-headerrow{
  background: #cfcfcf!important;
  border: none!important;
  height: 30px;
  border-bottom: 1px solid #A5A5A5!important;
}

.slick-headerrow .slick-headerrow-column{
  border-color: #cfcfcf!important;
  background: none;
  padding-top: 0;
}

/* text filter boxes */

.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter{
  background: url('../images/text-filter-left.png') no-repeat top left;
  display: block;
}

.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter span{
  background: url('../images/text-filter-right.png') no-repeat top right;
  padding-right: 8px;
  height: 21px;
  display: block;
  margin-left: 18px;
  padding-left: 3px;
  margin-top: 4px;
}

.slick-headerrow .slick-headerrow-column span.slickgrid-filter-textFilter span input{
  border: none;
  height: 13px;
  line-height: 8px;
  width: 100%;
  font-size: 10px;
  padding: 0;
}

/**************************** VIEWPORT & CELLS  ***************************/

.slick-viewport{
  overflow-y: scroll!important;
}

/* Cells */

.slick-cell{
  border-right-style: solid;
  padding-left: 4px;
  padding-right: 4px;
}

input.editor-text {
    background: none;
    border: 0 none;
    height: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 100%;
}

.slick-cell.editable {
  border-color: #00A8FF;
  background: #fff!important;
}

.slick-cell.invalid {
	background: url('../images/error.png') no-repeat right;
}

/* Rows */

div.odd{
  background: #F7F7F7!important;
}

/* Groups */

span.grouping-field-count{
  color: green;
}

.slick-group-toggle {
    margin-right: 5px;
}


/* Collapsible */

.toggle,
.slick-group-toggle {
  height: 9px;
  width: 9px;
  display: inline-block;
  cursor: pointer;
}

.toggle.expand,
.slick-group-toggle.collapsed{
  background: url(../images/expand.gif) no-repeat center center;
}

.toggle.collapse,
.slick-group-toggle.expanded {
  background: url(../images/collapse.gif) no-repeat center center;
}

/* Selected rows */

div.slick-cell-checkboxsel{
  background: #E3E3E3!important;
}

div.slick-cell-checkboxsel.selected{
  background: #CFCFCF!important;
}  


div.slick-cell-checkboxsel input{
  margin-left: 3px;
}

.slick-cell.selected,
.active-row .slick-cell{
  background-color: #E1EEFF;
}

.delete-row .slick-cell{
  background-color: #FAF4D1;
  color: #B92C29;
}


/**************************** CONTROLS  ***************************/

/* Resizable handle */

#slickgrid .ui-resizable-handle.ui-resizable-s{
  background: #E0E0E0 url('../images/viewport-resize-handle.png') no-repeat center;  
  border-top: 1px solid #A5A5A5;
  bottom: 0;
  height: 6px;
  z-index: 0;
}


/* Control bar */

#controls{
  height: 30px;
  background: #CECECE url('../images/header-bg.png') repeat-x;
  border-top: 1px solid #A5A5A5;
  overflow: hidden;
  padding: 0;
}

/* Pagination */

#controls .slick-pager{
  border: none;
  background: none;
  float: left;
  width: 420px;
}

#controls .slick-pager .slick-pager-settings span{
  display: none;
}

#controls .slick-pager span.slick-pager-nav{
  padding-top: 7px;
}

#controls .slick-pager span.slick-pager-settings,
#controls .slick-pager span.slick-pager-status{
  padding-top: 6px;
}

#controls .slick-pager span.slick-pager-status{
 margin-left: 10px; 
}

#controls .slick-pager .slick-pager-settings span.slick-pager-settings-expanded{
  display: block!important;
}

/* Next / prev buttons */

#controls .slick-pager span.slick-pager-nav span.ui-icon-container{
  background: none!important;
  border: none;
}

#controls .slick-pager span.slick-pager-nav span.ui-icon-container span{
  margin-left: 10px;
  cursor: pointer;
}

/* First */
#controls .slick-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-first,
#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-first.ui-state-disabled{
  background: url('../images/controls-first.png') no-repeat;
}

#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-first{
  background: url('../images/controls-first-active.png') no-repeat;
}

/* Prev */
#controls .slick-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-prev,
#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-prev.ui-state-disabled{
  background: url('../images/controls-prev.png') no-repeat;
  margin-left: 8px;
}

#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-prev{
  background: url('../images/controls-prev-active.png') no-repeat;
}

/* Next */
#controls .slick-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-next,
#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-next.ui-state-disabled{
  background: url('../images/controls-next.png') no-repeat;
  margin-left: 14px;
}

#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-next{
  background: url('../images/controls-next-active.png') no-repeat;
}

/* Last */
#controls .slick-pager span.slick-pager-nav span.ui-icon-container .ui-icon-seek-end,
#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-end.ui-state-disabled{
  background: url('../images/controls-last.png') no-repeat;
}

#controls .slick-pager span.slick-pager-nav span.ui-state-hover .ui-icon-seek-end{
  background: url('../images/controls-last-active.png') no-repeat;
}

/* Slickgrid loading bar */

#slickgrid-loading-bar{
  float: right;
  width: 400px;
  height: 20px;
  margin-top: 4px;
  text-align: right;
  margin-right: 10px;  
}

#slickgrid-loading-bar.loading{
  background: url('../images/loading-bar.gif') no-repeat right;
}

/* Slickgrid status */

#slickgrid-status{
  float: right;
  margin-top: 4px;
  text-align: right;
  padding-left: 15px;

}

/* Only give it dimensions when it has content*/
#slickgrid-status.slickgrid-error,
#slickgrid-status.slickgrid-no-error{
  height: 20px;
}

#slickgrid-status.slickgrid-error{
  background: url('../images/error.png') no-repeat left;
  width: 47px;
  color: #BC302D;
  margin-right: 10px;
}

#slickgrid-status.slickgrid-no-error{
  background: url('../images/no-error.png') no-repeat left;
  color: #6AAF11;
  width: 10px;
}

/* Response messages */

ul.slickgrid-messages{
  margin: 0;
}

ul.slickgrid-messages li{
  padding-left: 25px;
  background: url('../images/no-error.png') no-repeat left;
  color: #fff!important;
  line-height: 1.3em;
}

ul.slickgrid-messages li.error{
   background-image: url('../images/error.png');
}

/* Undo */

#slickgrid-undo{
  width: 20px;
  height: 20px;
  float: right;
  margin: 7px 12px 0 0;
  background: url('../images/undo.png') no-repeat;
  opacity: 0.5;
}

 #slickgrid-undo.undo-enabled{
  cursor: pointer;
  opacity: 1;
}

#slickgrid-undo.undo-enabled:hover{
  background-image: url('../images/undo-active.png');
}


/* Context menu */

#slickgrid-delete,
.slick-columnpicker
{
	border: 1px solid #949494;
	display: inline-block;
	-moz-box-shadow: 3px 3px 3px #C0C0C0;
	-webkit-box-shadow: 3px 3px 3px #C0C0C0;
	z-index: 99999;
  padding-bottom: 5px;
  background: #F4F4F4;
}

#slickgrid-delete{
  font-size: 1.1em;
  width: 300px;  
}

#slickgrid-delete h6{
  background: url('../images/header-bg.png') repeat-x!important;
  border-bottom: 1px solid #949494;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  margin-bottom: 15px;
  
}

#slickgrid-delete p{
  background: url("../images/delete.png") no-repeat 0 5px;
  margin: 15px 15px;
  padding-left: 25px;
  line-height: 1.4em;
}

#slickgrid-delete p.buttons{
  text-align: right;
  background: none;
}

#slickgrid-delete input#slickgrid-delete-button{
  margin-right: 10px;
}

.slick-columnpicker{
  font-size: 0.9em;
}

.slick-columnpicker hr{
  margin: 5px;
  border: 1px inset #F4F4F4;
}