|
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 width: 100%; border: none; background: #d0e0FF; |
|
156 padding: 2px; margin: 3px 0; height: 20px; |
|
157 font-size: 13px; |
|
158 } |
|
159 |
|
160 .placeholder { |
|
161 background: #d0e0FF; |
|
162 } |
|
163 |
|
164 .column { |
|
165 float: left; margin: 6px 0 6px 16px; |
|
166 } |
|
167 |
|
168 .subcol { |
|
169 float: left; margin: 2px 0 4px 12px; |
|
170 } |
|
171 |
|
172 .column-third { |
|
173 float: left; width: 312px; |
|
174 } |
|
175 |
|
176 .column-third:nth-child(3n+1) { |
|
177 margin-left: 0; |
|
178 } |
|
179 |
|
180 .subcol-third-third { |
|
181 width: 96px; |
|
182 } |
|
183 |
|
184 .subcol-third-third:nth-child(3n+1) { |
|
185 margin-left: 0; |
|
186 } |
|
187 |
|
188 .img-ninth { |
|
189 width: 96px; height: 72px; |
|
190 } |
|
191 |
|
192 .column-half { |
|
193 width: 476px; |
|
194 } |
|
195 |
|
196 .column-half:nth-child(2n+1) { |
|
197 margin-left: 0; |
|
198 } |
|
199 |
|
200 .subcol-half-fourth { |
|
201 width: 110px; |
|
202 } |
|
203 |
|
204 .img-eighth { |
|
205 width: 110px; height: 82px; |
|
206 } |
|
207 |
|
208 .subcol-half-fourth:nth-child(4n+1) { |
|
209 margin-left: 0; |
|
210 } |
|
211 |
|
212 /* STYLES SPECIFIQUES A home.html */ |
|
213 |
|
214 .homeviz { |
|
215 float: left; width: 968px; height: 400px; margin: 2px 0 4px; |
|
216 } |
|
217 |
|
218 /* STYLES SPECIFIQUES A image.html */ |
|
219 |
|
220 .fullphoto { |
|
221 width: 476px; height: 350px; |
|
222 } |
|
223 |
|
224 .image-metadata { |
|
225 width: 100%; margin: 30px 0 0; font-size: 14px; |
|
226 } |
|
227 |
|
228 .image-metadata th { |
|
229 font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0; |
|
230 } |
|
231 |
|
232 .image-metadata td { |
|
233 width: 314px; padding: 4px 0; |
|
234 } |
|
235 |
|
236 .image-keywords { |
|
237 width: 100%; margin: 10px 0 0; |
|
238 } |
|
239 |
|
240 .image-keywords th { |
|
241 font-size: 14px; font-weight: bold; text-align: left; padding: 4px 0 4px 0; width: 33%; |
|
242 } |
|
243 |
|
244 .image-keywords tbody tr:nth-child(odd) { |
|
245 background: #e0e0e0; |
|
246 } |
|
247 |
|
248 .image-keywords td { |
|
249 font-size: 13px; text-align: left; padding: 4px 4px 4px 0; |
|
250 } |
|
251 |
|
252 .add-button { |
|
253 background: #D0E0FF; margin: 5px 0; padding: 6px; border-radius: 4px; color: #003366; |
|
254 font-weight: bold; font-size: 13px; float: left; |
|
255 } |
|
256 |
|
257 .big-button { |
|
258 background: #D0E0FF; margin: 10px 0 10px 16px; padding: 8px; border-radius: 4px; color: #003366; |
|
259 font-weight: bold; font-size: 15px; width: 214px; text-align: center; float: left; |
|
260 } |
|
261 |
|
262 .big-button:first-child { |
|
263 margin-left: 0; |
|
264 } |
|
265 |