media/css/demo_table_jui.css

/*
 *  File:         demo_table_jui.css
 *  CVS:          $Id$
 *  Description:  CSS descriptions for DataTables demo pages
 *  Author:       Allan Jardine
 *  Created:      Tue May 12 06:47:22 BST 2009
 *  Modified:     $Date$ by $Author$
 *  Language:     CSS
 *  Project:      DataTables
 *
 *  Copyright 2009 Allan Jardine. All Rights Reserved.
 *
 * ***************************************************************************
 * DESCRIPTION
 *
 * The styles given here are suitable for the demos that are used with the standard DataTables
 * distribution (see www.datatables.net). You will most likely wish to modify these styles to
 * meet the layout requirements of your site.
 *
 * Common issues:
 *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
 *     no conflict between the two pagination types. If you want to use full_numbers pagination
 *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
 *     modify that selector.
 *   Note that the path used for Images is relative. All images are by default located in
 *     ../images/ - relative to this CSS file.
 */


/*
 * jQuery UI specific styling
 */

.paging_two_button .ui-button {
        float: left;
        cursor: pointer;
        * cursor: hand;
}

.paging_full_numbers .ui-button {
        padding: 2px 6px;
        margin: 0;
        cursor: pointer;
        * cursor: hand;
        color: #333 !important;
}

.dataTables_paginate .ui-button {
        margin-right: -0.1em !important;
}

.paging_full_numbers {
        width: 350px !important;
}

.dataTables_wrapper .ui-toolbar {
        padding: 5px;
}

.dataTables_paginate {
        width: auto;
}

.dataTables_info {
        padding-top: 3px;
}

table.display thead th {
        padding: 3px 0px 3px 10px;
        cursor: pointer;
        * cursor: hand;
}

div.dataTables_wrapper .ui-widget-header {
        font-weight: normal;
}


/*
 * Sort arrow icon positioning
 */
table.display thead th div.DataTables_sort_wrapper {
        position: relative;
        padding-right: 20px;
}

