|
1 /* fonts */ |
|
2 @font-face { |
|
3 font-family: 'OpenSans'; |
|
4 font-weight: 400; |
|
5 src:url("fonts/OpenSans-Regular.eot?") format("eot"), |
|
6 url("fonts/OpenSans-Regular.woff") format("woff"), |
|
7 url("fonts/OpenSans-Regular.ttf") format("truetype"), |
|
8 url("fonts/OpenSans-Regular.svg#OpenSans-Regular") format("svg"); |
|
9 } |
|
10 @font-face { |
|
11 font-family: 'OpenSans'; |
|
12 font-weight: 300; |
|
13 src:url("fonts/OpenSans-Light.eot?") format("eot"), |
|
14 url("fonts/OpenSans-Light.woff") format("woff"), |
|
15 url("fonts/OpenSans-Light.ttf") format("truetype"), |
|
16 url("fonts/OpenSans-Light.svg#OpenSans-Light") format("svg"); |
|
17 } |
|
18 @font-face { |
|
19 font-family: 'OpenSans'; |
|
20 font-weight: bold; |
|
21 src:url("fonts/OpenSans-Bold.eot?") format("eot"), |
|
22 url("fonts/OpenSans-Bold.woff") format("woff"), |
|
23 url("fonts/OpenSans-Bold.ttf") format("truetype"), |
|
24 url("fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg"); |
|
25 } |
|
26 @font-face { |
|
27 font-family: 'OpenSans'; |
|
28 font-style: italic; |
|
29 src:url("fonts/OpenSans-Italic.eot?") format("eot"), |
|
30 url("fonts/OpenSans-Italic.woff") format("woff"), |
|
31 url("fonts/OpenSans-Italic.ttf") format("truetype"), |
|
32 url("fonts/OpenSans-Italic.svg#OpenSans-Italic") format("svg"); |
|
33 } |
|
34 @font-face { |
|
35 font-family: 'OpenSans'; |
|
36 font-weight: 600; |
|
37 src:url("fonts/OpenSans-Semibold.eot?") format("eot"), |
|
38 url("fonts/OpenSans-Semibold.woff") format("woff"), |
|
39 url("fonts/OpenSans-Semibold.ttf") format("truetype"), |
|
40 url("fonts/OpenSans-Semibold.svg#OpenSans-Semibold") format("svg"); |
|
41 } |
|
42 @font-face { |
|
43 font-family: 'OpenSans'; |
|
44 font-weight: 600px; |
|
45 font-style: italic; |
|
46 src:url("fonts/OpenSans-SemiboldItalic.eot?") format("eot"), |
|
47 url("fonts/OpenSans-SemiboldItalic.woff") format("woff"), |
|
48 url("fonts/OpenSans-SemiboldItalic.ttf") format("truetype"), |
|
49 url("fonts/OpenSans-SemiboldItalic.svg#OpenSans-SemiboldItalic") format("svg"); |
|
50 } |
|
51 /* custom reset */ |
|
52 body{ |
|
53 height: 100%; |
|
54 background: url(../img/bg.png) repeat-x 0 0; |
|
55 } |
|
56 a{ |
|
57 color:#000; |
|
58 text-decoration: none; |
|
59 } |
|
60 /* common */ |
|
61 div.wrap{ |
|
62 min-height:100%; |
|
63 background-color: #FFF; |
|
64 width: 960px; |
|
65 margin: 0 auto; |
|
66 font-family: 'OpenSans'; |
|
67 font-weight: 400; |
|
68 color:#333333; |
|
69 font-size: 13px; |
|
70 height: 100%; |
|
71 } |
|
72 div.wrap-header{ |
|
73 padding-top: 5px; |
|
74 background-color: #370078; |
|
75 height: 53px; |
|
76 margin-bottom: 1px; |
|
77 } |
|
78 /* header */ |
|
79 div.header{ |
|
80 position: relative; |
|
81 background-color: #e2dbfd; |
|
82 height: 60px; |
|
83 } |
|
84 div.header div.title-video-wrap, div.header h1, div.header div.profil-wrap{ |
|
85 position: relative; |
|
86 float: left; |
|
87 height: 60px; |
|
88 } |
|
89 div.header h1{ |
|
90 display: inline-block; |
|
91 height: 60px; |
|
92 width: 250px; |
|
93 } |
|
94 div.header h1 a img, div.header h1 a span{ |
|
95 float: left; |
|
96 } |
|
97 div.header h1 a{ |
|
98 padding-top: 6px; |
|
99 } |
|
100 div.header h1 a span{ |
|
101 font-size: 20px; |
|
102 text-align: center; |
|
103 padding: 0px 0 0 6px; |
|
104 font-weight: 300; |
|
105 } |
|
106 /* header - profil-wrap */ |
|
107 div.header div.profil-wrap{ |
|
108 width: 250px; |
|
109 } |
|
110 div.header div.profil-wrap a{ |
|
111 width: 160px; |
|
112 display: block; |
|
113 text-align: right; |
|
114 position: absolute; |
|
115 right: 0; |
|
116 font-size: 14px; |
|
117 color: #30036d; |
|
118 padding-right: 18px; |
|
119 } |
|
120 div.header div.profil-wrap a:hover{ |
|
121 color: #FF00FC; |
|
122 } |
|
123 div.header div.profil-wrap a.all-hashcut{ |
|
124 top: 12px; |
|
125 background: url(../img/arrow-top.png) right 2px no-repeat; |
|
126 } |
|
127 div.header div.profil-wrap a.my-profil{ |
|
128 top: 32px; |
|
129 background: url(../img/arrow-bot.png) right 4px no-repeat; |
|
130 } |
|
131 /* content */ |
|
132 div.content{ |
|
133 width: 960px; |
|
134 min-height: 750px; |
|
135 background: url(../img/bg-degrade.png) 0 0 repeat-x; |
|
136 } |
|
137 /* popin */ |
|
138 div.popin{ |
|
139 padding-top: 12px; |
|
140 position: absolute; |
|
141 top: 0; |
|
142 z-index: 10; |
|
143 } |
|
144 div.popin img.pointer{ |
|
145 position: absolute; |
|
146 top: 0; |
|
147 } |
|
148 div.popin div.popin-content{ |
|
149 padding: 8px; |
|
150 border: 1px solid #867a97; |
|
151 background: url(../img/bg-jaune.png); |
|
152 } |
|
153 div.popin input[type=text],div.popin input[type=password], div.popin textarea{ |
|
154 padding: 0 6px; |
|
155 height: 20px; |
|
156 line-height: 20px; |
|
157 font-size: 12px; |
|
158 border: 1px solid #867a97; |
|
159 -webkit-border-radius: 4px; |
|
160 -moz-border-radius: 4px; |
|
161 border-radius: 4px; |
|
162 } |
|
163 /* popin - user */ |
|
164 |
|
165 div.user.popin.signup { |
|
166 display: none; |
|
167 } |
|
168 div.user.popin.info { |
|
169 display: none; |
|
170 } |
|
171 div.user.popin.login { |
|
172 display: none; |
|
173 } |
|
174 |
|
175 div.user.popin{ |
|
176 top: 48px; |
|
177 right: 0; |
|
178 } |
|
179 div.user.popin img.pointer{ |
|
180 right: 36px; |
|
181 } |
|
182 div.user.popin.signup div.popin-content form input[type=submit], |
|
183 div.user.popin.login div.popin-content form input[type=submit], |
|
184 div.user.popin.login a.signup-button , |
|
185 div.popin.segmentation form input[type=submit], |
|
186 div.popin.segment-section a.reprendre-segment{ |
|
187 margin-top: 2px; |
|
188 display: block; |
|
189 font-size: 12px; |
|
190 border: 0; |
|
191 width: 150px; |
|
192 padding: 1px 0; |
|
193 background-color: #30036D; |
|
194 color: #FFF; |
|
195 text-align: center; |
|
196 -webkit-border-radius: 4px; |
|
197 -moz-border-radius: 4px; |
|
198 border-radius: 4px; |
|
199 float: right; |
|
200 cursor: pointer; |
|
201 } |
|
202 div.user.popin.signup div.popin-content form input[type=submit]:hover, |
|
203 div.user.popin.login div.popin-content form input[type=submit]:hover, |
|
204 div.user.popin.login div.popin-content a.signup-button:hover, |
|
205 div.popin.segmentation form input[type=submit]:hover, |
|
206 div.popin.segment-section a.reprendre-segment:hover{ |
|
207 background-color: #FF00FC |
|
208 } |
|
209 div.user.popin.signup div.popin-content h2, |
|
210 div.user.popin.login div.popin-content h2{ |
|
211 color: #de2500; |
|
212 font-size: 14px; |
|
213 margin-bottom: 12px; |
|
214 } |
|
215 div.user.popin.signup div.popin-content form label, |
|
216 div.user.popin.login div.popin-content form label{ |
|
217 width: 84px; |
|
218 font-size: 12px; |
|
219 display: inline-block; |
|
220 float: left; |
|
221 line-height: 12px; |
|
222 } |
|
223 div.user.popin.signup div.popin-content form p, |
|
224 div.user.popin.login div.popin-content form p{ |
|
225 display: block; |
|
226 line-height: 18px; |
|
227 margin-bottom: 8px; |
|
228 overflow: hidden; |
|
229 } |
|
230 div.user.popin.signup div.popin-content form input[type=text], |
|
231 div.user.popin.signup div.popin-content form input[type=password], |
|
232 div.user.popin.login div.popin-content form input[type=text], |
|
233 div.user.popin.login div.popin-content form input[type=password]{ |
|
234 float: left; |
|
235 position: relative; |
|
236 width: 110px; |
|
237 padding: 0 5px; |
|
238 height: 18px; |
|
239 display: inline-block; |
|
240 } |
|
241 /* popin - user - info */ |
|
242 div.user.popin.info div.popin-content{ |
|
243 min-width: 150px; |
|
244 text-align: right; |
|
245 } |
|
246 div.user.popin.info div.popin-content h2{ |
|
247 color: #7628df; |
|
248 font-size: 18px; |
|
249 font-weight: 600; |
|
250 margin-bottom: 2px; |
|
251 } |
|
252 div.user.popin.info div.popin-content h3{ |
|
253 color: #30036d; |
|
254 font-size: 14px; |
|
255 margin-bottom: 10px; |
|
256 } |
|
257 div.user.popin.info div.popin-content a.nb-hashcut{ |
|
258 color: #de2500; |
|
259 font-size: 14px; |
|
260 text-decoration: underline; |
|
261 display: block; |
|
262 margin-bottom: 12px; |
|
263 } |
|
264 div.user.popin.info div.popin-content a.nb-hashcut:hover{ |
|
265 text-decoration: none; |
|
266 } |
|
267 div.user.popin.info div.popin-content a.change-account{ |
|
268 text-align: center; |
|
269 height: 20px; |
|
270 width: 150px; |
|
271 line-height: 20px; |
|
272 color: #FFF; |
|
273 font-size: 12px; |
|
274 background-color: #30036d; |
|
275 -moz-border-radius: 2px; |
|
276 -webkit-border-radius: 2px; |
|
277 border-radius: 2px; |
|
278 display: block; |
|
279 } |
|
280 div.user.popin.info div.popin-content a.change-account:hover{ |
|
281 background-color: #FF00FC; |
|
282 } |
|
283 /* popin - user - signup */ |
|
284 div.user.popin.login div.popin-content a.signup-button{ |
|
285 background-color: #de2500; |
|
286 } |
|
287 div.user.popin.signup div.popin-content{ |
|
288 min-width: 205px; |
|
289 } |
|
290 /* footer */ |
|
291 div.footer{ |
|
292 border-top: 1px solid black; |
|
293 width: 100%; |
|
294 padding-top: 8px; |
|
295 } |
|
296 div.footer ul.links-left{ |
|
297 float: left; |
|
298 } |
|
299 div.footer ul.links-left li{ |
|
300 margin-bottom: 4px; |
|
301 } |
|
302 div.footer ul.links-left li a{ |
|
303 border-bottom: 1px solid #cccccc; |
|
304 } |
|
305 div.footer ul.links-left li a:hover{ |
|
306 border-bottom: none; |
|
307 } |
|
308 div.footer ul.links-right{ |
|
309 float: right; |
|
310 } |
|
311 div.footer ul.links-right li{ |
|
312 line-height: 40px; |
|
313 float: right; |
|
314 margin-left: 8px; |
|
315 } |
|
316 div.footer ul.links-right li img { |
|
317 vertical-align: middle; |
|
318 } |