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