table.display thead th div.DataTables_sort_wrapper span {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 0;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * Everything below this line is the same as demo_table.css. This file is
 * required for 'cleanliness' of the markup
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables features
 */

.dataTables_wrapper {
        position: relative;
        clear: both;
}

.dataTables_processing {
        position: absolute;
        top: 0px;
        left: 50%;
        width: 250px;
        margin-left: -125px;
        border: 1px solid #ddd;
        text-align: center;
        color: #999;
        font-size: 11px;
        padding: 2px 0;
}

.dataTables_length {
        width: 40%;
        float: left;
}

.dataTables_filter {
        width: 50%;
        float: right;
        text-align: right;
}

.dataTables_info {
        width: 50%;
        float: left;
}

.dataTables_paginate {
        float: right;
        text-align: right;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
        margin: 0 auto;
        width: 100%;
        clear: both;
        border-collapse: collapse;
}

table.display tfoot th {
        padding: 3px 0px 3px 10px;
        font-weight: bold;
        font-weight: normal;
}

table.display tr.heading2 td {
        border-bottom: 1px solid #aaa;
}

table.display td {
        padding: 3px 10px;
}

table.display td.center {
        text-align: center;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
        background: url('../images/sort_asc.png') no-repeat center right;
}

.sorting_desc {
        background: url('../images/sort_desc.png') no-repeat center right;
}

.sorting {
        background: url('../images/sort_both.png') no-repeat center right;
}

.sorting_asc_disabled {
        background: url('../images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
        background: url('../images/sort_desc_disabled.png') no-repeat center right;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA {
        background-color: #ddffdd;
}

table.display tr.even.gradeA {
        background-color: #eeffee;
}


table.display tr.odd.gradeA {
        background-color: #ddffdd;
}

table.display tr.even.gradeA {
        background-color: #eeffee;
}

table.display tr.odd.gradeC {
        background-color: #ddddff;
}

table.display tr.even.gradeC {
        background-color: #eeeeff;
}

table.display tr.odd.gradeX {
        background-color: #ffdddd;
}

table.display tr.even.gradeX {
        background-color: #ffeeee;
}

table.display tr.odd.gradeU {
        background-color: #ddd;
}

table.display tr.even.gradeU {
        background-color: #eee;
}


tr.odd {
        background-color: #E2E4FF;
}

tr.even {
        background-color: white;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.dataTables_scroll {
        clear: both;
}

.dataTables_scrollBody {
        -webkit-overflow-scrolling: touch;
}

.top, .bottom {
        padding: 15px;
        background-color: #F5F5F5;
        border: 1px solid #CCCCCC;
}

.top .dataTables_info {
        float: none;
}

.clear {
        clear: both;
}

.dataTables_empty {
        text-align: center;
}

tfoot input {
        margin: 0.5em 0;
        width: 100%;
        color: #444;
}

tfoot input.search_init {
        color: #999;
}

td.group {
        background-color: #d1cfd0;
        border-bottom: 2px solid #A19B9E;
        border-top: 2px solid #A19B9E;
}

td.details {
        background-color: #d1cfd0;
        border: 2px solid #A19B9E;
}


.example_alt_pagination div.dataTables_info {
        width: 40%;
}

.paging_full_numbers a.paginate_button,
        .paging_full_numbers a.paginate_active {
        border: 1px solid #aaa;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        padding: 2px 5px;
        margin: 0 3px;
        cursor: pointer;
        *cursor: hand;
        color: #333 !important;
}

.paging_full_numbers a.paginate_button {
        background-color: #ddd;
}

.paging_full_numbers a.paginate_button:hover {
        background-color: #ccc;
        text-decoration: none !important;
}

.paging_full_numbers a.paginate_active {
        background-color: #99B3FF;
}

table.display tr.even.row_selected td {
        background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
        background-color: #9FAFD1;
}


/*
 * Sorting classes for columns
 */
/* For the standard odd/even */
tr.odd td.sorting_1 {
        background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
        background-color: #DADCFF;
}

tr.odd td.sorting_3 {
        background-color: #E0E2FF;
}

tr.even td.sorting_1 {
        background-color: #EAEBFF;
}

tr.even td.sorting_2 {
        background-color: #F2F3FF;
}

tr.even td.sorting_3 {
        background-color: #F9F9FF;
}


/* For the Conditional-CSS grading rows */
/*
        Colour calculations (based off the main row colours)
  Level 1:
                dd > c4
                ee > d5
        Level 2:
          dd > d1
          ee > e2
 */
tr.odd.gradeA td.sorting_1 {
        background-color: #c4ffc4;
}

tr.odd.gradeA td.sorting_2 {
        background-color: #d1ffd1;
}

tr.odd.gradeA td.sorting_3 {
        background-color: #d1ffd1;
}

tr.even.gradeA td.sorting_1 {
        background-color: #d5ffd5;
}

tr.even.gradeA td.sorting_2 {
        background-color: #e2ffe2;
}

tr.even.gradeA td.sorting_3 {
        background-color: #e2ffe2;
}

tr.odd.gradeC td.sorting_1 {
        background-color: #c4c4ff;
}

tr.odd.gradeC td.sorting_2 {
        background-color: #d1d1ff;
}

tr.odd.gradeC td.sorting_3 {
        background-color: #d1d1ff;
}

tr.even.gradeC td.sorting_1 {
        background-color: #d5d5ff;
}

tr.even.gradeC td.sorting_2 {
        background-color: #e2e2ff;
}

tr.even.gradeC td.sorting_3 {
        background-color: #e2e2ff;
}

tr.odd.gradeX td.sorting_1 {
        background-color: #ffc4c4;
}

tr.odd.gradeX td.sorting_2 {
        background-color: #ffd1d1;
}

tr.odd.gradeX td.sorting_3 {
        background-color: #ffd1d1;
}

tr.even.gradeX td.sorting_1 {
        background-color: #ffd5d5;
}

tr.even.gradeX td.sorting_2 {
        background-color: #ffe2e2;
}

tr.even.gradeX td.sorting_3 {
        background-color: #ffe2e2;
}

tr.odd.gradeU td.sorting_1 {
        background-color: #c4c4c4;
}

tr.odd.gradeU td.sorting_2 {
        background-color: #d1d1d1;
}

tr.odd.gradeU td.sorting_3 {
        background-color: #d1d1d1;
}

tr.even.gradeU td.sorting_1 {
        background-color: #d5d5d5;
}

tr.even.gradeU td.sorting_2 {
        background-color: #e2e2e2;
}

tr.even.gradeU td.sorting_3 {
        background-color: #e2e2e2;
}


/*
 * Row highlighting example
 */
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
        background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
        background-color: #E6FF99;
}
1	/*
2	* File: demo_table_jui.css
3	* CVS: $Id$
4	* Description: CSS descriptions for DataTables demo pages
5	* Author: Allan Jardine
6	* Created: Tue May 12 06:47:22 BST 2009
7	* Modified: $Date$ by $Author$
8	* Language: CSS
9	* Project: DataTables
10	*
11	* Copyright 2009 Allan Jardine. All Rights Reserved.
12	*
13	* ***************************************************************************
14	* DESCRIPTION
15	*
16	* The styles given here are suitable for the demos that are used with the standard DataTables
17	* distribution (see www.datatables.net). You will most likely wish to modify these styles to
18	* meet the layout requirements of your site.
19	*
20	* Common issues:
21	* 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
22	* no conflict between the two pagination types. If you want to use full_numbers pagination
23	* ensure that you either have "example_alt_pagination" as a body class name, or better yet,
24	* modify that selector.
25	* Note that the path used for Images is relative. All images are by default located in
26	* ../images/ - relative to this CSS file.
27	*/
28
29
30	/*
31	* jQuery UI specific styling
32	*/
33
34	.paging_two_button .ui-button {
35	float: left;
36	cursor: pointer;
37	* cursor: hand;
38	}
39
40	.paging_full_numbers .ui-button {
41	padding: 2px 6px;
42	margin: 0;
43	cursor: pointer;
44	* cursor: hand;
45	color: #333 !important;
46	}
47
48	.dataTables_paginate .ui-button {
49	margin-right: -0.1em !important;
50	}
51
52	.paging_full_numbers {
53	width: 350px !important;
54	}
55
56	.dataTables_wrapper .ui-toolbar {
57	padding: 5px;
58	}
59
60	.dataTables_paginate {
61	width: auto;
62	}
63
64	.dataTables_info {
65	padding-top: 3px;
66	}
67
68	table.display thead th {
69	padding: 3px 0px 3px 10px;
70	cursor: pointer;
71	* cursor: hand;
72	}
73
74	div.dataTables_wrapper .ui-widget-header {
75	font-weight: normal;
76	}
77
78
79	/*
80	* Sort arrow icon positioning
81	*/
82	table.display thead th div.DataTables_sort_wrapper {
83	position: relative;
84	padding-right: 20px;
85	}
86
87	table.display thead th div.DataTables_sort_wrapper span {
88	position: absolute;
89	top: 50%;
90	margin-top: -8px;
91	right: 0;
92	}
93
94
95
96
97	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
98	*
99	* Everything below this line is the same as demo_table.css. This file is
100	* required for 'cleanliness' of the markup
101	*
102	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
103
104
105
106	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
107	* DataTables features
108	*/
109
110	.dataTables_wrapper {
111	position: relative;
112	clear: both;
113	}
114
115	.dataTables_processing {
116	position: absolute;
117	top: 0px;
118	left: 50%;
119	width: 250px;
120	margin-left: -125px;
121	border: 1px solid #ddd;
122	text-align: center;
123	color: #999;
124	font-size: 11px;
125	padding: 2px 0;
126	}
127
128	.dataTables_length {
129	width: 40%;
130	float: left;
131	}
132
133	.dataTables_filter {
134	width: 50%;
135	float: right;
136	text-align: right;
137	}
138
139	.dataTables_info {
140	width: 50%;
141	float: left;
142	}
143
144	.dataTables_paginate {
145	float: right;
146	text-align: right;
147	}
148
149
150
151	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
152	* DataTables display
153	*/
154	table.display {
155	margin: 0 auto;
156	width: 100%;
157	clear: both;
158	border-collapse: collapse;
159	}
160
161	table.display tfoot th {
162	padding: 3px 0px 3px 10px;
163	font-weight: bold;
164	font-weight: normal;
165	}
166
167	table.display tr.heading2 td {
168	border-bottom: 1px solid #aaa;
169	}
170
171	table.display td {
172	padding: 3px 10px;
173	}
174
175	table.display td.center {
176	text-align: center;
177	}
178
179
180
181	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
182	* DataTables sorting
183	*/
184
185	.sorting_asc {
186	background: url('../images/sort_asc.png') no-repeat center right;
187	}
188
189	.sorting_desc {
190	background: url('../images/sort_desc.png') no-repeat center right;
191	}
192
193	.sorting {
194	background: url('../images/sort_both.png') no-repeat center right;
195	}
196
197	.sorting_asc_disabled {
198	background: url('../images/sort_asc_disabled.png') no-repeat center right;
199	}
200
201	.sorting_desc_disabled {
202	background: url('../images/sort_desc_disabled.png') no-repeat center right;
203	}
204
205
206
207
208	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
209	* DataTables row classes
210	*/
211	table.display tr.odd.gradeA {
212	background-color: #ddffdd;
213	}
214
215	table.display tr.even.gradeA {
216	background-color: #eeffee;
217	}
218
219
220
221
222	table.display tr.odd.gradeA {
223	background-color: #ddffdd;
224	}
225
226	table.display tr.even.gradeA {
227	background-color: #eeffee;
228	}
229
230	table.display tr.odd.gradeC {
231	background-color: #ddddff;
232	}
233
234	table.display tr.even.gradeC {
235	background-color: #eeeeff;
236	}
237
238	table.display tr.odd.gradeX {
239	background-color: #ffdddd;
240	}
241
242	table.display tr.even.gradeX {
243	background-color: #ffeeee;
244	}
245
246	table.display tr.odd.gradeU {
247	background-color: #ddd;
248	}
249
250	table.display tr.even.gradeU {
251	background-color: #eee;
252	}
253
254
255	tr.odd {
256	background-color: #E2E4FF;
257	}
258
259	tr.even {
260	background-color: white;
261	}
262
263
264
265
266
267	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
268	* Misc
269	*/
270	.dataTables_scroll {
271	clear: both;
272	}
273
274	.dataTables_scrollBody {
275	-webkit-overflow-scrolling: touch;
276	}
277
278	.top, .bottom {
279	padding: 15px;
280	background-color: #F5F5F5;
281	border: 1px solid #CCCCCC;
282	}
283
284	.top .dataTables_info {
285	float: none;
286	}
287
288	.clear {
289	clear: both;
290	}
291
292	.dataTables_empty {
293	text-align: center;
294	}
295
296	tfoot input {
297	margin: 0.5em 0;
298	width: 100%;
299	color: #444;
300	}
301
302	tfoot input.search_init {
303	color: #999;
304	}
305
306	td.group {
307	background-color: #d1cfd0;
308	border-bottom: 2px solid #A19B9E;
309	border-top: 2px solid #A19B9E;
310	}
311
312	td.details {
313	background-color: #d1cfd0;
314	border: 2px solid #A19B9E;
315	}
316
317
318	.example_alt_pagination div.dataTables_info {
319	width: 40%;
320	}
321
322	.paging_full_numbers a.paginate_button,
323	.paging_full_numbers a.paginate_active {
324	border: 1px solid #aaa;
325	-webkit-border-radius: 5px;
326	-moz-border-radius: 5px;
327	padding: 2px 5px;
328	margin: 0 3px;
329	cursor: pointer;
330	*cursor: hand;
331	color: #333 !important;
332	}
333
334	.paging_full_numbers a.paginate_button {
335	background-color: #ddd;
336	}
337
338	.paging_full_numbers a.paginate_button:hover {
339	background-color: #ccc;
340	text-decoration: none !important;
341	}
342
343	.paging_full_numbers a.paginate_active {
344	background-color: #99B3FF;
345	}
346
347	table.display tr.even.row_selected td {
348	background-color: #B0BED9;
349	}
350
351	table.display tr.odd.row_selected td {
352	background-color: #9FAFD1;
353	}
354
355
356	/*
357	* Sorting classes for columns
358	*/
359	/* For the standard odd/even */
360	tr.odd td.sorting_1 {
361	background-color: #D3D6FF;
362	}
363
364	tr.odd td.sorting_2 {
365	background-color: #DADCFF;
366	}
367
368	tr.odd td.sorting_3 {
369	background-color: #E0E2FF;
370	}
371
372	tr.even td.sorting_1 {
373	background-color: #EAEBFF;
374	}
375
376	tr.even td.sorting_2 {
377	background-color: #F2F3FF;
378	}
379
380	tr.even td.sorting_3 {
381	background-color: #F9F9FF;
382	}
383
384
385	/* For the Conditional-CSS grading rows */
386	/*
387	Colour calculations (based off the main row colours)
388	Level 1:
389	dd > c4
390	ee > d5
391	Level 2:
392	dd > d1
393	ee > e2
394	*/
395	tr.odd.gradeA td.sorting_1 {
396	background-color: #c4ffc4;
397	}
398
399	tr.odd.gradeA td.sorting_2 {
400	background-color: #d1ffd1;
401	}
402
403	tr.odd.gradeA td.sorting_3 {
404	background-color: #d1ffd1;
405	}
406
407	tr.even.gradeA td.sorting_1 {
408	background-color: #d5ffd5;
409	}
410
411	tr.even.gradeA td.sorting_2 {
412	background-color: #e2ffe2;
413	}
414
415	tr.even.gradeA td.sorting_3 {
416	background-color: #e2ffe2;
417	}
418
419	tr.odd.gradeC td.sorting_1 {
420	background-color: #c4c4ff;
421	}
422
423	tr.odd.gradeC td.sorting_2 {
424	background-color: #d1d1ff;
425	}
426
427	tr.odd.gradeC td.sorting_3 {
428	background-color: #d1d1ff;
429	}
430
431	tr.even.gradeC td.sorting_1 {
432	background-color: #d5d5ff;
433	}
434
435	tr.even.gradeC td.sorting_2 {
436	background-color: #e2e2ff;
437	}
438
439	tr.even.gradeC td.sorting_3 {
440	background-color: #e2e2ff;
441	}
442
443	tr.odd.gradeX td.sorting_1 {
444	background-color: #ffc4c4;
445	}
446
447	tr.odd.gradeX td.sorting_2 {
448	background-color: #ffd1d1;
449	}
450
451	tr.odd.gradeX td.sorting_3 {
452	background-color: #ffd1d1;
453	}
454
455	tr.even.gradeX td.sorting_1 {
456	background-color: #ffd5d5;
457	}
458
459	tr.even.gradeX td.sorting_2 {
460	background-color: #ffe2e2;
461	}
462
463	tr.even.gradeX td.sorting_3 {
464	background-color: #ffe2e2;
465	}
466
467	tr.odd.gradeU td.sorting_1 {
468	background-color: #c4c4c4;
469	}
470
471	tr.odd.gradeU td.sorting_2 {
472	background-color: #d1d1d1;
473	}
474
475	tr.odd.gradeU td.sorting_3 {
476	background-color: #d1d1d1;
477	}
478
479	tr.even.gradeU td.sorting_1 {
480	background-color: #d5d5d5;
481	}
482
483	tr.even.gradeU td.sorting_2 {
484	background-color: #e2e2e2;
485	}
486
487	tr.even.gradeU td.sorting_3 {
488	background-color: #e2e2e2;
489	}
490
491
492	/*
493	* Row highlighting example
494	*/
495	.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
496	background-color: #ECFFB3;
497	}
498
499	.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
500	background-color: #E6FF99;
501	}