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