.datagrid-main {
}

.datagrid {
  border-collapse: collapse;
  width: 100%;
}

.datagrid td {
  line-height: 1.4em;
  padding: 4px;
}

.datagrid td a {
  color: black;
  text-decoration: none;
}

.datagrid th.day {
  background: #E9E9E9;
  border-bottom: 1px #999999 solid;
}

.datagrid tr {
  background-color: white;
}

.datagrid tr.even {
  background: #F2F2F2;
}

.datagrid tr:hover {
  background-color: #d4e0f3;
}

.datagrid-header {
  background: url("../images/datagrid/header_bg.png") repeat-x bottom left;
  border-top: 1px #999999 solid;
  border-bottom: 1px #999999 solid;
  border-right: 1px #CCCCCC solid;
  color: black;
  cursor: pointer;
  font-weight: bold;
  padding: 4px;
  text-align: left;
  white-space: nowrap;
}

.datagrid-header-drag {
  border: 1px #999999 solid;
  border-top: 0;
}

.datagrid-header a {
  color: black;
  text-decoration: none;
}

.datagrid-header a.unsort {
  color: #444444;
}

.datagrid-header a:hover {
  text-decoration: underline;
}

.datagrid tr:hover.headers {
  background-color: transparent;
}

.datagrid-header:hover {
  background: url("../images/datagrid/header_bg_primary.png") repeat-x bottom left;
}

.datagrid-header:hover a {
  text-decoration: underline;
}

.datagrid-header img {
  vertical-align: middle;
}

.edit-columns {
  width: 1.2em;
}


/****************************************************************************
 * Titles
 ****************************************************************************/
.datagrid-title,
.datagrid-titlebox {
  background-color: #a2bedc;
  border-bottom: 1px #728eac solid;
  margin: 0;
  padding: 5px 10px 5px 5px;
}

.datagrid-titlebox h1 {
  display: inline;
  font-size: 120%;
  padding-right: 10px;
}

.datagrid-titlebox ul {
  list-style: none;
  display: inline;
  margin: 0;
  padding: 0;
}

.datagrid-titlebox ul li {
  display: inline;
}

.datagrid-titlebox ul li a {
  color: #0000CC;
}

/****************************************************************************
 * Paginator
 ****************************************************************************/

.datagrid-wrapper .paginator {
  padding: 8px 4px 4px 4px;
}

.datagrid-wrapper .paginator .current-page {
  font-weight: bold;
  padding: 2px 6px;
}

.datagrid-wrapper .paginator .page-count {
  color: #444444;
  margin-left: 10px;
}

.datagrid-wrapper .paginator a {
  border: 1px solid #CCCCCC;
  color: black;
  padding: 2px 6px;
  text-decoration: none;
}

.datagrid-wrapper .paginator a:hover {
  background: #9BC0F2;
  border-color: #003366;
  color: black;
}

.datagrid-wrapper .paginator a:visited {
  color: black;
}


/****************************************************************************
 * Column-specific classes
 ****************************************************************************/
.datagrid .age1 {
  background: #beedbc;
  border-left: 1px #8bbd5c solid;
  border-right: 1px #8bbd5c solid;
  white-space: nowrap;
}

.datagrid tr.even .age1 {
  background: #b4e3b2;
}

.datagrid .age2 {
  background: #ddfa8e;
  border-left: 1px #a3e266 solid;
  border-right: 1px #a3e266 solid;
  white-space: nowrap;
}

.datagrid tr.even .age2 {
  background: #d3f084;
}

.datagrid .age3 {
  background: #fdf18c;
  border-left: 1px #d8c158 solid;
  border-right: 1px #d8c158 solid;
  white-space: nowrap;
}

.datagrid tr.even .age3 {
  background: #f3e782;
}

.datagrid .age4 {
  background: #fed3a9;
  border-left: 1px #d49659 solid;
  border-right: 1px #d49659 solid;
  white-space: nowrap;
}

.datagrid tr.even .age4 {
  background: #f4c99f;
}

.datagrid .age5 {
  background: #fab6b6;
  border-left: 1px #f56363 solid;
  border-right: 1px #f56363 solid;
  white-space: nowrap;
}

.datagrid tr.even .age5 {
  background: #f0acac;
}

.datagrid tr:hover .age1 {
  background: #a1cb9f;
}

.datagrid tr:hover .age2 {
  background: #bcd675;
}

.datagrid tr:hover .age3 {
  background: #d9ce74;
}

.datagrid tr:hover .age4 {
  background: #dab38e;
}

.datagrid tr:hover .age5 {
  background: #d69999;
}

.datagrid tr.month {
  background: #E9E9E9;
}

.datagrid td.summary {
  cursor: pointer;
}

.datagrid-menu {
  background: #F0F0F0;
  border-left: 1px #303030 solid;
  border-bottom: 1px #303030 solid;
  margin: 0;
  padding: 2px 4px;
}

.datagrid-menu td {
  margin: 2px;
}

.datagrid-menu td a {
  color: black;
  text-decoration: none;
}

.datagrid-menu td img {
  vertical-align: bottom;
}

.datagrid-menu-checkbox {
  border: 1px #C0C0C0 solid;
  height: 1.4em;
  width: 1.4em;
}

.datagrid-menu-checkbox img {
  display: block;
  margin: 0 auto;
  margin-top: 0.4em;
}

.datagrid-menu tr:hover .datagrid-menu-checkbox {
  background: #E0E0E0;
  cursor: pointer;
}

.datagrid-menu tr:hover .datagrid-menu-label {
  text-decoration: underline;
}
