stupid files
[kismet-logviewer.git] / logviewer / static / css / layout.css
1 /*\r
2 -----------------------------------------------\r
3 Grey Box Method - Layout CSS\r
4 ----------------------------------------------- */\r
5 \r
6 body {\r
7         background: #eee;\r
8         color: #333;\r
9         font-size: 11px;\r
10         padding: 0;\r
11 }\r
12 \r
13 \r
14 /* anchors\r
15 ----------------------------------------------- */\r
16 a {\r
17         color: #000;\r
18         font-weight:bold;\r
19         text-decoration: none;\r
20 }\r
21 a:hover {\r
22         color:#333;\r
23 }\r
24 \r
25 \r
26 /* 960 grid system container background\r
27 ----------------------------------------------- */\r
28 .container_12,\r
29 .container_16 {\r
30         background:#fff;\r
31 }\r
32 \r
33 \r
34 /* headings\r
35 ----------------------------------------------- */\r
36 h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}\r
37 h2 {margin-top:1em;}\r
38 h5 {font-size:1.2em;}\r
39 h6 {font-size:1em; text-transform:uppercase;}\r
40 \r
41 \r
42 h1 a {\r
43         font-weight:normal;\r
44 }\r
45 \r
46 \r
47 /* branding\r
48 ----------------------------------------------- */\r
49 h1#branding {\r
50         font-weight:normal;\r
51         font-size:3em;\r
52         text-align:left;\r
53         background:#aaa;\r
54         padding:.7em 1em;\r
55         margin-bottom:0;\r
56 }\r
57 \r
58 \r
59 /* page heading\r
60 ----------------------------------------------- */\r
61 h2#page-heading {\r
62         font-weight:normal;\r
63         padding:.5em;\r
64         margin:0 0 10px 0;\r
65         border-bottom:1px solid #ccc;\r
66 }\r
67 \r
68 \r
69 /* boxes\r
70 ----------------------------------------------- */\r
71 .box {\r
72         background:#ddd;\r
73         margin-bottom:20px;\r
74         padding:10px 10px 1px 10px;\r
75 }\r
76 .box h2 {\r
77         font-size:1em;\r
78         font-weight:normal;\r
79         text-transform:uppercase;\r
80         color:#fff;\r
81         background:#333;\r
82         margin:-10px -10px 0 -10px;\r
83         padding:6px 12px;\r
84 }\r
85 .box h2 a,\r
86 .box h2 a.visible {\r
87         color:#fff;\r
88         background:#333 url("images/switch_minus.gif") 97% 50% no-repeat;\r
89         display:block;\r
90         padding:6px 12px;\r
91         margin:-6px -12px;\r
92         border:none;\r
93 }\r
94 .grid_4 .box h2 a {\r
95         background-position: 97% 50%;\r
96 }\r
97 .grid_5 .box h2 a {\r
98         background-position: 98% 50%;\r
99 }\r
100 .grid_12 .box h2 a {\r
101         background-position: 99% 50%;\r
102 }\r
103 \r
104 \r
105 .box h2 a.hidden,\r
106 .box h2 a.hidden:hover {\r
107         background-image: url("images/switch_plus.gif");\r
108 }\r
109 .box h2 a:hover {\r
110         background-color:#111;\r
111 }\r
112 .block {\r
113         padding-top:10px;\r
114 }\r
115 div.menu {\r
116         padding:0;\r
117 }\r
118 div.menu h2 {\r
119         margin:0;\r
120 }\r
121 div.menu .block {\r
122         padding-top:0;\r
123 }\r
124 \r
125 \r
126 /* paragraphs, quotes and lists\r
127 ----------------------------------------------- */\r
128 p {\r
129         margin-bottom:1em;\r
130 }\r
131 blockquote {\r
132         font-family: Georgia, 'Times New Roman', serif;\r
133         font-size:1.2em;\r
134         padding-left:1em;\r
135         border-left:4px solid #ccc;\r
136 }\r
137 blockquote cite {\r
138         font-size:.9em;\r
139 }\r
140 ul, ol {\r
141         padding-top:0;\r
142 }\r
143 \r
144 \r
145 /* menus\r
146 ----------------------------------------------- */\r
147 ul.menu {\r
148         list-style:none;\r
149         border-top:1px solid #bbb;\r
150 }\r
151 ul.menu li {\r
152         margin:0;\r
153 }\r
154 ul.menu li a {\r
155         display:block;\r
156         padding:4px 10px;\r
157         border-bottom:1px solid #ccc;\r
158 }\r
159 ul.menu li a:hover {\r
160         background:#eee;\r
161 }\r
162 ul.menu li a:active {\r
163         background:#ccc;\r
164 }\r
165 \r
166 \r
167 /* submenus\r
168 ----------------------------------------------- */\r
169 ul.menu ul {\r
170         list-style:none;\r
171         margin:0;\r
172 }\r
173 ul.menu ul li a {\r
174         padding-left:30px;\r
175 }\r
176 \r
177 \r
178 /* section menus\r
179 ----------------------------------------------- */\r
180 ul.section {\r
181         border-top:0;\r
182         margin-bottom:0;\r
183 }\r
184 ul.section li {\r
185         text-transform:uppercase;\r
186 }\r
187 ul.section li a {\r
188         background:#bbb;\r
189 }\r
190 ul.section li a:hover {\r
191         background:#aaa;\r
192 }\r
193 ul.section li a:active {\r
194         color:#fff;\r
195         background:#666;\r
196 }\r
197 ul.section li li a {\r
198         background:#ddd;\r
199         border-bottom:1px solid #eee;\r
200 }\r
201 ul.section li li a:hover {\r
202         background:#ccc;\r
203 }\r
204 ul.section li li a:active {\r
205         color:#000;\r
206         background:#fff;\r
207 }\r
208 ul.section ul li {\r
209         text-transform:none;\r
210 }\r
211 ul.section ul.current li a {\r
212         background:#eee;\r
213         border-bottom:1px solid #fff;\r
214 }\r
215 ul.section ul.current li a:hover {\r
216         background:#ddd;\r
217 }\r
218 ul.section ul.current li a:active {\r
219         background:#fff;\r
220 }\r
221 ul.section li a.current {\r
222         color:#fff;\r
223         background:#666;\r
224 }\r
225 ul.section li a.current:hover {\r
226         background:#555;\r
227 }\r
228 ul.section li a.current:active {\r
229         background:#444;\r
230 }\r
231 ul.section li a.active {\r
232         background:#fff;\r
233         cursor:default;\r
234 }\r
235 ul.section li.current > a.active,\r
236 ul.section li.current > a.active:hover {\r
237         color:#fff;\r
238         background:#666;\r
239         cursor:default;\r
240 }\r
241 \r
242 \r
243 /* table\r
244 ----------------------------------------------- */\r
245 table {\r
246         width:100%;\r
247         border:1px solid #bbb;\r
248         margin-bottom:10px;\r
249 }\r
250 col.colC {\r
251         width:8em;\r
252 }\r
253 th, td {\r
254         padding:.2em 1em;\r
255         text-align:left;\r
256 }\r
257 thead th {\r
258         border-bottom:2px solid #888;\r
259         background:#bbb;\r
260         padding:.4em 1em .2em;\r
261 }\r
262 thead th.table-head {\r
263         font-size:1em;\r
264         font-weight:normal;\r
265         text-transform:uppercase;\r
266         color:#fff;\r
267         background:#555;\r
268         border:1px solid #555;\r
269 }\r
270 tbody th,\r
271 tbody td {\r
272         border-top:1px solid #bbb;\r
273         border-bottom:1px solid #bbb;\r
274         background:#eee;\r
275 }\r
276 tbody tr.odd th,\r
277 tbody tr.odd td {\r
278         background:#fff;\r
279 }\r
280 tfoot th,\r
281 tfoot td {\r
282         border-top:2px solid #666;\r
283         background:#eee;\r
284 }\r
285 tfoot tr.total th,\r
286 tfoot tr.total td {\r
287         border-top:6px double #666;\r
288 }\r
289 tfoot tr.total th {\r
290         text-transform:uppercase;\r
291 }\r
292 th.currency,\r
293 td.currency {\r
294         text-align:right;\r
295 }\r
296 \r
297 \r
298 /* forms\r
299 ----------------------------------------------- */\r
300 form {\r
301         overflow:hidden;\r
302 }\r
303 fieldset {\r
304         border:1px solid #bbb;\r
305         padding:10px;\r
306         position:relative;\r
307         background:#e9e9e9;\r
308         margin-bottom:10px;\r
309 }\r
310 legend {\r
311         font-size:1.1em;\r
312         padding:.4em .8em;\r
313         background:#fff;\r
314         border:1px solid #bbb;\r
315 }\r
316 fieldset.login p {\r
317         margin-bottom:1em;\r
318         margin-top:0pt;\r
319 }\r
320 fieldset p label {\r
321         width:98%;\r
322 }\r
323 fieldset p input {\r
324         width:98%;\r
325 }\r
326 fieldset p select {\r
327         width:99%;\r
328 }\r
329 fieldset.login p label {\r
330         float:left;\r
331         line-height:2em;\r
332         margin-right:3%;\r
333         text-align:right;\r
334         width:32%;\r
335 }\r
336 fieldset.login p input {\r
337         width:60%;\r
338 }\r
339 fieldset.login input.button {\r
340         margin-left:35%;\r
341 }\r
342 form p.notice {\r
343         font-weight:bold;\r
344 }\r
345 input.search.text {\r
346         width:66%;\r
347 }\r
348 input.search.button {\r
349         width:28%;\r
350         margin-left:2%;\r
351 }\r
352 \r
353 \r
354 /* articles\r
355 ----------------------------------------------- */\r
356 .articles {\r
357         padding:0;\r
358 }\r
359 .articles h2 {\r
360         margin:0;\r
361 }\r
362 #articles {\r
363         padding-top:0;\r
364 }\r
365 .article {\r
366         border-top:1px solid #666;\r
367         padding-top:.5em;\r
368     min-height:125px;\r
369 }\r
370 .box .article {\r
371         border-top:3px solid #fff;\r
372         padding:13px 10px 0 10px;\r
373 }\r
374 .article h2 {\r
375         font-size:2em;\r
376         font-weight:normal;\r
377         text-transform:none;\r
378         color:#333;\r
379         background:transparent;\r
380         padding:0;\r
381         margin:0;\r
382         border:none;\r
383 }\r
384 .article h3 {\r
385         margin-bottom:.2em;\r
386         font-size:1.6em;\r
387 }\r
388 .box .first {\r
389         border-top:none;\r
390 }\r
391 .article h4 {\r
392         font-size:1.2em;\r
393         text-transform:uppercase;\r
394         margin-bottom:.5em;\r
395 }\r
396 .article a.image {\r
397         float:left; \r
398         margin:3px 10px 3px 0; \r
399         padding:4px;\r
400         border:1px solid #bbb;\r
401         background:#fff;\r
402 }\r
403 .article a.image:hover {\r
404         border:1px solid #666;\r
405 }\r
406 .article a.image img {\r
407         float:left; \r
408 }\r
409 .article p.meta {\r
410         color:#666;\r
411         border-top:1px dotted #999;\r
412         border-bottom:1px dotted #999;\r
413         padding:.3em 0;\r
414         margin-bottom:.8em;\r
415 }\r
416 \r
417 \r
418 /* site information\r
419 ----------------------------------------------- */\r
420 #site_info .box {\r
421         color:#ccc;\r
422         background:#666;\r
423         margin-bottom:10px;\r
424 }\r
425 #site_info a {\r
426         color:#fff;\r
427 }\r
428 #site_info a:hover {\r
429         color:#000;\r
430 }\r
431 \r
432 \r
433 /* AJAX sliding shelf\r
434 ----------------------------------------------- */\r
435 #loading {float:right; margin-right:14px; margin-top:-2px;}\r
436 .block {padding-bottom:1px;}\r
437 \r
438 \r
439 /* Accordian\r
440 ----------------------------------------------- */\r
441 .toggler {\r
442         color: #222;\r
443         margin: 0;\r
444         padding: 2px 5px;\r
445         background: #eee;\r
446         border-bottom: 1px solid #ddd;\r
447         border-right: 1px solid #ddd;\r
448         border-top: 1px solid #f5f5f5;\r
449         border-left: 1px solid #f5f5f5;\r
450         font-size:1.1em;\r
451         font-weight: normal;\r
452 }\r
453 .element h4 {\r
454         margin: 0;\r
455         padding:4px;\r
456         line-height:1.2em;\r
457 }\r
458 .element p {\r
459         margin: 0;\r
460         padding: 4px;\r
461 }\r
462 .float-right {\r
463         padding:10px 20px;\r
464         float:right;\r
465 }\r
466 \r
467 #accordian-block {\r
468         padding-bottom:10px;\r
469 }\r
470 \r
471 \r
472 /* Mootools Kwicks\r
473 ----------------------------------------------- */\r
474 #kwick-box { \r
475         padding:0;\r
476         overflow:hidden;\r
477 }\r
478 #kwick-box h2 { \r
479         margin:0;\r
480 }\r
481 #kwick {\r
482         position: relative;\r
483 }\r
484 #kwick .kwicks {\r
485         display: block;\r
486         background: #999;\r
487         height: 120px;\r
488         list-style:none;\r
489         margin:0;\r
490         overflow:hidden;\r
491 }\r
492 #kwick li {\r
493         float: left;\r
494         margin:0;\r
495         padding:0;\r
496 }\r
497 #kwick .kwick {\r
498         display: block;\r
499         cursor: pointer;\r
500         overflow: hidden;\r
501         height: 100px;\r
502         width: 215px;\r
503         padding: 10px;\r
504         background: #fff;\r
505 }\r
506 #kwick .kwick span {\r
507         color:#fff;\r
508 }\r
509 #kwick .one {\r
510         background: #666;\r
511 }\r
512 #kwick .two {\r
513         background: #777;\r
514 }\r
515 #kwick .three {\r
516         background: #888;\r
517 }\r
518 #kwick .four {\r
519         background: #999;\r
520 }\r