Mercurial > hg > soundsoftware-drupal-theme
comparison html-elements.css @ 0:1700a4568043
Initial import
author | Chris Cannam |
---|---|
date | Thu, 23 Jun 2011 10:31:17 +0100 |
parents | |
children | 10b7ded9b083 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:1700a4568043 |
---|---|
1 /* $Id: html-elements.css,v 1.1.2.2 2009/02/13 19:42:10 johnalbin Exp $ */ | |
2 | |
3 /**** | |
4 **** HTML ELEMENT STYLING | |
5 ****/ | |
6 | |
7 @import url('fonts.css'); | |
8 | |
9 /** fonts **/ | |
10 /* | |
11 * Our font size and line height declarations are based on the following ALA | |
12 * article: | |
13 * http://www.alistapart.com/articles/howtosizetextincss | |
14 * | |
15 * All modern browsrs use a 16px default font size. Specifying the font-size | |
16 * and line-height in ems (relative to the 16px default font) allows the user | |
17 * to resize the font in the browser and produces the most consistent results | |
18 * across different browsers. | |
19 */ | |
20 body | |
21 { | |
22 font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */ | |
23 } | |
24 | |
25 a:link, | |
26 a:visited | |
27 { | |
28 color: #be5700; | |
29 text-decoration: none; | |
30 } | |
31 | |
32 a:hover | |
33 { | |
34 text-decoration: underline; | |
35 } | |
36 | |
37 #page | |
38 { | |
39 /* | |
40 * To use a 12px font size on the page, delete the 14px declarations. | |
41 * to use a 14px font size on the page, delete the 12px declarations. | |
42 */ | |
43 /* | |
44 font-size: 0.8em; | |
45 line-height: 1.5em; | |
46 */ | |
47 /* Use a 12px base font size with a 16px line height */ | |
48 /* font-size: 0.75em; */ /* 16px x .75 = 12px */ | |
49 /* line-height: 1.333em;*/ /* 12px x 1.333 = 16px */ | |
50 | |
51 /* Use a 14px base font size with a 18px line height */ | |
52 /* font-size: 0.875em;*/ /* 16px x .875 = 14px */ | |
53 /* line-height: 1.286em;*/ /* 14px x 1.286 = 18px */ | |
54 | |
55 font-size: 0.94em; | |
56 line-height: 1.3em; | |
57 } | |
58 | |
59 body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 | |
60 { | |
61 font-family: GilliusADFNo2, Candara, Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif; | |
62 background: #fdfaf0; | |
63 color: #3e442c; | |
64 } | |
65 | |
66 pre, code | |
67 { | |
68 font-size: 1.1em; /* Monospace fonts can be hard to read */ | |
69 font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace; | |
70 } | |
71 | |
72 /** headings **/ | |
73 | |
74 h1 | |
75 { | |
76 line-height: 1.3em; | |
77 margin-top: 0; | |
78 margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font. | |
79 Remember, a margin specified in ems is relative to | |
80 the element's font-size, not to the pages' base | |
81 font size. So, for example, if we want a 1em margin | |
82 (relative to the base font), we have to divide that | |
83 length by the element's font-size: | |
84 1em / 2em = 0.5em */ | |
85 font-weight: bold; | |
86 font-size: 1.8em; | |
87 } | |
88 | |
89 h2 | |
90 { | |
91 font-size: 1.6em; | |
92 line-height: 1.3em; | |
93 margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */ | |
94 margin-bottom: 0.667em; | |
95 font-weight: normal; | |
96 } | |
97 | |
98 .block-views h2 | |
99 { | |
100 font-size: 1.2em; | |
101 padding-top: 2em; | |
102 padding-bottom: 0.4em; | |
103 } | |
104 | |
105 .views-field-teaser p | |
106 { | |
107 /* Avoid blank line between title and teaser text for recent notes and upcoming events */ | |
108 margin-top: 0em; | |
109 } | |
110 | |
111 h3 | |
112 { | |
113 font-size: 1.3em; | |
114 line-height: 1.3em; | |
115 margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */ | |
116 margin-bottom: 0.769em; | |
117 font-weight: normal; | |
118 } | |
119 | |
120 h4, h5, h6 | |
121 { | |
122 font-size: 1.1em; | |
123 line-height: 1.3em; | |
124 margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */ | |
125 margin-bottom: 0.909em; | |
126 font-weight: normal; | |
127 } | |
128 | |
129 /** block-level elements **/ | |
130 p, ul, ol, dl, pre, table, fieldset, blockquote | |
131 { | |
132 margin: 1em 0; | |
133 } | |
134 | |
135 /** lists **/ | |
136 /* standardize list item indentation */ | |
137 ul, ol | |
138 { | |
139 margin-left: 0; | |
140 padding-left: 2em; | |
141 } | |
142 | |
143 .block ul, /* Drupal overrides */ | |
144 .item-list ul | |
145 { | |
146 margin: 1em 0; | |
147 padding: 0 0 0 2em; | |
148 } | |
149 | |
150 ul ul, ul ol, | |
151 ol ol, ol ul, | |
152 .block ul ul, .block ul ol, | |
153 .block ol ol, .block ol ul, | |
154 .item-list ul ul, .item-list ul ol, | |
155 .item-list ol ol, .item-list ol ul | |
156 { | |
157 margin: 0; | |
158 } | |
159 | |
160 li | |
161 { | |
162 margin: 0; | |
163 padding: 0; | |
164 } | |
165 | |
166 .item-list ul li /* Drupal override */ | |
167 { | |
168 margin: 0; | |
169 padding: 0; | |
170 list-style: inherit; | |
171 } | |
172 | |
173 ul.menu li, /* Drupal override */ | |
174 li.expanded, | |
175 li.collapsed, | |
176 li.leaf | |
177 { | |
178 margin: 0; | |
179 padding: 0; | |
180 } | |
181 | |
182 ul { list-style-type: disc; } | |
183 ul ul { list-style-type: circle; } | |
184 ul ul ul { list-style-type: square; } | |
185 ul ul ul ul { list-style-type: circle; } | |
186 ol { list-style-type: decimal; } | |
187 ol ol { list-style-type: lower-alpha; } | |
188 ol ol ol { list-style-type: decimal; } | |
189 | |
190 dt | |
191 { | |
192 margin: 0; | |
193 padding: 0; | |
194 } | |
195 | |
196 dd | |
197 { | |
198 margin: 0 0 0 2em; | |
199 padding: 0; | |
200 } | |
201 | |
202 /** links **/ | |
203 /* The order of link states are based on Eric Meyer's article: | |
204 * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states | |
205 */ | |
206 a:link | |
207 { | |
208 } | |
209 | |
210 a:visited | |
211 { | |
212 } | |
213 | |
214 a:hover, | |
215 a:focus | |
216 { | |
217 } | |
218 | |
219 a:active | |
220 { | |
221 } | |
222 | |
223 /** tables **/ | |
224 /* Override Drupal default CSS */ | |
225 table | |
226 { | |
227 border-collapse: collapse; | |
228 /* width: 100%; */ /* Prevent cramped-looking tables */ | |
229 } | |
230 | |
231 th, | |
232 thead th, | |
233 tbody th | |
234 { | |
235 text-align: left; | |
236 padding-right: 0; | |
237 border-bottom: none; | |
238 } | |
239 | |
240 tbody | |
241 { | |
242 border-top: none; | |
243 } | |
244 | |
245 /** abbreviations **/ | |
246 abbr | |
247 { | |
248 border-bottom: 1px dotted #666; | |
249 cursor: help; | |
250 white-space: nowrap; | |
251 } | |
252 | |
253 /* Date-based "abbreviations" show computer-friendly timestamps which are not | |
254 human-friendly. */ | |
255 abbr.created | |
256 { | |
257 border: none; | |
258 cursor: auto; | |
259 white-space: normal; | |
260 } | |
261 | |
262 /** images **/ | |
263 img | |
264 { | |
265 border: 0; | |
266 } | |
267 | |
268 /** horizontal rules **/ | |
269 hr | |
270 { | |
271 height: 1px; | |
272 border: 1px solid #666; | |
273 } | |
274 | |
275 /** forms **/ | |
276 form | |
277 { | |
278 margin: 0; | |
279 padding: 0; | |
280 } | |
281 | |
282 fieldset | |
283 { | |
284 margin: 1em 0; | |
285 padding: 0.5em; | |
286 } |