Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
7283 kshitij.so 1 
/*
2 
 *  File:         demo_table.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 
 * DataTables features
31 
 */
32 
 
33 
.dataTables_wrapper {
34 
	position: relative;
35 
	clear: both;
36 
	zoom: 1; /* Feeling sorry for IE */
37 
}
38 
 
39 
.dataTables_processing {
40 
	position: absolute;
41 
	top: 50%;
42 
	left: 50%;
43 
	width: 250px;
44 
	height: 30px;
45 
	margin-left: -125px;
46 
	margin-top: -15px;
47 
	padding: 14px 0 2px 0;
48 
	border: 1px solid #ddd;
49 
	text-align: center;
50 
	color: #999;
51 
	font-size: 14px;
52 
	background-color: white;
53 
}
54 
 
55 
.dataTables_length {
56 
	width: 40%;
57 
	float: left;
58 
        padding: 10px;
59 
}
60 
 
61 
.dataTables_filter {
62 
	width: 14%;
63 
	float: right;
64 
	text-align: right;
65 
        margin-top: 12px;
66 
        margin-bottom: 12px;
67 
}
68 
 
69 
.dataTables_info {
70 
	width: 60%;
71 
	float: left;
72 
}
73 
 
74 
.dataTables_paginate {
75 
	float: right;
76 
	text-align: right;
77 
}
78 
 
79 
/* Pagination nested */
80 
.paginate_disabled_previous, .paginate_enabled_previous,
81 
.paginate_disabled_next, .paginate_enabled_next {
82 
	height: 19px;
83 
	float: left;
84 
	cursor: pointer;
85 
	*cursor: hand;
86 
	color: #111 !important;
87 
}
88 
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
89 
.paginate_disabled_next:hover, .paginate_enabled_next:hover {
90 
	text-decoration: none !important;
91 
}
92 
.paginate_disabled_previous:active, .paginate_enabled_previous:active,
93 
.paginate_disabled_next:active, .paginate_enabled_next:active {
94 
	outline: none;
95 
}
96 
 
97 
.paginate_disabled_previous,
98 
.paginate_disabled_next {
99 
	color: #666 !important;
100 
}
101 
.paginate_disabled_previous, .paginate_enabled_previous {
102 
	padding-left: 23px;
103 
}
104 
.paginate_disabled_next, .paginate_enabled_next {
105 
	padding-right: 23px;
106 
	margin-left: 10px;
107 
}
108 
 
109 
.paginate_disabled_previous {
110 
	background: url('../images/back_disabled.png') no-repeat top left;
111 
}
112 
 
113 
.paginate_enabled_previous {
114 
	background: url('../images/back_enabled.png') no-repeat top left;
115 
}
116 
.paginate_enabled_previous:hover {
117 
	background: url('../images/back_enabled_hover.png') no-repeat top left;
118 
}
119 
 
120 
.paginate_disabled_next {
121 
	background: url('../images/forward_disabled.png') no-repeat top right;
122 
}
123 
 
124 
.paginate_enabled_next {
125 
	background: url('../images/forward_enabled.png') no-repeat top right;
126 
}
127 
.paginate_enabled_next:hover {
128 
	background: url('../images/forward_enabled_hover.png') no-repeat top right;
129 
}
130 
 
131 
 
132 
 
133 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
134 
 * DataTables display
135 
 */
136 
table.display {
137 
	margin: 0 auto;
138 
	clear: both;
139 
	width: 100%;
140 
 
141 
	/* Note Firefox 3.5 and before have a bug with border-collapse
142 
	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
143 
	 * border-spacing: 0; is one possible option. Conditional-css.com is
144 
	 * useful for this kind of thing
145 
	 *
146 
	 * Further note IE 6/7 has problems when calculating widths with border width.
147 
	 * It subtracts one px relative to the other browsers from the first column, and
148 
	 * adds one to the end...
149 
	 *
150 
	 * If you want that effect I'd suggest setting a border-top/left on th/td's and
151 
	 * then filling in the gaps with other borders.
152 
	 */
153 
}
154 
 
