|
1 /* |
|
2 * HTML5 Boilerplate |
|
3 * |
|
4 * What follows is the result of much research on cross-browser styling. |
|
5 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
|
6 * Kroc Camen, and the H5BP dev community and team. |
|
7 */ |
|
8 |
|
9 /* ========================================================================== |
|
10 Base styles: opinionated defaults |
|
11 ========================================================================== */ |
|
12 |
|
13 html, |
|
14 button, |
|
15 input, |
|
16 select, |
|
17 textarea { |
|
18 color: #222; |
|
19 } |
|
20 |
|
21 body { |
|
22 font-size: 1em; |
|
23 line-height: 1.4; |
|
24 } |
|
25 |
|
26 /* |
|
27 * Remove text-shadow in selection highlight: h5bp.com/i |
|
28 * These selection declarations have to be separate. |
|
29 * Customize the background color to match your design. |
|
30 */ |
|
31 |
|
32 ::-moz-selection { |
|
33 background: #b3d4fc; |
|
34 text-shadow: none; |
|
35 } |
|
36 |
|
37 ::selection { |
|
38 background: #b3d4fc; |
|
39 text-shadow: none; |
|
40 } |
|
41 |
|
42 /* |
|
43 * A better looking default horizontal rule |
|
44 */ |
|
45 |
|
46 hr { |
|
47 display: block; |
|
48 height: 1px; |
|
49 border: 0; |
|
50 border-top: 1px solid #ccc; |
|
51 margin: 1em 0; |
|
52 padding: 0; |
|
53 } |
|
54 |
|
55 /* |
|
56 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 |
|
57 */ |
|
58 |
|
59 img { |
|
60 vertical-align: middle; |
|
61 } |
|
62 |
|
63 /* |
|
64 * Remove default fieldset styles. |
|
65 */ |
|
66 |
|
67 fieldset { |
|
68 border: 0; |
|
69 margin: 0; |
|
70 padding: 0; |
|
71 } |
|
72 |
|
73 /* |
|
74 * Allow only vertical resizing of textareas. |
|
75 */ |
|
76 |
|
77 textarea { |
|
78 resize: vertical; |
|
79 } |
|
80 |
|
81 /* ========================================================================== |
|
82 Chrome Frame prompt |
|
83 ========================================================================== */ |
|
84 |
|
85 .chromeframe { |
|
86 margin: 0.2em 0; |
|
87 background: #ccc; |
|
88 color: #000; |
|
89 padding: 0.2em 0; |
|
90 } |
|
91 |
|
92 /* ========================================================================== |
|
93 Author's custom styles |
|
94 ========================================================================== */ |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 /* ========================================================================== |
|
113 Helper classes |
|
114 ========================================================================== */ |
|
115 |
|
116 /* |
|
117 * Image replacement |
|
118 */ |
|
119 |
|
120 .ir { |
|
121 background-color: transparent; |
|
122 border: 0; |
|
123 overflow: hidden; |
|
124 /* IE 6/7 fallback */ |
|
125 *text-indent: -9999px; |
|
126 } |
|
127 |
|
128 .ir:before { |
|
129 content: ""; |
|
130 display: block; |
|
131 width: 0; |
|
132 height: 100%; |
|
133 } |
|
134 |
|
135 /* |
|
136 * Hide from both screenreaders and browsers: h5bp.com/u |
|
137 */ |
|
138 |
|
139 .hidden { |
|
140 display: none !important; |
|
141 visibility: hidden; |
|
142 } |
|
143 |
|
144 /* |
|
145 * Hide only visually, but have it available for screenreaders: h5bp.com/v |
|
146 */ |
|
147 |
|
148 .visuallyhidden { |
|
149 border: 0; |
|
150 clip: rect(0 0 0 0); |
|
151 height: 1px; |
|
152 margin: -1px; |
|
153 overflow: hidden; |
|
154 padding: 0; |
|
155 position: absolute; |
|
156 width: 1px; |
|
157 } |
|
158 |
|
159 /* |
|
160 * Extends the .visuallyhidden class to allow the element to be focusable |
|
161 * when navigated to via the keyboard: h5bp.com/p |
|
162 */ |
|
163 |
|
164 .visuallyhidden.focusable:active, |
|
165 .visuallyhidden.focusable:focus { |
|
166 clip: auto; |
|
167 height: auto; |
|
168 margin: 0; |
|
169 overflow: visible; |
|
170 position: static; |
|
171 width: auto; |
|
172 } |
|
173 |
|
174 /* |
|
175 * Hide visually and from screenreaders, but maintain layout |
|
176 */ |
|
177 |
|
178 .invisible { |
|
179 visibility: hidden; |
|
180 } |
|
181 |
|
182 /* |
|
183 * Clearfix: contain floats |
|
184 * |
|
185 * For modern browsers |
|
186 * 1. The space content is one way to avoid an Opera bug when the |
|
187 * `contenteditable` attribute is included anywhere else in the document. |
|
188 * Otherwise it causes space to appear at the top and bottom of elements |
|
189 * that receive the `clearfix` class. |
|
190 * 2. The use of `table` rather than `block` is only necessary if using |
|
191 * `:before` to contain the top-margins of child elements. |
|
192 */ |
|
193 |
|
194 .clearfix:before, |
|
195 .clearfix:after { |
|
196 content: " "; /* 1 */ |
|
197 display: table; /* 2 */ |
|
198 } |
|
199 |
|
200 .clearfix:after { |
|
201 clear: both; |
|
202 } |
|
203 |
|
204 /* |
|
205 * For IE 6/7 only |
|
206 * Include this rule to trigger hasLayout and contain floats. |
|
207 */ |
|
208 |
|
209 .clearfix { |
|
210 *zoom: 1; |
|
211 } |
|
212 |
|
213 /* ========================================================================== |
|
214 EXAMPLE Media Queries for Responsive Design. |
|
215 Theses examples override the primary ('mobile first') styles. |
|
216 Modify as content requires. |
|
217 ========================================================================== */ |
|
218 |
|
219 @media only screen and (min-width: 35em) { |
|
220 /* Style adjustments for viewports that meet the condition */ |
|
221 } |
|
222 |
|
223 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), |
|
224 only screen and (min-resolution: 144dpi) { |
|
225 /* Style adjustments for high resolution devices */ |
|
226 } |
|
227 |
|
228 /* ========================================================================== |
|
229 Print styles. |
|
230 Inlined to avoid required HTTP connection: h5bp.com/r |
|
231 ========================================================================== */ |
|
232 |
|
233 @media print { |
|
234 * { |
|
235 background: transparent !important; |
|
236 color: #000 !important; /* Black prints faster: h5bp.com/s */ |
|
237 box-shadow: none !important; |
|
238 text-shadow: none !important; |
|
239 } |
|
240 |
|
241 a, |
|
242 a:visited { |
|
243 text-decoration: underline; |
|
244 } |
|
245 |
|
246 a[href]:after { |
|
247 content: " (" attr(href) ")"; |
|
248 } |
|
249 |
|
250 abbr[title]:after { |
|
251 content: " (" attr(title) ")"; |
|
252 } |
|
253 |
|
254 /* |
|
255 * Don't show links for images, or javascript/internal links |
|
256 */ |
|
257 |
|
258 .ir a:after, |
|
259 a[href^="javascript:"]:after, |
|
260 a[href^="#"]:after { |
|
261 content: ""; |
|
262 } |
|
263 |
|
264 pre, |
|
265 blockquote { |
|
266 border: 1px solid #999; |
|
267 page-break-inside: avoid; |
|
268 } |
|
269 |
|
270 thead { |
|
271 display: table-header-group; /* h5bp.com/t */ |
|
272 } |
|
273 |
|
274 tr, |
|
275 img { |
|
276 page-break-inside: avoid; |
|
277 } |
|
278 |
|
279 img { |
|
280 max-width: 100% !important; |
|
281 } |
|
282 |
|
283 @page { |
|
284 margin: 0.5cm; |
|
285 } |
|
286 |
|
287 p, |
|
288 h2, |
|
289 h3 { |
|
290 orphans: 3; |
|
291 widows: 3; |
|
292 } |
|
293 |
|
294 h2, |
|
295 h3 { |
|
296 page-break-after: avoid; |
|
297 } |
|
298 } |