eb6b41294d3ff4d9e05a464c698c080c5f79e265
[project/zen.git] / STARTERKIT / css / html-reset.css
1 /**
2  * @file
3  * HTML Element Styling
4  *
5  * Ok, I admit it. I fooled you. This isn't a "reset" stylesheet. Instead this
6  * is the place where you should set (not reset) the default styling for all
7  * HTML elements.
8  *
9  * @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
10  * @see http://snook.ca/archives/html_and_css/no_css_reset/
11  */
12
13
14 /*
15  * Fonts
16  *
17  * Our font size and line height declarations are based on the following
18  * articles:
19  * - http://www.alistapart.com/articles/howtosizetextincss
20  * - http://24ways.org/2006/compose-to-a-vertical-rhythm
21  *
22  * All modern browsers use a 16px default font size. Specifying the font-size
23  * and line-height in ems (relative to the 16px default font) allows the user
24  * to resize the font in the browser and produces the most consistent results
25  * across different browsers.
26  */
27 body {
28   font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
29 }
30
31 #skip-to-nav,
32 #page {
33   /*
34    * To use a 12px font size on the page, delete the 14px declarations.
35    * to use a 14px font size on the page, delete the 12px declarations.
36    */
37
38   /* Use a 12px base font size with a 18px line height */
39   font-size: 0.75em; /* 16px x .75 = 12px */
40   line-height: 1.5em; /* 12px x 1.5 = 18px */
41
42   /* Use a 14px base font size with a 21px line height */
43   font-size: 0.875em; /* 16px x .875 = 14px */
44   line-height: 1.5em; /* 14px x 1.5 = 21px */
45 }
46
47 /*
48  * Instead of relying on the fonts that are available on a user's computer, you
49  * can use web fonts which, like images, are resources downloaded to the user's
50  * browser. Because of the bandwidth and rendering resources required, web fonts
51  * should be used with care.
52  *
53  * Numerous resources for web fonts can be found on Google. Here are a few
54  * websites where you can find Open Source fonts to download:
55  * - http://www.fontsquirrel.com/fontface
56  * - http://www.theleagueofmoveabletype.com
57  *
58  * In order to use these fonts, you will need to convert them into formats
59  * suitable for web fonts. We recommend the free-to-use Font Squirrel's
60  * Font-Face Generator:
61  *   http://www.fontsquirrel.com/fontface/generator
62  *
63  * The following is an example @font-face declaration. This font can then be
64  * used in any ruleset using a property like this:  font-family: Example, serif;
65
66 @font-face {
67   font-family: 'Example';
68   src: url('../fonts/example.eot');
69   src: url('../fonts/example.eot?iefix') format('eot'),
70     url('../fonts/example.woff') format('woff'),
71     url('../fonts/example.ttf') format('truetype'),
72     url('../fonts/example.svg#webfontOkOndcij') format('svg');
73   font-weight: normal;
74   font-style: normal;
75 }
76
77  */
78
79 body,
80 caption,
81 th,
82 td,
83 input,
84 textarea,
85 select,
86 option,
87 legend,
88 fieldset {
89   /* The following font family declarations are based on the Microsoft core web
90    * fonts which are common fonts available on most computer systems. The DejaVu
91    * and Nimbus Sans fonts are commonly available on Linux systems where the MS
92    * fonts are less common. Tahoma and Helvetica are also widely available.
93    *
94    * A user's web browser will look at the comma-separated list and will
95    * attempt to use each font in turn until it finds one that is available
96    * on the user's computer. The final "generic" font (sans-serif, serif or
97    * monospace) hints at what type of font to use if the web browser doesn't
98    * find any of the fonts in the list.
99
100   font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
101   font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
102   font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
103
104   font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
105   font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
106   font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
107   font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
108
109   font-family: "Courier New", "DejaVu Sans Mono", monospace;
110
111    */
112
113   font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
114 }
115
116 pre,
117 code {
118   font-family: "Courier New", "DejaVu Sans Mono", monospace;
119 }
120
121 /*
122  * Block-level elements
123  *
124  * To achieve a pleasant vertical rhythm, we use the 1.5em line height of our
125  * base font as the top and bottom margins for our block level elements and make
126  * the line heights of any larger fonts be a multiple of 1.5 ems. For more
127  * information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
128  */
129 h1, h2, h3, h4, h5, h6
130 p, blockquote, pre,
131 ul, ol, dl,
132 hr, table, fieldset {
133   margin: 1.5em 0;
134 }
135
136 /* Headings */
137 h1 {
138   font-size: 2em;
139   line-height: 1.5em;
140   margin: 0.75em 0;
141   /* 0.75em is equivalent to 1.5em in the page's base font. font. Remember, a
142      margin specified in ems is relative to the element's font-size, not to the
143      pages' base font size. So, for example, if we want a 1.5em margin (relative
144      to the base font), we have to divide that length by the element's
145      font-size:  1.5em / 2em = 0.5em  */
146 }
147
148 h2 {
149   font-size: 1.5em;
150   margin: 1em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.5 = 1em */
151 }
152
153 h3 {
154   font-size: 1.3em;
155   margin: 1.154em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.3 = 1.154 */
156 }
157
158 h4,
159 h5,
160 h6 {
161   font-size: 1.1em;
162   margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
163 }
164
165 /* Other block-level elements */
166 p {
167 }
168
169 blockquote {
170   margin-left: 2em;
171   margin-right: 2em;
172 }
173
174 pre {
175   font-size: 1.1em; /* Monospace fonts can be hard to read */
176   margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
177 }
178
179 hr {
180   height: 1px;
181   border: 1px solid #666;
182 }
183
184 address {
185 }
186
187 /*
188  * Lists
189  *
190  * We need to standardize the list item indentation.
191  */
192 ul,
193 ol {
194   margin-left: 0; /* LTR */
195   padding-left: 2em; /* LTR */
196 }
197
198 .item-list ul /* Drupal overrides */ {
199   margin: 1.5em 0;
200   padding: 0 0 0 2em; /* LTR */
201 }
202
203 ul ul, ul ol,
204 ol ol, ol ul,
205 .item-list ul ul, .item-list ul ol,
206 .item-list ol ol, .item-list ol ul {
207   margin: 0;
208 }
209
210 li {
211   margin: 0;
212   padding: 0;
213 }
214
215 .item-list ul li,
216 ul.menu li,
217 li.expanded,
218 li.collapsed,
219 li.leaf /* Drupal override */ {
220   margin: 0;
221   padding: 0;
222 }
223
224 ul          { list-style-type: disc; }
225 ul ul       { list-style-type: circle; }
226 ul ul ul    { list-style-type: square; }
227 ul ul ul ul { list-style-type: circle; }
228 ol          { list-style-type: decimal; }
229 ol ol       { list-style-type: lower-alpha; }
230 ol ol ol    { list-style-type: decimal; }
231
232 dl {
233 }
234
235 dt {
236   margin: 0;
237   padding: 0;
238 }
239
240 dd {
241   margin: 0 0 0 2em; /* LTR */
242   padding: 0;
243 }
244
245 /*
246  * Tables
247  *
248  * Drupal provides table styling which is only useful for its admin section
249  * forms, so we override this default CSS. (We set it back in forms.css.)
250  */
251 table {
252   border-collapse: collapse;
253   /* width: 100%; */ /* Prevent cramped-looking tables */
254 }
255
256 th {
257   text-align: left; /* LTR */
258   padding: 0;
259   border-bottom: none;
260 }
261
262 tbody {
263   border-top: none;
264 }
265
266 /*
267  * Abbreviations
268  */
269 abbr {
270   border-bottom: 1px dotted #666;
271   cursor: help;
272   white-space: nowrap;
273 }
274
275 abbr.created /* Date-based "abbreviations" show computer-friendly timestamps which are not human-friendly. */ {
276   border: none;
277   cursor: auto;
278   white-space: normal;
279 }
280
281 /*
282  * Images
283  */
284 img {
285   border: 0;
286 }
287
288 /*
289  * Forms
290  */
291 form {
292   margin: 0;
293   padding: 0;
294 }
295
296 fieldset {
297   padding: 0.5em;
298 }
299
300 /*
301  * Links
302  *
303  * The order of link states are based on Eric Meyer's article:
304  * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
305  */
306 a:link {
307 }
308
309 a:visited {
310 }
311
312 a:hover,
313 a:focus {
314 }
315
316 a:active {
317 }