/* * 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: 10px; } 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; 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 { background: url("../images/thead.png") repeat-x scroll left top #EEEEEE; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; position: relative; } .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 { padding: 10px; } .dataTables_toolbar { width: auto; margin-left: 2em; float: right; text-align: right; } .dataTables_filter { position: absolute; right: 5px; top: 11px; } .dataTables_info { } .dataTables_paginate { bottom: 7px; position: absolute; right: 8px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables display */ table.display { width: 100%; background: #fcfcfc; border-collapse: collapse; border: none; margin: 0 auto; clear: both; } table.display thead th, table.display tfoot td { padding: 5px 0px 5px 10px; color: #fff; font-weight: normal; text-align: left; background-color: #666; } table.display thead th a, table.display tfoot td a { color: #fff; } table.display thead th a { color: #fff; display: block; } table.display thead th.head0, table.display tfoot td.head0 { background-color: #666; } table.display thead th.head1, table.display tfoot td.head1 { background-color: #555; } table.display tr.heading2 td { border-bottom: 1px solid #aaa; } table.display tr:first-child td { border-top: 0; } table.display tr td { padding: 5px 10px; border-top: 1px solid #ddd; } table.display td.center { text-align: center; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables sorting */ table.display thead th a { background-image: url(../images/sort_both.png); background-repeat: no-repeat; background-position: right 1px; } table.display thead th a.asc { background-image: url(../images/sort_asc.png); background-repeat: no-repeat; background-position: right 2px; } table.display thead th a.desc { background-image: url(../images/sort_desc.png); background-repeat: no-repeat; background-position: right 2px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables row classes */ tr.odd { } tr.even { background-color: #EEE; } tr.even.selected td { background-color: #FFFCCC; } tr.odd.selected td { background-color: #FFFCCC; } tr:hover { background-color: #DDD; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DataTables cells classes */ td.con0 { background-color: #F7F7F7; } td.con1 { background-color: #EEE; } tr.selected td.con0 { background-color: #FFFCCC; } tr.selected td.con1 { background-color: #FFFBBB; } tr:hover td.con0 { background-color: #EAEAEA; } tr:hover td.con1 { background-color: #E0E0E0; } tr.selected:hover td.con0 { background-color: #FFFAAA; } tr.selected:hover td.con1 { background-color: #FFF999; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Misc */ .dataTables_scroll { clear: both; } .top, .bottom { } .top .dataTables_info { float: none; } .dataTables_empty { text-align: center; } tfoot input { margin: 0.5em 0; width: 100%; color: #444; background-color: #eee; } tfoot td:last-child input { width: 97%; } td.group { background-color: #d1cfd0; border-bottom: 2px solid #A19B9E; border-top: 2px solid #A19B9E; } td.details { background-color: #d1cfd0; border: 2px solid #A19B9E; } /* * Sorting classes for columns */ /* For the standard odd/even */ tr.odd td.sorting_1 { background: #f7f7f7; } tr.odd td.sorting_2 { background: #f7f7f7; } tr.odd td.sorting_3 { background: #f7f7f7; } tr.even td.sorting_1 { background: #eee; } tr.even td.sorting_2 { background: #eee; } tr.even td.sorting_3 { background: #eee; } .dataTables_wrapper label { display: inline-block; margin-right: 5px; } /** paginacion **/ /* .paging_full_numbers .paginate_button:hover { background: #eee; -moz-box-shadow: inset 1px 1px 2px #ccc; -webkit-box-shadow: inset 1px 1px 2px #ccc; box-shadow: inset 1px 1px 2px #ccc; } .paging_full_numbers .paginate_active, .paging_full_numbers .paginate_button:active { display: inline-block; padding: 2px 8px; border: 1px solid #405A87; margin-left: 5px; background: #405A87 url(../images/buttonbg3.png) repeat-x top left; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .paging_full_numbers .paginate_button_disabled { color: #999; }*/ /*.grid-view label { display: inline-block; margin-right: 5px; }*/ /*.items { } .items thead th, .items tfoot td { } .items thead th a, .items tfoot td a { } .items thead th, .items tfoot td { } .items thead th.head0, .items tfoot td.head0 { background: #666; } .items thead th.head1, .items tfoot td.head1 { background: #555; } .items tbody tr td { } .items tbody tr:first-child td { } .items .con1 { background: #eee; } .items .con0 { background: #f7f7f7; } .items .odd { } .items .even { } .items thead th.sorting { } .items thead th.sorting_asc { } .items thead th.sorting_desc { }*/ /*.summary { padding: 10px; }*/