|
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 * Detailed information about this CSS: h5bp.com/css |
|
9 * |
|
10 * ==|== normalize ========================================================== |
|
11 */ |
|
12 |
|
13 /* ============================================================================= |
|
14 HTML5 display definitions |
|
15 ========================================================================== */ |
|
16 |
|
17 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } |
|
18 audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } |
|
19 audio:not([controls]) { display: none; } |
|
20 [hidden] { display: none; } |
|
21 |
|
22 |
|
23 /* ============================================================================= |
|
24 Base |
|
25 ========================================================================== */ |
|
26 |
|
27 /* |
|
28 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units |
|
29 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g |
|
30 */ |
|
31 |
|
32 html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } |
|
33 html, button, input, select, textarea { font-family: sans-serif; color: #222; } |
|
34 body { margin: 0; font-size: 1em; line-height: 1.4; } |
|
35 |
|
36 /* |
|
37 * Remove text-shadow in selection highlight: h5bp.com/i |
|
38 * These selection declarations have to be separate |
|
39 * Also: hot pink! (or customize the background color to match your design) |
|
40 */ |
|
41 |
|
42 ::-moz-selection { background: #999; color: #fff; text-shadow: none; } |
|
43 ::selection { background: #999; color: #fff; text-shadow: none; } |
|
44 |
|
45 |
|
46 /* ============================================================================= |
|
47 Links |
|
48 ========================================================================== */ |
|
49 |
|
50 a { color: #00e; } |
|
51 a:visited {} |
|
52 a:hover {} |
|
53 a:focus { outline: thin dotted; } |
|
54 |
|
55 /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ |
|
56 a:hover, a:active { outline: 0; } |
|
57 |
|
58 |
|
59 /* ============================================================================= |
|
60 Typography |
|
61 ========================================================================== */ |
|
62 |
|
63 abbr[title] { border-bottom: 1px dotted; } |
|
64 b, strong { font-weight: bold; } |
|
65 blockquote { margin: 1em 40px; } |
|
66 dfn { font-style: italic; } |
|
67 hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } |
|
68 ins { background: #ff9; color: #000; text-decoration: none; } |
|
69 mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } |
|
70 |
|
71 /* Redeclare monospace font family: h5bp.com/j */ |
|
72 pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } |
|
73 |
|
74 /* Improve readability of pre-formatted text in all browsers */ |
|
75 pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } |
|
76 |
|
77 q { quotes: none; } |
|
78 q:before, q:after { content: ""; content: none; } |
|
79 |
|
80 small { font-size: 85%; } |
|
81 |
|
82 /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ |
|
83 sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } |
|
84 sup { top: -0.5em; } |
|
85 sub { bottom: -0.25em; } |
|
86 |
|
87 |
|
88 /* ============================================================================= |
|
89 Lists |
|
90 ========================================================================== */ |
|
91 |
|
92 ul, ol { margin: 1em 0; padding: 0 0 0 40px; } |
|
93 dd { margin: 0 0 0 40px; } |
|
94 nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } |
|
95 |
|
96 |
|
97 /* ============================================================================= |
|
98 Embedded content |
|
99 ========================================================================== */ |
|
100 |
|
101 /* |
|
102 * 1. Improve image quality when scaled in IE7: h5bp.com/d |
|
103 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 |
|
104 */ |
|
105 |
|
106 img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } |
|
107 |
|
108 /* |
|
109 * Correct overflow not hidden in IE9 |
|
110 */ |
|
111 |
|
112 svg:not(:root) { overflow: hidden; } |
|
113 |
|
114 |
|
115 /* ============================================================================= |
|
116 Figures |
|
117 ========================================================================== */ |
|
118 |
|
119 figure { margin: 0; } |
|
120 |
|
121 |
|
122 /* ============================================================================= |
|
123 Forms |
|
124 ========================================================================== */ |
|
125 |
|
126 form { margin: 0; } |
|
127 fieldset { border: 0; margin: 0; padding: 0; } |
|
128 |
|
129 /* Indicate that 'label' will shift focus to the associated form element */ |
|
130 label { cursor: pointer; } |
|
131 |
|
132 /* |
|
133 * 1. Correct color not inheriting in IE6/7/8/9 |
|
134 * 2. Correct alignment displayed oddly in IE6/7 |
|
135 */ |
|
136 |
|
137 legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } |
|
138 |
|
139 /* |
|
140 * 1. Correct font-size not inheriting in all browsers |
|
141 * 2. Remove margins in FF3/4 S5 Chrome |
|
142 * 3. Define consistent vertical alignment display in all browsers |
|
143 */ |
|
144 |
|
145 button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } |
|
146 |
|
147 /* |
|
148 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) |
|
149 */ |
|
150 |
|
151 button, input { line-height: normal; } |
|
152 |
|
153 /* |
|
154 * 1. Display hand cursor for clickable form elements |
|
155 * 2. Allow styling of clickable form elements in iOS |
|
156 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) |
|
157 */ |
|
158 |
|
159 button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } |
|
160 |
|
161 /* |
|
162 * Re-set default cursor for disabled elements |
|
163 */ |
|
164 |
|
165 button[disabled], input[disabled] { cursor: default; } |
|
166 |
|
167 /* |
|
168 * Consistent box sizing and appearance |
|
169 */ |
|
170 |
|
171 input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } |
|
172 input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } |
|
173 input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } |
|
174 |
|
175 /* |
|
176 * Remove inner padding and border in FF3/4: h5bp.com/l |
|
177 */ |
|
178 |
|
179 button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } |
|
180 |
|
181 /* |
|
182 * 1. Remove default vertical scrollbar in IE6/7/8/9 |
|
183 * 2. Allow only vertical resizing |
|
184 */ |
|
185 |
|
186 textarea { overflow: auto; vertical-align: top; resize: vertical; } |
|
187 |
|
188 /* Colors for form validity */ |
|
189 input:valid, textarea:valid { } |
|
190 input:invalid, textarea:invalid { background-color: #f0dddd; } |
|
191 |
|
192 |
|
193 /* ============================================================================= |
|
194 Tables |
|
195 ========================================================================== */ |
|
196 |
|
197 table { border-collapse: collapse; border-spacing: 0; } |
|
198 td { vertical-align: top; } |
|
199 |
|
200 |
|
201 /* ============================================================================= |
|
202 Chrome Frame Prompt |
|
203 ========================================================================== */ |
|
204 |
|
205 .chromeframe { top: 60px;z-index: 999; background: #ccc; color: black; padding: 0.2em 0.5em; position: absolute; width: 100%; } |
|
206 |
|
207 |
|
208 /* ==|== media queries ====================================================== |
|
209 EXAMPLE Media Query for Responsive Design. |
|
210 This example overrides the primary ('mobile first') styles |
|
211 Modify as content requires. |
|
212 ========================================================================== */ |
|
213 |
|
214 @media only screen and (min-width: 35em) { |
|
215 /* Style adjustments for viewports that meet the condition */ |
|
216 } |
|
217 |
|
218 |
|
219 |
|
220 /* ==|== non-semantic helper classes ======================================== |
|
221 Please define your styles before this section. |
|
222 ========================================================================== */ |
|
223 |
|
224 /* For image replacement */ |
|
225 .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } |
|
226 .ir br { display: none; } |
|
227 |
|
228 /* Hide from both screenreaders and browsers: h5bp.com/u */ |
|
229 .hidden { display: none !important; visibility: hidden; } |
|
230 |
|
231 /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ |
|
232 .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } |
|
233 |
|
234 /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ |
|
235 .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } |
|
236 |
|
237 /* Hide visually and from screenreaders, but maintain layout */ |
|
238 .invisible { visibility: hidden; } |
|
239 |
|
240 /* Contain floats: h5bp.com/q */ |
|
241 .clearfix:before, .clearfix:after { content: ""; display: table; } |
|
242 .clearfix:after { clear: both; } |
|
243 .clearfix { *zoom: 1; } |
|
244 |
|
245 |
|
246 /* ==|== print styles ======================================================= |
|
247 Print styles. |
|
248 Inlined to avoid required HTTP connection: h5bp.com/r |
|
249 ========================================================================== */ |
|
250 |
|
251 @media print { |
|
252 * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ |
|
253 a, a:visited { text-decoration: underline; } |
|
254 a[href]:after { content: " (" attr(href) ")"; } |
|
255 abbr[title]:after { content: " (" attr(title) ")"; } |
|
256 .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ |
|
257 pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } |
|
258 thead { display: table-header-group; } /* h5bp.com/t */ |
|
259 tr, img { page-break-inside: avoid; } |
|
260 img { max-width: 100% !important; } |
|
261 @page { margin: 0.5cm; } |
|
262 p, h2, h3 { orphans: 3; widows: 3; } |
|
263 h2, h3 { page-break-after: avoid; } |
|
264 } |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |