/* CSS for HTML <TABLE> elements. This allows to hand build customized tables which can be
   sorted, filtered and have a look similar to the tables generated by the {table} macro */

.grid {
 margin: 2px 0px 5px;
 border-collapse: collapse;
 width: 90%;
}

.grid th {
 border-right: #ccc 1px solid;
 padding-right: 4px;
 border-top: #ccc 1px solid;
 padding-left: 4px;
 background: #f0f0f0;
 padding-bottom: 2px;
 border-left: #ccc 1px solid;
 padding-top: 2px;
 border-bottom: #ccc 1px solid;
 text-align: center;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
}

.grid td {
 border-right: #ccc 1px solid;
 padding-right: 4px;
 border-top: #ccc 1px solid;
 padding-left: 4px;
 padding-bottom: 3px;
 border-left: #ccc 1px solid;
 padding-top: 3px;
 border-bottom: #ccc 1px solid
}

.gridHover {
 background-color: #f9f9f9
}

/* Button to filter columns */
.btnflt {
 vertical-align: middle;
}

/* Filter input box */
input[type=text].flt, select.flt {
 background-color: #f5f5f5;
 background-image: url(icons/table/filter.gif);
 background-repeat: no-repeat;
 background-position: center left;
 border:1px solid #ccc;
 margin: 0px -3px;
 width:100%;
 vertical-align: middle;
}

/* Filter input box when the filter is next to the filter button */
input[type=text].flt_s, select.flt_s {
 background-color: #f5f5f5;
 background-image: url(icons/table/filter.gif);
 background-repeat: no-repeat;
 background-position: center left;
 border:1px solid #ccc;
 vertical-align: middle;
}