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