8dcd3f978682d3bbec097a18827706e05872c2b5
[project/zen.git] / zen / zen.css
1 /* $Id$ */
2
3 /*
4  * ZEN STYLES
5  *
6  * This is an example stylesheet. Sub-themes should NOT include the zen/zen.css
7  * file, but instead copy this CSS to their own stylesheets.
8  *
9  * In this stylesheet, we have included all of the classes and IDs from this
10  * theme's tpl.php files. We have also included many of the useful Drupal core
11  * styles to make it easier for theme developers to see them.
12  *
13  * Many of these styles are over-riding Drupal's core stylesheets, so if you
14  * remove a declaration from here, the styles may still not be what you want
15  * since Drupal's core stylesheets are still styling the element. See the
16  * drupal6-reference.css file for a list of all Drupal 5.x core styles.
17  *
18  * In addition to the style declarations in this file, other Drupal styles that
19  * you might want to override or augment are those for:
20  *
21  *   Book Navigation  See line 74  of Zen's drupal6-reference.css file
22  *   Forum            See line 197 of Zen's drupal6-reference.css file
23  *   Menus            See line 667 of Zen's drupal6-reference.css file
24  *   News Aggregator  See line 20  of Zen's drupal6-reference.css file
25  *   Polls            See line 287 of Zen's drupal6-reference.css file
26  *   Search           See line 320 of Zen's drupal6-reference.css file
27  *   User Profiles    See line 945 of Zen's drupal6-reference.css file
28  */
29
30
31 /** body **/
32   body
33   {
34     margin: 0;
35     padding: 10px;
36   }
37
38   #page
39   {
40   }
41
42   #page-inner
43   {
44   }
45
46 /** header **/
47   #header
48   {
49   }
50
51   #header-inner
52   {
53   }
54
55   #logo-title /* Wrapper for logo, website name, and slogan */
56   {
57   }
58
59   #logo /* Wrapper for logo */
60   {
61     margin: 0 10px 0 0;
62     padding: 0;
63   }
64
65   #logo-image /* The actual logo image */
66   {
67   }
68
69   h1#site-name, div#site-name /* The name of the website */
70   {
71     margin: 0;
72     font-size: 2em;
73     line-height: 1.3em;
74   }
75
76   #site-name a:link,
77   #site-name a:visited
78   {
79     color: #000;
80     text-decoration: none;
81   }
82
83   #site-name a:hover
84   {
85     text-decoration: underline;
86   }
87
88   #site-slogan /* The slogan (or tagline) of a website */
89   {
90   }
91
92   #header-blocks /* Wrapper for any blocks placed in the header region */
93   {
94   }
95
96 /** main (container for everything else) **/
97   #main
98   {
99   }
100
101   #main-inner
102   {
103   }
104
105 /** content **/
106   #content
107   {
108   }
109
110   #content-inner
111   {
112   }
113
114   #mission /* The mission statement of the site (displayed on homepage) */
115   {
116   }
117
118   #content-top /* Wrapper for any blocks placed in the "content top" region */
119   {
120   }
121
122   #content-header /* Wrapper for breadcrumb, title, messages, tabs, and help */
123   {
124   }
125
126   .breadcrumb /* The path to the current page in the form of a list of links */
127   {
128     padding-bottom: 0; /* Undo system.css */
129   }
130
131   h1.title, /* The title of the page */
132   h2.title, /* Block title or the title of a piece of content when it is given in a list of content */
133   h3.title /* Comment title */
134   {
135     margin: 0;
136   }
137
138   div.messages /* Important messages (status, warning, and error) for the user */
139   {
140   }
141
142   div.status /* Normal priority messages */
143   {
144   }
145
146   div.warning, tr.warning /* Medium priority messages */
147   {
148     /* border: 1px solid #f0c020; */ /* Drupal core uses: 1px solid #f0c020 */
149   }
150
151   div.error, tr.error /* High priority messages. See also the .error declaration below. */
152   {
153   }
154
155   div.tabs /* See also the tabs.css file. */
156   {
157   }
158
159   .help /* Help text on a page */
160   {
161     margin: 1em 0;
162   }
163
164   .more-help-link /* Link to more help */
165   {
166     font-size: 0.85em;
167     text-align: right;
168   }
169
170   #content-area /* Wrapper for the actual page content */
171   {
172   }
173
174   ul.links /* List of links */
175   {
176     margin: 1em 0;
177     padding: 0;
178   }
179
180   ul.links.inline
181   {
182     margin: 0;
183     display: inline;
184   }
185
186   ul.links li
187   {
188     display: inline;
189     list-style-type: none;
190     padding: 0 0.5em;
191   }
192
193   .pager /* A list of page numbers when more than 1 page of content is available */
194   {
195     clear: both;
196     margin: 1em 0;
197     text-align: center;
198   }
199
200   .pager a, .pager strong.pager-current
201   {
202     padding: 0.5em;
203   }
204
205   .feed-icons /* The links to the RSS or Atom feeds for the current list of content */
206   {
207     margin: 1em 0;
208   }
209
210   #content-bottom /* Wrapper for any blocks placed in the "content bottom" region */
211   {
212   }
213
214 /** navbar **/
215   #navbar
216   {
217   }
218
219   #navbar-inner
220   {
221   }
222
223   #search-box /* Wrapper for the search form */
224   {
225   }
226
227   #edit-search-theme-form-1-wrapper label /* Label that says "Search this site:" */
228   {
229     display: none;
230   }
231
232   #primary /* Primary links */
233   {
234   }
235
236   #secondary /* Secondary links */
237   {
238   }
239
240 /** sidebar-left **/
241   #sidebar-left
242   {
243   }
244
245   #sidebar-left-inner
246   {
247   }
248
249 /** sidebar-right **/
250   #sidebar-right
251   {
252   }
253
254   #sidebar-right-inner
255   {
256   }
257
258 /** footer **/
259   #footer
260   {
261   }
262
263   #footer-inner
264   {
265   }
266
267   #footer-message /* Wrapper for the footer message from Drupal's "Site information"
268                      and for any blocks placed in the footer region */
269   {
270   }
271
272 /** closure **/
273   #closure-blocks /* Wrapper for any blocks placed in the closure region */
274   {
275   }
276
277 /** Drupal nodes **/
278   .node /* Node wrapper */
279   {
280   }
281
282   .node-inner /* Additional wrapper for node */
283   {
284   }
285
286   .sticky /* A sticky node (displayed before others in a list) */
287   {
288   }
289
290   .node-unpublished /* Unpublished nodes */
291   {
292     /* background-color: #fff4f4; */ /* Drupal core uses a #fff4f4 background */
293   }
294
295   .node-unpublished div.unpublished, /* The word "Unpublished" displayed beneath the content. */
296   .comment-unpublished div.unpublished
297   {
298     height: 0;
299     overflow: visible;
300     color: #d8d8d8;
301     font-size: 75px;
302     line-height: 1;
303     font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
304     font-weight: bold;
305     text-transform: uppercase;
306     text-align: center;
307     word-wrap: break-word; /* A very nice CSS3 property */
308   }
309
310   .node-mine /* A node created by the current user */
311   {
312   }
313
314   .node-teaser /* A node displayed as teaser */
315   {
316   }
317
318   /* All nodes are given a node-type-FOO class that describes the type of
319    * content that it is. If you create a new content type called
320    * "my-custom-type", it will receive a "node-type-my-custom-type" class.
321    */
322   .node-type-page /* Page content node */
323   {
324   }
325
326   .node-type-story /* Story content node */
327   {
328   }
329
330   .node h2.title /* Node title */
331   {
332   }
333
334   .marker /* "New" or "Updated" marker for content that is new or updated for the current user */
335   {
336     color: #c00;
337   }
338
339   .node .picture /* The picture of the node author */
340   {
341   }
342
343   .node.node-unpublished .picture,
344   .comment.comment-unpublished .picture
345   {
346     position: relative; /* Otherwise floated pictures will appear below the "Unpublished" text. */
347   }
348
349   .node .meta /* Wrapper for submitted and terms data */
350   {
351   }
352
353   .node .submitted /* The "posted by" information */
354   {
355   }
356
357   .node .terms /* Node terms (taxonomy) */
358   {
359   }
360
361   .node .content /* Node's content wrapper */
362   {
363   }
364
365   .node ul.links /* Node links. See also the ul.links declaration above. */
366   {
367   }
368
369   .preview .node /* Preview of the content before submitting new or updated content */
370   {
371     /* background-color: #ffffea; */ /* Drupal core uses a #ffffea background */
372   }
373
374 /** Drupal comments **/
375   #comments /* Wrapper for the list of comments and its title */
376   {
377     margin: 1em 0;
378   }
379
380   #comments-title /* Heading for the list of comments */
381   {
382   }
383
384   .comment /* Wrapper for a single comment */
385   {
386   }
387
388   .comment-inner /* Additional wrapper for a single comment */
389   {
390   }
391
392   .comment-preview /* Preview of the comment before submitting new or updated comment */
393   {
394   }
395
396   .comment.new /* A new comment since the user last viewed the page. */
397   {
398   }
399
400   .comment.odd /* An odd-numbered comment in the list of comments */
401   {
402   }
403
404   .comment.even /* An even-numbered comment in the list of comments */
405   {
406   }
407
408   .comment.first /* The first comment in the list of comments */
409   {
410   }
411
412   .comment.last /* The last comment in the list of comments */
413   {
414   }
415
416   .comment-unpublished /* Unpublished comments */
417   {
418     /* background-color: #fff4f4; */ /* Drupal core uses a #fff4f4 background */
419   }
420
421   .comment-unpublished div.unpublished /* The word "Unpublished" displayed beneath the content. See also the div.unpublished declaration in the node section above. */
422   {
423   }
424
425   .comment-published /* Published comments */
426   {
427   }
428
429   .comment-by-anon /* A comment created by an anonymous user */
430   {
431   }
432
433   .comment-by-author /* A comment created by the node's author */
434   {
435   }
436
437   .comment-mine /* A comment created by the current user */
438   {
439   }
440
441   .comment h3.title /* Comment title */
442   {
443   }
444
445   .new /* "New" marker for comments that are new for the current user */
446   {
447     color: #c00;
448   }
449
450   .comment .picture /* The picture of the comment author */
451   {
452   }
453
454   .comment .submitted /* The "posted by" information */
455   {
456   }
457
458   .comment .content /* Comment's content wrapper */
459   {
460   }
461
462   .comment .user-signature /* The user's signature */
463   {
464   }
465
466   .comment ul.links /* Comment links. See also the ul.links declaration above. */
467   {
468     margin: 1em 0;
469   }
470
471   .indented /* Nested comments are indented */
472   {
473     /* margin-left: 25px; */ /* Drupal core uses a 25px left margin */
474   }
475
476   .preview .comment /* Preview of the comment before submitting new or updated comment */
477   {
478     /* background-color: #ffffea; */ /* Drupal core uses a #ffffea background */
479   }
480
481 /** Drupal blocks **/
482   .block /* Block wrapper */
483   {
484     margin-bottom: 1em;
485   }
486
487   .block.region-odd /* Zebra striping for each block in the region */
488   {
489   }
490
491   .block.region-even /* Zebra striping for each block in the region */
492   {
493   }
494
495   .block.odd /* Zebra striping independent of each region */
496   {
497   }
498
499   .block.even /* Zebra striping independent of each region */
500   {
501   }
502
503   .region-count-1 /* Incremental count for each block in the region */
504   {
505   }
506
507   .count-1 /* Incremental count independent of each region */
508   {
509   }
510
511   .block-inner /* Additional wrapper for block */
512   {
513   }
514
515   .block h2.title /* Block title */
516   {
517   }
518
519   .block .content /* Block's content wrapper */
520   {
521   }
522
523   #block-aggregator-category-1 /* Block for the latest news items in the first category */
524   {
525   }
526
527   #block-aggregator-feed-1 /* Block for the latest news items in the first feed */
528   {
529   }
530
531   #block-block-1 /* First administrator-defined block */
532   {
533   }
534
535   #block-blog-0 /* "Recent blog posts" block */
536   {
537   }
538
539   #block-book-0 /* "Book navigation" block for the current book's table of contents */
540   {
541   }
542
543   #block-comments-0 /* "Recent comments" block */
544   {
545   }
546
547   #block-forum-0 /* "Active forum topics" block */
548   {
549   }
550
551   #block-forum-1 /* "New forum topics" block */
552   {
553   }
554
555   #block-menu-primary-links /* "Primary links" block */
556   {
557   }
558
559   #block-menu-secondary-links /* "Secondary links" block */
560   {
561   }
562
563   #block-node-0 /* "Syndicate" block for primary RSS feed */
564   {
565   }
566
567   #block-poll-0 /* "Most recent poll" block */
568   {
569   }
570
571   #block-profile-0 /* "Author information" block for the profile of the page's author */
572   {
573   }
574
575   #block-search-0 /* "Search form" block */
576   {
577   }
578
579   #block-statistics-0 /* "Popular content" block */
580   {
581   }
582
583   #block-user-0 /* "User login form" block */
584   {
585   }
586
587   #block-user-1 /* "Navigation" block for Drupal navigation menu */
588   {
589   }
590
591   #block-user-2 /* "Who's new" block for a list of the newest users */
592   {
593   }
594
595   #block-user-3 /* "Who's online" block for a list of the online users */
596   {
597   }
598
599 /** Drupal boxes **/
600   /* Wrapper for Comment form, Comment viewing options, Menu admin, and
601    * Search results.
602    */
603   .box /* Wrapper for box */
604   {
605   }
606
607   .box-inner /* Additional wrapper for box */
608   {
609   }
610
611   .box h2.title /* Box title */
612   {
613   }
614
615   .box .content /* Box's content wrapper */
616   {
617   }
618
619 /** Miscellaneous Drupal styles **/
620   .error /* Errors that are separate from div.messages status messages (see above.) */
621   {
622     /* color: #e55; */ /* Drupal core uses a #e55 background */
623   }
624
625   .warning /* Warnings that are separate from div.messages status messages (see above.) */
626   {
627     /* color: #e09010; */ /* Drupal core uses a #e09010 background */
628   }
629
630   .more-link /* Aggregator, blog, and forum more link */
631   {
632     text-align: right;
633   }
634
635   #user-login-form /* Drupal's default login form */
636   {
637     text-align: left;
638   }
639
640   tr.even /* Some tables have rows marked even or odd. */
641   {
642     /* background-color: #eee; */ /* Drupal core uses a #eee background */
643   }
644
645   tr.odd
646   {
647     /* background-color: #eee; */ /* Drupal core uses a #eee background */
648   }
649
650   li a.active /* The active item in a Drupal menu */
651   {
652     color: #000;
653   }
654
655
656 /** Drupal forms **/
657   .form-item, /* Wrapper for a form element (or group of form elements) and its label */
658   .form-checkboxes,
659   .form-radios
660   {
661     margin: 1em 0;
662   }
663
664   .form-item input.error, /* Highlight the form elements that caused a form submission error */
665   .form-item textarea.error,
666   .form-item select.error
667   {
668     border: 2px solid #c00;
669   }
670
671   .form-item label /* The label for a form element */
672   {
673     display: block;
674     font-weight: bold;
675   }
676
677   .form-item label.option /* The label for a radio button or checkbox */
678   {
679     display: inline;
680     font-weight: normal;
681   }
682
683   .form-required /* The part of the label that indicates a required field */
684   {
685     color: #c00;
686   }
687
688   .form-item .description /* The descriptive help text (separate from the label) */
689   {
690     font-size: 0.85em;
691   }
692
693   .form-checkboxes .form-item, /* Pack groups of checkboxes and radio buttons closer together */
694   .form-radios .form-item
695   {
696     margin: 0.4em 0;
697   }
698
699   .form-submit /* The submit button */
700   {
701   }
702
703   .container-inline div, .container-inline label /* Inline labels and form divs */
704   {
705     display: inline;
706   }
707
708   .tips /* Tips for Drupal's input formats */
709   {
710     margin: 0;
711     padding: 0;
712     font-size: 0.9em;
713   }
714
715 /** OpenID **/
716   /* The default styling for the OpenID login link seems to assume Garland's
717    * styling of list items.
718    */
719   #user-login-form ul /* OpenID creates a new ul above the login form's links. */
720   {
721     margin-bottom: 0; /* Position OpenID's ul next to the rest of the links. */
722   }
723
724   #user-login-form li.openid-link, /* The "Log in using OpenID" links. */
725   #user-login li.openid-link
726   {
727     margin-top: 1em;
728     margin-left: -20px; /* Un-do some of the padding on the ul list. */
729   }
730
731   #user-login-form li.user-link /* The "Cancel OpenID login" links. */
732   {
733     margin-top: 1em;
734   }
735
736   #user-login ul
737   {
738     margin: 1em 0;
739   }
740
741   #user-login li.openid-link, /* The OpenID links on the /user form. */
742   #user-login li.user-link
743   {
744     margin-left: -2em; /* Un-do all of the padding on the ul list. */
745   }
746
747 /** Drupal admin tables **/
748   /* We overrode these styles in html-elements.css, but restore them for the
749    * forms on the site.
750    */
751   form tbody
752   {
753     border-top: 1px solid #ccc;
754   }
755
756   form th
757   {
758     text-align: left;
759     padding-right: 1em;
760     border-bottom: 3px solid #ccc;
761   }
762
763   form tbody th
764   {
765     border-bottom: 1px solid #ccc;
766   }
767
768   form thead th
769   {
770     text-align: left;
771     padding-right: 1em;
772     border-bottom: 3px solid #ccc;
773   }