155 
table.display thead th {
156 
	padding: 3px 18px 3px 10px;
157 
	border-bottom: 1px solid black;
158 
	font-weight: bold;
159 
	cursor: pointer;
160 
	* cursor: hand;
161 
}
162 
 
163 
table.display tfoot th {
164 
	padding: 3px 18px 3px 10px;
165 
	border-top: 1px solid black;
166 
	font-weight: bold;
167 
}
168 
 
169 
table.display tr.heading2 td {
170 
	border-bottom: 1px solid #aaa;
171 
}
172 
 
173 
table.display td {
174 
	padding: 3px 10px;
175 
}
176 
 
177 
table.display td.center {
178 
	text-align: center;
179 
}
180 
 
181 
 
182 
 
183 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
184 
 * DataTables sorting
185 
 */
186 
 
187 
.sorting_asc {
188 
	background: url('../images/sort_asc.png') no-repeat center right;
189 
}
190 
 
191 
.sorting_desc {
192 
	background: url('../images/sort_desc.png') no-repeat center right;
193 
}
194 
 
195 
.sorting {
196 
	background: url('../images/sort_both.png') no-repeat center right;
197 
}
198 
 
199 
.sorting_asc_disabled {
200 
	background: url('../images/sort_asc_disabled.png') no-repeat center right;
201 
}
202 
 
203 
.sorting_desc_disabled {
204 
	background: url('../images/sort_desc_disabled.png') no-repeat center right;
205 
}
206 
 
207 
table.display thead th:active,
208 
table.display thead td:active {
209 
	outline: none;
210 
}
211 
 
212 
 
213 
 
214 
 
215 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
216 
 * DataTables row classes
217 
 */
218 
table.display tr.odd.gradeA {
219 
	background-color: #ddffdd;
220 
}
221 
 
222 
table.display tr.even.gradeA {
223 
	background-color: #eeffee;
224 
}
225 
 
226 
table.display tr.odd.gradeC {
227 
	background-color: #ddddff;
228 
}
229 
 
230 
table.display tr.even.gradeC {
231 
	background-color: #eeeeff;
232 
}
233 
 
234 
table.display tr.odd.gradeX {
235 
	background-color: #ffdddd;
236 
}
237 
 
238 
table.display tr.even.gradeX {
239 
	background-color: #ffeeee;
240 
}
241 
 
242 
table.display tr.odd.gradeU {
243 
	background-color: #ddd;
244 
}
245 
 
246 
table.display tr.even.gradeU {
247 
	background-color: #eee;
248 
}
249 
 
250 
 
251 
tr.odd {
252 
	background-color: #E2E4FF;
253 
        height: 25px;
254 
        text-align : center;
255 
}
256 
 
257 
tr.even {
258 
	background-color: white;
259 
        height: 25px;
260 
        text-align: center;
261 
}
262 
 
263 
 
264 
 
265 
 
266 
 
267 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
268 
 * Misc
269 
 */
270 
.dataTables_scroll {
271 
	clear: both;
272 
}
273 
 
274 
.dataTables_scrollBody {
275 
	*margin-top: -1px;
276 
	-webkit-overflow-scrolling: touch;
277 
}
278 
 
279 
.top, .bottom {
280 
	padding: 15px;
281 
	background-color: #F5F5F5;
282 
	border: 1px solid #CCCCCC;
283 
}
284 
 
285 
.top .dataTables_info {
286 
	float: none;
287 
}
288 
 
289 
.clear {
290 
	clear: both;
291 
}
292 
 
293 
.dataTables_empty {
294 
	text-align: center;
295 
}
296 
 
297 
tfoot input {
298 
	margin: 0.5em 0;
299 
	width: 100%;
300 
	color: #444;
301 
}
302 
 
303 
tfoot input.search_init {
304 
	color: #999;
305 
}
306 
 
307 
td.group {
308 
	background-color: #d1cfd0;
309 
	border-bottom: 2px solid #A19B9E;
310 
	border-top: 2px solid #A19B9E;
311 
}
312 
 
