PluginProbe
Jetpack – WP Security, Backup, Speed, & Growth / 7.2.2
Jetpack – WP Security, Backup, Speed, & Growth v7.2.2
16.3-a.1 16.2 16.2-beta 12.0.3 12.1.3 12.2.3 12.3.2 12.4.2 12.5.2 12.6.4 12.7.3 12.8.3 12.9.5 13.0.2 13.1.5 13.2.4 13.3.3 13.4.5 13.5.2 13.6.2 13.7.2 13.8.3 13.9.2 14.0.1 14.1.1 All 503 releases
jetpack / modules / carousel / jetpack-carousel.css

jetpack-carousel.css in Jetpack – WP Security, Backup, Speed, & Growth 7.2.2, at modules/carousel/jetpack-carousel.css

1,130 lines 25.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .jp-carousel-wrap * {
2 line-height:inherit; /* prevent declarations of line-height in the universal selector */
3 }
4
5 .jp-carousel-overlay {
6 background: #000;
7 }
8
9 div.jp-carousel-fadeaway {
10 background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
11 background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
12 position: fixed;
13 bottom: 0;
14 z-index: 2147483647;
15 width: 100%;
16 height: 15px;
17 }
18
19 .jp-carousel-next-button span,
20 .jp-carousel-previous-button span {
21 background: url(./images/arrows.png) no-repeat center center;
22 background-size: 200px 126px;
23 }
24
25 .jp-carousel-msg {
26 font-family: "Open Sans", sans-serif;
27 font-style: normal;
28 display: inline-block;
29 line-height: 19px;
30 padding: 11px 15px;
31 font-size: 14px;
32 text-align: center;
33 margin: 25px 20px 0 2px;
34 background-color: #fff;
35 border-left: 4px solid #ffba00;
36 -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
37 box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
38 }
39
40 @media
41 only screen and (-webkit-min-device-pixel-ratio: 1.5),
42 only screen and (-o-min-device-pixel-ratio: 3/2),
43 only screen and (min--moz-device-pixel-ratio: 1.5),
44 only screen and (min-device-pixel-ratio: 1.5) {
45 .jp-carousel-next-button span,
46 .jp-carousel-previous-button span {
47 background-image: url(./images/arrows-2x.png);
48 }
49 }
50
51 .jp-carousel-wrap {
52 font-family: "Helvetica Neue", sans-serif !important;
53 }
54
55 .jp-carousel-info {
56 position: absolute;
57 bottom: 0;
58 text-align: left !important;
59 -webkit-font-smoothing: subpixel-antialiased !important;
60 }
61
62 .jp-carousel-info ::selection {
63 background: #68c9e8; /* Safari */
64 color: #fff;
65 }
66
67 .jp-carousel-info ::-moz-selection {
68 background: #68c9e8; /* Firefox */
69 color: #fff;
70 }
71
72 .jp-carousel-photo-info {
73 position: relative;
74 left: 25%;
75 width: 50%;
76 }
77
78 .jp-carousel-transitions .jp-carousel-photo-info {
79 -webkit-transition: 400ms ease-out;
80 -moz-transition: 400ms ease-out;
81 -o-transition: 400ms ease-out;
82 transition: 400ms ease-out;
83 }
84
85 .jp-carousel-info h2 {
86 background: none !important;
87 border: none !important;
88 color: #999;
89 display: block !important;
90 font: normal 13px/1.25em "Helvetica Neue", sans-serif !important;
91 letter-spacing: 0 !important;
92 margin: 7px 0 0 0 !important;
93 padding: 10px 0 0 !important;
94 overflow: hidden;
95 text-align: left;
96 text-shadow: none !important;
97 text-transform: none !important;
98 -webkit-font-smoothing: subpixel-antialiased;
99 }
100
101 .jp-carousel-next-button,
102 .jp-carousel-previous-button {
103 text-indent: -9999px;
104 overflow: hidden;
105 cursor: pointer;
106 }
107
108 .jp-carousel-next-button span,
109 .jp-carousel-previous-button span {
110 position: absolute;
111 top: 0;
112 bottom: 0;
113 width: 82px;
114 zoom: 1;
115 filter: alpha(opacity=20);
116 opacity: 0.2;
117 }
118
119 .jp-carousel-transitions .jp-carousel-next-button span,
120 .jp-carousel-transitions .jp-carousel-previous-button span {
121 -webkit-transition: 500ms opacity ease-out;
122 -moz-transition: 500ms opacity ease-out;
123 -o-transition: 500ms opacity ease-out;
124 transition: 500ms opacity ease-out;
125 }
126
127 .jp-carousel-next-button:hover span,
128 .jp-carousel-previous-button:hover span {
129 filter: alpha(opacity=60);
130 opacity: 0.6;
131 }
132 .jp-carousel-next-button span {
133 background-position: -110px center;
134 right: 0;
135 }
136
137 .jp-carousel-previous-button span {
138 background-position: -10px center;
139 left:0;
140 }
141
142 .jp-carousel-buttons {
143 margin:-18px -20px 15px;
144 padding:8px 10px;
145 border-bottom:1px solid #222;
146 background: #222;
147 text-align: center;
148 }
149
150 div.jp-carousel-buttons a {
151 border: none !important;
152 color: #999;
153 font: normal 11px/1.2em "Helvetica Neue", sans-serif !important;
154 letter-spacing: 0 !important;
155 padding: 5px 2px 5px 0;
156 text-decoration: none !important;
157 text-shadow: none !important;
158 vertical-align: middle;
159 -webkit-font-smoothing: subpixel-antialiased;
160 }
161
162 div.jp-carousel-buttons a:hover {
163 color: #68c9e8;
164 border: none !important;
165 }
166
167 .jp-carousel-transitions div.jp-carousel-buttons a:hover {
168 -webkit-transition: none !important;
169 -moz-transition: none !important;
170 -o-transition: none !important;
171 transition: none !important;
172 }
173
174 .jp-carousel-slide, .jp-carousel-slide img, .jp-carousel-next-button,
175 .jp-carousel-previous-button {
176 -webkit-transform:translate3d(0, 0, 0);
177 -moz-transform:translate3d(0, 0, 0);
178 -o-transform:translate3d(0, 0, 0);
179 -ms-transform:translate3d(0, 0, 0);
180 }
181
182 .jp-carousel-slide {
183 position:fixed;
184 width:0;
185 bottom:0;
186 background-color:#000;
187 border-radius:2px;
188 -webkit-border-radius:2px;
189 -moz-border-radius:2px;
190 -ms-border-radius:2px;
191 -o-border-radius:2px;
192 }
193
194 .jp-carousel-transitions .jp-carousel-slide {
195 -webkit-transition: 300ms ease-out;
196 -moz-transition: 300ms ease-out;
197 -o-transition: 300ms ease-out;
198 transition: 300ms ease-out;
199 }
200
201 .jp-carousel-slide.selected {
202 position: absolute !important;
203 filter: alpha(opacity=100);
204 opacity: 1;
205 }
206
207 .jp-carousel-slide {
208 filter: alpha(opacity=25);
209 opacity: 0.25;
210 }
211
212 .jp-carousel-slide img {
213 display: block;
214 width: 100% !important;
215 height: 100% !important;
216 max-width: 100% !important;
217 max-height: 100% !important;
218 background: none !important;
219 border: none !important;
220 padding: 0 !important;
221 -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
222 -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
223 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
224 zoom: 1;
225 }
226
227 .jp-carousel-transitions .jp-carousel-slide {
228 -webkit-transition: opacity 400ms linear;
229 -moz-transition: opacity 400ms linear;
230 -o-transition: opacity 400ms linear;
231 transition: opacity 400ms linear;
232 }
233
234 .jp-carousel-close-hint {
235 color: #999;
236 cursor: default;
237 letter-spacing: 0 !important;
238 padding:0.35em 0 0;
239 position: absolute;
240 text-align: right;
241 width: 90%;
242 }
243
244 .jp-carousel-transitions .jp-carousel-close-hint {
245 -webkit-transition: color 200ms linear;
246 -moz-transition: color 200ms linear;
247 -o-transition: color 200ms linear;
248 transition: color 200ms linear;
249 }
250
251 .jp-carousel-close-hint span {
252 cursor: pointer;
253 background-color: black;
254 background-color: rgba(0,0,0,0.8);
255 display: inline-block;
256 height: 22px;
257 font: 400 24px/1 "Helvetica Neue", sans-serif !important;
258 line-height: 22px;
259 margin: 0 0 0 0.4em;
260 text-align: center;
261 vertical-align: middle;
262 width: 22px;
263 -moz-border-radius: 4px;
264 -webkit-border-radius: 4px;
265 border-radius: 4px;
266 }
267
268 .jp-carousel-transitions .jp-carousel-close-hint span {
269 -webkit-transition: border-color 200ms linear;
270 -moz-transition: border-color 200ms linear;
271 -o-transition: border-color 200ms linear;
272 transition: border-color 200ms linear;
273 }
274
275 .jp-carousel-close-hint:hover {
276 cursor: default;
277 color: #fff;
278 }
279
280 .jp-carousel-close-hint:hover span {
281 border-color: #fff;
282 }
283
284 div.jp-carousel-buttons a.jp-carousel-reblog,
285 div.jp-carousel-buttons a.jp-carousel-commentlink,
286 a.jp-carousel-image-download {
287 background: url(./images/carousel-sprite.png?5) no-repeat;
288 background-size: 16px 200px;
289 }
290
291 div.jp-carousel-buttons a.jp-carousel-reblog,
292 div.jp-carousel-buttons a.jp-carousel-commentlink {
293 margin: 0 14px 0 0 !important;
294 }
295
296 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
297 background-color: #303030;
298 padding-right: 8px !important;
299 border-radius: 2px;
300 border-radius: 2px;
301 -webkit-border-radius:2px;
302 -moz-border-radius:2px;
303 -ms-border-radius:2px;
304 -o-border-radius:2px;
305 }
306
307 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
308 margin: 0 2px 0 -12px !important;
309 }
310
311 div.jp-carousel-buttons a.jp-carousel-reblog,
312 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged:hover {
313 background-position: 6px -36px;
314 padding-right: auto !important;
315 padding-left: 26px !important;
316 color: #999;
317 }
318
319 div.jp-carousel-buttons a.jp-carousel-commentlink {
320 background-position: 0px -156px;
321 padding-left: 19px !important;
322 }
323
324 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged:hover {
325 cursor: default;
326 }
327
328 div.jp-carousel-buttons a.jp-carousel-reblog:hover {
329 background-position: 6px -56px;
330 color: #68c9e8;
331 }
332
333 @media
334 only screen and (-webkit-min-device-pixel-ratio: 1.5),
335 only screen and (-o-min-device-pixel-ratio: 3/2),
336 only screen and (min--moz-device-pixel-ratio: 1.5),
337 only screen and (min-device-pixel-ratio: 1.5) {
338 div.jp-carousel-buttons a.jp-carousel-reblog,
339 div.jp-carousel-buttons a.jp-carousel-commentlink,
340 a.jp-carousel-image-download {
341 background-image: url(./images/carousel-sprite-2x.png?5);
342 }
343 }
344
345 /* reblog */
346 div#carousel-reblog-box {
347 background: #222;
348 background: -moz-linear-gradient(bottom, #222, #333);
349 background: -webkit-gradient(linear, left bottom, left top, from(#222), to(#333));
350 padding: 3px 0 0;
351 display: none;
352 margin: 5px auto 0;
353 -moz-border-radius: 2px;
354 -webkit-border-radius: 2px;
355 border-radius: 2px;
356 -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
357 -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
358 box-shadow: 0 0 20px rgba(0,0,0,0.9);
359 height: 74px;
360 width: 565px;
361 }
362
363 #carousel-reblog-box textarea {
364 background: #999;
365 font: 13px/1.4 "Helvetica Neue", sans-serif !important;
366 color: #444;
367 padding: 3px 6px;
368 width: 370px;
369 height: 48px;
370 float: left;
371 margin: 6px 9px 0 9px;
372 border: 1px solid #666;
373 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
374 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
375 -moz-border-radius: 2px;
376 -webkit-border-radius: 2px;
377 border-radius: 2px;
378 }
379
380 #carousel-reblog-box textarea:focus {
381 background: #ccc;
382 color: #222;
383 }
384
385 #carousel-reblog-box label {
386 color: #aaa;
387 font-size: 11px;
388 padding-right: 2px;
389 padding-left: 2px;
390 display: inline;
391 font-weight: normal;
392 }
393
394 #carousel-reblog-box select {
395 width: 110px;
396 padding: 0;
397 font-size: 12px;
398 font-family: "Helvetica Neue", sans-serif !important;
399 background: #333;
400 color: #eee;
401 border: 1px solid #444;
402 margin-top:5px;
403 }
404
405 #carousel-reblog-box .submit,
406 #wrapper #carousel-reblog-box p.response {
407 float: left;
408 width: 154px;
409 padding-top: 0;
410 padding-left: 1px;
411 overflow: hidden;
412 height: 34px;
413 margin:3px 0 0 2px !important;
414 }
415
416 #wrapper #carousel-reblog-box p.response {
417 font-size: 13px;
418 clear: none;
419 padding-left: 2px;
420 height: 34px;
421 color: #aaa;
422 }
423
424 #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
425 font: 13px/24px "Helvetica Neue", sans-serif !important;
426 margin-top: 8px;
427 padding: 0 10px !important;
428 border-radius: 1em;
429 height: 24px;
430 color: #333;
431 cursor:pointer;
432 font-weight: normal;
433 background: #aaa;
434 background: -moz-linear-gradient(bottom, #aaa, #ccc);
435 background: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc));
436 border: 1px solid #444;
437 }
438
439 #carousel-reblog-box input#carousel-reblog-submit:hover, #jp-carousel-comment-form-button-submit:hover {
440 background: #ccc;
441 background: -moz-linear-gradient(bottom, #ccc, #eee);
442 background: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#eee));
443 }
444
445 #carousel-reblog-box .canceltext {
446 color: #aaa;
447 font-size: 11px;
448 line-height: 24px;
449 }
450
451 #carousel-reblog-box .canceltext a {
452 color: #fff;
453 }
454 /* reblog end */
455
456
457 /** Title and Desc Start **/
458 .jp-carousel-titleanddesc {
459 border-top: 1px solid #222;
460 color: #999;
461 font-size: 15px;
462 padding-top: 24px;
463 margin-bottom: 20px;
464 font-weight:400;
465 }
466 .jp-carousel-titleanddesc-title {
467 font: 300 1.5em/1.1 "Helvetica Neue", sans-serif !important;
468 text-transform: none !important; /* prevents uppercase from leaking through */
469 color: #fff;
470 margin: 0 0 15px;
471 padding:0;
472 }
473
474 .jp-carousel-titleanddesc-desc p {
475 color: #999;
476 line-height:1.4;
477 margin-bottom: 0.75em;
478 }
479
480 .jp-carousel-titleanddesc p a,
481 .jp-carousel-comments p a,
482 .jp-carousel-info h2 a {
483 color: #fff !important;
484 border: none !important;
485 text-decoration: underline !important;
486 font-weight: normal !important;
487 font-style: normal !important;
488 }
489
490 .jp-carousel-titleanddesc p strong,
491 .jp-carousel-titleanddesc p b {
492 font-weight: bold;
493 color: #999;
494 }
495
496 .jp-carousel-titleanddesc p em,
497 .jp-carousel-titleanddesc p i {
498 font-style: italic;
499 color: #999;
500 }
501
502
503 .jp-carousel-titleanddesc p a:hover,
504 .jp-carousel-comments p a:hover,
505 .jp-carousel-info h2 a:hover {
506 color: #68c9e8 !important;
507 }
508
509 .jp-carousel-titleanddesc p:empty {
510 display: none;
511 }
512
513 .jp-carousel-photo-info h1:before,
514 .jp-carousel-photo-info h1:after,
515 .jp-carousel-left-column-wrapper h1:before,
516 .jp-carousel-left-column-wrapper h1:after {
517 content:none !important;
518 }
519 /** Title and Desc End **/
520
521 /** Meta Box Start **/
522 .jp-carousel-image-meta {
523 background: #111;
524 border: 1px solid #222;
525 color: #fff;
526 font-size: 13px;
527 font: 12px/1.4 "Helvetica Neue", sans-serif !important;
528 overflow: hidden;
529 padding: 18px 20px;
530 width: 209px !important;
531 }
532
533 .jp-carousel-image-meta li,
534 .jp-carousel-image-meta h5 {
535 font-family: "Helvetica Neue", sans-serif !important;
536 position: inherit !important;
537 top: auto !important;
538 right: auto !important;
539 left: auto !important;
540 bottom: auto !important;
541 background: none !important;
542 border: none !important;
543 font-weight: 400 !important;
544 line-height: 1.3em !important;
545 }
546
547 .jp-carousel-image-meta ul {
548 margin: 0 !important;
549 padding: 0 !important;
550 list-style: none !important;
551 }
552
553 .jp-carousel-image-meta li {
554 width: 48% !important;
555 display: inline-block !important;
556 vertical-align: top !important;
557 margin: 0 2% 15px 0 !important;
558 color: #fff !important;
559 font-size:13px !important;
560 }
561
562 .jp-carousel-image-meta h5 {
563 color: #999 !important;
564 text-transform: uppercase !important;
565 font-size:10px !important;
566 margin:0 0 2px !important;
567 letter-spacing: 0.1em !important;
568 }
569
570 a.jp-carousel-image-download {
571 padding-left: 23px;
572 display: inline-block;
573 clear: both;
574 color: #999;
575 line-height: 1;
576 font-weight: 400;
577 font-size: 13px;
578 text-decoration: none;
579 background-position: 0 -82px;
580 }
581
582 a.jp-carousel-image-download span.photo-size {
583 font-size: 11px;
584 border-radius: 1em;
585 margin-left: 2px;
586 display: inline-block;
587 }
588
589 a.jp-carousel-image-download span.photo-size-times {
590 padding: 0 1px 0 2px;
591 }
592
593 a.jp-carousel-image-download:hover {
594 background-position: 0 -122px;
595 color: #68c9e8;
596 border: none !important;
597 }
598
599 /** Meta Box End **/
600
601 /** GPS Map Start **/
602 .jp-carousel-image-map {
603 position: relative;
604 margin: -20px -20px 20px;
605 border-bottom: 1px solid rgba( 255, 255, 255, 0.17 );
606 height: 154px;
607 }
608
609 .jp-carousel-image-map img.gmap-main {
610 -moz-border-radius-topleft: 6px;
611 border-top-left-radius: 6px;
612 border-right: 1px solid rgba( 255, 255, 255, 0.17 );
613 }
614 .jp-carousel-image-map div.gmap-topright {
615 width: 94px;
616 height: 154px;
617 position: absolute;
618 top: 0;
619 right: 0;
620 }
621 .jp-carousel-image-map div.imgclip {
622 overflow: hidden;
623 -moz-border-radius-topright: 6px;
624 border-top-right-radius: 6px;
625 }
626 .jp-carousel-image-map div.gmap-topright img {
627 margin-left: -40px;
628 }
629 .jp-carousel-image-map img.gmap-bottomright {
630 position: absolute;
631 top: 96px;
632 right: 0;
633 }
634
635 /** Comments Start **/
636 .jp-carousel-comments {
637 font: 15px/1.7 "Helvetica Neue", sans-serif !important;
638 font-weight: 400;
639 background:none transparent;
640 }
641
642 .jp-carousel-comments p a:hover, .jp-carousel-comments p a:focus, .jp-carousel-comments p a:active {
643 color: #68c9e8 !important;
644 }
645
646 .jp-carousel-comment {
647 background:none transparent;
648 color: #999;
649 margin-bottom: 20px;
650 clear:left;
651 overflow: auto;
652 width: 100%
653 }
654
655 .jp-carousel-comment p {
656 color: #999 !important;
657 }
658
659 .jp-carousel-comment .comment-author {
660 font-size: 13px;
661 font-weight:400;
662 padding:0;
663 width:auto;
664 display: inline;
665 float:none;
666 border:none;
667 margin:0;
668 }
669
670 .jp-carousel-comment .comment-author a {
671 color: #fff;
672 }
673
674 .jp-carousel-comment .comment-gravatar {
675 float:left;
676 }
677
678 .jp-carousel-comment .comment-content {
679 border:none;
680 margin-left:85px;
681 padding: 0;
682 }
683
684 .jp-carousel-comment .avatar {
685 margin:0 20px 0 0;
686 -moz-border-radius: 4px;
687 -webkit-border-radius: 4px;
688 border-radius: 4px;
689 border: none !important;
690 padding: 0 !important;
691 background-color: transparent !important;
692 }
693
694 .jp-carousel-comment .comment-date {
695 color:#999;
696 margin-top: 4px;
697 font-size:11px;
698 display: inline;
699 float: right;
700 /*clear: right;*/
701 }
702
703 #jp-carousel-comment-form {
704 margin:0 0 10px !important;
705 float: left;
706 width: 100%;
707 }
708
709 textarea#jp-carousel-comment-form-comment-field {
710 background: rgba(34,34,34,0.9);
711 border: 1px solid #3a3a3a;
712 color: #aaa;
713 font: 15px/1.4 "Helvetica Neue", sans-serif !important;
714 width: 100%;
715 padding: 10px 10px 5px;
716 margin: 0;
717 float: none;
718 height: 147px;
719 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
720 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
721 -moz-border-radius: 3px;
722 -webkit-border-radius: 3px;
723 border-radius: 3px;
724 overflow: hidden;
725 -webkit-box-sizing: border-box;
726 -moz-box-sizing: border-box;
727 box-sizing: border-box;
728 }
729
730 textarea#jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
731 color: #555;
732 }
733
734 textarea#jp-carousel-comment-form-comment-field:focus {
735 background: #ccc;
736 color: #222;
737 }
738
739 textarea#jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
740 color: #aaa;
741 }
742
743 #jp-carousel-comment-form-spinner {
744 color: #fff;
745 margin:22px 0 0 10px;
746 display: block;
747 width: 20px;
748 height: 20px;
749 float: left;
750 }
751
752 #jp-carousel-comment-form-submit-and-info-wrapper {
753 display: none;
754 /*margin-bottom:15px;*/
755 overflow: hidden;
756 width: 100%
757 }
758
759 #jp-carousel-comment-form-commenting-as {
760 }
761
762 #jp-carousel-comment-form-commenting-as input {
763 background: rgba(34,34,34,0.9);
764 border: 1px solid #3a3a3a;
765 color: #aaa;
766 font: 13px/1.4 "Helvetica Neue", sans-serif !important;
767 padding: 3px 6px;
768 float: left;
769 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
770 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
771 -moz-border-radius: 2px;
772 -webkit-border-radius: 2px;
773 border-radius: 2px;
774 width:285px;
775 }
776
777 #jp-carousel-comment-form-commenting-as input:focus {
778 background: #ccc;
779 color: #222;
780 }
781
782 #jp-carousel-comment-form-commenting-as p {
783 font: 400 13px/1.7 "Helvetica Neue", sans-serif !important;
784 margin:22px 0 0;
785 float: left;
786 }
787
788 #jp-carousel-comment-form-commenting-as fieldset {
789 float:left;
790 border:none;
791 margin:20px 0 0 0;
792 padding:0;
793 }
794
795 #jp-carousel-comment-form-commenting-as fieldset {
796 clear: both;
797 }
798
799 #jp-carousel-comment-form-commenting-as label {
800 font: 400 13px/1.7 "Helvetica Neue", sans-serif !important;
801 margin:0 20px 3px 0;
802 float:left;
803 width:100px;
804 }
805
806 #jp-carousel-comment-form-button-submit {
807 margin-top: 20px;
808 float:right;
809 }
810
811 #js-carousel-comment-form-container {
812 margin-bottom:15px;
813 overflow: auto;
814 width: 100%;
815 }
816
817 #jp-carousel-comment-form-container {
818 margin-bottom:15px;
819 overflow: auto;
820 width: 100%;
821 }
822
823 #jp-carousel-comment-post-results {
824 display: none;
825 overflow:auto;
826 width:100%;
827 }
828
829 #jp-carousel-comment-post-results span {
830 display:block;
831 text-align: center;
832 margin-top:20px;
833 width: 100%;
834 overflow: auto;
835 padding: 1em 0;
836 box-sizing: border-box;
837 background: rgba( 0, 0, 0, 0.7 );
838 border-radius: 2px;
839 font: 13px/1.4 "Helvetica Neue", sans-serif !important;
840 border: 1px solid rgba( 255, 255, 255, 0.17 );
841 -webkit-box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 1);
842 box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 1);
843 }
844
845 .jp-carousel-comment-post-error {
846 color:#DF4926;
847 }
848
849 .jp-carousel-comment-post-success {
850 /*color:#21759B;*/
851 }
852
853 #jp-carousel-comments-closed {
854 display: none;
855 color: #999;
856 }
857
858 #jp-carousel-comments-loading {
859 font: 400 15px/1.7 "Helvetica Neue", sans-serif !important;
860 display: none;
861 color: #999;
862 text-align: left;
863 margin-bottom: 20px;
864 }
865
866
867 /* ----- Light variant ----- */
868
869 .jp-carousel-light .jp-carousel-overlay {
870 background: #fff;
871 }
872
873 .jp-carousel-light .jp-carousel-next-button:hover span,
874 .jp-carousel-light .jp-carousel-previous-button:hover span {
875 opacity: 0.8;
876 }
877
878 .jp-carousel-light .jp-carousel-close-hint:hover,
879 .jp-carousel-light .jp-carousel-titleanddesc div {
880 color: #000 !important;
881 }
882
883 .jp-carousel-light .jp-carousel-comments p a,
884 .jp-carousel-light .jp-carousel-comment .comment-author a,
885 .jp-carousel-light .jp-carousel-titleanddesc p a,
886 .jp-carousel-light .jp-carousel-titleanddesc p a,
887 .jp-carousel-light .jp-carousel-comments p a,
888 .jp-carousel-light .jp-carousel-info h2 a {
889 color: #1e8cbe !important;
890 }
891
892 .jp-carousel-light .jp-carousel-comments p a:hover,
893 .jp-carousel-light .jp-carousel-comment .comment-author a:hover,
894 .jp-carousel-light .jp-carousel-titleanddesc p a:hover,
895 .jp-carousel-light .jp-carousel-titleanddesc p a:hover,
896 .jp-carousel-light .jp-carousel-comments p a:hover,
897 .jp-carousel-light .jp-carousel-info h2 a:hover {
898 color: #f1831e !important;
899 }
900
901 .jp-carousel-light .jp-carousel-info h2,
902 .jp-carousel-light .jp-carousel-titleanddesc,
903 .jp-carousel-light .jp-carousel-titleanddesc p,
904 .jp-carousel-light .jp-carousel-comment,
905 .jp-carousel-light .jp-carousel-comment p,
906 .jp-carousel-light div.jp-carousel-buttons a,
907 .jp-carousel-light .jp-carousel-titleanddesc p strong,
908 .jp-carousel-light .jp-carousel-titleanddesc p b,
909 .jp-carousel-light .jp-carousel-titleanddesc p em,
910 .jp-carousel-light .jp-carousel-titleanddesc p i {
911 color: #666;
912 }
913
914 .jp-carousel-light .jp-carousel-buttons {
915 border-bottom-color: #f0f0f0;
916 background: #f5f5f5;
917 }
918
919 .jp-carousel-light div.jp-carousel-buttons a:hover {
920 text-decoration: none;
921 color: #f1831e;
922 }
923
924 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog,
925 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog:hover {
926 background-position: 4px -56px;
927 padding-left: 24px !important;
928 }
929
930 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
931 background-color: #2ea2cc;
932 color: #fff;
933 }
934
935 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
936 background-position: 0px -176px;
937 }
938
939 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
940 background-position: 5px -36px;
941 }
942
943 .jp-carousel-light div#carousel-reblog-box {
944 background: #eee;
945 background: -moz-linear-gradient(bottom, #ececec, #f7f7f7);
946 background: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f7f7f7));
947 -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
948 -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
949 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
950 border:1px solid #ddd;
951 }
952
953 .jp-carousel-light #carousel-reblog-box textarea {
954 border: 1px inset #ccc;
955 color: #666;
956 border: 1px solid #cfcfcf;
957 background: #fff;
958 }
959
960 .jp-carousel-light #carousel-reblog-box .canceltext {
961 color: #888;
962 }
963
964 .jp-carousel-light #carousel-reblog-box .canceltext a {
965 color: #666;
966 }
967
968 .jp-carousel-light #carousel-reblog-box select {
969 background: #eee;
970 color: #333;
971 border: 1px solid #aaa;
972 }
973
974 .jp-carousel-light #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
975 color: #333;
976 background: #fff;
977 background: -moz-linear-gradient(bottom, #ddd, #fff);
978 background: -webkit-gradient(linear, left bottom, left top, from(#ddd), to(#fff));
979 border: 1px solid #aaa;
980 }
981
982 .jp-carousel-light .jp-carousel-image-meta {
983 background: #fafafa;
984 border: 1px solid #eee;
985 border-top-color: #f5f5f5;
986 border-left-color: #f5f5f5;
987 color: #333;
988 }
989
990 .jp-carousel-light .jp-carousel-image-meta li {
991 color: #000 !important;
992 }
993
994 .jp-carousel-light .jp-carousel-close-hint {
995 color: #ccc;
996 }
997
998 .jp-carousel-light .jp-carousel-close-hint span {
999 background-color: white;
1000 border-color: #ccc;
1001 }
1002
1003 .jp-carousel-light #jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
1004 color: #aaa;
1005 }
1006
1007 .jp-carousel-light #jp-carousel-comment-form-comment-field:focus {
1008 color: #333;
1009 }
1010
1011 .jp-carousel-light #jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
1012 color: #ddd;
1013 }
1014
1015 .jp-carousel-light a.jp-carousel-image-download {
1016 background-position: 0 -122px;
1017 }
1018
1019 .jp-carousel-light a.jp-carousel-image-download:hover {
1020 background-position: 0 -122px;
1021 color: #f1831e;
1022 }
1023
1024 .jp-carousel-light textarea#jp-carousel-comment-form-comment-field {
1025 background: #fbfbfb;
1026 color: #333;
1027 border: 1px solid #dfdfdf;
1028 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1029 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1030 }
1031
1032 .jp-carousel-light #jp-carousel-comment-form-commenting-as input {
1033 background: #fbfbfb;
1034 border: 1px solid #dfdfdf;
1035 color: #333;
1036 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1037 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1038 }
1039
1040 .jp-carousel-light #jp-carousel-comment-form-commenting-as input:focus {
1041 background: #fbfbfb;
1042 color: #333;
1043 }
1044
1045 .jp-carousel-light #jp-carousel-comment-post-results span {
1046 background: #f7f7f7;
1047 border:1px solid #dfdfdf;
1048 -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
1049 box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
1050 }
1051
1052 .jp-carousel-light .jp-carousel-slide {
1053 background-color:#fff;
1054 }
1055
1056 .jp-carousel-light .jp-carousel-titleanddesc {
1057 border-top: 1px solid #eee;
1058 }
1059
1060 .jp-carousel-light .jp-carousel-fadeaway {
1061 background: -moz-linear-gradient(bottom, rgba(255,255,255,0.75), rgba(255,255,255,0));
1062 background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));
1063 }
1064
1065 /* Small screens */
1066 @media only screen and (max-width: 760px) {
1067
1068 .jp-carousel-info {
1069 margin: 0 10px !important;
1070 }
1071
1072 .jp-carousel-next-button, .jp-carousel-previous-button {
1073 display: none !important;
1074 }
1075
1076 .jp-carousel-buttons {
1077 display: none !important;
1078 }
1079
1080 .jp-carousel-image-meta {
1081 float: none !important;
1082 width: 100% !important;
1083 -moz-box-sizing:border-box;
1084 -webkit-box-sizing:border-box;
1085 box-sizing: border-box;
1086 }
1087
1088 .jp-carousel-close-hint {
1089 font-weight: 800 !important;
1090 font-size: 26px !important;
1091 position: fixed !important;
1092 top: -10px;
1093 }
1094
1095 .jp-carousel-slide img {
1096 filter: alpha(opacity=100);
1097 opacity: 1;
1098 }
1099
1100 .jp-carousel-wrap {
1101 background-color: #000;
1102 }
1103
1104 .jp-carousel-fadeaway {
1105 display: none;
1106 }
1107
1108 #jp-carousel-comment-form-container {
1109 display: none !important;
1110 }
1111
1112 .jp-carousel-titleanddesc {
1113 padding-top: 0 !important;
1114 border: none !important;
1115 }
1116 .jp-carousel-titleanddesc-title {
1117 font-size: 1em !important;
1118 }
1119
1120 .jp-carousel-left-column-wrapper {
1121 padding: 0;
1122 width: 100% !important;
1123 }
1124
1125 .jp-carousel-photo-info {
1126 left: 0 !important;
1127 width: 100% !important;
1128 }
1129 }
1130