|
1 /* -------------------------------------------------------------- |
|
2 |
|
3 typography.css |
|
4 * Sets up some sensible default typography. |
|
5 |
|
6 Based on work by: |
|
7 * Nathan Borror [playgroundblues.com] |
|
8 * Jeff Croft [jeffcroft.com] |
|
9 * Christian Metts [mintchaos.com] |
|
10 * Wilson Miner [wilsonminer.com] |
|
11 * Richard Rutter [clagnut.com] |
|
12 |
|
13 Read more about using a baseline here: |
|
14 * alistapart.com/articles/settingtypeontheweb |
|
15 |
|
16 -------------------------------------------------------------- */ |
|
17 |
|
18 /* This is where you set your desired font size. The line-heights |
|
19 and vertical margins are automatically calculated from this. |
|
20 The percentage is of 16px (0.75 * 16px = 12px). */ |
|
21 |
|
22 body { font-size: 75%; } |
|
23 |
|
24 |
|
25 /* Default fonts and colors. |
|
26 If you prefer serif fonts, remove the font-family |
|
27 on the headings, and apply this one to the body: |
|
28 font: 1em Georgia, "lucida bright", "times new roman", serif; */ |
|
29 |
|
30 body { |
|
31 color: #222; |
|
32 font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; |
|
33 } |
|
34 h1,h2,h3,h4,h5,h6 { |
|
35 color: #111; |
|
36 font-family: Georgia; |
|
37 } |
|
38 |
|
39 |
|
40 /* Headings |
|
41 -------------------------------------------------------------- */ |
|
42 |
|
43 h1,h2,h3,h4,h5,h6 { font-weight: normal; } |
|
44 |
|
45 h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } |
|
46 h2 { font-size: 2em; margin-bottom: 0.75em; } |
|
47 h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } |
|
48 h4 { font-size: 1.5em; line-height: 1; } |
|
49 h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } |
|
50 h6 { font-size: 1em; font-weight: bold; } |
|
51 |
|
52 |
|
53 /* Text elements |
|
54 -------------------------------------------------------------- */ |
|
55 |
|
56 p { margin: 0 0 1.5em; } |
|
57 p.last { margin-bottom: 0; } |
|
58 p img { float: left; margin: 1em 1em 1em 0; padding: 0; } |
|
59 p img.top { margin-top: 0; } /* Use this if the image is at the top of the <p>. */ |
|
60 img { margin: 0 0 1.5em; } |
|
61 |
|
62 ul, ol { margin:0 1.5em 1.5em 1.5em; } |
|
63 ul { list-style-type: circle; } |
|
64 ol { list-style-type: decimal; } |
|
65 dl { margin: 0 0 1.5em 0; } |
|
66 dl dt { font-weight: bold; } |
|
67 dd { margin-left: 1.5em;} |
|
68 |
|
69 abbr, |
|
70 acronym { border-bottom: 1px dotted #666; } |
|
71 address { margin-top: 1.5em; font-style: italic; } |
|
72 del { color:#666; } |
|
73 |
|
74 a:focus, |
|
75 a:hover { color: #000; } |
|
76 a { color: #009; text-decoration: underline; } |
|
77 |
|
78 blockquote { margin: 1.5em; color: #666; font-style: italic; } |
|
79 strong { font-weight: bold; } |
|
80 em,dfn { font-style: italic; } |
|
81 dfn { font-weight: bold; } |
|
82 pre,code { margin: 1.5em 0; white-space: pre; } |
|
83 pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } |
|
84 tt { display: block; margin: 1.5em 0; line-height: 1.5; } |
|
85 |
|
86 |
|
87 /* Tables |
|
88 -------------------------------------------------------------- */ |
|
89 |
|
90 table { margin-bottom: 1.4em; } |
|
91 th { border-bottom: 1px solid #e8e8e8; font-weight: bold; } |
|
92 td { border-bottom: 1px solid #ddd; } |
|
93 th,td { padding: 4px 10px 4px 0; } |
|
94 tfoot { font-style: italic; } |
|
95 caption { float:relative; background: #ffc; margin-top:-35px; padding-bottom:10px; text-align:right; vertical-align:top;} |
|
96 |
|
97 /* for safari |
|
98 html[xmlns*=""] body:last-child #caption { |
|
99 margin-top: -35px; |
|
100 } |
|
101 */ |
|
102 |
|
103 |
|
104 /* Use this if you use span-x classes on th/td. */ |
|
105 table .last { padding-right: 0; } |
|
106 |
|
107 |
|
108 /* Some default classes |
|
109 -------------------------------------------------------------- */ |
|
110 |
|
111 .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } |
|
112 .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } |
|
113 .quiet { color: #ccc; } |
|
114 |
|
115 .hide { display: none; } |
|
116 .highlight { background:#ff0; } |
|
117 .added { color:#060; } |
|
118 .removed { color:#900; } |
|
119 .dotted {border-bottom: 1px dotted;} |
|
120 |
|
121 .top { margin-top:0; padding-top:0; } |
|
122 .bottom { margin-bottom:0; padding-bottom:0; } |
|
123 |
|
124 |