313 
td.details {
314 
	background-color: #d1cfd0;
315 
	border: 2px solid #A19B9E;
316 
}
317 
 
318 
 
319 
.example_alt_pagination div.dataTables_info {
320 
	width: 40%;
321 
}
322 
 
323 
.paging_full_numbers {
324 
	width: 400px;
325 
	height: 22px;
326 
	line-height: 22px;
327 
}
328 
 
329 
.paging_full_numbers a:active {
330 
	outline: none
331 
}
332 
 
333 
.paging_full_numbers a:hover {
334 
	text-decoration: none;
335 
}
336 
 
337 
.paging_full_numbers a.paginate_button,
338 
 	.paging_full_numbers a.paginate_active {
339 
	border: 1px solid #aaa;
340 
	-webkit-border-radius: 5px;
341 
	-moz-border-radius: 5px;
342 
	padding: 2px 5px;
343 
	margin: 0 3px;
344 
	cursor: pointer;
345 
	*cursor: hand;
346 
	color: #333 !important;
347 
}
348 
 
349 
.paging_full_numbers a.paginate_button {
350 
	background-color: #ddd;
351 
}
352 
 
353 
.paging_full_numbers a.paginate_button:hover {
354 
	background-color: #ccc;
355 
	text-decoration: none !important;
356 
}
357 
 
358 
.paging_full_numbers a.paginate_active {
359 
	background-color: #99B3FF;
360 
}
361 
 
362 
table.display tr.even.row_selected td {
363 
	background-color: #B0BED9;
364 
}
365 
 
366 
table.display tr.odd.row_selected td {
367 
	background-color: #9FAFD1;
368 
}
369 
 
370 
 
371 
/*
372 
 * Sorting classes for columns
373 
 */
374 
/* For the standard odd/even */
375 
tr.odd td.sorting_1 {
376 
	background-color: #D3D6FF;
377 
}
378 
 
379 
tr.odd td.sorting_2 {
380 
	background-color: #DADCFF;
381 
}
382 
 
383 
tr.odd td.sorting_3 {
384 
	background-color: #E0E2FF;
385 
}
386 
 
387 
tr.even td.sorting_1 {
388 
	background-color: #EAEBFF;
389 
}
390 
 
391 
tr.even td.sorting_2 {
392 
	background-color: #F2F3FF;
393 
}
394 
 
395 
tr.even td.sorting_3 {
396 
	background-color: #F9F9FF;
397 
}
398 
 
399 
 
400 
/* For the Conditional-CSS grading rows */
401 
/*
402 
 	Colour calculations (based off the main row colours)
403 
  Level 1:
404 
		dd > c4
405 
		ee > d5
406 
	Level 2:
407 
	  dd > d1
408 
	  ee > e2
409 
 */
410 
tr.odd.gradeA td.sorting_1 {
411 
	background-color: #c4ffc4;
412 
}
413 
 
414 
tr.odd.gradeA td.sorting_2 {
415 
	background-color: #d1ffd1;
416 
}
417 
 
418 
tr.odd.gradeA td.sorting_3 {
419 
	background-color: #d1ffd1;
420 
}
421 
 
422 
tr.even.gradeA td.sorting_1 {
423 
	background-color: #d5ffd5;
424 
}
425 
 
426 
tr.even.gradeA td.sorting_2 {
427 
	background-color: #e2ffe2;
428 
}
429 
 
430 
tr.even.gradeA td.sorting_3 {
431 
	background-color: #e2ffe2;
432 
}
433 
 
434 
tr.odd.gradeC td.sorting_1 {
435 
	background-color: #c4c4ff;
436 
}
437 
 
438 
tr.odd.gradeC td.sorting_2 {
439 
	background-color: #d1d1ff;
440 
}
441 
 
442 
tr.odd.gradeC td.sorting_3 {
443 
	background-color: #d1d1ff;
444 
}
445 
 
446 
tr.even.gradeC td.sorting_1 {
447 
	background-color: #d5d5ff;
448 
}
449 
 
