PluginProbe
Jetpack – WP Security, Backup, Speed, & Growth / 4.2.5
Jetpack – WP Security, Backup, Speed, & Growth v4.2.5
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 14.2.2 14.3.1 All 501 releases
jetpack / css / jetpack-admin.css

jetpack-admin.css in Jetpack – WP Security, Backup, Speed, & Growth 4.2.5, at css/jetpack-admin.css

3,740 lines 67.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!
2 * Do not modify this file directly. It is compiled Sass code.
3 * @see: jetpack/_inc/jetpack.scss
4 */
5 .j-row {
6 width: 100%;
7 margin: 0 auto;
8 }
9 .j-row:before, .j-row:after {
10 content: " ";
11 display: table;
12 }
13 .j-row:after {
14 clear: both;
15 }
16
17 .j-col {
18 padding: 0.85em;
19 width: 100%;
20 float: left;
21 position: relative;
22 }
23
24 @media only screen {
25 .j-sm-1 {
26 width: 8.33333%;
27 }
28
29 .j-sm-2 {
30 width: 16.66667%;
31 }
32
33 .j-sm-3 {
34 width: 25%;
35 }
36
37 .j-sm-4 {
38 width: 33.33333%;
39 }
40
41 .j-sm-5 {
42 width: 41.66667%;
43 }
44
45 .j-sm-6 {
46 width: 50%;
47 }
48
49 .j-sm-7 {
50 width: 58.33333%;
51 }
52
53 .j-sm-8 {
54 width: 66.66667%;
55 }
56
57 .j-sm-9 {
58 width: 75%;
59 }
60
61 .j-sm-10 {
62 width: 83.33333%;
63 }
64
65 .j-sm-11 {
66 width: 91.66667%;
67 }
68
69 .j-sm-12 {
70 width: 100%;
71 }
72 }
73 @media (min-width: 530px) {
74 .j-md-1 {
75 width: 8.33333%;
76 }
77
78 .j-md-2 {
79 width: 16.66667%;
80 }
81
82 .j-md-3 {
83 width: 25%;
84 }
85
86 .j-md-4 {
87 width: 33.33333%;
88 }
89
90 .j-md-5 {
91 width: 41.66667%;
92 }
93
94 .j-md-6 {
95 width: 50%;
96 }
97
98 .j-md-7 {
99 width: 58.33333%;
100 }
101
102 .j-md-8 {
103 width: 66.66667%;
104 }
105
106 .j-md-9 {
107 width: 75%;
108 }
109
110 .j-md-10 {
111 width: 83.33333%;
112 }
113
114 .j-md-11 {
115 width: 91.66667%;
116 }
117
118 .j-md-12 {
119 width: 100%;
120 }
121 }
122 @media (min-width: 782px) {
123 .j-lrg-1 {
124 width: 8.33333%;
125 }
126
127 .j-lrg-2 {
128 width: 16.66667%;
129 }
130
131 .j-lrg-3 {
132 width: 25%;
133 }
134
135 .j-lrg-4 {
136 width: 33.33333%;
137 }
138
139 .j-lrg-5 {
140 width: 41.66667%;
141 }
142
143 .j-lrg-6 {
144 width: 50%;
145 }
146
147 .j-lrg-7 {
148 width: 58.33333%;
149 }
150
151 .j-lrg-8 {
152 width: 66.66667%;
153 }
154
155 .j-lrg-9 {
156 width: 75%;
157 }
158
159 .j-lrg-10 {
160 width: 83.33333%;
161 }
162
163 .j-lrg-11 {
164 width: 91.66667%;
165 }
166
167 .j-lrg-12 {
168 width: 100%;
169 }
170 }
171 body,
172 button,
173 input,
174 select,
175 textarea {
176 color: #222222;
177 font-family: "Open Sans", Helvetica, Arial, sans-serif;
178 font-size: 14px;
179 line-height: 1.4;
180 -webkit-font-smoothing: antialiased;
181 }
182
183 h1,
184 h2,
185 h3,
186 h4,
187 h5,
188 h6 {
189 color: #222;
190 clear: both;
191 }
192
193 a {
194 color: #0d72b2;
195 transition: color .2s;
196 text-decoration: none;
197 }
198 a:visited {
199 color: #0d72b2;
200 }
201 a:hover {
202 color: #0f92e5;
203 }
204 a:focus {
205 outline: thin dotted;
206 }
207
208 address {
209 margin: 0 0 1.5em;
210 }
211
212 abbr[title],
213 acronym {
214 cursor: help;
215 }
216
217 ins {
218 background: #eee;
219 text-decoration: none;
220 }
221
222 dt {
223 font-weight: 700;
224 }
225
226 fieldset {
227 border: 0;
228 margin: 0;
229 padding: 0;
230 }
231
232 textarea {
233 resize: vertical;
234 }
235
236 hr {
237 display: block;
238 height: 1px;
239 border: 0;
240 border-top: 1px solid #ccc;
241 margin: 1em 0;
242 padding: 0;
243 }
244
245 img {
246 vertical-align: middle;
247 }
248
249 @-webkit-keyframes "grow" {
250 0% {
251 -webkit-transform: scale(0.3);
252 transform: scale(0.3);
253 }
254
255 60% {
256 -webkit-transform: scale(1.15);
257 transform: scale(1.15);
258 }
259
260 100% {
261 -webkit-transform: scale(1);
262 transform: scale(1);
263 }
264 }
265
266 @keyframes "grow" {
267 0% {
268 -webkit-transform: scale(0.3);
269 transform: scale(0.3);
270 }
271
272 60% {
273 -webkit-transform: scale(1.15);
274 transform: scale(1.15);
275 }
276
277 100% {
278 -webkit-transform: scale(1);
279 transform: scale(1);
280 }
281 }
282 @-webkit-keyframes "candy" {
283 0% {
284 -webkit-transform: scale(1);
285 transform: scale(1);
286 }
287
288 20% {
289 -webkit-transform: scale(1.15);
290 transform: scale(1.15);
291 }
292
293 60% {
294 -webkit-transform: scale(0.95);
295 transform: scale(0.95);
296 }
297
298 100% {
299 -webkit-transform: scale(1);
300 transform: scale(1);
301 }
302 }
303 @keyframes "candy" {
304 0% {
305 -webkit-transform: scale(1);
306 transform: scale(1);
307 }
308
309 20% {
310 -webkit-transform: scale(1.15);
311 transform: scale(1.15);
312 }
313
314 60% {
315 -webkit-transform: scale(0.95);
316 transform: scale(0.95);
317 }
318
319 100% {
320 -webkit-transform: scale(1);
321 transform: scale(1);
322 }
323 }
324 @-webkit-keyframes "flyer" {
325 0% {
326 -webkit-transform: translate3d(0px, 0px, 0px);
327 transform: translate3d(0px, 0px, 0px);
328 }
329
330 100% {
331 -webkit-transform: translate3d(680px, -680px, 0px);
332 transform: translate3d(680px, -680px, 0px);
333 }
334 }
335 @keyframes "flyer" {
336 0% {
337 -webkit-transform: translate3d(0px, 0px, 0px);
338 transform: translate3d(0px, 0px, 0px);
339 }
340
341 100% {
342 -webkit-transform: translate3d(680px, -680px, 0px);
343 transform: translate3d(680px, -680px, 0px);
344 }
345 }
346 .button,
347 .download-jetpack {
348 transition: all .1s ease-in-out;
349 }
350
351 .jp-button, .jp-button--settings {
352 display: inline-block;
353 position: relative;
354 padding: 0.76923em 1.46154em;
355 color: #efefef;
356 font: 800 0.9285714286em/1 'Open Sans', Helvetica, sans-serif;
357 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
358 background: #6f7476;
359 border-radius: 3px;
360 }
361 .jp-button:visited, .jp-button--settings:visited {
362 color: #efefef;
363 }
364 .jp-button:hover, .jp-button--settings:hover, .jp-button:focus, .jp-button--settings:focus {
365 color: #fff;
366 background: #57972d;
367 }
368 .jp-button:active, .jp-button--settings:active {
369 background: #57972d;
370 opacity: 0.8;
371 }
372
373 .jp-button--settings {
374 background: #93b45f;
375 color: #e8eedf;
376 }
377 .jp-button--settings:visited {
378 color: #e8eedf;
379 }
380 .jp-button--settings:hover, .jp-button--settings:focus {
381 background: #9fbd72;
382 color: #fff;
383 }
384 .jp-button--settings.current {
385 background: #3c6621;
386 color: #fff;
387 box-shadow: inset 0 2px 0 #365A1F, inset 0 1px 3px #3c6621;
388 }
389
390 .download-jetpack {
391 display: inline-block;
392 position: relative;
393 padding: 0.64286em 1.08696em 0.53571em;
394 color: #fff;
395 font: 400 20px/1 "proxima-nova", 'Open Sans', Helvetica, sans-serif;
396 background: #518d2a;
397 z-index: 3;
398 border-radius: 6px;
399 box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0, 0, 0, 0.4);
400 }
401 .download-jetpack:visited {
402 color: #fff;
403 }
404 .download-jetpack:hover, .download-jetpack:focus {
405 color: #fff;
406 background: #57972d;
407 box-shadow: 0 6px 0 #3e6c20, 0 6px 3px rgba(0, 0, 0, 0.4);
408 }
409 .download-jetpack:active {
410 top: 6px;
411 box-shadow: 0 0px 0 #3e6c20, 0 0 0 rgba(0, 0, 0, 0.4);
412 }
413 .download-jetpack:active:after {
414 top: -6px;
415 }
416 .download-jetpack:before {
417 content: '';
418 display: inline-block;
419 position: relative;
420 top: -2px;
421 margin-right: 13px;
422 width: 30px;
423 height: 30px;
424 vertical-align: middle;
425 background: url("../images/connect-plug.svg") center center no-repeat;
426 background-size: 100%;
427 }
428 .download-jetpack:after {
429 content: '';
430 position: absolute;
431 top: 0;
432 left: 0;
433 width: 100%;
434 height: 100%;
435 }
436 @media (max-width: 1147px) {
437 .download-jetpack {
438 font-size: 1.28571em;
439 }
440 .download-jetpack:before {
441 top: -1px;
442 width: 23px;
443 height: 23px;
444 }
445 }
446 @media (max-width: 900px) {
447 .download-jetpack:active {
448 top: 0;
449 }
450 }
451 @media (max-width: 530px) {
452 .download-jetpack {
453 font-size: 1.21429em;
454 font-weight: 600;
455 }
456 .download-jetpack:before {
457 width: 19px;
458 height: 19px;
459 margin-right: 9px;
460 }
461 }
462
463 #searchsubmit {
464 display: inline-block;
465 border: none;
466 position: relative;
467 padding: 0.71429em 1.5em;
468 color: #efefef;
469 font: 800 0.8em/1 'Open Sans', Helvetica, sans-serif;
470 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
471 background: #6f7476;
472 outline: none;
473 border-radius: 3px;
474 }
475 #searchsubmit:visited {
476 color: #efefef;
477 }
478 #searchsubmit:hover, #searchsubmit:focus {
479 color: #fff;
480 background: #2aa0d5;
481 }
482 #searchsubmit:active {
483 opacity: 0.7;
484 }
485
486 @font-face {
487 font-family: 'automatticons';
488 src: url("../_inc/fonts/automatticons/automatticons.eot");
489 src: url("../_inc/fonts/automatticons/automatticons.eot?#iefix") format("embedded-opentype"), url("../_inc/fonts/automatticons/automatticons.woff") format("woff"), url("../_inc/fonts/automatticons/automatticons.ttf") format("truetype"), url("../_inc/fonts/automatticons/automatticons.svg#automatticonsregular") format("svg");
490 font-weight: normal;
491 font-style: normal;
492 }
493 @font-face {
494 font-family: "jetpack";
495 src: url("../_inc/fonts/jetpack/jetpack.eot");
496 src: url("../_inc/fonts/jetpack/jetpack.eot?#iefix") format("embedded-opentype"), url("../_inc/fonts/jetpack/jetpack.woff") format("woff"), url("../_inc/fonts/jetpack/jetpack.ttf") format("truetype"), url("../_inc/fonts/jetpack/jetpack.svg#jetpack") format("svg");
497 font-weight: normal;
498 font-style: normal;
499 }
500 @media screen and (-webkit-min-device-pixel-ratio: 0) {
501 @font-face {
502 font-family: "jetpack";
503 src: url("../_inc/fonts/jetpack/jetpack.svg#jetpack") format("svg");
504 }
505 }
506 .nav-horizontal a {
507 display: inline-block;
508 }
509 .nav-horizontal li {
510 position: relative;
511 float: left;
512 }
513 .nav-horizontal ul {
514 margin: 0;
515 padding: 0;
516 }
517
518 *,
519 *:before,
520 *:after {
521 -moz-box-sizing: border-box;
522 box-sizing: border-box;
523 }
524
525 ::-moz-selection {
526 background: #91bd51;
527 color: #fff;
528 text-shadow: none;
529 }
530
531 ::selection {
532 background: #91bd51;
533 color: #fff;
534 text-shadow: none;
535 }
536
537 #wpbody-content {
538 padding-bottom: 0;
539 }
540
541 #wpcontent {
542 margin-left: 160px;
543 padding: 0;
544 }
545
546 ul#adminmenu a.toplevel_page_jetpack:after {
547 border-right-color: #81a844;
548 }
549
550 .folded #wpcontent {
551 margin-left: 36px;
552 }
553
554 .jp-content {
555 background: #f9f9f9;
556 margin: 0;
557 height: auto;
558 min-height: 100%;
559 width: 100%;
560 width: 100%;
561 -webkit-font-smoothing: antialiased;
562 }
563 .jp-content .wrapper {
564 background: #f9f9f9;
565 }
566
567 @media (max-width: 900px) {
568 #wpcontent,
569 .auto-fold #wpcontent,
570 .auto-fold #wpfooter,
571 .modal,
572 .configure .frame.top.fixed {
573 margin-left: 36px;
574 padding-left: 0;
575 }
576 }
577 @media (max-width: 782px) {
578 #wpcontent,
579 .auto-fold #wpcontent,
580 .auto-fold #wpfooter,
581 .modal,
582 .configure .frame.top.fixed {
583 margin-left: 0;
584 }
585 }
586
587 @media (max-width: 782px) {
588 .configure .frame.top.fixed {
589 padding-left: 0;
590 }
591 }
592
593 .wrap.inner,
594 .page-content {
595 max-width: 950px;
596 margin: 0 auto;
597 }
598 .wrap.inner li,
599 .page-content li {
600 line-height: 23px;
601 }
602
603 @media (max-width: 530px) {
604 .page-content {
605 margin-top: 0;
606 }
607 }
608
609 @media (max-width: 1147px) {
610 .wrap.inner {
611 background: #f9f9f9;
612 padding: 15px;
613 }
614 }
615 @media (max-width: 530px) {
616 .wrap.inner {
617 margin-top: 1.71429em;
618 }
619 }
620
621 .jetpack_page_jetpack_modules .header-nav {
622 margin: 0;
623 }
624 .jetpack_page_jetpack_modules .page-content {
625 max-width: 1200px;
626 min-height: 500px;
627 margin: 0;
628 }
629
630 .page-content.about {
631 position: relative;
632 z-index: 10;
633 }
634 @media (max-width: 1147px) {
635 .page-content.about {
636 background: #f9f9f9;
637 padding: 15px;
638 }
639 }
640
641 @media (max-width: 1147px) {
642 .page-content.configure {
643 background: #f9f9f9;
644 }
645 }
646
647 .footer nav {
648 max-width: 550px;
649 margin: 0 auto;
650 }
651
652 .header {
653 left: 0;
654 right: 0;
655 background: #81a844;
656 }
657
658 .header-nav li {
659 line-height: 60px;
660 }
661 .header-nav a {
662 padding: 0 0.71429em;
663 line-height: 24px;
664 }
665 .header-nav .jetpack-logo a {
666 display: inline-block;
667 position: relative;
668 width: 214px;
669 margin-right: 6px;
670 background: url(../images/jetpack-logo.png) center center no-repeat;
671 background: url(../images/jetpack-logo.svg) center center no-repeat, none;
672 background-size: 183px auto;
673 color: #fff;
674 line-height: 60px;
675 font-weight: normal;
676 }
677 .header-nav .jetpack-logo a span {
678 text-indent: -9999px;
679 visibility: hidden;
680 }
681 .header-nav .jetpack-logo a:before {
682 content: '';
683 position: absolute;
684 top: 0;
685 left: 0;
686 width: 100%;
687 height: 100%;
688 background-size: 183px 32px;
689 }
690 .header-nav .jetpack-modules + .jetpack-modules {
691 margin-left: 15px;
692 }
693
694 .main-nav {
695 float: left;
696 }
697 .main-nav li {
698 margin: 0;
699 }
700 @media (max-width: 900px) {
701 .main-nav {
702 font-size: 13px;
703 }
704 }
705
706 .user-nav {
707 float: right;
708 }
709 .user-nav li {
710 margin: 0;
711 }
712
713 .jetpack-pagestyles #screen-meta {
714 margin: 0;
715 }
716 .jetpack-pagestyles #screen-meta-links .screen-meta-toggle {
717 z-index: 2;
718 }
719 .jetpack-pagestyles #screen-options-link-wrap, .jetpack-pagestyles #contextual-help-link-wrap {
720 border: none;
721 }
722 .jetpack-pagestyles .update-nag {
723 display: none;
724 }
725
726 .masthead {
727 position: relative;
728 text-align: center;
729 z-index: 1;
730 background-color: #81a844;
731 background-image: linear-gradient(top, #81a844, #8eb74e);
732 }
733 .masthead.hasbutton .flyer {
734 bottom: -270px;
735 }
736 .masthead.hasbutton .subhead {
737 margin-top: 175px;
738 }
739 @media (max-width: 530px) {
740 .masthead.hasbutton .subhead {
741 margin-top: 105px;
742 padding: 0;
743 }
744 }
745 .masthead h1,
746 .masthead h2 {
747 margin: 0 auto;
748 }
749 .masthead h1 {
750 padding: 2.5em 0 1.11111em;
751 max-width: 21.94444em;
752 color: #fff;
753 font: 300 2.57143em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
754 position: relative;
755 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
756 z-index: 3;
757 }
758 .masthead h1 + .flyby {
759 margin-top: 180px;
760 }
761 @media (max-width: 1147px) {
762 .masthead h1 {
763 padding-top: 1.83333em;
764 font-size: 2.14286em;
765 }
766 }
767 @media (max-width: 782px) {
768 .masthead h1 {
769 max-width: 600px;
770 font-size: 28px;
771 }
772 }
773 @media (max-width: 530px) {
774 .masthead h1 {
775 margin: 0 15px;
776 padding: 31px 0 15px 0;
777 font-size: 21px;
778 font-weight: 400;
779 }
780 }
781
782 .jetpack-connected .masthead h1 {
783 margin-bottom: 33px;
784 max-width: 600px;
785 }
786
787 .flyer {
788 position: absolute;
789 bottom: -200px;
790 left: 4%;
791 z-index: 1;
792 -webkit-animation: flyer 3.4s 2s ease-in-out;
793 animation: flyer 3.4s 2s ease-in-out;
794 }
795 .flyer:nth-child(2) {
796 left: 49%;
797 width: 120px;
798 height: 131px;
799 -webkit-animation-delay: 4.6s;
800 animation-delay: 4.6s;
801 -webkit-animation-duration: 2.4s;
802 animation-duration: 2.4s;
803 }
804 .flyer:nth-child(3) {
805 left: 23%;
806 width: 60px;
807 height: 66px;
808 -webkit-animation-delay: 5.8s;
809 animation-delay: 5.8s;
810 -webkit-animation-duration: 4.5s;
811 animation-duration: 4.5s;
812 }
813
814 .subhead {
815 position: relative;
816 margin-top: 105px;
817 padding: 4em 0;
818 background: #f9f9f9;
819 z-index: 2;
820 }
821 .subhead h2 {
822 max-width: 460px;
823 color: #5d6d74;
824 font: 400 1.57143em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
825 text-shadow: 0 1px 1px #fff;
826 }
827 @media (max-width: 900px) {
828 .subhead h2 {
829 max-width: 428px;
830 font-size: 20px;
831 }
832 }
833 @media (max-width: 530px) {
834 .subhead h2 {
835 display: none;
836 }
837 }
838 .subhead:after {
839 content: '';
840 position: absolute;
841 bottom: 100%;
842 left: 0;
843 margin-bottom: -1px;
844 width: 100%;
845 height: 228px;
846 background: url("../images/the-cloud.svg") center bottom repeat-x;
847 pointer-events: none;
848 z-index: -1;
849 }
850 @media (max-width: 1147px) {
851 .subhead {
852 margin-top: 122px;
853 padding: 70px 0 49px;
854 }
855 .subhead:after {
856 background-size: 160% auto;
857 }
858 }
859 @media (max-width: 900px) {
860 .subhead {
861 margin-top: 122px;
862 padding: 70px 0 49px;
863 }
864 }
865 @media (max-width: 530px) {
866 .subhead {
867 margin-top: 83px;
868 padding: 47px 15px 39px;
869 }
870 }
871
872 .clouds-sm {
873 height: 100px;
874 position: relative;
875 text-align: center;
876 z-index: 1;
877 background-color: #81a844;
878 background-image: linear-gradient(top, #81a844, #89b348);
879 }
880 .clouds-sm:after {
881 content: '';
882 position: absolute;
883 bottom: 0;
884 left: 0;
885 margin-bottom: -1px;
886 width: 100%;
887 height: 137px;
888 background: url("../images/the-cloud-sm.svg") center bottom repeat-x;
889 pointer-events: none;
890 z-index: 2;
891 }
892 @media (max-width: 530px) {
893 .clouds-sm {
894 height: 90px;
895 }
896 }
897
898 .featured {
899 border-top: 1px solid #d6d6d6;
900 border-bottom: 1px solid #d6d6d6;
901 background: #fff;
902 position: relative;
903 padding: 2.0em 1em 4.6em 1em;
904 text-align: center;
905 z-index: 1;
906 }
907 .featured:before {
908 content: "";
909 display: block;
910 position: absolute;
911 top: 0;
912 height: 100%;
913 z-index: -1;
914 }
915 .featured .features, .featured .modules {
916 margin: 0 auto;
917 display: inline-block;
918 }
919 @media (max-width: 530px) {
920 .featured {
921 display: none;
922 }
923 }
924
925 .featured h2,
926 .module-grid h2 {
927 margin-top: 1em;
928 color: #5d6d74;
929 font: 300 2em/1em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
930 text-align: center;
931 }
932 @media (max-width: 900px) {
933 .featured h2,
934 .module-grid h2 {
935 font-size: 30px;
936 }
937 }
938 @media (max-width: 782px) {
939 .featured h2,
940 .module-grid h2 {
941 font-size: 28px;
942 }
943 }
944
945 .features, .modules {
946 margin: 0 -5px;
947 }
948
949 .feature,
950 .module {
951 position: relative;
952 float: left;
953 margin: 0 5px 10px;
954 width: 310px;
955 transition: all .2s ease-in-out;
956 }
957 @media (max-width: 1147px) {
958 .feature,
959 .module {
960 margin: .75% 0 .75% 1.5%;
961 width: 32.333333%;
962 transition: none;
963 }
964 .feature:nth-child(3n + 1),
965 .module:nth-child(3n + 1) {
966 margin-left: 0;
967 }
968 .feature:hover,
969 .module:hover {
970 top: 0;
971 box-shadow: none;
972 }
973 }
974
975 .feature {
976 -webkit-transform: translateZ(0);
977 transform: translateZ(0);
978 }
979 .feature h3 {
980 margin: 0 0 0.58824em;
981 color: #697b84;
982 font-size: 1.21429em;
983 line-height: 1em;
984 font-weight: 800;
985 }
986 .feature p {
987 margin: 0;
988 color: #6e818a;
989 }
990 .feature:before {
991 content: '';
992 position: absolute;
993 bottom: 0;
994 left: 0;
995 width: 100%;
996 height: 10px;
997 background: rgba(0, 0, 0, 0.02);
998 z-index: -1;
999 -webkit-transform: translateZ(0);
1000 transform: translateZ(0);
1001 transition: all .2s ease-in-out;
1002 }
1003 .feature:hover {
1004 -webkit-transform: translateY(-5px);
1005 -ms-transform: translateY(-5px);
1006 transform: translateY(-5px);
1007 }
1008 .feature:hover h3 {
1009 color: #1a8dba;
1010 }
1011 .feature:hover .feature-img {
1012 border: 1px solid #ccc;
1013 border-bottom: none;
1014 }
1015 .feature:hover .no-border {
1016 border: none;
1017 }
1018 .feature:hover:before {
1019 -webkit-transform: translateY(5px);
1020 -ms-transform: translateY(5px);
1021 transform: translateY(5px);
1022 }
1023 @media (max-width: 1147px) {
1024 .feature:hover h3 {
1025 color: #6e818a;
1026 }
1027 .feature:hover .feature-img {
1028 border: 1px solid #ddd;
1029 border-bottom: none;
1030 }
1031 .feature:hover .no-border {
1032 border: none;
1033 }
1034 }
1035 .feature .feature-img {
1036 padding-top: 52%;
1037 width: 100%;
1038 height: auto;
1039 border: 1px solid #ddd;
1040 border-bottom: none;
1041 }
1042 .feature .feature-img.custom-css {
1043 background: url("../images/custom-css.jpg") no-repeat;
1044 background-size: 100% auto;
1045 }
1046 @media print, (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
1047 .feature .feature-img.custom-css {
1048 background-image: url("../images/custom-css@2x.jpg");
1049 }
1050 }
1051 .feature .feature-img.wordpress-connect {
1052 background: url("../images/wordpress-connect.jpg") no-repeat;
1053 background-size: 100% auto;
1054 }
1055 @media print, (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
1056 .feature .feature-img.wordpress-connect {
1057 background-image: url("../images/wordpress-connect@2x.jpg");
1058 }
1059 }
1060 .feature .feature-img.wordpress-stats {
1061 background: url("../images/wordpress-stats.jpg") no-repeat;
1062 background-size: 100% auto;
1063 }
1064 @media print, (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
1065 .feature .feature-img.wordpress-stats {
1066 background-image: url("../images/wordpress-stats@2x.jpg");
1067 }
1068 }
1069 .feature .feature-img.no-border {
1070 border: none;
1071 padding-bottom: 1px;
1072 }
1073
1074 .feature-description {
1075 display: block;
1076 padding: 1em 1.07143em 1.07143em;
1077 border: 1px solid #ddd;
1078 background: #f5f5f5;
1079 }
1080 .feature:hover .feature-description {
1081 background: #fff;
1082 border-color: #ccc;
1083 }
1084 @media (max-width: 1147px) {
1085 .feature:hover .feature-description {
1086 border: 1px solid #ddd;
1087 background: #f5f5f5;
1088 }
1089 }
1090 @media (max-width: 900px) {
1091 .feature-description {
1092 min-height: 115px;
1093 }
1094 }
1095
1096 .cat {
1097 clear: both;
1098 margin-bottom: 23px;
1099 }
1100 .cat h3 {
1101 font-size: 24px;
1102 font-weight: 300;
1103 margin: 0 0 13px 6px;
1104 text-align: left;
1105 }
1106 .cat .clear {
1107 clear: both;
1108 }
1109
1110 .module-grid {
1111 text-align: center;
1112 }
1113 .module-grid h2 {
1114 margin: 1em 0;
1115 }
1116 @media (max-width: 530px) {
1117 .module-grid h2 {
1118 padding-top: 16px;
1119 margin-top: 0;
1120 font-size: 25px;
1121 }
1122 }
1123
1124 #module-search {
1125 position: relative;
1126 width: 100%;
1127 max-width: 40.71429em;
1128 margin: 0 auto 1.07143em;
1129 overflow: hidden;
1130 }
1131
1132 #jetpack-search {
1133 margin: 0;
1134 padding: 11px 16px 11px 16px;
1135 width: 100%;
1136 border: 1px solid #c9ced0;
1137 border-radius: 3px;
1138 background: #fff;
1139 color: #5c6671;
1140 line-height: 1.3;
1141 }
1142 #jetpack-search:focus {
1143 color: #5c6671;
1144 outline: none;
1145 }
1146 #jetpack-search:focus + label {
1147 background: transparent;
1148 opacity: 0;
1149 }
1150 #jetpack-search::-webkit-input-placeholder {
1151 color: #a8acae;
1152 }
1153 #jetpack-search :-moz-placeholder {
1154 color: #a8acae;
1155 }
1156 #jetpack-search::-moz-placeholder {
1157 color: #a8acae;
1158 }
1159 #jetpack-search:-ms-input-placeholder {
1160 color: #a8acae;
1161 }
1162 #jetpack-search + label {
1163 position: absolute;
1164 top: 1px;
1165 right: 1px;
1166 bottom: 1px;
1167 width: 48px;
1168 color: #abafb1;
1169 text-indent: -9999px;
1170 pointer-events: none;
1171 border-radius: 3px;
1172 transition: all .2s ease-in-out;
1173 }
1174 #jetpack-search + label:after {
1175 content: '\f400';
1176 position: absolute;
1177 right: 11px;
1178 text-align: right;
1179 top: 4px;
1180 font-size: 1.71429em;
1181 font-weight: normal;
1182 font-family: "genericons";
1183 }
1184
1185 .jp-filter {
1186 margin-bottom: 2.85714em;
1187 color: #6f7476;
1188 }
1189 .jp-filter a {
1190 display: inline-block;
1191 position: relative;
1192 padding: 0.76923em 1.46154em;
1193 color: #aaa;
1194 font: 600 0.92857em/1 "Open Sans", Helvetica, Arial, sans-serif;
1195 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
1196 background: #eee;
1197 border-radius: 3px;
1198 background-clip: padding-box;
1199 }
1200 .jp-filter a.selected, .jp-filter a:hover, .jp-filter a:focus {
1201 color: #efefef;
1202 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
1203 background: #6f7476;
1204 }
1205 @media (max-width: 530px) {
1206 .jp-filter a {
1207 padding: 0.76em 1em;
1208 }
1209 }
1210
1211 .module {
1212 display: block;
1213 padding: 0.71429em 1.07143em 1em;
1214 text-align: left;
1215 border: 1px solid #dae0e2;
1216 background: #fff;
1217 box-shadow: 0 0 0 rgba(0, 0, 0, 0.03);
1218 transition: opacity 2s ease-in;
1219 }
1220 .module:hover {
1221 border-color: #8ac9e8;
1222 background: #f8fcfe;
1223 }
1224 .module h3 {
1225 cursor: pointer;
1226 margin: 0 0 0.5em;
1227 color: #1a8dba;
1228 font-size: 1.14286em;
1229 line-height: 1.4em;
1230 font-weight: 700;
1231 }
1232 .module p {
1233 margin: 0;
1234 color: #686f72;
1235 font-size: 0.85714em;
1236 }
1237 .module:hover, .module:focus {
1238 border-color: #8ac9e8;
1239 background: #f8fcfe;
1240 }
1241 .module.active {
1242 border-color: #2ea2cc;
1243 box-shadow: inset 4px 0 0 #2ea2cc;
1244 }
1245 .module.active:hover {
1246 border-color: #69bedd;
1247 box-shadow: inset 4px 0 0 #69bedd;
1248 }
1249 .module .button,
1250 .module .button-primary {
1251 margin-top: 15px;
1252 }
1253 @media (max-width: 530px) {
1254 .module .configure, .module .activate {
1255 display: block;
1256 width: 100%;
1257 text-align: center;
1258 }
1259 .module .button,
1260 .module .button-primary {
1261 width: 50%;
1262 }
1263 .module .button-primary {
1264 line-height: normal;
1265 padding: 6px 14px;
1266 height: auto;
1267 font-size: 14px;
1268 }
1269 }
1270 @media screen and (max-width: 450px) {
1271 .module .button,
1272 .module .button-primary {
1273 margin: 20px auto 0 auto;
1274 }
1275 .module .button.alignright,
1276 .module .button-primary.alignright {
1277 float: none;
1278 }
1279 }
1280 @media (max-width: 1147px) {
1281 .cat .module:nth-child(3n + 1) {
1282 margin: .75% 0 .75% 1.5%;
1283 }
1284 .cat .module:nth-child(3n - 1) {
1285 margin-left: 0;
1286 }
1287 }
1288 @media (max-width: 900px) {
1289 .cat .module {
1290 margin: 1% 0 1% 2%;
1291 }
1292 .cat .module:nth-child(2n + 1) {
1293 margin: 1% 0 1% 2%;
1294 }
1295 .cat .module:nth-child(2n + 0) {
1296 margin-left: 0;
1297 }
1298 }
1299 @media (max-width: 530px) {
1300 .cat .module {
1301 margin: 5px 0;
1302 }
1303 .cat .module:nth-child(2n + 1) {
1304 margin-left: 0;
1305 }
1306 .cat .module:nth-child(2n + 0) {
1307 margin-left: 0;
1308 }
1309 }
1310 @media (max-width: 900px) {
1311 .module {
1312 margin: 1% 0 1% 2%;
1313 width: 49%;
1314 }
1315 .module:nth-child(3n + 1) {
1316 margin-left: 2%;
1317 }
1318 .module:nth-child(2n + 1) {
1319 margin-left: 0;
1320 }
1321 }
1322 @media (max-width: 530px) {
1323 .module {
1324 margin: 5px 0;
1325 width: 100%;
1326 }
1327 .module:nth-child(3n + 1) {
1328 margin-left: 0;
1329 }
1330 .module:nth-child(2n + 1) {
1331 margin-left: 0;
1332 }
1333 }
1334
1335 .new {
1336 position: relative;
1337 }
1338 .new:after {
1339 content: 'NEW';
1340 position: absolute;
1341 top: -8px;
1342 right: -8px;
1343 padding-top: 10px;
1344 width: 32px;
1345 height: 32px;
1346 color: #fff;
1347 font-size: 8px;
1348 font-weight: 800;
1349 text-align: center;
1350 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
1351 background: url("../images/new-badge.svg") center center no-repeat;
1352 background-size: 100%;
1353 border-radius: 50%;
1354 }
1355
1356 .paid {
1357 display: inline-block;
1358 position: relative;
1359 top: 5px;
1360 margin-left: 10px;
1361 padding: 1px 6px 0 4px;
1362 height: 13px;
1363 color: #fff;
1364 font: 700 10px/1 "Open Sans", Helvetica, Arial, sans-serif;
1365 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
1366 background: #d0d0d0;
1367 vertical-align: top;
1368 }
1369 .paid:before, .paid:after {
1370 position: absolute;
1371 top: 0;
1372 right: 100%;
1373 font: normal 14px/14px "genericons";
1374 }
1375 .paid:before {
1376 content: '\f503';
1377 color: #d0d0d0;
1378 text-shadow: none;
1379 }
1380 .paid:after {
1381 content: '\f428';
1382 margin-right: -5px;
1383 font-size: 11px;
1384 }
1385
1386 .rtl .paid:before {
1387 content: '\f501';
1388 }
1389
1390 .load-more {
1391 margin: 2.71429em 0 6.15385em;
1392 }
1393
1394 .set {
1395 display: none;
1396 }
1397
1398 .show.set {
1399 display: block;
1400 }
1401
1402 .loading {
1403 bottom: 50%;
1404 position: absolute;
1405 top: 50%;
1406 width: 100%;
1407 }
1408 .loading span {
1409 color: #999;
1410 }
1411
1412 .modal {
1413 background: #fff;
1414 position: fixed;
1415 top: 52px;
1416 bottom: 20px;
1417 right: 20px;
1418 left: 20px;
1419 margin-left: 160px;
1420 display: none;
1421 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
1422 z-index: 500;
1423 }
1424 .modal .close {
1425 position: absolute;
1426 top: 0;
1427 right: 0;
1428 font: 300 1.71429em "genericons" !important;
1429 color: #777;
1430 content: '\f405';
1431 display: inline-block;
1432 padding: 0.28571em 0.71429em 0.42857em;
1433 z-index: 5;
1434 }
1435 .modal .close:hover {
1436 background: #eee;
1437 opacity: 0.8;
1438 }
1439 .modal .close:active {
1440 background: #eee;
1441 opacity: 0.4;
1442 }
1443 .modal #jp-post-flair {
1444 display: none;
1445 }
1446 .modal .content-container {
1447 position: absolute;
1448 top: 0;
1449 right: 0;
1450 bottom: 0;
1451 left: 0;
1452 overflow: auto;
1453 padding: 2.14286em;
1454 }
1455 .modal .content {
1456 margin: 0 auto;
1457 max-width: 900px;
1458 text-align: left;
1459 }
1460 .modal h2 {
1461 text-align: left;
1462 margin-top: 0;
1463 color: #5d6d74;
1464 font: 300 32px "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
1465 text-shadow: 0 1px 1px #fff;
1466 }
1467 @media (max-width: 530px) {
1468 .modal h2 {
1469 font-size: 26px;
1470 }
1471 }
1472 .modal h5 {
1473 clear: left;
1474 }
1475 .modal p {
1476 font-size: 1.23077em;
1477 }
1478 .modal footer {
1479 position: absolute;
1480 left: 0;
1481 bottom: 0;
1482 width: 100%;
1483 padding: 12px 20px;
1484 border-top: 1px solid #ddd;
1485 background: #fff;
1486 text-align: right;
1487 }
1488 .modal footer ul {
1489 margin: 0;
1490 }
1491 .modal footer li {
1492 display: inline-block;
1493 margin: 0;
1494 }
1495 .modal .button-secondary,
1496 .modal .button-primary:active {
1497 vertical-align: baseline;
1498 }
1499 @media (max-width: 900px) {
1500 .modal {
1501 bottom: 5%;
1502 margin-left: 36px;
1503 font-size: 80%;
1504 }
1505 .modal .content {
1506 top: 38px;
1507 }
1508 }
1509 @media (max-width: 782px) {
1510 .modal {
1511 top: 66px;
1512 margin-left: 0;
1513 }
1514 }
1515 @media (max-width: 600px) {
1516 .modal {
1517 top: 10px;
1518 right: 10px;
1519 bottom: 10px;
1520 left: 10px;
1521 }
1522 }
1523
1524 .jp-info-img {
1525 float: right;
1526 margin: 0 0 30px 30px;
1527 }
1528 .jp-info-img img {
1529 border: 1px solid #ddd;
1530 max-width: 100%;
1531 height: auto;
1532 }
1533 .jp-info-img img:first-child {
1534 margin-top: 0;
1535 }
1536 @media (max-width: 782px) {
1537 .jp-info-img {
1538 float: none;
1539 margin: 0 0 15px;
1540 }
1541 }
1542
1543 .content-container.modal-footer {
1544 bottom: 53px;
1545 }
1546
1547 .shade {
1548 background: #000;
1549 bottom: 0;
1550 cursor: pointer;
1551 display: none;
1552 left: 0;
1553 opacity: 0.2;
1554 position: fixed;
1555 right: 0;
1556 top: 0;
1557 z-index: 11;
1558 }
1559
1560 .entry-title,
1561 .page-template-default h1 {
1562 margin-top: 0.61111em;
1563 color: #5d6d74;
1564 font: 300 2.57143em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
1565 text-shadow: 0 1px 1px #fff;
1566 }
1567 @media (max-width: 530px) {
1568 .entry-title,
1569 .page-template-default h1 {
1570 font-size: 2em;
1571 }
1572 }
1573
1574 .blog h3,
1575 .single h3,
1576 .page-template-default h2 {
1577 margin-top: 0.61111em;
1578 color: #5d6d74;
1579 font: 300 1.9em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
1580 text-shadow: 0 1px 1px #fff;
1581 }
1582 @media (max-width: 530px) {
1583 .blog h3,
1584 .single h3,
1585 .page-template-default h2 {
1586 font-size: 1.4em;
1587 }
1588 }
1589
1590 .page-template-default p {
1591 line-height: 1.71429em;
1592 }
1593
1594 .blog .type-post,
1595 .page-template-default .type-page,
1596 .single .type-post,
1597 .single .type-jetpack_support {
1598 float: left;
1599 width: 70%;
1600 }
1601
1602 .footer {
1603 margin-top: 1.42857em;
1604 position: relative;
1605 padding: 10em 0 4.28571em;
1606 text-align: center;
1607 }
1608 .footer:before, .footer:after {
1609 content: '';
1610 position: absolute;
1611 left: 0;
1612 pointer-events: none;
1613 }
1614 .footer:before {
1615 top: 0;
1616 margin-top: -1px;
1617 width: 100%;
1618 height: 195px;
1619 }
1620 .footer:after {
1621 display: none;
1622 }
1623 .footer .download-jetpack {
1624 margin-bottom: 33px;
1625 }
1626 @media (min-width: 1147px) {
1627 .footer {
1628 padding-bottom: 35px;
1629 }
1630 }
1631 @media (max-width: 1147px) {
1632 .footer {
1633 padding-top: 165px;
1634 padding-bottom: 0;
1635 /*&:after {
1636 display: none;
1637 }*/
1638 }
1639 .footer:before {
1640 background-size: 160% auto;
1641 }
1642 .footer ul {
1643 float: none;
1644 overflow: hidden;
1645 }
1646 }
1647 @media (max-width: 900px) {
1648 .footer {
1649 padding-top: 146px;
1650 }
1651 }
1652 @media (max-width: 782px) {
1653 .footer {
1654 margin-top: 0;
1655 }
1656 }
1657 @media (max-width: 530px) {
1658 .footer {
1659 margin-top: 0;
1660 padding-top: 135px;
1661 }
1662 }
1663 @media (max-width: 320px) {
1664 .footer {
1665 padding-top: 76px;
1666 }
1667 }
1668
1669 .footer nav {
1670 max-width: 100%;
1671 }
1672 .footer nav a,
1673 .footer nav a:visited {
1674 padding: 4px 6px;
1675 color: #999;
1676 }
1677 .footer nav a:hover, .footer nav a:focus,
1678 .footer nav a:visited:hover,
1679 .footer nav a:visited:focus {
1680 color: #81A844;
1681 }
1682 @media (max-width: 1147px) {
1683 .footer nav a:hover, .footer nav a:focus,
1684 .footer nav a:visited:hover,
1685 .footer nav a:visited:focus {
1686 color: #81a844;
1687 }
1688 }
1689 @media (max-width: 530px) {
1690 .footer nav li {
1691 display: block;
1692 float: none;
1693 margin: 0;
1694 text-align: left;
1695 }
1696 .footer nav a {
1697 display: block;
1698 padding: 0 16px;
1699 line-height: 44px;
1700 }
1701 }
1702
1703 .primary {
1704 padding: 25px 15px 10px 15px;
1705 border-bottom: 1px solid #eee;
1706 }
1707
1708 .secondary-footer {
1709 margin: 0 auto;
1710 }
1711 .secondary-footer li {
1712 margin-right: 5px;
1713 }
1714 @media (min-width: 782px) {
1715 .secondary-footer {
1716 padding: 8px 15px 10px;
1717 margin-bottom: 30px;
1718 border-bottom: 1px solid #eee;
1719 }
1720 }
1721 @media (min-width: 1147px) {
1722 .secondary-footer {
1723 margin-bottom: 0;
1724 }
1725 }
1726 @media (max-width: 782px) {
1727 .secondary-footer {
1728 padding: 8px 15px 8px;
1729 border-bottom: none;
1730 }
1731 }
1732 @media (max-width: 530px) {
1733 .secondary-footer {
1734 margin: 0;
1735 padding: 0;
1736 border: none;
1737 font-weight: 400;
1738 }
1739 .secondary-footer a {
1740 border-top: 1px solid #eee;
1741 }
1742 }
1743
1744 .footer .a8c-attribution {
1745 margin: 0;
1746 padding: 0 6px;
1747 color: #bbb;
1748 font-size: 0.78571em;
1749 font-family: "Gill Sans", "Gill Sans MT", "Open Sans", Helvetica, Arial, sans-serif;
1750 text-transform: uppercase;
1751 }
1752 .footer .a8c-attribution a {
1753 display: inline-block;
1754 position: relative;
1755 padding: 4px 16px;
1756 right: 9999px;
1757 outline: 0;
1758 }
1759 .footer .a8c-attribution a:after {
1760 content: 'A';
1761 position: absolute;
1762 top: 2px;
1763 right: -9999px;
1764 height: 100%;
1765 color: #999;
1766 font-size: 1.54545em;
1767 font-family: "automatticons";
1768 text-align: center;
1769 }
1770 .footer .a8c-attribution a:hover:after {
1771 -webkit-animation: candy .4s ease-in-out;
1772 animation: candy .4s ease-in-out;
1773 }
1774
1775 @media (min-width: 782px) {
1776 .secondary {
1777 padding: 0 15px 10px 15px;
1778 border-bottom: 1px solid #eee;
1779 }
1780 }
1781 @media (min-width: 1147px) {
1782 .secondary {
1783 padding: 0 15px 10px 15px;
1784 border-bottom: none;
1785 }
1786 }
1787
1788 .jetpack-message {
1789 background: #8eb74e;
1790 border: 1px solid #73963d;
1791 margin: 33px auto 0;
1792 max-width: 90%;
1793 position: relative;
1794 z-index: 2;
1795 }
1796 .jetpack-message.is-opt-in {
1797 margin: 50px 0 0;
1798 max-width: 100%;
1799 padding: 10px 15px;
1800 background: #fff;
1801 border: 0;
1802 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1803 font-size: 13px;
1804 text-align: center;
1805 }
1806 .subhead .jetpack-message.is-opt-in {
1807 margin: 0;
1808 padding-bottom: 0;
1809 background: transparent;
1810 box-shadow: none;
1811 }
1812 .subhead .jetpack-message.is-opt-in .jp-button, .subhead .jetpack-message.is-opt-in .jp-button--settings {
1813 display: inline-block;
1814 }
1815 .jetpack-message.is-opt-in p {
1816 color: #3c4549;
1817 }
1818 .jetpack-message.is-opt-in .jp-button, .jetpack-message.is-opt-in .jp-button--settings {
1819 margin-top: 15px;
1820 display: none;
1821 }
1822 .jetpack-message .squeezer h2 {
1823 font-size: 1em;
1824 }
1825 .jetpack-message h2 {
1826 color: #fff;
1827 margin: 0;
1828 }
1829 .jetpack-message p {
1830 color: #fff;
1831 margin: 0;
1832 opacity: 0.7;
1833 }
1834 .jetpack-message .squeezer {
1835 padding: 23px 23px 23px 80px;
1836 position: relative;
1837 text-align: left;
1838 }
1839 .jetpack-message .squeezer:before {
1840 color: #fff;
1841 content: '\f418';
1842 font-family: 'Genericons';
1843 font-size: 33px;
1844 height: 33px;
1845 left: 25px;
1846 opacity: 0.6;
1847 position: absolute;
1848 top: 23px;
1849 top: calc(50% - 22px );
1850 }
1851 @media (max-width: 530px) {
1852 .jetpack-message .squeezer {
1853 padding: 23px;
1854 }
1855 .jetpack-message .squeezer:before {
1856 display: none;
1857 }
1858 }
1859 .jetpack-message .squeezer a {
1860 color: #FFF;
1861 border-bottom: 1px solid #D5E4BD;
1862 }
1863 .jetpack-message .squeezer a:hover {
1864 border-bottom: 1px solid #F1F6E9;
1865 }
1866 .jetpack-message.error .squeezer:before, .jetpack-message.jetpack-err .squeezer:before {
1867 content: '\f414';
1868 }
1869
1870 .configure-module .jetpack-message {
1871 max-width: 100%;
1872 }
1873
1874 .jetpack-modules #site-icon-deprecated .info,
1875 .modules h3.icon,
1876 .jetpack-modules .info a {
1877 width: auto;
1878 }
1879 .jetpack-modules #site-icon-deprecated .info:before,
1880 .modules h3.icon:before,
1881 .jetpack-modules .info a:before {
1882 display: inline-block;
1883 position: relative;
1884 top: 1px;
1885 left: -3px;
1886 margin-right: 2px;
1887 opacity: 0.8;
1888 font: normal 20px "genericons";
1889 vertical-align: top;
1890 }
1891
1892 .jetpack-modules .info a:before {
1893 margin-top: 1px;
1894 }
1895
1896 .latex:before,
1897 .jetpack-modules #latex .info a:before {
1898 content: '\f408';
1899 }
1900
1901 .carousel:before,
1902 .jetpack-modules #carousel .info a:before {
1903 content: '\f102';
1904 }
1905
1906 .modules h3.contact-form:before,
1907 .jetpack-modules #contact-form .info a:before {
1908 content: '\f175';
1909 font: normal 20px "dashicons";
1910 }
1911
1912 .modules h3.custom-css:before,
1913 .jetpack-modules #custom-css .info a:before {
1914 content: '\f100';
1915 font: normal 20px "dashicons";
1916 }
1917
1918 .modules h3.enhanced-distribution:before,
1919 .jetpack-modules #enhanced-distribution .info a:before {
1920 content: '\f237';
1921 font: normal 20px "dashicons";
1922 }
1923
1924 .modules h3.widgets:before,
1925 .jetpack-modules #widgets .info a:before {
1926 content: '\f116';
1927 font: normal 20px "dashicons";
1928 }
1929
1930 .modules h3.gravatar-hovercards:before,
1931 .jetpack-modules #gravatar-hovercards .info a:before {
1932 content: 'G';
1933 font-family: "automatticons";
1934 }
1935
1936 .infinite-scroll:before,
1937 .jetpack-modules #infinite-scroll .info a:before {
1938 content: '\f408';
1939 }
1940
1941 .comments:before,
1942 .jetpack-modules #comments .info a:before {
1943 content: '\f108';
1944 }
1945
1946 .sso:before,
1947 .jetpack-modules #sso .info a:before {
1948 content: '\f205';
1949 }
1950
1951 .json-api:before,
1952 .jetpack-modules #json-api .info a:before {
1953 content: '\f415';
1954 }
1955
1956 .likes:before,
1957 .jetpack-modules #likes .info a:before {
1958 content: '\f408';
1959 }
1960
1961 .markdown:before,
1962 .jetpack-modules #markdown .info a:before {
1963 content: '\f462';
1964 }
1965
1966 .minileven:before,
1967 .jetpack-modules #minileven .info a:before {
1968 content: '\f453';
1969 }
1970
1971 .manage:before,
1972 .jetpack-modules #manage .info a:before {
1973 content: '\f205';
1974 }
1975
1976 .monitor:before,
1977 .jetpack-modules #monitor .info a:before {
1978 content: '\f468';
1979 }
1980
1981 .notes:before,
1982 .jetpack-modules #notes .info a:before {
1983 content: '\f300';
1984 }
1985
1986 .omnisearch:before,
1987 .jetpack-modules #omnisearch .info a:before {
1988 content: '\f400';
1989 }
1990
1991 .photon:before,
1992 .jetpack-modules #photon .info a:before {
1993 content: '\f403';
1994 }
1995
1996 .post-by-email:before,
1997 .jetpack-modules #post-by-email .info a:before {
1998 content: '\f410';
1999 }
2000
2001 .protect:before,
2002 .jetpack-modules #protect .info a:before {
2003 content: '\f470';
2004 position: relative;
2005 top: -1px;
2006 }
2007
2008 .modules h3.publicize:before,
2009 .jetpack-modules #publicize .info a:before {
2010 content: '\f237';
2011 font: normal 20px "dashicons";
2012 }
2013
2014 .related-posts:before,
2015 .jetpack-modules #related-posts .info a:before {
2016 content: '\f420';
2017 }
2018
2019 .sharedaddy:before,
2020 .jetpack-modules #sharedaddy .info a:before {
2021 content: '\f415';
2022 }
2023
2024 .shortcodes:before,
2025 .jetpack-modules #shortcodes .info a:before {
2026 content: '\f100';
2027 }
2028
2029 .verification-tools:before,
2030 .jetpack-modules #verification-tools .info a:before {
2031 content: '\f425';
2032 }
2033
2034 .after-the-deadline:before,
2035 .jetpack-modules #after-the-deadline .info a:before {
2036 content: '\f411';
2037 }
2038
2039 .subscriptions:before,
2040 .jetpack-modules #subscriptions .info a:before {
2041 content: '\f410';
2042 }
2043
2044 .tiled-gallery:before,
2045 .jetpack-modules #tiled-gallery .info a:before {
2046 content: '\f103';
2047 }
2048
2049 .modules h3.vaultpress:before,
2050 .jetpack-modules #vaultpress .info a:before {
2051 content: 'V';
2052 font-family: "automatticons";
2053 }
2054
2055 .videopress:before,
2056 .jetpack-modules #videopress .info a:before {
2057 content: '\f104';
2058 }
2059
2060 .modules h3.widget-visibility:before,
2061 .jetpack-modules #widget-visibility .info a:before {
2062 content: '\f116';
2063 font: normal 20px "dashicons";
2064 }
2065
2066 .stats:before,
2067 .jetpack-modules #stats .info a:before {
2068 content: '\f205';
2069 }
2070
2071 .shortlinks:before,
2072 .jetpack-modules #shortlinks .info a:before {
2073 content: '\f107';
2074 }
2075
2076 .modules h3.custom-content-types:before,
2077 .jetpack-modules #custom-content-types .info a:before {
2078 content: '\f498';
2079 font: normal 20px "dashicons";
2080 }
2081
2082 .modules h3.site-icon:before,
2083 .jetpack-modules #site-icon .info a:before {
2084 content: '\f475';
2085 }
2086
2087 .jetpack-modules #site-icon-deprecated .info:before {
2088 content: '\f475';
2089 }
2090
2091 .jetpack-modules #sitemaps .info a:before {
2092 content: '\f507';
2093 }
2094
2095 @media (max-width: 782px) {
2096 .blog .type-post,
2097 .page-template-default .type-page,
2098 .single .type-post,
2099 .single .type-jetpack_support {
2100 width: 100%;
2101 }
2102 }
2103 @media (max-width: 600px) {
2104 .clouds-sm {
2105 display: none;
2106 }
2107 }
2108 @media (max-width: 530px) {
2109 .wrap.inner.jp-support .jp-support-column-left {
2110 width: 100%;
2111 }
2112 .wrap.inner.jp-support .jp-support-column-left .widget-text {
2113 margin-right: 0;
2114 width: 100%;
2115 }
2116 .wrap.inner.jp-support .jp-support-column-right {
2117 width: 100%;
2118 }
2119 }
2120 @media screen and (max-width: 515px) {
2121 .jp-frame .header-nav {
2122 padding-bottom: 10px;
2123 }
2124 .jp-frame .header-nav li {
2125 line-height: 30px;
2126 }
2127 .jp-frame .header-nav .jetpack-logo {
2128 width: 100%;
2129 text-align: center;
2130 }
2131 .jp-frame .header-nav .jetpack-modules {
2132 margin: 0;
2133 width: 50%;
2134 text-align: right;
2135 padding: 0 5px;
2136 }
2137 .jp-frame .header-nav .jetpack-modules + .jetpack-modules {
2138 text-align: left;
2139 }
2140 .jp-frame .header-nav .jetpack-modules:nth-child(4) {
2141 text-align: center;
2142 margin: 0 auto;
2143 width: 100%;
2144 }
2145 .jp-frame .header-nav .jetpack-modules:nth-child(4) a {
2146 padding: 0 10px;
2147 }
2148 }
2149 @media (max-width: 320px) {
2150 .jetpack_page_jetpack_modules .wrap {
2151 padding: 0 0 1em;
2152 }
2153 }
2154
2155 .page-content.configure {
2156 margin-top: 0;
2157 }
2158
2159 .configure .frame.top {
2160 border: none;
2161 box-shadow: none;
2162 padding-top: 1.42857em;
2163 position: relative;
2164 top: auto;
2165 }
2166 .configure .frame.top.fixed {
2167 background: #f9f9f9;
2168 border-bottom: 1px solid #e9e9e9;
2169 padding-left: 160px;
2170 margin-top: -6px;
2171 position: fixed;
2172 right: 0;
2173 top: 32px;
2174 width: 100%;
2175 z-index: 4;
2176 box-shadow: 0 2px 2px -2px #eee;
2177 }
2178 @media (max-width: 782px) {
2179 .configure .frame.top.fixed {
2180 border: none;
2181 box-shadow: none;
2182 padding-top: 1.42857em;
2183 position: relative;
2184 top: auto;
2185 }
2186 }
2187 @media (max-width: 600px) {
2188 .configure .frame.top.fixed {
2189 top: 0;
2190 }
2191 }
2192 .configure .frame.top .tablenav.top {
2193 float: left;
2194 }
2195 @media (max-width: 900px) {
2196 .configure .frame.top .tablenav.top .actions {
2197 display: block;
2198 }
2199 }
2200 @media (max-width: 782px) {
2201 .configure .frame.top .tablenav.top .actions {
2202 margin-top: 6px;
2203 }
2204 }
2205
2206 .jp-frame-top-fixed .configure {
2207 padding-top: 94px;
2208 }
2209
2210 .filter-search {
2211 display: none;
2212 float: right;
2213 margin-top: 10px;
2214 }
2215 @media (max-width: 782px) {
2216 .filter-search {
2217 display: block;
2218 }
2219 }
2220 @media (max-width: 530px) {
2221 .filter-search {
2222 display: none;
2223 }
2224 }
2225
2226 .module-actions.landing-page {
2227 float: right;
2228 margin-right: 15px;
2229 }
2230 .module-actions.landing-page a {
2231 font-size: 0.6em;
2232 }
2233
2234 .table-bordered.jetpack-modules {
2235 border: none;
2236 margin-bottom: 0;
2237 }
2238 .table-bordered.jetpack-modules tr.jetpack-module th {
2239 border-left: 0;
2240 padding: 14px 4px 0;
2241 }
2242 .table-bordered.jetpack-modules tr.jetpack-module th input {
2243 display: block;
2244 }
2245 .table-bordered.jetpack-modules tr.jetpack-module:hover .genericon {
2246 display: inline-block;
2247 }
2248 .table-bordered.jetpack-modules tr.jetpack-module:hover td .row-actions span a {
2249 opacity: 1;
2250 }
2251 .table-bordered.jetpack-modules tr.jetpack-module.active th,
2252 .table-bordered.jetpack-modules tr.jetpack-module.active td {
2253 background: #f7fcfe;
2254 }
2255 .table-bordered.jetpack-modules tr.jetpack-module.active th {
2256 border-left: 4px solid #2ea2cc;
2257 padding-left: 0px;
2258 }
2259 .table-bordered.jetpack-modules tr.jetpack-module.active td:first-child {
2260 border-left: 4px solid #2ea2cc;
2261 }
2262 .table-bordered.jetpack-modules tr.jetpack-module.unavailable {
2263 opacity: 0.3;
2264 }
2265 .table-bordered.jetpack-modules tr.jetpack-module.unavailable input {
2266 display: none;
2267 }
2268 .table-bordered.jetpack-modules tr.jetpack-module#vaultpress {
2269 opacity: 1;
2270 }
2271 .table-bordered.jetpack-modules tr.jetpack-module.deprecated span {
2272 color: #888;
2273 }
2274 .table-bordered.jetpack-modules tr.jetpack-module.deprecated .dep-msg {
2275 margin-right: 10px;
2276 color: #555;
2277 }
2278 .table-bordered.jetpack-modules tr.jetpack-module th,
2279 .table-bordered.jetpack-modules tr.jetpack-module td {
2280 background: #fff;
2281 margin: 0;
2282 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2283 }
2284 .table-bordered.jetpack-modules tr.jetpack-module td {
2285 padding: 10px 10px 8px 14px;
2286 line-height: 25px;
2287 }
2288 .table-bordered.jetpack-modules tr.jetpack-module td:first-child {
2289 border-left: 4px solid #fff;
2290 }
2291 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2292 float: right;
2293 padding: 0 0 1px;
2294 visibility: visible;
2295 }
2296 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions span {
2297 margin-left: 5px;
2298 }
2299 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions span a {
2300 opacity: 0;
2301 }
2302 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions span a:focus {
2303 opacity: 1;
2304 }
2305 @media (max-width: 530px) {
2306 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2307 display: none;
2308 }
2309 }
2310 @media (max-width: 782px) {
2311 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2312 display: block;
2313 padding-left: 10px;
2314 visibility: visible;
2315 }
2316 }
2317 .table-bordered.jetpack-modules > thead > tr > th {
2318 border: 0;
2319 vertical-align: middle;
2320 }
2321 .table-bordered.jetpack-modules > thead > tr > th:last-child {
2322 padding-right: 0;
2323 }
2324 @media (max-width: 782px) {
2325 .table-bordered.jetpack-modules > thead > tr > th:last-child {
2326 padding-left: 0;
2327 }
2328 }
2329 .table-bordered.jetpack-modules td {
2330 background: #fff;
2331 }
2332 .table-bordered.jetpack-modules #doaction {
2333 margin-top: 0;
2334 }
2335 @media (max-width: 782px) {
2336 .table-bordered.jetpack-modules #doaction {
2337 padding: 10px 7px;
2338 }
2339 }
2340 .table-bordered.jetpack-modules .checkall {
2341 margin-top: 1px;
2342 }
2343 .table-bordered.jetpack-modules .filter-search {
2344 margin-top: 8px;
2345 }
2346 .table-bordered.jetpack-modules .genericon {
2347 color: #999;
2348 display: none;
2349 margin: 7px 3px 0;
2350 }
2351 @media (max-width: 900px) {
2352 .table-bordered.jetpack-modules .genericon {
2353 display: inline-block;
2354 }
2355 }
2356 .table-bordered.jetpack-modules .med {
2357 width: 70px;
2358 }
2359 .table-bordered.jetpack-modules .sm {
2360 width: 30px;
2361 }
2362 @media (max-width: 782px) {
2363 .table-bordered.jetpack-modules .check-column {
2364 width: 50px;
2365 }
2366 }
2367
2368 .fixed-top .check-column {
2369 padding: 8px 10px 0 10px;
2370 width: 2.2em;
2371 }
2372
2373 .wrap {
2374 margin: 0;
2375 padding: 0 1.5em 1em;
2376 overflow: hidden;
2377 }
2378 .wrap h2 {
2379 font-size: 24px;
2380 font-weight: 400;
2381 }
2382 .wrap .manage-left {
2383 float: left;
2384 margin: 0;
2385 padding: 0;
2386 width: 63%;
2387 }
2388 .wrap .manage-left table {
2389 width: 100%;
2390 }
2391 .wrap .manage-left th {
2392 font-weight: 400;
2393 }
2394 @media (max-width: 782px) {
2395 .wrap .manage-left {
2396 width: 100%;
2397 }
2398 }
2399 .wrap .manage-right {
2400 margin: 0;
2401 padding: 0;
2402 /*position: absolute;
2403 right: 0;*/
2404 float: right;
2405 width: 35%;
2406 z-index: 1;
2407 }
2408 .wrap .manage-right p {
2409 font-size: 12px;
2410 font-weight: bold;
2411 color: #bbb;
2412 padding-top: 2px;
2413 text-transform: uppercase;
2414 letter-spacing: 1px;
2415 clear: left;
2416 }
2417 .wrap .manage-right .bumper {
2418 margin-left: 33px;
2419 }
2420 .wrap .manage-right.show {
2421 display: block;
2422 overflow-y: auto;
2423 overflow-x: hidden;
2424 position: absolute;
2425 z-index: 100000;
2426 }
2427 .wrap .manage-right .search-bar {
2428 margin-bottom: 18px;
2429 max-width: 300px;
2430 }
2431 .wrap .manage-right p.search-box {
2432 float: none;
2433 height: auto;
2434 margin-bottom: 0;
2435 position: relative;
2436 }
2437 .wrap .manage-right p.search-box input[type='search'] {
2438 padding: 0 8px;
2439 width: 90%;
2440 line-height: initial;
2441 }
2442 @media (max-width: 782px) {
2443 .wrap .manage-right p.search-box input[type='search'] {
2444 float: left;
2445 padding: 9px 8px;
2446 }
2447 }
2448 .wrap .manage-right p.search-box input[type="submit"] {
2449 display: none;
2450 }
2451 .wrap .manage-right .button-group .button {
2452 outline: none;
2453 }
2454 .wrap .manage-right .subsubsub {
2455 margin: 0;
2456 padding: 0;
2457 }
2458 .wrap .manage-right .subsubsub a {
2459 padding: 0;
2460 line-height: inherit;
2461 }
2462 .wrap .manage-right .subsubsub .current {
2463 padding: 1px 5px;
2464 border-radius: 2px;
2465 margin-left: -5px;
2466 background: #0D72B2;
2467 color: #fff;
2468 }
2469 .wrap .manage-right .subsubsub .current .count {
2470 color: #BCD7E7;
2471 font-weight: 200;
2472 }
2473 .wrap .manage-right .subsubsub li {
2474 display: block;
2475 text-align: left;
2476 }
2477 @media (max-width: 782px) {
2478 .wrap .manage-right {
2479 background: #fff;
2480 bottom: 0;
2481 display: none;
2482 min-width: 300px;
2483 position: fixed;
2484 right: 0;
2485 top: 0;
2486 z-index: 13;
2487 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
2488 }
2489 .wrap .manage-right .bumper {
2490 margin: 13px;
2491 }
2492 .wrap .manage-right .navbar-form {
2493 margin: 0;
2494 padding: 0;
2495 }
2496 }
2497
2498 @media (max-width: 782px) {
2499 .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
2500 padding: 11px 10px;
2501 display: block;
2502 }
2503
2504 .jetpack_page_jetpack_modules #doaction {
2505 padding: 7px 14px;
2506 }
2507 .jetpack_page_jetpack_modules .fixed-top thead .check-column {
2508 padding: 28px 10px 0 10px;
2509 }
2510 .jetpack_page_jetpack_modules .filter-search {
2511 margin-top: 28px;
2512 }
2513 .jetpack_page_jetpack_modules .filter-search .button {
2514 padding: 7px 14px;
2515 }
2516
2517 .manage-right.show .subsubsub li {
2518 padding: 5px;
2519 }
2520 }
2521 @media (max-width: 650px) {
2522 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
2523 float: none;
2524 padding-left: 18px;
2525 }
2526 }
2527 @media (max-width: 430px) {
2528 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2529 display: none;
2530 }
2531
2532 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
2533 display: block;
2534 }
2535 }
2536 /* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
2537 .configure-module p {
2538 font-size: 14px;
2539 }
2540 .configure-module p.success, .configure-module p.error {
2541 color: white;
2542 padding: 10px;
2543 }
2544 .configure-module p.success {
2545 background-color: #81a844;
2546 }
2547 .configure-module p.error {
2548 background-color: #d94f4f;
2549 }
2550
2551 .protect-status p {
2552 font-size: 16px;
2553 }
2554 .protect-status strong {
2555 display: inline-block;
2556 margin-top: 10px;
2557 background: #fff;
2558 padding: 10px;
2559 border: 1px #ddd solid;
2560 font-size: 16px;
2561 color: #000;
2562 max-width: 100%;
2563 }
2564 .protect-status.attn {
2565 color: #d94f4f;
2566 }
2567 .protect-status.working {
2568 color: #81a844;
2569 }
2570
2571 /* Whitelisting */
2572 #non-editable-whitelist {
2573 margin-top: 15px;
2574 }
2575
2576 .protect-whitelist textarea {
2577 width: 100%;
2578 min-height: 150px;
2579 }
2580
2581 #editable-whitelist .whitelist-table {
2582 width: 100%;
2583 }
2584
2585 /* btns + inputs */
2586 .configure-module input[disabled] {
2587 opacity: .5;
2588 }
2589 .configure-module input.button-primary {
2590 font-weight: bold;
2591 }
2592
2593 /* whitelist table */
2594 .whitelist-table {
2595 border-top: 1px solid;
2596 border-right: 1px solid;
2597 border-color: #ddd;
2598 background-color: #fff;
2599 }
2600 .whitelist-table td, .whitelist-table th {
2601 padding: 10px;
2602 margin: 0;
2603 border-bottom: 1px solid;
2604 border-left: 1px solid;
2605 border-color: #ddd;
2606 font-size: 14px;
2607 }
2608 .whitelist-table th.heading {
2609 font-weight: bold;
2610 color: #5d6d74;
2611 text-align: left;
2612 background-color: #eee;
2613 }
2614 .whitelist-table td.item-actions {
2615 border-left: none;
2616 text-align: right;
2617 }
2618 .whitelist-table .toolbar {
2619 padding: 0;
2620 }
2621 .whitelist-table .add-btn {
2622 text-align: center;
2623 width: 10%;
2624 border-left: 1px #ddd solid;
2625 }
2626
2627 .ip-address, .enter-ip {
2628 width: 90%;
2629 text-align: left;
2630 vertical-align: middle;
2631 }
2632
2633 .delete-ip-address {
2634 text-align: center;
2635 border: 0;
2636 background: transparent;
2637 color: #6f7476;
2638 box-shadow: none;
2639 font-size: 20px;
2640 margin: 0;
2641 padding: 0;
2642 cursor: pointer;
2643 border-radius: 2px;
2644 }
2645 .delete-ip-address:hover {
2646 background: #eee;
2647 }
2648
2649 .toolbar div {
2650 float: left;
2651 padding: 10px;
2652 }
2653
2654 @media only screen and (min-width: 1100px) {
2655 #non-editable-whitelist {
2656 width: 28%;
2657 float: right;
2658 margin-top: 0;
2659 }
2660
2661 .protect-whitelist {
2662 width: 65%;
2663 float: left;
2664 }
2665 }
2666 /* end > 1065px */
2667 @media only screen and (max-width: 1130px) {
2668 .enter-ip input[type="text"] {
2669 max-width: 175px;
2670 }
2671 }
2672 /* end < 1130px */
2673 @media only screen and (max-width: 1250px) and (min-width: 1065px), (max-width: 730px) and (min-width: 600px) {
2674 .enter-ip {
2675 width: 85%;
2676 }
2677
2678 .add-btn {
2679 width: 15%;
2680 }
2681 }
2682 /* end < 1250px & > 1065px */
2683 @media only screen and (max-width: 782px) {
2684 .add-btn {
2685 text-align: right;
2686 }
2687
2688 .add-btn .ip-add {
2689 margin-top: 4px;
2690 margin-bottom: 3px;
2691 }
2692 }
2693 /* end < 782px */
2694 @media only screen and (max-width: 730px) {
2695 .add-btn {
2696 text-align: center;
2697 }
2698 }
2699 /* end < 730px */
2700 @media only screen and (max-width: 665px) and (min-width: 600px) {
2701 .enter-ip input[type="text"] {
2702 max-width: 165px;
2703 }
2704 }
2705 /* end < 665px & > 600px */
2706 @media only screen and (max-width: 600px) {
2707 .toolbar div {
2708 width: 100%;
2709 }
2710
2711 .add-btn {
2712 border-top: 1px #ddd solid;
2713 }
2714
2715 .enter-ip {
2716 text-align: center;
2717 }
2718
2719 .enter-ip strong {
2720 display: block;
2721 margin-bottom: 5px;
2722 }
2723
2724 .enter-ip input[type="text"] {
2725 width: 100%;
2726 max-width: 100%;
2727 }
2728
2729 .add-btn input,
2730 .enter-ip .button {
2731 width: 50%;
2732 margin: 0 auto;
2733 }
2734
2735 .enter-ip .button {
2736 margin-top: 10px;
2737 }
2738 }
2739 /* end > 600px */
2740 @media only screen and (max-width: 400px) {
2741 .protect-status strong {
2742 font-size: 12px;
2743 overflow: auto;
2744 }
2745
2746 .add-btn input,
2747 .enter-ip .button {
2748 width: 100%;
2749 }
2750 }
2751 /* end < 400px */
2752 .my-jetpack-actions {
2753 margin: 0 0 40px 0;
2754 }
2755 .my-jetpack-actions .j-col {
2756 padding: 0;
2757 text-align: center;
2758 }
2759 .my-jetpack-actions #user-list {
2760 height: 30px;
2761 margin-top: -1px;
2762 margin-left: -3px;
2763 }
2764
2765 #jetpack-disconnect-content {
2766 display: none;
2767 text-align: center;
2768 }
2769 #jetpack-disconnect-content .cancel-disconnect {
2770 display: block;
2771 margin-top: 10px;
2772 }
2773
2774 .connection-details {
2775 border: 1px #ddd solid;
2776 }
2777 .connection-details.local-user {
2778 margin-bottom: 10px;
2779 }
2780 .connection-details .user-01,
2781 .connection-details .wpuser-02,
2782 .connection-details .action-btns {
2783 padding: 10px;
2784 }
2785 .connection-details .user-01 .button, .connection-details .user-01 select,
2786 .connection-details .wpuser-02 .button,
2787 .connection-details .wpuser-02 select,
2788 .connection-details .action-btns .button,
2789 .connection-details .action-btns select {
2790 margin-top: 5px;
2791 }
2792 .connection-details .wpuser-02 {
2793 margin-top: 10px;
2794 }
2795 .connection-details h3 {
2796 padding: 10px;
2797 margin: 0;
2798 background: #eee;
2799 border-bottom: 1px #ddd solid;
2800 font-size: 14px;
2801 }
2802
2803 .jp-user img {
2804 margin-right: 10px;
2805 border-radius: 50%;
2806 }
2807
2808 .jp-user div,
2809 .wp-user div,
2810 .wp-action div {
2811 display: inline-block;
2812 width: 100%;
2813 }
2814
2815 .j-col.jp-user,
2816 .j-col.wp-user,
2817 .j-col.wp-action {
2818 padding: 0;
2819 }
2820
2821 .my-jetpack-actions select {
2822 max-width: 150px;
2823 }
2824
2825 .j-actions .button:nth-child(3) {
2826 margin-right: 5px;
2827 }
2828
2829 .j-row.disconnect {
2830 text-align: center;
2831 }
2832 .j-row.disconnect .button {
2833 margin: 0 auto;
2834 }
2835
2836 a.what-is-primary {
2837 color: #b4b9be;
2838 margin-left: 4px;
2839 }
2840
2841 @media (max-width: 782px) {
2842 .wp-action {
2843 border-top: 1px #ddd solid;
2844 }
2845 .wp-action h3 {
2846 display: none;
2847 }
2848 }
2849 @media screen and (max-width: 500px) {
2850 .connection-details {
2851 font-size: 11px;
2852 }
2853 .connection-details h3 {
2854 font-size: 12px;
2855 padding: 5px;
2856 }
2857 .connection-details .user-01,
2858 .connection-details .wpuser-02 {
2859 padding: 6px;
2860 white-space: nowrap;
2861 overflow: hidden;
2862 text-overflow: ellipsis;
2863 max-width: 200px;
2864 }
2865 .connection-details .action-btns {
2866 text-align: center;
2867 }
2868 }
2869 @media (max-width: 530px) {
2870 .connection-details .wpuser-02 {
2871 margin-top: 0;
2872 padding: 12px;
2873 }
2874 }
2875 @media screen and (max-width: 450px) {
2876 .j-actions .button {
2877 width: 100%;
2878 margin-bottom: 5px;
2879 text-align: center;
2880 }
2881 .j-actions .button.alignright {
2882 float: none;
2883 }
2884 }
2885 @media screen and (max-width: 350px) {
2886 .user-01,
2887 .wpuser-02 {
2888 max-width: 100px;
2889 }
2890 }
2891 .manage__icon {
2892 width: 155px;
2893 height: 155px;
2894 margin: 20px auto;
2895 }
2896
2897 .manage-page .manage__description {
2898 max-width: 600px;
2899 text-align: center;
2900 font-size: 22px;
2901 color: #999;
2902 margin: 20px auto;
2903 }
2904 .manage-page .manage__button {
2905 font-size: 16px;
2906 padding: 0 20px;
2907 height: 40px;
2908 line-height: 40px;
2909 }
2910
2911 .manage__title .genericon {
2912 font-size: 38px;
2913 color: #81A944;
2914 }
2915
2916 .manage__link {
2917 font-size: 16px;
2918 padding: 0 20px;
2919 height: 40px;
2920 line-height: 40px;
2921 font-weight: normal;
2922 }
2923 .manage__link .genericon {
2924 font-size: 28px;
2925 vertical-align: middle;
2926 margin-top: -6px;
2927 }
2928
2929 .connection-landing {
2930 text-align: center;
2931 }
2932 .connection-landing h1 {
2933 margin-bottom: 0;
2934 }
2935 .connection-landing h2 {
2936 margin: 0;
2937 padding: 1.14286em 0;
2938 font-size: 1.57143em;
2939 line-height: 160%;
2940 font-weight: 400;
2941 }
2942 .connection-landing h2 + p {
2943 margin-top: 0;
2944 }
2945 .connection-landing p {
2946 color: #686f72;
2947 }
2948
2949 .connect-card {
2950 text-align: center;
2951 margin: 2.14286em auto 1.42857em;
2952 padding: 0 4.28571em 1.42857em;
2953 }
2954 .connect-card p {
2955 font-size: 1.14286em;
2956 }
2957 @media (max-width: 782px) {
2958 .connect-card {
2959 padding: 0 1.42857em 1.42857em;
2960 }
2961 }
2962
2963 .jp-card {
2964 background: white;
2965 border: 1px #d9d9d9 solid;
2966 text-align: center;
2967 margin-bottom: 2.85714em;
2968 }
2969 .jp-card p {
2970 font-size: 1.14286em;
2971 }
2972 .jp-card .j-int {
2973 padding: 0 4.28571em;
2974 }
2975
2976 /* ==================
2977 The following header part is a little hacky. Certain versions of IE were having a difficult time processing multiple svg BG images.
2978 So I moved to stack the svgs as actual imgs instead. IE also had a hard time dealing with em(px) conversions for sizing. - golenski
2979 */
2980 .feature-container {
2981 background: #f4f4f4;
2982 }
2983 .feature-container .j-int {
2984 background: white;
2985 padding: 0;
2986 }
2987 .feature-container .first-header {
2988 position: relative;
2989 }
2990 @media (max-width: 900px) {
2991 .feature-container .first-header {
2992 border-bottom: 1px #d9d9d9 solid;
2993 background-image: none;
2994 }
2995 .feature-container .first-header .j-header-img {
2996 display: none;
2997 }
2998 }
2999 @media (min-width: 900px) {
3000 .feature-container .first-header {
3001 background: url("../images/connection-landing/stars-right.svg") no-repeat, url("../images/connection-landing/stars-left.svg") no-repeat, white;
3002 background-position: 90% 50%, 10% 50%;
3003 background-size: 100px, 125px;
3004 }
3005 }
3006 .feature-container .first-header .j-header-img {
3007 position: absolute;
3008 left: 0;
3009 right: 0;
3010 bottom: 0;
3011 }
3012 .feature-container .first-header .j-header-img img {
3013 margin: 0 auto;
3014 max-width: 100%;
3015 z-index: 1001;
3016 position: absolute;
3017 left: 0;
3018 right: 0;
3019 bottom: 0;
3020 }
3021 @media (min-width: 900px) {
3022 .feature-container .first-header .j-header-img img:first-of-type {
3023 bottom: -12px;
3024 }
3025 }
3026 @media (min-width: 1147px) {
3027 .feature-container .first-header .j-header-img img:first-of-type {
3028 bottom: -10px;
3029 }
3030 }
3031 .feature-container .first-header .j-header-img img + img {
3032 z-index: 999;
3033 }
3034 .feature-container .secondary-header {
3035 background: transparent;
3036 padding: 0 10em;
3037 }
3038 @media (max-width: 782px) {
3039 .feature-container .secondary-header {
3040 padding: 0 1.42857em;
3041 }
3042 }
3043 .feature-container .j-feature-img {
3044 padding: 0 1.42857em;
3045 margin-bottom: 2.85714em;
3046 }
3047 .feature-container .j-feature-img img {
3048 width: 100%;
3049 }
3050 .feature-container .j-feature-img:last-of-type {
3051 margin-bottom: 1.42857em;
3052 }
3053
3054 @media (min-width: 900px) {
3055 .j-traffic .first-header {
3056 padding-bottom: 200px;
3057 }
3058 }
3059
3060 @media (min-width: 900px) {
3061 .j-security .first-header {
3062 padding-bottom: 225px;
3063 }
3064 }
3065
3066 .three-feature {
3067 margin: 1.42857em 0;
3068 padding: 0 1.42857em;
3069 display: -moz-box;
3070 display: -ms-flexbox;
3071 display: flex;
3072 -moz-box-orient: horizontal;
3073 -moz-box-direction: normal;
3074 -ms-flex-direction: row;
3075 flex-direction: row;
3076 -ms-flex-wrap: nowrap;
3077 flex-wrap: nowrap;
3078 }
3079 @media (max-width: 782px) {
3080 .three-feature {
3081 -ms-flex-wrap: wrap;
3082 flex-wrap: wrap;
3083 }
3084 }
3085 @media (max-width: 530px) {
3086 .three-feature {
3087 padding: 0;
3088 }
3089 }
3090 .three-feature .j-col {
3091 border: 1px #d9d9d9 solid;
3092 text-align: left;
3093 padding: 0;
3094 background: #f9f9f9;
3095 }
3096 @media (max-width: 782px) {
3097 .three-feature .j-col {
3098 margin-bottom: 1.42857em;
3099 }
3100 }
3101 @media (max-width: 530px) {
3102 .three-feature .j-col {
3103 border-left: none;
3104 border-right: none;
3105 }
3106 }
3107 .three-feature .j-col:nth-of-type(2) {
3108 border-left: none;
3109 border-right: none;
3110 }
3111 @media (max-width: 782px) {
3112 .three-feature .j-col:nth-of-type(2) {
3113 border: 1px #d9d9d9 solid;
3114 }
3115 }
3116 @media (max-width: 530px) {
3117 .three-feature .j-col:nth-of-type(2) {
3118 border-left: none;
3119 border-right: none;
3120 }
3121 }
3122 .three-feature h3 {
3123 font-weight: 600;
3124 font-size: 1.14286em;
3125 min-width: 15.35714em;
3126 white-space: nowrap;
3127 overflow: hidden;
3128 text-overflow: ellipsis;
3129 }
3130 @media (max-width: 782px) {
3131 .three-feature h3 {
3132 font-size: 1em;
3133 }
3134 }
3135 .three-feature .feature-img {
3136 background: white;
3137 border-bottom: 1px #d9d9d9 solid;
3138 text-align: center;
3139 }
3140 .three-feature .feature-img img {
3141 width: 100%;
3142 max-width: 500px;
3143 margin: 0 auto;
3144 }
3145 .three-feature p {
3146 line-height: 150%;
3147 padding-bottom: 0;
3148 font-size: 1em;
3149 }
3150 .three-feature h3, .three-feature p {
3151 margin: 0;
3152 padding: 1.42857em;
3153 }
3154 @media (max-width: 782px) {
3155 .three-feature h3, .three-feature p {
3156 font-size: 0.92857em;
3157 }
3158 }
3159 .three-feature h3 {
3160 padding-bottom: 0;
3161 }
3162
3163 .jp-content .hide {
3164 display: none;
3165 }
3166 .jp-content .pointer {
3167 cursor: pointer;
3168 }
3169 .jp-content .landing {
3170 margin: 0 auto;
3171 z-index: 2;
3172 position: relative;
3173 }
3174 .jp-content h1 {
3175 font: 400 1.75em "proxima-nova","Open Sans",Helvetica,Arial,sans-serif;
3176 position: relative;
3177 z-index: 3;
3178 width: 100%;
3179 text-align: center;
3180 }
3181 .jp-content h1.success {
3182 color: #81a844;
3183 }
3184 .jp-content .footer {
3185 padding-top: 0;
3186 margin-top: 0;
3187 background-image: none;
3188 }
3189 .jp-content .footer:before {
3190 height: inherit;
3191 }
3192 .jp-content .more-info:before {
3193 content: none;
3194 }
3195
3196 .landing .wpcom-connect {
3197 min-height: 400px;
3198 }
3199
3200 .wpcom-connect .j-col {
3201 padding: 0;
3202 }
3203 .wpcom-connect .connect-desc {
3204 padding-right: 25px;
3205 }
3206 .wpcom-connect .connect-btn {
3207 text-align: center;
3208 }
3209
3210 .module-grid h2 {
3211 color: #000;
3212 font: 300 2.57143em/1em "proxima-nova","Open Sans",Helvetica,Arial,sans-serif;
3213 }
3214
3215 .download-jetpack {
3216 margin-top: 1em !important;
3217 }
3218
3219 .jump-start-area {
3220 background: white;
3221 border: 1px #d9d9d9 solid;
3222 text-align: center;
3223 padding: 0 1.42857em;
3224 }
3225 .jump-start-area p {
3226 font-size: 1.14286em;
3227 }
3228 .jump-start-area h1 {
3229 margin: 1em auto 0;
3230 }
3231
3232 .jumpstart-message p {
3233 padding-right: 25px;
3234 }
3235
3236 .jumpstart-desc {
3237 text-align: left;
3238 }
3239
3240 #jumpstart-cta {
3241 text-align: center;
3242 display: inline-block;
3243 float: none;
3244 }
3245
3246 .dismiss-jumpstart {
3247 color: #999;
3248 font-size: 14px;
3249 }
3250
3251 #jumpstart-cta .button,
3252 #jumpstart-cta .button-primary {
3253 margin: 1em;
3254 font-size: 18px;
3255 height: 45px !important;
3256 padding: 8px 15px 1px;
3257 }
3258
3259 #jumpstart-cta .button-primary {
3260 display: block;
3261 margin: 20px 20px 5px 20px;
3262 }
3263
3264 #jp-config-list {
3265 position: relative;
3266 padding-top: 15px;
3267 padding-bottom: 15px;
3268 margin-left: -15px;
3269 margin-right: -15px;
3270 }
3271 #jp-config-list .j-col {
3272 padding: 15px;
3273 }
3274 #jp-config-list strong {
3275 display: inline-block;
3276 }
3277 #jp-config-list small {
3278 display: block;
3279 margin-top: 5px;
3280 line-height: 150%;
3281 }
3282 #jp-config-list .close {
3283 position: absolute;
3284 top: 10px;
3285 right: 0;
3286 text-transform: uppercase;
3287 font-weight: bold;
3288 display: block;
3289 z-index: 5;
3290 }
3291
3292 .jp-config-status {
3293 text-transform: uppercase;
3294 font-size: 10px;
3295 font-weight: bold;
3296 line-height: 100%;
3297 color: #fff;
3298 background: #9fbd72;
3299 border-radius: 2px;
3300 padding: 2px 4px;
3301 display: inline-block;
3302 }
3303
3304 .nux-intro h3 {
3305 background: #81a844;
3306 color: white;
3307 font-weight: 600;
3308 padding: .75em;
3309 margin: 0;
3310 }
3311 .nux-intro h4 {
3312 margin: 0 0 2px 0;
3313 }
3314 .nux-intro p {
3315 text-align: center;
3316 font-size: 1.24em;
3317 line-height: 175%;
3318 }
3319 .nux-intro a {
3320 transition: all .4s ease;
3321 }
3322 .nux-intro .j-col {
3323 padding: 0 0.5em;
3324 }
3325 .nux-intro .j-col:first-of-type {
3326 padding-left: 0;
3327 }
3328 .nux-intro .j-col:last-of-type {
3329 padding-right: 0;
3330 }
3331 .nux-intro .nux-in {
3332 background: #ececec;
3333 -webkit-border-bottom-right-radius: 6px;
3334 -webkit-border-bottom-left-radius: 6px;
3335 -moz-border-radius-bottomright: 6px;
3336 -moz-border-radius-bottomleft: 6px;
3337 border-bottom-right-radius: 6px;
3338 border-bottom-left-radius: 6px;
3339 }
3340 .nux-intro .nux-in h3 {
3341 font-size: 1.10em;
3342 -webkit-border-top-left-radius: 6px;
3343 -webkit-border-top-right-radius: 6px;
3344 -moz-border-radius-topleft: 6px;
3345 -moz-border-radius-topright: 6px;
3346 border-top-left-radius: 6px;
3347 border-top-right-radius: 6px;
3348 }
3349 .nux-intro .nux-in h3 .dashicons {
3350 float: right;
3351 color: #658435;
3352 font-size: 1.25em;
3353 padding-left: 0;
3354 }
3355 .nux-intro .nux-in h3 .dashicons:hover {
3356 color: #57722e;
3357 }
3358 .nux-intro .nux-in p {
3359 font-size: .9em;
3360 line-height: 150%;
3361 margin: 0;
3362 text-align: left;
3363 color: #686f72;
3364 }
3365 .nux-intro .nux-in .j-row {
3366 border-bottom: 1px #f9f9f9 solid;
3367 padding: 5px 0;
3368 position: relative;
3369 min-height: 70px;
3370 }
3371 .nux-intro .nux-in .j-row:hover {
3372 background: #e0e0e0;
3373 }
3374 .nux-intro .nux-in .unavailable {
3375 opacity: 0.5;
3376 }
3377 .nux-intro .nux-in .unavailable .act {
3378 display: none;
3379 }
3380 .nux-intro .nux-in .paid {
3381 top: 4px;
3382 margin-left: 12px;
3383 }
3384 .nux-intro .nux-in .dashicons {
3385 color: #81a844;
3386 font-size: 1em;
3387 position: relative;
3388 top: 3px;
3389 padding-left: 6px;
3390 }
3391 .nux-intro .nux-in .dashicons:hover {
3392 color: #57722e;
3393 }
3394 .nux-intro .nux-in .dashicons-external {
3395 font-size: 1.5em;
3396 top: 2px;
3397 padding-left: 3px;
3398 }
3399 .nux-intro .nux-in .lmore {
3400 font-size: 11px;
3401 color: #81a844;
3402 }
3403 .nux-intro .nux-in .lmore:hover {
3404 color: #57722e;
3405 }
3406 .nux-intro .feat.j-col {
3407 padding: 10px 2px 10px 10px;
3408 }
3409 .nux-intro .feat .dashicons {
3410 display: none;
3411 }
3412 .nux-intro .activated .feat .dashicons {
3413 display: inline-block;
3414 }
3415 .nux-intro .act {
3416 position: absolute;
3417 top: 50%;
3418 -ms-transform: translate(0, -50%);
3419 -webkit-transform: translate(0, -50%);
3420 transform: translate(0, -50%);
3421 right: 8px;
3422 float: right;
3423 }
3424 .nux-intro .act.j-col {
3425 padding: 5px;
3426 text-align: right;
3427 }
3428 .nux-intro .module-action {
3429 text-transform: uppercase;
3430 font-size: .85em;
3431 font-weight: 600;
3432 }
3433 .nux-intro .wpcom h3 {
3434 background: #0087be;
3435 }
3436 .nux-intro .wpcom h3 .dashicons {
3437 color: #00638b;
3438 }
3439 .nux-intro .wpcom h3 .dashicons:hover {
3440 color: #005172;
3441 }
3442 .nux-intro .wpcom .j-col {
3443 padding: 10px;
3444 }
3445 .nux-intro .wpcom .goto {
3446 text-align: center;
3447 padding: 1em;
3448 }
3449 .nux-intro .wpcom .goto:hover {
3450 background: #ececec;
3451 }
3452 .nux-intro .wpcom .goto .j-col {
3453 padding: 0 5px;
3454 }
3455 .nux-intro .wpcom .goto a {
3456 width: 100%;
3457 padding: .25em;
3458 height: auto;
3459 }
3460 .nux-intro .wpcom .goto .button {
3461 height: auto;
3462 min-height: 28px;
3463 line-height: 18px;
3464 white-space: normal;
3465 max-width: 200px;
3466 margin-bottom: 0;
3467 padding-top: 4px;
3468 padding-bottom: 5px;
3469 }
3470 .nux-intro .wpcom .goto .feat {
3471 position: absolute;
3472 top: 50%;
3473 -ms-transform: translate(0, -50%);
3474 -webkit-transform: translate(0, -50%);
3475 transform: translate(0, -50%);
3476 }
3477 .nux-intro .wpcom .goto.activated .feat {
3478 right: 50%;
3479 -ms-transform: translate(50%, -50%);
3480 -webkit-transform: translate(50%, -50%);
3481 transform: translate(50%, -50%);
3482 }
3483 .nux-intro .nux-foot .j-col {
3484 padding: 1em;
3485 }
3486
3487 .nux-foot {
3488 margin-top: 2em;
3489 background: #ececec;
3490 border-radius: 6px;
3491 }
3492 .nux-foot .j-col {
3493 min-height: 75px;
3494 padding: 1em;
3495 }
3496 @media (max-width: 650px) {
3497 .nux-foot .j-col {
3498 width: 100%;
3499 }
3500 }
3501 .nux-foot .j-col + .j-col {
3502 border-left: 1px #f9f9f9 solid;
3503 }
3504 @media (max-width: 650px) {
3505 .nux-foot .j-col + .j-col {
3506 border-left: none;
3507 border-top: 1px #f9f9f9 solid;
3508 }
3509 }
3510 .nux-foot .actions {
3511 margin-top: 1em;
3512 }
3513 .nux-foot a {
3514 text-decoration: underline;
3515 }
3516 .nux-foot img {
3517 float: right;
3518 margin-left: 1em;
3519 width: 75px;
3520 border-radius: 4px;
3521 }
3522 .nux-foot p {
3523 font-size: .9em;
3524 text-align: left;
3525 font-weight: 600;
3526 margin-top: 0;
3527 }
3528 .nux-foot p + p {
3529 font-weight: 400;
3530 margin-bottom: 0;
3531 }
3532 .nux-foot ul {
3533 font-size: .9em;
3534 margin-bottom: 0;
3535 }
3536 .nux-foot ul li {
3537 margin-right: .875em;
3538 margin-bottom: 0;
3539 line-height: 175%;
3540 display: inline-block;
3541 vertical-align: middle;
3542 }
3543
3544 .form-toggle[type="checkbox"] {
3545 opacity: 0;
3546 position: absolute;
3547 }
3548
3549 .form-toggle__switch {
3550 position: relative;
3551 display: inline-block;
3552 border-radius: 12px;
3553 -moz-box-sizing: border-box;
3554 box-sizing: border-box;
3555 padding: 2px;
3556 width: 40px;
3557 height: 24px;
3558 background: #b9b9b9;
3559 vertical-align: middle;
3560 outline: 0;
3561 cursor: pointer;
3562 transition: all .4s ease;
3563 }
3564 .form-toggle__switch:before, .form-toggle__switch:after {
3565 position: relative;
3566 display: block;
3567 content: "";
3568 width: 20px;
3569 height: 20px;
3570 }
3571 .form-toggle__switch:after {
3572 left: 0;
3573 border-radius: 50%;
3574 background: #fff;
3575 transition: all .2s ease;
3576 }
3577 .form-toggle__switch:before {
3578 display: none;
3579 }
3580 .form-toggle__switch:hover {
3581 background: #bdd597;
3582 }
3583
3584 .form-toggle__label {
3585 cursor: pointer;
3586 }
3587
3588 .plugin-action__label {
3589 padding-right: 5px;
3590 top: -1px;
3591 position: relative;
3592 color: #8e9598;
3593 }
3594
3595 .activated .plugin-action__label {
3596 color: #81a844;
3597 }
3598
3599 .form-toggle:focus + .form-toggle__label .form-toggle__switch,
3600 .form-toggle:focus:checked + .form-toggle__label .form-toggle__switch {
3601 box-shadow: 0 0 0 2px #0087be;
3602 }
3603
3604 .form-toggle:checked + .form-toggle__label .form-toggle__switch {
3605 background: #81a844;
3606 }
3607 .form-toggle:checked + .form-toggle__label .form-toggle__switch:after {
3608 left: 16px;
3609 }
3610
3611 .form-toggle:checked:hover + .form-toggle__label .form-toggle__switch {
3612 background: #bdd597;
3613 }
3614
3615 .form-toggle:disabled + .form-toggle__label .form-toggle__switch,
3616 .form-toggle:disabled:hover + .form-toggle__label .form-toggle__switch {
3617 background: #e9eff3;
3618 }
3619
3620 .form-toggle.is-toggling + .form-toggle__label .form-toggle__switch {
3621 background: #81a844;
3622 }
3623
3624 .form-toggle.is-toggling:checked + .form-toggle__label .form-toggle__switch {
3625 background: #bdd597;
3626 }
3627
3628 .form-toggle.is-compact + .form-toggle__label .form-toggle__switch {
3629 border-radius: 8px;
3630 width: 24px;
3631 height: 16px;
3632 }
3633 .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:before, .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:after {
3634 width: 12px;
3635 height: 12px;
3636 }
3637
3638 .form-toggle.is-compact:checked + .form-toggle__label .form-toggle__switch:after {
3639 left: 8px;
3640 }
3641
3642 @media (max-width: 1147px) {
3643 .jp-content .landing {
3644 padding: 0 2em;
3645 }
3646 .jp-content .footer {
3647 padding-top: 1.5em;
3648 }
3649
3650 .nux-intro .main-col {
3651 width: 50%;
3652 margin-bottom: 2em;
3653 }
3654 .nux-intro .main-col.wpcom {
3655 width: 100%;
3656 }
3657 .nux-intro .main-col + .main-col {
3658 padding-right: 0;
3659 }
3660 .nux-intro .wpcom {
3661 padding: 0;
3662 }
3663 .nux-intro .wpcom .j-row {
3664 width: 50%;
3665 float: left;
3666 border-bottom: 1px #f9f9f9 solid;
3667 border-right: 1px #f9f9f9 solid;
3668 }
3669 .nux-intro .wpcom .j-row:last-of-type {
3670 width: 100%;
3671 float: none;
3672 clear: both;
3673 border: none;
3674 border-top: 1px #f9f9f9 solid;
3675 position: relative;
3676 top: -1px;
3677 }
3678
3679 .nux-foot .j-col {
3680 border: none;
3681 }
3682 }
3683 @media (max-width: 900px) {
3684 .nux-intro .main-col {
3685 width: 100%;
3686 padding: 0;
3687 margin-bottom: 2em;
3688 }
3689 .nux-intro .wpcom .j-row {
3690 width: 100%;
3691 float: none;
3692 }
3693 }
3694 @media (max-width: 782px) {
3695 #jumpstart-cta .button-primary {
3696 margin: 10px 0 5px 0;
3697 }
3698
3699 #jump-start-area .spinner {
3700 background-position: 50% 35%;
3701 }
3702 }
3703 @media (max-width: 600px) {
3704 .nux-intro h1 {
3705 font-size: 1.75em;
3706 }
3707 .nux-intro p {
3708 font-size: 1em;
3709 }
3710 }
3711 @media (max-width: 530px) {
3712 .jp-content .landing {
3713 padding: 0 .5em;
3714 }
3715
3716 #jump-start-area {
3717 padding: 0 1em;
3718 }
3719
3720 .jumpstart-message p {
3721 padding-right: 0;
3722 }
3723
3724 #jumpstart-cta .button-primary {
3725 margin: 0 0 5px 0;
3726 padding-bottom: 10px;
3727 }
3728
3729 .footer .a8c-attribution a:after {
3730 top: 6px;
3731 }
3732 }
3733 .nav-horizontal:before, .features:before, .modules:before, .load-more:before, .nav-horizontal:after, .features:after, .modules:after, .load-more:after {
3734 content: "";
3735 display: table;
3736 }
3737 .nav-horizontal:after, .features:after, .modules:after, .load-more:after {
3738 clear: both;
3739 }
3740