|
1 /* |
|
2 DJANGO Admin styles |
|
3 */ |
|
4 |
|
5 body { |
|
6 margin: 0; |
|
7 padding: 0; |
|
8 font-size: 12px; |
|
9 font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif; |
|
10 color: #333; |
|
11 background: #fff; |
|
12 } |
|
13 |
|
14 /* LINKS */ |
|
15 |
|
16 a:link, a:visited { |
|
17 color: #5b80b2; |
|
18 text-decoration: none; |
|
19 } |
|
20 |
|
21 a:hover { |
|
22 color: #036; |
|
23 } |
|
24 |
|
25 a img { |
|
26 border: none; |
|
27 } |
|
28 |
|
29 a.section:link, a.section:visited { |
|
30 color: white; |
|
31 text-decoration: none; |
|
32 } |
|
33 |
|
34 /* GLOBAL DEFAULTS */ |
|
35 |
|
36 p, ol, ul, dl { |
|
37 margin: .2em 0 .8em 0; |
|
38 } |
|
39 |
|
40 p { |
|
41 padding: 0; |
|
42 line-height: 140%; |
|
43 } |
|
44 |
|
45 h1,h2,h3,h4,h5 { |
|
46 font-weight: bold; |
|
47 } |
|
48 |
|
49 h1 { |
|
50 font-size: 18px; |
|
51 color: #666; |
|
52 padding: 0 6px 0 0; |
|
53 margin: 0 0 .2em 0; |
|
54 } |
|
55 |
|
56 h2 { |
|
57 font-size: 16px; |
|
58 margin: 1em 0 .5em 0; |
|
59 } |
|
60 |
|
61 h2.subhead { |
|
62 font-weight: normal; |
|
63 margin-top: 0; |
|
64 } |
|
65 |
|
66 h3 { |
|
67 font-size: 14px; |
|
68 margin: .8em 0 .3em 0; |
|
69 color: #666; |
|
70 font-weight: bold; |
|
71 } |
|
72 |
|
73 h4 { |
|
74 font-size: 12px; |
|
75 margin: 1em 0 .8em 0; |
|
76 padding-bottom: 3px; |
|
77 } |
|
78 |
|
79 h5 { |
|
80 font-size: 10px; |
|
81 margin: 1.5em 0 .5em 0; |
|
82 color: #666; |
|
83 text-transform: uppercase; |
|
84 letter-spacing: 1px; |
|
85 } |
|
86 |
|
87 ul li { |
|
88 list-style-type: square; |
|
89 padding: 1px 0; |
|
90 } |
|
91 |
|
92 ul.plainlist { |
|
93 margin-left: 0 !important; |
|
94 } |
|
95 |
|
96 ul.plainlist li { |
|
97 list-style-type: none; |
|
98 } |
|
99 |
|
100 li ul { |
|
101 margin-bottom: 0; |
|
102 } |
|
103 |
|
104 li, dt, dd { |
|
105 font-size: 11px; |
|
106 line-height: 14px; |
|
107 } |
|
108 |
|
109 dt { |
|
110 font-weight: bold; |
|
111 margin-top: 4px; |
|
112 } |
|
113 |
|
114 dd { |
|
115 margin-left: 0; |
|
116 } |
|
117 |
|
118 form { |
|
119 margin: 0; |
|
120 padding: 0; |
|
121 } |
|
122 |
|
123 fieldset { |
|
124 margin: 0; |
|
125 padding: 0; |
|
126 } |
|
127 |
|
128 blockquote { |
|
129 font-size: 11px; |
|
130 color: #777; |
|
131 margin-left: 2px; |
|
132 padding-left: 10px; |
|
133 border-left: 5px solid #ddd; |
|
134 } |
|
135 |
|
136 code, pre { |
|
137 font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace; |
|
138 background: inherit; |
|
139 color: #666; |
|
140 font-size: 11px; |
|
141 } |
|
142 |
|
143 pre.literal-block { |
|
144 margin: 10px; |
|
145 background: #eee; |
|
146 padding: 6px 8px; |
|
147 } |
|
148 |
|
149 code strong { |
|
150 color: #930; |
|
151 } |
|
152 |
|
153 hr { |
|
154 clear: both; |
|
155 color: #eee; |
|
156 background-color: #eee; |
|
157 height: 1px; |
|
158 border: none; |
|
159 margin: 0; |
|
160 padding: 0; |
|
161 font-size: 1px; |
|
162 line-height: 1px; |
|
163 } |
|
164 |
|
165 /* TEXT STYLES & MODIFIERS */ |
|
166 |
|
167 .small { |
|
168 font-size: 11px; |
|
169 } |
|
170 |
|
171 .tiny { |
|
172 font-size: 10px; |
|
173 } |
|
174 |
|
175 p.tiny { |
|
176 margin-top: -2px; |
|
177 } |
|
178 |
|
179 .mini { |
|
180 font-size: 9px; |
|
181 } |
|
182 |
|
183 p.mini { |
|
184 margin-top: -3px; |
|
185 } |
|
186 |
|
187 .help, p.help { |
|
188 font-size: 10px !important; |
|
189 color: #999; |
|
190 } |
|
191 |
|
192 p img, h1 img, h2 img, h3 img, h4 img, td img { |
|
193 vertical-align: middle; |
|
194 } |
|
195 |
|
196 .quiet, a.quiet:link, a.quiet:visited { |
|
197 color: #999 !important; |
|
198 font-weight: normal !important; |
|
199 } |
|
200 |
|
201 .quiet strong { |
|
202 font-weight: bold !important; |
|
203 } |
|
204 |
|
205 .float-right { |
|
206 float: right; |
|
207 } |
|
208 |
|
209 .float-left { |
|
210 float: left; |
|
211 } |
|
212 |
|
213 .clear { |
|
214 clear: both; |
|
215 } |
|
216 |
|
217 .align-left { |
|
218 text-align: left; |
|
219 } |
|
220 |
|
221 .align-right { |
|
222 text-align: right; |
|
223 } |
|
224 |
|
225 .example { |
|
226 margin: 10px 0; |
|
227 padding: 5px 10px; |
|
228 background: #efefef; |
|
229 } |
|
230 |
|
231 .nowrap { |
|
232 white-space: nowrap; |
|
233 } |
|
234 |
|
235 /* TABLES */ |
|
236 |
|
237 table { |
|
238 border-collapse: collapse; |
|
239 border-color: #ccc; |
|
240 } |
|
241 |
|
242 td, th { |
|
243 font-size: 11px; |
|
244 line-height: 13px; |
|
245 border-bottom: 1px solid #eee; |
|
246 vertical-align: top; |
|
247 padding: 5px; |
|
248 font-family: "Lucida Grande", Verdana, Arial, sans-serif; |
|
249 } |
|
250 |
|
251 th { |
|
252 text-align: left; |
|
253 font-size: 12px; |
|
254 font-weight: bold; |
|
255 } |
|
256 |
|
257 thead th, |
|
258 tfoot td { |
|
259 color: #666; |
|
260 padding: 2px 5px; |
|
261 font-size: 11px; |
|
262 background: #e1e1e1 url(../img/admin/nav-bg.gif) top left repeat-x; |
|
263 border-left: 1px solid #ddd; |
|
264 border-bottom: 1px solid #ddd; |
|
265 } |
|
266 |
|
267 tfoot td { |
|
268 border-bottom: none; |
|
269 border-top: 1px solid #ddd; |
|
270 } |
|
271 |
|
272 thead th:first-child, |
|
273 tfoot td:first-child { |
|
274 border-left: none !important; |
|
275 } |
|
276 |
|
277 thead th.optional { |
|
278 font-weight: normal !important; |
|
279 } |
|
280 |
|
281 fieldset table { |
|
282 border-right: 1px solid #eee; |
|
283 } |
|
284 |
|
285 tr.row-label td { |
|
286 font-size: 9px; |
|
287 padding-top: 2px; |
|
288 padding-bottom: 0; |
|
289 border-bottom: none; |
|
290 color: #666; |
|
291 margin-top: -1px; |
|
292 } |
|
293 |
|
294 tr.alt { |
|
295 background: #f6f6f6; |
|
296 } |
|
297 |
|
298 .row1 { |
|
299 background: #EDF3FE; |
|
300 } |
|
301 |
|
302 .row2 { |
|
303 background: white; |
|
304 } |
|
305 |
|
306 /* SORTABLE TABLES */ |
|
307 |
|
308 thead th a:link, thead th a:visited { |
|
309 color: #666; |
|
310 display: block; |
|
311 } |
|
312 |
|
313 table thead th.sorted { |
|
314 background-position: bottom left !important; |
|
315 } |
|
316 |
|
317 table thead th.sorted a { |
|
318 padding-right: 13px; |
|
319 } |
|
320 |
|
321 table thead th.ascending a { |
|
322 background: url(../img/admin/arrow-down.gif) right .4em no-repeat; |
|
323 } |
|
324 |
|
325 table thead th.descending a { |
|
326 background: url(../img/admin/arrow-up.gif) right .4em no-repeat; |
|
327 } |
|
328 |
|
329 /* ORDERABLE TABLES */ |
|
330 |
|
331 table.orderable tbody tr td:hover { |
|
332 cursor: move; |
|
333 } |
|
334 |
|
335 table.orderable tbody tr td:first-child { |
|
336 padding-left: 14px; |
|
337 background-image: url(../img/admin/nav-bg-grabber.gif); |
|
338 background-repeat: repeat-y; |
|
339 } |
|
340 |
|
341 table.orderable-initalized .order-cell, body>tr>td.order-cell { |
|
342 display: none; |
|
343 } |
|
344 |
|
345 /* FORM DEFAULTS */ |
|
346 |
|
347 input, textarea, select { |
|
348 margin: 2px 0; |
|
349 padding: 2px 3px; |
|
350 vertical-align: middle; |
|
351 font-family: "Lucida Grande", Verdana, Arial, sans-serif; |
|
352 font-weight: normal; |
|
353 font-size: 11px; |
|
354 } |
|
355 |
|
356 textarea { |
|
357 vertical-align: top !important; |
|
358 } |
|
359 |
|
360 input[type=text], input[type=password], textarea, select, .vTextField { |
|
361 border: 1px solid #ccc; |
|
362 } |
|
363 |
|
364 /* FORM BUTTONS */ |
|
365 |
|
366 .button, input[type=submit], input[type=button], .submit-row input { |
|
367 background: white url(../img/admin/nav-bg.gif) bottom repeat-x; |
|
368 padding: 3px; |
|
369 color: black; |
|
370 border: 1px solid #bbb; |
|
371 border-color: #ddd #aaa #aaa #ddd; |
|
372 } |
|
373 |
|
374 .button:active, input[type=submit]:active, input[type=button]:active { |
|
375 background-image: url(../img/admin/nav-bg-reverse.gif); |
|
376 background-position: top; |
|
377 } |
|
378 |
|
379 .button.default, input[type=submit].default, .submit-row input.default { |
|
380 border: 2px solid #5b80b2; |
|
381 background: #7CA0C7 url(../img/admin/default-bg.gif) bottom repeat-x; |
|
382 font-weight: bold; |
|
383 color: white; |
|
384 float: right; |
|
385 } |
|
386 |
|
387 .button.default:active, input[type=submit].default:active { |
|
388 background-image: url(../img/admin/default-bg-reverse.gif); |
|
389 background-position: top; |
|
390 } |
|
391 |
|
392 /* MODULES */ |
|
393 |
|
394 .module { |
|
395 border: 1px solid #ccc; |
|
396 margin-bottom: 5px; |
|
397 background: white; |
|
398 } |
|
399 |
|
400 .module p, .module ul, .module h3, .module h4, .module dl, .module pre { |
|
401 padding-left: 10px; |
|
402 padding-right: 10px; |
|
403 } |
|
404 |
|
405 .module blockquote { |
|
406 margin-left: 12px; |
|
407 } |
|
408 |
|
409 .module ul, .module ol { |
|
410 margin-left: 1.5em; |
|
411 } |
|
412 |
|
413 .module h3 { |
|
414 margin-top: .6em; |
|
415 } |
|
416 |
|
417 .module h2, .module caption, .inline-group h2 { |
|
418 margin: 0; |
|
419 padding: 2px 5px 3px 5px; |
|
420 font-size: 11px; |
|
421 text-align: left; |
|
422 font-weight: bold; |
|
423 background: #7CA0C7 url(../img/admin/default-bg.gif) top left repeat-x; |
|
424 color: white; |
|
425 } |
|
426 |
|
427 .module table { |
|
428 border-collapse: collapse; |
|
429 } |
|
430 |
|
431 /* MESSAGES & ERRORS */ |
|
432 |
|
433 ul.messagelist { |
|
434 padding: 0 0 5px 0; |
|
435 margin: 0; |
|
436 } |
|
437 |
|
438 ul.messagelist li { |
|
439 font-size: 12px; |
|
440 display: block; |
|
441 padding: 4px 5px 4px 25px; |
|
442 margin: 0 0 3px 0; |
|
443 border-bottom: 1px solid #ddd; |
|
444 color: #666; |
|
445 background: #ffc url(../img/admin/icon_success.gif) 5px .3em no-repeat; |
|
446 } |
|
447 |
|
448 .errornote { |
|
449 font-size: 12px !important; |
|
450 display: block; |
|
451 padding: 4px 5px 4px 25px; |
|
452 margin: 0 0 3px 0; |
|
453 border: 1px solid red; |
|
454 color: red; |
|
455 background: #ffc url(../img/admin/icon_error.gif) 5px .3em no-repeat; |
|
456 } |
|
457 |
|
458 ul.errorlist { |
|
459 margin: 0 !important; |
|
460 padding: 0 !important; |
|
461 } |
|
462 |
|
463 .errorlist li { |
|
464 font-size: 12px !important; |
|
465 display: block; |
|
466 padding: 4px 5px 4px 25px; |
|
467 margin: 0 0 3px 0; |
|
468 border: 1px solid red; |
|
469 color: white; |
|
470 background: red url(../img/admin/icon_alert.gif) 5px .3em no-repeat; |
|
471 } |
|
472 |
|
473 td ul.errorlist { |
|
474 margin: 0 !important; |
|
475 padding: 0 !important; |
|
476 } |
|
477 |
|
478 td ul.errorlist li { |
|
479 margin: 0 !important; |
|
480 } |
|
481 |
|
482 .errors { |
|
483 background: #ffc; |
|
484 } |
|
485 |
|
486 .errors input, .errors select { |
|
487 border: 1px solid red; |
|
488 } |
|
489 |
|
490 div.system-message { |
|
491 background: #ffc; |
|
492 margin: 10px; |
|
493 padding: 6px 8px; |
|
494 font-size: .8em; |
|
495 } |
|
496 |
|
497 div.system-message p.system-message-title { |
|
498 padding: 4px 5px 4px 25px; |
|
499 margin: 0; |
|
500 color: red; |
|
501 background: #ffc url(../img/admin/icon_error.gif) 5px .3em no-repeat; |
|
502 } |
|
503 |
|
504 .description { |
|
505 font-size: 12px; |
|
506 padding: 5px 0 0 12px; |
|
507 } |
|
508 |
|
509 /* BREADCRUMBS */ |
|
510 |
|
511 div.breadcrumbs { |
|
512 background: white url(../img/admin/nav-bg-reverse.gif) 0 -10px repeat-x; |
|
513 padding: 2px 8px 3px 8px; |
|
514 font-size: 11px; |
|
515 color: #999; |
|
516 border-top: 1px solid white; |
|
517 border-bottom: 1px solid #ccc; |
|
518 text-align: left; |
|
519 } |
|
520 |
|
521 /* ACTION ICONS */ |
|
522 |
|
523 .addlink { |
|
524 padding-left: 12px; |
|
525 background: url(../img/admin/icon_addlink.gif) 0 .2em no-repeat; |
|
526 } |
|
527 |
|
528 .changelink { |
|
529 padding-left: 12px; |
|
530 background: url(../img/admin/icon_changelink.gif) 0 .2em no-repeat; |
|
531 } |
|
532 |
|
533 .deletelink { |
|
534 padding-left: 12px; |
|
535 background: url(../img/admin/icon_deletelink.gif) 0 .25em no-repeat; |
|
536 } |
|
537 |
|
538 a.deletelink:link, a.deletelink:visited { |
|
539 color: #CC3434; |
|
540 } |
|
541 |
|
542 a.deletelink:hover { |
|
543 color: #993333; |
|
544 } |
|
545 |
|
546 /* OBJECT TOOLS */ |
|
547 |
|
548 .object-tools { |
|
549 font-size: 10px; |
|
550 font-weight: bold; |
|
551 font-family: Arial,Helvetica,sans-serif; |
|
552 padding-left: 0; |
|
553 float: right; |
|
554 position: relative; |
|
555 margin-top: -2.4em; |
|
556 margin-bottom: -2em; |
|
557 } |
|
558 |
|
559 .form-row .object-tools { |
|
560 margin-top: 5px; |
|
561 margin-bottom: 5px; |
|
562 float: none; |
|
563 height: 2em; |
|
564 padding-left: 3.5em; |
|
565 } |
|
566 |
|
567 .object-tools li { |
|
568 display: block; |
|
569 float: left; |
|
570 background: url(../img/admin/tool-left.gif) 0 0 no-repeat; |
|
571 padding: 0 0 0 8px; |
|
572 margin-left: 2px; |
|
573 height: 16px; |
|
574 } |
|
575 |
|
576 .object-tools li:hover { |
|
577 background: url(../img/admin/tool-left_over.gif) 0 0 no-repeat; |
|
578 } |
|
579 |
|
580 .object-tools a:link, .object-tools a:visited { |
|
581 display: block; |
|
582 float: left; |
|
583 color: white; |
|
584 padding: .1em 14px .1em 8px; |
|
585 height: 14px; |
|
586 background: #999 url(../img/admin/tool-right.gif) 100% 0 no-repeat; |
|
587 } |
|
588 |
|
589 .object-tools a:hover, .object-tools li:hover a { |
|
590 background: #5b80b2 url(../img/admin/tool-right_over.gif) 100% 0 no-repeat; |
|
591 } |
|
592 |
|
593 .object-tools a.viewsitelink, .object-tools a.golink { |
|
594 background: #999 url(../img/admin/tooltag-arrowright.gif) top right no-repeat; |
|
595 padding-right: 28px; |
|
596 } |
|
597 |
|
598 .object-tools a.viewsitelink:hover, .object-tools a.golink:hover { |
|
599 background: #5b80b2 url(../img/admin/tooltag-arrowright_over.gif) top right no-repeat; |
|
600 } |
|
601 |
|
602 .object-tools a.addlink { |
|
603 background: #999 url(../img/admin/tooltag-add.gif) top right no-repeat; |
|
604 padding-right: 28px; |
|
605 } |
|
606 |
|
607 .object-tools a.addlink:hover { |
|
608 background: #5b80b2 url(../img/admin/tooltag-add_over.gif) top right no-repeat; |
|
609 } |
|
610 |
|
611 /* OBJECT HISTORY */ |
|
612 |
|
613 table#change-history { |
|
614 width: 100%; |
|
615 } |
|
616 |
|
617 table#change-history tbody th { |
|
618 width: 16em; |
|
619 } |
|
620 |
|
621 /* PAGE STRUCTURE */ |
|
622 |
|
623 #container { |
|
624 position: relative; |
|
625 width: 100%; |
|
626 min-width: 760px; |
|
627 padding: 0; |
|
628 } |
|
629 |
|
630 #content { |
|
631 margin: 10px 15px; |
|
632 } |
|
633 |
|
634 #header { |
|
635 width: 100%; |
|
636 } |
|
637 |
|
638 #content-main { |
|
639 float: left; |
|
640 width: 100%; |
|
641 } |
|
642 |
|
643 #content-related { |
|
644 float: right; |
|
645 width: 18em; |
|
646 position: relative; |
|
647 margin-right: -19em; |
|
648 } |
|
649 |
|
650 #footer { |
|
651 background-image: url(../img/admin/default-bg-reverse.gif); |
|
652 background-position: top; |
|
653 clear: both; |
|
654 padding: 10px; |
|
655 } |
|
656 |
|
657 /* COLUMN TYPES */ |
|
658 |
|
659 .colMS { |
|
660 margin-right: 20em !important; |
|
661 } |
|
662 |
|
663 .colSM { |
|
664 margin-left: 20em !important; |
|
665 } |
|
666 |
|
667 .colSM #content-related { |
|
668 float: left; |
|
669 margin-right: 0; |
|
670 margin-left: -19em; |
|
671 } |
|
672 |
|
673 .colSM #content-main { |
|
674 float: right; |
|
675 } |
|
676 |
|
677 .popup .colM { |
|
678 width: 95%; |
|
679 } |
|
680 |
|
681 .subcol { |
|
682 float: left; |
|
683 width: 46%; |
|
684 margin-right: 15px; |
|
685 } |
|
686 |
|
687 .dashboard #content { |
|
688 width: 500px; |
|
689 } |
|
690 |
|
691 /* HEADER */ |
|
692 |
|
693 #header { |
|
694 background: #417690; |
|
695 color: #ffc; |
|
696 overflow: hidden; |
|
697 } |
|
698 |
|
699 #header a:link, #header a:visited { |
|
700 color: white; |
|
701 } |
|
702 |
|
703 #header a:hover { |
|
704 text-decoration: underline; |
|
705 } |
|
706 |
|
707 #branding h1 { |
|
708 padding: 0 10px; |
|
709 font-size: 18px; |
|
710 margin: 8px 0; |
|
711 font-weight: normal; |
|
712 color: #f4f379; |
|
713 } |
|
714 |
|
715 #branding h2 { |
|
716 padding: 0 10px; |
|
717 font-size: 14px; |
|
718 margin: -8px 0 8px 0; |
|
719 font-weight: normal; |
|
720 color: #ffc; |
|
721 } |
|
722 |
|
723 #user-tools { |
|
724 position: absolute; |
|
725 top: 0; |
|
726 right: 0; |
|
727 padding: 1.2em 10px; |
|
728 font-size: 11px; |
|
729 text-align: right; |
|
730 } |
|
731 |
|
732 /* SIDEBAR */ |
|
733 |
|
734 #content-related h3 { |
|
735 font-size: 12px; |
|
736 color: #666; |
|
737 margin-bottom: 3px; |
|
738 } |
|
739 |
|
740 #content-related h4 { |
|
741 font-size: 11px; |
|
742 } |
|
743 |
|
744 #content-related .module h2 { |
|
745 background: #eee url(../img/admin/nav-bg.gif) bottom left repeat-x; |
|
746 color: #666; |
|
747 } |
|
748 |