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