plekit/table/table.css

   1 /* $Id$ */
   2 table.plc_table {
   3     width: auto;
   4     padding: 0;
   5     margin: 0 auto 1.5em auto;
   6     border-collapse:collapse;
   7 }
   8 table.plc_table>thead>tr, table.plc_table>tbody>tr {
   9     border-left: 1px solid #C1DAD7;
  10 }
  11 /* remove border for search/pagesize area */
  12 table.plc_table>thead>tr.pagesize_area, table.plc_table>thead>tr.search_area {
  13     border-left: 0px;
  14 }
  15
  16 th.plc_table {
  17     font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  18     color: #4f6b72;
  19     border-right: 1px solid #C1DAD7;
  20     border-bottom: 1px solid #C1DAD7;
  21     border-top: 1px solid #C1DAD7;
  22     letter-spacing: 1px;
  23     text-transform: uppercase;
  24     text-align: left;
  25     padding: 8px 12px 4px 12px;
  26     background: #CAE8EA url(/plekit/icons/tablesort-header.jpg) no-repeat;
  27     vertical-align:middle;
  28 }
  29 table.plc_table>tbody>tr>td, table.plc_table textarea, table.plc_table input [type="text"] {
  30     font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  31     border-right: 1px solid #C1DAD7;
  32     border-bottom: 1px solid #C1DAD7;
  33 }
  34 table.plc_table>tbody>tr>td {
  35     padding: 6px 12px 6px 12px;
  36     color: #4f6b72;
  37 }
  38 th.sortable,
  39 th.sortable-text,
  40 th.sortable-date,
  41 th.sortable-keep,
  42 th.sortable-date-dmy,
  43 th.sortable-numeric,
  44 th.sortable-currency,
  45 th.sortable-sortByTwelveHourTimestamp,
  46 th.sortable-sortIPAddress,
  47 th.sortable-sortEnglishLonghandDateFormat,
  48 th.sortable-sortScientificNotation,
  49 th.sortable-sortImage,
  50 th.sortable-sortFileSize,
  51 th.sortable-sortAlphaNumeric,
  52 th.sortable-sortEnglishDateTime {
  53     cursor:pointer;
  54     background: #CAE8EA url(/plekit/icons/tablesort-header-sortable.jpg) no-repeat;
  55     padding: 8px 12px 4px 16px;
  56 }
  57 th.forwardSort {
  58     background:#CAE8EA url(/plekit/icons/tablesort-header-down.jpg) no-repeat 0 0;
  59 }
  60 th.reverseSort {
  61     background:#CAE8EA url(/plekit/icons/tablesort-header-up.jpg) no-repeat 0 0;
  62 }
  63 table thead th.forwardSort a,
  64 table thead th.reverseSort a {
  65     color:#000;
  66     text-decoration:none;
  67 }
  68 /* rows with odd index */
  69 tr.alt {
  70     background: #F5FAFA;
  71     color: #797268;
  72 }
  73
  74 /* sort columns */
  75 /* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
  76    as it trys to download the image each and every time that it is used (which means a 1000 row table
  77    will produce 1000 http requests for the image in question) */
  78 tr[class="alt"]>td {
  79     background: #F5FAFA url(/plekit/icons/tablesort-td-alt.jpg) no-repeat;
  80 }
  81 table.plc_table>tbody>tr>td [class~="alt"] {
  82     background: #edf3f3 url(/plekit/icons/tablesort-col-alt.jpg) no-repeat !important;
  83 }
  84 /* Poor old Internet Explorer won't see the next two rules either as it doesn't get :first-child */
  85 table.plc_table>tbody>tr.alt>td:first-child {
  86     background: #F5FAFA url(/plekit/icons/tablesort-bullet2.gif) no-repeat;
  87     font-weight:bold;
  88 }
  89 table.plc_table>tbody>tr>td:first-child {
  90     background: #fff url(/plekit/icons/tablesort-bullet1.gif) no-repeat;
  91     font-weight:bold;
  92 }
  93
  94 /* table decorations */
  95 td.search_area {
  96     text-align:right;
  97     padding-right: 30px;
  98 }
  99 td.pagesize_area {
 100     text-align:right;
 101     padding-right: 30px;
 102 }
 103 .pagesize_label, .pagesize_input {
 104     font-style: oblique;
 105     font-size: .5em;
 106 }
 107 .table_search_label{
 108     font-weight:bold;
 109 }
 110 .table_reset {
 111     border:1px;
 112 }
 113
 114 /* Pagination list styles */
 115 ul.fdtablePaginater {
 116     display:table;
 117     list-style:none;
 118     padding:0;
 119     margin:0 auto;
 120     text-align:center;
 121     height:1.5em;
 122     width:auto;
 123     margin-bottom:1em;
 124 }
 125 ul.fdtablePaginater li {
 126     display:table-cell;
 127     padding-right:4px;
 128     color:#666;
 129     list-style:none;
 130
 131     -moz-user-select:none;
 132     -khtml-user-select:none;
 133 }
 134 ul.fdtablePaginater li a.currentPage {
 135     border-color:#a84444 !important;
 136     color:#000;
 137 }
 138 ul.fdtablePaginater li a:active {
 139     border-color:#222 !important;
 140     color:#222;
 141 }
 142 ul.fdtablePaginater li a,
 143 ul.fdtablePaginater li div {
 144     display:block;
 145     width:2em;
 146     font-size:1em;
 147     color:#666;
 148     padding:0;
 149     margin:0;
 150     text-decoration:none;
 151     outline:none;
 152     border:1px solid #ccc;
 153     font-family:georgia, serif;
 154 }
 155 ul.fdtablePaginater li div {
 156     cursor:normal;
 157     opacity:.5;
 158     filter:alpha(opacity=50);
 159 }
 160 ul.fdtablePaginater li a span,
 161 ul.fdtablePaginater li div span {
 162     display:block;
 163     line-height:2em;
 164     border:1px solid #fff;
 165     background:#fff url(/plekit/icons/tablesort-gradient.gif) repeat-x 0 -20px;
 166 }
 167 ul.fdtablePaginater li a {
 168     cursor:pointer;
 169 }
 170 ul.fdtablePaginater li a:focus {
 171     color:#333;
 172     text-decoration:none;
 173     border-color:#aaa;
 174 }
 175 .fdtablePaginaterWrap {
 176     text-align:center;
 177     clear:both;
 178     text-decoration:none;
 179 }
 180 ul.fdtablePaginater li .next-page span,
 181 ul.fdtablePaginater li .previous-page span,
 182 ul.fdtablePaginater li .first-page span,
 183 ul.fdtablePaginater li .last-page span {
 184     font-weight:bold !important;
 185 }
 186 /* Keep the table columns an equal size during pagination */
 187 td.sized1 {
 188     width:16em;
 189     text-align:left;
 190 }
 191 td.sized2 {
 192     width:10em;
 193     text-align:left;
 194 }
 195 td.sized3 {
 196     width:7em;
 197     text-align:left;
 198 }
 199 /*
 200    tfoot td
 201         {
 202         text-align:right;
 203         font-weight:bold;
 204         text-transform:uppercase;
 205         letter-spacing:1px;
 206         }
 207    */
 208 #visibleTotal {
 209     text-align:center;
 210     letter-spacing:auto;
 211 }
 212 * html ul.fdtablePaginater li div span,
 213 * html ul.fdtablePaginater li div span {
 214     background:#eee;
 215 }
 216 tr.invisibleRow {
 217     display:none;
 218     visibility:hidden;
 219 }
 220 p.paginationText {
 221     font-style:oblique;
 222 }
 223 p.plc_table_note {
 224     font-style:oblique;
 225     font-size:0.6em;
 226     font-family: georgia;
 227     text-align: center;
 228 }
 229 span.plc_table_note_title {
 230     font-weight:bold;
 231     font-size:1.5em;
 232     font-family: georgia;
 233     text-align: center;
 234 }
 235
 236 /* for IE */
 237 ul.fdtablePaginater {display:inline-block;}
 238 mul.fdtablePaginater {display:inline;}
 239 ul.fdtablePaginater li {float:left;}
 240 ul.fdtablePaginater {text-align:center;}
 241 /*table.plc_table { border-bottom:1px solid #C1DAD7; }*/