plekit/table/table.css

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