* luci/themes: layout changes for smalltext tables in openwrt.org theme
[project/luci.git] / themes / openwrt.org / htdocs / luci-static / openwrt.org / cascade.css
1 * {
2 margin: 0;
3 padding: 0;
4 }
5
6 body {
7 background-color: #4a6b7c;
8 background-image: url(bg.jpg);
9 background-position: bottom center;
10 background-attachment: fixed;
11 background-repeat: repeat-x;
12 color: #ffffff;
13 font-family: Verdana, Arial, sans-serif;
14 font-size: 100%;
15 line-height: 100%;
16 }
17
18 code {
19 font-family: monospace;
20 white-space: pre;
21 }
22
23 div#content ul {
24 margin-left: 2em;
25 }
26
27 .clear {
28 clear: both;
29 height: 1px;
30 }
31
32 .hidden {
33 display: none;
34 }
35
36 .error {
37 color: #ff0000;
38 }
39
40 #header {
41 min-height: 98px;
42 background-image: url(header.jpg);
43 background-repeat: no-repeat;
44 background-position: left center;
45 background-color: #557788;
46 text-align: right;
47 }
48
49 #header .info {
50 padding: 1em 1em;
51 font-size: 70%;
52 line-height: 160%;
53 }
54
55 #header .title {
56 display: none;
57 }
58
59 .pathbar {
60 display: none;
61 }
62
63 .menubar {
64 width: 100%;
65 min-height: 1.8em;
66 background: #000000;
67 color: #ffffff;
68 }
69
70 .mainmenu {
71 float: left;
72 width: auto;
73 min-height: 1.8em;
74 background: #000000;
75 color: #ffffff;
76 }
77
78 .mainmenu div {
79 float: left;
80 }
81
82 .mainmenu li {
83 white-space: nowrap;
84 }
85
86 .mainmenu div ul {
87 display: none;
88 position: absolute;
89 background: #000000;
90 color: #ffffff;
91 border-width: 0 1px 1px 1px;
92 border-style: solid;
93 border-color: #444444;
94 list-style-type: none;
95 }
96
97 .mainmenu ul li:hover > ul,
98 .mainmenu div:hover > ul {
99 display: block;
100 }
101
102 .mainmenu ul li > ul {
103 left: 100%;
104 margin-top: -1.8em;
105 border-width: 1px;
106 }
107
108 .modemenu a,
109 .mainmenu a {
110 display: block;
111 padding: 0.5em;
112 color: #ffffff;
113 text-decoration: none;
114 font-size: 80%;
115 }
116
117 .mainmenu .active a,
118 .modemenu .active a {
119 color: #ffff00;
120 font-weight: bold;
121 }
122
123 .mainmenu li:hover > span > a,
124 .mainmenu div:hover > a {
125 font-weight: bold;
126 }
127
128 .modemenu a:hover,
129 .modemenu a:focus,
130 .mainmenu a:hover,
131 .mainmenu a:focus {
132 color: #ffff00;
133 font-weight: bold;
134 }
135
136 .mainmenu div.preactive > a {
137 color: #ffff00;
138 font-weight: bold;
139 }
140
141 .modemenu ul {
142 width: auto;
143 background: #000000;
144 color: #ffffff;
145 list-style-type: none;
146 }
147
148 .modemenu li {
149 float: right;
150 }
151
152 #content {
153 clear: both;
154 width: 80%;
155 margin: 0 auto;
156 padding: 0.5em;
157 background: #f5f5f5;
158 color: #000000;
159 border-width: 0 1px 1px 1px;
160 border-style: solid;
161 border-color: #444444;
162 font-size: 80%;
163 }
164
165 #content h1 {
166 margin: 0.25em 0 0.5em 0;
167 font-size: 150%;
168 font-weight: normal;
169 }
170
171 #content h2 {
172 margin: 0.5em 0;
173 font-size: 120%;
174 font-weight: normal;
175 text-decoration: underline;
176 }
177
178 #content p {
179 margin-bottom: 1em;
180 }
181
182 .cbi-section {
183 margin-bottom: 0.5em;
184 padding: 0.5em 1em;
185 border: 1px dotted #555555;
186 background-color: #ffffff;
187 }
188
189 .cbi-section h2 {
190 margin: 0em 0 0.5em -0.5em !important;
191 }
192
193 .cbi-section h3 {
194 height: 1em;
195 font-size: 120%;
196 }
197
198 .cbi-section-descr {
199 margin-bottom: 0.5em;
200 }
201
202 input[type=submit],
203 input[type=reset],
204 label {
205 cursor: pointer;
206 }
207
208 select,
209 input,
210 textarea {
211 background: #eeeeee;
212 color: #000000;
213 border: 1px solid #000000;
214 }
215
216 input:focus,
217 textarea:focus {
218 background: #ffffff;
219 }
220
221 select,
222 input[type=text],
223 input[type=password] {
224 width: 20em;
225 }
226
227 td select,
228 td input[type=text],
229 td input[type=password] {
230 width: 99%;
231 }
232
233 textarea {
234 margin-left: -1px;
235 margin-bottom: 0.5em;
236 }
237
238 form > div > input[type=submit],
239 form > div > input[type=reset] {
240 float: right;
241 margin-left: 0.5em;
242 }
243
244 table.smalltext {
245 background: #f5f5f5;
246 border-top: 1px solid #666666;
247 border-right: 1px solid #666666;
248 border-bottom: 1px solid #666666;
249 font-size: 90%;
250 width: 80%;
251 margin-left: auto;
252 margin-right: auto;
253 }
254
255 table.smalltext tr:hover td {
256 background-color: #bbddee;
257 }
258
259 table.smalltext tr th {
260 padding: 0 0.25em;
261 border-left: 1px solid #666666;
262 text-align: left;
263 }
264
265 table.smalltext tr td {
266 padding: 0 0.25em;
267 border-top: 1px solid #666666;
268 border-left: 1px solid #666666;
269 }
270
271 div.cbi-value {
272 clear: left;
273 padding: 0.25em;
274 border-bottom: 1px dotted #bbbbbb;
275 }
276
277 div.cbi-value:hover {
278 background: #f8f8f8;
279 }
280
281 div.cbi-value:last-child {
282 border: none;
283 }
284
285 .cbi-value-title {
286 float: left;
287 width: 40%;
288 margin: 0.25em 0;
289 }
290
291 div.cbi-value-field {
292 width: 58%;
293 margin: 0.25em 0 0.25em 40%;
294 }
295
296 div.cbi-value-description {
297 font-size: 90%;
298 }
299
300 div.cbi-section-create {
301 clear: left;
302 }
303
304 div.cbi-map-descr {
305 margin-bottom: 1em;
306 }
307
308 div.cbi-optionals {
309 margin: 0.5em 0;
310 padding: 0 0.25em;
311 }
312
313 div.cbi-section-remove {
314 float: right;
315 }
316
317 div.cbi-section-remove input {
318 border-color: #bbbbbb;
319 border-bottom: none;
320 }
321
322 div.cbi-section-node {
323 clear: both;
324 border: 1px dotted #bbbbbb;
325 padding-bottom: 0;
326 }
327
328 table.cbi-section-table {
329 width: 100%;
330 font-size: 95%;
331 }
332
333 table.cbi-section-table th,
334 table.cbi-section-table td {
335 text-align: center;
336 }
337
338 tr.cbi-section-table-descr th {
339 font-weight: normal;
340 font-size: 90%;
341 }
342
343 td.cbi-section-table-optionals {
344 text-align: left !important;
345 padding-top: 1em;
346 }
347
348 .right {
349 text-align: right;
350 }
351
352 .luci {
353 position: fixed;
354 bottom: 0;
355 left: 0;
356 text-align: right;
357 }
358
359 .luci a {
360 color: #666666;
361 text-decoration: none;
362 font-size: 70%;
363 }
364
365 .inline {
366 display: inline;
367 }
368
369 #memorybar {
370 width:200px;
371 height:8px;
372 border:1px solid #bbb;
373 background-color:red
374 }
375
376 #memfree, #membuffers, #memcached {
377 float:right;
378 border:1px solid #bbb;
379 height:6px;
380 }
381
382 #memfree {
383 background-color:green;
384 }
385
386 #membuffers {
387 background-color:yellow;
388 }
389
390 #memcached {
391 background-color:orange;
392 }
393
394
395 /* obligatory IE6 Voodoo Code */
396 * html body {
397 padding-left: 50% !important;
398 }
399
400 * html div#header {
401 margin-left: -100% !important;
402 }
403
404 * html div.menubar {
405 margin-left: -100% !important;
406 width: 200% !important;
407 }
408
409 * html div#content {
410 margin-left: -80% !important;
411 width: 160% !important;
412 }
413
414 * html div.mainmenu div.hover ul,
415 * html div.mainmenu div li.hover ul,
416 * html div.mainmenu div li li.hover ul,
417 * html div.mainmenu div li li li.hover ul,
418 * html div.mainmenu div li li li li.hover ul {
419 display: block !important;
420 margin-left: 3em;
421 }
422
423 * html div.mainmenu div.hover ul {
424 margin-left: 0;
425 }
426
427 * html div.mainmenu .hover ul ul,
428 * html div.mainmenu .hover ul ul ul,
429 * html div.mainmenu .hover ul ul ul ul,
430 * html div.mainmenu .hover ul ul ul ul ul {
431 display: none !important;
432 }
433
434 * html div.mainmenu li {
435 height: 1em !important;
436 width: 10em !important;
437 }
438
439 * html .mainmenu {
440 height: 1.8em;
441 }
442
443 * html div.cbi-value-description {
444 margin-left: 40%;
445 }
446