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

1,544 lines 26.8 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-group-item-clone{
1236 padding-right:0px !important;
1237 }
1238
1239 .pagelayer-elp-padding{
1240 width:21% !important;
1241 }
1242
1243 .pagelayer-elp-dimension{
1244 width:42% !important;
1245 }
1246
1247 /* END Element Properties Dialog classes */
1248
1249 /* Widget Parameters */
1250
1251 .pagelayer-widgets-form input,
1252 .pagelayer-widgets-form select,
1253 .pagelayer-widgets-form textarea {
1254 border: 1px solid #ddd;
1255 box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
1256 background-color: #fff;
1257 color: #32373c;
1258 outline: 0;
1259 transition: 50ms border-color ease-in-out;
1260 font-size: 15px !important;
1261 line-height: 150% !important;
1262 }
1263
1264 .pagelayer-widgets-form select{
1265 padding:5px;
1266 }
1267
1268 .pagelayer-widgets-form input[type="checkbox"]{
1269 width: auto;
1270 }
1271
1272 .pagelayer-widgets-form{
1273 line-height:150%;
1274 border-top: none;
1275 padding: 8px;
1276 }
1277
1278 /* End Widget Parameters */
1279
1280 .trumbowyg-box{
1281 margin-top:0px !important;
1282 }
1283
1284 .trumbowyg-editor{
1285 min-height: 250px !important;
1286 padding: 10px !important;
1287 }
1288
1289 /* Pagelayer Left bar */
1290
1291 .pagelayer-topbar-holder{
1292 background-color: #3e8ef7;
1293 }
1294
1295 .pagelayer-logo{
1296 font-size:20px;
1297 font-weight: bold;
1298 display: table-cell;
1299 text-align:center;
1300 vertical-align:middle;
1301 color:#fff;
1302 background-color: #3e8ef7;
1303 }
1304
1305 .pagelayer-logo-text{
1306 font-weight: bold;
1307 margin-left: 5px;
1308 line-height: normal;
1309 vertical-align: super;
1310 }
1311
1312 .pagelayer-leftbar{
1313 width:270px !important;
1314 padding-top:0;
1315 background: #E3E3E3 !important;
1316 overflow: hidden;
1317 }
1318
1319 .pagelayer-leftbar-search{
1320 text-align:center;
1321 padding: 10px 40px 10px 25px;
1322 }
1323
1324 .pagelayer-search-field{
1325 width:100%;
1326 line-height:120%;
1327 padding:2px;
1328 }
1329
1330 .pagelayer-shortcodes{
1331 margin-left:17px;
1332 }
1333
1334 .pagelayer-leftbar-group{
1335 width: 100%;
1336 background-repeat: no-repeat;
1337 background-position: center;
1338 font-size: 11px !important;
1339 color: #442E2E;
1340 clear: both;
1341 text-align: center;
1342 font-family: "Open Sans",arial,sans-serif !important;
1343 margin-bottom: 2px;
1344 }
1345
1346 .pagelayer-leftbar-group h5{
1347 font-size: 11px;
1348 line-height: 20px;
1349 text-transform: uppercase;
1350 color: #777;
1351 padding: 5px 0 3px;
1352 margin: 5px;
1353 }
1354
1355 .pagelayer-shortcode-drag, .pagelayer-shortcode-drag:hover{
1356 width: 100px !important;
1357 height:67px !important;
1358 margin-bottom:6px;
1359 margin-left:12px;
1360 background-color:#FFFFFF;
1361 border-radius: 4px;
1362 float: left;
1363 transition: all 0.3s;
1364 border: 1px solid #ccc;
1365 }
1366
1367 .pagelayer-shortcode-drag:hover{
1368 box-shadow: 2px 2px 2px #c6c6c6;
1369 border-color: #00A0D2;
1370 }
1371
1372 .pagelayer-sc{
1373 padding: 4px !important;
1374 margin: 4px auto 0 auto !important;
1375 cursor: move;
1376 }
1377
1378 .pagelayer-shortcode,.pagelayer-shortcode:before{
1379 display:inline-block;
1380 width:22px;
1381 height:22px;
1382 font-size:22px;
1383 line-height:1;
1384 font-family:pagelayer,fontawesome;
1385 text-decoration:inherit;
1386 font-weight:400;
1387 font-style:normal;
1388 vertical-align:top;
1389 text-align:center;
1390 -webkit-transition:color .1s ease-in 0;
1391 transition:color .1s ease-in 0;
1392 -webkit-font-smoothing:antialiased;
1393 -moz-osx-font-smoothing:grayscale;
1394 color: #777;
1395 transition: all 0.3s;
1396 }
1397
1398 .pagelayer-shortcode-inner{
1399 height: 25px;
1400 padding: 0px !important;
1401 }
1402
1403 .pagelayer-shortcode-text{
1404 display: block;
1405 font-family: "Open Sans", Arial,Helvetica,sans-serif;
1406 font-size: 11px !important;
1407 font-style: normal;
1408 line-height: 125%;
1409 margin: 0;
1410 overflow: hidden;
1411 cursor: move;
1412 text-overflow: ellipsis;
1413 text-align: center;
1414 width: 100%;
1415 margin-top: 3px;
1416 color: #777;
1417 transition: all 0.3s;
1418 padding:1px;
1419 }
1420
1421 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
1422 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
1423 color: #00A0D2;
1424 }
1425
1426 /* Pagelayer Editor Icons */
1427 @font-face{font-family:pagelayer;src:url(../fonts/pagelayer.eot)}
1428 @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}
1429
1430 .pagelayer-pl_row:before{content:"\f0c9"} /* e916 */
1431 .pagelayer-pl_inner_row:before{content:"\f022"}
1432 .pagelayer-pl_col:before{content:"\f0db"}
1433 .pagelayer-pl_heading:before{content:"\e90f";font-size:18px;}
1434 .pagelayer-pl_text:before{content:"\f036"}
1435 .pagelayer-pl_code:before{content:"\f044"}
1436 .pagelayer-pl_quote:before{content:"\e906"}
1437 .pagelayer-pl_list:before{content:"\e908";font-size:20px;}
1438 .pagelayer-pl_icon:before{content:"\f006"}
1439 .pagelayer-pl_image:before{content:"\f03e"}
1440 .pagelayer-pl_image_slider:before{content:"\e939";margin-left:-5px;}
1441 .pagelayer-pl_grid_gallery:before{content:"\f00a"}
1442 .pagelayer-pl_image_hotspot:before{content:"\e91c"}
1443 .pagelayer-pl_btn:before{content:"\e90b"}
1444 .pagelayer-pl_btn_grp:before{content:"\f24d"}
1445 .pagelayer-pl_download:before{content:"\e909"}
1446 .pagelayer-pl_social:before{content:"\e938"}
1447 .pagelayer-pl_share:before{content:"\e952"}
1448 .pagelayer-pl_video:before{content:"\f03d"}
1449 .pagelayer-pl_audio:before{content:"\f028"}
1450 .pagelayer-pl_video_lightbox:before{content:"\e910"}
1451 .pagelayer-pl_video_slider:before{content:"\e944"}
1452 .pagelayer-pl_service:before{content:"\e937"}
1453 .pagelayer-pl_tabs:before{content:"\e93c"}
1454 .pagelayer-pl_accordion:before{content:"\e946"}
1455 .pagelayer-pl_table:before{content:"\f0ce"}
1456 .pagelayer-pl_call:before{content:"\e916"}
1457 .pagelayer-pl_modal:before{content:"\e90e"}
1458 .pagelayer-pl_splash:before{content:"\e90c"}
1459 .pagelayer-pl_space:before{content:"\e93a"}
1460 .pagelayer-pl_embed:before{content:"\f121"}
1461 .pagelayer-pl_chart:before{content:"\e94d"}
1462 .pagelayer-pl_google_maps:before{content:"\e924"}
1463 .pagelayer-pl_countdown:before{content:"\e941"}
1464 .pagelayer-pl_pricing:before{content:"\e933"}
1465 .pagelayer-pl_contact:before{content:"\f298"}
1466 .pagelayer-pl_testimonial:before{content:"\e906"}
1467 .pagelayer-pl_alert:before{content:"\f06a"}
1468 .pagelayer-pl_anchor:before{content:"\f13d"}
1469 .pagelayer-pl_progress:before{content:"\f0ae"}
1470 .pagelayer-pl_social_grp:before{content:"\f029"}
1471 .pagelayer-pl_share_grp:before{content:"\e952"}
1472 .pagelayer-pl_counter:before{content:"\f162"}
1473 .pagelayer-pl_shortcodes:before{content:"\f141"}
1474 .pagelayer-pl_divider:before{content:"\f2d1"}
1475 .pagelayer-pl_stars:before{content:"\f123"}
1476 .pagelayer-pl_block:before{content:"\f0c8"}
1477 .pagelayer-pl_collapse:before{content:"\f233"}
1478 .pagelayer-pl_iconbox:before{content:"\e912"}
1479 .pagelayer-pl_tooltip:before{content:"\f27a"} /*f18d*/
1480 .pagelayer-pl_badge:before{content:"\f2c1"}
1481 .pagelayer-pl_wp_widgets:before{content:"\e945"}
1482 .pagelayer-pl_wp_custom_menu:before{content:"\e92a"}
1483 .pagelayer-pl_wp_posts_grid:before{content:"\e92f"}
1484 .pagelayer-pl_wp_posts_slider:before{content:"\e951"}
1485 .pagelayer-pl_wp_comments:before{content:"\e970"}
1486 .pagelayer-pl_wp_pages:before{content:"\e92e"}
1487 .pagelayer-pl_wp_posts:before{content:"\e912"}
1488 .pagelayer-pl_wp_calendar:before{content:"\f073"}
1489 .pagelayer-pl_wp_categories:before{content:"\e949"}
1490 .pagelayer-pl_wp_archives:before{content:"\f271"}
1491 .pagelayer-pl_wp_tags:before{content:"\e913"}
1492 .pagelayer-pl_wp_title:before{content:"\e90f";font-size:18px;}
1493 .pagelayer-pl_wp_menu:before{content:"\e900";font-size:28px; margin:-3px;}
1494 .pagelayer-pl_arrow_down:before{content:"\e900";font-size:28px; margin:-3px;}
1495 .pagelayer-shortcode[class*="pagelayer-pl_wp_"]:before{content:"\f19a"}
1496
1497 /* Trumbowyg color widget style */
1498 .trumbowyg-dropdown-foreColor,
1499 .trumbowyg-dropdown-backColor {
1500 width: 100% !important;
1501 max-width: 250px !important;
1502 padding: 7px 5px;
1503 left:0 !important;
1504 }
1505
1506 .trumbowyg-dropdown-foreColor svg,
1507 .trumbowyg-dropdown-backColor svg {
1508 display: none !important;
1509 }
1510
1511 .trumbowyg-dropdown-foreColor button[type="button"],
1512 .trumbowyg-dropdown-backColor button[type="button"] {
1513 display: block;
1514 position: relative;
1515 float: left;
1516 text-indent: -9999px;
1517 height: 20px;
1518 width: 20px;
1519 max-height:27px;
1520 max-width:27px;
1521 border: 1px solid #333;
1522 padding: 0;
1523 margin: 2px;
1524 }
1525
1526 .trumbowyg-dropdown-foreColor button[type="button"]:hover::after,
1527 .trumbowyg-dropdown-backColor button[type="button"]:hover::after,
1528 .trumbowyg-dropdown-foreColor button[type="button"]:focus::after,
1529 .trumbowyg-dropdown-backColor button[type="button"]:focus::after{
1530 content: " ";
1531 display: block;
1532 position: absolute;
1533 top: -5px;
1534 left: -5px;
1535 height: 27px;
1536 width: 27px;
1537 max-width:27px;
1538 background: inherit;
1539 border: 1px solid #FFF;
1540 box-shadow: #000 0 0 2px;
1541 z-index: 10;
1542 }
1543
1544 /* Trumbowyg color widget style end */