137 /* frise */ |
138 /* frise */ |
138 .frise{ |
139 .frise{ |
139 position: relative; |
140 position: relative; |
140 border: 1px solid #333333; |
141 border: 1px solid #333333; |
141 } |
142 } |
|
143 .segments,.indications{ |
|
144 width: 100%; |
|
145 height: 100%; |
|
146 position: absolute; |
|
147 top: 0; |
|
148 left: 0; |
|
149 } |
|
150 .indications{ |
|
151 z-index: 2; |
|
152 } |
|
153 .aucun-segment{ |
|
154 font-weight: 600; |
|
155 font-style: italic; |
|
156 text-align: center; |
|
157 line-height: 20px; |
|
158 width: 100%; |
|
159 z-index:0; |
|
160 } |
142 .frise .segment{ |
161 .frise .segment{ |
143 float: left; |
162 position: absolute; |
144 margin-left: -1px; |
163 background-image: url(../img/border-right-segment.png); |
145 border-right: 1px solid #333; |
164 background-repeat: repeat-y; |
|
165 background-position: right top; |
146 -moz-box-shadow: inset 0px 2px 2px 0px #333; |
166 -moz-box-shadow: inset 0px 2px 2px 0px #333; |
147 -webkit-box-shadow: inset 0px 2px 2px 0px #333; |
167 -webkit-box-shadow: inset 0px 2px 2px 0px #333; |
148 box-shadow: inset 0px 2px 2px 0px #333; |
168 box-shadow: inset 0px 2px 2px 0px #333; |
149 } |
169 } |
150 .frise .segment:first-child{ |
170 .frise .segment:first-child{ |
151 -moz-box-shadow: inset 2px 2px 2px 0px #333; |
171 -moz-box-shadow: inset 2px 2px 2px 0px #333; |
152 -webkit-box-shadow: inset 2px 2px 2px 0px #333; |
172 -webkit-box-shadow: inset 2px 2px 2px 0px #333; |
153 box-shadow: inset 2px 2px 2px 0px #333; |
173 box-shadow: inset 2px 2px 2px 0px #333; |
154 margin-left: 0; |
|
155 } |
174 } |
156 .frise .segment:last-child{ |
175 .frise .segment:last-child{ |
157 border-right: 0; |
176 background-image: none; |
158 } |
177 } |
159 .frise span.indication{ |
178 .frise span.indication{ |
160 display: inline-block; |
179 display: inline-block; |
161 position: absolute; |
180 position: absolute; |
162 color: #FFF; |
181 color: #FFF; |
|
182 top:0; |
163 left: 0px; |
183 left: 0px; |
164 font-size: 10px; |
184 font-size: 10px; |
165 width: 30px; |
185 width: 30px; |
166 text-align: center; |
186 text-align: center; |
167 background: url(../img/bg-indication.png) 15px 0 no-repeat; |
187 background: url(../img/bg-indication.png) 15px 0 no-repeat; |
215 } |
235 } |
216 |
236 |
217 .time-tangle { |
237 .time-tangle { |
218 color: #7628df; cursor: w-resize; position: relative; |
238 color: #7628df; cursor: w-resize; position: relative; |
219 } |
239 } |
220 .time-tangle:hover, .time-tangle.active { |
240 .time-tangle:hover, |
|
241 .time-tangle.active { |
221 color: #FF00FC; border-bottom: 1px dashed #7628df; |
242 color: #FF00FC; border-bottom: 1px dashed #7628df; |
222 } |
243 } |
223 .time-tangle:hover:after, .time-tangle.active:after { |
244 .time-tangle:hover:after, |
|
245 .time-tangle.active:after { |
224 color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px; |
246 color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px; |
225 margin-left: -80px; font-size: 12px; text-align: center; |
247 margin-left: -80px; font-size: 12px; text-align: center; |
226 content: "glisser pour modifier" |
248 content: "glisser pour modifier" |
227 } |
249 } |
228 |
250 |
395 line-height: 20px; |
417 line-height: 20px; |
396 } |
418 } |
397 |
419 |
398 .col-right .item-video:hover, |
420 .col-right .item-video:hover, |
399 .col-right .item-video.active{ |
421 .col-right .item-video.active{ |
400 background: url(../img/arrow-item-video-sprite.png) left top no-repeat; |
422 background: url(../img/arrow-item-video-sprite.png) left center no-repeat; |
401 } |
423 } |
402 |
424 |
403 /* popin - frise-description */ |
425 /* popin - frise-description */ |
404 |
426 |
405 .mashup-description img.pointer{ |
427 .mashup-description img.pointer{ |