PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 0.9.1
Page Builder: Pagelayer – Drag and Drop website builder v0.9.1
2.2.1 2.2.0 2.1.9 2.1.8 2.1.7 2.1.6 2.1.5 2.1.4 2.1.3 trunk 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 1.0.0 1.0.2 1.0.3 1.0.4 1.0.5 All 129 releases
pagelayer / css / pagelayer-editor.css

pagelayer-editor.css in Page Builder: Pagelayer – Drag and Drop website builder 0.9.1, at css/pagelayer-editor.css

1,525 lines 26.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 PAGELAYER
3 http://pagelayer.com/
4 (c) Pagelayer Team
5 */
6
7 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
8
9 html {
10 line-height: 1.15; /* 1 */
11 -webkit-text-size-adjust: 100%; /* 2 */
12 }
13
14 body {
15 margin: 0;
16 }
17
18 main {
19 display: block;
20 }
21
22 h1 {
23 font-size: 2em;
24 margin: 0.67em 0;
25 }
26
27 hr {
28 box-sizing: content-box; /* 1 */
29 height: 0; /* 1 */
30 overflow: visible; /* 2 */
31 }
32
33 pre {
34 font-family: monospace, monospace; /* 1 */
35 font-size: 1em; /* 2 */
36 }
37
38 a {
39 background-color: transparent;
40 }
41
42 abbr[title] {
43 border-bottom: none; /* 1 */
44 text-decoration: underline; /* 2 */
45 text-decoration: underline dotted; /* 2 */
46 }
47
48 b,
49 strong {
50 font-weight: bolder;
51 }
52
53 code,
54 kbd,
55 samp {
56 font-family: monospace, monospace; /* 1 */
57 font-size: 1em; /* 2 */
58 }
59
60 small {
61 font-size: 80%;
62 }
63
64 sub,
65 sup {
66 font-size: 75%;
67 line-height: 0;
68 position: relative;
69 vertical-align: baseline;
70 }
71
72 sub {
73 bottom: -0.25em;
74 }
75
76 sup {
77 top: -0.5em;
78 }
79
80 img {
81 border-style: none;
82 }
83
84 button,
85 input,
86 optgroup,
87 select,
88 textarea {
89 font-family: inherit; /* 1 */
90 font-size: 100%; /* 1 */
91 line-height: 1.15; /* 1 */
92 margin: 0; /* 2 */
93 }
94
95 button,
96 input { /* 1 */
97 overflow: visible;
98 }
99
100 button,
101 select { /* 1 */
102 text-transform: none;
103 }
104
105 button,
106 [type="button"],
107 [type="reset"],
108 [type="submit"] {
109 -webkit-appearance: button;
110 }
111
112 button::-moz-focus-inner,
113 [type="button"]::-moz-focus-inner,
114 [type="reset"]::-moz-focus-inner,
115 [type="submit"]::-moz-focus-inner {
116 border-style: none;
117 padding: 0;
118 }
119
120 button:-moz-focusring,
121 [type="button"]:-moz-focusring,
122 [type="reset"]:-moz-focusring,
123 [type="submit"]:-moz-focusring {
124 outline: 1px dotted ButtonText;
125 }
126
127 fieldset {
128 padding: 0.35em 0.75em 0.625em;
129 }
130
131 legend {
132 box-sizing: border-box; /* 1 */
133 color: inherit; /* 2 */
134 display: table; /* 1 */
135 max-width: 100%; /* 1 */
136 padding: 0; /* 3 */
137 white-space: normal; /* 1 */
138 }
139
140 progress {
141 vertical-align: baseline;
142 }
143
144 textarea {
145 overflow: auto;
146 }
147
148 [type="checkbox"],
149 [type="radio"] {
150 box-sizing: border-box; /* 1 */
151 padding: 0; /* 2 */
152 }
153
154 [type="number"]::-webkit-inner-spin-button,
155 [type="number"]::-webkit-outer-spin-button {
156 height: auto;
157 }
158
159 [type="search"] {
160 -webkit-appearance: textfield; /* 1 */
161 outline-offset: -2px; /* 2 */
162 }
163
164 [type="search"]::-webkit-search-decoration {
165 -webkit-appearance: none;
166 }
167
168 ::-webkit-file-upload-button {
169 -webkit-appearance: button; /* 1 */
170 font: inherit; /* 2 */
171 }
172
173 details {
174 display: block;
175 }
176
177 summary {
178 display: list-item;
179 }
180
181
182 template {
183 display: none;
184 }
185
186 [hidden] {
187 display: none;
188 }
189
190 /* END normalize.css */
191
192 /* An overwrite to show the row irrespective in the editor */
193
194 body {
195 font-family: Arial;
196 font-size:12px;
197 }
198
199 .pagelayer-normalize{
200 height:100%;
201 width:100%;
202 padding:0px;
203 margin:0px;
204 border:0px;
205 }
206
207 /* Pagelayer Top Bar */
208 .pagelayer-bottombar-holder{
209 background: #f69c55;
210 position:relative;
211 }
212
213 .pagelayer-bottombar{
214 padding: auto;
215 }
216
217 .pagelayer-bottombar-rightbuttons button{
218 font-size: 14px;
219 font-weight: bold;
220 cursor: pointer;
221 border-radius: 2px;
222 padding: 4px 8px;
223 margin: auto 5px;
224 }
225
226 .pagelayer-update-button{
227 border: #398439 1px solid;
228 color: #fff;
229 background: #449d44;
230 }
231
232 .pagelayer-close-button{
233 border: #CDCDCD 1px solid;
234 color: #fff;
235 background: #CDCDCD;
236 }
237
238 .pagelayer-mode-wrapper{
239 display:inline-block;
240 text-align:center;
241 }
242
243 .pagelayer-mode-wrapper i{
244 cursor: pointer;
245 padding: 8px;
246 margin: auto 5px;
247 }
248
249 .pagelayer-mode-buttons-wrapper{
250 position:absolute;
251 bottom:100%;
252 color:#fff;
253 background-color: #3e8ef7;
254 display:none;
255 }
256
257 .pagelayer-leftbar-toggle-h{
258 width:0px;
259 }
260
261 .pagelayer-leftbar-toggle{
262 position: absolute;
263 width:12px;
264 background: #E3E3E3;
265 cursor: pointer;
266 text-align:center;
267 line-height:300%;
268 }
269
270 .pagelayer-leftbar-toggle:hover{
271 background-color: #3e8ef7;
272 color: #ffffff;
273 }
274
275 .pagelayer-leftbar-holder{
276 overflow: hidden;
277 position: absolute;
278 top: 0;
279 bottom: 0;
280 left: 0;
281 right: 0;
282 }
283
284 .pagelayer-iframe{
285 }
286
287 .pagelayer-iframe-holder{
288 max-height:100vh !important;
289 height: 100%;
290 overflow: auto;
291 text-align:center;
292 }
293
294 .pagelayer-body{
295 transition:0.5s;
296 }
297
298 .pagelayer-screen-desktop{
299
300 }
301
302 .pagelayer-screen-tablet{
303 width:768px;
304 height:900px;
305 margin:20px auto;
306 border: solid #444;
307 border-width: 30px 10px;
308 border-radius: 10px;
309 }
310
311 .pagelayer-screen-mobile{
312 width:360px;
313 height:540px;
314 margin:20px auto;
315 border: solid #444;
316 border-width: 30px 10px;
317 border-radius: 10px;
318 }
319
320 /* Element Properties Dialog classes */
321 [class^="pagelayer-elp"]{
322 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
323 color: #313439;
324 background-color: transparent;
325 }
326
327 #pagelayer-elpd {
328 background-color: #f1f1f1;
329 display:none;
330 color:#444;
331 border: 1px solid #d3d3d3;
332 }
333
334 #pagelayer-elpd .slimScrollDiv{
335 height: calc(100% - 50px) !important;
336 }
337
338 .pagelayer-elpd-header {
339 background-color: #3e8ef7;
340 border: none;
341 color:#fff;
342 }
343
344 .pagelayer-elpd-title {
345 text-align: center;
346 padding:0px;
347 cursor: move;
348 color: #fff;
349 font-weight: 600;
350 }
351
352 .pagelayer-elpd-close {
353 float:right;
354 padding-right:10px;
355 cursor: pointer;
356 margin: 0px;
357 position: relative;
358 right: 5px;
359 color: #fff;
360 font-weight: 600;
361 }
362
363 .pagelayer-elpd-body{
364 border: none;
365 }
366
367 .pagelayer-elpd-section-rows{
368 background-color: #FFF;
369 }
370
371 .pagelayer-elpd-section-name{
372 margin-top: 10px;
373 padding: 11px 10px;
374 border-bottom: 1px solid #d3d3d3;
375 background-color: #FFF;
376 font-size: 12px;
377 font-weight: bold;
378 color: #666;
379 cursor: pointer;
380 }
381
382 .pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .fa:before{
383 content: "\f0da";
384 }
385 .pagelayer-elpd-section-name.pagelayer-elpd-section-open .fa:before{
386 content: "\f0d7";
387 }
388
389 .pagelayer-elpd-section-name .fa{
390 width:15px;
391 float:right;
392 }
393
394 /* Pagelayer editor panel tabs*/
395
396 .pagelayer-elpd-tab{
397 display: inline-block;
398 font-size: 13px;
399 cursor: pointer;
400 padding: 10px 6px;
401 margin: 0px 5px 0px 0px;
402 }
403
404 .pagelayer-elpd-settings-body{
405 display: none;
406 }
407
408 .pagelayer-elpd-settings-body.active{
409 display: block;
410 }
411
412 .pagelayer-elpd-style-body{
413 display: none;
414 }
415
416 .pagelayer-elpd-style-body.active{
417 display: block;
418 }
419
420 [pagelayer-elpd-active-tab="1"] {
421 color: #3e8ef7;
422 }
423
424 .pagelayer-elpd-tabs {
425 background-color: #fff;
426 border-bottom: 1px solid #d3d3d3;
427 }
428
429 .pagelayer-elpd-options{
430 text-align:right;
431 display:inline-block;
432 margin-right:10px;
433 }
434
435 .pagelayer-elpd-options i{
436 padding:4px 5px;
437 cursor:pointer;
438 }
439
440 .pagelayer-form-item {
441 border-bottom: 1px dashed #e6e6e6;
442 padding: 10px 8px 10px 6px;
443 margin-bottom: 0px;
444 position: relative;
445 }
446
447 .pagelayer-elp-label-div{
448 padding:4px 0px 4px 0px;
449 position:relative;
450 }
451
452 .pagelayer-elp-label{
453 display: inline-block;
454 color: #555;
455 font-size: 12px;
456 line-height: 150%;
457 }
458
459 .pagelayer-elp-screen{
460 display: inline-block;
461 }
462
463 .pagelayer-elp-screen .fa{
464 padding:1px 6px;
465 cursor: pointer;
466 }
467
468 .pagelayer-elp-screen .fa:hover{
469 color: #07a;
470 }
471
472 .pagelayer-elp-screen .fa-tablet{
473 font-size:1.2em;
474 }
475
476 .pagelayer-elp-screen .fa-mobile{
477 font-size:1.3em;
478 }
479
480 .pagelayer-elp-screen{
481 display: inline-block;
482 }
483
484 .pagelayer-elp-units{
485 display: inline-block;
486 float:right;
487 padding-top:4px;
488 }
489
490 .pagelayer-elp-units span{
491 padding:1px 4px;
492 font-size:12px;
493 cursor: pointer;
494 }
495
496 .pagelayer-elp-units span[selected] {
497 color: #3e8ef7;
498 }
499
500 .pagelayer-elp-desc{
501 color: rgba(49, 52, 57, 0.8);
502 font-size: 12px;
503 line-height: 20px;
504 font-style: italic;
505 margin-top: 5px;
506 }
507
508 .pagelayer-elpd-body input,
509 .pagelayer-elpd-body textarea,
510 .pagelayer-elpd-body select,
511 .pagelayer-elpd-body option{
512 font-size: 13px !important;
513 color: #666;
514 border-radius: unset;
515 border:1px solid #CCC;
516 line-height: 26px;
517 width: 100%;
518 }
519
520 .pagelayer-elpd-body input:focus,
521 .pagelayer-elpd-body textarea:focus,
522 .pagelayer-elpd-body select:focus{
523 border-color: #00A0D2;
524 box-shadow: 0 0 1px #00A0D2 inset;
525 }
526
527 .pagelayer-elp-button{
528 text-transform: unset;
529 border: 1px solid #00A0D2;
530 font-weight: unset;
531 font-size: 12px;
532 padding: 12px 10px;
533 min-height: unset;
534 background-color: #3e8ef7;
535 color: #fff;
536 transition: all 0.3s;
537 border-radius: unset;
538 border-radius: 2px;
539 padding: 10px 15px;
540 cursor:pointer;
541 }
542
543 .pagelayer-elp-button:hover{
544 background-color: #3e8ef7bf;
545 border-color: #00A0D2;
546 }
547
548 .pagelayer-elp-image-div{
549 padding:7px;
550 width:90%;
551 margin:5px auto;
552 height:150px;
553 border: 1px solid #d5dadf;
554 position:relative;
555 border: 1px solid #3e8ef7;
556 }
557
558 .pagelayer-elp-image{
559 height: 100%;
560 -webkit-background-size: cover;
561 background-size: cover;
562 background-position: 50%;
563 cursor:pointer;
564 }
565
566 .pagelayer-elp-image-delete{
567 cursor: pointer;
568 position: absolute;
569 top: 4px;
570 right: 4px;
571 background-color: #3e8ef7;
572 padding: 5px 9px;
573 max-width: 28px;
574 max-height: 28px;
575 -webkit-box-sizing: content-box;
576 -moz-box-sizing: content-box;
577 box-sizing: content-box;
578 border-radius: 2px;
579 }
580
581 .pagelayer-elp-image-delete .fa{
582 color: #fff;
583 }
584
585 .pagelayer-hidden{
586 display:none !important;
587 }
588
589 .pagelayer-elp-radio-div{
590 display:flex;
591 }
592
593 .pagelayer-elp-radio{
594 display: inline-block;
595 vertical-align: middle;
596 padding: 6px 8px;
597 cursor: pointer;
598 font-size:12px;
599 color: #666 !important;
600 text-decoration: none;
601 background: #eee;
602 margin: 5px 2px;
603 flex:1;
604 text-align:center;
605 }
606
607 .pagelayer-elp-radio:hover{
608 background-color:#3e8ef7bf !important;
609 color:#fff !important;
610 transition: all 0.6s;
611 }
612
613 .pagelayer-elp-radio-active{
614 background-color: #3e8ef7 !important;
615 color:#ffffff !important;
616 }
617
618 .pagelayer-elp-color-div{
619 cursor: pointer;
620 padding: 4px;
621 width: 50px;
622 height: 25px;
623 display: block;
624 border-radius: 2px;
625 margin: 0 auto;
626 position: absolute;
627 top: 5px;
628 right: 7px;
629 border: solid 1px #d1d1d1;
630 color: #333;
631 vertical-align: middle;
632 }
633
634 .pagelayer-elp-color-preview{
635 height: 93%;
636 border: solid 1px #d1d1d1;
637 }
638
639 .picker_arrow {
640 display:none;
641 }
642
643 .picker_wrapper {
644 top: 13px !important;
645 right: -15px !important;
646 }
647
648 .pagelayer-elp-color-span{
649 padding: 2px 0;
650 height: 28px;
651 line-height: 28px;
652 float: left;
653 font-size: 10px;
654 }
655
656 .pagelayer-elp-color-div .picker_wrapper{
657 margin-top: 22px !important;
658 border: 1px solid rgba(0,0,0,0.2) !important;
659 background: #fff !important;
660 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
661 }
662
663 .pagelayer-elp-icon-div{
664 cursor: pointer;
665 padding: 6px;
666 border: solid 1px #d1d1d1;
667 background: #fffffc;
668 color: #333;
669 vertical-align: middle;
670 width: 126px;
671 height: 18px;
672 display: block;
673 border-radius: 4px;
674 margin: 0 auto;
675 position: absolute;
676 top: 7px;
677 right: 10px;
678 }
679
680 .pagelayer-elp-icon-preview{
681 position: relative;
682 display: block;
683 margin-right: 5px;
684 float: left;
685 width: 83%;
686 height: auto;
687 border: none;
688 overflow: hidden;
689 white-space: nowrap;
690 text-overflow: ellipsis;
691 }
692
693 .pagelayer-elp-icon-preview i{
694 padding-right: 5px;
695 font-size: 19px;
696 color: #666;
697 vertical-align: middle;
698 }
699
700 .pagelayer-elp-icon-name{
701 font-size: 13px;
702 }
703
704 .pagelayer-elp-icon-open{
705 float: right;
706 font-size: 10px;
707 padding: 0px;
708 line-height: 20px;
709 }
710
711 .pagelayer-elp-icon-remove{
712 position: absolute;
713 right: 20px;
714 font-size: 11px;
715 top: 10px;
716 z-index: 10;
717 }
718
719 .pagelayer-elp-icon-selector{
720 position: absolute;
721 z-index: 1000;
722 border: 1px solid rgba(0,0,0,0.2) !important;
723 background: #fff !important;
724 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
725 -webkit-border-radius: 2px !important;
726 text-shadow: none !important;
727 padding: 5px;
728 height: auto;
729 box-sizing: border-box;
730 display: none;
731 width: 70%;
732 border-radius: 2px;
733 margin: 0 0 0 auto;
734 top: 40px;
735 right: 10px;
736 }
737
738 .pagelayer-elp-search-icon{
739 margin-bottom: 5px !important;
740 padding: 2px 6px;
741 line-height: 20px !important;
742 border-radius: 3px !important;
743 }
744
745 .pagelayer-elp-icon-list{
746 width: 100%;
747 -moz-box-sizing: border-box;
748 -webkit-box-sizing: border-box;
749 box-sizing: border-box;
750 padding: 0;
751 max-height: 183px;
752 overflow-y: auto;
753 }
754
755 .pagelayer-elp-icon-span{
756 display: block;
757 margin: 2px;
758 cursor: pointer;
759 box-sizing: border-box;
760 border: 1px solid #dbdbdb;
761 transition: all 0.3s;
762 font-size: 13px;
763 padding: 3px;
764 }
765
766 .pagelayer-elp-icon-span:hover{
767 border-color: #00A0D2;
768 background-color: #3e8ef7;
769 color: #ffffff;
770 box-shadow: 0px 1px 1px #3e8ef7bf;
771 }
772
773 .pagelayer-elp-icon-span i{
774 font-size: 15px;
775 line-height: 1em;
776 padding: 3px;
777 color: #555;
778 transition: all 0.3s;
779 vertical-align: middle;
780 }
781
782 .pagelayer-elp-icon-span:hover i{
783 color: #ffffff;
784 }
785
786
787 .pagelayer-video{
788 width: 100% !important;
789 /* background: #ccc; */
790 position: relative;
791 /* top: -40px;
792 float: right;
793 border-radius: 0px 4px 4px 0px; */
794 }
795
796 .pagelayer-video i{
797 top: 10px;
798 position: relative;
799 left: 8px;
800 }
801
802 .pagelayer-elp-slider-div{
803 display: flex;
804 padding: 7px 0 0;
805 }
806
807 input.pagelayer-elp-slider{
808 -webkit-appearance: none;
809 width: 75%;
810 height: 10px;
811 border-radius: 5px;
812 background: #d3d3d3 !important;
813 outline: none;
814 opacity: 0.7;
815 -webkit-transition: .2s;
816 transition: opacity .2s;
817 font-size: 0px !important;
818 padding: 0;
819 }
820
821 .pagelayer-elp-slider:focus{
822 border-color: transparent;
823 box-shadow: 0 0 1px transparent;
824 }
825
826 .pagelayer-elp-slider:hover{
827 opacity: 1;
828 }
829
830 .pagelayer-elp-slider::-webkit-slider-thumb{
831 -webkit-appearance: none;
832 appearance: none;
833 width: 15px;
834 height: 15px;
835 border-radius: 50%;
836 background: #4CAF50;
837 cursor: pointer;
838 }
839
840 .pagelayer-elp-slider::-moz-range-thumb{
841 width: 15px;
842 height: 15px;
843 border-radius: 50%;
844 background: #00A0D2;
845 cursor: pointer;
846 }
847
848 .pagelayer-elp-slider-value{
849 width: 23% !important;
850 margin-left: 2%;
851 margin-top: -10px;
852 border-radius: 4px;
853 }
854
855 .pagelayer-elp-datetime-div{
856 position: relative;
857 }
858
859 .pagelayer-elp-fa-calendar{
860 position: absolute;
861 height: 40px;
862 width: 40px;
863 background: #000;
864 right: 0;
865 top: 0;
866 }
867
868 .pagelayer-elp-checkbox-div{
869 top: 13px;
870 right:7px;
871 position: absolute;
872 }
873
874 input[type="checkbox"].pagelayer-elp-checkbox{
875 font-size: 30px;
876 -webkit-appearance: none;
877 -moz-appearance: none;
878 appearance: none;
879 width: 3.5em;
880 height: 1.7em;
881 background: #ddd;
882 border-radius: 3em;
883 position: relative;
884 cursor: pointer;
885 outline: none;
886 -webkit-transition: all .2s ease-in-out;
887 transition: all .2s ease-in-out;
888 }
889
890 input[type="checkbox"].pagelayer-elp-checkbox:checked{
891 background-color: #3e8ef7;
892 }
893
894 input[type="checkbox"].pagelayer-elp-checkbox:after{
895 position: absolute;
896 content: "";
897 width: 1.5em;
898 height: 1.5em;
899 border-radius: 50%;
900 background: #fff;
901 -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
902 box-shadow: 0 0 .25em rgba(0,0,0,.3);
903 -webkit-transform: scale(.7);
904 transform: scale(.7);
905 left: 0;
906 -webkit-transition: all .2s ease-in-out;
907 transition: all .2s ease-in-out;
908 }
909
910 input[type="checkbox"].pagelayer-elp-checkbox:checked:after{
911 left: calc(100% - 1.5em);
912 }
913
914 .pagelayer-elp-input-icon,
915 .pagelayer-elp-pos-rel{
916 position: relative;
917 }
918
919 .pagelayer-elp-input-icon input{
920 width: 83%;
921 }
922
923 .pagelayer-elp-input-icon i.fa {
924 padding: 6px 10px;
925 position: relative;
926 top: 2px;
927 border: 1px solid #d1d1d1;
928 border-left:0px;
929 cursor: pointer;
930 background:#FFF;
931 }
932
933 .pagelayer-elp-padding-div i.fa{
934 padding:6px 11px;
935 border: 1px solid #d1d1d1;
936 border-left:0px;
937 cursor: pointer;
938 background: #FFF;
939 vertical-align:top;
940 }
941
942 .pagelayer-elp-padding-linked{
943 background: #CCC !important;
944 }
945
946 .pagelayer-elp-dimension-div i.fa{
947 padding:6px 11px;
948 border: 1px solid #d1d1d1;
949 border-left:0px;
950 cursor: pointer;
951 background: #FFF;
952 vertical-align:top;
953 }
954
955 .pagelayer-elp-dimension-linked{
956 background: #CCC !important;
957 }
958
959 .pagelayer-elp-multi_image{
960 padding: 3px;
961 width: 60%;
962 margin: 5px auto;
963 border: 1px solid #d5dadf;
964 position: relative;
965 text-align: center;
966 background: #4CBCDF;
967 color: #fff;
968 font-size: 13px;
969 cursor: pointer;
970 }
971
972 .pagelayer-elp-multi_image{
973 height: 100%;
974 -webkit-background-size: cover;
975 background-size: cover;
976 background-position: 50%;
977 }
978
979 .pagelayer-elp-multi_image-thumbs{
980 margin-top:10px;
981 }
982
983 .pagelayer-elp-multi_image-thumb{
984 display: inline-block;
985 width: 44px;
986 height: 44px;
987 background-size: cover;
988 background-position: 50% 50%;
989 margin: 0 7px 0 0;
990 border: 2px solid #d5dadf;
991 }
992
993 .pagelayer-grid-columns-1 .pagelayer-grid-item{
994 width: 100%;
995 }
996
997 .pagelayer-grid-columns-2 .pagelayer-grid-item{
998 width: 50%;
999 }
1000
1001 .pagelayer-grid-columns-3 .pagelayer-grid-item{
1002 width: 33%;
1003 }
1004
1005 .pagelayer-grid-columns-4 .pagelayer-grid-item{
1006 width: 25%;
1007 }
1008
1009 .pagelayer-grid-columns-5 .pagelayer-grid-item{
1010 width: 20%;
1011 }
1012
1013 .pagelayer-grid-columns-6 .pagelayer-grid-item{
1014 width: 16%;
1015 }
1016
1017 .pagelayer-grid-columns-7 .pagelayer-grid-item{
1018 width: 14%;
1019 }
1020
1021 .pagelayer-grid-columns-8 .pagelayer-grid-item{
1022 width: 12%;
1023 }
1024
1025 .pagelayer-grid-columns-9 .pagelayer-grid-item{
1026 width: 11%;
1027 }
1028
1029 .pagelayer-grid-columns-10 .pagelayer-grid-item{
1030 width: 10%;
1031 }
1032
1033 .pagelayer-grid-item{
1034 float: left;
1035 }
1036
1037 .pagelayer-elp-audio-div,
1038 .pagelayer-elp-media-div{
1039 position: relative;
1040 }
1041
1042 .pagelayer-elp-audio,
1043 .pagelayer-elp-media{
1044 width: calc(100% - 40px);
1045 }
1046
1047 .pagelayer-elp-audio-insert,
1048 .pagelayer-elp-media-select{
1049 position: absolute;
1050 top: 0;
1051 right: 0;
1052 background-color: #000;
1053 height: 100%;
1054 width: 40px;
1055 -webkit-box-sizing: content-box;
1056 -moz-box-sizing: content-box;
1057 box-sizing: content-box;
1058 }
1059
1060 .pagelayer-elp-select-div .fa{
1061 position: absolute;
1062 right: 12px;
1063 top: 0;
1064 line-height: 40px;
1065 }
1066
1067 .pagelayer-elp-shadow-div,
1068 .pagelayer-elp-typo-div{
1069 padding: 10px 10px 0px;
1070 box-shadow: 0px 0px 2px rgba(0,0,0,.2);
1071 position: relative;
1072 margin-top: 8px;
1073 border: 1px solid #ddd;
1074 display: none;
1075 position: absolute;
1076 background-color: #fff;
1077 width: 86%;
1078 z-index: 1;
1079 }
1080
1081 .pagelayer-prop-edit{
1082 padding: 7px;
1083 border: 1px solid #ccc;
1084 width: 44px;
1085 position: absolute;
1086 top: 7px;
1087 right: 8px;
1088 text-align: center;
1089 cursor: pointer;
1090 border-radius: 3px;
1091 }
1092
1093 .pagelayer-prop-edit i{
1094 font-size: 20px;
1095 }
1096
1097 .pagelayer-prop-show{
1098 display: block;
1099 }
1100
1101 .pagelayer-elp-shadow-color{
1102 position: relative;
1103 height: 35px;
1104 }
1105
1106 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1107 top:0;
1108 }
1109
1110 .pagelayer-elp-typo:not(:first-child),
1111 .pagelayer-elp-prop-grp{
1112 margin: 3px 0;
1113 padding: 5px 0;
1114 }
1115
1116 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1117 padding: 5px 0;
1118 }
1119
1120 .pagelayer-elp-prop-grp{
1121 position: relative;
1122 }
1123
1124 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1125 top: -3px;
1126 right: 0;
1127 }
1128
1129 .pagelayer-elp-typo .pagelayer-elp-label,
1130 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1131 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1132 .pagelayer-elp-shadow-div .pagelayer-elp-label,
1133 .pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
1134 width: 50%;
1135 }
1136
1137 .pagelayer-elp-typo .pagelayer-elp-label{
1138 font-weight: 600;
1139 font-size: 11px;
1140 color: #555;
1141 }
1142
1143 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1144 .pagelayer-elp-typo-input,
1145 .pagelayer-elp-shadow-input{
1146 padding: 3px;
1147 border-radius: 4px !important;
1148 line-height: 18px !important;
1149 }
1150
1151 .pagelayer-elp-grad-color{
1152 position:relative;
1153 }
1154
1155 /* Left side menu Input related */
1156 .pagelayer-elp-text,
1157 .pagelayer-elp-spinner,
1158 .pagelayer-elp-tinymce-textarea,
1159 .pagelayer-elp-tinymce {
1160 border-radius: 2px !important;
1161 }
1162
1163 .pagelayer-elp-select-div,
1164 .pagelayer-elp-spinner-div{
1165 width: 140px;
1166 right: 10px;
1167 position: absolute;
1168 top: 7px;
1169 }
1170
1171 .pagelayer-elp-spinner-div{
1172 width:85px;
1173 }
1174
1175 .pagelayer-elp-spinner{
1176 padding: 2px 0 2px 6px;
1177 border-radius: 4px !important;
1178 }
1179
1180 .pagelayer-elp-select-div .pagelayer-elp-select {
1181 border-radius: 4px;
1182 padding: 6px;
1183 }
1184
1185 .pagelayer-elpd-body input:focus,
1186 .pagelayer-elpd-body textarea:focus,
1187 .pagelayer-elpd-body select:focus {
1188 border-color: #3e8ef7;
1189 box-shadow: unset;
1190 }
1191
1192 .pagelayer-elp-group-item{
1193 border: 1px solid #777;
1194 font-size: 13px;
1195 margin-bottom: 10px;
1196 }
1197
1198 .pagelayer-elp-group-item-head{
1199 display:flex;
1200 background: #F8F8F8;
1201 }
1202
1203 .pagelayer-elp-group-item-head span{
1204 cursor: pointer;
1205 padding: 9px;
1206 display:inline-block;
1207 }
1208
1209 .pagelayer-elp-group-item-title{
1210 flex-grow: 100;
1211 }
1212
1213 .pagelayer-elp-group-item-del{
1214 float: right;
1215 }
1216
1217 .pagelayer-elp-group-item-body{
1218 display: none;
1219 padding: 7px 10px;
1220 }
1221
1222 .pagelayer-elp-padding{
1223 width:21% !important;
1224 }
1225
1226 .pagelayer-elp-dimension{
1227 width:42% !important;
1228 }
1229
1230 /* END Element Properties Dialog classes */
1231
1232 /* Widget Parameters */
1233
1234 .pagelayer-widgets-form input,
1235 .pagelayer-widgets-form select,
1236 .pagelayer-widgets-form textarea {
1237 border: 1px solid #ddd;
1238 box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
1239 background-color: #fff;
1240 color: #32373c;
1241 outline: 0;
1242 transition: 50ms border-color ease-in-out;
1243 font-size: 15px !important;
1244 line-height: 150% !important;
1245 }
1246
1247 .pagelayer-widgets-form select{
1248 padding:5px;
1249 }
1250
1251 .pagelayer-widgets-form input[type="checkbox"]{
1252 width: auto;
1253 }
1254
1255 .pagelayer-widgets-form{
1256 line-height:150%;
1257 border-top: none;
1258 padding: 8px;
1259 }
1260
1261 /* End Widget Parameters */
1262
1263 .trumbowyg-box{
1264 margin-top:0px !important;
1265 }
1266
1267 .trumbowyg-editor{
1268 min-height: 250px !important;
1269 padding: 10px !important;
1270 }
1271
1272 /* Pagelayer Left bar */
1273
1274 .pagelayer-topbar-holder{
1275 background-color: #3e8ef7;
1276 }
1277
1278 .pagelayer-logo{
1279 font-size:20px;
1280 font-weight: bold;
1281 display: table-cell;
1282 text-align:center;
1283 vertical-align:middle;
1284 color:#fff;
1285 background-color: #3e8ef7;
1286 }
1287
1288 .pagelayer-logo-text{
1289 font-weight: bold;
1290 margin-left: 5px;
1291 line-height: normal;
1292 vertical-align: super;
1293 }
1294
1295 .pagelayer-leftbar{
1296 width:270px !important;
1297 padding-top:0;
1298 background: #E3E3E3 !important;
1299 overflow: hidden;
1300 }
1301
1302 .pagelayer-leftbar-search{
1303 text-align:center;
1304 padding: 10px 40px 10px 25px;
1305 }
1306
1307 .pagelayer-search-field{
1308 width:100%;
1309 line-height:120%;
1310 padding:2px;
1311 }
1312
1313 .pagelayer-shortcodes{
1314 margin-left:17px;
1315 }
1316
1317 .pagelayer-leftbar-group{
1318 width: 100%;
1319 background-repeat: no-repeat;
1320 background-position: center;
1321 font-size: 11px !important;
1322 color: #442E2E;
1323 clear: both;
1324 text-align: center;
1325 font-family: "Open Sans",arial,sans-serif !important;
1326 margin-bottom: 2px;
1327 }
1328
1329 .pagelayer-leftbar-group h5{
1330 font-size: 11px;
1331 line-height: 20px;
1332 text-transform: uppercase;
1333 color: #777;
1334 padding: 5px 0 3px;
1335 margin: 5px;
1336 }
1337
1338 .pagelayer-shortcode-drag, .pagelayer-shortcode-drag:hover{
1339 width: 100px !important;
1340 height:67px !important;
1341 margin-bottom:6px;
1342 margin-left:12px;
1343 background-color:#FFFFFF;
1344 border-radius: 4px;
1345 float: left;
1346 transition: all 0.3s;
1347 border: 1px solid #ccc;
1348 }
1349
1350 .pagelayer-shortcode-drag:hover{
1351 box-shadow: 2px 2px 2px #c6c6c6;
1352 border-color: #00A0D2;
1353 }
1354
1355 .pagelayer-sc{
1356 padding: 4px !important;
1357 margin: 4px auto 0 auto !important;
1358 cursor: move;
1359 }
1360
1361 .pagelayer-shortcode,.pagelayer-shortcode:before{
1362 display:inline-block;
1363 width:22px;
1364 height:22px;
1365 font-size:22px;
1366 line-height:1;
1367 font-family:pagelayer,fontawesome;
1368 text-decoration:inherit;
1369 font-weight:400;
1370 font-style:normal;
1371 vertical-align:top;
1372 text-align:center;
1373 -webkit-transition:color .1s ease-in 0;
1374 transition:color .1s ease-in 0;
1375 -webkit-font-smoothing:antialiased;
1376 -moz-osx-font-smoothing:grayscale;
1377 color: #777;
1378 transition: all 0.3s;
1379 }
1380
1381 .pagelayer-shortcode-inner{
1382 height: 25px;
1383 padding: 0px !important;
1384 }
1385
1386 .pagelayer-shortcode-text{
1387 display: block;
1388 font-family: "Open Sans", Arial,Helvetica,sans-serif;
1389 font-size: 11px !important;
1390 font-style: normal;
1391 line-height: 125%;
1392 margin: 0;
1393 overflow: hidden;
1394 cursor: move;
1395 text-overflow: ellipsis;
1396 text-align: center;
1397 width: 100%;
1398 margin-top: 3px;
1399 color: #777;
1400 transition: all 0.3s;
1401 padding:1px;
1402 }
1403
1404 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1405 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1406 color: #00A0D2;
1407 }
1408
1409 /* Pagelayer Editor Icons */
1410 @font-face{font-family:pagelayer;src:url(../fonts/pagelayer.eot)}
1411 @font-face{font-family:pagelayer;src:url(../fonts/pagelayer.woff) format('woff'),url(../fonts/pagelayer.ttf) format("truetype"),url(../fonts/pagelayer.svg#pagelayer) format("svg");font-weight:400;font-style:normal}
1412
1413 .pagelayer-pl_row:before{content:"\f0c9"} /* e916 */
1414 .pagelayer-pl_col:before{content:"\f0db"}
1415 .pagelayer-pl_heading:before{content:"\e90f";font-size:18px;}
1416 .pagelayer-pl_text:before{content:"\f036"}
1417 .pagelayer-pl_code:before{content:"\f044"}
1418 .pagelayer-pl_quote:before{content:"\e906"}
1419 .pagelayer-pl_list:before{content:"\e908";font-size:20px;}
1420 .pagelayer-pl_icon:before{content:"\f006"}
1421 .pagelayer-pl_image:before{content:"\f03e"}
1422 .pagelayer-pl_image_slider:before{content:"\e939";margin-left:-5px;}
1423 .pagelayer-pl_grid_gallery:before{content:"\f00a"}
1424 .pagelayer-pl_image_hotspot:before{content:"\e91c"}
1425 .pagelayer-pl_btn:before{content:"\e90b"}
1426 .pagelayer-pl_btn_grp:before{content:"\f24d"}
1427 .pagelayer-pl_download:before{content:"\e909"}
1428 .pagelayer-pl_social:before{content:"\e938"}
1429 .pagelayer-pl_share:before{content:"\e952"}
1430 .pagelayer-pl_video:before{content:"\f03d"}
1431 .pagelayer-pl_audio:before{content:"\f028"}
1432 .pagelayer-pl_video_lightbox:before{content:"\e910"}
1433 .pagelayer-pl_video_slider:before{content:"\e944"}
1434 .pagelayer-pl_service:before{content:"\e937"}
1435 .pagelayer-pl_tabs:before{content:"\e93c"}
1436 .pagelayer-pl_accordion:before{content:"\e946"}
1437 .pagelayer-pl_table:before{content:"\f0ce"}
1438 .pagelayer-pl_call:before{content:"\e916"}
1439 .pagelayer-pl_modal:before{content:"\e90e"}
1440 .pagelayer-pl_splash:before{content:"\e90c"}
1441 .pagelayer-pl_space:before{content:"\e93a"}
1442 .pagelayer-pl_embed:before{content:"\f121"}
1443 .pagelayer-pl_chart:before{content:"\e94d"}
1444 .pagelayer-pl_google_maps:before{content:"\e924"}
1445 .pagelayer-pl_countdown:before{content:"\e941"}
1446 .pagelayer-pl_pricing:before{content:"\e933"}
1447 .pagelayer-pl_contact:before{content:"\f298"}
1448 .pagelayer-pl_testimonial:before{content:"\e906"}
1449 .pagelayer-pl_alert:before{content:"\f06a"}
1450 .pagelayer-pl_anchor:before{content:"\f13d"}
1451 .pagelayer-pl_progress:before{content:"\f0ae"}
1452 .pagelayer-pl_social_grp:before{content:"\f029"}
1453 .pagelayer-pl_counter:before{content:"\f162"}
1454 .pagelayer-pl_shortcodes:before{content:"\f141"}
1455 .pagelayer-pl_divider:before{content:"\f2d1"}
1456 .pagelayer-pl_stars:before{content:"\f123"}
1457 .pagelayer-pl_block:before{content:"\f0c8"}
1458 .pagelayer-pl_collapse:before{content:"\f233"}
1459 .pagelayer-pl_iconbox:before{content:"\e912"}
1460 .pagelayer-pl_tooltip:before{content:"\f18d"}
1461 .pagelayer-pl_badge:before{content:"\f2c1"}
1462 .pagelayer-pl_wp_widgets:before{content:"\e945"}
1463 .pagelayer-pl_wp_custom_menu:before{content:"\e92a"}
1464 .pagelayer-pl_wp_posts_grid:before{content:"\e92f"}
1465 .pagelayer-pl_wp_posts_slider:before{content:"\e951"}
1466 .pagelayer-pl_wp_comments:before{content:"\e970"}
1467 .pagelayer-pl_wp_pages:before{content:"\e92e"}
1468 .pagelayer-pl_wp_posts:before{content:"\e912"}
1469 .pagelayer-pl_wp_calendar:before{content:"\f073"}
1470 .pagelayer-pl_wp_categories:before{content:"\e949"}
1471 .pagelayer-pl_wp_archives:before{content:"\f271"}
1472 .pagelayer-pl_wp_tags:before{content:"\e913"}
1473 .pagelayer-pl_wp_title:before{content:"\e90f";font-size:18px;}
1474 .pagelayer-pl_wp_menu:before{content:"\e900";font-size:28px; margin:-3px;}
1475 .pagelayer-pl_arrow_down:before{content:"\e900";font-size:28px; margin:-3px;}
1476 .pagelayer-shortcode[class*="pagelayer-pl_wp_"]:before{content:"\f19a"}
1477
1478 /* Trumbowyg color widget style */
1479 .trumbowyg-dropdown-foreColor,
1480 .trumbowyg-dropdown-backColor {
1481 width: 100% !important;
1482 max-width: 250px !important;
1483 padding: 7px 5px;
1484 left:0 !important;
1485 }
1486
1487 .trumbowyg-dropdown-foreColor svg,
1488 .trumbowyg-dropdown-backColor svg {
1489 display: none !important;
1490 }
1491
1492 .trumbowyg-dropdown-foreColor button[type="button"],
1493 .trumbowyg-dropdown-backColor button[type="button"] {
1494 display: block;
1495 position: relative;
1496 float: left;
1497 text-indent: -9999px;
1498 height: 20px;
1499 width: 20px;
1500 max-height:27px;
1501 max-width:27px;
1502 border: 1px solid #333;
1503 padding: 0;
1504 margin: 2px;
1505 }
1506
1507 .trumbowyg-dropdown-foreColor button[type="button"]:hover::after,
1508 .trumbowyg-dropdown-backColor button[type="button"]:hover::after,
1509 .trumbowyg-dropdown-foreColor button[type="button"]:focus::after,
1510 .trumbowyg-dropdown-backColor button[type="button"]:focus::after{
1511 content: " ";
1512 display: block;
1513 position: absolute;
1514 top: -5px;
1515 left: -5px;
1516 height: 27px;
1517 width: 27px;
1518 max-width:27px;
1519 background: inherit;
1520 border: 1px solid #FFF;
1521 box-shadow: #000 0 0 2px;
1522 z-index: 10;
1523 }
1524
1525 /* Trumbowyg color widget style end */