| /* | /* |
| * File: demo_table.css | * File: demo_table.css |
| * CVS: $Id$ | * CVS: $Id$ |
| * Description: CSS descriptions for DataTables demo pages | * Description: CSS descriptions for DataTables demo pages |
| * Author: Allan Jardine | * Author: Allan Jardine |
| * Created: Tue May 12 06:47:22 BST 2009 | * Created: Tue May 12 06:47:22 BST 2009 |
| * Modified: $Date$ by $Author$ | * Modified: $Date$ by $Author$ |
| * Language: CSS | * Language: CSS |
| * Project: DataTables | * Project: DataTables |
| * | * |
| * Copyright 2009 Allan Jardine. All Rights Reserved. | * Copyright 2009 Allan Jardine. All Rights Reserved. |
| * | * |
| * *************************************************************************** | * *************************************************************************** |
| * DESCRIPTION | * DESCRIPTION |
| * | * |
| * The styles given here are suitable for the demos that are used with the standard DataTables | * 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 | * distribution (see www.datatables.net). You will most likely wish to modify these styles to |
| * meet the layout requirements of your site. | * meet the layout requirements of your site. |
| * | * |
| * Common issues: | * Common issues: |
| * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is | * '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 | * 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, | * ensure that you either have "example_alt_pagination" as a body class name, or better yet, |
| * modify that selector. | * modify that selector. |
| * Note that the path used for Images is relative. All images are by default located in | * Note that the path used for Images is relative. All images are by default located in |
| * ../images/ - relative to this CSS file. | * ../images/ - relative to this CSS file. |
| */ | */ |
| /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
| * DataTables features | * DataTables features |
| */ | */ |
| .dataTables_wrapper { | .dataTables_wrapper { |
| position: relative; | position: relative; |
| min-height: 302px; | /*min-height: 302px;*/ |
| clear: both; | clear: both; |
| _height: 302px; | /*_height: 302px;*/ |
| zoom: 1; /* Feeling sorry for IE */ | zoom: 1; /* Feeling sorry for IE */ |
| } | } |
| .dataTables_processing { | .dataTables_processing { |
| position: absolute; | position: absolute; |
| top: 50%; | top: 50%; |
| left: 50%; | left: 50%; |
| width: 250px; | width: 250px; |
| height: 30px; | height: 30px; |
| margin-left: -125px; | margin-left: -125px; |
| margin-top: -15px; | margin-top: -15px; |
| padding: 14px 0 2px 0; | padding: 14px 0 2px 0; |
| border: 1px solid #ddd; | border: 1px solid #ddd; |
| text-align: center; | text-align: center; |
| color: #999; | color: #999; |
| font-size: 14px; | font-size: 14px; |
| background-color: white; | background-color: white; |
| } | } |
| /*.dataTables_length {*/ | /*.dataTables_length {*/ |
| /* width: 40%;*/ | /* width: 40%;*/ |
| /* float: left;*/ | /* float: left;*/ |
| /*}*/ | /*}*/ |
| /**/ | /**/ |
| /*.dataTables_filter {*/ | /*.dataTables_filter {*/ |
| /* width: 50%;*/ | /* width: 50%;*/ |
| /* float: right;*/ | /* float: right;*/ |
| /* text-align: right;*/ | /* text-align: right;*/ |
| /*}*/ | /*}*/ |
| .dataTables_info { | .dataTables_info { |
| width: 60%; | width: 60%; |
| float: left; | float: left; |
| } | } |
| .dataTables_paginate { | .dataTables_paginate { |
| width: 44px; | width: 44px; |
| * width: 50px; | * width: 50px; |
| float: right; | float: right; |
| text-align: right; | text-align: right; |
| } | } |
| /* Pagination nested */ | /* Pagination nested */ |
| .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { | .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { |
| height: 19px; | height: 19px; |
| width: 19px; | width: 19px; |
| margin-left: 3px; | margin-left: 3px; |
| float: left; | float: left; |
| } | } |
| .paginate_disabled_previous { | .paginate_disabled_previous { |
| background-image: url('../images/back_disabled.jpg'); | background-image: url('../images/back_disabled.jpg'); |
| } | } |
| .paginate_enabled_previous { | .paginate_enabled_previous { |
| background-image: url('../images/back_enabled.jpg'); | background-image: url('../images/back_enabled.jpg'); |
| } | } |
| .paginate_disabled_next { | .paginate_disabled_next { |
| background-image: url('../images/forward_disabled.jpg'); | background-image: url('../images/forward_disabled.jpg'); |
| } | } |
| .paginate_enabled_next { | .paginate_enabled_next { |
| background-image: url('../images/forward_enabled.jpg'); | background-image: url('../images/forward_enabled.jpg'); |
| } | } |
| /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
| * DataTables display | * DataTables display |
| */ | */ |
| table.display { | table.display { |
| margin: 0 auto; | margin: 0 auto; |
| clear: both; | clear: both; |
| width: 100%; | width: 100%; |
| /* Note Firefox 3.5 and before have a bug with border-collapse | /* Note Firefox 3.5 and before have a bug with border-collapse |
| * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) | * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) |
| * border-spacing: 0; is one possible option. Conditional-css.com is | * border-spacing: 0; is one possible option. Conditional-css.com is |
| * useful for this kind of thing | * useful for this kind of thing |
| * | * |
| * Further note IE 6/7 has problems when calculating widths with border width. | * Further note IE 6/7 has problems when calculating widths with border width. |
| * It subtracts one px relative to the other browsers from the first column, and | * It subtracts one px relative to the other browsers from the first column, and |
| * adds one to the end... | * adds one to the end... |
| * | * |
| * If you want that effect I'd suggest setting a border-top/left on th/td's and | * If you want that effect I'd suggest setting a border-top/left on th/td's and |
| * then filling in the gaps with other borders. | * then filling in the gaps with other borders. |
| */ | */ |
| } | } |
| table.display thead th { | table.display thead th { |
| padding: 3px 18px 3px 10px; | padding: 3px 18px 3px 10px; |
| border-bottom: 1px solid black; | border-bottom: 1px solid black; |
| font-weight: bold; | font-weight: bold; |
| cursor: pointer; | cursor: pointer; |
| * cursor: hand; | * cursor: hand; |
| } | } |
| table.display tfoot th { | table.display tfoot th { |
| padding: 3px 18px 3px 10px; | padding: 3px 18px 3px 10px; |
| border-top: 1px solid black; | border-top: 1px solid black; |
| font-weight: bold; | font-weight: bold; |
| } | } |
| table.display tr.heading2 td { | table.display tr.heading2 td { |
| border-bottom: 1px solid #aaa; | border-bottom: 1px solid #aaa; |
| } | } |
| table.display td { | table.display td { |
| padding: 3px 10px; | padding: 3px 10px; |
| } | } |
| table.display td.center { | table.display td.center { |
| text-align: center; | text-align: center; |
| } | } |
| /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
| * DataTables sorting | * DataTables sorting |
| */ | */ |
| .sorting_asc { | .sorting_asc { |
| background: url('../images/sort_asc.png') no-repeat center right; | background: url('../images/sort_asc.png') no-repeat center right; |
| } | } |
| .sorting_desc { | .sorting_desc { |
| background: url('../images/sort_desc.png') no-repeat center right; | background: url('../images/sort_desc.png') no-repeat center right; |
| } | } |
| .sorting { | .sorting { |
| background: url('../images/sort_both.png') no-repeat center right; | background: url('../images/sort_both.png') no-repeat center right; |
| } | } |
| .sorting_asc_disabled { | .sorting_asc_disabled { |
| background: url('../images/sort_asc_disabled.png') no-repeat center right; | background: url('../images/sort_asc_disabled.png') no-repeat center right; |
| } | } |
| .sorting_desc_disabled { | .sorting_desc_disabled { |
| background: url('../images/sort_desc_disabled.png') no-repeat center right; | background: url('../images/sort_desc_disabled.png') no-repeat center right; |
| } | } |
| /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
| * DataTables row classes | * DataTables row classes |
| */ | */ |
| table.display tr.odd.gradeA { | table.display tr.odd.gradeA { |
| background-color: #ddffdd; | background-color: #ddffdd; |
| } | } |
| table.display tr.even.gradeA { | table.display tr.even.gradeA { |
| background-color: #eeffee; | background-color: #eeffee; |
| } | } |
| table.display tr.odd.gradeC { | table.display tr.odd.gradeC { |
| background-color: #ddddff; | background-color: #ddddff; |
| } | } |
| table.display tr.even.gradeC { | table.display tr.even.gradeC { |
| background-color: #eeeeff; | background-color: #eeeeff; |
| } | } |
| table.display tr.odd.gradeX { | table.display tr.odd.gradeX { |
| background-color: #ffdddd; | background-color: #ffdddd; |
| } | } |
| table.display tr.even.gradeX { | table.display tr.even.gradeX { |
| background-color: #ffeeee; | background-color: #ffeeee; |
| } | } |
| table.display tr.odd.gradeU { | table.display tr.odd.gradeU { |
| background-color: #ddd; | background-color: #ddd; |
| } | } |
| table.display tr.even.gradeU { | table.display tr.even.gradeU { |
| background-color: #eee; | background-color: #eee; |
| } | } |
| tr.odd { | tr.odd { |
| background-color: #E2E4FF; | background-color: #E2E4FF; |
| } | } |
| tr.even { | tr.even { |
| background-color: white; | background-color: white; |
| } | } |
| /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * |
| * Misc | * Misc |
| */ | */ |
| .dataTables_scroll { | .dataTables_scroll { |
| clear: both; | clear: both; |
| } | } |
| .dataTables_scrollBody { | .dataTables_scrollBody { |
| *margin-top: -1px; | *margin-top: -1px; |
| } | } |
| .top, .bottom { | .top, .bottom { |
| padding: 15px; | padding: 15px; |
| background-color: #F5F5F5; | background-color: #F5F5F5; |
| border: 1px solid #CCCCCC; | border: 1px solid #CCCCCC; |
| } | } |
| .top .dataTables_info { | .top .dataTables_info { |
| float: none; | float: none; |
| } | } |
| .clear { | .clear { |
| clear: both; | clear: both; |
| } | } |
| .dataTables_empty { | .dataTables_empty { |
| text-align: center; | text-align: center; |
| } | } |
| tfoot input { | tfoot input { |
| margin: 0.5em 0; | margin: 0.5em 0; |
| width: 100%; | width: 100%; |
| color: #444; | color: #444; |
| } | } |
| tfoot input.search_init { | tfoot input.search_init { |
| color: #999; | color: #999; |
| } | } |
| td.group { | td.group { |
| background-color: #d1cfd0; | background-color: #d1cfd0; |
| border-bottom: 2px solid #A19B9E; | border-bottom: 2px solid #A19B9E; |
| border-top: 2px solid #A19B9E; | border-top: 2px solid #A19B9E; |
| } | } |
| td.details { | td.details { |
| background-color: #d1cfd0; | background-color: #d1cfd0; |
| border: 2px solid #A19B9E; | border: 2px solid #A19B9E; |
| } | } |
| .example_alt_pagination div.dataTables_info { | .example_alt_pagination div.dataTables_info { |
| width: 40%; | width: 40%; |
| } | } |
| .paging_full_numbers { | .paging_full_numbers { |
| width: 400px; | width: 400px; |
| height: 22px; | height: 22px; |
| line-height: 22px; | line-height: 22px; |
| } | } |
| .paging_full_numbers span.paginate_button, | .paging_full_numbers span.paginate_button, |
| .paging_full_numbers span.paginate_active { | .paging_full_numbers span.paginate_active { |
| border: 1px solid #aaa; | border: 1px solid #aaa; |
| -webkit-border-radius: 5px; | -webkit-border-radius: 5px; |
| -moz-border-radius: 5px; | -moz-border-radius: 5px; |
| padding: 2px 5px; | padding: 2px 5px; |
| margin: 0 3px; | margin: 0 3px; |
| cursor: pointer; | cursor: pointer; |
| *cursor: hand; | *cursor: hand; |
| } | } |
| .paging_full_numbers span.paginate_button { | .paging_full_numbers span.paginate_button { |
| background-color: #ddd; | background-color: #ddd; |
| } | } |
| .paging_full_numbers span.paginate_button:hover { | .paging_full_numbers span.paginate_button:hover { |
| background-color: #ccc; | background-color: #ccc; |
| } | } |
| .paging_full_numbers span.paginate_active { | .paging_full_numbers span.paginate_active { |
| background-color: #99B3FF; | background-color: #99B3FF; |
| } | } |
| table.display tr.even.row_selected td { | table.display tr.even.row_selected td { |
| background-color: #B0BED9; | background-color: #B0BED9; |
| } | } |
| table.display tr.odd.row_selected td { | table.display tr.odd.row_selected td { |
| background-color: #9FAFD1; | background-color: #9FAFD1; |
| } | } |
| /* | /* |
| * Sorting classes for columns | * Sorting classes for columns |
| */ | */ |
| /* For the standard odd/even */ | /* For the standard odd/even */ |
| tr.odd td.sorting_1 { | tr.odd td.sorting_1 { |
| background-color: #D3D6FF; | background-color: #D3D6FF; |
| } | } |
| tr.odd td.sorting_2 { | tr.odd td.sorting_2 { |
| background-color: #DADCFF; | background-color: #DADCFF; |
| } | } |
| tr.odd td.sorting_3 { | tr.odd td.sorting_3 { |
| background-color: #E0E2FF; | background-color: #E0E2FF; |
| } | } |
| tr.even td.sorting_1 { | tr.even td.sorting_1 { |
| background-color: #EAEBFF; | background-color: #EAEBFF; |
| } | } |
| tr.even td.sorting_2 { | tr.even td.sorting_2 { |
| background-color: #F2F3FF; | background-color: #F2F3FF; |
| } | } |
| tr.even td.sorting_3 { | tr.even td.sorting_3 { |
| background-color: #F9F9FF; | background-color: #F9F9FF; |
| } | } |
| /* For the Conditional-CSS grading rows */ | /* For the Conditional-CSS grading rows */ |
| /* | /* |
| Colour calculations (based off the main row colours) | Colour calculations (based off the main row colours) |
| Level 1: | Level 1: |
| dd > c4 | dd > c4 |
| ee > d5 | ee > d5 |
| Level 2: | Level 2: |
| dd > d1 | dd > d1 |
| ee > e2 | ee > e2 |
| */ | */ |
| tr.odd.gradeA td.sorting_1 { | tr.odd.gradeA td.sorting_1 { |
| background-color: #c4ffc4; | background-color: #c4ffc4; |
| } | } |
| tr.odd.gradeA td.sorting_2 { | tr.odd.gradeA td.sorting_2 { |
| background-color: #d1ffd1; | background-color: #d1ffd1; |
| } | } |
| tr.odd.gradeA td.sorting_3 { | tr.odd.gradeA td.sorting_3 { |
| background-color: #d1ffd1; | background-color: #d1ffd1; |
| } | } |
| tr.even.gradeA td.sorting_1 { | tr.even.gradeA td.sorting_1 { |
| background-color: #d5ffd5; | background-color: #d5ffd5; |
| } | } |
| tr.even.gradeA td.sorting_2 { | tr.even.gradeA td.sorting_2 { |
| background-color: #e2ffe2; | background-color: #e2ffe2; |
| } | } |
| tr.even.gradeA td.sorting_3 { | tr.even.gradeA td.sorting_3 { |
| background-color: #e2ffe2; | background-color: #e2ffe2; |
| } | } |
| tr.odd.gradeC td.sorting_1 { | tr.odd.gradeC td.sorting_1 { |
| background-color: #c4c4ff; | background-color: #c4c4ff; |
| } | } |
| tr.odd.gradeC td.sorting_2 { | tr.odd.gradeC td.sorting_2 { |
| background-color: #d1d1ff; | background-color: #d1d1ff; |
| } | } |
| tr.odd.gradeC td.sorting_3 { | tr.odd.gradeC td.sorting_3 { |
| background-color: #d1d1ff; | background-color: #d1d1ff; |
| } | } |
| tr.even.gradeC td.sorting_1 { | tr.even.gradeC td.sorting_1 { |
| background-color: #d5d5ff; | background-color: #d5d5ff; |
| } | } |
| tr.even.gradeC td.sorting_2 { | tr.even.gradeC td.sorting_2 { |
| background-color: #e2e2ff; | background-color: #e2e2ff; |
| } | } |
| tr.even.gradeC td.sorting_3 { | tr.even.gradeC td.sorting_3 { |
| background-color: #e2e2ff; | background-color: #e2e2ff; |
| } | } |
| tr.odd.gradeX td.sorting_1 { | tr.odd.gradeX td.sorting_1 { |
| background-color: #ffc4c4; | background-color: #ffc4c4; |
| } | } |
| tr.odd.gradeX td.sorting_2 { | tr.odd.gradeX td.sorting_2 { |
| background-color: #ffd1d1; | background-color: #ffd1d1; |
| } | } |
| tr.odd.gradeX td.sorting_3 { | tr.odd.gradeX td.sorting_3 { |
| background-color: #ffd1d1; | background-color: #ffd1d1; |
| } | } |
| tr.even.gradeX td.sorting_1 { | tr.even.gradeX td.sorting_1 { |
| background-color: #ffd5d5; | background-color: #ffd5d5; |
| } | } |
| tr.even.gradeX td.sorting_2 { | tr.even.gradeX td.sorting_2 { |
| background-color: #ffe2e2; | background-color: #ffe2e2; |
| } | } |
| tr.even.gradeX td.sorting_3 { | tr.even.gradeX td.sorting_3 { |
| background-color: #ffe2e2; | background-color: #ffe2e2; |
| } | } |
| tr.odd.gradeU td.sorting_1 { | tr.odd.gradeU td.sorting_1 { |
| background-color: #c4c4c4; | background-color: #c4c4c4; |
| } | } |
| tr.odd.gradeU td.sorting_2 { | tr.odd.gradeU td.sorting_2 { |
| background-color: #d1d1d1; | background-color: #d1d1d1; |
| } | } |
| tr.odd.gradeU td.sorting_3 { | tr.odd.gradeU td.sorting_3 { |
| background-color: #d1d1d1; | background-color: #d1d1d1; |
| } | } |