|
1 /* http://meyerweb.com/eric/tools/css/reset/ |
|
2 v2.0 | 20110126 |
|
3 License: none (public domain) |
|
4 */ |
|
5 |
|
6 html, body, div, span, applet, object, iframe, |
|
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
8 a, abbr, acronym, address, big, cite, code, |
|
9 del, dfn, em, img, ins, kbd, q, s, samp, |
|
10 small, strike, strong, sub, sup, tt, var, |
|
11 b, u, i, center, |
|
12 dl, dt, dd, ol, ul, li, |
|
13 fieldset, form, label, legend, |
|
14 table, caption, tbody, tfoot, thead, tr, th, td, |
|
15 article, aside, canvas, details, embed, |
|
16 figure, figcaption, footer, header, hgroup, |
|
17 menu, nav, output, ruby, section, summary, |
|
18 time, mark, audio, video { |
|
19 margin: 0; |
|
20 padding: 0; |
|
21 border: 0; |
|
22 font-size: 100%; |
|
23 font: inherit; |
|
24 vertical-align: baseline; |
|
25 } |
|
26 /* HTML5 display-role reset for older browsers */ |
|
27 article, aside, details, figcaption, figure, |
|
28 footer, header, hgroup, menu, nav, section { |
|
29 display: block; |
|
30 } |
|
31 body { |
|
32 line-height: 1; |
|
33 } |
|
34 ol, ul { |
|
35 list-style: none; |
|
36 } |
|
37 blockquote, q { |
|
38 quotes: none; |
|
39 } |
|
40 blockquote:before, blockquote:after, |
|
41 q:before, q:after { |
|
42 content: ''; |
|
43 content: none; |
|
44 } |
|
45 table { |
|
46 border-collapse: collapse; |
|
47 border-spacing: 0; |
|
48 } |
|
49 |
|
50 .clear{ |
|
51 clear: both; |
|
52 } |
|
53 |
|
54 input::-moz-focus-inner { |
|
55 border: 0 none; |
|
56 padding: 0; |
|
57 } |
|
58 |
|
59 /* END RESET.CSS */ |
|
60 |
|
61 html { |
|
62 font-family: Arial, Helvetica, sans-serif; |
|
63 } |
|
64 |
|
65 body { |
|
66 background: #FFFFFF; |
|
67 } |
|
68 |
|
69 a { |
|
70 text-decoration: none; color: inherit; |
|
71 } |
|
72 |
|
73 a:hover { |
|
74 text-decoration: underline; |
|
75 } |
|
76 |
|
77 .fullwidth { |
|
78 width: 100%; float: left; clear: both; |
|
79 } |
|
80 |
|
81 header, .main { |
|
82 width: 968px; margin: 0 auto; |
|
83 } |
|
84 |
|
85 .header-wrap { |
|
86 background: #666666; /* Old browsers */ |
|
87 background: -moz-linear-gradient(top, #666666 20%, #333333 80%); /* FF3.6+ */ |
|
88 background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#666666), color-stop(80%,#333333)); /* Chrome,Safari4+ */ |
|
89 background: -webkit-linear-gradient(top, #666666 20%,#333333 80%); /* Chrome10+,Safari5.1+ */ |
|
90 background: -o-linear-gradient(top, #666666 20%,#333333 80%); /* Opera 11.10+ */ |
|
91 background: -ms-linear-gradient(top, #666666 20%,#333333 80%); /* IE10+ */ |
|
92 background: linear-gradient(to bottom, #666666 20%,#333333 80%); /* W3C */ |
|
93 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */ |
|
94 } |
|
95 |
|
96 header { |
|
97 height: 40px; |
|
98 } |
|
99 |
|
100 |
|
101 h1 { |
|
102 font-weight: bold; |
|
103 font-size: 24px; |
|
104 text-shadow: 1px 1px 1px #000; color: #f0f0f0; |
|
105 } |
|
106 |
|
107 nav { |
|
108 text-align: right; color: #ffffff; font-size: 13px; margin: 5px 0; |
|
109 } |
|
110 |
|
111 h2 { |
|
112 font-size: 18px; font-weight: bold; color: #003366; |
|
113 margin: 10px 0 5px; padding-bottom: 5px; border-bottom: 1px solid #666; |
|
114 } |
|
115 |
|
116 h3 { |
|
117 font-size: 13px; font-weight: bold; color: #555555; margin: 4px 0; |
|
118 } |
|
119 |
|
120 h4 { |
|
121 font-size: 12px; font-style: italic; margin: 4px 0; |
|
122 } |
|
123 |
|
124 p { |
|
125 font-size: 11px; margin: 4px 0; |
|
126 } |
|
127 |
|
128 strong { |
|
129 font-weight: bold; |
|
130 } |
|
131 |
|
132 .main-wrap { |
|
133 background: #ffffff; /* Old browsers */ |
|
134 background: -moz-linear-gradient(top, #f0f0f0 20%, #ffffff 80%); /* FF3.6+ */ |
|
135 background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#f0f0f0), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */ |
|
136 background: -webkit-linear-gradient(top, #f0f0f0 20%,#ffffff 80%); /* Chrome10+,Safari5.1+ */ |
|
137 background: -o-linear-gradient(top, #f0f0f0 20%,#ffffff 80%); /* Opera 11.10+ */ |
|
138 background: -ms-linear-gradient(top, #f0f0f0 20%,#ffffff 80%); /* IE10+ */ |
|
139 background: linear-gradient(to bottom, #f0f0f0 20%,#ffffff 80%); /* W3C */ |
|
140 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ |
|
141 } |
|
142 |
|
143 footer { |
|
144 margin: 40px 0 20px; padding: 10px 0 0; border-top: 1px solid #666; |
|
145 } |
|
146 |
|
147 .footer-list li { |
|
148 float: right; margin-left: 10px; |
|
149 } |
|
150 |
|
151 .search-field { |
|
152 box-sizing: border-box; |
|
153 -moz-box-sizing: border-box; |
|
154 -webkit-box-sizing: border-box; |
|
155 border: none; background: #d0e0FF; |
|
156 padding: 2px; margin: 2px 0; height: 20px; |
|
157 font-size: 13px; width: 210px; float: left; |
|
158 line-height: 20px; height: 20px; |
|
159 } |
|
160 |
|
161 .search-type { |
|
162 box-sizing: border-box; |
|
163 -moz-box-sizing: border-box; |
|
164 -webkit-box-sizing: border-box; |
|
165 border: none; background: #E0E0E0; |
|
166 float: left; width: 100px; |
|
167 padding: 2px; margin: 2px 0 0 1px; |
|
168 font-size: 13px; |
|
169 line-height: 20px; height: 20px; |
|
170 } |
|
171 |
|
172 .placeholder { |
|
173 background: #d0e0FF; |
|
174 } |
|
175 |
|
176 .column { |
|
177 float: left; margin: 6px 0 6px 16px; |
|
178 } |
|
179 |
|
180 .subcol { |
|
181 float: left; margin: 2px 0 4px 12px; |
|
182 } |
|
183 |
|
184 .column-third { |
|
185 float: left; width: 312px; |
|
186 } |
|
187 |
|
188 .column-third:nth-child(3n+1) { |
|
189 margin-left: 0; clear: left; |
|
190 } |
|
191 |
|
192 .subcol-third-third { |
|
193 width: 96px; |
|
194 } |
|
195 |
|
196 .subcol-third-third:nth-child(3n+1) { |
|
197 margin-left: 0; clear: left; |
|
198 } |
|
199 |
|
200 .column-half { |
|
201 width: 476px; |
|
202 } |
|
203 |
|
204 .column-half:nth-child(2n+1) { |
|
205 margin-left: 0; clear: left; |
|
206 } |
|
207 |
|
208 .subcol-half-fourth { |
|
209 width: 110px; |
|
210 } |
|
211 |
|
212 .subcol-half-fourth:nth-child(4n+1) { |
|
213 margin-left: 0; clear: left; |
|
214 } |
|
215 |
|
216 .column-full { |
|
217 margin-left: 0; width: 968px; |
|
218 } |
|
219 |
|
220 .subcol-eighth { |
|
221 width: 110px; margin-left: 12px; |
|
222 } |
|
223 |
|
224 .subcol-eighth:nth-child(even) { |
|
225 margin-left: 13px; |
|
226 } |
|
227 |
|
228 .subcol-eighth:nth-child(8n+1) { |
|
229 margin-left: 0; clear: left; |
|
230 } |
|
231 |
|
232 .center-image { |
|
233 text-align: center; |
|
234 } |
|
235 |
|
236 .image-and-fragment { |
|
237 position: relative; margin: 0 auto; display: inline-block; |
|
238 } |
|
239 |
|
240 .center-image img { |
|
241 display: inline-block; |
|
242 } |
|
243 /* |
|
244 .image-and-fragment img:after { |
|
245 content: "."; display: block; clear: both; width: 0; line-height: 0; visibility: hidden; |
|
246 } |
|
247 */ |
|
248 .image-and-fragment svg, .cutout-canvas { |
|
249 position: absolute; top: 0; left: 0; width: 100%; height: 100%; |
|
250 } |
|
251 |
|
252 /* STYLES SPECIFIQUES A home.html */ |
|
253 |
|
254 .homeviz { |
|
255 float: left; width: 968px; height: 400px; margin: 2px 0 4px; |
|
256 } |
|
257 |
|
258 /* STYLES SPECIFIQUES A image.html */ |
|
259 |
|
260 .image-metadata { |
|
261 width: 100%; margin: 30px 0 0; font-size: 14px; |
|
262 } |
|
263 |
|
264 .image-metadata th { |
|
265 font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0; vertical-align: top; |
|
266 } |
|
267 |
|
268 .image-metadata td { |
|
269 width: 314px; padding: 4px 0; |
|
270 } |
|
271 |
|
272 .image-metadata input[type=text] { |
|
273 box-sizing: border-box; |
|
274 -moz-box-sizing: border-box; |
|
275 -webkit-box-sizing: border-box; |
|
276 width: 100%; border: 1px solid #6699FF; background: #FFFFFF; |
|
277 padding: 2px; margin: 3px 0; |
|
278 font-size: 13px; |
|
279 } |
|
280 |
|
281 .image-metadata textarea { |
|
282 box-sizing: border-box; |
|
283 -moz-box-sizing: border-box; |
|
284 -webkit-box-sizing: border-box; |
|
285 width: 100%; border: 1px solid #6699FF; background: #FFFFFF; |
|
286 padding: 2px; margin: 3px 0; height: 100px; |
|
287 font-size: 13px; |
|
288 resize: none; |
|
289 } |
|
290 |
|
291 .image-keywords { |
|
292 width: 100%; margin: 10px 0 0; |
|
293 } |
|
294 |
|
295 .image-keywords th { |
|
296 font-size: 14px; font-weight: bold; text-align: left; padding: 4px 0 4px 0; width: 33%; |
|
297 } |
|
298 |
|
299 .image-keywords tbody tr:nth-child(odd) { |
|
300 background: #e0e0e0; |
|
301 } |
|
302 |
|
303 .image-keywords td { |
|
304 font-size: 13px; text-align: left; padding: 4px 4px 4px 0; |
|
305 } |
|
306 |
|
307 .add-button { |
|
308 background: #D0E0FF; margin: 5px 0; padding: 6px; border-radius: 4px; color: #003366; |
|
309 font-weight: bold; font-size: 13px; float: left; |
|
310 } |
|
311 |
|
312 .big-button { |
|
313 background: #D0E0FF; margin: 10px 0 10px 16px; padding: 8px; border-radius: 4px; color: #003366; |
|
314 font-weight: bold; font-size: 15px; width: 214px; text-align: center; float: left; |
|
315 } |
|
316 |
|
317 .big-button:first-child { |
|
318 margin-left: 0; |
|
319 } |
|
320 |
|
321 .highlight { |
|
322 background: #ffff80; |
|
323 } |
|
324 |
|
325 /* STYLES SPECIFIQUES A fragment-edit */ |
|
326 |
|
327 .head-button { |
|
328 font-weight: bold; float: right; margin: 8px 0 0 2px; font-size: 20px; |
|
329 } |
|
330 |
|
331 a.clear-fragment { |
|
332 color: #800000; |
|
333 } |