PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 0.9.3
Page Builder: Pagelayer – Drag and Drop website builder v0.9.3
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.3, at css/pagelayer-editor.css

1,538 lines 26.7 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 .pagelayer-elp-filter-div{
1070 padding: 10px 10px 0px;
1071 box-shadow: 0px 0px 2px rgba(0,0,0,.2);
1072 position: relative;
1073 margin-top: 8px;
1074 border: 1px solid #ddd;
1075 display: none;
1076 position: absolute;
1077 background-color: #fff;
1078 width: 86%;
1079 z-index: 1;
1080 }
1081
1082 .pagelayer-prop-edit{
1083 padding: 7px;
1084 border: 1px solid #ccc;
1085 width: 44px;
1086 position: absolute;
1087 top: 7px;
1088 right: 8px;
1089 text-align: center;
1090 cursor: pointer;
1091 border-radius: 3px;
1092 }
1093
1094 .pagelayer-prop-edit i{
1095 font-size: 20px;
1096 }
1097
1098 .pagelayer-prop-show{
1099 display: block;
1100 }
1101
1102 .pagelayer-elp-shadow-color{
1103 position: relative;
1104 height: 35px;
1105 }
1106
1107 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1108 top:0;
1109 }
1110
1111 .pagelayer-elp-typo:not(:first-child),
1112 .pagelayer-elp-prop-grp{
1113 margin: 3px 0;
1114 padding: 5px 0;
1115 }
1116
1117 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1118 padding: 5px 0;
1119 }
1120
1121 .pagelayer-elp-prop-grp{
1122 position: relative;
1123 }
1124
1125 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1126 top: -3px;
1127 right: 0;
1128 }
1129
1130 .pagelayer-elp-typo .pagelayer-elp-label,
1131 .pagelayer-elp-typo .pagelayer-elp-typo-input,
1132 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
1133 .pagelayer-elp-shadow-div .pagelayer-elp-label,
1134 .pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
1135 width: 50%;
1136 }
1137
1138 .pagelayer-elp-filter-div .pagelayer-elp-label{
1139 width:40%;
1140 text-transform: capitalize;
1141 }
1142
1143 .pagelayer-elp-filter-div .pagelayer-elp-filter-val{
1144 float:right;
1145 width:10%;
1146 font-size:13px;
1147 text-align: right;
1148 }
1149
1150 .pagelayer-elp-typo .pagelayer-elp-label{
1151 font-weight: 600;
1152 font-size: 11px;
1153 color: #555;
1154 }
1155
1156 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1157 .pagelayer-elp-typo-input,
1158 .pagelayer-elp-shadow-input{
1159 padding: 3px;
1160 border-radius: 4px !important;
1161 line-height: 18px !important;
1162 }
1163
1164 .pagelayer-elp-grad-color{
1165 position:relative;
1166 }
1167
1168 /* Left side menu Input related */
1169 .pagelayer-elp-text,
1170 .pagelayer-elp-spinner,
1171 .pagelayer-elp-tinymce-textarea,
1172 .pagelayer-elp-tinymce {
1173 border-radius: 2px !important;
1174 }
1175
1176 .pagelayer-elp-select-div,
1177 .pagelayer-elp-spinner-div{
1178 width: 140px;
1179 right: 10px;
1180 position: absolute;
1181 top: 7px;
1182 }
1183
1184 .pagelayer-elp-spinner-div{
1185 width:85px;
1186 }
1187
1188 .pagelayer-elp-spinner{
1189 padding: 2px 0 2px 6px;
1190 border-radius: 4px !important;
1191 }
1192
1193 .pagelayer-elp-select-div .pagelayer-elp-select {
1194 border-radius: 4px;
1195 padding: 6px;
1196 }
1197
1198 .pagelayer-elpd-body input:focus,
1199 .pagelayer-elpd-body textarea:focus,
1200 .pagelayer-elpd-body select:focus {
1201 border-color: #3e8ef7;
1202 box-shadow: unset;
1203 }
1204
1205 .pagelayer-elp-group-item{
1206 border: 1px solid #777;
1207 font-size: 13px;
1208 margin-bottom: 10px;
1209 }
1210
1211 .pagelayer-elp-group-item-head{
1212 display:flex;
1213 background: #F8F8F8;
1214 }
1215
1216 .pagelayer-elp-group-item-head span{
1217 cursor: pointer;
1218 padding: 9px;
1219 display:inline-block;
1220 }
1221
1222 .pagelayer-elp-group-item-title{
1223 flex-grow: 100;
1224 }
1225
1226 .pagelayer-elp-group-item-del{
1227 float: right;
1228 }
1229
1230 .pagelayer-elp-group-item-body{
1231 display: none;
1232 padding: 7px 10px;
1233 }
1234
1235 .pagelayer-elp-padding{
1236 width:21% !important;
1237 }
1238
1239 .pagelayer-elp-dimension{
1240 width:42% !important;
1241 }
1242
1243 /* END Element Properties Dialog classes */
1244
1245 /* Widget Parameters */
1246
1247 .pagelayer-widgets-form input,
1248 .pagelayer-widgets-form select,
1249 .pagelayer-widgets-form textarea {
1250 border: 1px solid #ddd;
1251 box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
1252 background-color: #fff;
1253 color: #32373c;
1254 outline: 0;
1255 transition: 50ms border-color ease-in-out;
1256 font-size: 15px !important;
1257 line-height: 150% !important;
1258 }
1259
1260 .pagelayer-widgets-form select{
1261 padding:5px;
1262 }
1263
1264 .pagelayer-widgets-form input[type="checkbox"]{
1265 width: auto;
1266 }
1267
1268 .pagelayer-widgets-form{
1269 line-height:150%;
1270 border-top: none;
1271 padding: 8px;
1272 }
1273
1274 /* End Widget Parameters */
1275
1276 .trumbowyg-box{
1277 margin-top:0px !important;
1278 }
1279
1280 .trumbowyg-editor{
1281 min-height: 250px !important;
1282 padding: 10px !important;
1283 }
1284
1285 /* Pagelayer Left bar */
1286
1287 .pagelayer-topbar-holder{
1288 background-color: #3e8ef7;
1289 }
1290
1291 .pagelayer-logo{
1292 font-size:20px;
1293 font-weight: bold;
1294 display: table-cell;
1295 text-align:center;
1296 vertical-align:middle;
1297 color:#fff;
1298 background-color: #3e8ef7;
1299 }
1300
1301 .pagelayer-logo-text{
1302 font-weight: bold;
1303 margin-left: 5px;
1304 line-height: normal;
1305 vertical-align: super;
1306 }
1307
1308 .pagelayer-leftbar{
1309 width:270px !important;
1310 padding-top:0;
1311 background: #E3E3E3 !important;
1312 overflow: hidden;
1313 }
1314
1315 .pagelayer-leftbar-search{
1316 text-align:center;
1317 padding: 10px 40px 10px 25px;
1318 }
1319
1320 .pagelayer-search-field{
1321 width:100%;
1322 line-height:120%;
1323 padding:2px;
1324 }
1325
1326 .pagelayer-shortcodes{
1327 margin-left:17px;
1328 }
1329
1330 .pagelayer-leftbar-group{
1331 width: 100%;
1332 background-repeat: no-repeat;
1333 background-position: center;
1334 font-size: 11px !important;
1335 color: #442E2E;
1336 clear: both;
1337 text-align: center;
1338 font-family: "Open Sans",arial,sans-serif !important;
1339 margin-bottom: 2px;
1340 }
1341
1342 .pagelayer-leftbar-group h5{
1343 font-size: 11px;
1344 line-height: 20px;
1345 text-transform: uppercase;
1346 color: #777;
1347 padding: 5px 0 3px;
1348 margin: 5px;
1349 }
1350
1351 .pagelayer-shortcode-drag, .pagelayer-shortcode-drag:hover{
1352 width: 100px !important;
1353 height:67px !important;
1354 margin-bottom:6px;
1355 margin-left:12px;
1356 background-color:#FFFFFF;
1357 border-radius: 4px;
1358 float: left;
1359 transition: all 0.3s;
1360 border: 1px solid #ccc;
1361 }
1362
1363 .pagelayer-shortcode-drag:hover{
1364 box-shadow: 2px 2px 2px #c6c6c6;
1365 border-color: #00A0D2;
1366 }
1367
1368 .pagelayer-sc{
1369 padding: 4px !important;
1370 margin: 4px auto 0 auto !important;
1371 cursor: move;
1372 }
1373
1374 .pagelayer-shortcode,.pagelayer-shortcode:before{
1375 display:inline-block;
1376 width:22px;
1377 height:22px;
1378 font-size:22px;
1379 line-height:1;
1380 font-family:pagelayer,fontawesome;
1381 text-decoration:inherit;
1382 font-weight:400;
1383 font-style:normal;
1384 vertical-align:top;
1385 text-align:center;
1386 -webkit-transition:color .1s ease-in 0;
1387 transition:color .1s ease-in 0;
1388 -webkit-font-smoothing:antialiased;
1389 -moz-osx-font-smoothing:grayscale;
1390 color: #777;
1391 transition: all 0.3s;
1392 }
1393
1394 .pagelayer-shortcode-inner{
1395 height: 25px;
1396 padding: 0px !important;
1397 }
1398
1399 .pagelayer-shortcode-text{
1400 display: block;
1401 font-family: "Open Sans", Arial,Helvetica,sans-serif;
1402 font-size: 11px !important;
1403 font-style: normal;
1404 line-height: 125%;
1405 margin: 0;
1406 overflow: hidden;
1407 cursor: move;
1408 text-overflow: ellipsis;
1409 text-align: center;
1410 width: 100%;
1411 margin-top: 3px;
1412 color: #777;
1413 transition: all 0.3s;
1414 padding:1px;
1415 }
1416
1417 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1418 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1419 color: #00A0D2;
1420 }
1421
1422 /* Pagelayer Editor Icons */
1423 @font-face{font-family:pagelayer;src:url(../fonts/pagelayer.eot)}
1424 @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}
1425
1426 .pagelayer-pl_row:before{content:"\f0c9"} /* e916 */
1427 .pagelayer-pl_col:before{content:"\f0db"}
1428 .pagelayer-pl_heading:before{content:"\e90f";font-size:18px;}
1429 .pagelayer-pl_text:before{content:"\f036"}
1430 .pagelayer-pl_code:before{content:"\f044"}
1431 .pagelayer-pl_quote:before{content:"\e906"}
1432 .pagelayer-pl_list:before{content:"\e908";font-size:20px;}
1433 .pagelayer-pl_icon:before{content:"\f006"}
1434 .pagelayer-pl_image:before{content:"\f03e"}
1435 .pagelayer-pl_image_slider:before{content:"\e939";margin-left:-5px;}
1436 .pagelayer-pl_grid_gallery:before{content:"\f00a"}
1437 .pagelayer-pl_image_hotspot:before{content:"\e91c"}
1438 .pagelayer-pl_btn:before{content:"\e90b"}
1439 .pagelayer-pl_btn_grp:before{content:"\f24d"}
1440 .pagelayer-pl_download:before{content:"\e909"}
1441 .pagelayer-pl_social:before{content:"\e938"}
1442 .pagelayer-pl_share:before{content:"\e952"}
1443 .pagelayer-pl_video:before{content:"\f03d"}
1444 .pagelayer-pl_audio:before{content:"\f028"}
1445 .pagelayer-pl_video_lightbox:before{content:"\e910"}
1446 .pagelayer-pl_video_slider:before{content:"\e944"}
1447 .pagelayer-pl_service:before{content:"\e937"}
1448 .pagelayer-pl_tabs:before{content:"\e93c"}
1449 .pagelayer-pl_accordion:before{content:"\e946"}
1450 .pagelayer-pl_table:before{content:"\f0ce"}
1451 .pagelayer-pl_call:before{content:"\e916"}
1452 .pagelayer-pl_modal:before{content:"\e90e"}
1453 .pagelayer-pl_splash:before{content:"\e90c"}
1454 .pagelayer-pl_space:before{content:"\e93a"}
1455 .pagelayer-pl_embed:before{content:"\f121"}
1456 .pagelayer-pl_chart:before{content:"\e94d"}
1457 .pagelayer-pl_google_maps:before{content:"\e924"}
1458 .pagelayer-pl_countdown:before{content:"\e941"}
1459 .pagelayer-pl_pricing:before{content:"\e933"}
1460 .pagelayer-pl_contact:before{content:"\f298"}
1461 .pagelayer-pl_testimonial:before{content:"\e906"}
1462 .pagelayer-pl_alert:before{content:"\f06a"}
1463 .pagelayer-pl_anchor:before{content:"\f13d"}
1464 .pagelayer-pl_progress:before{content:"\f0ae"}
1465 .pagelayer-pl_social_grp:before{content:"\f029"}
1466 .pagelayer-pl_counter:before{content:"\f162"}
1467 .pagelayer-pl_shortcodes:before{content:"\f141"}
1468 .pagelayer-pl_divider:before{content:"\f2d1"}
1469 .pagelayer-pl_stars:before{content:"\f123"}
1470 .pagelayer-pl_block:before{content:"\f0c8"}
1471 .pagelayer-pl_collapse:before{content:"\f233"}
1472 .pagelayer-pl_iconbox:before{content:"\e912"}
1473 .pagelayer-pl_tooltip:before{content:"\f18d"}
1474 .pagelayer-pl_badge:before{content:"\f2c1"}
1475 .pagelayer-pl_wp_widgets:before{content:"\e945"}
1476 .pagelayer-pl_wp_custom_menu:before{content:"\e92a"}
1477 .pagelayer-pl_wp_posts_grid:before{content:"\e92f"}
1478 .pagelayer-pl_wp_posts_slider:before{content:"\e951"}
1479 .pagelayer-pl_wp_comments:before{content:"\e970"}
1480 .pagelayer-pl_wp_pages:before{content:"\e92e"}
1481 .pagelayer-pl_wp_posts:before{content:"\e912"}
1482 .pagelayer-pl_wp_calendar:before{content:"\f073"}
1483 .pagelayer-pl_wp_categories:before{content:"\e949"}
1484 .pagelayer-pl_wp_archives:before{content:"\f271"}
1485 .pagelayer-pl_wp_tags:before{content:"\e913"}
1486 .pagelayer-pl_wp_title:before{content:"\e90f";font-size:18px;}
1487 .pagelayer-pl_wp_menu:before{content:"\e900";font-size:28px; margin:-3px;}
1488 .pagelayer-pl_arrow_down:before{content:"\e900";font-size:28px; margin:-3px;}
1489 .pagelayer-shortcode[class*="pagelayer-pl_wp_"]:before{content:"\f19a"}
1490
1491 /* Trumbowyg color widget style */
1492 .trumbowyg-dropdown-foreColor,
1493 .trumbowyg-dropdown-backColor {
1494 width: 100% !important;
1495 max-width: 250px !important;
1496 padding: 7px 5px;
1497 left:0 !important;
1498 }
1499
1500 .trumbowyg-dropdown-foreColor svg,
1501 .trumbowyg-dropdown-backColor svg {
1502 display: none !important;
1503 }
1504
1505 .trumbowyg-dropdown-foreColor button[type="button"],
1506 .trumbowyg-dropdown-backColor button[type="button"] {
1507 display: block;
1508 position: relative;
1509 float: left;
1510 text-indent: -9999px;
1511 height: 20px;
1512 width: 20px;
1513 max-height:27px;
1514 max-width:27px;
1515 border: 1px solid #333;
1516 padding: 0;
1517 margin: 2px;
1518 }
1519
1520 .trumbowyg-dropdown-foreColor button[type="button"]:hover::after,
1521 .trumbowyg-dropdown-backColor button[type="button"]:hover::after,
1522 .trumbowyg-dropdown-foreColor button[type="button"]:focus::after,
1523 .trumbowyg-dropdown-backColor button[type="button"]:focus::after{
1524 content: " ";
1525 display: block;
1526 position: absolute;
1527 top: -5px;
1528 left: -5px;
1529 height: 27px;
1530 width: 27px;
1531 max-width:27px;
1532 background: inherit;
1533 border: 1px solid #FFF;
1534 box-shadow: #000 0 0 2px;
1535 z-index: 10;
1536 }
1537
1538 /* Trumbowyg color widget style end */