PluginProbe
Jetpack – WP Security, Backup, Speed, & Growth / 3.6.4
Jetpack – WP Security, Backup, Speed, & Growth v3.6.4
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
3,139 lines 55.6 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 0.85714em 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 #wpfooter {
555 display: none;
556 }
557
558 .jp-content {
559 background: #f9f9f9;
560 margin: 0;
561 height: auto;
562 min-height: 100%;
563 width: 100%;
564 width: 100%;
565 -webkit-font-smoothing: antialiased;
566 }
567 .jp-content .wrapper {
568 background: #f9f9f9;
569 }
570
571 @media (max-width: 900px) {
572 #wpcontent,
573 .auto-fold #wpcontent,
574 .auto-fold #wpfooter,
575 .modal,
576 .configure .frame.top.fixed {
577 margin-left: 36px;
578 padding-left: 0;
579 }
580 }
581 @media (max-width: 782px) {
582 #wpcontent,
583 .auto-fold #wpcontent,
584 .auto-fold #wpfooter,
585 .modal,
586 .configure .frame.top.fixed {
587 margin-left: 0;
588 }
589 }
590
591 @media (max-width: 782px) {
592 .configure .frame.top.fixed {
593 padding-left: 0;
594 }
595 }
596
597 .wrap.inner,
598 .page-content {
599 max-width: 950px;
600 margin: 0 auto;
601 }
602 .wrap.inner li,
603 .page-content li {
604 line-height: 23px;
605 }
606
607 @media (max-width: 530px) {
608 .page-content {
609 margin-top: 0;
610 }
611 }
612
613 @media (max-width: 1147px) {
614 .wrap.inner {
615 background: #f9f9f9;
616 padding: 15px;
617 }
618 }
619 @media (max-width: 530px) {
620 .wrap.inner {
621 margin-top: 1.71429em;
622 }
623 }
624
625 .jetpack_page_jetpack_modules .header-nav {
626 margin: 0;
627 }
628 .jetpack_page_jetpack_modules .page-content {
629 max-width: 1200px;
630 min-height: 500px;
631 margin: 0;
632 }
633
634 .page-content.about {
635 position: relative;
636 z-index: 10;
637 }
638 @media (max-width: 1147px) {
639 .page-content.about {
640 background: #f9f9f9;
641 padding: 15px;
642 }
643 }
644
645 @media (max-width: 1147px) {
646 .page-content.configure {
647 background: #f9f9f9;
648 }
649 }
650
651 .footer nav {
652 max-width: 550px;
653 margin: 0 auto;
654 }
655
656 .header {
657 left: 0;
658 right: 0;
659 background: #81a844;
660 }
661
662 .header-nav li {
663 line-height: 60px;
664 }
665 .header-nav a {
666 padding: 0 0.71429em;
667 line-height: 24px;
668 }
669 .header-nav .jetpack-logo a {
670 display: inline-block;
671 position: relative;
672 width: 214px;
673 margin-right: 6px;
674 background: url(../images/jetpack-logo.png) center center no-repeat;
675 background: url(../images/jetpack-logo.svg) center center no-repeat, none;
676 background-size: 183px auto;
677 color: #fff;
678 line-height: 60px;
679 font-weight: normal;
680 }
681 .header-nav .jetpack-logo a span {
682 text-indent: -9999px;
683 visibility: hidden;
684 }
685 .header-nav .jetpack-logo a:before {
686 content: '';
687 position: absolute;
688 top: 0;
689 left: 0;
690 width: 100%;
691 height: 100%;
692 background-size: 183px 32px;
693 }
694 .header-nav .jetpack-modules + .jetpack-modules {
695 margin-left: 15px;
696 }
697
698 .main-nav {
699 float: left;
700 }
701 .main-nav li {
702 margin: 0;
703 }
704 @media (max-width: 900px) {
705 .main-nav {
706 font-size: 13px;
707 }
708 }
709
710 .user-nav {
711 float: right;
712 }
713 .user-nav li {
714 margin: 0;
715 }
716
717 .jetpack-pagestyles #screen-meta {
718 margin: 0;
719 }
720 .jetpack-pagestyles #screen-meta-links .screen-meta-toggle {
721 z-index: 2;
722 }
723 .jetpack-pagestyles #screen-options-link-wrap, .jetpack-pagestyles #contextual-help-link-wrap {
724 border: none;
725 }
726 .jetpack-pagestyles .update-nag {
727 display: none;
728 }
729
730 .masthead {
731 position: relative;
732 text-align: center;
733 z-index: 1;
734 background-color: #81a844;
735 background-image: linear-gradient(top, #81a844, #8eb74e);
736 }
737 .masthead.hasbutton .flyer {
738 bottom: -270px;
739 }
740 .masthead.hasbutton .subhead {
741 margin-top: 175px;
742 }
743 @media (max-width: 530px) {
744 .masthead.hasbutton .subhead {
745 margin-top: 105px;
746 padding: 0;
747 }
748 }
749 .masthead h1,
750 .masthead h2 {
751 margin: 0 auto;
752 }
753 .masthead h1 {
754 padding: 2.5em 0 1.11111em;
755 max-width: 21.94444em;
756 color: #fff;
757 font: 300 2.57143em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
758 position: relative;
759 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
760 z-index: 3;
761 }
762 .masthead h1 + .flyby {
763 margin-top: 180px;
764 }
765 @media (max-width: 1147px) {
766 .masthead h1 {
767 padding-top: 1.83333em;
768 font-size: 2.14286em;
769 }
770 }
771 @media (max-width: 782px) {
772 .masthead h1 {
773 max-width: 600px;
774 font-size: 28px;
775 }
776 }
777 @media (max-width: 530px) {
778 .masthead h1 {
779 margin: 0 15px;
780 padding: 31px 0 15px 0;
781 font-size: 21px;
782 font-weight: 400;
783 }
784 }
785
786 .jetpack-connected .masthead h1 {
787 margin-bottom: 33px;
788 max-width: 600px;
789 }
790
791 .flyby {
792 position: relative;
793 max-width: 1200px;
794 margin: 0 auto;
795 }
796 @media (max-width: 900px) {
797 .flyby {
798 display: none;
799 }
800 }
801
802 .flyer {
803 position: absolute;
804 bottom: -200px;
805 left: 4%;
806 z-index: 1;
807 -webkit-animation: flyer 3.4s 2s ease-in-out;
808 animation: flyer 3.4s 2s ease-in-out;
809 }
810 .flyer:nth-child(2) {
811 left: 49%;
812 width: 120px;
813 height: 131px;
814 -webkit-animation-delay: 4.6s;
815 animation-delay: 4.6s;
816 -webkit-animation-duration: 2.4s;
817 animation-duration: 2.4s;
818 }
819 .flyer:nth-child(3) {
820 left: 23%;
821 width: 60px;
822 height: 66px;
823 -webkit-animation-delay: 5.8s;
824 animation-delay: 5.8s;
825 -webkit-animation-duration: 4.5s;
826 animation-duration: 4.5s;
827 }
828
829 .subhead {
830 position: relative;
831 margin-top: 105px;
832 padding: 4em 0;
833 background: #f9f9f9;
834 z-index: 2;
835 }
836 .subhead h2 {
837 max-width: 460px;
838 color: #5d6d74;
839 font: 400 1.57143em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
840 text-shadow: 0 1px 1px #fff;
841 }
842 @media (max-width: 900px) {
843 .subhead h2 {
844 max-width: 428px;
845 font-size: 20px;
846 }
847 }
848 @media (max-width: 530px) {
849 .subhead h2 {
850 display: none;
851 }
852 }
853 .subhead:after {
854 content: '';
855 position: absolute;
856 bottom: 100%;
857 left: 0;
858 margin-bottom: -1px;
859 width: 100%;
860 height: 228px;
861 background: url("../images/the-cloud.svg") center bottom repeat-x;
862 pointer-events: none;
863 z-index: -1;
864 }
865 @media (max-width: 1147px) {
866 .subhead {
867 margin-top: 122px;
868 padding: 70px 0 49px;
869 }
870 .subhead:after {
871 background-size: 160% auto;
872 }
873 }
874 @media (max-width: 900px) {
875 .subhead {
876 margin-top: 122px;
877 padding: 70px 0 49px;
878 }
879 }
880 @media (max-width: 530px) {
881 .subhead {
882 margin-top: 83px;
883 padding: 47px 15px 39px;
884 }
885 }
886
887 .clouds-sm {
888 height: 100px;
889 position: relative;
890 text-align: center;
891 z-index: 1;
892 background-color: #81a844;
893 background-image: linear-gradient(top, #81a844, #89b348);
894 }
895 .clouds-sm:after {
896 content: '';
897 position: absolute;
898 bottom: 0;
899 left: 0;
900 margin-bottom: -1px;
901 width: 100%;
902 height: 137px;
903 background: url("../images/the-cloud-sm.svg") center bottom repeat-x;
904 pointer-events: none;
905 z-index: 2;
906 }
907 @media (max-width: 530px) {
908 .clouds-sm {
909 height: 90px;
910 }
911 }
912
913 .featured {
914 border-top: 1px solid #d6d6d6;
915 border-bottom: 1px solid #d6d6d6;
916 background: #fff;
917 position: relative;
918 padding: 2.0em 1em 4.6em 1em;
919 text-align: center;
920 z-index: 1;
921 }
922 .featured:before {
923 content: "";
924 display: block;
925 position: absolute;
926 top: 0;
927 height: 100%;
928 z-index: -1;
929 }
930 .featured .features, .featured .modules {
931 margin: 0 auto;
932 display: inline-block;
933 }
934 @media (max-width: 530px) {
935 .featured {
936 display: none;
937 }
938 }
939
940 .featured h2,
941 .module-grid h2 {
942 margin-top: 1em;
943 color: #5d6d74;
944 font: 300 2em/1em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
945 text-align: center;
946 }
947 @media (max-width: 900px) {
948 .featured h2,
949 .module-grid h2 {
950 font-size: 30px;
951 }
952 }
953 @media (max-width: 782px) {
954 .featured h2,
955 .module-grid h2 {
956 font-size: 28px;
957 }
958 }
959
960 .features, .modules {
961 margin: 0 -5px;
962 }
963
964 .feature,
965 .module {
966 position: relative;
967 float: left;
968 margin: 0 5px 10px;
969 width: 310px;
970 transition: all .2s ease-in-out;
971 }
972 @media (max-width: 1147px) {
973 .feature,
974 .module {
975 margin: .75% 0 .75% 1.5%;
976 width: 32.333333%;
977 transition: none;
978 }
979 .feature:nth-child(3n + 1),
980 .module:nth-child(3n + 1) {
981 margin-left: 0;
982 }
983 .feature:hover,
984 .module:hover {
985 top: 0;
986 box-shadow: none;
987 }
988 }
989
990 .feature {
991 -webkit-transform: translateZ(0);
992 transform: translateZ(0);
993 }
994 .feature h3 {
995 margin: 0 0 0.58824em;
996 color: #697b84;
997 font-size: 1.21429em;
998 line-height: 1em;
999 font-weight: 800;
1000 }
1001 .feature p {
1002 margin: 0;
1003 color: #6e818a;
1004 }
1005 .feature:before {
1006 content: '';
1007 position: absolute;
1008 bottom: 0;
1009 left: 0;
1010 width: 100%;
1011 height: 10px;
1012 background: rgba(0, 0, 0, 0.02);
1013 z-index: -1;
1014 -webkit-transform: translateZ(0);
1015 transform: translateZ(0);
1016 transition: all .2s ease-in-out;
1017 }
1018 .feature:hover {
1019 -webkit-transform: translateY(-5px);
1020 -ms-transform: translateY(-5px);
1021 transform: translateY(-5px);
1022 }
1023 .feature:hover h3 {
1024 color: #1a8dba;
1025 }
1026 .feature:hover .feature-img {
1027 border: 1px solid #ccc;
1028 border-bottom: none;
1029 }
1030 .feature:hover .no-border {
1031 border: none;
1032 }
1033 .feature:hover:before {
1034 -webkit-transform: translateY(5px);
1035 -ms-transform: translateY(5px);
1036 transform: translateY(5px);
1037 }
1038 @media (max-width: 1147px) {
1039 .feature:hover h3 {
1040 color: #6e818a;
1041 }
1042 .feature:hover .feature-img {
1043 border: 1px solid #ddd;
1044 border-bottom: none;
1045 }
1046 .feature:hover .no-border {
1047 border: none;
1048 }
1049 }
1050 .feature .feature-img {
1051 padding-top: 52%;
1052 width: 100%;
1053 height: auto;
1054 border: 1px solid #ddd;
1055 border-bottom: none;
1056 }
1057 .feature .feature-img.custom-css {
1058 background: url("../images/custom-css.jpg") no-repeat;
1059 background-size: 100% auto;
1060 }
1061 @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) {
1062 .feature .feature-img.custom-css {
1063 background-image: url("../images/custom-css@2x.jpg");
1064 }
1065 }
1066 .feature .feature-img.wordpress-connect {
1067 background: url("../images/wordpress-connect.jpg") no-repeat;
1068 background-size: 100% auto;
1069 }
1070 @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) {
1071 .feature .feature-img.wordpress-connect {
1072 background-image: url("../images/wordpress-connect@2x.jpg");
1073 }
1074 }
1075 .feature .feature-img.wordpress-stats {
1076 background: url("../images/wordpress-stats.jpg") no-repeat;
1077 background-size: 100% auto;
1078 }
1079 @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) {
1080 .feature .feature-img.wordpress-stats {
1081 background-image: url("../images/wordpress-stats@2x.jpg");
1082 }
1083 }
1084 .feature .feature-img.no-border {
1085 border: none;
1086 padding-bottom: 1px;
1087 }
1088
1089 .feature-description {
1090 display: block;
1091 padding: 1em 1.07143em 1.07143em;
1092 border: 1px solid #ddd;
1093 background: #f5f5f5;
1094 }
1095 .feature:hover .feature-description {
1096 background: #fff;
1097 border-color: #ccc;
1098 }
1099 @media (max-width: 1147px) {
1100 .feature:hover .feature-description {
1101 border: 1px solid #ddd;
1102 background: #f5f5f5;
1103 }
1104 }
1105 @media (max-width: 900px) {
1106 .feature-description {
1107 min-height: 115px;
1108 }
1109 }
1110
1111 .cat {
1112 clear: both;
1113 margin-bottom: 23px;
1114 }
1115 .cat h3 {
1116 font-size: 24px;
1117 font-weight: 300;
1118 margin: 0 0 13px 6px;
1119 text-align: left;
1120 }
1121 .cat .clear {
1122 clear: both;
1123 }
1124
1125 .module-grid {
1126 text-align: center;
1127 }
1128 .module-grid h2 {
1129 margin: 1em 0;
1130 }
1131 @media (max-width: 530px) {
1132 .module-grid h2 {
1133 padding-top: 16px;
1134 margin-top: 0;
1135 font-size: 25px;
1136 }
1137 }
1138
1139 #module-search {
1140 position: relative;
1141 width: 100%;
1142 max-width: 40.71429em;
1143 margin: 0 auto 1.07143em;
1144 overflow: hidden;
1145 }
1146
1147 #jetpack-search {
1148 margin: 0;
1149 padding: 11px 16px 11px 16px;
1150 width: 100%;
1151 border: 1px solid #c9ced0;
1152 border-radius: 3px;
1153 background: #fff;
1154 color: #5c6671;
1155 line-height: 1.3;
1156 }
1157 #jetpack-search:focus {
1158 color: #5c6671;
1159 outline: none;
1160 }
1161 #jetpack-search:focus + label {
1162 background: transparent;
1163 opacity: 0;
1164 }
1165 #jetpack-search::-webkit-input-placeholder {
1166 color: #a8acae;
1167 }
1168 #jetpack-search :-moz-placeholder {
1169 color: #a8acae;
1170 }
1171 #jetpack-search::-moz-placeholder {
1172 color: #a8acae;
1173 }
1174 #jetpack-search:-ms-input-placeholder {
1175 color: #a8acae;
1176 }
1177 #jetpack-search + label {
1178 position: absolute;
1179 top: 1px;
1180 right: 1px;
1181 bottom: 1px;
1182 width: 48px;
1183 color: #abafb1;
1184 text-indent: -9999px;
1185 pointer-events: none;
1186 border-radius: 3px;
1187 transition: all .2s ease-in-out;
1188 }
1189 #jetpack-search + label:after {
1190 content: '\f400';
1191 position: absolute;
1192 right: 11px;
1193 text-align: right;
1194 top: 4px;
1195 font-size: 1.71429em;
1196 font-weight: normal;
1197 font-family: "genericons";
1198 }
1199
1200 .jp-filter {
1201 margin-bottom: 2.85714em;
1202 color: #6f7476;
1203 }
1204 .jp-filter a {
1205 display: inline-block;
1206 position: relative;
1207 padding: 0.76923em 1.46154em;
1208 color: #aaa;
1209 font: 600 0.92857em/1 "Open Sans", Helvetica, Arial, sans-serif;
1210 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
1211 background: #eee;
1212 border-radius: 3px;
1213 background-clip: padding-box;
1214 }
1215 .jp-filter a.selected, .jp-filter a:hover, .jp-filter a:focus {
1216 color: #efefef;
1217 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
1218 background: #6f7476;
1219 }
1220 @media (max-width: 530px) {
1221 .jp-filter a {
1222 padding: 0.76em 1em;
1223 }
1224 }
1225
1226 .module {
1227 display: block;
1228 padding: 0.71429em 1.07143em 1em;
1229 text-align: left;
1230 border: 1px solid #dae0e2;
1231 background: #fff;
1232 box-shadow: 0 0 0 rgba(0, 0, 0, 0.03);
1233 transition: opacity 2s ease-in;
1234 }
1235 .module:hover {
1236 border-color: #8ac9e8;
1237 background: #f8fcfe;
1238 }
1239 .module h3 {
1240 cursor: pointer;
1241 margin: 0 0 0.5em;
1242 color: #1a8dba;
1243 font-size: 1.14286em;
1244 line-height: 1.4em;
1245 font-weight: 700;
1246 }
1247 .module p {
1248 margin: 0;
1249 color: #686f72;
1250 font-size: 0.85714em;
1251 }
1252 .module:hover, .module:focus {
1253 border-color: #8ac9e8;
1254 background: #f8fcfe;
1255 }
1256 .module.active {
1257 border-color: #2ea2cc;
1258 box-shadow: inset 4px 0 0 #2ea2cc;
1259 }
1260 .module.active:hover {
1261 border-color: #69bedd;
1262 box-shadow: inset 4px 0 0 #69bedd;
1263 }
1264 .module .button,
1265 .module .button-primary {
1266 margin-top: 15px;
1267 }
1268 @media (max-width: 530px) {
1269 .module .configure, .module .activate {
1270 display: block;
1271 width: 100%;
1272 text-align: center;
1273 }
1274 .module .button,
1275 .module .button-primary {
1276 width: 50%;
1277 }
1278 .module .button-primary {
1279 line-height: normal;
1280 padding: 6px 14px;
1281 height: auto;
1282 font-size: 14px;
1283 }
1284 }
1285 @media screen and (max-width: 450px) {
1286 .module .button,
1287 .module .button-primary {
1288 margin: 20px auto 0 auto;
1289 }
1290 .module .button.alignright,
1291 .module .button-primary.alignright {
1292 float: none;
1293 }
1294 }
1295 @media (max-width: 1147px) {
1296 .cat .module:nth-child(3n + 1) {
1297 margin: .75% 0 .75% 1.5%;
1298 }
1299 .cat .module:nth-child(3n - 1) {
1300 margin-left: 0;
1301 }
1302 }
1303 @media (max-width: 900px) {
1304 .cat .module {
1305 margin: 1% 0 1% 2%;
1306 }
1307 .cat .module:nth-child(2n + 1) {
1308 margin: 1% 0 1% 2%;
1309 }
1310 .cat .module:nth-child(2n + 0) {
1311 margin-left: 0;
1312 }
1313 }
1314 @media (max-width: 530px) {
1315 .cat .module {
1316 margin: 5px 0;
1317 }
1318 .cat .module:nth-child(2n + 1) {
1319 margin-left: 0;
1320 }
1321 .cat .module:nth-child(2n + 0) {
1322 margin-left: 0;
1323 }
1324 }
1325 @media (max-width: 900px) {
1326 .module {
1327 margin: 1% 0 1% 2%;
1328 width: 49%;
1329 }
1330 .module:nth-child(3n + 1) {
1331 margin-left: 2%;
1332 }
1333 .module:nth-child(2n + 1) {
1334 margin-left: 0;
1335 }
1336 }
1337 @media (max-width: 530px) {
1338 .module {
1339 margin: 5px 0;
1340 width: 100%;
1341 }
1342 .module:nth-child(3n + 1) {
1343 margin-left: 0;
1344 }
1345 .module:nth-child(2n + 1) {
1346 margin-left: 0;
1347 }
1348 }
1349
1350 .new {
1351 position: relative;
1352 }
1353 .new:after {
1354 content: 'NEW';
1355 position: absolute;
1356 top: -8px;
1357 right: -8px;
1358 padding-top: 10px;
1359 width: 32px;
1360 height: 32px;
1361 color: #fff;
1362 font-size: 8px;
1363 font-weight: 800;
1364 text-align: center;
1365 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
1366 background: url("../images/new-badge.svg") center center no-repeat;
1367 background-size: 100%;
1368 border-radius: 50%;
1369 }
1370
1371 .paid {
1372 display: inline-block;
1373 position: relative;
1374 top: 5px;
1375 margin-left: 10px;
1376 padding: 1px 6px 0 4px;
1377 height: 13px;
1378 color: #fff;
1379 font: 700 10px/1 "Open Sans", Helvetica, Arial, sans-serif;
1380 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
1381 background: #d0d0d0;
1382 vertical-align: top;
1383 }
1384 .paid:before, .paid:after {
1385 position: absolute;
1386 top: 0;
1387 right: 100%;
1388 font: normal 14px/14px "genericons";
1389 }
1390 .paid:before {
1391 content: '\f503';
1392 color: #d0d0d0;
1393 text-shadow: none;
1394 }
1395 .paid:after {
1396 content: '\f428';
1397 margin-right: -5px;
1398 font-size: 11px;
1399 }
1400
1401 .rtl .paid:before {
1402 content: '\f501';
1403 }
1404
1405 .load-more {
1406 margin: 2.71429em 0 6.15385em;
1407 }
1408
1409 .set {
1410 display: none;
1411 }
1412
1413 .show.set {
1414 display: block;
1415 }
1416
1417 .loading {
1418 bottom: 50%;
1419 position: absolute;
1420 top: 50%;
1421 width: 100%;
1422 }
1423 .loading span {
1424 color: #999;
1425 }
1426
1427 .modal {
1428 background: #fff;
1429 position: fixed;
1430 top: 52px;
1431 bottom: 20px;
1432 right: 20px;
1433 left: 20px;
1434 margin-left: 160px;
1435 display: none;
1436 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
1437 z-index: 500;
1438 }
1439 .modal .close {
1440 position: absolute;
1441 top: 0;
1442 right: 0;
1443 font: 300 1.71429em "genericons" !important;
1444 color: #777;
1445 content: '\f405';
1446 display: inline-block;
1447 padding: 0.28571em 0.71429em 0.42857em;
1448 z-index: 5;
1449 }
1450 .modal .close:hover {
1451 background: #eee;
1452 opacity: 0.8;
1453 }
1454 .modal .close:active {
1455 background: #eee;
1456 opacity: 0.4;
1457 }
1458 .modal #jp-post-flair {
1459 display: none;
1460 }
1461 .modal .content-container {
1462 position: absolute;
1463 top: 0;
1464 right: 0;
1465 bottom: 0;
1466 left: 0;
1467 overflow: auto;
1468 padding: 2.14286em;
1469 }
1470 .modal .content {
1471 margin: 0 auto;
1472 max-width: 900px;
1473 text-align: left;
1474 }
1475 .modal h2 {
1476 text-align: left;
1477 margin-top: 0;
1478 color: #5d6d74;
1479 font: 300 32px "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
1480 text-shadow: 0 1px 1px #fff;
1481 }
1482 @media (max-width: 530px) {
1483 .modal h2 {
1484 font-size: 26px;
1485 }
1486 }
1487 .modal h5 {
1488 clear: left;
1489 }
1490 .modal p {
1491 font-size: 1.23077em;
1492 }
1493 .modal footer {
1494 position: absolute;
1495 left: 0;
1496 bottom: 0;
1497 width: 100%;
1498 padding: 12px 20px;
1499 border-top: 1px solid #ddd;
1500 background: #fff;
1501 text-align: right;
1502 }
1503 .modal footer ul {
1504 margin: 0;
1505 }
1506 .modal footer li {
1507 display: inline-block;
1508 margin: 0;
1509 }
1510 .modal .button-secondary,
1511 .modal .button-primary:active {
1512 vertical-align: baseline;
1513 }
1514 @media (max-width: 900px) {
1515 .modal {
1516 bottom: 5%;
1517 margin-left: 36px;
1518 font-size: 80%;
1519 }
1520 .modal .content {
1521 top: 38px;
1522 }
1523 }
1524 @media (max-width: 782px) {
1525 .modal {
1526 top: 66px;
1527 margin-left: 0;
1528 }
1529 }
1530 @media (max-width: 600px) {
1531 .modal {
1532 top: 10px;
1533 right: 10px;
1534 bottom: 10px;
1535 left: 10px;
1536 }
1537 }
1538
1539 .jp-info-img {
1540 float: right;
1541 margin: 0 0 30px 30px;
1542 }
1543 .jp-info-img img {
1544 border: 1px solid #ddd;
1545 max-width: 100%;
1546 height: auto;
1547 }
1548 .jp-info-img img:first-child {
1549 margin-top: 0;
1550 }
1551 @media (max-width: 782px) {
1552 .jp-info-img {
1553 float: none;
1554 margin: 0 0 15px;
1555 }
1556 }
1557
1558 .content-container.modal-footer {
1559 bottom: 53px;
1560 }
1561
1562 .shade {
1563 background: #000;
1564 bottom: 0;
1565 cursor: pointer;
1566 display: none;
1567 left: 0;
1568 opacity: 0.2;
1569 position: fixed;
1570 right: 0;
1571 top: 0;
1572 z-index: 11;
1573 }
1574
1575 .entry-title,
1576 .page-template-default h1 {
1577 margin-top: 0.61111em;
1578 color: #5d6d74;
1579 font: 300 2.57143em/1.4em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
1580 text-shadow: 0 1px 1px #fff;
1581 }
1582 @media (max-width: 530px) {
1583 .entry-title,
1584 .page-template-default h1 {
1585 font-size: 2em;
1586 }
1587 }
1588
1589 .blog h3,
1590 .single h3,
1591 .page-template-default h2 {
1592 margin-top: 0.61111em;
1593 color: #5d6d74;
1594 font: 300 1.9em "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
1595 text-shadow: 0 1px 1px #fff;
1596 }
1597 @media (max-width: 530px) {
1598 .blog h3,
1599 .single h3,
1600 .page-template-default h2 {
1601 font-size: 1.4em;
1602 }
1603 }
1604
1605 .page-template-default p {
1606 line-height: 1.71429em;
1607 }
1608
1609 .blog .type-post,
1610 .page-template-default .type-page,
1611 .single .type-post,
1612 .single .type-jetpack_support {
1613 float: left;
1614 width: 70%;
1615 }
1616
1617 .footer {
1618 margin-top: 1.42857em;
1619 position: relative;
1620 padding: 10em 0 4.28571em;
1621 text-align: center;
1622 }
1623 .footer:before, .footer:after {
1624 content: '';
1625 position: absolute;
1626 left: 0;
1627 pointer-events: none;
1628 }
1629 .footer:before {
1630 top: 0;
1631 margin-top: -1px;
1632 width: 100%;
1633 height: 195px;
1634 }
1635 .footer:after {
1636 bottom: 0;
1637 width: 100%;
1638 height: 50px;
1639 background: url("../images/the-footcloud.svg") center bottom no-repeat;
1640 background-size: auto 45px;
1641 z-index: 1;
1642 }
1643 .footer .download-jetpack {
1644 margin-bottom: 33px;
1645 }
1646 @media (max-width: 1147px) {
1647 .footer {
1648 padding-top: 165px;
1649 padding-bottom: 0;
1650 }
1651 .footer:before {
1652 background-size: 160% auto;
1653 }
1654 .footer:after {
1655 display: none;
1656 }
1657 .footer ul {
1658 float: none;
1659 overflow: hidden;
1660 }
1661 }
1662 @media (max-width: 900px) {
1663 .footer {
1664 padding-top: 146px;
1665 }
1666 }
1667 @media (max-width: 782px) {
1668 .footer {
1669 margin-top: 0;
1670 }
1671 }
1672 @media (max-width: 530px) {
1673 .footer {
1674 margin-top: 0;
1675 padding-top: 135px;
1676 }
1677 }
1678 @media (max-width: 320px) {
1679 .footer {
1680 padding-top: 76px;
1681 }
1682 }
1683
1684 .footer nav {
1685 max-width: 100%;
1686 }
1687 .footer nav a,
1688 .footer nav a:visited {
1689 padding: 4px 6px;
1690 color: #999;
1691 }
1692 .footer nav a:hover, .footer nav a:focus,
1693 .footer nav a:visited:hover,
1694 .footer nav a:visited:focus {
1695 color: #81A844;
1696 }
1697 @media (max-width: 1147px) {
1698 .footer nav {
1699 border: none;
1700 padding: 0;
1701 }
1702 .footer nav a:hover, .footer nav a:focus,
1703 .footer nav a:visited:hover,
1704 .footer nav a:visited:focus {
1705 color: #fff;
1706 }
1707 }
1708 @media (max-width: 530px) {
1709 .footer nav li {
1710 display: block;
1711 float: none;
1712 margin: 0;
1713 text-align: left;
1714 }
1715 .footer nav a {
1716 display: block;
1717 padding: 0 16px;
1718 line-height: 44px;
1719 }
1720 }
1721
1722 .primary {
1723 padding: 25px 15px 10px 15px;
1724 border-bottom: 1px solid #eee;
1725 }
1726
1727 .secondary-footer {
1728 margin: 0 auto;
1729 }
1730 .secondary-footer li {
1731 margin-right: 5px;
1732 }
1733 @media (max-width: 1147px) {
1734 .secondary-footer {
1735 margin: 0 30px;
1736 padding: 8px 15px 30px;
1737 }
1738 }
1739 @media (max-width: 530px) {
1740 .secondary-footer {
1741 margin: 0;
1742 padding: 0;
1743 border: none;
1744 font-weight: 400;
1745 }
1746 .secondary-footer a {
1747 border-top: 1px solid #eee;
1748 }
1749 }
1750
1751 .footer .a8c-attribution {
1752 margin: 0;
1753 padding: 0 6px;
1754 color: #bbb;
1755 font-size: 0.78571em;
1756 font-family: "Gill Sans", "Gill Sans MT", "Open Sans", Helvetica, Arial, sans-serif;
1757 text-transform: uppercase;
1758 /*@include breakpoint(large-desktop){
1759 display: none;
1760 };*/
1761 }
1762 .footer .a8c-attribution a {
1763 display: inline-block;
1764 position: relative;
1765 padding: 4px 16px;
1766 right: 9999px;
1767 outline: 0;
1768 }
1769 .footer .a8c-attribution a:after {
1770 content: 'A';
1771 position: absolute;
1772 top: 2px;
1773 right: -9999px;
1774 height: 100%;
1775 color: #999;
1776 font-size: 1.54545em;
1777 font-family: "automatticons";
1778 text-align: center;
1779 }
1780 .footer .a8c-attribution a:hover:after {
1781 -webkit-animation: candy .4s ease-in-out;
1782 animation: candy .4s ease-in-out;
1783 }
1784
1785 .secondary {
1786 padding: 10px 15px 0 15px;
1787 }
1788
1789 .jetpack-message {
1790 background: #8eb74e;
1791 border: 1px solid #73963d;
1792 margin: 33px auto 0;
1793 max-width: 90%;
1794 position: relative;
1795 z-index: 2;
1796 }
1797 .jetpack-message.is-opt-in {
1798 margin: 50px 0 0;
1799 max-width: 100%;
1800 padding: 10px 15px;
1801 background: #fff;
1802 border: 0;
1803 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1804 font-size: 13px;
1805 text-align: center;
1806 }
1807 .subhead .jetpack-message.is-opt-in {
1808 margin: 0;
1809 padding-bottom: 0;
1810 background: transparent;
1811 box-shadow: none;
1812 }
1813 .subhead .jetpack-message.is-opt-in .jp-button, .subhead .jetpack-message.is-opt-in .jp-button--settings {
1814 display: inline-block;
1815 }
1816 .jetpack-message.is-opt-in p {
1817 color: #3c4549;
1818 }
1819 .jetpack-message.is-opt-in .jp-button, .jetpack-message.is-opt-in .jp-button--settings {
1820 margin-top: 15px;
1821 display: none;
1822 }
1823 .jetpack-message h4 {
1824 color: #fff;
1825 margin: 0;
1826 }
1827 .jetpack-message p {
1828 color: #fff;
1829 margin: 0;
1830 opacity: 0.7;
1831 }
1832 .jetpack-message .squeezer {
1833 padding: 23px 23px 23px 80px;
1834 position: relative;
1835 text-align: left;
1836 }
1837 .jetpack-message .squeezer:before {
1838 color: #fff;
1839 content: '\f418';
1840 font-family: 'Genericons';
1841 font-size: 33px;
1842 height: 33px;
1843 left: 25px;
1844 opacity: 0.6;
1845 position: absolute;
1846 top: 23px;
1847 top: calc(50% - 22px );
1848 }
1849 @media (max-width: 530px) {
1850 .jetpack-message .squeezer {
1851 padding: 23px;
1852 }
1853 .jetpack-message .squeezer:before {
1854 display: none;
1855 }
1856 }
1857 .jetpack-message .squeezer a {
1858 color: #FFF;
1859 border-bottom: 1px solid #D5E4BD;
1860 }
1861 .jetpack-message .squeezer a:hover {
1862 border-bottom: 1px solid #F1F6E9;
1863 }
1864 .jetpack-message.error .squeezer:before, .jetpack-message.jetpack-err .squeezer:before {
1865 content: '\f414';
1866 }
1867
1868 .configure-module .jetpack-message {
1869 max-width: 100%;
1870 }
1871
1872 .jetpack-modules #site-icon-deprecated .info,
1873 .modules h3.icon,
1874 .jetpack-modules .info a {
1875 width: auto;
1876 }
1877 .jetpack-modules #site-icon-deprecated .info:before,
1878 .modules h3.icon:before,
1879 .jetpack-modules .info a:before {
1880 display: inline-block;
1881 position: relative;
1882 top: 1px;
1883 left: -3px;
1884 margin-right: 2px;
1885 opacity: 0.8;
1886 font: normal 20px "genericons";
1887 vertical-align: top;
1888 }
1889
1890 .jetpack-modules .info a:before {
1891 margin-top: 1px;
1892 }
1893
1894 .latex:before,
1895 .jetpack-modules #latex .info a:before {
1896 content: '\f408';
1897 }
1898
1899 .carousel:before,
1900 .jetpack-modules #carousel .info a:before {
1901 content: '\f102';
1902 }
1903
1904 .modules h3.contact-form:before,
1905 .jetpack-modules #contact-form .info a:before {
1906 content: '\f175';
1907 font: normal 20px "dashicons";
1908 }
1909
1910 .modules h3.custom-css:before,
1911 .jetpack-modules #custom-css .info a:before {
1912 content: '\f100';
1913 font: normal 20px "dashicons";
1914 }
1915
1916 .modules h3.enhanced-distribution:before,
1917 .jetpack-modules #enhanced-distribution .info a:before {
1918 content: '\f237';
1919 font: normal 20px "dashicons";
1920 }
1921
1922 .modules h3.widgets:before,
1923 .jetpack-modules #widgets .info a:before {
1924 content: '\f116';
1925 font: normal 20px "dashicons";
1926 }
1927
1928 .modules h3.gravatar-hovercards:before,
1929 .jetpack-modules #gravatar-hovercards .info a:before {
1930 content: 'G';
1931 font-family: "automatticons";
1932 }
1933
1934 .infinite-scroll:before,
1935 .jetpack-modules #infinite-scroll .info a:before {
1936 content: '\f408';
1937 }
1938
1939 .comments:before,
1940 .jetpack-modules #comments .info a:before {
1941 content: '\f108';
1942 }
1943
1944 .sso:before,
1945 .jetpack-modules #sso .info a:before {
1946 content: '\f205';
1947 }
1948
1949 .json-api:before,
1950 .jetpack-modules #json-api .info a:before {
1951 content: '\f415';
1952 }
1953
1954 .likes:before,
1955 .jetpack-modules #likes .info a:before {
1956 content: '\f408';
1957 }
1958
1959 .markdown:before,
1960 .jetpack-modules #markdown .info a:before {
1961 content: '\f462';
1962 }
1963
1964 .minileven:before,
1965 .jetpack-modules #minileven .info a:before {
1966 content: '\f453';
1967 }
1968
1969 .manage:before,
1970 .jetpack-modules #manage .info a:before {
1971 content: '\f205';
1972 }
1973
1974 .monitor:before,
1975 .jetpack-modules #monitor .info a:before {
1976 content: '\f468';
1977 }
1978
1979 .notes:before,
1980 .jetpack-modules #notes .info a:before {
1981 content: '\f300';
1982 }
1983
1984 .omnisearch:before,
1985 .jetpack-modules #omnisearch .info a:before {
1986 content: '\f400';
1987 }
1988
1989 .photon:before,
1990 .jetpack-modules #photon .info a:before {
1991 content: '\f403';
1992 }
1993
1994 .post-by-email:before,
1995 .jetpack-modules #post-by-email .info a:before {
1996 content: '\f410';
1997 }
1998
1999 .protect:before,
2000 .jetpack-modules #protect .info a:before {
2001 content: '\f470';
2002 position: relative;
2003 top: -1px;
2004 }
2005
2006 .modules h3.publicize:before,
2007 .jetpack-modules #publicize .info a:before {
2008 content: '\f237';
2009 font: normal 20px "dashicons";
2010 }
2011
2012 .related-posts:before,
2013 .jetpack-modules #related-posts .info a:before {
2014 content: '\f420';
2015 }
2016
2017 .sharedaddy:before,
2018 .jetpack-modules #sharedaddy .info a:before {
2019 content: '\f415';
2020 }
2021
2022 .shortcodes:before,
2023 .jetpack-modules #shortcodes .info a:before {
2024 content: '\f100';
2025 }
2026
2027 .verification-tools:before,
2028 .jetpack-modules #verification-tools .info a:before {
2029 content: '\f425';
2030 }
2031
2032 .after-the-deadline:before,
2033 .jetpack-modules #after-the-deadline .info a:before {
2034 content: '\f411';
2035 }
2036
2037 .subscriptions:before,
2038 .jetpack-modules #subscriptions .info a:before {
2039 content: '\f410';
2040 }
2041
2042 .tiled-gallery:before,
2043 .jetpack-modules #tiled-gallery .info a:before {
2044 content: '\f103';
2045 }
2046
2047 .modules h3.vaultpress:before,
2048 .jetpack-modules #vaultpress .info a:before {
2049 content: 'V';
2050 font-family: "automatticons";
2051 }
2052
2053 .videopress:before,
2054 .jetpack-modules #videopress .info a:before {
2055 content: '\f104';
2056 }
2057
2058 .modules h3.widget-visibility:before,
2059 .jetpack-modules #widget-visibility .info a:before {
2060 content: '\f116';
2061 font: normal 20px "dashicons";
2062 }
2063
2064 .stats:before,
2065 .jetpack-modules #stats .info a:before {
2066 content: '\f205';
2067 }
2068
2069 .shortlinks:before,
2070 .jetpack-modules #shortlinks .info a:before {
2071 content: '\f107';
2072 }
2073
2074 .modules h3.custom-content-types:before,
2075 .jetpack-modules #custom-content-types .info a:before {
2076 content: '\f498';
2077 font: normal 20px "dashicons";
2078 }
2079
2080 .modules h3.site-icon:before,
2081 .jetpack-modules #site-icon .info a:before {
2082 content: '\f475';
2083 }
2084
2085 .jetpack-modules #site-icon-deprecated .info:before {
2086 content: '\f475';
2087 }
2088
2089 @media (max-width: 782px) {
2090 .blog .type-post,
2091 .page-template-default .type-page,
2092 .single .type-post,
2093 .single .type-jetpack_support {
2094 width: 100%;
2095 }
2096 }
2097 @media (max-width: 600px) {
2098 .clouds-sm {
2099 display: none;
2100 }
2101 }
2102 @media (max-width: 530px) {
2103 .wrap.inner.jp-support .jp-support-column-left {
2104 width: 100%;
2105 }
2106 .wrap.inner.jp-support .jp-support-column-left .widget-text {
2107 margin-right: 0;
2108 width: 100%;
2109 }
2110 .wrap.inner.jp-support .jp-support-column-right {
2111 width: 100%;
2112 }
2113 }
2114 @media screen and (max-width: 515px) {
2115 .jp-frame .header-nav {
2116 padding-bottom: 10px;
2117 }
2118 .jp-frame .header-nav li {
2119 line-height: 30px;
2120 }
2121 .jp-frame .header-nav .jetpack-logo {
2122 width: 100%;
2123 text-align: center;
2124 }
2125 .jp-frame .header-nav .jetpack-modules {
2126 margin: 0;
2127 width: 50%;
2128 text-align: right;
2129 padding: 0 5px;
2130 }
2131 .jp-frame .header-nav .jetpack-modules + .jetpack-modules {
2132 text-align: left;
2133 }
2134 .jp-frame .header-nav .jetpack-modules:nth-child(4) {
2135 text-align: center;
2136 margin: 0 auto;
2137 width: 100%;
2138 }
2139 .jp-frame .header-nav .jetpack-modules:nth-child(4) a {
2140 padding: 0 10px;
2141 }
2142 }
2143 @media (max-width: 320px) {
2144 .jetpack_page_jetpack_modules .wrap {
2145 padding: 0 0 1em;
2146 }
2147 }
2148
2149 .page-content.configure {
2150 margin-top: 0;
2151 }
2152
2153 .configure .frame.top {
2154 border: none;
2155 box-shadow: none;
2156 padding-top: 1.42857em;
2157 position: relative;
2158 top: auto;
2159 }
2160 .configure .frame.top.fixed {
2161 background: #f9f9f9;
2162 border-bottom: 1px solid #e9e9e9;
2163 padding-left: 160px;
2164 margin-top: -6px;
2165 position: fixed;
2166 right: 0;
2167 top: 32px;
2168 width: 100%;
2169 z-index: 4;
2170 box-shadow: 0 2px 2px -2px #eee;
2171 }
2172 @media (max-width: 782px) {
2173 .configure .frame.top.fixed {
2174 border: none;
2175 box-shadow: none;
2176 padding-top: 1.42857em;
2177 position: relative;
2178 top: auto;
2179 }
2180 }
2181 @media (max-width: 600px) {
2182 .configure .frame.top.fixed {
2183 top: 0;
2184 }
2185 }
2186 .configure .frame.top .tablenav.top {
2187 float: left;
2188 }
2189 @media (max-width: 900px) {
2190 .configure .frame.top .tablenav.top .actions {
2191 display: block;
2192 }
2193 }
2194 @media (max-width: 782px) {
2195 .configure .frame.top .tablenav.top .actions {
2196 margin-top: 6px;
2197 }
2198 }
2199
2200 .jp-frame-top-fixed .configure {
2201 padding-top: 94px;
2202 }
2203
2204 .filter-search {
2205 display: none;
2206 float: right;
2207 margin-top: 10px;
2208 }
2209 @media (max-width: 782px) {
2210 .filter-search {
2211 display: block;
2212 }
2213 }
2214 @media (max-width: 530px) {
2215 .filter-search {
2216 display: none;
2217 }
2218 }
2219
2220 .module-actions.landing-page {
2221 float: right;
2222 margin-right: 15px;
2223 }
2224 .module-actions.landing-page a {
2225 font-size: 0.6em;
2226 }
2227
2228 .table-bordered.jetpack-modules {
2229 border: none;
2230 margin-bottom: 0;
2231 }
2232 .table-bordered.jetpack-modules tr.jetpack-module th {
2233 border-left: 0;
2234 padding: 14px 4px 0;
2235 }
2236 .table-bordered.jetpack-modules tr.jetpack-module th input {
2237 display: block;
2238 }
2239 .table-bordered.jetpack-modules tr.jetpack-module:hover .genericon {
2240 display: inline-block;
2241 }
2242 .table-bordered.jetpack-modules tr.jetpack-module:hover td .row-actions span a {
2243 opacity: 1;
2244 }
2245 .table-bordered.jetpack-modules tr.jetpack-module.active th,
2246 .table-bordered.jetpack-modules tr.jetpack-module.active td {
2247 background: #f7fcfe;
2248 }
2249 .table-bordered.jetpack-modules tr.jetpack-module.active th {
2250 border-left: 4px solid #2ea2cc;
2251 padding-left: 0px;
2252 }
2253 .table-bordered.jetpack-modules tr.jetpack-module.active td:first-child {
2254 border-left: 4px solid #2ea2cc;
2255 }
2256 .table-bordered.jetpack-modules tr.jetpack-module.unavailable {
2257 opacity: 0.3;
2258 }
2259 .table-bordered.jetpack-modules tr.jetpack-module.unavailable input {
2260 display: none;
2261 }
2262 .table-bordered.jetpack-modules tr.jetpack-module#vaultpress {
2263 opacity: 1;
2264 }
2265 .table-bordered.jetpack-modules tr.jetpack-module.deprecated span {
2266 color: #888;
2267 }
2268 .table-bordered.jetpack-modules tr.jetpack-module.deprecated .dep-msg {
2269 margin-right: 10px;
2270 color: #555;
2271 }
2272 .table-bordered.jetpack-modules tr.jetpack-module th,
2273 .table-bordered.jetpack-modules tr.jetpack-module td {
2274 background: #fff;
2275 margin: 0;
2276 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2277 }
2278 .table-bordered.jetpack-modules tr.jetpack-module td {
2279 padding: 10px 10px 8px 14px;
2280 line-height: 25px;
2281 }
2282 .table-bordered.jetpack-modules tr.jetpack-module td:first-child {
2283 border-left: 4px solid #fff;
2284 }
2285 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2286 float: right;
2287 padding: 0 0 1px;
2288 visibility: visible;
2289 }
2290 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions span {
2291 margin-left: 5px;
2292 }
2293 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions span a {
2294 opacity: 0;
2295 }
2296 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions span a:focus {
2297 opacity: 1;
2298 }
2299 @media (max-width: 530px) {
2300 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2301 display: none;
2302 }
2303 }
2304 @media (max-width: 782px) {
2305 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2306 display: block;
2307 padding-left: 10px;
2308 visibility: visible;
2309 }
2310 }
2311 .table-bordered.jetpack-modules > thead > tr > th {
2312 border: 0;
2313 vertical-align: middle;
2314 }
2315 .table-bordered.jetpack-modules > thead > tr > th:last-child {
2316 padding-right: 0;
2317 }
2318 @media (max-width: 782px) {
2319 .table-bordered.jetpack-modules > thead > tr > th:last-child {
2320 padding-left: 0;
2321 }
2322 }
2323 .table-bordered.jetpack-modules td {
2324 background: #fff;
2325 }
2326 .table-bordered.jetpack-modules #doaction {
2327 margin-top: 0;
2328 }
2329 @media (max-width: 782px) {
2330 .table-bordered.jetpack-modules #doaction {
2331 padding: 10px 7px;
2332 }
2333 }
2334 .table-bordered.jetpack-modules .checkall {
2335 margin-top: 1px;
2336 }
2337 .table-bordered.jetpack-modules .filter-search {
2338 margin-top: 8px;
2339 }
2340 .table-bordered.jetpack-modules .genericon {
2341 color: #999;
2342 display: none;
2343 margin: 7px 3px 0;
2344 }
2345 @media (max-width: 900px) {
2346 .table-bordered.jetpack-modules .genericon {
2347 display: inline-block;
2348 }
2349 }
2350 .table-bordered.jetpack-modules .med {
2351 width: 70px;
2352 }
2353 .table-bordered.jetpack-modules .sm {
2354 width: 30px;
2355 }
2356 @media (max-width: 782px) {
2357 .table-bordered.jetpack-modules .check-column {
2358 width: 50px;
2359 }
2360 }
2361
2362 .fixed-top .check-column {
2363 padding: 8px 10px 0 10px;
2364 width: 2.2em;
2365 }
2366
2367 .wrap {
2368 margin: 0;
2369 padding: 0 1.5em 1em;
2370 overflow: hidden;
2371 }
2372 .wrap h2 {
2373 font-size: 24px;
2374 font-weight: 400;
2375 }
2376 .wrap .manage-left {
2377 float: left;
2378 margin: 0;
2379 padding: 0;
2380 width: 63%;
2381 }
2382 .wrap .manage-left table {
2383 width: 100%;
2384 }
2385 .wrap .manage-left th {
2386 font-weight: 400;
2387 }
2388 @media (max-width: 782px) {
2389 .wrap .manage-left {
2390 width: 100%;
2391 }
2392 }
2393 .wrap .manage-right {
2394 margin: 0;
2395 padding: 0;
2396 /*position: absolute;
2397 right: 0;*/
2398 float: right;
2399 width: 35%;
2400 z-index: 1;
2401 }
2402 .wrap .manage-right p {
2403 font-size: 12px;
2404 font-weight: bold;
2405 color: #bbb;
2406 padding-top: 2px;
2407 text-transform: uppercase;
2408 letter-spacing: 1px;
2409 clear: left;
2410 }
2411 .wrap .manage-right .bumper {
2412 margin-left: 33px;
2413 }
2414 .wrap .manage-right.show {
2415 display: block;
2416 overflow-y: auto;
2417 overflow-x: hidden;
2418 position: absolute;
2419 z-index: 100000;
2420 }
2421 .wrap .manage-right .search-bar {
2422 margin-bottom: 18px;
2423 max-width: 300px;
2424 }
2425 .wrap .manage-right p.search-box {
2426 float: none;
2427 height: auto;
2428 margin-bottom: 0;
2429 position: relative;
2430 }
2431 .wrap .manage-right p.search-box input[type='search'] {
2432 padding: 0 8px;
2433 width: 90%;
2434 line-height: initial;
2435 }
2436 @media (max-width: 782px) {
2437 .wrap .manage-right p.search-box input[type='search'] {
2438 float: left;
2439 padding: 9px 8px;
2440 }
2441 }
2442 .wrap .manage-right p.search-box input[type="submit"] {
2443 display: none;
2444 }
2445 .wrap .manage-right .button-group .button {
2446 outline: none;
2447 }
2448 .wrap .manage-right .subsubsub {
2449 margin: 0;
2450 padding: 0;
2451 }
2452 .wrap .manage-right .subsubsub a {
2453 padding: 0;
2454 line-height: inherit;
2455 }
2456 .wrap .manage-right .subsubsub .current {
2457 padding: 1px 5px;
2458 border-radius: 2px;
2459 margin-left: -5px;
2460 background: #0D72B2;
2461 color: #fff;
2462 }
2463 .wrap .manage-right .subsubsub .current .count {
2464 color: #BCD7E7;
2465 font-weight: 200;
2466 }
2467 .wrap .manage-right .subsubsub li {
2468 display: block;
2469 text-align: left;
2470 }
2471 @media (max-width: 782px) {
2472 .wrap .manage-right {
2473 background: #fff;
2474 bottom: 0;
2475 display: none;
2476 min-width: 300px;
2477 position: fixed;
2478 right: 0;
2479 top: 0;
2480 z-index: 13;
2481 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
2482 }
2483 .wrap .manage-right .bumper {
2484 margin: 13px;
2485 }
2486 .wrap .manage-right .navbar-form {
2487 margin: 0;
2488 padding: 0;
2489 }
2490 }
2491
2492 @media (max-width: 782px) {
2493 .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
2494 padding: 11px 10px;
2495 display: block;
2496 }
2497
2498 .jetpack_page_jetpack_modules #doaction {
2499 padding: 7px 14px;
2500 }
2501 .jetpack_page_jetpack_modules .fixed-top thead .check-column {
2502 padding: 28px 10px 0 10px;
2503 }
2504 .jetpack_page_jetpack_modules .filter-search {
2505 margin-top: 28px;
2506 }
2507 .jetpack_page_jetpack_modules .filter-search .button {
2508 padding: 7px 14px;
2509 }
2510
2511 .manage-right.show .subsubsub li {
2512 padding: 5px;
2513 }
2514 }
2515 @media (max-width: 650px) {
2516 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
2517 float: none;
2518 padding-left: 18px;
2519 }
2520 }
2521 @media (max-width: 430px) {
2522 .table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
2523 display: none;
2524 }
2525
2526 .table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
2527 display: block;
2528 }
2529 }
2530 /* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
2531 .configure-module p {
2532 font-size: 14px;
2533 }
2534 .configure-module p.success, .configure-module p.error {
2535 color: white;
2536 padding: 10px;
2537 }
2538 .configure-module p.success {
2539 background-color: #81a844;
2540 }
2541 .configure-module p.error {
2542 background-color: #d94f4f;
2543 }
2544
2545 .protect-status p {
2546 font-size: 16px;
2547 }
2548 .protect-status strong {
2549 display: inline-block;
2550 margin-top: 10px;
2551 background: #fff;
2552 padding: 10px;
2553 border: 1px #ddd solid;
2554 font-size: 16px;
2555 color: #000;
2556 max-width: 100%;
2557 }
2558 .protect-status.attn {
2559 color: #d94f4f;
2560 }
2561 .protect-status.working {
2562 color: #81a844;
2563 }
2564
2565 /* Whitelisting */
2566 #non-editable-whitelist {
2567 margin-top: 15px;
2568 }
2569
2570 .protect-whitelist textarea {
2571 width: 100%;
2572 min-height: 150px;
2573 }
2574
2575 #editable-whitelist .whitelist-table {
2576 width: 100%;
2577 }
2578
2579 /* btns + inputs */
2580 .configure-module input[disabled] {
2581 opacity: .5;
2582 }
2583 .configure-module input.button-primary {
2584 font-weight: bold;
2585 }
2586
2587 /* whitelist table */
2588 .whitelist-table {
2589 border-top: 1px solid;
2590 border-right: 1px solid;
2591 border-color: #ddd;
2592 background-color: #fff;
2593 }
2594 .whitelist-table td, .whitelist-table th {
2595 padding: 10px;
2596 margin: 0;
2597 border-bottom: 1px solid;
2598 border-left: 1px solid;
2599 border-color: #ddd;
2600 font-size: 14px;
2601 }
2602 .whitelist-table th.heading {
2603 font-weight: bold;
2604 color: #5d6d74;
2605 text-align: left;
2606 background-color: #eee;
2607 }
2608 .whitelist-table td.item-actions {
2609 border-left: none;
2610 text-align: right;
2611 }
2612 .whitelist-table .toolbar {
2613 padding: 0;
2614 }
2615 .whitelist-table .add-btn {
2616 text-align: center;
2617 width: 10%;
2618 border-left: 1px #ddd solid;
2619 }
2620
2621 .ip-address, .enter-ip {
2622 width: 90%;
2623 text-align: left;
2624 vertical-align: middle;
2625 }
2626
2627 .delete-ip-address {
2628 text-align: center;
2629 border: 0;
2630 background: transparent;
2631 color: #6f7476;
2632 box-shadow: none;
2633 font-size: 20px;
2634 margin: 0;
2635 padding: 0;
2636 cursor: pointer;
2637 border-radius: 2px;
2638 }
2639 .delete-ip-address:hover {
2640 background: #eee;
2641 }
2642
2643 .toolbar div {
2644 float: left;
2645 padding: 10px;
2646 }
2647
2648 @media only screen and (min-width: 1100px) {
2649 #non-editable-whitelist {
2650 width: 28%;
2651 float: right;
2652 margin-top: 0;
2653 }
2654
2655 .protect-whitelist {
2656 width: 65%;
2657 float: left;
2658 }
2659 }
2660 /* end > 1065px */
2661 @media only screen and (max-width: 1130px) {
2662 .enter-ip input[type="text"] {
2663 max-width: 175px;
2664 }
2665 }
2666 /* end < 1130px */
2667 @media only screen and (max-width: 1250px) and (min-width: 1065px), (max-width: 730px) and (min-width: 600px) {
2668 .enter-ip {
2669 width: 85%;
2670 }
2671
2672 .add-btn {
2673 width: 15%;
2674 }
2675 }
2676 /* end < 1250px & > 1065px */
2677 @media only screen and (max-width: 782px) {
2678 .add-btn {
2679 text-align: right;
2680 }
2681
2682 .add-btn .ip-add {
2683 margin-top: 4px;
2684 margin-bottom: 3px;
2685 }
2686 }
2687 /* end < 782px */
2688 @media only screen and (max-width: 730px) {
2689 .add-btn {
2690 text-align: center;
2691 }
2692 }
2693 /* end < 730px */
2694 @media only screen and (max-width: 665px) and (min-width: 600px) {
2695 .enter-ip input[type="text"] {
2696 max-width: 165px;
2697 }
2698 }
2699 /* end < 665px & > 600px */
2700 @media only screen and (max-width: 600px) {
2701 .toolbar div {
2702 width: 100%;
2703 }
2704
2705 .add-btn {
2706 border-top: 1px #ddd solid;
2707 }
2708
2709 .enter-ip {
2710 text-align: center;
2711 }
2712
2713 .enter-ip strong {
2714 display: block;
2715 margin-bottom: 5px;
2716 }
2717
2718 .enter-ip input[type="text"] {
2719 width: 100%;
2720 max-width: 100%;
2721 }
2722
2723 .add-btn input,
2724 .enter-ip .button {
2725 width: 50%;
2726 margin: 0 auto;
2727 }
2728
2729 .enter-ip .button {
2730 margin-top: 10px;
2731 }
2732 }
2733 /* end > 600px */
2734 @media only screen and (max-width: 400px) {
2735 .protect-status strong {
2736 font-size: 12px;
2737 overflow: auto;
2738 }
2739
2740 .add-btn input,
2741 .enter-ip .button {
2742 width: 100%;
2743 }
2744 }
2745 /* end < 400px */
2746 .my-jetpack-actions {
2747 margin: 0 0 40px 0;
2748 }
2749 .my-jetpack-actions .j-col {
2750 padding: 0;
2751 text-align: center;
2752 }
2753 .my-jetpack-actions #user-list {
2754 height: 30px;
2755 margin-top: -1px;
2756 margin-left: -3px;
2757 }
2758
2759 #jetpack-disconnect-content {
2760 display: none;
2761 text-align: center;
2762 }
2763 #jetpack-disconnect-content .cancel-disconnect {
2764 display: block;
2765 margin-top: 10px;
2766 }
2767
2768 .connection-details {
2769 border: 1px #ddd solid;
2770 }
2771 .connection-details.local-user {
2772 margin-bottom: 10px;
2773 }
2774 .connection-details .user-01,
2775 .connection-details .wpuser-02,
2776 .connection-details .action-btns {
2777 padding: 10px;
2778 }
2779 .connection-details .user-01 .button, .connection-details .user-01 select,
2780 .connection-details .wpuser-02 .button,
2781 .connection-details .wpuser-02 select,
2782 .connection-details .action-btns .button,
2783 .connection-details .action-btns select {
2784 margin-top: 5px;
2785 }
2786 .connection-details .wpuser-02 {
2787 margin-top: 10px;
2788 }
2789 .connection-details h3 {
2790 padding: 10px;
2791 margin: 0;
2792 background: #eee;
2793 border-bottom: 1px #ddd solid;
2794 font-size: 14px;
2795 }
2796
2797 .jp-user img {
2798 margin-right: 10px;
2799 border-radius: 50%;
2800 }
2801
2802 .jp-user div,
2803 .wp-user div,
2804 .wp-action div {
2805 display: inline-block;
2806 width: 100%;
2807 }
2808
2809 .j-col.jp-user,
2810 .j-col.wp-user,
2811 .j-col.wp-action {
2812 padding: 0;
2813 }
2814
2815 .my-jetpack-actions select {
2816 max-width: 150px;
2817 }
2818
2819 .j-actions .button:nth-child(3) {
2820 margin-right: 5px;
2821 }
2822
2823 .j-row.disconnect {
2824 text-align: center;
2825 }
2826 .j-row.disconnect .button {
2827 margin: 0 auto;
2828 }
2829
2830 a.what-is-primary {
2831 color: #b4b9be;
2832 margin-left: 4px;
2833 }
2834
2835 @media (max-width: 782px) {
2836 .wp-action {
2837 border-top: 1px #ddd solid;
2838 }
2839 .wp-action h3 {
2840 display: none;
2841 }
2842 }
2843 @media screen and (max-width: 500px) {
2844 .connection-details {
2845 font-size: 11px;
2846 }
2847 .connection-details h3 {
2848 font-size: 12px;
2849 padding: 5px;
2850 }
2851 .connection-details .user-01,
2852 .connection-details .wpuser-02 {
2853 padding: 6px;
2854 white-space: nowrap;
2855 overflow: hidden;
2856 text-overflow: ellipsis;
2857 max-width: 200px;
2858 }
2859 .connection-details .action-btns {
2860 text-align: center;
2861 }
2862 }
2863 @media (max-width: 530px) {
2864 .connection-details .wpuser-02 {
2865 margin-top: 0;
2866 padding: 12px;
2867 }
2868 }
2869 @media screen and (max-width: 450px) {
2870 .j-actions .button {
2871 width: 100%;
2872 margin-bottom: 5px;
2873 text-align: center;
2874 }
2875 .j-actions .button.alignright {
2876 float: none;
2877 }
2878 }
2879 @media screen and (max-width: 350px) {
2880 .user-01,
2881 .wpuser-02 {
2882 max-width: 100px;
2883 }
2884 }
2885 .jp-content .hide {
2886 display: none;
2887 }
2888 .jp-content .pointer {
2889 cursor: pointer;
2890 }
2891 .jp-content .landing {
2892 margin: 0 auto;
2893 z-index: 2;
2894 position: relative;
2895 }
2896 .jp-content h1 {
2897 font: 300 2.57143em/1em "proxima-nova","Open Sans",Helvetica,Arial,sans-serif;
2898 position: relative;
2899 z-index: 3;
2900 width: 100%;
2901 text-align: center;
2902 }
2903 .jp-content h1.success {
2904 color: #81a844;
2905 }
2906 .jp-content .footer {
2907 padding-top: 0;
2908 margin-top: 0;
2909 background-image: none;
2910 }
2911 .jp-content .footer:before {
2912 height: inherit;
2913 }
2914 .jp-content .more-info:before {
2915 content: none;
2916 }
2917
2918 .landing .wpcom-connect {
2919 min-height: 400px;
2920 }
2921
2922 .wpcom-connect .j-col {
2923 padding: 0;
2924 }
2925 .wpcom-connect .connect-desc {
2926 padding-right: 25px;
2927 }
2928 .wpcom-connect .connect-btn {
2929 text-align: center;
2930 }
2931
2932 .module-grid h2 {
2933 color: #000;
2934 font: 300 2.57143em/1em "proxima-nova","Open Sans",Helvetica,Arial,sans-serif;
2935 }
2936
2937 .download-jetpack {
2938 margin-top: 1em !important;
2939 }
2940
2941 #jump-start-area {
2942 margin-top: 35px;
2943 padding-left: 60px;
2944 padding-right: 60px;
2945 background: #fefefe;
2946 border: 1px #dae0e2 solid;
2947 padding-bottom: 20px;
2948 }
2949 #jump-start-area #jumpstart-cta,
2950 #jump-start-area .jumpstart-desc {
2951 padding: 0;
2952 }
2953 #jump-start-area p {
2954 font-size: 14px;
2955 line-height: 185%;
2956 }
2957 #jump-start-area .spinner {
2958 float: none;
2959 margin: 0 auto;
2960 position: absolute;
2961 bottom: 0;
2962 height: 100%;
2963 width: 100%;
2964 background-position: 50% 56%;
2965 background-color: rgba(254, 254, 254, 0.99);
2966 display: block;
2967 opacity: .9;
2968 }
2969
2970 .jumpstart-message p {
2971 padding-right: 25px;
2972 }
2973
2974 .jumpstart-desc {
2975 text-align: left;
2976 }
2977
2978 #jumpstart-cta {
2979 text-align: center;
2980 }
2981
2982 .dismiss-jumpstart {
2983 color: #999;
2984 font-size: 14px;
2985 }
2986
2987 #jumpstart-cta .button,
2988 #jumpstart-cta .button-primary {
2989 margin: 1em;
2990 font-size: 18px;
2991 height: 45px !important;
2992 padding: 8px 15px 1px;
2993 }
2994
2995 #jumpstart-cta .button-primary {
2996 display: block;
2997 margin: 35px 20px 5px 20px;
2998 }
2999
3000 #jp-config-list {
3001 position: relative;
3002 padding-top: 15px;
3003 padding-bottom: 15px;
3004 margin-left: -15px;
3005 margin-right: -15px;
3006 }
3007 #jp-config-list .j-col {
3008 padding: 15px;
3009 }
3010 #jp-config-list strong {
3011 display: inline-block;
3012 }
3013 #jp-config-list small {
3014 display: block;
3015 margin-top: 5px;
3016 line-height: 150%;
3017 }
3018 #jp-config-list .close {
3019 position: absolute;
3020 top: 10px;
3021 right: 0;
3022 text-transform: uppercase;
3023 font-weight: bold;
3024 display: block;
3025 z-index: 5;
3026 }
3027
3028 .jp-config-status {
3029 text-transform: uppercase;
3030 font-size: 10px;
3031 font-weight: bold;
3032 line-height: 100%;
3033 color: #fff;
3034 background: #9fbd72;
3035 border-radius: 2px;
3036 padding: 2px 4px;
3037 display: inline-block;
3038 }
3039
3040 .miguel {
3041 display: none;
3042 position: fixed;
3043 opacity: .35;
3044 bottom: -200px;
3045 left: 0;
3046 z-index: 1;
3047 -webkit-animation: miguel 3.4s 0s ease-in-out;
3048 animation: miguel 3.4s 0s ease-in-out;
3049 }
3050
3051 .miguel:nth-child(2) {
3052 left: 49%;
3053 width: 120px;
3054 height: 131px;
3055 -webkit-animation-duration: 2.4s;
3056 animation-duration: 2.4s;
3057 -webkit-animation-delay: 0s;
3058 animation-delay: 0s;
3059 }
3060
3061 .miguel:nth-child(3) {
3062 left: 23%;
3063 width: 60px;
3064 height: 66px;
3065 -webkit-animation-duration: 4.5s;
3066 animation-duration: 4.5s;
3067 -webkit-animation-delay: 0s;
3068 animation-delay: 0s;
3069 }
3070
3071 @-webkit-keyframes "miguel" {
3072 0% {
3073 -webkit-transform: translate3d(0px, 0px, 0px);
3074 transform: translate3d(0px, 0px, 0px);
3075 }
3076
3077 100% {
3078 -webkit-transform: translate3d(900px, -900px, 0px);
3079 transform: translate3d(900px, -900px, 0px);
3080 }
3081 }
3082 @keyframes "miguel" {
3083 0% {
3084 -webkit-transform: translate3d(0px, 0px, 0px);
3085 transform: translate3d(0px, 0px, 0px);
3086 }
3087
3088 100% {
3089 -webkit-transform: translate3d(900px, -900px, 0px);
3090 transform: translate3d(900px, -900px, 0px);
3091 }
3092 }
3093 @media (max-width: 1147px) {
3094 .jp-content .landing {
3095 padding: 0 2em;
3096 }
3097 .jp-content .footer {
3098 padding-top: 1.5em;
3099 }
3100 }
3101 @media (max-width: 782px) {
3102 #jumpstart-cta .button-primary {
3103 margin: 10px 0 5px 0;
3104 }
3105
3106 #jump-start-area .spinner {
3107 background-position: 50% 35%;
3108 }
3109 }
3110 @media (max-width: 530px) {
3111 .jp-content .landing {
3112 padding: 0 .5em;
3113 }
3114
3115 #jump-start-area {
3116 padding: 0 1em;
3117 }
3118
3119 .jumpstart-message p {
3120 padding-right: 0;
3121 }
3122
3123 #jumpstart-cta .button-primary {
3124 margin: 0 0 5px 0;
3125 padding-bottom: 10px;
3126 }
3127
3128 .footer .a8c-attribution a:after {
3129 top: 6px;
3130 }
3131 }
3132 .nav-horizontal:before, .features:before, .modules:before, .load-more:before, .nav-horizontal:after, .features:after, .modules:after, .load-more:after {
3133 content: "";
3134 display: table;
3135 }
3136 .nav-horizontal:after, .features:after, .modules:after, .load-more:after {
3137 clear: both;
3138 }
3139