450 
tr.even.gradeC td.sorting_2 {
451 
	background-color: #e2e2ff;
452 
}
453 
 
454 
tr.even.gradeC td.sorting_3 {
455 
	background-color: #e2e2ff;
456 
}
457 
 
458 
tr.odd.gradeX td.sorting_1 {
459 
	background-color: #ffc4c4;
460 
}
461 
 
462 
tr.odd.gradeX td.sorting_2 {
463 
	background-color: #ffd1d1;
464 
}
465 
 
466 
tr.odd.gradeX td.sorting_3 {
467 
	background-color: #ffd1d1;
468 
}
469 
 
470 
tr.even.gradeX td.sorting_1 {
471 
	background-color: #ffd5d5;
472 
}
473 
 
474 
tr.even.gradeX td.sorting_2 {
475 
	background-color: #ffe2e2;
476 
}
477 
 
478 
tr.even.gradeX td.sorting_3 {
479 
	background-color: #ffe2e2;
480 
}
481 
 
482 
tr.odd.gradeU td.sorting_1 {
483 
	background-color: #c4c4c4;
484 
}
485 
 
486 
tr.odd.gradeU td.sorting_2 {
487 
	background-color: #d1d1d1;
488 
}
489 
 
490 
tr.odd.gradeU td.sorting_3 {
491 
	background-color: #d1d1d1;
492 
}
493 
 
494 
tr.even.gradeU td.sorting_1 {
495 
	background-color: #d5d5d5;
496 
}
497 
 
498 
tr.even.gradeU td.sorting_2 {
499 
	background-color: #e2e2e2;
500 
}
501 
 
502 
tr.even.gradeU td.sorting_3 {
503 
	background-color: #e2e2e2;
504 
}
505 
 
506 
 
507 
/*
508 
 * Row highlighting example
509 
 */
510 
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
511 
	background-color: #ECFFB3;
512 
}
513 
 
514 
.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
515 
	background-color: #E6FF99;
516 
}
517 
 
518 
.ex_highlight_row #example tr.even:hover {
519 
	background-color: #ECFFB3;
520 
}
521 
 
522 
.ex_highlight_row #example tr.even:hover td.sorting_1 {
523 
	background-color: #DDFF75;
524 
}
525 
 
526 
.ex_highlight_row #example tr.even:hover td.sorting_2 {
527 
	background-color: #E7FF9E;
528 
}
529 
 
530 
.ex_highlight_row #example tr.even:hover td.sorting_3 {
531 
	background-color: #E2FF89;
532 
}
533 
 
534 
.ex_highlight_row #example tr.odd:hover {
535 
	background-color: #E6FF99;
536 
}
537 
 
538 
.ex_highlight_row #example tr.odd:hover td.sorting_1 {
539 
	background-color: #D6FF5C;
540 
}
541 
 
542 
.ex_highlight_row #example tr.odd:hover td.sorting_2 {
543 
	background-color: #E0FF84;
544 
}
545 
 
546 
.ex_highlight_row #example tr.odd:hover td.sorting_3 {
547 
	background-color: #DBFF70;
548 
}
549 
 
550 
 
551 
/*
552 
 * KeyTable
553 
 */
554 
table.KeyTable td {
555 
	border: 3px solid transparent;
556 
}
557 
 
558 
table.KeyTable td.focus {
559 
	border: 3px solid #3366FF;
560 
}
561 
 
562 
table.display tr.gradeA {
563 
	background-color: #eeffee;
564 
}
565 
 
566 
table.display tr.gradeC {
567 
	background-color: #ddddff;
568 
}
569 
 
570 
table.display tr.gradeX {
571 
	background-color: #ffdddd;
572 
}
573 
 
574 
table.display tr.gradeU {
575 
	background-color: #ddd;
576 
}
577 
 
578 
div.box {
579 
	height: 100px;
580 
	padding: 10px;
581 
	overflow: auto;
582 
	border: 1px solid #8080FF;
583 
	background-color: #E5E5FF;
584 
}